/**
 * Styles principaux — grille produits et mise en page des vignettes
 *
 * Styles front-end du theme : grille produits, barre d'outils boutique, mise en
 * page des vignettes WooCommerce, composants d'en-tete (panier/compte/burger) et
 * bouton « remonter en haut ». Les styles generiques bandeau promo / logo bio /
 * icone panier ont ete migres dans le plugin (frontend/css/cc-frontend.css).
 *
 * @file        defaut.css
 * @package     CC-Origine
 * @subpackage  CSS
 * @since       0.1.0
 * @version     1.1.3
 * @author      Microlibre <contact@microlibre.net>
 * @copyright   2026 Microlibre
 * @license     GPL-2.0+ https://www.gnu.org/licenses/gpl-2.0.html
 * @link        https://github.com/jf34000/cc-origine
 */


/* Police texte sur le corps + cellules de tableau et champs de formulaire
   (qui n'héritent pas naturellement). Consomme la variable : NE PAS remettre de
   stack en dur ici (defaut.css charge après le <style> inline du Customizer). */
body,
p,
li,
td,
th,
input,
select,
textarea,
button {
    font-family: var(--cc-police-texte);
}



/* Palette couleur (namespace --cc-couleur-front-*) : migrée dans css/palette.css.
   defaut.css n'en est plus que CONSOMMATEUR (le :root historique + ses 5 variables
   mortes — boutons, entete-foncee/claire, fond-vignette, bordure-vignette — ont
   été supprimés). ombre-standard/moyenne sont devenues plugin-only.

   Breakpoints de référence (non utilisables en var() dans @media) :
   - Mobile : < 768px
   - Tablette : 768px – 1199px
   - Desktop : 1200px – 1599px
   - Grand écran : 1600px – 1919px
   - Très grand écran : ≥ 1920px
   Breakpoints figés, point de vérité dans css/base.css. */



/* ****************************************
/*  Global
*******************************************/

#primary {
    background-color: var(--cc-couleur-front-arriere-plan);   
}

#main {
    padding: 10px !important;
}

.entry-content > .alignwide {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.home .entry-content {
    padding: 10px 0 !important;
}
.home #main {
    padding: 0px !important;
}

@media (max-width: 1199px) {
    #main {
        padding: 10px !important;
    }
}

/* Couleur des liens : portée par le socle (base.css). */

/* ****************************************
/*  Boutons WooCommerce
*******************************************/

/* --- Boutons classiques WooCommerce --- */
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button {
    background-color: var(--cc-couleur-front-primaire) !important;
    color: var(--cc-couleur-front-primaire-texte);
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    line-height: 1.4;
}

/* Boutons d'action principale (alt) */
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce a.button.alt {
    background-color: var(--cc-couleur-front-primaire);
    color: var(--cc-couleur-front-primaire-texte);
}

/* Hover / focus */
.woocommerce .button:hover,
.woocommerce .button:focus,
.woocommerce button.button:hover,
.woocommerce button.button:focus,
.woocommerce a.button:hover,
.woocommerce a.button:focus,
.woocommerce input.button:hover,
.woocommerce input.button:focus {
    background-color: color-mix(in srgb, var(--cc-couleur-front-primaire), black 15%);
    color: var(--cc-couleur-front-primaire-texte);
    transform: translateY(-1px);
}

