/**
 * 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/integrations_tiers.css → css/defaut.css
 *           (ajustements qui surchargent).
 * Aucun !important ici, sauf là où il faut battre un !important de WooCommerce
 * (a.remove) : 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.4.2
 * @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. Tokens de présentation (polices, rayons, ombres, graisses) et typographie
 *    (valeurs desktop ; downscale mobile ≤768 plus bas)
 * ============================================================ */

/* Tokens du contrat plugin ↔ thème — REPLIS portés par le thème.
   Le plugin définit les mêmes tokens en :where(:root) (spécificité nulle) ; son
   moteur d'apparence émet la valeur réglée dans un <style> de fin de <head>, qui
   gagne sur ce bloc (même spécificité, plus loin dans le document). Ce bloc est
   donc ce qui s'applique quand le plugin est absent.
   Motif du repli exhaustif : un var() sans définition invalide la DÉCLARATION
   ENTIÈRE, pas seulement la valeur — sans ces lignes, le modal de connexion
   perdrait son ombre et ses graisses sans qu'aucune erreur ne le signale. */
:root {
    /* Polices — réglage « Typographie ». */
    --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;

    /* Rayons — réglage « Arrondis ». */
    --cc-rayon:       5px;
    --cc-rayon-grand: 10px;

    /* Ombres — construites sur la palette, donc elles suivent les sets. */
    --cc-ombre-petite:  0 2px 5px var(--cc-couleur-front-ombre-legere);
    --cc-ombre-panneau: 0 6px 18px var(--cc-couleur-front-ombre-legere);
    --cc-ombre-modale:  0 10px 40px var(--cc-couleur-front-ombre-legere);

    /* Échelle typographique. */
    --cc-graisse-forte:      600;
    --cc-graisse-titre:      700;
    --cc-texte-petit-taille: 0.9em;
}

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: var(--cc-graisse-forte);
}

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
 *    Les champs suivent le réglage « Arrondis » (--cc-rayon), comme les boutons
 *    et les cartes ; la bordure reste celle de la palette.
 *    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: var(--cc-rayon);
    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: var(--cc-rayon);
}

/* --- 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: var(--cc-rayon);
    padding: 10px 20px;
    font-weight: var(--cc-graisse-forte);
    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: var(--cc-rayon);
    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: var(--cc-rayon);
    padding: 10px 20px;
    font-weight: var(--cc-graisse-forte);
    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 (bouton Mon magasin → compte
   → panier) ». La recherche est placée juste AVANT actions pour que la loupe soit
   collée à gauche du bouton Mon magasin (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: var(--cc-graisse-titre);
    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: var(--cc-rayon);
    box-shadow: var(--cc-ombre-panneau);
}
.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: var(--cc-rayon);
    box-shadow: var(--cc-ombre-panneau);
    overflow: hidden;          /* contient le radius sur les zones internes */
    font-size: var(--cc-texte-petit-taille);
}

/* 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: var(--cc-rayon);
}
.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).
   ⚠️ font-size en px, pas --cc-texte-petit-taille : le token vaut 0.9em et le
   conteneur .cc-mini-cart le consomme déjà — un second 0.9em se composerait
   (0.9 × 0.9 = 0.81em, soit ~13px au lieu de 14). Taille propre à la mécanique
   du composant, donc hors contrat de tokens. */
.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: var(--cc-rayon);
    font-size: 14px;
    font-weight: var(--cc-graisse-forte);
    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;
}
/* Panier vide : WC ne rend que ce paragraphe, sans liste ni total → il porte
   seul les marges internes des zones ci-dessus. */
.cc-mini-cart .woocommerce-mini-cart__empty-message {
    margin: 0;
    padding: 21px;
    text-align: center;
    font-weight: 500;
    line-height: 1.5;
    color: var(--cc-couleur-front-texte-titres);
}

/* --- 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: var(--cc-couleur-front-gris-fonce) var(--cc-couleur-front-secondaire);
    }
    .cc-sidebar::-webkit-scrollbar { width: 4px; }            /* Chrome/Edge/Safari */
    .cc-sidebar::-webkit-scrollbar-track { background: var(--cc-couleur-front-secondaire); border-radius: 4px; }
    .cc-sidebar::-webkit-scrollbar-thumb { background: var(--cc-couleur-front-gris-fonce); border-radius: 4px; }
    .cc-sidebar::-webkit-scrollbar-thumb:hover { background: var(--cc-couleur-front-gris-plus-fonce); }

    /* 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: var(--cc-rayon);
    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. */
}