/* ========================================
   Palette Shine — source unique des couleurs du theme (04/08/2026)
   Changer une teinte de base ci-dessous la propage partout, y compris dans les
   variantes semi-transparentes : celles-ci s'ecrivent rgb(var(--shine-x-rgb) / A),
   donc seule l'opacite reste locale a la regle qui l'utilise.
   Les couleurs de la copie de theme.css (parent hummingbird) restent pilotees par
   les variables Bootstrap --bs-* de ce fichier.
   ======================================== */

:root {
    /* --- teintes de base : les seules lignes a editer pour recolorer le site ---
       Charte Shine du 13/08/2026. Les noms courts (--shine-dark, --shine-gray…) sont
       ceux de la charte ; les anciens noms (--shine-ink, --shine-race-d…) restent
       définis juste en dessous comme ALIAS, pour ne pas avoir à reprendre les
       centaines de règles qui les utilisent. Un alias pointe sur le jeton, donc une
       seule valeur à changer. --- */
    --shine-race-rgb: 214 255 50;     /* vert clair  #d6ff32 */
    --shine-race-sec-rgb: 136 188 0;  /* vert fonce  #88bc00 */
    --shine-dark-rgb: 16 16 17;       /* noir        #101011 */
    --shine-gray-rgb: 193 193 193;    /* gris        #c1c1c1 */
    --shine-dark-gray-rgb: 58 58 62;  /* gris fonce  #3a3a3e */
    --shine-white-rgb: 249 249 249;   /* blanc       #f9f9f9 */
    --shine-black-rgb: 0 0 0;         /* ombres */
    --shine-paper-rgb: 250 250 248;   /* fond papier des panneaux */
    --shine-stock-rgb: 31 161 89;     /* vert disponibilite */
    --shine-warn-rgb: 224 161 0;      /* ambre alerte */

    /* --- memes teintes en syntaxe « r, g, b » : les fonctions rgba() heritees de
       Bootstrap (ex. --bs-btn-focus-shadow-rgb, utilise dans rgba(var(--x), .5))
       refusent la syntaxe a espaces. --- */
    --shine-race-rgb-c: 214, 255, 50;
    --shine-ink-rgb-c: 16, 16, 17;

    /* --- couleurs opaques de la charte --- */
    --shine-race: rgb(var(--shine-race-rgb));
    --shine-race-sec: rgb(var(--shine-race-sec-rgb));
    --shine-dark: rgb(var(--shine-dark-rgb));
    --shine-gray: rgb(var(--shine-gray-rgb));
    --shine-dark-gray: rgb(var(--shine-dark-gray-rgb));
    --shine-white: rgb(var(--shine-white-rgb));
    --shine-paper: rgb(var(--shine-paper-rgb));
    --shine-stock: rgb(var(--shine-stock-rgb));
    --shine-warn: rgb(var(--shine-warn-rgb));

    /* --- alias historiques : meme couleur, ancien nom --- */
    --shine-ink-rgb: var(--shine-dark-rgb);
    --shine-ink: var(--shine-dark);
    --shine-race-d: var(--shine-race-sec);

    /* --- etats d'alerte : PAS de la marque, donc pas verts. Le rouge reste le
       code universel du danger ; un « rupture de stock » vert clair serait
       trompeur. --- */
    --shine-race-sale: #b21f16;
    --shine-stock-d: #157a43;
    --shine-warn-d: #9a6b00;

    /* --- surfaces sombres, du plus noir au plus clair --- */
    --shine-ink-2: #0e0e0e;
    --shine-ink-3: #141416;
    --shine-ink-4: #1a1a1e;
    --shine-ink-5: #232327;
    --shine-ink-6: #2c2c30;
    --shine-ink-7: #3a3a40;

    /* --- textes secondaires et gris de bordure --- */
    --shine-muted: #6e6e76;
    --shine-muted-2: #9a9aa2;
    --shine-grey-100: #e3e3e3;
    --shine-grey-200: #cfd6dd;
    --shine-grey-300: #c4c4c8;
    --shine-grey-400: #b8c0c8;

    /* --- fonds clairs et accents --- */
    --shine-surface: var(--shine-white); /* fond des cartes / panneaux clairs */
    --shine-paper-2: #f2f2ee;
    --shine-check: #4caf50;           /* puces validees du contenu editorial */
    --shine-bullet-mark: #c4c4c8;     /* coches des bullet points fiche produit */
    --shine-star: #f5a623;            /* etoiles d'avis */

    /* --- drapeaux catalogue (BAT) --- */
    --shine-flag-best: #e10100;
    --shine-flag-web: var(--shine-ink); /* « Exclu Web » : noir, texte blanc (05/08/2026 ; etait #ffff00) */

    /* --- filets, deja derives des teintes de base --- */
    --shine-line: rgb(var(--shine-ink-rgb) / 0.12);
    --shine-line-strong: rgb(var(--shine-ink-rgb) / 0.18);
    --shine-line-light: rgb(var(--shine-white-rgb) / 0.08);

    /* Contour neutre, en hexadécimal à 8 chiffres (80 = 0,50).
       Le gris de charte plutôt qu'un blanc translucide : un blanc à 30 % ne se
       voit que sur fond sombre et disparaît dès que le bouton est posé sur du
       blanc. Un gris à 50 % tient les deux fonds — assez clair pour se détacher
       du noir, assez dense pour marquer l'arête sur du blanc. */
    --shine-border-neutral: #c1c1c180;
}