/* Bouton désactivé */
.woocommerce .button:disabled,
.woocommerce .button.disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* --- Boutons WC Blocks (panier/checkout modernes) --- */
.wc-block-components-button {
    background-color: var(--cc-couleur-front-primaire) !important;
    color: var(--cc-couleur-front-primaire-texte) !important;
    border: none !important;
    border-radius: 5px !important;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.wc-block-components-button:hover,
.wc-block-components-button:focus {
    background-color: color-mix(in srgb, var(--cc-couleur-front-primaire), black 15%) !important;
    transform: translateY(-1px);
}

.button:not(.checkout) {
    border-color: var(--cc-couleur-front-primaire) !important;
    
}

.widget_shopping_cart .buttons .button.wc-forward {
    color: var(--cc-couleur-front-primaire-texte) !important;
}


/******************************************
*
* Menu latéral
*
*******************************************/
div.iksm-term__inner {
    border-left: 4px solid var(--cc-couleur-front-primaire) !important;
}

div.iksm-term__inner {
    background-color: var(--cc-couleur-front-arriere-plan) !important;
}

div.iksm-term__inner:hover {
    background-color: var(--cc-couleur-front-secondaire) !important;
}

div.iksm-term--current > .iksm-term__inner{
    background-color: var(--cc-couleur-front-secondaire) !important;
}

span.iksm-term__text {
    word-break: normal !important;
}

.iksm-container .iksm-terms:first-child {
    padding-top: 0px;
}

/* ****************************************
/*  Entete
*******************************************/

/* Hamburger maison (barres) */
.cc-burger-bar {
    background-color: var(--cc-couleur-front-primaire);
}

.dgwt-wcas-search-input {
    background-color: var(--cc-couleur-front-arriere-plan) !important;
    border: 1px var(--cc-couleur-front-bordures) solid !important;
}

/* Infos boutique : aligner la bascule texte→icône sur le header (pivot 1199/1200,
   desktop ≥1200) et non sur le breakpoint 768px du plugin. Spécificité 0,3,0
   (> plugin 0,2,0) → l'emporte quel que soit l'ordre de chargement, sans !important. */
@media (max-width: 1199px) {
    .cc-header-actions .cc-zone-header-infos .cc-info-boutique-header {
        display: none;
    }
    .cc-header-actions .cc-zone-header-infos .cc-info-boutique-mobile-wrap {
        display: flex;
    }
}

/* Icône panier maison */
.cc-cart-icon {
    display: inline-block;
    vertical-align: middle;
    background: var(--cc-couleur-front-primaire) url('../images/shopping-bag.webp') center / 60% no-repeat;
}

/* Badge compteur du panier (cream, masqué si vide) */
.cc-cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background-color: var(--cc-couleur-front-secondaire);
    color: var(--cc-couleur-front-texte-principal);
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    font-weight: 600;
}
.cc-cart-count--empty {
    display: none;
}

/* Icône Mon compte maison */
.cc-account-icon {
    display: inline-block;
    vertical-align: middle;
    background: var(--cc-couleur-front-primaire) url('../images/moncompte_blanc.webp') center / 60% no-repeat;
}

/* Taille et forme communes aux icônes header maison */
.cc-account-icon,
.cc-cart-icon {
    box-sizing: content-box;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    padding: 4px;
}

/* Recherche FiboSearch en mode ICÔNE dès le 1er paint (mobile/tablette ≤1199).
   FiboSearch (layout « Flexible icon ») rend la BARRE par défaut côté serveur,
   puis son JS ajoute .dgwt-wcas-layout-icon-flexible-loaded et bascule en icône
   sur mobile. Ce repli APRÈS affichage faisait rétrécir le header (≈189→125px)
   sans re-mesure de --cc-header-h (cc-header.js) → bande blanche au-dessus du
   contenu jusqu'au 1er scroll (qui déclenche un resize via la barre d'adresse).
   On pré-applique ici l'état final (barre masquée, icône affichée) SANS attendre
   -loaded → le header a sa hauteur définitive dès le 1er paint : aucun flash, aucun gap.
   !important : bat la règle interne FiboSearch :not(.-loaded) qui affiche la barre.
   En mobile l'icône ouvre un overlay plein écran (js-dgwt-wcas-mobile-overlay) ; le
   form inline reste display:none même à l'état stabilisé → notre règle = l'état
   final, sans conflit. Aligné sur le breakpoint FiboSearch (1199/1200, cf. search.php). */
@media (max-width: 1199px) {
    .cc-header-search .dgwt-wcas-search-form { display: none !important; }
    .cc-header-search .dgwt-wcas-search-icon { display: inline-flex !important; }
}

/* Icône recherche FiboSearch custom dans le header — même style que les autres icônes (mobile uniquement) */
@media (max-width: 1199px) {
    a.dgwt-wcas-search-icon {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        box-sizing: content-box;
        width: 32px !important;
        height: 32px !important;
        line-height: 32px !important;
        font-size: 0 !important;
        border-radius: 50%;
        padding: 4px !important;
        background: var(--cc-couleur-front-primaire) !important;
    }

    a.dgwt-wcas-search-icon svg {
        width: 60% !important;
        height: 60% !important;
        fill: var(--cc-couleur-front-primaire-texte) !important;
    }
}

/* Correction Firefox mobile : icônes ~20% plus grosses que les autres navigateurs */
@supports (-moz-appearance: none) {
    @media (max-width: 768px) {
        .cc-account-icon,
        .cc-cart-icon {
            width: 26px;
            height: 26px;
            padding: 3px;
        }

        a.dgwt-wcas-search-icon {
            width: 26px !important;
            height: 26px !important;
            line-height: 26px !important;
            padding: 3px !important;
        }
    }
}

span.iksm-term__text {
    color: var(--cc-couleur-front-texte-principal);
}

