/**
 * Socle CSS maison — Fondation du thème CC-Origine
 *
 * base.css est le SOCLE du thème : reset léger, typographie, conteneur,
 * formulaires et base WooCommerce minimale, reproduisant les VALEURS
 * EFFECTIVES de l'apparence de référence (capturées au getComputedStyle,
 * cf. Plans/baseline-spec-lot1.md).
 *
 * Cascade (thème standalone) :
 *   cc-base (ce fichier, point de vérité de la cascade)
 *         → style.css / css/defaut.css (ajustements qui surchargent).
 * Aucun !important ici : le socle reste propre.
 *
 * Breakpoints figés : 768 / 1200 / 1600 / 1920 (matrice responsive identique à
 * l'actuel). La palette complète (namespace --cc-couleur-front-*) vit dans
 * css/palette.css ; ce socle n'en est que CONSOMMATEUR.
 *
 * @file        css/base.css
 * @package     CC-Origine
 * @subpackage  CSS
 * @since       1.0.0
 * @version     1.1.1
 * @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
 */

/* ============================================================
 * 1. Couleurs — palette migrée dans css/palette.css
 *    (namespace --cc-couleur-front-*, set par défaut + sets
 *    html[data-cc-palette]). base.css n'en est plus que CONSOMMATEUR :
 *    les --couleur-texte-corps/titres/fond-page d'antan sont devenus
 *    --cc-couleur-front-texte-corps/titres / -fond-page.
 * ============================================================ */

/* ============================================================
 * 2. Reset léger
 * ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

/* Médias fluides */
img,
svg,
video,
iframe {
    max-width: 100%;
}

img,
video {
    height: auto;
}

/* ============================================================
 * 3. Typographie
 *    (valeurs desktop ; downscale mobile ≤768 plus bas)
 * ============================================================ */

/* Polices texte / titres — POINT DE VÉRITÉ de la cascade.
   Défaut identique pour les deux (stack système) → aucun changement visuel
   tant que le Customizer n'est pas touché. Surchargées à l'usage par le
   <style> inline injecté sur le handle cc-base (cf. functions.php :
   cc_origine_injecter_polices_customizer). Ne PAS les redéclarer dans
   defaut.css / style.css (chargés après l'inline → écraseraient le réglage). */
:root {
    --cc-police-texte:  system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --cc-police-titres: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    font-family: var(--cc-police-texte);
    font-size: 16px;
    line-height: 1.65; /* 26.4 / 16 */
    font-weight: 400;
    color: var(--cc-couleur-front-texte-corps);
    background-color: var(--cc-couleur-front-fond-page);
}

/* Titres : famille pilotée par --cc-police-titres (rompt l'héritage du body),
   couleur titres, graisse 600. Tous les titres WooCommerce étant des balises
   hX (titre boutique h1, titres de vignettes, titre fiche produit), ils suivent
   automatiquement ce branchement. Les variantes contextuelles (h1 archive en
   400, titre fiche produit en 20px) sont des surcharges WooCommerce, gérées
   en §6. */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--cc-police-titres);
    color: var(--cc-couleur-front-texte-titres);
    font-weight: 600;
}

h1 {
    font-size: 32px;
    line-height: 1.2;      /* 38.4 / 32 */
    margin: 0 0 19.2px;
}

h2 {
    font-size: 30px;
    line-height: 1.3;      /* 39 / 30 */
    margin: 0 0 21px;
}

h3 {
    font-size: 24px;
    line-height: 1.3;      /* 31.2 / 24 */
    margin: 0 0 20px;
}

h4 {
    font-size: 20px;
    line-height: 1.2;      /* 24 / 20 */
    margin: 0 0 20px;
}

h5 {
    font-size: 18px;
    line-height: 1.2;      /* 21.6 / 18 */
    margin: 0 0 20px;
}

h6 {
    font-size: 16px;
    line-height: 1.25;     /* 20 / 16 */
    margin: 0 0 20px;
}

p {
    margin: 0 0 1.6em;     /* ≈ 25.6px à 16px */
}

/* Liens : noir par défaut (couleur existante) ; soulignement conservé dans le
   contenu, retiré dans la navigation/sidebar. */
a {
    color: var(--cc-couleur-front-liens);
}

/* ============================================================
 * 4. Conteneur / largeur de contenu
 *    Layout fluide pleine largeur (pas de max-width sur le conteneur :
 *    viewport − padding − sidebar).
 * ============================================================ */

.cc-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
}

/* ============================================================
 * 5. Formulaires
 *    Base = famille « WC classique » (radius 0, bordure #D1D5DB).
 *    Les inputs des blocs Checkout (radius 4px, bordure propre) gardent leur
 *    style WC Blocks via des sélecteurs plus spécifiques → NON unifiés.
 * ============================================================ */