/* ========================================
   Lissage des textes (18/08/2026)

   Firefox et Chrome rendent les polices fines plus épaisses que ne le veut la charte.
   Ces deux propriétés demandent un lissage en niveaux de gris, ce qui rétablit
   l'épaisseur d'origine d'Anek et de Saira sur fond clair.

   ⚠ Elles n'ont AUCUN effet sur le crénelage des angles arrondis (vignettes, cartes) :
   celui-là vient de la rastérisation des masques par le navigateur. Sous Firefox, il
   se règle côté client — about:support > Compositing doit indiquer WebRender ; si
   l'accélération matérielle est coupée, le CSS ne peut que l'atténuer.
   ======================================== */

body {
    /* Taille de référence du corps de texte (02/09/2026). Elle est posée ICI et
       nulle part ailleurs : p, ul, ol et li en héritent, et les feuilles de
       composant n'ont plus à la redire. `html` reste à 16 px pour que les
       longueurs en `rem` du thème parent ne bougent pas. */
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ========================================
   Content-text: checks instead of bullets
   ======================================== */

.content-text ul {
    list-style: none;
    padding-left: 0;
}

.content-text ul li {
    position: relative;
    padding-left: 1.6em;
    margin-bottom: 0.3em;
}

.content-text ul li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--shine-check);
    font-weight: 700;
}

.content-text ol {
    padding-left: 1.6em;
}

.content-text ol li {
    margin-bottom: 0.3em;
}

.content-text ol li::marker {
    color: var(--shine-check);
    font-weight: 700;
}

/* ========================================
   Charte typographique Shine — 04/08/2026
   Anek 300/400/600 · Saira 300/400/600 · BricolageGrotesque 400/600
   Self-hosted dans assets/fonts/ (woff2 puis woff), converties depuis les TTF
   Google Fonts fournis. Le dossier contient aussi les .ttf et .otf des memes faces
   (les 4 formats sont livres), mais le CSS ne sert que woff2 puis woff : cela couvre
   tous les navigateurs et evite de telecharger des fichiers 4x plus lourds.
   Aucune autre famille dans le theme : Teko et Hanken Grotesk ont ete retirees, et
   Inter (police du parent hummingbird) est neutralisee dans notre copie de theme.css.
   Repartition : Anek 400 = body/menus/boutons, Anek 600 = titres produit,
   Saira 300 = fil d'Ariane et sous-titres, Saira 600 = prix,
   BricolageGrotesque 600 = titres h1..h6.
   ======================================== */

@font-face {
    font-family: "Anek";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/anek-300.woff2") format("woff2"), url("../fonts/anek-300.woff") format("woff");
}

@font-face {
    font-family: "Anek";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/anek-400.woff2") format("woff2"), url("../fonts/anek-400.woff") format("woff");
}

@font-face {
    font-family: "Anek";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/anek-600.woff2") format("woff2"), url("../fonts/anek-600.woff") format("woff");
}

@font-face {
    font-family: "Saira";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/saira-300.woff2") format("woff2"), url("../fonts/saira-300.woff") format("woff");
}