/* Déroulant « Mon compte » du header : cosmétique portée dans css/base.css
   (.cc-account-menu, fond crème + survol orangé). */

/* Page « Mon compte » : menu latéral WooCommerce en blocs cliquables
   (style « liste pleine + accent gauche », aligné sur le menu de catégories IKSM). */

/* La liste : reset des puces + coins arrondis épousant les blocs */
.woocommerce-MyAccount-navigation ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--cc-couleur-front-bordures);
}

/* Chaque item : conteneur neutre, séparateur entre blocs */
.woocommerce-MyAccount-navigation-link {
    border: none !important;
    border-bottom: 1px solid var(--cc-couleur-front-bordures) !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.woocommerce-MyAccount-navigation-link:last-child {
    border-bottom: none !important;
}

/* Le bloc cliquable = le lien (pleine largeur de la colonne) */
.woocommerce-MyAccount-navigation-link a {
    display: block;
    padding: 11px 16px;
    border-left: 4px solid transparent;
    background-color: var(--cc-couleur-front-arriere-plan);
    color: var(--cc-couleur-front-texte-principal);
    text-decoration: none;
    line-height: 1.4;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Survol / focus : fond crème, accent gauche et texte en primaire */
.woocommerce-MyAccount-navigation-link a:hover,
.woocommerce-MyAccount-navigation-link a:focus {
    background-color: var(--cc-couleur-front-secondaire);
    border-left-color: var(--cc-couleur-front-primaire);
    color: var(--cc-couleur-front-primaire) !important;
}

/* Item courant : accent plein permanent, distinct, non cliquable */
.woocommerce-MyAccount-navigation-link.is-active a {
    background-color: var(--cc-couleur-front-secondaire);
    border-left-color: var(--cc-couleur-front-primaire);
    color: var(--cc-couleur-front-primaire) !important;
    font-weight: 600;
    pointer-events: none;
    cursor: default;
}

/* Notices WooCommerce (info/message) : liseré et icône en jaune orangé */
.woocommerce-info,
.woocommerce-message {
    border-top-color: var(--cc-couleur-front-primaire) !important;
}
.woocommerce-info::before,
.woocommerce-message::before {
    color: var(--cc-couleur-front-primaire) !important;
}

/* ****************************************
/*  Pied de page
/*  Le footer visible (#cc-footer, 3 colonnes) est fourni par le plugin
/*  Caisse-Connect (frontend/css/cc-frontend.css), autonome. Le thème n'a
/*  pas de footer concurrent (cf. footer.php).
*******************************************/



/* ****************************************
/*  Page accueil
*******************************************/

.titre_page_accueil {
    text-align: center;
    font-family: var(--cc-police-titres); /* suit la police des titres (div injecté par le plugin) */
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    font-weight: 600;
    color: var(--cc-couleur-front-forte);
    padding: 15px 5px 25px 5px;
}

/* Entête d'accueil personnalisée (option cc-entete-accueil) : wrapper neutre,
   le commerçant pilote la mise en forme via l'éditeur. Couleur forte par DÉFAUT
   (héritée par le texte courant) ; surchargeable par la couleur choisie dans
   l'éditeur (style inline > règle de classe). Les titres hX gardent la couleur
   de titre du site (base.css cible color directement sur h1-h6). */
.cc-entete-accueil-perso {
    color: var(--cc-couleur-front-forte);
}

.slide-accueil {
    background-color: var(--cc-couleur-front-primaire);
}


/* ****************************************
/*  Page boutique
*******************************************/


/* Barre du haut */
#cc_entete_boutique > .woocommerce-breadcrumb {
    padding: 0 10px;
    margin: 0;
}
.woocommerce-products-header .woocommerce-products-header__title {
    padding: 0 10px;
}
/* Barre d'outils boutique maison .cc-toolbar :
   encadré blanc filtre BeRocket (gauche) | tri (droite). Non collante. */
.cc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background-color: var(--cc-couleur-front-surface-blockwc);
    border: 1px var(--cc-couleur-front-bordures) solid;
    border-radius: 5px;
    padding: 10px;
    margin: 0 10px 20px;   /* marge basse = espace avant la 1re ligne de produits */
}