input,
select,
textarea,
button {
    font-family: inherit;
    font-size: 100%;
    line-height: inherit;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="password"],
textarea,
select {
    color: var(--cc-couleur-front-texte-corps);
    background-color: var(--cc-couleur-front-surface-champ);
    border: 1px solid var(--cc-couleur-front-bordure-champ);
    border-radius: 0;
    padding: 8px 12px;
}

textarea {
    max-width: 100%;
}

/* ============================================================
 * 6. Base WooCommerce minimale
 * ============================================================ */

/* --- Grille produits : 6 / 5 / 4 / 3 / 1 colonnes (cf. §8 spec) --- */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid;
    grid-template-columns: repeat(var(--cc-columns, 4), minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Neutralise le clearfix WC (ul.products::before/::after) : en display:grid il
   deviendrait un ITEM de grille occupant la 1re cellule → vignette manquante en
   haut à gauche. Inutile ici (grille, pas de float à « clearer »). */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
    display: none;
}

/* --- Carte vignette (base ; overlays positionnés en Lot 4) --- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    position: relative;
    margin: 0 0 1.6px;
    padding: 8px;
    background-color: var(--cc-couleur-front-vignette);
    border: 1px solid var(--cc-couleur-front-bordures);
    border-radius: 5px;
}

/* --- Titres contextuels WooCommerce (surcharges de la base h1) --- */
.woocommerce-products-header__title.page-title {
    font-weight: 400;       /* h1 archive/catégorie : 400 (≠ contenu 600) */
}

.woocommerce div.product .product_title {
    font-size: 20px;        /* titre fiche produit réduit */
    line-height: 1.2;
    margin: 0 0 10px;
}

/* --- Boutons (base ; valeurs effectives capturées) --- */
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button {
    background-color: var(--cc-couleur-front-primaire);
    color: var(--cc-couleur-front-primaire-texte);
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-weight: 600;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
}

.wc-block-components-button {
    background-color: var(--cc-couleur-front-primaire);
    color: var(--cc-couleur-front-primaire-texte);
    border: none;
    border-radius: 5px;
    padding: 15px 30px;
    font-weight: 500;
    text-transform: none;
    box-shadow: none;
}

/* Bouton générique HORS contexte WooCommerce (404, recherche, pagination des
   templates de repli). Spécificité 0,1,0 : sur les pages WC, « .woocommerce
   .button » (0,2,0, plus spécifique) l'emporte → ce style ne touche que les
   .button rendus en dehors d'un conteneur .woocommerce. */
.button {
    display: inline-block;
    background-color: var(--cc-couleur-front-primaire);
    color: var(--cc-couleur-front-primaire-texte);
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

/* ============================================================
 * 7. Layout des zones maison (header, page, sidebar, off-canvas)
 *    Structure + positionnement (sticky, bascule responsive 1200px,
 *    flyouts/déroulant). Les cosmétiques d'icônes (compte/panier/burger,
 *    badge compteur) vivent dans css/defaut.css.
 *    Le footer visible est fourni par le plugin (#cc-footer) ; le thème n'a
 *    pas de footer concurrent.
 *
 *    Propriétés CSS pilotées par js/cc-header.js :
 *      --cc-header-h   : hauteur courante du header (décale #page).
 *      --cc-sticky-top : offset haut des éléments collants (sidebar/off-canvas)
 *                        = barre admin + (header visible ? hauteur : 0).
 * ============================================================ */

/* --- En-tête maison : collant (fixed), bascule desktop/mobile à 1200px --- */
.cc-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--cc-couleur-front-fond-page);
    border-bottom: 1px solid var(--cc-couleur-front-bordures);
    transition: transform 0.25s ease;
}

/* Sous la barre d'admin WP (utilisateur connecté) */
.admin-bar .cc-header {
    top: 32px;
}
@media (max-width: 782px) {
    .admin-bar .cc-header {
        top: 46px;
    }
}

/* Masquage au scroll (tablette + mobile, piloté par cc-header.js) */
.cc-header.cc-header--hidden {
    transform: translateY(-100%);
}

/* Décale le contenu de la hauteur du header fixe (mesurée par le JS ;
   fallback statique le temps que le JS s'exécute). */
.cc-site {
    padding-top: var(--cc-header-h, 90px);
}
@media (max-width: 1199px) {
    .cc-site {
        padding-top: var(--cc-header-h, 160px);
    }
}