@font-face {
    font-family: "Saira";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/saira-400.woff2") format("woff2"), url("../fonts/saira-400.woff") format("woff");
}

@font-face {
    font-family: "Saira";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/saira-600.woff2") format("woff2"), url("../fonts/saira-600.woff") format("woff");
}

@font-face {
    font-family: "BricolageGrotesque";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/bricolage-grotesque-400.woff2") format("woff2"), url("../fonts/bricolage-grotesque-400.woff") format("woff");
}

@font-face {
    font-family: "BricolageGrotesque";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/bricolage-grotesque-600.woff2") format("woff2"), url("../fonts/bricolage-grotesque-600.woff") format("woff");
}

/* ========================================
   Focus : halo Bootstrap retiré (demande du 05/08/2026)
   Bootstrap pose un box-shadow de 0.25rem sur les boutons, liens de pagination
   et champs au focus — c'est le « halo » qui déformait la taille perçue des boutons.
   On le supprime, MAIS on garde un contour net en :focus-visible : sans lui la
   navigation au clavier devient invisible, ce qui est un vrai défaut d'accessibilité
   (et un point bloquant en audit RGAA). Le contour ne s'affiche qu'au clavier,
   jamais à la souris.
   ======================================== */

:root {
    --bs-focus-ring-width: 0;
    --bs-focus-ring-color: transparent;
    --bs-btn-focus-box-shadow: none;
}

.btn:focus,
.btn:focus-visible,
.btn:active:focus,
.btn-check:focus + .btn,
.btn-close:focus,
button:focus,
button:focus-visible,
[type="button"]:focus,
[type="submit"]:focus,
[type="reset"]:focus,
a:focus,
.page-link:focus,
.dropdown-toggle:focus,
.dropdown-item:focus,
.nav-link:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.accordion-button:focus {
    box-shadow: none !important;
}

:is(.btn, button, [type="button"], [type="submit"], [type="reset"], a, .page-link, .form-control, .form-select, .accordion-button):focus-visible {
    outline: 2px solid var(--shine-ink);
    outline-offset: 2px;
}

/* sur fond sombre (header, footer) le contour doit rester visible */
.shine-header :is(a, button, .btn, [type="submit"], .form-select):focus-visible,
.shine-footer :is(a, button, .btn, [type="submit"], input, .form-control):focus-visible,
.shine-prefooter :is(a, button, .btn, [type="submit"], input, .form-control):focus-visible {
    outline-color: var(--shine-white);
}

/* Titres h1..h6 */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: "BricolageGrotesque", system-ui, sans-serif;
    font-weight: 600;
}

/* Fil d'Ariane */
/* ==========================================================================
   Bootstrap remappé sur la charte
   --------------------------------------------------------------------------
   Le bundle du thème parent embarque la palette Bootstrap par défaut :
   --bs-primary #0b69f6 (bleu), --bs-link-color #0b69f6, --bs-danger #ff4657…
   Ces valeurs ressortent partout où un composant n'a pas été restylé — le fil
   d'Ariane en était l'exemple visible.
   Plutôt que de corriger composant par composant, on remappe les variables à la
   source : tout ce que nous n'avons pas encore habillé hérite de la charte.
   ========================================================================== */
:root {
  --bs-primary: var(--shine-race);
  --bs-primary-rgb: var(--shine-race-rgb-c);
  --bs-secondary: var(--shine-muted);
  /* Vert de succès demandé le 13/08/2026 : #2eaa00. Distinct de --shine-stock
     (#1fa159), qui colore la pastille de disponibilité de la fiche produit. */
  --bs-success: #2eaa00;
  --bs-success-rgb: 46, 170, 0;
  --bs-warning: var(--shine-warn);
  --bs-danger: var(--shine-race-sale);
  --bs-dark: var(--shine-ink);
  --bs-body-color: var(--shine-ink);
  --bs-secondary-color: var(--shine-muted);
  --bs-emphasis-color: var(--shine-ink);
  --bs-border-color: var(--shine-line);
  --bs-tertiary-bg: var(--shine-paper);

  /* Liens : encre au repos, rouge de la charte au survol — la convention déjà
     appliquée à la main dans tout le thème. */
  --bs-link-color: var(--shine-ink);
  --bs-link-color-rgb: var(--shine-ink-rgb-c);
  --bs-link-hover-color: var(--shine-race);
}