@media (max-width: 768px) {
    .cc-toolbar {
        margin: 0 0 20px;
        /* Filtre + tri sur la MÊME ligne. La toolbar passe en flex-wrap:wrap sinon :
           le <select> de tri (largeur intrinsèque ~293px = libellé le plus long) +
           le pill Filtres dépassent la largeur dispo (~350px) et le tri repliait à
           la ligne. nowrap + le tri en flex:1 (qui rétrécit) résout. Mobile only :
           sur desktop le .bapf_head est masqué et le conteneur est large. */
        flex-wrap: nowrap;
        /* Ancre le panneau de filtres déplié (.bapf_body en position:absolute). */
        position: relative;
    }
    /* Pill « Filtres » : largeur de son contenu, ancré à gauche. */
    .cc-toolbar .cc-bloc-filtres {
        flex: 0 0 auto;
    }
    /* Tri : occupe toute la place restante de la ligne (troncature native du select).
       margin:0 retire le margin-bottom:1em par défaut de .woocommerce-ordering (WC) :
       align-items:center centre sur la boîte de MARGE → cette marge basse décalait le
       tri de ~7px vers le haut par rapport au pill Filtres. */
    .cc-toolbar form.woocommerce-ordering {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
    }
    .cc-toolbar select.orderby {
        width: 100%;
    }

    /* « Filtres ▾ » habillé comme la boîte de tri (select.orderby) : pill crème,
       arrondi, bordure épaisse. Mêmes tokens/valeurs que select.orderby pour une
       apparence identique. Le !important suit la convention de select.orderby
       (battre BeRocket). APPARENCE seule : le clic continue de déplier .bapf_body
       (accordéon BeRocket inchangé). Le chevron est déjà fourni par BeRocket
       (<i class="fa fa-chevron-down"> dans le h3) → c'est la « flèche » du pill. */
    .cc-toolbar .bapf_head {
        display: inline-flex;
        align-items: center;
        background-color: var(--cc-couleur-front-secondaire) !important;
        border: 2px solid var(--cc-couleur-front-gris-fonce) !important;
        border-radius: 50px !important;
        padding: 3px 16px !important;
        line-height: 1.4 !important;
        cursor: pointer;
    }
    .cc-toolbar .bapf_head h3.bapf_hascolarr {
        margin: 0;
        font-size: 1em;
        font-weight: normal;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    /* Corps de filtres déplié : panneau déroulant pleine largeur sous la toolbar.
       Sorti du flux (position:absolute ancré sur .cc-toolbar) pour NE PAS gonfler
       le bloc filtre (flex:0 0 auto) : sinon, en nowrap, le bloc prendrait la
       largeur « max-content » des badges sur une seule rangée et pousserait le tri
       (et les badges en trop) hors écran. Ici la <ul> interne (déjà flex-wrap:wrap)
       wrappe les badges sur la largeur du panneau → retours à la ligne propres.
       La ligne 1 (pill Filtres + tri) reste inchangée. z-index pour passer
       au-dessus de la grille produits (li.product est position:relative). */
    .cc-toolbar .bapf_body {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 50;
        margin-top: 6px;
        padding: 12px;
        background-color: var(--cc-couleur-front-surface-blockwc);
        border: 1px solid var(--cc-couleur-front-bordures);
        border-radius: 5px;
        box-shadow: 0 6px 18px var(--cc-couleur-front-ombre-legere);
    }
}

/* Défilement infini (cc-infinite-scroll.js) : marqueur observé + spinner de
   chargement affiché entre deux pages de produits. */
.cc-infinite-sentinel {
    width: 100%;
    grid-column: 1 / -1;   /* occupe toute la largeur si placé dans la grille */
}
.cc-infinite-sentinel.is-loading {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}
.cc-infinite-sentinel.is-loading::after {
    content: "";
    width: 28px;
    height: 28px;
    border: 3px solid var(--cc-couleur-front-bordures);
    border-top-color: var(--cc-couleur-front-primaire);
    border-radius: 50%;
    animation: cc-infinite-spin 0.8s linear infinite;
}
@keyframes cc-infinite-spin {
    to { transform: rotate(360deg); }
}

/* Filtres */
/* Étiquette non sélectionnée : fond crème + bordure grise pilotée par variable
   (BeRocket impose nativement border-color:#ccc, on la surcharge pour la rendre modifiable). */
li.bapf_tax_product_tag label {
    background-color: var(--cc-couleur-front-secondaire);
    border-color: var(--cc-couleur-front-gris-fonce) !important;
}
/* Survol étiquette non sélectionnée : bordure gris plus foncé (BeRocket impose #ddd nativement).
   Placée avant la règle de l'état sélectionné pour que l'orange l'emporte au survol d'un pill coché. */
li.bapf_tax_product_tag label:hover {
    border-color: var(--cc-couleur-front-gris-plus-fonce) !important;
}

/* Étiquette sélectionnée : bordure jaune orangé (couleur des boutons), texte gris foncé, au lieu du bleu par défaut BeRocket.
   On cible aussi l'input coché (input:checked) car pendant le chargement AJAX, BeRocket n'a pas encore reposé la classe li.checked. */
.berocket_single_filter_widget .bapf-clean-rounded li.checked label,
.berocket_single_filter_widget .bapf-clean-rounded li input:checked + label,
.berocket_single_filter_widget .bapf-clean-rounded li label:has(input:checked) {
    border-color: var(--cc-couleur-front-primaire) !important;
    color: #444 !important;
}
.berocket_single_filter_widget .bapf-clean-rounded li.checked label:before,
.berocket_single_filter_widget .bapf-clean-rounded li input:checked + label:before,
.berocket_single_filter_widget .bapf-clean-rounded li label:has(input:checked):before {
    border-color: var(--cc-couleur-front-primaire) !important;
}

.bapf_sfilter {
    margin: 0 !important;
}

h3.bapf_hascolarr {
    font-weight: normal;
}

/* Force l'affichage des filtres BeRocket en tablette et desktop (≥769).
   Seuil 769 (pas 768) : 768px appartient au mobile (cf. base.css / matrice
   responsive), où les filtres restent en accordéon BeRocket. */
@media (min-width: 769px) {
    .bapf_head {
        display:none;
    }
    .bapf_body  {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }
}

/* Sélecteur de tri : même apparence que les étiquettes (pill crème, bordure épaisse, hauteur alignée) */
select.orderby {
        background-color: var(--cc-couleur-front-secondaire) !important;
        border-radius: 50px !important;
        border: 2px solid var(--cc-couleur-front-gris-fonce) !important;
        padding: 3px 16px !important;
        line-height: 1.4 !important;
        height: auto !important;
        margin: 0 !important;
}

/* Bouton « remonter en haut » maison (#cc-scroll-top, piloté par cc-scroll-top.js) :
   flèche blanche sur fond couleur forte, rond, fixé en bas à droite. Masqué
   par défaut, révélé via .is-visible quand on a défilé au-delà du seuil. */
#cc-scroll-top {
    display: none;
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 99;
    align-items: center;
    justify-content: center;
    width: 2.6em;
    height: 2.6em;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--cc-couleur-front-forte);
    color: var(--cc-couleur-front-forte-texte);
    cursor: pointer;
}
#cc-scroll-top.is-visible {
    display: flex;
}
#cc-scroll-top svg {
    width: 1.5em;
    height: 1.5em;
    fill: var(--cc-couleur-front-forte-texte);
}