/* Layout MOBILE/TABLETTE (≤1199) : 2 rangées (logo centré ; barre d'icônes).
   Rangée d'icônes : burger à gauche, puis un espace flexible (free = 1fr) qui
   pousse à droite le groupe « loupe (recherche) + actions (infos « i » → compte
   → panier) ». La recherche est placée juste AVANT actions pour que la loupe soit
   collée à gauche de l'icône infos « i » (même rythme de 12px que les autres
   icônes du groupe), et non collée au burger. */
.cc-header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas:
        "logo   logo   logo   logo"
        "burger free   search actions";
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
    padding: 10px 16px;
}

.cc-burger         { grid-area: burger; }
.cc-header-logo    { grid-area: logo; justify-self: center; text-align: center; }
.cc-header-search  { grid-area: search; min-width: 0; }
.cc-header-actions { grid-area: actions; }

/* Logo personnalisé (Customizer, the_custom_logo) : le support custom-logo est
   déclaré flex-width/flex-height (functions.php) → WP n'impose aucune taille et
   l'<img> sort à ses dimensions intrinsèques. On le borne ici en HAUTEUR sur la
   hauteur réelle des icônes du header (32px + 2×4px de padding = 40px, cf.
   .cc-account-icon/.cc-cart-icon dans defaut.css) ; largeur libre → ratio
   préservé. Variable surchargeable (réglage Customizer éventuel ultérieur). */
.cc-header-logo .custom-logo {
    display: block;
    width: auto;
    height: auto;
    max-height: var(--cc-logo-max-h, 60px);
}

.cc-header-logo .cc-logo-texte {
    display: inline-block;
    font-size: 1.4em;
    font-weight: 700;
    color: var(--cc-couleur-front-texte-titres);
    text-decoration: none;
}

/* Tagline (description du site) sous le nom, en fallback logo-texte. */
.cc-header-logo .cc-logo-tagline {
    display: block;
    font-size: 0.8em;
    line-height: 1.2;
    color: var(--cc-couleur-front-texte-corps);
}

/* Zone droite : infos boutique (plugin) puis compte + panier */
.cc-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

/* Layout DESKTOP (≥1200) : une rangée logo | recherche | actions */
@media (min-width: 1200px) {
    .cc-header-inner {
        display: flex;
        align-items: center;
        gap: 24px;
        grid-template-areas: none;
        padding: 0 16px;
        min-height: 80px;
    }
    .cc-burger { display: none; }
    .cc-header-logo    { order: 1; flex: 0 0 auto; justify-self: auto; text-align: left; }
    .cc-header-search  { order: 2; flex: 1 1 auto; }
    .cc-header-actions { order: 3; flex: 0 0 auto; }
}

/* --- Hamburger (structure ; couleurs des barres en defaut.css) --- */
.cc-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    padding: 4px;
    background: none;
    border: none;
    cursor: pointer;
}
/* Masqué en desktop — réaffirmé APRÈS la structure pour l'emporter dans la
   cascade (le .cc-burger ci-dessus est postérieur au @media du layout desktop). */
@media (min-width: 1200px) {
    .cc-burger {
        display: none;
    }
}
.cc-burger-bar {
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.cc-burger.is-open .cc-burger-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.cc-burger.is-open .cc-burger-bar:nth-child(2) { opacity: 0; }
.cc-burger.is-open .cc-burger-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* --- Compte + panier : conteneurs et panneaux --- */
.cc-header-item {
    position: relative;
    display: flex;
    align-items: center;
}

.cc-account-menu,
.cc-mini-cart {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1001;
    display: none;
}

/* Ouverture au survol/focus — desktop uniquement (mobile : icônes = liens) */
@media (min-width: 1200px) {
    .cc-account:hover .cc-account-menu,
    .cc-account:focus-within .cc-account-menu,
    .cc-cart:hover .cc-mini-cart,
    .cc-cart:focus-within .cc-mini-cart {
        display: block;
    }
}

.cc-account-menu {
    min-width: 200px;
    padding: 6px 0;
    background-color: var(--cc-couleur-front-arriere-plan);
    border: 1px solid var(--cc-couleur-front-bordures);
    border-radius: 5px;
    box-shadow: 0 6px 18px var(--cc-couleur-front-ombre-legere);
}
.cc-account-menu ul { margin: 0; padding: 0; list-style: none; }
.cc-account-menu a {
    display: block;
    padding: 8px 16px;
    line-height: 1.4;
    color: var(--cc-couleur-front-texte-principal);
    text-decoration: none;
    white-space: nowrap;
}
.cc-account-menu a:hover,
.cc-account-menu a:focus {
    color: var(--cc-couleur-front-primaire);
}

.cc-mini-cart {
    width: 280px;
    max-width: 90vw;
    padding: 0;
    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);
    overflow: hidden;          /* contient le radius sur les zones internes */
    font-size: 14px;
}