/* ==========================================================================
   Fil d'Ariane
   ========================================================================== */

.breadcrumb__wrapper {
  background-color: transparent;
}

.breadcrumb,
.breadcrumb-item,
.breadcrumb-link,
.breadcrumb-item span {
  font-family: "Saira", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 300;
}

.breadcrumb-link,
.breadcrumb-link span {
  color: var(--shine-muted);
  text-decoration: none;
}

.breadcrumb-link:hover,
.breadcrumb-link:focus-visible {
  /* Même défaut que la facette active : au survol, le lien passait d'un gris
     lisible à 1,15:1 sur fond clair — il DISPARAISSAIT au moment précis où on le
     vise. ⚠ Pas --shine-race-sec non plus (#88bc00 = 2,27:1, sous le seuil AA de
     4,5:1) : le correctif suggéré par la revue échouait au même test. */
  color: var(--shine-dark);
  text-decoration-color: var(--shine-race);
}

/* Dernier maillon : la page courante, en évidence. */
.breadcrumb-item:last-child,
.breadcrumb-item:last-child span {
  font-weight: 600;
  color: var(--shine-ink);
}

/* Le thème parent pousse le fil d'Ariane vers le bas : `margin-bottom: 1.5rem`, et
   `2.5rem` au-delà de 768 px. Les deux sont retirées — le contenu doit démarrer juste
   après, bannière de catégorie comprise.
   ⚠ Surcharge plutôt qu'édition de theme.css : notre theme.css est une COPIE du bundle
   parent, régénérée par scripts/patch_theme_css.php à chaque montée de Hummingbird ;
   une coupe faite dedans serait perdue. Une règle non layerée l'emporte sur le
   @layer bs-components du parent, media query comprise. */
.breadcrumb__wrapper {
  margin-bottom: 0;
}

.breadcrumb,
.breadcrumb a,
.breadcrumb li {
    font-family: "Saira", system-ui, sans-serif;
    font-weight: 300;
}

/* Miniature produit rendue par Creative Elements. Les noms product-miniature-title /
   product-miniature-price sont des TYPES DE WIDGET, pas des classes CSS : ils sortent en
   .elementor-widget-<type> sur l'enveloppe, et le contenu porte .ce-product-name (un h3,
   qu'il faut donc sortir du BricolageGrotesque des titres) ou .ce-product-prices. Le nom
   affiche sur la home vient du widget product-miniature-name : les deux sont couverts.
   Les selecteurs .product-miniature-* sont la au cas ou tu poses aussi la classe a la main.
   Verifie le 04/08/2026 : aucun reglage CE ne fixe de font-family ni de font-size sur ces
   deux widgets (seul un doc CE en pose un sur .ce-product-prices), et nos selecteurs sortent
   en 0,2,0 contre 0,1,2 pour body.ce-kit-1 h3 -> pas besoin de !important.
   NB : le text-transform: uppercase du Site Kit CE s'applique toujours au titre, il n'est
   pas surcharge ici (a changer dans les reglages globaux de CE si besoin). */
.elementor-widget-product-miniature-name .ce-product-name,
.elementor-widget-product-miniature-name .elementor-heading-title,
.elementor-widget-product-miniature-title .ce-product-name,
.elementor-widget-product-miniature-title .elementor-heading-title,
.product-miniature-title,
.product-miniature-title .elementor-heading-title {
    font-family: "Anek", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 400;
}

.elementor-widget-product-miniature-price .ce-product-prices,
.elementor-widget-product-miniature-price .ce-product-price,
.product-miniature-price,
.product-miniature-price .ce-product-price {
    font-family: "Saira", system-ui, sans-serif;
    font-weight: 600;
}

/* Hauteur des cartes : le titre occupe 1 ou 2 lignes selon le produit, ce qui décalait
   le prix et le bouton d'ajout d'une carte à l'autre (surtout dans les carrousels, où
   chaque diapositive se dimensionne sur son contenu). On RÉSERVE deux lignes : les
   titres courts récupèrent l'espace sous eux, les cartes gardent la même hauteur et la
   ligne prix + panier reste alignée. `--ce-line-clamp: 2` laisse le titre passer à la
   seconde ligne au lieu d'être coupé (le défaut du module est 1). */