/* ****************************************
/*  Vignettes
*******************************************/

/* Normalisation de la grille produits boutique/catégorie/similaires :
   WooCommerce destine li.product à un layout FLOTTÉ (float:left + width en %,
   ex. .columns-4 li.product { width: 22.05% }). Or .woocommerce ul.products est
   en display:grid (css/base.css + style.css) → sans neutralisation les items se
   replient à ~22 % de leur piste (vignettes minuscules). WooCommerce pose ce
   float sur li.product : il faut le neutraliser en display:grid. La spécificité
   de WC (.columns-N) impose le !important ici. La grille gouverne la largeur,
   le gap gère l'espacement. Scopé à body.woocommerce-page (boutique/catégorie/
   fiche → produits similaires) pour NE PAS toucher le slider d'accueil WoosPro
   (.woopspro-product-slider, hors woocommerce-page), dont Slick pose une width
   inline sur chaque slide.

   margin-bottom : même logique pour l'espacement VERTICAL. woocommerce-smallscreen.css
   (active uniquement ≤768px via media du <link>, sélecteur [class*="columns-"] de
   spécificité 0,4,1) repose margin-bottom:2.992em (~44px) sur la vignette et BAT le
   socle base.css (0,3,0). En mobile 1 colonne, cette marge s'AJOUTE au gap (≈64px
   entre vignettes). On la neutralise → le gap (20px) reste l'unique source d'écart.
   Non scopé mobile : sur desktop cette feuille est inactive et base.css gouverne déjà
   (marge ~1,6px) → neutraliser à 0 ne change que 22→20px (inoffensif). Le !important
   est requis pour battre la spécificité 0,4,1 de smallscreen. */