/* Contenu WC du mini-panier (woocommerce_mini_cart). Rendu HORS contexte
   .woocommerce (header) → les styles WC scopés .woocommerce ne s'appliquent pas :
   on reproduit l'apparence de la référence (image à GAUCHE, nom + prix, croix de
   suppression en haut-droite, sous-total en flex, 2 boutons pleins empilés). */
/* ⚠️ Sur les pages WC (body.woocommerce), les styles natifs « .woocommerce
   ul.cart_list li … » s'appliquent au mini-panier du header et GAGNENT en
   spécificité (image 32px, padding-left 0 → recouvrement). On repasse devant
   en qualifiant la chaîne ul.woocommerce-mini-cart li.woocommerce-mini-cart-item
   (≥ 3 classes), sans !important. */
.cc-mini-cart ul.woocommerce-mini-cart.cart_list {
    margin: 0;
    padding: 14px 21px;
    list-style: none;
    max-height: 50vh;          /* scroll si débordement vertical */
    overflow-y: auto;
}
.cc-mini-cart ul.woocommerce-mini-cart li.woocommerce-mini-cart-item {
    position: relative;
    padding: 7px 28px 7px 70px;  /* gauche 70 = vignette ; droite 28 = croix */
    margin: 0;
    list-style: none;
    /* box-sizing:border-box global → min-height = hauteur TOTALE. Doit contenir
       l'image absolue (top 7 + 56) + padding bas 7 = 70px, sinon l'image déborde
       sous la bordure de séparation et chevauche l'item suivant. */
    min-height: 70px;
    border-bottom: 1px solid var(--cc-couleur-front-bordures);
    line-height: 1.5;
}
.cc-mini-cart ul.woocommerce-mini-cart li.woocommerce-mini-cart-item img {
    position: absolute;
    left: 0;
    top: 7px;
    width: 56px;
    height: 56px;
    margin: 0;
    float: none;
    border-radius: 3px;
}
.cc-mini-cart ul.woocommerce-mini-cart li.woocommerce-mini-cart-item a:not(.remove) {
    display: block;
    font-weight: 500;
    text-decoration: none;
    color: var(--cc-couleur-front-texte-titres);
}
.cc-mini-cart ul.woocommerce-mini-cart li.woocommerce-mini-cart-item .quantity {
    display: block;
    color: var(--cc-couleur-front-texte-corps);
}
.cc-mini-cart ul.woocommerce-mini-cart li.woocommerce-mini-cart-item a.remove {
    position: absolute;
    top: 7px;
    right: 0;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    font-size: 18px;
    /* WC force color:red !important sur a.remove → !important obligatoire pour
       retrouver le gris de la référence. */
    color: var(--cc-couleur-front-texte-corps) !important;
    background: transparent;
    text-decoration: none;
}
.cc-mini-cart .woocommerce-mini-cart__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 14px 21px;
    margin: 0;
    border-top: 1px solid var(--cc-couleur-front-bordures);
}
.cc-mini-cart .woocommerce-mini-cart__total strong {
    font-weight: 500;
    color: var(--cc-couleur-front-texte-titres);
}
.cc-mini-cart .woocommerce-mini-cart__buttons {
    display: block;
    padding: 14px 21px;
    margin: 0;
}
/* Boutons pleins jaunes, pleine largeur, empilés (le mini-panier est hors
   contexte .woocommerce → .woocommerce .button ne s'applique pas, d'où les
   liens-texte par défaut : on style ici comme la référence). */
.cc-mini-cart .woocommerce-mini-cart__buttons .button {
    display: block;
    width: 100%;
    margin: 0 0 5px;
    padding: 10px 20px;
    box-sizing: border-box;
    background-color: var(--cc-couleur-front-primaire);
    color: var(--cc-couleur-front-primaire-texte);
    border: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-transform: none;
    text-decoration: none;
}
.cc-mini-cart .woocommerce-mini-cart__buttons .button:last-child {
    margin-bottom: 0;
}

/* --- Off-canvas mobile/tablette : panneau pleine largeur sous le header --- */
.cc-offcanvas {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--cc-sticky-top, 160px);
    bottom: 0;
    z-index: 999;
    display: none;
    overflow-y: auto;
    background-color: var(--cc-couleur-front-fond-page);
}
.cc-offcanvas.is-open {
    display: block;
}
.cc-offcanvas-panel {
    padding: 8px 0;
}
/* Jamais d'off-canvas en desktop (sidebar visible à la place) */
@media (min-width: 1200px) {
    .cc-offcanvas,
    .cc-offcanvas.is-open {
        display: none;
    }
}
/* Verrou de scroll quand l'off-canvas est ouvert */
body.cc-offcanvas-open {
    overflow: hidden;
}