.elementor-widget-product-miniature-name .ce-product-name,
.elementor-widget-product-miniature-title .ce-product-name,
.product-miniature-title .ce-product-name {
    --ce-line-clamp: 2;

    min-height: calc(2 * 1.125em);
}

/* Remise : on affiche la valeur seule (« 20% », « 3,70 € »), jamais « Economisez X ».
   Rien a masquer ici : le wording est neutralise dans les traductions du theme
   (Save %percentage% / Save %amount% -> « %percentage% » / « %amount% », voir
   translations/*/ShopThemeCatalog.*.xlf). Comme les widgets prix de Creative Elements
   passent par les memes cles, leur badge .ce-product-badge-sale sort deja raccourci
   cote serveur — inutile de patcher le module ou d'ajouter du JS. */

/* Titre de bloc de menu : classe a poser sur un widget Creative Elements (les reglages
   du widget sortent sur .elementor-heading-title, d'ou le second selecteur ; leur
   specificite 0,4,0 impose !important sur la taille et la graisse). */
.menu-bloc-title,
.menu-bloc-title .elementor-heading-title {
    font-family: "BricolageGrotesque", system-ui, sans-serif;
    font-size: 12px !important;
    font-weight: 400 !important;
    text-transform: uppercase;
}

/* ==========================================================================
   Sur-titre — .shine-eyebrow
   --------------------------------------------------------------------------
   Le petit texte rouge en capitales qui se pose AU-DESSUS d'un titre, précédé
   d'une étoile. À saisir dans le champ « Classes CSS » d'un widget Creative
   Elements, ou à poser sur n'importe quel élément du thème.

   Deux formes couvertes, comme pour les boutons :
     - la classe sur le texte lui-même ;
     - la classe sur un CONTENEUR (cas d'Elementor, qui la pose sur l'enveloppe
       du widget alors que le texte vit dans .elementor-heading-title).

   L'étoile est un MASQUE, pas une image de fond : elle prend `currentColor` et
   suit donc la couleur du texte. Recolorer le site depuis la palette la recolore
   aussi — une image de fond aurait figé le rouge dans le SVG.
   ========================================================================== */

.shine-eyebrow,
.shine-eyebrow .elementor-heading-title,
.shine-eyebrow .elementor-widget-container > * {
  font-family: "Anek", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--shine-dark-gray);
}

.shine-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

/* Quand la classe est portée par une enveloppe Elementor, le texte intérieur ne
   doit pas réintroduire ses propres marges. */
.shine-eyebrow .elementor-heading-title,
.shine-eyebrow .elementor-widget-container > p {
  margin: 0;
}

.shine-eyebrow::before {
  content: "";
  flex: none;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  mask: var(--shine-eyebrow-star) center / contain no-repeat;
  -webkit-mask: var(--shine-eyebrow-star) center / contain no-repeat;
}

:root {
  /* Étoile à quatre branches, dessinée en SVG et encodée en URI de données.
     Les chevrons et le dièse sont échappés : un « # » non échappé couperait
     l'URI, et la règle serait ignorée sans le moindre message. */
  --shine-eyebrow-star:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.62 6.3 5.7 11.38 12 12-6.3.62-11.38 5.7-12 12-.62-6.3-5.7-11.38-12-12C6.3 11.38 11.38 6.3 12 0z'/%3E%3C/svg%3E");

  /* Coche, même principe : un masque, donc la couleur vient du CSS appelant. */
  --shine-icon-check:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.3 17.6 3.7 12l1.8-1.8 3.8 3.8 8.9-8.9L20 6.9z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Contraste sur la couleur de marque — charte du 13/08/2026

   Le vert clair #d6ff32 est une couleur CLAIRE : le blanc y tombe à 1,15:1
   (illisible), le noir à 17:1. Les règles qui posent un fond de marque écrivent
   donc leur texte en --shine-dark, chacune dans sa propre feuille. Ne restent ici
   que les trois cas où la feuille d'origine gagne par spécificité.
   ========================================================================== */

.shine-header .header-block__badge,
.header-block__badge,
.btn.shine-drawer__cta,
.shine-lang__pill--active {
  color: var(--shine-dark) !important;
}

/* Accents ÉCRITS dans la couleur de marque sur fond clair : illisibles en vert
   clair (1,15:1), passés au noir à la demande du 13/08/2026. */
#products .shine-products__count strong {
  color: var(--shine-dark);
}