.woocommerce-page ul.products li.product {
    float: none !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

/* Wrap image de la vignette : ancre position:relative des overlays
   (promo/bio/édition). La carte (fond/bordure/rayon/padding) est portée par
   li.product (css/base.css). */
.cc-product-thumb-wrap {
    position: relative;
}

/* Image produit : remplit la cellule de la grille. SCOPÉ à la vignette de boucle
   (li.product) — surtout PAS global : le mini-panier du header utilise la même
   classe attachment-woocommerce_thumbnail et serait étiré pleine taille. */
li.product img.attachment-woocommerce_thumbnail {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
}

/* Résumé de la vignette :
   titre pleine largeur, puis prix (gauche) + icône panier (poussée à droite). */
.cc-product-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0px;
    padding: 0;
}

.cc-product-summary .cc-loop-product__link {
    flex: 0 0 100%;
}

.cc-product-summary .price {
    flex: 1;
    font-size: 1.3em;
    margin-bottom: 0;
}

/* --- Bas de vignette : wrapper prix + icônes (hauteur contrôlée) ---
   Le PHP (cc_origine_summary_open / cc_origine_bottom_close) enveloppe le prix
   et les icônes expédition/panier dans .cc-product-bottom. Sa hauteur
   (--cc-vignette-bas-h) est la SOURCE DE CONTRÔLE unique ; container-type:size
   permet aux enfants de se dimensionner en cqh (% de cette hauteur), sans
   couplage à la taille de l'image ni duplication de clamp. */
:root {
    /* Relevé (ex-40px) pour loger la 2ᵉ ligne « prix par unité de mesure » dans
       la colonne prix. Les icônes sont désormais bornées (min(cqh,px)) pour ne
       PAS grossir avec ce relèvement. */
    --cc-vignette-bas-h: 54px;
}

.cc-product-bottom {
    flex: 0 0 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--cc-vignette-bas-h);
    container-type: size;
}

/* Colonne prix : prix (ligne 1) + prix par unité de mesure (ligne 2, plugin).
   Largeur = contenu (max prix/prix-unité) ; margin-right:auto pousse les icônes
   à droite (remplace l'ancien flex:1). align-items:center → le prix-unité est
   centré sous le prix (les deux partagent le même axe central). Empilement
   vertical centré ; min-width:0 autorise le rétrécissement sans déborder. */