/* --- Colonne latérale + contenu --- */
.cc-page {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.cc-sidebar {
    flex: 0 0 auto;
    min-width: 250px;
}

.cc-main {
    flex: 1 1 auto;
    min-width: 0; /* autorise #primary à rétrécir dans le flex (cf. slider accueil) */
}

/* Sidebar collante (≥1200 : desktop uniquement). En dessous de 1200, le header
   bascule en mode mobile (hamburger + off-canvas) et la sidebar est masquée :
   le seuil est aligné sur celui du header (cf. masquage ci-dessous). Le top suit
   la hauteur courante du header via --cc-sticky-top (mis à jour par cc-header.js). */
@media (min-width: 1200px) {
    .cc-sidebar {
        position: sticky;
        top: var(--cc-sticky-top, 95px);
        max-height: calc(100vh - var(--cc-sticky-top, 95px) - 16px);
        overflow-y: auto;
        scrollbar-width: thin;                /* ascenseur interne fin (Firefox) */
        scrollbar-color: #ccc #f1f1f1;
    }
    .cc-sidebar::-webkit-scrollbar { width: 4px; }            /* Chrome/Edge/Safari */
    .cc-sidebar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
    .cc-sidebar::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
    .cc-sidebar::-webkit-scrollbar-thumb:hover { background: #999; }

    /* Fine ligne grise à droite de la sidebar (#D1D5DB). La
       sidebar étant sticky + max-height (non étirable sur toute la hauteur), on
       porte la ligne sur le contenu : border-left de .cc-main → ligne au bord
       droit de la sidebar, pleine hauteur du contenu (hors footer, qui est un
       frère de .cc-main dans #primary). Scopée aux pages AVEC sidebar. */
    body.cc-left-sidebar .cc-main {
        border-left: 1px solid var(--cc-couleur-front-bordure-sidebar);
    }
}

/* Masquée en mobile ET tablette (≤1199) → bascule off-canvas. Seuil aligné sur
   la bascule desktop/mobile du header (hamburger + off-canvas à 1200, cf.
   .cc-offcanvas et cc-header.js) : la colonne latérale disparaît exactement au
   moment où le menu sandwich apparaît. */
@media (max-width: 1199px) {
    .cc-sidebar {
        display: none;
    }
}

/* --- Accessibilité : lien d'évitement + texte lecteur d'écran --- */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.skip-link.screen-reader-text:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 100000;
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 20px;
    clip: auto;
    background-color: var(--cc-couleur-front-surface-blockwc);
    color: var(--cc-couleur-front-liens);
    border: 1px solid var(--cc-couleur-front-bordures);
    border-radius: 5px;
    text-decoration: none;
}

/* ============================================================
 * 8. Responsive — breakpoints figés (768 / 1200 / 1600 / 1920)
 * ============================================================ */

/* Grille produits : nombre de colonnes par bande */
@media (max-width: 768px) {
    :root { --cc-columns: 1; }
}

/* Bande tablette : 4 colonnes (la sidebar est masquée ≤1199 → l'espace gagné est
   rendu à la grille produits, alignée sur la bande desktop 1200-1599). */
@media (min-width: 769px) and (max-width: 1199px) {
    :root { --cc-columns: 4; }
}

@media (min-width: 1200px) and (max-width: 1599px) {
    :root { --cc-columns: 4; }
}

@media (min-width: 1600px) and (max-width: 1919px) {
    :root { --cc-columns: 5; }
}

@media (min-width: 1920px) {
    :root { --cc-columns: 6; }
}

/* Conteneur de page bord à bord en mobile : la sidebar est masquée (≤768), le
   fond crème de #primary occupe toute la largeur. On retire le padding latéral
   du conteneur (.cc-page = unique usage de .cc-container) qui laissait voir le
   fond blanc du body en bandes gauche/droite. La respiration du contenu reste
   assurée par #main { padding: 5px } (css/defaut.css, mobile). */
@media (max-width: 768px) {
    .cc-page {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Downscale typographique mobile (≤768) — valeurs effectives capturées */
@media (max-width: 768px) {
    body {
        font-size: 14.592px;
        line-height: 1.65;
    }

    h1 { font-size: 29.184px; }
    h2 { font-size: 22.8px; }
    h3 { font-size: 18.24px; }
    /* h4–h6 non mesurés en mobile : conservés à la taille desktop. */
}