.cc-product-bottom .cc-prix-col {
    flex: 0 1 auto;
    margin-right: auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Prix (ligne 1) proportionnel à la hauteur du wrapper. Le flex:1 a migré sur
   .cc-prix-col : ici, seulement la typo. Spécificité 0,6,2 (ajout de .cc-prix-col)
   pour battre WooCommerce core. container-type:size restant sur .cc-product-bottom,
   les cqh se résolvent à travers .cc-prix-col. Facteur abaissé (ex-0.8) pour
   laisser place à la 2ᵉ ligne. */
.woocommerce ul.products li.product .cc-product-bottom .cc-prix-col .price {
    font-size: calc(75cqh * 0.55);
    line-height: 1.05;
    margin-bottom: 0;
    padding-left: 0;
}

/* Prix par unité de mesure (ligne 2) en vignette : réduit un peu (ex-.8em du
   plugin), ligne serrée, et 2 px de marge sous le prix pour ne pas être collé. */
.cc-prix-col .cc-prix-unite-mesure {
    font-size: 0.68em;
    line-height: 1;
    margin-top: 2px;
}

/* Icônes BORNÉES : min(cqh, px) → restent ~36px quel que soit le relèvement de
   --cc-vignette-bas-h (découplage exigé par le passage à 2 lignes). Marges plugin
   neutralisées au profit du gap du wrapper. */
.cc-product-bottom .icone-panier-wrap,
.cc-product-bottom .icone-expedition-wrap {
    width: min(90cqh, 36px);
    height: min(90cqh, 36px);
    margin: 0;
}

/* Couleur + graisse des prix produits : surcharge les styles natifs WooCommerce
   (woocommerce.css : « ul.products li.product .price » pose color:$highlight —
   $highlight = adjust-hue(darken($primary,18%),150deg) ≈ vert olive — ET
   font-weight:normal). Ce sélecteur WC est très spécifique (0,4,2) → !important
   sur les deux propriétés pour ne pas dépendre de l'ordre de chargement (toléré
   ici). Couvre la boucle (boutique/catégorie/étiquette/produits similaires +
   slider d'accueil WoosPro, tous wrappés .woocommerce) ET la fiche produit. Le
   prix barré (del) et le prix promo (ins) en promotion sont traités juste après. */
.woocommerce ul.products li.product .price,
.woocommerce div.product .price {
    color: var(--cc-couleur-front-prix) !important;
    font-weight: 700 !important;
}

/* Fiche produit : prix de l'article agrandi, et marge basse réduite pour que le
   prix par unité de mesure (span --single, rendu juste après par le plugin) se
   place immédiatement dessous — sans le grand écart de la marge <p> par défaut. */
.woocommerce div.product p.price {
    font-size: 1.6em;
    line-height: 1.2;
    margin-bottom: 0.15em;
}

/* Prix en PROMOTION (vignette de boucle) : le markup WC est
   « .price > del (prix de base barré) + ins (prix promo) ».
   - <del> : prix de base affiché plus petit et NON gras (il hérite sinon du
     font-size de .cc-product-bottom .price et du font-weight:700 de .price).
   - <ins> : retirer le soulignement posé par défaut par le navigateur sur la
     balise <ins> (le thème ne charge pas la feuille WooCommerce qui le
     neutraliserait), et appliquer la couleur dédiée --cc-couleur-front-prix-promo
     (rouge). La graisse 700 du prix de vente est conservée (héritée de .price).
     Pas de !important : un sélecteur direct sur del/ins l'emporte sur la valeur
     héritée de .price (dont la couleur a un !important porté par .price, pas ins). */
.woocommerce ul.products li.product .price del {
    font-size: 0.7em;
    font-weight: 400;
}
.woocommerce ul.products li.product .price ins {
    color: var(--cc-couleur-front-prix-promo);
    text-decoration: none;
}

/****************** Icone panier ***********************/
/* Styles génériques (.icone-panier-wrap, .icone-panier, responsive, pulse)
   migrés dans le plugin (frontend/css/cc-frontend.css). La poussée des icônes à
   droite est désormais assurée par le flex:1 du prix dans .cc-product-bottom
   (l'ancien margin-left:auto n'est plus nécessaire). */

/* Bouton « Ajouter au panier » WC de boucle : masqué (l'icône panier du plugin
   est le déclencheur visible ; le bouton WC natif ré-ancré reste dans le DOM
   pour le JS de l'icône panier). Il vit maintenant dans .cc-product-bottom
   (wrapper du bas), plus en enfant direct de .cc-product-summary. */
.cc-product-bottom a.add_to_cart_button,
.cc-product-bottom a.added_to_cart {
    display: none !important;
}

/* Mise en page mobile « liste » de la vignette (≤768) : image en clamp à gauche,
   titre et prix décalés à droite. Complète .cc-product-summary ci-dessus.
   (Migré depuis style.css ; !important retirés — sans concurrent à battre :
   le margin/padding du thumb-wrap sont les défauts d'une div ; le font-size du
   titre est déjà posé à 1em par WC core à spécificité supérieure.) */
@media (max-width: 768px) {
    /* Bas de vignette un peu plus haut en mobile (cf. .cc-product-bottom) ;
       relevé pour la 2ᵉ ligne « prix par unité de mesure », cohérent avec le 54px
       desktop. */
    :root {
        --cc-vignette-bas-h: 62px;
    }

    .cc-product-thumb-wrap {
        width: clamp(100px, 40vw, 400px);
        height: clamp(100px, 40vw, 400px);
    }

    .woocommerce-loop-product__title {
        position: absolute;
        right: .5em;
        /* .5em compense le padding de li.product, +5px de marge */
        left: calc(clamp(100px, 40vw, 400px) + .5em + 5px);
        top: 50px;
        font-size: 1em;
    }

    /* Indentation portée par la colonne (et non le seul prix) → les 2 lignes
       (prix + prix-unité) restent alignées en layout « liste ». */
    .cc-product-summary .cc-prix-col {
        padding-left: 1em;
    }
}


/* Logo bio et overlays galerie : gérés par le plugin
   (frontend/css/cc-frontend.css). */

/* Badge promo : restylage du badge natif WooCommerce (span.onsale) repris de
   l'ancien .bandeau-promo (plugin). Phase 1 : APPARENCE seule — la POSITION
   native WC (absolute; top:-0.5em; left:-0.5em; z-index:9) est conservée (non
   déclarée). Le repositionnement « sur l'image » de la fiche produit = Phase 2.
   Sélecteurs à spécificité > « .woocommerce span.onsale » (0,2,1) pour ne pas
   dépendre de l'ordre de chargement des feuilles WooCommerce. */
.woocommerce ul.products li.product span.onsale,   /* boucle : 0,4,2 */
.woocommerce div.product span.onsale {              /* fiche  : 0,3,2 */
    min-width: 0;
    min-height: 0;
    line-height: 1.2;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--cc-couleur-front-promo);
    color: var(--cc-couleur-front-promo-texte);
    box-shadow: 0 2px 5px var(--cc-couleur-front-ombre-legere);
}

body.wp-singular  .related {
    padding: 20px !important;
    margin: 30px 0;
    background-color: var(--cc-couleur-front-surface-blockwc);
    border-radius: 10px;
}
/* ****************************************
/*  Page panier
*******************************************/

/* Gouttière entre la sidebar (large) et le contenu sur les pages blocs WC
   (panier / commande / mon compte) : contrairement à la grille produits, ces
   blocs n'ont pas de padding propre → la carte de contenu collait la colonne de
   gauche. Override du padding de #main (posé en 10px !important plus haut). */
body.woocommerce-cart #main,
body.woocommerce-checkout #main,
body.woocommerce-account #main {
    padding-left: 30px !important;
}
@media (max-width: 768px) {
    body.woocommerce-cart #main,
    body.woocommerce-checkout #main,
    body.woocommerce-account #main {
        padding-left: 10px !important;  /* mobile : sidebar masquée, on reste compact */
    }
}

.wc-block-cart__main .wc-block-cart-items {
    background-color: var(--cc-couleur-front-surface-blockwc) !important;
    border-radius: 10px;
    border: 1px var(--cc-couleur-front-bordures) solid;

}

.wc-block-cart .wc-block-components-sidebar {
    background-color: var(--cc-couleur-front-surface-blockwc) !important;
    border-radius: 10px;
    border: 1px var(--cc-couleur-front-bordures) solid;
    padding: 10px !important;

}

/* ****************************************
/*  Page commande
*******************************************/
.wc-block-checkout__form {
    background-color: var(--cc-couleur-front-surface-blockwc) !important;
    border-radius: 10px;
    border: 1px var(--cc-couleur-front-bordures) solid;
    padding : 10px;
}
.wp-block-woocommerce-checkout-order-summary-block {
    background-color: var(--cc-couleur-front-surface-blockwc) !important;
    border-radius: 10px;
    border: 1px var(--cc-couleur-front-bordures) solid;
}

/* Formulaire « Se connecter / S'inscrire » que le PLUGIN substitue au bloc
   Checkout pour le visiteur déconnecté à panier non vide (surface
   `.cc-checkout-connexion`, cf. § « Contrat consommé côté plugin »).

   ⚠️ C'EST BIEN AU THÈME DE PEINDRE CES DEUX CARTES, ce n'est pas un oubli du
   plugin. Le namespace de contrat `--cc-couleur-front-*` ne porte que des couleurs
   de MARQUE : aucun token de surface n'y est déclaré. Le plugin y pose donc
   géométrie, bordure et espacement, mais AUCUN fond — en poser un l'obligerait
   soit à une valeur en dur (qui ne suivrait aucune palette), soit à consommer
   `--cc-couleur-front-surface-blockwc`, token PROPRE À CE THÈME, c'est-à-dire un
   couplage plugin → thème que le contrat interdit (il est à sens unique).
   Même token que les cartes panier / commande / Mon Compte ci-dessus : ces deux
   cartes suivent donc les palettes, y compris les sombres. */
.cc-checkout-connexion #customer_login .u-column1,
.cc-checkout-connexion #customer_login .u-column2 {
    background-color: var(--cc-couleur-front-surface-blockwc);
}


/* ****************************************
/*  Pages paiement
*******************************************/
.woocommerce-order-details {
    padding : 10px;
    background-color: var(--cc-couleur-front-surface-blockwc) !important;
    border-radius: 10px;
    border: 1px var(--cc-couleur-front-bordures) solid;
}

.woocommerce-customer-details {
    padding : 10px;
    background-color: var(--cc-couleur-front-surface-blockwc) !important;
    border-radius: 10px;
    border: 1px var(--cc-couleur-front-bordures) solid;
}

/* ****************************************
/*  Pages mon-compte
*******************************************/
body.woocommerce-account #main .woocommerce {
    padding : 10px;
    background-color: var(--cc-couleur-front-surface-blockwc) !important;
    border-radius: 10px;
    border: 1px var(--cc-couleur-front-bordures) solid;
}

/* ****************************************
/*  Pages d'informations légales (mentions légales, CGV, etc.)
/*  Classe body cc-page-legale ajoutée par le plugin Caisse-Connect
/*  via filtre body_class.
*******************************************/

/* Masquer le titre auto WP : le titre est déjà dans le contenu Markdown (h1) */
body.cc-page-legale .entry-title {
    display: none;
}

/* Marges latérales sur desktop (≥ 1200px) */
@media (min-width: 1200px) {
    body.cc-page-legale .entry-content {
        padding-left: 10em;
        padding-right: 10em;
    }
}