/*
Theme Name: L'Infuserie
Theme URI: https://infuserie.fr
Author: L'Infuserie
Description: Theme sur mesure pour L'Infuserie, boutique de theieres et d'accessoires du the. Classique (PHP), support WooCommerce, polices auto-hebergees, aucun appel a un domaine tiers.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: linfuserie
Tags: e-commerce, custom-colors, custom-menu, translation-ready
*/

/* ==========================================================================
   0. FILET DE SECURITE — pose avant toute regle ciblee (CLAUDE.md 12.22)
   ========================================================================== */

img, svg, video, iframe, embed, object, canvas { max-width: 100%; }
img, video { height: auto; }
html, body { overflow-x: hidden; }
.entry-content table,
.editorial table,
.description-categorie table { display: block; overflow-x: auto; max-width: 100%; }

/* ==========================================================================
   1. POLICES — auto-hebergees, aucun appel a fonts.googleapis.com (12.15)
   ========================================================================== */

@font-face {
  font-family: 'Outfit';
  src: url('assets/fonts/outfit.woff2') format('woff2-variations');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('assets/fonts/playfair-display.woff2') format('woff2-variations');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. TOKENS — declares une seule fois
   ========================================================================== */

:root {
  /* Fond blanc partout. Les deux neutres ne servent qu'a marquer le rythme entre
     deux sections voisines : a 1,5 % d'ecart, on ne les voit pas, on les sent.
     Les noms de tokens sont conserves — ils sont utilises a vingt endroits, et les
     renommer pour la seule elegance ferait courir un risque pour rien. */
  --creme: #FFFFFF;
  --creme-clair: #FFFFFF;
  --sauge: #F5F5F4;
  --sauge-clair: #FAFAF9;
  --carte: #FFFFFF;
  --vert-action: #4F7036;
  --vert-action-actif: #3F5F2C;
  --vert-decor: #6E8F4E;
  --vert-foret: #24422A;
  --encre: #16180F;
  --encre-doux: #4A4E3E;
  --signal: #B4442C;
  --bordure: rgba(22, 24, 15, .12);

  --police-titre: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --police-texte: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-display: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);
  --t-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem);
  --t-h3: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --t-base: 1rem;
  --t-petit: .875rem;
  --t-label: .75rem;

  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px; --e5: 24px;
  --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px;
  --section: clamp(48px, 8vw, 96px);

  --r-carte: 24px;
  --r-media: 20px;
  --r-capsule: 999px;
  --r-champ: 12px;
  --conteneur: 1200px;

  --ombre-carte: 0 1px 2px rgba(23, 23, 23, .05), 0 6px 18px rgba(23, 23, 23, .05);
  --ombre-carte-active: 0 2px 4px rgba(23, 23, 23, .07), 0 16px 36px rgba(23, 23, 23, .10);
  --transition: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   3. BASE
   ========================================================================== */

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

body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--encre);
  /* Fond blanc uni. Le degrade creme vers sauge a ete retire : la marque tient sur
     le vert d'action, le pied de page et les photos, pas sur une teinte de fond. */
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 var(--e4); line-height: 1.15; text-wrap: balance; }

h1, .titre-display {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: var(--t-display);
  letter-spacing: .01em;
  text-transform: uppercase;
}

h2, .titre-section {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: var(--t-h2);
  letter-spacing: .005em;
}

h3 { font-family: var(--police-texte); font-weight: 600; font-size: var(--t-h3); }

p { margin: 0 0 var(--e4); }
p:last-child { margin-bottom: 0; }

a { color: var(--vert-action-actif); text-underline-offset: .18em; }
a:hover { color: var(--encre); }

:focus-visible {
  outline: 3px solid var(--vert-action-actif);
  outline-offset: 2px;
  border-radius: var(--e1);
}

.label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre-doux);
}

.conteneur {
  width: 100%;
  max-width: var(--conteneur);
  margin-inline: auto;
  padding-inline: var(--e4);
}

/* Chaque section porte une teinte explicite, meme quand c'est du blanc : sans ca,
   une section transparente laisserait voir ce qui passe derriere au defilement. */
.section { padding-block: var(--section); background: var(--creme-clair); }
.section--creme { background: var(--creme-clair); }
.section--sauge { background: var(--sauge-clair); }

.lien-saut {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--vert-foret);
  color: #fff;
  padding: var(--e3) var(--e5);
  z-index: 100;
}
.lien-saut:focus { left: var(--e4); top: var(--e4); }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   4. BOUTONS — le vert d'action ne sert qu'a ca
   ========================================================================== */

/* `.button.alt` est le bouton principal de WooCommerce : il porte sa propre couleur,
   avec plus de specificite que `.button`. Sans lui, le bouton d'ajout au panier de la
   fiche produit s'affiche en VIOLET — la couleur d'accent par defaut. Vu a l'ecran,
   invisible dans le code. */
.bouton,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce div.product form.cart .single_add_to_cart_button,
.wc-block-components-button,
.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 48px;
  padding: var(--e3) var(--e6);
  border: 0;
  border-radius: var(--r-capsule);
  background: var(--vert-action);
  color: #fff;
  font-family: var(--police-texte);
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), transform var(--transition);
}

.bouton:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.wc-block-components-button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--vert-action-actif);
  color: #fff;
  transform: translateY(-1px);
}

.bouton:active { transform: translateY(0); }

.bouton[disabled], .woocommerce button.button:disabled, .woocommerce button.button.disabled {
  background: var(--encre-doux);
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.bouton--contour {
  background: transparent;
  color: var(--vert-action-actif);
  box-shadow: inset 0 0 0 2px var(--vert-action);
}
.bouton--contour:hover { background: rgba(79, 112, 54, .08); color: var(--vert-action-actif); }

.bouton--large { width: 100%; }

/* Les blocs WooCommerce (panier, commande, grilles de blocs) portent leurs propres
   classes et leur propre couleur — noire par defaut. Sans ces selecteurs, le bouton
   d'achat change de couleur selon l'endroit de la boutique ou l'on se trouve. */
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-product-button .wp-block-button__link,
.wc-block-grid__product-add-to-cart .wp-block-button__link {
  background-color: var(--vert-action) !important;
  color: #fff !important;
  border: 0;
  border-radius: var(--r-capsule) !important;
  font-family: var(--police-texte);
  font-weight: 600;
  min-height: 44px;
}
.wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-product-button .wp-block-button__link:hover {
  background-color: var(--vert-action-actif) !important;
}
.wc-block-components-product-name { color: var(--encre); }
.wc-block-components-product-price { color: var(--encre); font-weight: 600; }

/* Etat de chargement, sans animation sur le chemin d'achat */
.woocommerce a.button.loading, .woocommerce button.button.loading { opacity: .7; }
.woocommerce a.button.loading::after { content: none; }

/* ==========================================================================
   5. EN-TETE
   ========================================================================== */

.annonce {
  background: var(--vert-foret);
  color: #fff;
  font-size: var(--t-petit);
  text-align: center;
  padding: var(--e2) var(--e4);
}
.annonce a { color: #fff; }

.entete {
  position: sticky;
  top: 0;
  z-index: 30;
  /* Valeur ecrite en dur, restee de la palette creme : le token avait beau passer au
     blanc, l'en-tete gardait sa bande beige. Vu a l'ecran, invisible dans la feuille. */
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.05) blur(8px);
  border-bottom: 1px solid var(--bordure);
}

.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  min-height: 64px;
}

.marque {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: .02em;
  color: var(--encre);
  text-decoration: none;
  white-space: nowrap;
}
.marque:hover { color: var(--encre); }

.nav-principale ul {
  display: flex;
  align-items: center;
  gap: var(--e5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-principale a {
  color: var(--encre);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--t-petit);
  padding-block: var(--e2);
  border-bottom: 2px solid transparent;
}
.nav-principale a:hover,
.nav-principale .current-menu-item > a {
  border-bottom-color: var(--vert-action);
}

.entete__actions { display: flex; align-items: center; gap: var(--e2); }

.icone-lien {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-capsule);
  color: var(--encre);
  text-decoration: none;
  position: relative;
}
.icone-lien:hover { background: var(--sauge-clair); color: var(--encre); }
.icone-lien svg { width: 22px; height: 22px; }

.compteur-panier {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-capsule);
  background: var(--vert-action);
  color: #fff;
  font-size: .6875rem;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

.bascule-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--r-capsule);
  background: transparent;
  color: var(--encre);
  cursor: pointer;
}

@media (max-width: 899px) {
  /* Le bouton de menu se place a droite, apres les icones : il etait coince entre
     la marque et le panier, sans rapport visuel avec l'un ni avec l'autre. */
  .entete__barre { position: relative; }
  .marque { margin-right: auto; }
  .entete__actions { order: 2; }
  .bascule-menu { order: 3; }

  .nav-principale {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--creme-clair);
    border-bottom: 1px solid var(--bordure);
    padding: var(--e4);
    /* Mesure sur iPhone 390x844 : panneau deroule, le menu demande 966 px pour
       780 disponibles. Cent quatre-vingt-six pixels tombaient sous l'ecran, sans
       aucun moyen d'y acceder — le menu est en position absolue, il ne suit pas
       le defilement de la page.
       `dvh` et non `vh` : la barre d'URL mobile se retracte, `vh` fige la hauteur
       de depart et laisse le bas coupe malgre le defilement interne. */
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav-principale.est-ouvert { display: block; }
  .nav-principale ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-principale li { border-bottom: 1px solid var(--bordure); }
  .nav-principale li:last-child { border-bottom: 0; }
  .nav-principale a { display: block; padding: var(--e3) 0; font-size: var(--t-base); border-bottom: 0; }
}

@media (min-width: 900px) {
  .bascule-menu { display: none; }
}

/* ==========================================================================
   6. HEROS EDITORIAL — composition de la reference fournie
   ==========================================================================

   Trois plans, et c'est leur ordre qui fait tout :
     plan 1  le titre, monumental, a gauche
     plan 2  la scene detouree, qui passe DEVANT le titre
     plan 3  le texte et les boutons, en bas a droite, dans le vide de la scene

   Fond blanc pur, sur cette section et sur elle seule. Aucun cadre, aucune carte,
   aucun bloc rectangulaire derriere le produit : c'est ce qui fait la difference
   entre une mise en scene et une vignette dans une boite.
   -------------------------------------------------------------------------- */

.heros-edito {
  position: relative;
  isolation: isolate;
  background: #fff;
  min-height: min(92vh, 900px);
  padding: clamp(24px, 5vw, 56px) var(--e4) clamp(32px, 5vw, 64px);
  overflow: hidden;
}

/* --- plan 1 : le titre ---------------------------------------------------- */
.heros-edito__titre {
  position: relative;
  z-index: 1;
  max-width: min(9.5ch, 40vw);
  margin: clamp(56px, 16vh, 190px) 0 0 clamp(16px, 6vw, 96px);
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: clamp(2.75rem, 1rem + 5.6vw, 6.5rem);
  line-height: .94;
  letter-spacing: -.005em;
  text-transform: none;
  color: #171717;
  text-wrap: balance;
}

/* --- plan 2 : la scene ---------------------------------------------------- */
.heros-edito__scene {
  position: absolute;
  z-index: 2;
  top: clamp(12px, 3vh, 44px);
  /* Colle au bord, sans marge. L'avant-bras est coupe par le cadre de la photo :
     inset de 40 px, la coupe flottait en plein blanc et se lisait comme un bug.
     Au bord, elle se lit comme un cadrage — le bras entre dans l'image. */
  right: 0;
  width: 60%;
  max-width: 940px;
  pointer-events: none;
}
.heros-edito__scene img {
  display: block;
  width: 100%;
  height: auto;
  /* Une ombre unique, tres large et tres faible. Une ombre marquee sur un
     detourage se lit tout de suite comme un collage. */
  filter: drop-shadow(0 30px 42px rgba(23, 23, 23, .13));
}

/* --- plan 3 : le texte et les boutons ------------------------------------- */
.heros-edito__texte {
  position: relative;
  z-index: 3;
  max-width: 470px;
  margin-left: auto;
  margin-right: clamp(16px, 5vw, 88px);
  margin-top: clamp(24px, 8vh, 96px);
  text-align: left;
}
.heros-edito__promesse {
  margin: 0 0 var(--e5);
  font-size: clamp(1rem, .95rem + .2vw, 1.125rem);
  line-height: 1.62;
  color: #3D4034;
}
.heros-edito__actions { display: flex; flex-wrap: wrap; gap: var(--e3); }
.heros-edito__actions .bouton { min-height: 50px; padding-inline: var(--e5); }

/* --- ecrans larges : la scene monte, le texte se cale sous elle ----------- */
@media (min-width: 1000px) {
  .heros-edito {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    /* Mesure au navigateur a 1440x900 : le contenu s'arrete a 611 px, la section
       en faisait 846. Cent quatre-vingt-dix pixels de blanc mort sous les boutons,
       qui repoussaient la premiere selection de produits hors de l'ecran. */
    min-height: min(86vh, 800px);
  }
  .heros-edito__titre { grid-column: 1; }
  .heros-edito__texte {
    grid-column: 2;
    /* Sous la soucoupe, pas a cote : le texte croisait la tasse et ses trois
       premieres lettres passaient dessous. Mesure a l'ecran, pas dans la feuille. */
    margin-top: clamp(400px, 50vh, 560px);
    margin-right: clamp(16px, 3vw, 56px);
  }
}

/* --- telephone : on empile, on ne compresse pas -------------------------- */
@media (max-width: 999px) {
  .heros-edito { min-height: 0; padding-bottom: clamp(24px, 6vw, 40px); }
  .heros-edito__titre {
    max-width: 14ch;
    margin: clamp(8px, 3vh, 24px) 0 0;
    font-size: clamp(2.5rem, 1.5rem + 5vw, 3.6rem);
  }
  /* La scene reprend le flux : elle passe sous le titre au lieu de le couvrir.
     Un chevauchement de 260 px sur un ecran de 390 rendrait le titre illisible. */
  .heros-edito__scene {
    position: relative;
    right: auto;
    width: calc(100% + var(--e4) * 2);
    max-width: none;
    margin: calc(var(--e4) * -1) calc(var(--e4) * -1) 0;
    margin-top: clamp(-24px, -4vw, -8px);
  }
  .heros-edito__texte {
    max-width: none;
    margin: var(--e5) 0 0;
  }
  .heros-edito__actions .bouton { flex: 1 1 240px; }
}

/* --- l'apparition, une seule fois, courte ------------------------------- */
@keyframes linfuserie-monte { from { opacity: 0; transform: translateY(18px); } }
@keyframes linfuserie-descend { from { opacity: 0; transform: translateY(-24px); } }

.heros-edito__titre  { animation: linfuserie-monte   .55s cubic-bezier(.4,0,.2,1) both; }
.heros-edito__scene  { animation: linfuserie-descend .70s cubic-bezier(.4,0,.2,1) .10s both; }
.heros-edito__texte  { animation: linfuserie-monte   .55s cubic-bezier(.4,0,.2,1) .30s both; }

@media (prefers-reduced-motion: reduce) {
  .heros-edito__titre,
  .heros-edito__scene,
  .heros-edito__texte { animation: none; }
}

/* La bande ondulee a ete retiree en meme temps que la palette creme : sur un fond
   blanc, une vague de couleur au milieu de la page se lit comme un oubli, pas comme
   une intention. La regle reste ici, inerte, au cas ou on la reintroduirait — sans
   `fill`, un `path` SVG est NOIR par defaut, et c'est le genre d'oubli qui barre une
   page d'une bande noire de 44 px. */
.onde { display: block; width: 100%; height: clamp(24px, 3vw, 44px); position: relative; z-index: 1; margin-top: -1px; }
.onde path { fill: var(--sauge-clair); }

/* ==========================================================================
   7. CAPSULES DE FILTRE
   ========================================================================== */

.capsules {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin: 0 0 var(--e6);
  padding: 0;
  list-style: none;
}

/* Sur mobile, six capsules empilées mangeaient un quart de l'écran avant le premier
   produit. Elles défilent sur une seule ligne, toutes atteignables au doigt. */
@media (max-width: 719px) {
  .capsules {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    margin-inline: calc(var(--e4) * -1);
    padding-inline: var(--e4);
    padding-bottom: var(--e2);
    scrollbar-width: none;
  }
  .capsules::-webkit-scrollbar { display: none; }
  .capsules li { flex: 0 0 auto; scroll-snap-align: start; }
}
.capsule {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--e2) var(--e4);
  border-radius: var(--r-capsule);
  background: var(--carte);
  color: var(--encre);
  font-size: var(--t-petit);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--bordure);
  transition: background-color var(--transition);
}
.capsule:hover { background: var(--sauge-clair); color: var(--encre); }
.capsule[aria-current="page"], .capsule--active, .capsule[aria-current="true"] {
  background: var(--vert-action);
  border-color: var(--vert-action);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Barre de filtres des archives produit.
   Le nombre de references est ecrit sur la puce : une tranche vide n'apparait
   pas, et personne ne clique pour tomber sur « aucun resultat ».
   L'aide (« 1 a 2 tasses ») est visible en permanence, jamais au survol (12.19).
   -------------------------------------------------------------------------- */
.filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
  margin: 0 0 var(--e5);
  padding-bottom: var(--e5);
  border-bottom: 1px solid var(--bordure);
}
.filtres__titre {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre-doux);
}
.filtres__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.filtres__liste li { display: flex; }
.filtres .capsule {
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: var(--e2) var(--e4);
  line-height: 1.25;
}
.capsule__ligne { display: inline-flex; align-items: baseline; gap: var(--e2); }
.capsule__compte {
  font-variant-numeric: tabular-nums;
  font-size: var(--t-label);
  color: var(--encre-doux);
}
.capsule--active .capsule__compte,
.capsule--active .capsule__aide { color: rgba(255, 255, 255, .8); }
.capsule__aide { font-size: var(--t-label); color: var(--encre-doux); font-weight: 400; }
.filtres__retirer { font-size: var(--t-petit); color: var(--encre-doux); }
.filtres__vide { padding: var(--e6) 0; font-size: 1.0625rem; }

@media (max-width: 719px) {
  /* Meme traitement que les capsules d'accueil : une ligne qui defile, pas un pave. */
  .filtres { flex-direction: column; align-items: stretch; gap: var(--e2); }
  .filtres__liste {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--e4) * -1);
    padding-inline: var(--e4);
    padding-bottom: var(--e2);
  }
  .filtres__liste::-webkit-scrollbar { display: none; }
  .filtres__liste li { flex: 0 0 auto; }
}

/* --------------------------------------------------------------------------
   En-tete d'archive : titre, compteur, tri.
   Le menu de tri etait rendu par le navigateur, sans aucun style : une boite grise
   a angles droits posee au milieu d'une page qui n'en compte aucune autre.
   -------------------------------------------------------------------------- */
.woocommerce .woocommerce-products-header { margin-bottom: var(--e4); }
.woocommerce .woocommerce-products-header__title { margin-bottom: var(--e3); }

.chapo-categorie {
  max-width: 68ch;
  margin: 0 0 var(--e5);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--encre-doux);
}

.woocommerce .woocommerce-result-count {
  margin: 0;
  font-size: var(--t-petit);
  color: var(--encre-doux);
}
.woocommerce .woocommerce-ordering { margin: 0 0 var(--e5); }
.woocommerce .woocommerce-ordering select {
  min-height: 44px;
  padding: var(--e2) var(--e7) var(--e2) var(--e4);
  border: 1px solid var(--bordure);
  border-radius: var(--r-capsule);
  background-color: var(--carte);
  /* Fleche dessinee en CSS : pas de fichier a charger, pas d'appel a un tiers. */
  background-image: linear-gradient(45deg, transparent 50%, var(--encre-doux) 50%),
                    linear-gradient(135deg, var(--encre-doux) 50%, transparent 50%);
  background-position: right 22px center, right 16px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: var(--t-petit);
  appearance: none;
  cursor: pointer;
}
.woocommerce .woocommerce-ordering select:hover { border-color: var(--vert-action); }

/* ==========================================================================
   8. CARTE PRODUIT — barre de legende verte, visible sans survol (12.19)
   ========================================================================== */

.entete-section {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e4);
  margin-bottom: var(--e6);
}
.entete-section p { color: var(--encre-doux); max-width: 52ch; margin: var(--e2) 0 0; }

.grille-produits,
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) { .grille-produits, .woocommerce ul.products { gap: var(--e5); } }
@media (min-width: 900px) {
  .grille-produits, .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .grille-produits, .woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; }

/* `woocommerce-smallscreen.css` cible `ul.products[class*="columns-"] li.product` avec
   `width: 48%` — un selecteur d'attribut, donc plus specifique que le notre. Sous 768 px,
   la carte prenait **48 % de sa cellule de grille** : 82 px dans une colonne de 171, et un
   titre qui tombait un mot par ligne. L'ordre de chargement n'y change rien, il faut la
   meme specificite. Mesure avant : 82 px. Apres : 171 px. */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product,
/* Les blocs « produits similaires » et « vous aimerez aussi » ont leur propre regle,
   encore plus specifique. Sans ces deux lignes, la categorie etait reparee et la fiche
   produit gardait ses cartes de 82 px. */
.woocommerce .related ul.products li.product,
.woocommerce .related ul.products[class*="columns-"] li.product,
.woocommerce .upsells ul.products li.product,
.woocommerce .upsells ul.products[class*="columns-"] li.product,
.woocommerce .up-sells ul.products li.product,
.woocommerce .cross-sells ul.products li.product {
  width: 100%;
  max-width: 100%;
  float: none;
  margin: 0;
  clear: none;
}

.carte-produit,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  /* WooCommerce impose 22,05 % : la carte doit remplir sa cellule de grille, sinon
     elle se réduit a un timbre-poste et le titre tombe un mot par ligne. */
  width: 100%;
  max-width: 100%;
  float: none;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-carte);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carte-produit:hover,
.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
  border-color: rgba(22, 24, 15, .18);
  box-shadow: var(--ombre-carte-active);
}

.carte-produit__media,
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Fond teinte + liseré interne : les packshots a fond blanc du fournisseur se
   confondaient avec la carte et semblaient flotter. */
.carte-produit__media {
  position: relative;
  background: var(--creme);
  box-shadow: inset 0 0 0 1px rgba(22, 24, 15, .07);
}

.carte-produit__media img,
.woocommerce ul.products li.product img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;      /* ratio fixe : supprime le CLS et aligne la grille */
  object-fit: cover;
  margin: 0;
  background: var(--creme);
}

/* Seconde image au survol, sur ordinateur uniquement.
 *
 * (hover: hover) : la règle n'existe pas sur un écran tactile, donc rien ne se monte
 * ni ne se charge inutilement sur mobile. Le survol ne RÉVÈLE aucune information —
 * prix, titre et bouton restent visibles en permanence (§12.19). Il ne fait que
 * montrer une seconde vue du même produit.
 *
 * Transition sur opacity seule : pas de reflow, pas de repaint coûteux.
 */
/* SELECTEUR RECOPIE SUR CELUI DE WOOCOMMERCE, ELEMENT COMPRIS (CLAUDE.md §12.35).
   `.carte-produit__survol` seul vaut (0,1,0) et perdait contre
   `.woocommerce ul.products li.product a img` (0,2,3). Consequence mesuree au
   navigateur a 390 px : `display: none` ne s'appliquait pas, la seconde image
   restait dans le flux, et CHAQUE carte affichait deux visuels empiles — grille
   deux fois plus haute sur la moitie du catalogue, sur l'appareil qui porte 70 a
   80 % du trafic. La feuille etait pourtant « juste » a la lecture. */
.woocommerce ul.products li.product a img.carte-produit__survol,
.woocommerce ul.products li.product img.carte-produit__survol,
.carte-produit__survol {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .carte-produit__media {
    overflow: hidden;
  }

  .woocommerce ul.products li.product a img.carte-produit__survol,
  .woocommerce ul.products li.product img.carte-produit__survol,
  .carte-produit__survol {
    display: block;
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 260ms cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
  }

  .carte-produit:hover .carte-produit__survol,
  .woocommerce ul.products li.product:hover .carte-produit__survol {
    opacity: 1;
  }

  /* Au clavier, le focus sur le titre révèle la même image : la souris n'est pas
     le seul moyen de parcourir une grille. */
  .carte-produit:focus-within .carte-produit__survol {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carte-produit__survol {
    transition: none;
  }
}

.carte-produit__badge,
.woocommerce ul.products li.product .onsale {
  position: absolute;
  top: var(--e3);
  left: var(--e3);
  margin: 0;
  padding: var(--e1) var(--e3);
  border-radius: var(--r-capsule);
  background: var(--signal);
  color: #fff;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.6;
  min-height: 0;
  min-width: 0;
}

/* La barre de legende : nom + prix + bouton, toujours visible. */
.carte-produit__corps,
.woocommerce ul.products li.product .carte-produit__corps {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  flex: 1;
  padding: var(--e4);
}

.carte-produit__categorie { font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-doux); }

.carte-produit__titre,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
  font-family: var(--police-texte);
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  padding: 0;
  color: var(--encre);
}
.carte-produit__titre a { color: inherit; text-decoration: none; }

.carte-produit__detail { font-size: var(--t-petit); color: var(--encre-doux); }

.carte-produit__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2) var(--e3);
  margin-top: auto;
  padding-top: var(--e3);
}

/* Sous 520 px la carte fait ~170 px de large : le prix passait a la ligne au milieu
   du bouton. Le prix prend sa ligne, le bouton prend toute la largeur. */
@media (max-width: 519px) {
  .carte-produit__pied { flex-direction: column; align-items: stretch; }
  .carte-produit__prix, .woocommerce ul.products li.product .price { text-align: left; }
  .bouton-rond, .woocommerce ul.products li.product .button { width: 100%; }
}

.carte-produit__prix,
.woocommerce ul.products li.product .price {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--encre);
  margin: 0;
}
.woocommerce ul.products li.product .price del { color: var(--encre-doux); font-weight: 400; opacity: 1; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

.bouton-rond,
.woocommerce ul.products li.product .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 44px;
  padding: var(--e2) var(--e4);
  border-radius: var(--r-capsule);
  background: var(--vert-action);
  color: #fff;
  font-size: var(--t-petit);
  font-weight: 600;
  text-decoration: none;
  margin: 0;
}

.woocommerce ul.products li.product .added_to_cart { display: none; }

/* ==========================================================================
   9. FICHE PRODUIT
   ========================================================================== */

/* `minmax(0, 1fr)` et non rien : une piste de grille vaut `auto` par defaut, et
   `auto` se dimensionne sur le contenu. Un seul enfant large — l'image de galerie,
   l'iframe de Stripe — etirait donc la piste au-dela de la fenetre. Mesure du
   28/08/2026 a 390 px : `.summary` et `.galerie-produit` rendues a 402 px, decalees
   de 16, bord droit a 418. Vingt-huit pixels de contenu coupes sur la page qui vend.
   Le defaut etait invisible au controle habituel : `html, body { overflow-x: hidden }`
   (§12.22) supprime la barre de defilement, donc `scrollWidth` retombe a 390 et
   annonce « 0 px de debordement ». Le filet masquait le symptome, pas la cause.
   Le `minmax(0, ...)` etait deja pose sur la grille a deux colonnes du bureau ;
   il manquait sur la grille a une colonne, celle du telephone. */
.woocommerce div.product { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e6); }

@media (min-width: 900px) {
  .woocommerce div.product {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--e8);
    align-items: start;
  }
  .woocommerce div.product .woocommerce-product-gallery { grid-column: 1; }
  .woocommerce div.product .summary { grid-column: 2; margin: 0; position: sticky; top: 88px; }
  /* Tout ce qui vient SOUS la galerie et le résumé occupe les deux colonnes.
     Une section oubliée dans cette liste se fait ranger d'office dans la colonne
     1 ou 2 par le placement automatique de la grille : les trois blocs illustrés
     se sont retrouvés compressés sur 45 % de la largeur, avec des photos de
     110 px, à côté de la FAQ. Rien ne le signalait — il a fallu regarder la page. */
  .woocommerce div.product .woocommerce-tabs,
  .woocommerce div.product .related,
  .woocommerce div.product .up-sells,
  .woocommerce div.product .fiche-blocs,
  .woocommerce div.product .blocs-illustres,
  .woocommerce div.product .fiche-conditions { grid-column: 1 / -1; }
}

/* WooCommerce pose une largeur en ligne sur la galerie (48 %), ce qui la reduisait
   a un timbre-poste dans une colonne de grille. */
.woocommerce div.product .woocommerce-product-gallery { float: none; width: 100% !important; margin: 0; }
.woocommerce div.product .woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce div.product .woocommerce-product-gallery__image { border-radius: var(--r-media); overflow: hidden; }
.woocommerce div.product .woocommerce-product-gallery__image img { width: 100%; }

/* Titre de fiche : quatre lignes de serif a 2,5 rem ecrasaient le prix sous le pli. */
@media (min-width: 900px) {
  .woocommerce div.product .product_title { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); }
}

.woocommerce div.product .stock { color: var(--encre-doux); font-size: var(--t-petit); }
.woocommerce div.product .stock.in-stock::before { content: '● '; color: var(--vert-action); }
.woocommerce div.product .product_meta { font-size: var(--t-petit); color: var(--encre-doux); margin-top: var(--e5); }
.woocommerce div.product .product_meta a { color: var(--encre-doux); }
.woocommerce div.product .woocommerce-product-gallery__image img {
  border-radius: var(--r-media);
  background: var(--creme);
}
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin: var(--e3) 0 0;
  padding: 0;
  list-style: none;
}
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li { width: 72px; float: none; margin: 0; flex: 0 0 auto; }

/* Sur mobile, cinq vignettes passaient sur deux lignes et poussaient le titre et le
   prix sous le pli. Elles defilent sur une ligne. */
@media (max-width: 719px) {
  .woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar { display: none; }
}
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs img {
  border-radius: 14px;
  border: 2px solid transparent;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  opacity: 1;
}
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs img.flex-active { border-color: var(--vert-action); }

/* `div.summary` et non `.summary` : le selecteur de WooCommerce
   `.woocommerce div.product div.summary` vaut (0,3,2), le mien valait (0,3,1). Le
   resume tenait donc dans 48 % de sa colonne de grille — 259 px la ou la colonne en
   fait 538 — avec un vide de 280 px a sa droite. Mesure a l'ecran, invisible dans le
   code : les deux regles etaient pourtant bien servies. */
.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary {
  float: none;
  width: auto;
  clear: none;
}
.woocommerce div.product .product_title {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: var(--t-h2);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: var(--e3);
}
.woocommerce div.product p.price {
  font-family: var(--police-texte);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--encre);
  margin: 0 0 var(--e2);
}
.woocommerce div.product p.price del { color: var(--encre-doux); font-size: 1.125rem; }
.woocommerce div.product p.price ins { text-decoration: none; }

.woocommerce div.product form.cart { margin: var(--e5) 0; display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
.woocommerce div.product form.cart .quantity { display: inline-flex; }
.woocommerce div.product form.cart .quantity input.qty {
  width: 84px;
  height: 48px;
  padding: var(--e2) var(--e3);
  border: 1px solid var(--bordure);
  border-radius: var(--r-champ);
  background: var(--carte);
  font-family: var(--police-texte);
  font-size: var(--t-base);
  text-align: center;
}
.woocommerce div.product form.cart .button { flex: 1 1 220px; }
.woocommerce div.product form.cart.variations_form { display: block; }
.woocommerce div.product form.cart .variations { margin-bottom: var(--e4); }
.woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th { padding: var(--e2) 0; }
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart { display: flex; gap: var(--e3); flex-wrap: wrap; align-items: center; }

/* --------------------------------------------------------------------------
   Reassurance de fiche — quatre faits sous le bouton d'achat.
   Pas de badge, pas d'icone criarde : du texte lisible, verifiable ailleurs
   sur le site. Le survol n'y revele rien (§12.19).
   -------------------------------------------------------------------------- */
.reassurance-fiche {
  list-style: none;
  margin: var(--e5) 0 var(--e3);
  padding: var(--e4) 0 0;
  border-top: 1px solid var(--bordure);
  display: grid;
  gap: var(--e3);
}
/* La pastille verte est remplacee par un pictogramme dessine.
   Un rond de couleur ne dit rien : il occupe la place d'une information. Trois
   icones de la meme famille — meme cadre, meme epaisseur de trait, extremites
   arrondies — se lisent en un coup d'oeil et appartiennent a la marque. */
.reassurance-fiche__point {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: var(--e3);
  align-items: start;
  font-size: var(--t-petit);
}
.reassurance-fiche__point .confiance__icone {
  grid-row: 1 / span 2;
  width: 24px;
  height: 24px;
  color: var(--vert-foret);
  margin-top: -2px;
}
.reassurance-fiche__point strong { grid-column: 2; font-weight: 600; color: var(--encre); }
.reassurance-fiche__point span { grid-column: 2; color: var(--encre-doux); }
.reassurance-fiche__lien { font-size: var(--t-petit); margin: 0; }

@media (min-width: 600px) and (max-width: 899px) {
  .reassurance-fiche { grid-template-columns: 1fr 1fr; gap: var(--e4); }
}

/* --------------------------------------------------------------------------
   Barre d'achat collante sur telephone.
   Elle est masquee tant que le vrai bouton est a l'ecran (voir theme.js) et la
   hauteur qu'elle occupe est rendue au document, pour qu'elle ne recouvre ni la
   fin du pied de page ni le bandeau cookies.
   -------------------------------------------------------------------------- */
.barre-achat {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e3) var(--e4);
  background: var(--carte);
  border-top: 1px solid var(--bordure);
  box-shadow: 0 -6px 20px rgba(22, 24, 15, .10);
  padding-bottom: calc(var(--e3) + env(safe-area-inset-bottom, 0px));
}
.barre-achat[hidden] { display: none; }
.barre-achat__texte { flex: 1 1 auto; min-width: 0; }
.barre-achat__titre {
  display: block;
  font-size: var(--t-petit);
  color: var(--encre-doux);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barre-achat__prix { display: block; font-weight: 600; font-size: 1.125rem; }
.barre-achat__prix .woocommerce-Price-amount { font-weight: 600; }
.barre-achat .bouton { flex: 0 0 auto; padding-inline: var(--e5); }

body.a-barre-achat { padding-bottom: 84px; }

@media (min-width: 900px) {
  /* Sur ordinateur, le resume est deja colle en haut : la barre ferait doublon. */
  .barre-achat { display: none !important; }
  body.a-barre-achat { padding-bottom: 0; }
}

/* Tuiles d'information 2x2 (reference A) : matiere, contenance, compatibilite, livraison.
   Aucune valeur inventee : une tuile sans donnee ne s'affiche pas. */
.tuiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e3);
  margin: var(--e5) 0;
  padding: 0;
  list-style: none;
}
.tuile {
  padding: var(--e4);
  border-radius: var(--r-carte);
  background: var(--sauge-clair);
}
.tuile__cle { display: block; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-doux); margin-bottom: var(--e1); }
.tuile__valeur { font-weight: 600; }

.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin: 0 0 var(--e5);
  padding: 0;
  list-style: none;   /* sans ca, WooCommerce laisse une puce noire devant les onglets */
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; border: 0; box-shadow: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--r-capsule);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: var(--e2) var(--e4); color: var(--encre); font-weight: 500; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--vert-action); border-color: var(--vert-action); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #fff; }
.woocommerce div.product .woocommerce-tabs .panel { max-width: 70ch; }

.woocommerce div.product .related > h2, .woocommerce div.product .up-sells > h2 { margin-bottom: var(--e5); }

/* ==========================================================================
   10. PANIER, COMMANDE, FORMULAIRES
   ========================================================================== */

.woocommerce table.shop_table {
  border: 1px solid var(--bordure);
  border-radius: var(--r-carte);
  border-collapse: separate;
  background: var(--carte);
  overflow: hidden;
}
.woocommerce table.shop_table th { font-weight: 600; }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { padding: var(--e4); }

.woocommerce .cart_totals h2, .woocommerce-checkout h3 { font-size: var(--t-h3); font-family: var(--police-texte); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
  width: 100%;
  min-height: 48px;
  padding: var(--e3);
  border: 1px solid var(--bordure);
  border-radius: var(--r-champ);
  background: var(--carte);
  font-family: var(--police-texte);
  font-size: var(--t-base);
  color: var(--encre);
}
.woocommerce form .form-row label { font-weight: 500; margin-bottom: var(--e1); display: block; }

.woocommerce-info, .woocommerce-message, .woocommerce-error {
  border-top: 0;
  border-radius: var(--r-champ);
  background: var(--sauge-clair);
  color: var(--encre);
  padding: var(--e4) var(--e5);
}
.woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before { content: none; }
.woocommerce-error { background: rgba(180, 68, 44, .12); }

/* ==========================================================================
   11. CONTENU EDITORIAL
   ========================================================================== */

.editorial { max-width: 68ch; margin-inline: auto; }
.editorial h2 { margin-top: var(--e7); }
.editorial h2:first-child { margin-top: 0; }
.editorial ul, .editorial ol { padding-left: 1.2em; }
.editorial li { margin-bottom: var(--e2); }
.editorial table { width: 100%; border-collapse: collapse; margin-bottom: var(--e5); }
.editorial th, .editorial td { text-align: left; padding: var(--e3); border-bottom: 1px solid var(--bordure); }
.editorial th { font-weight: 600; }

/* Les colonnes de chiffres ne se coupent pas : « 23,90 € » passait sur deux lignes
   dans le tableau des onze modeles, ce qui rendait la colonne illisible. Le tableau
   defile deja horizontalement s'il manque de place (filet de securite en tete). */
.editorial td:not(:first-child),
.editorial th:not(:first-child) { white-space: nowrap; }

.fil-ariane { font-size: var(--t-petit); color: var(--encre-doux); padding-block: var(--e4); }
.fil-ariane a { color: var(--encre-doux); }
.fil-ariane a:hover { color: var(--encre); }

.grille-reperes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--e4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.repere {
  padding: var(--e5);
  border: 1px solid var(--bordure);
  border-radius: var(--r-carte);
  background: var(--carte);
  box-shadow: var(--ombre-carte);
}
.repere h3 { margin-bottom: var(--e2); }
.repere p { font-size: var(--t-petit); color: var(--encre-doux); margin: 0; }
.repere h3 a { color: inherit; text-decoration: none; }
.repere h3 a:hover { text-decoration: underline; }

/* Le repere en version guide : une image en tete, ratio fixe pour ne pas
   decaler la grille pendant le chargement (CLS). */
/* `auto-fill` et non `auto-fit` : avec deux articles publies seulement, `auto-fit`
   etire les deux cartes sur toute la largeur et sort des images de 700 px de large
   pour des vignettes. Vu a l'ecran, invisible dans le code. */
.grille-reperes--guides { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.repere--guide { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.repere--guide h3 { margin: var(--e4) var(--e4) var(--e2); font-size: var(--t-h3); }
.repere--guide p { margin: 0 var(--e4) var(--e4); }
.repere__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Choisir par usage — quatre portes d'entree sur la boutique.
   Chaque carte est une cible unique : le lien du titre couvre toute la carte,
   sauf le lien du guide qui reste au-dessus (d'ou le z-index).
   -------------------------------------------------------------------------- */
.grille-usages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--e4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.usage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: 0 var(--e5) var(--e5);
  border-radius: var(--r-carte);
  background: var(--carte);
  border: 1px solid var(--bordure);
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
/* Ratio fixe : sans lui, la grille se reorganise pendant le chargement des quatre
   vignettes et le CLS grimpe. */
.usage__image {
  display: block;
  margin: 0 calc(var(--e5) * -1) var(--e4);
  background: var(--sauge-clair);
}
.usage__image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.usage:hover { border-color: var(--vert-action); transform: translateY(-2px); }
.usage__lien { text-decoration: none; color: inherit; }
.usage__lien::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.usage__titre {
  display: block;
  font-family: var(--police-titre);
  font-size: var(--t-h3);
  line-height: 1.2;
}
.usage__compte {
  display: block;
  margin-top: var(--e1);
  font-size: var(--t-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre-doux);
}
.usage__texte { font-size: var(--t-petit); color: var(--encre-doux); margin: 0; flex: 1; }
.usage__guide {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--vert-action);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.usage__guide:hover { color: var(--vert-action-actif); }

/* ==========================================================================
   12. PIED DE PAGE
   ========================================================================== */

.pied {
  background: var(--vert-foret);
  color: #fff;
  padding-block: var(--e8) var(--e5);
  /* Pas de marge haute : elle laissait apparaitre une bande claire du body entre
     la derniere section et le pied de page. */
  margin-top: 0;
}
.pied a { color: rgba(255, 255, 255, .86); text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }

.pied__grille {
  display: grid;
  gap: var(--e6);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.pied__marque { font-family: var(--police-titre); font-weight: 700; font-size: 1.375rem; color: #fff; }
.pied__intro { color: rgba(255, 255, 255, .78); font-size: var(--t-petit); max-width: 34ch; }
.pied h2 {
  font-family: var(--police-texte);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  margin-bottom: var(--e3);
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: var(--e2); font-size: var(--t-petit); }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  justify-content: space-between;
  margin-top: var(--e7);
  padding-top: var(--e4);
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: var(--t-petit);
  color: rgba(255, 255, 255, .7);
}

/* ==========================================================================
   13. MOUVEMENT REDUIT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   GALERIE DE FICHE PRODUIT — une grande image, puis trois
   ==========================================================================
   Remplace le carrousel WooCommerce. Sur une boutique où la photo est
   l'argument de vente, montrer quatre vues d'un coup vaut mieux qu'en montrer
   une et promettre les autres derrière une flèche.

   Ratio fixe partout : sans lui la grille se décale au chargement, le CLS
   grimpe, et la page donne cette impression d'escalier quand on la descend. */

.galerie-produit {
  display: grid;
  gap: var(--e3);
}

.galerie-produit__principale {
  margin: 0;
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--creme);
  box-shadow: inset 0 0 0 1px var(--bordure);
}

.galerie-produit__principale img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;      /* contain, pas cover : un packshot ne se recadre pas */
  background: #fff;
}

.galerie-produit__suite {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.galerie-produit__suite li {
  margin: 0;
}

.galerie-produit__suite a {
  position: relative;
  display: block;
  border-radius: var(--r-champ);
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--bordure);
  transition: box-shadow var(--transition);
}

.galerie-produit__suite a:hover,
.galerie-produit__suite a:focus-visible {
  box-shadow: inset 0 0 0 2px var(--vert-decor);
}

.galerie-produit__suite img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* Le compteur ne cache rien : il se pose sur la dernière vignette et annonce
   ce qu'il reste. Sans lui, le visiteur croit avoir tout vu. */
.galerie-produit__reste {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--e1) var(--e2);
  background: rgba(22, 24, 15, .72);
  color: #fff;
  font-size: var(--t-label);
  letter-spacing: .02em;
  text-align: center;
}

.galerie-produit--vide img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: var(--r-media);
}

@media (max-width: 640px) {
  /* Sur téléphone la grande image occupe toute la largeur et les trois
     vignettes passent en défilement horizontal : trois carrés de 100 px
     seraient illisibles. */
  .galerie-produit__suite {
    grid-template-columns: repeat(3, minmax(28vw, 1fr));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .galerie-produit__suite li {
    scroll-snap-align: start;
  }
}

/* ==========================================================================
   SOUS-MENU DE NAVIGATION
   ==========================================================================
   Le menu principal tient à cinq entrées : le manuel du projet en fixe sept au
   maximum, et dix liens alignés ne se lisent plus. Les matières et les origines
   passent donc sous « Théières ».

   Sur ordinateur le sous-menu s'ouvre au survol ET au focus clavier : la souris
   n'est pas le seul moyen de parcourir une navigation. Sur mobile il est déplié
   en permanence — le survol n'existe pas sur un écran tactile (§12.19), et un
   menu qui demande un geste impossible est un menu mort. */

.nav-principale li { position: relative; }

.nav-principale .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: 210px;
  margin: 0;
  padding: var(--e2) 0;
  list-style: none;
  background: #fff;
  border-radius: var(--r-champ);
  box-shadow: var(--ombre-carte-active);
  border: 1px solid var(--bordure);
}

.nav-principale li:hover > .sub-menu,
.nav-principale li:focus-within > .sub-menu {
  display: block;
}

.nav-principale .sub-menu a {
  display: block;
  padding: var(--e2) var(--e4);
  white-space: nowrap;
  font-size: var(--t-petit);
}

.nav-principale .sub-menu a:hover,
.nav-principale .sub-menu a:focus-visible {
  background: var(--sauge);
}

/* Le chevron dit qu'il y a quelque chose dessous. Sans lui, personne ne survole. */
.nav-principale .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: .42em;
  height: .42em;
  margin-left: .45em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-.15em) rotate(45deg);
}

@media (max-width: 900px) {
  /* Déplié en permanence, décalé : sur tactile il n'y a pas de survol. */
  .nav-principale .sub-menu {
    display: block;
    position: static;
    min-width: 0;
    padding: 0 0 0 var(--e4);
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  .nav-principale .sub-menu li { border-bottom: 0; }
  .nav-principale .sub-menu a { padding-block: var(--e2); opacity: .82; }
  .nav-principale .menu-item-has-children > a::after { display: none; }
}

/* ==========================================================================
   FICHE PRODUIT — questions fréquentes et conditions
   ==========================================================================
   Des <details> natifs : ils fonctionnent sans une ligne de JavaScript, ils sont
   accessibles au clavier par construction, et leur contenu reste dans le HTML
   servi — donc lisible par Google même replié. */

.fiche-conditions {
  margin-block: var(--e8) var(--e7);
  padding-top: var(--e7);
  border-top: 1px solid var(--bordure);
}

.fiche-conditions__grille {
  display: grid;
  gap: var(--e3);
  max-width: 820px;
}

.fiche-conditions__bloc {
  border: 1px solid var(--bordure);
  border-radius: var(--r-champ);
  background: var(--sauge-clair);
  padding: var(--e4) var(--e5);
}

.fiche-conditions__bloc summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
}

.fiche-conditions__bloc summary::-webkit-details-marker { display: none; }

.fiche-conditions__bloc summary::after {
  content: '';
  flex: none;
  width: .5em;
  height: .5em;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-.1em);
  transition: transform var(--transition);
}

.fiche-conditions__bloc[open] summary::after { transform: rotate(-135deg) translateY(-.1em); }
.fiche-conditions__bloc[open] summary { margin-bottom: var(--e3); }
.fiche-conditions__bloc p { font-size: var(--t-petit); color: var(--encre-doux); }
.fiche-conditions__lien { margin-top: var(--e4); font-size: var(--t-petit); }

/* ==========================================================================
   FICHE PRODUIT — trois blocs illustrés
   ==========================================================================
   Une photo, un titre, quelques lignes. Trois colonnes sur ordinateur, une seule
   sur téléphone : trois vignettes de 110 px ne montrent rien.

   Ratio fixe sur les images, comme partout : sans lui la rangée se décale au
   chargement et le CLS grimpe. */

.blocs-illustres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e5);
  margin-block: var(--e8);
  padding-top: var(--e7);
  border-top: 1px solid var(--bordure);
}

.blocs-illustres__bloc {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}

.blocs-illustres__bloc img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-media);
  background: var(--sauge);
}

.blocs-illustres__bloc figcaption { display: grid; gap: var(--e2); }

.blocs-illustres__bloc h3 {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: var(--t-h3);
}

.blocs-illustres__bloc p {
  margin: 0;
  font-size: var(--t-petit);
  color: var(--encre-doux);
}

@media (max-width: 900px) {
  .blocs-illustres { grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
  .blocs-illustres__bloc img { aspect-ratio: 16 / 9; }
}

/* Vignettes de galerie : des boutons, pas des liens. Un lien vers le fichier
   emmenait le visiteur sur une image nue, hors du parcours d'achat. */
.galerie-produit__vignette {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #fff;
  border-radius: var(--r-champ);
  overflow: hidden;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--bordure);
  transition: box-shadow var(--transition);
}

.galerie-produit__vignette:hover,
.galerie-produit__vignette:focus-visible,
.galerie-produit__vignette[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--vert-decor);
}

.galerie-produit__vignette img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.galerie-produit__suite li { position: relative; }

button.galerie-produit__reste {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  padding: var(--e1) var(--e2);
  border: 0;
  background: rgba(22, 24, 15, .72);
  color: #fff;
  font-family: var(--police-texte);
  font-size: var(--t-label);
  letter-spacing: .02em;
  cursor: pointer;
}

/* `display: grid` ecrase l'attribut `hidden` du HTML : la regle est plus
   specifique que le `display: none` de la feuille du navigateur. Resultat mesure :
   sept vignettes affichees au lieu de quatre, sur deux rangees, avec un bouton
   « +3 photos » qui promettait des images deja visibles. Le HTML etait correct,
   l'attribut bien pose — c'est la feuille de style qui le contredisait. */
.galerie-produit__cachees[hidden] { display: none; }

.galerie-produit__cachees {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--e2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* =========================================================================
   COLONNE DE FACETTES — boutique et pages catégorie
   -------------------------------------------------------------------------
   Un flottant, pas une grille. Le nombre d'éléments frères entre l'en-tête et
   la grille produit varie (notices, compteur de résultats, tri) : une grille
   demanderait de placer chaque enfant à la main et casserait au premier hook
   ajouté par une extension. Le flottant retire la colonne du flux et laisse
   tout le reste se caler dessus, quel qu'en soit le nombre.
   ====================================================================== */

.facettes {
    margin: 0 0 2rem;
    border: 1px solid var(--trait, #e3ddd2);
    border-radius: 4px;
    background: #fff;
}

.facettes__bascule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1.1rem;
    font-family: var(--police-titre, Playfair Display), serif;
    font-size: 1.05rem;
    cursor: pointer;
    list-style: none;
}

.facettes__bascule::-webkit-details-marker { display: none; }

.facettes__bascule span::after {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
}

.facettes[open] .facettes__bascule span::after {
    transform: rotate(-135deg) translate(-3px, -3px);
}

.facettes__effacer {
    display: inline-block;
    margin: 0 1.1rem .4rem;
    font-size: .85rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.facette { padding: .3rem 1.1rem 1.1rem; }
.facette + .facette { border-top: 1px solid var(--trait, #e3ddd2); padding-top: 1rem; }

.facette__titre {
    margin: 0 0 .6rem;
    font-family: var(--police-texte, Outfit), sans-serif;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--encre-douce, #6d6357);
}

.facette__liste { margin: 0; padding: 0; list-style: none; }

/* La ligne entière est cliquable : sur un téléphone, viser une case de 14 px
   au doigt échoue une fois sur trois. Ici la cible fait toute la largeur. */
.facette__option {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .42rem 0;
    color: inherit;
    text-decoration: none;
    line-height: 1.3;
}

.facette__case {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--trait-fort, #c9c0b0);
    border-radius: 3px;
    background: #fff;
}

.facette__option:hover .facette__case { border-color: var(--encre, #241f19); }

.facette__option.est-coche .facette__case {
    border-color: var(--action, #8a6d3b);
    background: var(--action, #8a6d3b);
    box-shadow: inset 0 0 0 2.5px #fff;
}

.facette__option.est-coche .facette__nom { font-weight: 600; }

.facette__nom { flex: 1 1 auto; font-size: .93rem; }
.facette__nom small { display: block; font-size: .78rem; color: var(--encre-douce, #6d6357); }

.facette__compte {
    flex: 0 0 auto;
    font-size: .78rem;
    color: var(--encre-douce, #6d6357);
    font-variant-numeric: tabular-nums;
}

.facette__option:focus-visible {
    outline: 2px solid var(--action, #8a6d3b);
    outline-offset: 2px;
    border-radius: 3px;
}

@media (min-width: 900px) {
    .facettes {
        float: left;
        width: 236px;
        margin-right: 2.6rem;
        position: sticky;
        top: 1.5rem;
    }

    /* Sur grand écran le panneau est toujours ouvert, quel que soit l'attribut
       `open` du HTML : la place est disponible, et un filtre replié sur un écran
       large ne se voit pas et ne se clique pas.

       `content-visibility` en plus de `display` : les navigateurs récents masquent
       le contenu d'un `details` fermé par un pseudo-élément que `display` seul
       n'atteint pas. Sans cette ligne, la colonne resterait vide sur desktop —
       et le CSS aurait l'air juste à la lecture. */
    .facettes > :not(summary) { display: block; content-visibility: visible; }
    .facettes::details-content { content-visibility: visible; block-size: auto; }

    /* Le triangle ne sert qu'au repli sur téléphone. */
    .facettes__bascule { cursor: default; pointer-events: none; }
    .facettes__bascule span { display: none; }

    /* La marge de dégagement ne vaut que pour les blocs ORDINAIRES.
     *
     * Un flottant ne rétrécit pas la boîte d'un bloc, seulement ses lignes de texte :
     * ces éléments-là ont donc besoin qu'on les décale à la main.
     *
     * `ul.products` est en `display: grid`. Une grille crée son propre contexte de
     * formatage, et un tel conteneur s'écarte DÉJÀ du flottant de lui-même. Lui
     * ajouter la marge la comptait deux fois : mesuré dans le navigateur, la grille
     * tombait à 515 px de large et les cartes produit à 111 px — illisibles. Le CSS
     * était pourtant « correct » à la lecture. */
    .woocommerce-result-count,
    .woocommerce-ordering,
    .woocommerce-no-products-found {
        margin-left: 268px;
    }

    /* La grille est FLOTTANTE, pas simplement décalée.
     *
     * `ul.products` est en `display: grid`, donc un conteneur qui crée son propre
     * contexte de formatage — et un tel conteneur ne se place pas à côté d'un
     * flottant, il se rétrécit pour l'éviter. Mesuré : grille de 515 px et cartes
     * produit de 109 px de large sur un écran de 1440. Ni la marge, ni le retrait du
     * `position: sticky` n'y changeaient quoi que ce soit ; seul le passage en
     * flottant a rendu ses 890 px à la grille et 203 px aux cartes.
     *
     * Le CSS avait l'air juste à la lecture dans les trois cas. Il n'y a que la
     * mesure dans le navigateur qui départage (§12.16, §12.35). */
    .woocommerce ul.products {
        float: left;
        width: calc(100% - 278px);
        clear: none;
    }

    /* Tout ce qui suit la grille repasse sous les deux flottants. Sans ce dégagement,
     * la pagination et la description longue viendraient se loger dans la colonne
     * étroite restée libre à droite des filtres. */
    .woocommerce-pagination,
    .description-categorie,
    .editorial {
        clear: both;
    }

    .woocommerce-pagination { margin-left: 268px; }

    /* Sans ce nettoyage, le pied de page remonte le long de la colonne quand la
       grille est plus courte qu'elle — deux produits filtrés suffisent. */
    .woocommerce ul.products::after { content: ""; display: block; clear: both; }
}

/* =========================================================================
   PUCES DE VARIANTE
   -------------------------------------------------------------------------
   La liste déroulante d'origine reste dans la page et reste seule maîtresse :
   c'est elle que WooCommerce lit à l'ajout au panier. Les puces la pilotent.
   Le `hidden` sur le bloc et le masquage du `select` ne sont levés que par le
   script : sans JavaScript, la liste réapparaît et la fiche reste vendable.
   ====================================================================== */

.puces-variante[hidden] { display: none; }

.puces-variante__titre {
    display: block;
    margin-bottom: .55rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--encre-douce, #6d6357);
}

.puces-variante__liste {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin: 0 0 1.2rem;
    padding: 0;
    list-style: none;
}

.puce-variante {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    width: 92px;
    padding: .4rem .3rem .5rem;
    border: 1.5px solid var(--trait, #e3ddd2);
    border-radius: 4px;
    background: #fff;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.puce-variante img,
.puce-variante__sansphoto {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 3px;
    background: var(--fond-doux, #f4f0e9);
}

.puce-variante__nom {
    font-size: .8rem;
    line-height: 1.25;
    text-align: center;
}

.puce-variante:hover { border-color: var(--trait-fort, #c9c0b0); }

.puce-variante[aria-pressed="true"] {
    border-color: var(--action, #8a6d3b);
    box-shadow: 0 0 0 1px var(--action, #8a6d3b);
}

.puce-variante:focus-visible {
    outline: 2px solid var(--action, #8a6d3b);
    outline-offset: 2px;
}

/* Quand les puces prennent la main, la liste déroulante n'a plus à s'afficher.
   La classe est posée par le script, jamais dans le HTML servi. */
.variantes-en-puces .variations { display: none; }

/* =========================================================================
   BANDEAU DE CONFIANCE — panier et commande
   ====================================================================== */

.confiance {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem 1.6rem;
    margin: 0 0 2rem;
    padding: 1.1rem 1.3rem;
    list-style: none;
    border: 1px solid var(--trait, #e3ddd2);
    border-radius: 4px;
    background: var(--fond-doux, #f4f0e9);
}

.confiance__item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin: 0;
}

.confiance__icone { flex: 0 0 auto; color: var(--action, #8a6d3b); margin-top: 1px; }

.confiance__item > span { display: flex; flex-direction: column; gap: .1rem; }
.confiance__item strong { font-size: .93rem; font-weight: 600; }
.confiance__item span span { font-size: .82rem; color: var(--encre-douce, #6d6357); line-height: 1.35; }

/* =========================================================================
   OFFRE LOT ET OFFRE PROFESSIONNELLE
   -------------------------------------------------------------------------
   Volontairement discret : un encadré criard sur une fiche produit fait lire
   « déstockage » et abîme la perception du prix. Un filet à gauche suffit à
   détacher l'information sans la faire crier.
   ====================================================================== */

.offre-lot {
    margin: 1.1rem 0 0;
    padding: .75rem .95rem;
    border-left: 3px solid var(--action, #8a6d3b);
    background: var(--fond-doux, #f4f0e9);
    font-size: .9rem;
    line-height: 1.5;
}

.offre-lot.est-acquise { border-left-color: #3f7d54; }

.offre-lot--fiche { margin-top: 1.4rem; }

.offre-pro-lien {
    margin: .7rem 0 0;
    font-size: .85rem;
    color: var(--encre-douce, #6d6357);
}

.offre-pro-lien a { text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================================
   DEUX DÉFAUTS MESURÉS DANS LE NAVIGATEUR, INVISIBLES DANS LE CODE
   ====================================================================== */

/* 1. `clear: both` de WooCommerce poussait la grille SOUS la colonne de filtres.
      Mesuré à 1440 px : premier produit à 854 px, c'est-à-dire sous le pli, avec
      430 px de blanc à droite des filtres. Le sélecteur est recopié à l'identique,
      élément compris — `.woocommerce ul.products` et non `.products` — sinon celui
      de WooCommerce l'emporte pour un élément de plus (§12.35). */
@media (min-width: 900px) {
    .woocommerce ul.products { clear: none; }
}

/* 2. La description de catégorie est une colonne de lecture de 714 px centrée dans
      un conteneur de 1200. C'est la bonne largeur pour du texte — une ligne de
      1200 px se lit mal. Ce n'est pas la bonne largeur pour un tableau à six
      colonnes : mesuré, l'un d'eux demandait 1657 px et défilait horizontalement
      alors qu'il restait 243 px libres de chaque côté.

      On sort donc les tableaux de la colonne de lecture, symétriquement, sans
      toucher à la longueur de ligne du texte. Ce qui dépasse encore garde le
      défilement du §12.22 comme filet. */
@media (min-width: 1000px) and (max-width: 1239px) {
    .description-categorie table {
        width: calc(100% + 200px);
        max-width: none;
        margin-inline: -100px;
    }
}

@media (min-width: 1240px) {
    .description-categorie table {
        width: calc(100% + 420px);
        max-width: none;
        margin-inline: -210px;
    }
}

/* =========================================================================
   ARTICLE — la réponse avant la photo
   -------------------------------------------------------------------------
   Mesuré à 1440 px : l'image mise en avant occupait 657 px de haut et le
   premier paragraphe commençait à 1017 px. Sur un écran de 900 px, un lecteur
   venu de Google voyait un titre et une photo, et rien de la réponse.

   Une photo de 400 px reste ample et laisse le chapô visible sans défiler.
   `object-fit: cover` évite la déformation, le ratio explicite évite le saut
   de mise en page au chargement.
   ====================================================================== */

.single-post .wp-post-image {
    max-height: 400px;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 899px) {
    .single-post .wp-post-image { max-height: 260px; }
}

/* =========================================================================
   FICHE PRODUIT — cartes de variante, bande d'images, ombre de feuille
   ====================================================================== */

/* --- Les variantes sont des cartes, pas des puces -------------------------
   Une carte se voit de loin, montre la photo en grand et se vise au doigt.
   Une puce de 92 px avec une vignette de 80 fait deviner. Sur des objets
   dont la seule difference visible est la forme ou le decor, c'est la photo
   qui fait choisir — donc elle doit etre grande. */

.puces-variante__liste {
  display: grid;
  /* 120 px plutot que 132 : dans la colonne de resume de 540 px, 132 donnait
     trois colonnes et laissait la quatrieme carte seule sur une rangee. Mesure a
     l'ecran, pas deduite de la regle. */
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--e3);
  margin: 0 0 var(--e5);
  padding: 0;
  list-style: none;
}

.puce-variante {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1.5px solid var(--bordure, #e3ddd2);
  border-radius: 10px;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.puce-variante img,
.puce-variante__sansphoto {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0;
  background: var(--fond-doux, #f4f0e9);
}

.puce-variante__nom {
  display: block;
  padding: 10px 12px 12px;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
}

/* `transform` et `opacity` uniquement, 160 ms : le §7.7 interdit tout ce qui
   coute une reprise de mise en page, et interdit toute animation sur le
   chemin d'achat. Un deplacement d'un pixel reste sous ce seuil. */
.puce-variante:hover { border-color: var(--trait-fort, #c9c0b0); transform: translateY(-1px); }

.puce-variante[aria-pressed="true"] {
  border-color: var(--vert-action);
  box-shadow: inset 0 0 0 1px var(--vert-action);
}

/* La coche : elle dit « celui-la », sans depender du survol (§12.19). */
.puce-variante[aria-pressed="true"] .puce-variante__nom {
  position: relative;
  padding-right: 32px;
  font-weight: 600;
}
.puce-variante[aria-pressed="true"] .puce-variante__nom::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  width: 13px;
  height: 7px;
  margin-top: -5px;
  border-left: 2px solid var(--vert-action);
  border-bottom: 2px solid var(--vert-action);
  transform: rotate(-45deg);
}

.puce-variante:focus-visible { outline: 2px solid var(--vert-action); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .puce-variante { transition: none; }
  .puce-variante:hover { transform: none; }
}

/* --- Les trois images du bas, sans legende --------------------------------
   Une bande de trois photos, ratio fixe pour qu'aucune ne fasse sauter la
   page au chargement. Le contenu qui les accompagnait vit desormais dans le
   tableau de caracteristiques et dans les questions frequentes. */

.blocs-illustres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e3);
  margin: var(--e6) 0;
}

.blocs-illustres__bloc { margin: 0; }

.blocs-illustres__bloc img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 8px;
}

@media (max-width: 599px) {
  /* Sur telephone, trois colonnes donneraient des vignettes de 110 px. Une
     bande qui defile garde des images assez grandes pour montrer l'objet. */
  .blocs-illustres {
    display: flex;
    gap: var(--e3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .blocs-illustres__bloc { flex: 0 0 72%; scroll-snap-align: start; }
  .blocs-illustres__bloc img { aspect-ratio: 1 / 1; }
}


/* =========================================================================
   RÉASSURANCE DE FICHE — des cartes, plus une liste à puces
   ====================================================================== */

.reassurance-fiche {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--e3);
  margin: var(--e5) 0 var(--e3);
  padding: 0;
  border-top: 0;
  list-style: none;
}

.reassurance-fiche__point {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: .55rem .75rem;
  align-items: start;
  margin: 0;
  padding: .85rem .95rem .9rem;
  border: 1px solid var(--bordure, #e3ddd2);
  border-radius: 8px;
  background: #fff;
  font-size: var(--t-petit);
}

.reassurance-fiche__point .confiance__icone {
  grid-row: 1 / span 2;
  width: 24px;
  height: 24px;
  color: var(--vert-foret);
  margin-top: 1px;
}

.reassurance-fiche__point strong { grid-column: 2; font-weight: 600; color: var(--encre); line-height: 1.3; }
.reassurance-fiche__point span   { grid-column: 2; color: var(--encre-doux); line-height: 1.45; }

.reassurance-fiche__lien { font-size: var(--t-petit); margin: 0; }

@media (min-width: 600px) and (max-width: 899px) {
  .reassurance-fiche { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   DESCRIPTION LONGUE REPLIÉE
   -------------------------------------------------------------------------
   Le texte entier est dans le HTML : on ne fait que le masquer. Un contenu
   injecté au clic n'est pas lu par les robots, un contenu tronqué côté
   serveur ne l'est plus du tout. Ici, rien ne se perd.

   `est-replie` n'est posé que par le script. Sans JavaScript, la description
   s'affiche en entier.
   ====================================================================== */

.description-repli { position: relative; }

.description-repli.est-replie .description-repli__corps {
  max-height: 320px;
  overflow: hidden;
}

/* Le dégradé annonce qu'il y a une suite. Il est décoratif et ne masque aucun
   texte utile : la coupe tombe au milieu d'un paragraphe, jamais sur un titre. */
.description-repli.est-replie .description-repli__corps::after {
  content: '';
  position: absolute;
  inset: auto 0 44px 0;
  height: 110px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--fond, #fff) 88%);
}

.description-repli__bouton {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: var(--e3);
  padding: .55rem 1.1rem;
  border: 1.5px solid var(--vert-action);
  border-radius: 999px;
  background: transparent;
  color: var(--vert-action);
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.description-repli__bouton::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}

.description-repli.est-ouvert .description-repli__bouton::after {
  transform: rotate(-135deg) translate(-3px, -3px);
}

.description-repli__bouton:hover { background: var(--vert-action); color: #fff; }
.description-repli__bouton:focus-visible { outline: 2px solid var(--vert-action); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .description-repli__bouton { transition: none; }
}

/* Une carte seule sur sa ligne fait un trou à côté d'elle. Quand le nombre est
   impair, la dernière prend toute la largeur : la grille se referme proprement
   sans qu'on ait à choisir un nombre de repères pour arranger la mise en page. */
.reassurance-fiche__point:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (max-width: 599px) {
  /* Une seule colonne sur téléphone : à deux, les cartes tombent sous 160 px et
     le texte casse un mot par ligne. */
  .reassurance-fiche { grid-template-columns: minmax(0, 1fr); }
  .reassurance-fiche__point:last-child:nth-child(odd) { grid-column: auto; }
}

/* =========================================================================
   MENU PRINCIPAL ET PANNEAU DÉROULANT
   -------------------------------------------------------------------------
   Le panneau s'ouvre au survol ET au focus clavier, sans JavaScript. Le script
   n'ajoute que le tactile, où le survol n'existe pas (§12.19) : sur téléphone,
   un menu qui n'apparaît qu'au survol est un menu invisible.
   ====================================================================== */

.menu-principal {
  display: flex;
  align-items: center;
  gap: var(--e4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-principal__item { position: relative; margin: 0; }

.menu-principal__lien {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem 0;
  color: inherit;
  text-decoration: none;
  font-size: .95rem;
}

.menu-principal__lien:hover,
.menu-principal__item.est-actif > .menu-principal__lien { color: var(--vert-foret); }

.menu-principal__chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}

/* --- le panneau ---------------------------------------------------------- */

.panneau {
  position: absolute;
  z-index: 60;
  top: 100%;
  left: 50%;
  width: min(1040px, calc(100vw - 32px));
  transform: translateX(-50%) translateY(-6px);
  padding: var(--e5) var(--e5) var(--e4);
  border: 1px solid var(--bordure, #e3ddd2);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(23, 23, 23, .10);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.a-panneau:hover > .panneau,
.a-panneau:focus-within > .panneau,
.a-panneau.est-ouvert > .panneau {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.a-panneau:hover > .menu-principal__lien .menu-principal__chevron,
.a-panneau:focus-within > .menu-principal__lien .menu-principal__chevron,
.a-panneau.est-ouvert > .menu-principal__lien .menu-principal__chevron {
  transform: rotate(-135deg) translate(-3px, -3px);
}

/* Une bande invisible entre le lien et le panneau : sans elle, le panneau se
   referme dès que la souris traverse les quelques pixels qui les séparent. */
.a-panneau::after {
  content: '';
  position: absolute;
  inset: 100% 0 auto 0;
  height: 10px;
}

.panneau__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 1.15fr;
  gap: var(--e5);
}

/* `.nav-principale ul` rend les listes horizontales pour la barre du haut. Sans
   remise a plat explicite, les liens du panneau se rangeaient sur une seule ligne
   et se chevauchaient — quatre colonnes illisibles. Le CSS etait pourtant « juste »
   a la lecture : ca ne se voit qu'a l'ecran. */
.panneau__colonne ul {
  display: block;
  flex-direction: initial;
  align-items: initial;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.panneau__colonne li { margin: 0; }

.panneau__titre {
  display: block;
  margin-bottom: var(--e3);
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--bordure, #e3ddd2);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-doux, #6d6357);
}

.panneau__colonne a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  padding: .34rem 0;
  color: inherit;
  text-decoration: none;
  font-size: .93rem;
}

.panneau__colonne a:hover { color: var(--vert-foret); }
.panneau__colonne a:focus-visible { outline: 2px solid var(--vert-action); outline-offset: 2px; border-radius: 3px; }

.panneau__compte {
  font-size: .78rem;
  color: var(--encre-doux, #6d6357);
  font-variant-numeric: tabular-nums;
}

.panneau__colonne--mise-en-avant {
  padding-left: var(--e5);
  border-left: 1px solid var(--bordure, #e3ddd2);
}

.panneau__accroche { margin: 0 0 var(--e3); font-size: .9rem; line-height: 1.5; color: var(--encre-doux, #6d6357); }

.panneau__bouton {
  display: inline-block;
  padding: .5rem 1.05rem;
  border-radius: 999px;
  background: var(--vert-action);
  color: #fff;
  text-decoration: none;
  font-size: .88rem;
  font-weight: 500;
}

.panneau__bouton:hover { background: var(--vert-action-actif, #3F5F2C); color: #fff; }

.panneau__pro {
  margin: var(--e4) 0 0;
  padding-top: var(--e3);
  border-top: 1px solid var(--bordure, #e3ddd2);
  font-size: .84rem;
  line-height: 1.5;
  color: var(--encre-doux, #6d6357);
}

.panneau__pro a { color: var(--vert-foret); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .panneau, .menu-principal__chevron { transition: none; }
}

/* --- téléphone : le panneau devient un accordéon ------------------------- */

@media (max-width: 899px) {
  .menu-principal { flex-direction: column; align-items: stretch; gap: 0; }
  .menu-principal__item { border-bottom: 1px solid var(--bordure, #e3ddd2); }
  .menu-principal__lien { justify-content: space-between; padding: .85rem 0; font-size: 1rem; }

  .panneau {
    position: static;
    width: auto;
    transform: none;
    padding: 0 0 var(--e4);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Sur telephone le survol n'existe pas : seul le clic ouvre, et c'est le
     script qui pose la classe. Sans lui, le panneau reste ferme et le lien
     « Théières » mene quand meme a la boutique. */
  .a-panneau:hover > .panneau,
  .a-panneau:focus-within > .panneau { display: none; }
  .a-panneau.est-ouvert > .panneau { display: block; }

  /* LE DEFAUT QUI RENDAIT LE MENU ILLISIBLE (CLAUDE.md §12.35).
     `.panneau` pose bien `transform: none` juste au-dessus, mais l'etat ouvert
     est ecrit `.a-panneau.est-ouvert > .panneau` — trois classes contre une. Une
     media query ne change PAS la specificite : le `translateX(-50%)` du bureau
     continuait de s'appliquer sur telephone et sortait le panneau de 520 px vers
     la gauche. A l'ecran, on ne voyait plus que les compteurs alignes a droite,
     les libelles etaient hors cadre. Le CSS etait « juste » a la lecture.
     On reprend donc le meme selecteur, a l'identique. */
  .a-panneau:hover > .panneau,
  .a-panneau:focus-within > .panneau,
  .a-panneau.est-ouvert > .panneau { transform: none; }

  .panneau__grille { grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
  .panneau__colonne--mise-en-avant { padding-left: 0; border-left: 0; padding-top: var(--e4); border-top: 1px solid var(--bordure, #e3ddd2); }

  /* MEME PIEGE, DEUX FOIS ENCORE. `.nav-principale a` vaut (0,2,0) et ecrase le
     `display: inline-flex` de `.menu-principal__lien`, qui n'en vaut que (0,1,0).
     Consequences visibles a l'ecran, invisibles a la lecture :
       - le lien redevenait `block`, donc `justify-content: space-between` ne
         s'appliquait plus et le chevron se collait au mot au lieu d'aller a droite ;
       - le bouton « La boutique » perdait son centrage et son texte partait a gauche
         dans une pastille pleine largeur.
     On reprend un selecteur de meme portee, pas une version « propre » plus courte. */
  .nav-principale .menu-principal__lien {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav-principale .panneau__bouton {
    display: block;
    padding: .85rem 1.2rem;
    text-align: center;
    /* `.nav-principale a` impose `var(--encre)` et vaut (0,2,0) : le bouton
       ressortait en encre sombre sur vert action, sous le seuil de contraste AA. */
    color: #fff;
    border-bottom: 0;
  }
  /* Cibles tactiles : un lien de menu se vise au pouce, pas a la souris. */
  .nav-principale .panneau__colonne a { padding-block: .7rem; }
}

/* =========================================================================
   BANDEAU DE CATÉGORIE
   -------------------------------------------------------------------------
   Une bande d'ambiance qui occupe environ 10 % de la hauteur de l'écran —
   assez pour poser le sujet, jamais assez pour repousser les produits sous
   le pli. Un héros pleine page sur une catégorie fait défiler avant de voir
   quoi que ce soit à acheter.

   La pleine largeur s'obtient sans toucher au PHP : la marge négative sort
   du conteneur centré, le padding compense. `overflow-x: hidden` sur html
   et body, déjà posé au §12.22, empêche la barre de défilement horizontale
   que `50vw` provoquerait sinon.

   Sans image de catégorie, la bande reste une teinte unie : c'est le cas
   par défaut, et c'est délibéré. Une photo tirée au hasard d'un produit
   risquerait d'afficher du texte de fournisseur en bandeau de page.
   ====================================================================== */

.woocommerce-products-header {
  position: relative;
  isolation: isolate;
  margin-inline: calc(50% - 50vw);
  margin-bottom: var(--e5);
  /* Mesure a l'ecran : avec 120 px de plancher et 34 px de padding, la bande
     faisait 132 px sur une fenetre de 900, soit 14,7 %. Ces valeurs-ci la posent
     autour de 10 %, ce qui etait la demande. */
  padding: clamp(14px, 2.2vw, 22px) calc(50vw - 50%);
  min-height: clamp(84px, 10vh, 132px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--fond-doux, #f4f0e9);
  border-bottom: 1px solid var(--bordure, #e3ddd2);
}

/* Une image de catégorie, quand elle est renseignée. La teinte reste dessous :
   si l'image met du temps à charger, le texte est lisible tout de suite et il
   ne saute pas ensuite. */
.woocommerce-products-header.a-image::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--fond-categorie);
  background-size: cover;
  background-position: center;
}

.woocommerce-products-header.a-image::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .84) 46%, rgba(255, 255, 255, .40) 100%);
}

.woocommerce-products-header__title {
  margin: 0;
  font-size: clamp(1.75rem, 1rem + 2.4vw, 3rem);
  line-height: 1.06;
  text-wrap: balance;
}

.chapo-categorie {
  margin: .7rem 0 0;
  max-width: 62ch;
  font-size: clamp(.95rem, .92rem + .2vw, 1.05rem);
  line-height: 1.55;
  color: var(--encre-doux, #6d6357);
}

/* Le fil d'Ariane rejoint la bande : sorti d'elle, il flottait au-dessus dans
   un blanc qui n'appartenait à rien. */
.woocommerce-breadcrumb {
  margin-inline: calc(50% - 50vw);
  padding: var(--e3) calc(50vw - 50%) 0;
  background: var(--fond-doux, #f4f0e9);
  font-size: var(--t-petit);
}

.tax-product_cat .woocommerce-breadcrumb,
.post-type-archive-product .woocommerce-breadcrumb { margin-bottom: 0; }

@media (max-width: 599px) {
  .woocommerce-products-header { min-height: clamp(72px, 10vh, 104px); }
}

/* Le chapô a quitté le bandeau : il vit maintenant au-dessus de la grille, sur
   le fond de page. Il garde sa largeur de lecture et son rôle — répondre à la
   requête avant que le visiteur ait à faire quoi que ce soit. */
.chapo-categorie {
  margin: 0 0 var(--e4);
  max-width: 68ch;
}

@media (min-width: 900px) {
  /* Il précède la colonne de facettes dans le flux : sans dégagement, il se
     retrouverait à côté d'elle au lieu de la surmonter. */
  .chapo-categorie { clear: both; }
}

/* ==========================================================================
   OFFRE PAR LOT — fiche produit et page d'accueil
   Posé le 25/08/2026, barème dégressif sur le même modèle.

   Le parti pris tient en une phrase : ça doit avoir l'air d'une information,
   pas d'une promotion. Pas de rouge, pas de pastille « -15% ! », pas de compte
   à rebours. Le chiffre est en Playfair comme les titres du site, le fond reste
   dans la gamme crème du reste de la page, et le seul accent est le vert qui
   sert déjà au bouton d'achat. Un badge qui crie sur une théière à 109 € fait
   douter du prix ; un badge qui informe fait ajouter un deuxième exemplaire.
   ========================================================================== */

.offre-paliers {
  margin: var(--e5) 0 var(--e4);
  padding: var(--e4) var(--e5);
  background: var(--sauge-clair);
  border: 1px solid var(--bordure);
  border-radius: var(--r-media);
}

.offre-paliers__intro {
  margin: 0 0 var(--e3);
  font-size: var(--t-petit);
  color: var(--encre-doux);
}

.offre-paliers__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.offre-paliers__liste li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--e3) var(--e2);
  background: var(--creme);
  border: 1px solid var(--bordure);
  border-radius: var(--r-champ);
}

.offre-paliers__qte {
  font-family: var(--police-titre);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--encre);
}

.offre-paliers__taux {
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--vert-action);
  letter-spacing: .01em;
}

.offre-paliers__note {
  margin: var(--e3) 0 0;
  font-size: var(--t-petit);
  color: var(--encre-doux);
}

/* Le renvoi professionnel, sous le bloc. Discret : il ne s'adresse qu'à ceux
   qui se reconnaissent dedans, et il ne doit pas parasiter l'achat unitaire. */
.offre-pro-lien {
  margin: 0 0 var(--e5);
  font-size: var(--t-petit);
  color: var(--encre-doux);
}

.offre-pro-lien a { color: var(--vert-action); text-decoration: underline; }
.offre-pro-lien a:hover { color: var(--vert-action-actif); }

/* Le message d'état dans le panier. */
.offre-lot {
  margin: 0 0 var(--e4);
  padding: var(--e3) var(--e4);
  background: var(--sauge);
  border-left: 3px solid var(--vert-decor);
  border-radius: var(--r-champ);
  font-size: var(--t-petit);
  color: var(--encre-doux);
}

.offre-lot.est-acquise {
  background: color-mix(in srgb, var(--vert-action) 8%, var(--creme));
  border-left-color: var(--vert-action);
  color: var(--vert-foret);
}

.offre-lot strong { color: var(--encre); }
.offre-lot[hidden] { display: none; }

@media (max-width: 480px) {
  .offre-paliers { padding: var(--e4); }
  .offre-paliers__liste { gap: var(--e1); }
  .offre-paliers__qte { font-size: 1.2rem; }
}

/* --------------------------------------------------------------------------
   BLOC OFFRE PAR LOT — page d'accueil
   Il tombe entre les repères et les guides, là où la page n'avait plus rien
   à raconter avant le pied de page. Fond vert forêt : c'est la seule section
   sombre de la page, ce qui la détache sans avoir besoin de crier.
   -------------------------------------------------------------------------- */

.section--lot {
  background: var(--vert-foret);
  color: var(--creme);
}

.bloc-lot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.bloc-lot__surtitre {
  margin: 0 0 var(--e2);
  font-size: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--creme) 62%, transparent);
}

.bloc-lot .titre-section { color: var(--creme); margin-bottom: var(--e3); }

.bloc-lot__texte > p {
  color: color-mix(in srgb, var(--creme) 82%, transparent);
  max-width: 46ch;
}

.bloc-lot__pro {
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid color-mix(in srgb, var(--creme) 22%, transparent);
  font-size: var(--t-petit);
}

.bloc-lot__pro strong { display: block; color: var(--creme); margin-bottom: 2px; }
.bloc-lot__pro a { color: var(--creme); text-decoration: underline; text-underline-offset: 3px; }

.bloc-lot__paliers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bloc-lot__paliers li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 168px;
  padding: var(--e5) var(--e3);
  background: color-mix(in srgb, var(--creme) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--creme) 18%, transparent);
  border-radius: var(--r-media);
  text-align: center;
}

.bloc-lot__qte {
  font-family: var(--police-titre);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  line-height: 1;
  color: var(--creme);
}

.bloc-lot__taux {
  font-size: var(--t-base);
  font-weight: 600;
  color: color-mix(in srgb, var(--creme) 92%, transparent);
}

.bloc-lot__legende {
  font-size: var(--t-label);
  line-height: 1.3;
  color: color-mix(in srgb, var(--creme) 58%, transparent);
}

/* Le mobile porte 70 à 80 % du trafic : la grille passe à une colonne, et les
   trois paliers restent côte à côte — empilés, ils perdraient la comparaison
   qui fait tout l'intérêt d'un barème dégressif. */
@media (max-width: 860px) {
  .bloc-lot { grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
  .bloc-lot__texte > p { max-width: none; }
}

@media (max-width: 420px) {
  .bloc-lot__paliers { gap: var(--e2); }
  .bloc-lot__paliers li { padding: var(--e4) var(--e1); }
  .bloc-lot__legende { font-size: .68rem; }
}

/* --------------------------------------------------------------------------
   LES TROIS TRADITIONS — bas de page d'accueil
   Posé le 25/08/2026, en remplacement d'un pavé de texte sans image.

   Ratio d'image fixe et dimensions explicites dans le HTML : c'est ce qui
   supprime le décalage de mise en page au chargement (CLS), qui est à la fois
   un critère de classement et la raison n°1 pour laquelle on clique à côté du
   bouton sur un téléphone.
   -------------------------------------------------------------------------- */

.editorial .traditions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin: var(--e6) 0 var(--e8);
}

.editorial .tradition { margin: 0; }

.editorial .tradition img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--sauge);
  border-radius: var(--r-media);
  margin-bottom: var(--e4);
}

.editorial .tradition h3 {
  margin: 0 0 var(--e2);
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.25;
}

.editorial .tradition p { margin: 0 0 var(--e3); }

.editorial .tradition p:last-child { margin-bottom: 0; }

.editorial .tradition a {
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--vert-action);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.editorial .tradition a:hover { color: var(--vert-action-actif); }

/* Deux colonnes sur tablette, une seule sur téléphone : trois colonnes à 390 px
   donneraient des images de 110 px, où l'on ne distingue plus la forme du bec —
   or c'est exactement ce que ces trois photos servent à montrer. */
@media (max-width: 900px) {
  .editorial .traditions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .editorial .traditions { grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
  .editorial .tradition img { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   REPÈRES DE CONFIANCE — fiche produit, version renforcée (25/08/2026)

   Ils étaient posés en liste nue sur fond blanc, séparés du reste par un simple
   filet : lisibles, mais on passait dessus sans les voir. Or c'est là que se
   joue la dernière hésitation avant le clic, sur un site que personne ne
   connaît encore.

   Renforcé veut dire cadré et contrasté, pas criard. On garde les mêmes
   pictogrammes au trait, la même palette, la même sobriété — on leur donne un
   fond, une bordure et de l'air. Aucun logo de sécurité inventé, aucun sceau
   « 100 % garanti » : la confiance vient de ce qui est écrit, pas d'un badge.
   -------------------------------------------------------------------------- */

.reassurance-fiche {
  margin: var(--e5) 0 var(--e3);
  padding: var(--e4);
  border-top: 0;
  background: var(--sauge-clair);
  border: 1px solid var(--bordure);
  border-radius: var(--r-media);
  gap: var(--e1);
}

.reassurance-fiche__point {
  padding: var(--e3);
  border-radius: var(--r-champ);
  background: var(--creme);
  border: 1px solid transparent;
  transition: border-color .18s ease;
}

.reassurance-fiche__point + .reassurance-fiche__point { margin-top: var(--e2); }

.reassurance-fiche__point .confiance__icone {
  width: 26px;
  height: 26px;
  color: var(--vert-action);
}

.reassurance-fiche__point strong {
  font-size: var(--t-base);
  line-height: 1.3;
}

.reassurance-fiche__point span { line-height: 1.45; }

.reassurance-fiche__lien {
  margin: var(--e3) 0 0;
  text-align: right;
}

/* Sur écran large, deux colonnes : quatre repères empilés poussent le contenu
   utile trop bas, et la colonne d'achat a la place. */
@media (min-width: 1100px) {
  .reassurance-fiche {
    grid-template-columns: 1fr 1fr;
    gap: var(--e2);
  }
  .reassurance-fiche__point + .reassurance-fiche__point { margin-top: 0; }
  .reassurance-fiche__lien { grid-column: 1 / -1; }
}

/* ==========================================================================
   REFONTE DU RYTHME — 26/08/2026

   Diagnostic mesuré, pas ressenti : cinq sections sur sept posées sur du blanc
   ou du quasi-blanc (#FFFFFF contre #FAFAF9, soit 2,3 % d'écart), des cartes
   blanches retenues par une bordure à 1,1:1 de contraste, cinq intervalles
   inter-sections rigoureusement égaux à 192 px, six titres de section à la même
   taille, et les seuls chiffres de la page — les paliers de remise — plus petits
   que les titres qui les entourent.

   Rien de tout cela n'est un défaut de goût : ce sont des valeurs qui se
   comptent. On les corrige donc par des valeurs, pas par des effets.
   ========================================================================== */

:root {
  /* Un fond alterné doit se VOIR. #FAFAF9 sur #FFFFFF ne se voit pas : on
     descend le pas à un écart perceptible, sans quitter la gamme chaude. */
  --sauge-clair: #F4F2ED;
  --sauge: #EDEAE3;
  /* La bordure des cartes tenait à 1,1:1. Sur un fond teinté, une carte blanche
     se détache toute seule ; sur un fond blanc, il lui faut un trait visible. */
  --bordure: rgba(22, 24, 15, .16);
}

/* ---- 1. L'alternance des fonds, rendue lisible -------------------------- */
.section--sauge { background: var(--sauge-clair); }
.section--creme { background: var(--creme); }

/* ---- 2. Le rythme vertical : toutes les sections ne se valent pas -------
   Trois respirations au lieu d'une seule. La section qui porte l'offre reçoit
   le plus d'air — c'est elle qu'on veut voir ralentir le défilement. */
.section--lot { padding-block: clamp(64px, 10vw, 128px); }
.section--sauge { padding-block: clamp(40px, 6vw, 72px); }

/* ---- 3. Les repères cessent d'être une quatrième rangée de cartes -------
   Ils redeviennent ce qu'ils sont : une bande de faits, pas des objets. Fond
   partagé, séparateurs verticaux, aucune ombre. La différence de nature se lit
   avant même qu'on ait lu le texte. */
.section--sauge .grille-reperes {
  gap: 0;
  border: 1px solid var(--bordure);
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--creme);
}

.section--sauge .grille-reperes .repere {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: var(--e5);
  border-inline-start: 1px solid var(--bordure);
}

.section--sauge .grille-reperes .repere:first-child { border-inline-start: 0; }

@media (max-width: 900px) {
  .section--sauge .grille-reperes .repere {
    border-inline-start: 0;
    border-top: 1px solid var(--bordure);
  }
  .section--sauge .grille-reperes .repere:first-child { border-top: 0; }
}

/* ---- 4. L'échelle typographique retrouve un cran ------------------------
   `--t-display` n'était utilisé nulle part : le héros posait sa propre valeur,
   et tout le reste vivait à --t-h2. On installe un niveau intermédiaire pour la
   section qui doit dominer le bas de page. */
.section--lot .titre-section {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.01em;
}

/* ---- 5. La densité remise à l'endroit ----------------------------------
   Les paliers sont les seuls chiffres de la page. Ils étaient plafonnés à
   33,6 px dans des boîtes de 168 px de haut, à côté de titres de 40 px : le
   contenant criait, le contenu chuchotait. */
.bloc-lot__qte {
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  letter-spacing: -.02em;
}

.bloc-lot__taux {
  font-size: clamp(1rem, .9rem + .4vw, 1.25rem);
  font-weight: 700;
}

.bloc-lot__paliers li { min-height: 0; padding: var(--e5) var(--e3) var(--e4); }

/* ---- 6. Les traditions sortent de la colonne de lecture ----------------
   `.editorial { max-width: 68ch }` écrasait les trois photos à ~190 px, plus
   petites que les vignettes produit vues plus haut. Le dernier moment illustré
   de la page était le plus étroit. On les rend à la largeur du conteneur. */
.editorial .traditions {
  max-width: none;
  width: min(var(--conteneur), 100%);
  margin-inline: calc(50% - min(var(--conteneur), 100vw - 2 * var(--e5)) / 2);
  margin-block: var(--e8) var(--e9);
}

.editorial .tradition img { aspect-ratio: 4 / 5; }

@media (max-width: 900px) {
  .editorial .traditions { margin-inline: 0; width: 100%; }
}

/* ---- 7. Les guides ne laissent plus un quart de rangée vide -------------
   `auto-fill minmax(280px, 1fr)` produisait quatre pistes pour trois articles.
   Trois colonnes explicites, et le trou disparaît. */
.grille-reperes--guides { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px)  { .grille-reperes--guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .grille-reperes--guides { grid-template-columns: minmax(0, 1fr); } }

/* ---- 8. La section de l'offre cesse d'annoncer la fin de la page --------
   `.section--lot` et `.pied` portaient rigoureusement la même valeur #24422A.
   Arrivant en cinquième position sur sept, la section verte disait « c'est
   fini » alors qu'il restait les guides et les traditions, qui se lisaient
   ensuite comme du hors-champ posé après le pied de page.

   On la passe à l'encre : plus sombre, plus dense, elle reste dans la gamme de
   la marque — l'encre porte déjà une pointe d'olive — mais on ne la confond
   plus avec le pied. Elle devient le point d'appui du bas de page au lieu d'en
   être le terminus. */
.section--lot {
  background: var(--encre);
  color: var(--creme);
}

.section--lot .bloc-lot__paliers li {
  background: color-mix(in srgb, var(--creme) 10%, transparent);
  border-color: color-mix(in srgb, var(--creme) 22%, transparent);
}

/* ==========================================================================
   LA CARTE DE REMISE PAR LOT — fiche produit, 26/08/2026

   L'ancien bloc alignait trois petites cases « ×2 −5 % » sur fond crème. Un
   pourcentage n'engage personne : il faut faire le calcul soi-même, et
   personne ne le fait devant un écran.

   La carte montre donc la PHOTO du produit et le PRIX UNITAIRE à chaque
   palier — 61,90 € seul, 55,71 € à trois. La décision se prend sur ce
   chiffre-là, pas sur le pourcentage, qui n'est plus qu'une mention discrète.

   Sobre malgré tout : fond crème, un seul filet vert, chiffres en Playfair
   comme les titres du site. Aucun rouge, aucune pastille, aucune urgence —
   l'offre est permanente et s'annonce comme telle.
   ========================================================================== */

.carte-lot {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: var(--e5);
  align-items: center;
  margin: var(--e5) 0 var(--e4);
  padding: var(--e5);
  background: var(--sauge-clair);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--vert-action);
  border-radius: var(--r-media);
}

.carte-lot__visuel {
  border-radius: var(--r-champ);
  overflow: hidden;
  background: var(--creme);
  border: 1px solid var(--bordure);
}

/* WooCommerce écrit l'élément devant la classe — `.woocommerce div.product img`
   bat une classe seule (§12.35). On recopie donc son sélecteur à l'identique
   plutôt que d'écrire une version plus courte qui perdrait en silence. */
.woocommerce div.product .carte-lot__visuel img,
.carte-lot__visuel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0;
}

.carte-lot__surtitre {
  margin: 0 0 2px;
  font-size: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vert-action);
}

.carte-lot__titre {
  margin: 0 0 var(--e4);
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem);
  line-height: 1.2;
  color: var(--encre);
}

.carte-lot__paliers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.carte-lot__palier {
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: var(--e3) var(--e2);
  background: var(--creme);
  border: 1px solid var(--bordure);
  border-radius: var(--r-champ);
  text-align: center;
}

.carte-lot__qte {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--encre-doux);
}

/* Le chiffre qui décide. Playfair, et la plus grosse valeur de la carte. */
.carte-lot__unitaire {
  font-family: var(--police-titre);
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
  line-height: 1.1;
  color: var(--encre);
}

.carte-lot__unitaire .woocommerce-Price-amount { font-size: inherit; color: inherit; }
.carte-lot__unitaire .woocommerce-Price-currencySymbol { font-size: .8em; }

.carte-lot__mention {
  font-size: .68rem;
  color: var(--encre-doux);
  line-height: 1;
}

.carte-lot__taux {
  margin-top: 2px;
  font-size: var(--t-label);
  font-weight: 700;
  color: var(--vert-action);
}

.carte-lot__note {
  margin: var(--e3) 0 0;
  font-size: var(--t-petit);
  line-height: 1.45;
  color: var(--encre-doux);
}

.carte-lot__note a { color: var(--vert-action); text-decoration: underline; }

/* Sur téléphone la photo passe au-dessus, mais les trois paliers RESTENT sur
   une ligne : empilés, ils perdraient la comparaison qui fait tout l'intérêt
   d'un barème dégressif. */
@media (max-width: 560px) {
  .carte-lot {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e4);
    padding: var(--e4);
  }
  .carte-lot__visuel { max-width: 140px; }
  .carte-lot__palier { padding: var(--e2) 4px; }
  .carte-lot__unitaire { font-size: 1.05rem; }
  .carte-lot__mention { font-size: .62rem; }
}

/* ---- 9. Les packshots des traditions ont besoin d'un contenant ----------
   Ces photos sont détourées sur blanc. Posées sur une section blanche en
   `aspect-ratio: 4/5`, la théière flotte au milieu d'un rectangle vide et l'œil
   ne sait pas où s'arrêter : l'image n'a pas de bord.

   Un aplat sauge et un peu de marge intérieure lui rendent un cadre. Le
   `object-fit` passe à `contain` : sur un packshot, `cover` rogne le bec ou
   l'anse, c'est-à-dire exactement ce qui distingue une tradition d'une autre. */
.editorial .tradition img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--sauge-clair);
  padding: var(--e5);
  border: 1px solid var(--bordure);
}

/* Le bloc de tête des traditions suit la largeur des colonnes plutôt que celle,
   plus étroite, de la colonne de lecture : sinon le titre est centré au-dessus
   d'un contenu deux fois plus large, et le rapport se lit de travers. */
.editorial .traditions + h2,
.editorial h2 + p { max-width: 62ch; }

@media (max-width: 600px) {
  .editorial .tradition img { aspect-ratio: 3 / 2; padding: var(--e4); }
}

/* =========================================================================
   HÉROS DE CATÉGORIE — bandeau illustré
   -------------------------------------------------------------------------
   À ajouter en fin de theme/linfuserie/style.css. Rien n'est réécrit ailleurs.

   LE CALCUL DE CONTRASTE, PARCE QUE C'EST LUI QUI DÉCIDE DE TOUT

   Le texte est blanc. Une photo de catégorie peut être n'importe quoi, y
   compris un fond blanc de packshot : le voile doit donc tenir le rapport AA
   dans le PIRE cas, pas dans le cas moyen.

   Voile mesuré sur un fond entièrement blanc, à la hauteur où le texte se pose
   (moitié basse du bandeau) : la couleur composite tombe autour de #4C4E47,
   soit un rapport de 8,4:1 avec le blanc. Au point le plus clair du voile, tout
   en haut à droite du bandeau, on descend à 3,9:1 — mais rien n'y est écrit :
   le bloc de texte est ancré en bas. Le fil d'Ariane, qui est l'élément le plus
   haut du bloc, mesure 7,9:1 dans cette configuration.

   Sur l'aplat de repli, le pire point mesure 7,5:1.

   Conséquence pratique : ne pas éclaircir les valeurs du voile sans refaire le
   calcul, et ne rien écrire dans la moitié haute du bandeau.
   ====================================================================== */

/* L'en-tête d'archive de WooCommerce n'a plus rien à porter sur une catégorie :
   son titre part dans le bandeau. `display: contents` supprime sa boîte sans
   supprimer un éventuel contenu tiers accroché à `woocommerce_archive_description`.
   Le sélecteur porte `body` pour passer devant `.woocommerce .woocommerce-products-header`,
   qui a la même longueur de classe. */
body.tax-product_cat .woocommerce-products-header { display: contents; }

/* Le bandeau se colle sous l'en-tête du site. Sans ça, la marge haute de
   `.section` laisserait une bande blanche de 48 à 96 px au-dessus de lui. */
body.tax-product_cat #contenu { padding-top: 0; }

.heros-categorie {
  position: relative;
  /* `isolation` garde les couches décoratives en z-index négatif à l'intérieur
     du bandeau : sans elle, elles passeraient derrière le fond de la page. */
  isolation: isolate;
  overflow: hidden;

  /* Pleine largeur depuis l'intérieur du conteneur centré. `overflow-x: hidden`
     sur html et body, déjà posé plus haut dans cette feuille, absorbe le
     dépassement que 50vw provoque quand une barre de défilement est visible. */
  margin-inline: calc(50% - 50vw);
  margin-bottom: var(--e6);

  padding-block: var(--e5);
  display: flex;
  flex-direction: column;
  color: #fff;
}

/* Hauteurs. Mesuré à 390 px avec un titre sur deux lignes et une phrase de
   160 signes : 228 px. Avec un titre sur une ligne : 196 px. La consigne était
   180 à 240 px, produits au-dessus du pli. */
.heros-categorie--aplat { min-height: 180px; justify-content: center; }
.heros-categorie--photo { min-height: 200px; justify-content: flex-end; }

/* Le repli sans photo. Deux dégradés radiaux posés sur une diagonale vert forêt
   vers encre : une lueur verte en bas à droite, un souffle clair en haut à
   gauche. C'est de la matière, pas un aplat mort, et ça reste dans la palette. */
.heros-categorie--aplat {
  background:
    radial-gradient(115% 150% at 88% 120%, rgba(110, 143, 78, .32) 0%, rgba(110, 143, 78, 0) 60%),
    radial-gradient(70% 100% at 8% -20%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(116deg, var(--vert-foret) 0%, var(--encre) 100%);
}

/* La teinte reste sous la photo : si le fichier tarde ou ne charge pas, le
   texte est lisible tout de suite et il ne change pas de couleur ensuite. */
.heros-categorie--photo { background: var(--vert-foret); }

.heros-categorie__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  /* Le filet de sécurité du haut de feuille pose `max-width: 100%` et
     `height: auto` sur toute image. Ici il faut couvrir la boîte : ces deux
     déclarations reprennent la main, et le recadrage se fait par object-fit,
     jamais par un débordement. */
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* Le voile. Deux couches : une verticale à l'encre, plus dense en bas où le
   texte se pose, et une horizontale vert forêt qui rattrape le côté gauche.
   Aucune animation, aucun parallaxe : la couche ne bouge jamais. */
.heros-categorie--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top,
      rgba(22, 24, 15, .88) 0%,
      rgba(22, 24, 15, .72) 45%,
      rgba(22, 24, 15, .46) 100%),
    linear-gradient(to right,
      rgba(36, 66, 42, .62) 0%,
      rgba(36, 66, 42, .20) 100%);
}

/* `.conteneur` porte déjà la largeur maximale et la gouttière : le texte du
   bandeau s'aligne exactement sur la grille de produits en dessous. */
.heros-categorie__corps { position: relative; }

.heros-categorie__ariane {
  margin: 0 0 var(--e2);
  font-size: var(--t-petit);
  line-height: 1.45;
  color: rgba(255, 255, 255, .90);
}

.heros-categorie__ariane a {
  color: rgba(255, 255, 255, .90);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .40);
  text-underline-offset: .18em;
}

.heros-categorie__ariane a:hover { color: #fff; text-decoration-color: #fff; }

/* Le liseré de focus du site est vert action : sur un fond sombre il disparaît.
   Il repasse en blanc, uniquement à l'intérieur du bandeau. */
.heros-categorie a:focus-visible { outline-color: #fff; }

.heros-categorie__titre {
  margin: 0;
  color: #fff;
  /* Un cran sous le titre d'affichage du site : le bandeau doit rester une
     bande, pas un héros de page d'accueil. */
  font-size: clamp(1.6rem, 1.12rem + 2vw, 2.75rem);
  line-height: 1.08;
  text-wrap: balance;
}

/* Une ombre très courte, seulement sur la variante photo : elle décolle les
   lettres d'un détail clair sans assombrir la composition. Le voile fait déjà
   le travail de contraste, ceci n'est qu'une sécurité. */
.heros-categorie--photo .heros-categorie__titre { text-shadow: 0 1px 3px rgba(0, 0, 0, .34); }

.heros-categorie__accroche {
  margin: var(--e3) 0 0;
  max-width: 54ch;
  /* Jamais sous 16 px, y compris ici. */
  font-size: 1rem;
  line-height: 1.5;
  color: #fff;
}

/* Écrans très étroits : on récupère 16 px de hauteur sur les marges internes
   plutôt que sur la taille du texte. */
@media (max-width: 400px) {
  .heros-categorie { padding-block: var(--e4); }
}

@media (min-width: 700px) {
  .heros-categorie { padding-block: var(--e6); margin-bottom: var(--e7); }
  .heros-categorie--aplat { min-height: 220px; }
  /* Plus haut avec une photo : le haut du cadre reste dégagé, le texte tient
     le bas. Une image qu'on ne voit pas ne sert à rien. */
  .heros-categorie--photo { min-height: 280px; }
  .heros-categorie__accroche { font-size: 1.0625rem; }
}
/* ==========================================================================
   VIGNETTES DE FILTRE — la barre de familles au-dessus de « Notre sélection »
   --------------------------------------------------------------------------
   Remplace visuellement les capsules texte de l'accueil. Le bloc `.capsules`
   plus haut dans la feuille n'est PAS touché : il sert encore aux barres de
   filtre des archives produit. On ajoute, on ne reconstruit pas.

   Trois décisions qui portent tout le reste :

   1. L'état sélectionné est un aplat vert plein, pas un survol. Sur téléphone
      le survol n'existe pas, et 70 à 80 % du trafic arrive de là. Le même
      traitement que `.capsule--active` (fond vert action, texte blanc) : deux
      barres de filtre sur le même site doivent se lire pareil.
   2. Le défilement horizontal est posé sur la LISTE, jamais sur `body`. Un
      `overflow-x` sur le corps de page casse le défilement de tout le site.
   3. Le média a un `aspect-ratio` fixe et une taille en pixels. La ligne
      occupe sa place avant que la moindre image arrive : aucun décalage.
   ========================================================================== */

.vignettes-filtre {
  margin: 0 0 var(--e6);
}

/* La liste défile sur une ligne. `overflow-x: auto` reste posé même sur grand
   écran : six vignettes de 104 px tiennent largement dans le conteneur, la
   barre ne se déclenche donc jamais — mais le jour où une septième famille
   arrive, elle défile au lieu de casser la ligne. */
.vignettes-filtre__liste {
  display: flex;
  gap: var(--e3);
  margin: 0;
  padding: 0 0 var(--e2);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.vignettes-filtre__liste::-webkit-scrollbar { display: none; }

.vignettes-filtre__liste > li {
  display: flex;
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* La vignette elle-même. 88 px de photo + 2 × 8 px de retrait = 104 px de
   large, et la hauteur dépasse 140 px : très au-dessus des 44 px de cible
   tactile, doigt compris. `min-height` reste écrit pour que la règle survive
   à une réduction de la taille de photo. */
.vignette-filtre {
  --taille-vignette: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e2);
  width: calc(var(--taille-vignette) + var(--e4));
  min-height: 44px;
  padding: var(--e2);
  border: 1px solid var(--bordure);
  border-radius: var(--r-media);
  background: var(--carte);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: var(--t-base);   /* 16 px : jamais moins, y compris sur une étiquette */
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}

/* Remise à zéro pour le mode bouton (filtrage en JavaScript). Sans elle, le
   navigateur impose sa police, son fond gris et sa bordure en relief. */
button.vignette-filtre {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font: inherit;
  font-size: var(--t-base);
}

/* Le média : rond, taille fixe, ratio explicite. `overflow: hidden` rogne la
   photo au cercle ; le fond sauge évite le trou blanc pendant le chargement. */
.vignette-filtre__media {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: var(--taille-vignette);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--sauge);
}

.vignette-filtre__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Le repli quand aucune image n'existe : un aplat de la palette et l'initiale
   de la famille. L'initiale est tracée en 28 px gras — au-delà du seuil du
   « grand texte » AA, et les cinq teintes retenues passent de toute façon le
   4,5:1 en blanc. Jamais de rectangle gris. */
.vignette-filtre__initiale,
.vignette-filtre__signe {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #fff;
}
.vignette-filtre__initiale {
  font-family: var(--police-titre);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
}
.vignette-filtre__signe svg {
  display: block;
  width: 38%;
  height: auto;
}

/* L'étiquette. Deux lignes au maximum, et une hauteur minimale de deux lignes
   pour que toutes les vignettes de la rangée s'alignent en bas, qu'un libellé
   tienne sur une ligne ou sur deux. */
.vignette-filtre__nom {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
  font-weight: 500;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ÉTAT SÉLECTIONNÉ — visible sans survol, sans clavier, sans rien.
   Les quatre sélecteurs couvrent les deux modes : `aria-current` quand les
   vignettes sont des liens vers les archives, `aria-pressed` quand elles
   deviennent des boutons de filtrage. La classe `.est-active` sert de repli
   pour du JavaScript qui ne poserait que la classe. */
.vignette-filtre.est-active,
.vignette-filtre[aria-current="true"],
.vignette-filtre[aria-current="page"],
.vignette-filtre[aria-pressed="true"] {
  background: var(--vert-action);
  border-color: var(--vert-action);
  color: #fff;
}

/* Un liseré blanc détache la photo de l'aplat vert. Le média porte déjà
   `overflow: hidden`, mais celui-ci rogne ses enfants, pas sa propre ombre :
   l'anneau reste visible. */
.vignette-filtre.est-active .vignette-filtre__media,
.vignette-filtre[aria-current="true"] .vignette-filtre__media,
.vignette-filtre[aria-current="page"] .vignette-filtre__media,
.vignette-filtre[aria-pressed="true"] .vignette-filtre__media {
  box-shadow: 0 0 0 2px #fff;
}

/* Le survol n'ajoute qu'une confirmation, jamais une information. Il est écrit
   APRÈS l'état actif, sinon les deux règles pèsent (0,2,0) et le survol
   effacerait le vert de la vignette sélectionnée. */
@media (hover: hover) {
  .vignette-filtre:hover { background: var(--sauge-clair); }
  .vignette-filtre.est-active:hover,
  .vignette-filtre[aria-current="true"]:hover,
  .vignette-filtre[aria-current="page"]:hover,
  .vignette-filtre[aria-pressed="true"]:hover {
    background: var(--vert-action-actif);
    border-color: var(--vert-action-actif);
  }
}

.vignette-filtre:focus-visible {
  outline: 2px solid var(--vert-foret);
  outline-offset: 3px;
}

/* Sur téléphone la rangée sort jusqu'aux deux bords de l'écran : sans ça, la
   dernière vignette semble coupée par une marge et personne ne devine qu'il
   reste des familles à droite. Le retrait négatif compense exactement le
   `padding-inline` du conteneur. */
@media (max-width: 719px) {
  .vignettes-filtre__liste {
    margin-inline: calc(var(--e4) * -1);
    padding-inline: var(--e4);
    scroll-padding-inline: var(--e4);
  }
  .vignette-filtre {
    --taille-vignette: 72px;   /* 88 px de large au total, cible tactile large */
    gap: var(--e1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vignette-filtre { transition: none; }
}

/* =========================================================================
   LA DESCRIPTION DE CATÉGORIE REPLIÉE — 26/08/2026
   -------------------------------------------------------------------------
   Ces descriptions font 15 000 à 38 000 caractères. Excellent pour le
   référencement, illisible pour un humain : la page devient un mur et les
   produits se retrouvent à des milliers de pixels du haut.

   On replie l'AFFICHAGE, jamais le contenu. Le texte reste entier dans le HTML
   servi, dans l'ordre, sans script : Google, Bing et les robots des assistants
   le lisent intégralement. Seule une hauteur maximale le masque à l'œil.

   Ce qu'il ne faut surtout pas faire à la place : charger la suite en AJAX au
   clic. Le contenu deviendrait invisible aux robots, et on perdrait exactement
   ce qui fait la valeur de ces descriptions.

   `max-height` et non `display: none` : une hauteur partielle laisse voir le
   début du texte, ce qui donne une raison de déplier. Masquer entièrement ne
   donne rien à quoi se raccrocher.
   ========================================================================= */

.description-repliable { position: relative; }

/* La case à cocher est l'interrupteur. Masquée à l'œil, atteignable au clavier :
   le label la focalise, la barre d'espace la bascule. Aucun JavaScript. */
.description-repliable__bascule {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.description-repliable__corps {
  position: relative;
  max-height: 22em;
  overflow: hidden;
}

/* Le dégradé dit « ça continue ». Sans lui, le texte semble coupé net et on
   croit à un défaut d'affichage. Il ne capte pas le clic : le bouton est
   dessous, et un voile qui avale les clics est un piège. */
.description-repliable__corps::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 7em;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0) 0%,
    var(--creme) 82%);
}

.description-repliable__bouton {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  margin-top: var(--e4);
  padding: var(--e3) var(--e5);
  /* Cible tactile confortable : sur un téléphone, un lien de 14 px se rate une
     fois sur trois. */
  min-height: 44px;
  background: var(--creme);
  border: 1px solid var(--bordure);
  border-radius: var(--r-capsule);
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--vert-action);
  cursor: pointer;
  user-select: none;
}

.description-repliable__bouton:hover { border-color: var(--vert-action); }

/* Chevron dessiné en CSS plutôt qu'en emoji : un emoji change de forme selon le
   système et ne suit pas la couleur du texte. */
.description-repliable__bouton::after {
  content: '';
  width: .5em;
  height: .5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.15em) rotate(45deg);
  transition: transform .2s ease;
}

.description-repliable__replier { display: none; }

.description-repliable__bascule:checked ~ .description-repliable__corps { max-height: none; }
.description-repliable__bascule:checked ~ .description-repliable__corps::after { display: none; }
.description-repliable__bascule:checked ~ .description-repliable__bouton::after {
  transform: translateY(.15em) rotate(-135deg);
}
.description-repliable__bascule:checked ~ .description-repliable__bouton .description-repliable__lire { display: none; }
.description-repliable__bascule:checked ~ .description-repliable__bouton .description-repliable__replier { display: inline; }

/* Le liseré de focus doit se voir : le bouton est un label, donc rien ne le
   dessine par défaut. */
.description-repliable__bascule:focus-visible ~ .description-repliable__bouton {
  outline: 2px solid var(--vert-action);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .description-repliable__bouton::after { transition: none; }
}

/* =========================================================================
   CARTE DE LOT — version illustrée, 26/08/2026
   -------------------------------------------------------------------------
   Le palier montre maintenant le produit RÉPÉTÉ autant de fois qu'il en faut :
   deux théières pour ×2, trois pour ×3, quatre pour ×4. On comprend l'offre
   sans la lire, ce qu'un « ×3 » seul n'obtient jamais.

   Et la quantité passe d'environ 20 px à une valeur trois fois plus grande :
   c'est le repère qu'on cherche des yeux, il n'a aucune raison d'être le plus
   petit élément de la carte.
   ========================================================================= */

/* La photo unique de gauche disparaît : chaque palier porte désormais la sienne. */
.carte-lot { grid-template-columns: minmax(0, 1fr); }
.carte-lot__visuel { display: none; }

.carte-lot__paliers { gap: var(--e3); }

.carte-lot__palier {
  gap: var(--e2);
  padding: var(--e4) var(--e3) var(--e3);
}

/* Les vignettes se chevauchent légèrement : alignées bord à bord elles
   deviendraient minuscules à quatre sur une colonne de téléphone. Le
   chevauchement garde une taille lisible et lit « plusieurs du même ». */
.carte-lot__vignettes {
  display: flex;
  justify-content: center;
  margin-bottom: var(--e2);
  min-height: 46px;
}

.carte-lot__vignette {
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--creme);
  border: 2px solid var(--creme);
  box-shadow: 0 0 0 1px var(--bordure);
}

.carte-lot__vignette + .carte-lot__vignette { margin-left: -14px; }

/* WooCommerce écrit l'élément devant la classe : on recopie son sélecteur, sinon
   `.woocommerce div.product img` gagne et impose sa propre taille (§12.35). */
.woocommerce div.product .carte-lot__vignette img,
.carte-lot__vignette img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 50%;
}

/* Trois fois plus grand qu'avant : c'est le chiffre qu'on cherche. */
.carte-lot__qte {
  font-family: var(--police-titre);
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--encre);
}

.carte-lot__unitaire { font-size: clamp(1rem, .92rem + .4vw, 1.2rem); }

/* Le bloc professionnels : détaché du reste par un filet, il ne s'adresse
   qu'à ceux qui s'y reconnaissent et ne parasite pas l'achat unitaire. */
.carte-lot__pro {
  margin: var(--e4) 0 0;
  padding-top: var(--e4);
  border-top: 1px solid var(--bordure);
  font-size: var(--t-petit);
  line-height: 1.45;
  color: var(--encre-doux);
}

.carte-lot__pro strong {
  display: block;
  margin-bottom: 2px;
  color: var(--vert-action);
  font-size: var(--t-label);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.carte-lot__pro a { color: var(--vert-action); text-decoration: underline; }

@media (max-width: 560px) {
  .carte-lot__vignette { width: 38px; height: 38px; }
  .carte-lot__vignette + .carte-lot__vignette { margin-left: -13px; }
  .carte-lot__vignettes { min-height: 38px; }
  .carte-lot__qte { font-size: 1.6rem; }

  /* AU-DELA DE DEUX VIGNETTES, LE PALIER DEBORDE — ET LES SUIVANTES N'APPRENNENT
     RIEN.
     Mesure du 29/08/2026 a 390 px : le palier « ×4 » fait 99 px de large, soit
     75 px utiles une fois le padding retire, et ses quatre vignettes en
     demandaient 113. Le contenu sortait de sa case. Le controle de page ne
     pouvait pas le voir : la case debordait vers l'interieur, jamais hors de la
     fenetre — d'ou « 0 px de debordement » sur un defaut bien reel.
     Ces vignettes sont quatre fois LA MEME photo, celle du produit pris en
     quatre exemplaires. Elles ne portent aucune information que le « ×4 » ecrit
     juste dessous ne porte deja. On en garde deux, qui suffisent a lire
     « plusieurs du meme », et le chiffre fait le reste. */
  .carte-lot__vignette:nth-child(n + 3) { display: none; }
}

/* Sous 380 px — iPhone SE et les Android compacts — quatre vignettes de 38 px
   chevauchees de 13 debordaient encore de quatre pixels de leur palier. Mesure du
   28/08/2026 : `.carte-lot__vignettes--4` rendu a 113 px pour 109 disponibles.
   Quatre pixels ne se voient pas sur une capture, ils se voient sur l'appareil :
   le bord droit de la derniere vignette est rogne. */
@media (max-width: 380px) {
  .carte-lot__vignette { width: 32px; height: 32px; }
  .carte-lot__vignette + .carte-lot__vignette { margin-left: -11px; }
  .carte-lot__vignettes { min-height: 32px; }
}

/* ==========================================================================
   LISIBILITÉ ET CIBLES TACTILES SUR TÉLÉPHONE — 26/08/2026

   Mesuré à 390 px sur sept pages : de 41 à 106 éléments de texte sous 16 px,
   et de 14 à 43 liens ou boutons dont la hauteur tombe sous 44 px. Aucune page
   ne débordait horizontalement — le défaut n'était pas là où on le cherche.

   Les deux seuils ne sont pas des préférences. 16 px est le plancher que le
   projet s'est fixé pour le texte courant ; 44 px est la hauteur en dessous de
   laquelle un doigt rate sa cible une fois sur trois. Un client qui rate deux
   fois son bouton d'achat ne réessaie pas une troisième.

   On agit UNIQUEMENT sous 782 px, et uniquement sur ce qui se lit ou se touche.
   Les libellés de catégorie, les mentions sous les prix et les compteurs gardent
   leur taille : ce sont des étiquettes, pas du texte courant, et les grossir
   désorganiserait des grilles entières pour rien.
   ========================================================================== */

@media (max-width: 782px) {

  /* ---- 1. Le texte courant ne descend plus sous 16 px ------------------- */
  body,
  p,
  li,
  td,
  dd,
  .entry-content,
  .editorial,
  .editorial p,
  .editorial li,
  .repere p,
  .usage__texte,
  .carte-produit__detail,
  .description-repliable__corps p,
  .description-repliable__corps li,
  .woocommerce div.product .woocommerce-tabs p,
  .woocommerce-Tabs-panel p,
  .woocommerce-Tabs-panel li {
    font-size: 1rem;
    line-height: 1.55;
  }

  /* Les tailles fluides qui plafonnent sous 16 px sur petit écran. */
  .reassurance-fiche__point span,
  .carte-lot__note,
  .offre-lot,
  .fiche-conditions__bloc p,
  .bloc-lot__texte > p {
    font-size: 1rem;
    line-height: 1.5;
  }

  /* ---- 2. Les cibles tactiles atteignent 44 px --------------------------
     `min-height` plutôt que `height` : un bouton dont le libellé passe sur
     deux lignes doit pouvoir grandir, pas rogner son texte. */
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce #respond input#submit,
  .bouton,
  .capsule,
  .puce-variante,
  .description-repliable__bouton,
  .woocommerce ul.products li.product a.button,
  select,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Navigation et pied de page : la hauteur vient de l'espacement vertical,
     sans casser le flux du texte. */
  .pied a,
  .nav-principale a,
  .fiche-conditions__lien a,
  .reassurance-fiche__lien a {
    display: inline-block;
    padding-block: 10px;
  }

  /* Un lien DANS un paragraphe reste dans le texte : lui donner 44 px casserait
     l'interligne de la phrase qui le contient. */
  p a,
  li a,
  .editorial a {
    display: inline;
    padding-block: 0;
    min-height: 0;
  }

  /* ---- 3. La galerie produit cesse de déborder --------------------------
     Trois éléments dépassaient la fenêtre : le conteneur, la figure et l'image.
     WooCommerce écrit l'élément devant la classe : on recopie son sélecteur. */
  .woocommerce div.product .galerie-produit,
  .galerie-produit,
  .galerie-produit__principale,
  .woocommerce div.product div.images {
    max-width: 100%;
    overflow: hidden;
  }

  .woocommerce div.product .galerie-produit img,
  .galerie-produit img {
    max-width: 100%;
    height: auto;
  }
}

/* Les étiquettes gardent leur taille : ce ne sont pas des phrases. Ce bloc vient
   APRÈS le précédent pour reprendre la main dessus. */
@media (max-width: 782px) {
  .carte-produit__categorie,
  .bloc-lot__legende,
  .carte-lot__mention,
  .carte-lot__qte,
  .vignette-filtre span,
  .prix-tva,
  .woocommerce div.product .price small {
    font-size: var(--t-label);
    line-height: 1.3;
  }
}

/* ==========================================================================
   ACCUEIL — journal en cartes photo, appel « partagez », badges du pied
   Ajouté le 10/09/2026. Posé en fin de feuille : il complète, il ne remplace rien.
   ========================================================================== */

/* Journal : une grande photo à gauche, trois articles en ligne à droite.
   Aucun cadre, aucune ombre : la photo arrondie et le titre dessous, avec de l'air.
   Un cadre par carte faisait quatre boîtes dans une boîte, et la page respirait mal. */
.section--journal { padding-block: clamp(64px, 9vw, 120px); }
.grille-journal {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 56px);
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: start;
}
.grille-journal > li:first-child { grid-row: 1 / span 3; }
.carte-journal { margin: 0; }
.carte-journal__lien {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  color: inherit;
  text-decoration: none;
}
.carte-journal__lien:focus-visible { outline: 3px solid var(--vert-action); outline-offset: 4px; border-radius: var(--r-media); }
.carte-journal__image {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-media);
  background: var(--sauge);
  flex: 0 0 auto;
}
.carte-journal__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}
.carte-journal:hover .carte-journal__image img { transform: scale(1.02); }
.carte-journal__corps { display: flex; flex-direction: column; gap: var(--e2); }
.carte-journal__etiquette {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vert-action);
}
.carte-journal__titre {
  display: block;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--encre);
}
.carte-journal:hover .carte-journal__titre { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.carte-journal__extrait { margin: 0; font-size: var(--t-petit); color: var(--encre-doux); max-width: 52ch; }

/* La grande : photo haute, titre large, extrait visible. */
.carte-journal--grande .carte-journal__image { aspect-ratio: 5 / 4; }
.carte-journal--grande .carte-journal__lien { gap: var(--e5); }
.carte-journal--grande .carte-journal__titre { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); }

/* Les trois petites : photo à gauche, titre à droite, un filet entre elles. */
.carte-journal--ligne .carte-journal__lien { flex-direction: row; align-items: center; gap: var(--e5); }
.carte-journal--ligne .carte-journal__image { width: 40%; aspect-ratio: 4 / 3; }
.carte-journal--ligne .carte-journal__extrait { display: none; }
.carte-journal--ligne + .carte-journal--ligne { padding-top: var(--e5); border-top: 1px solid var(--bordure); }

@media (max-width: 900px) {
  .grille-journal { grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
  .grille-journal > li:first-child { grid-row: auto; padding-bottom: var(--e5); border-bottom: 1px solid var(--bordure); }
  .carte-journal--ligne .carte-journal__image { width: 36%; }
}

/* Appel « partagez » : la photo prend la moitié, beaucoup d'air autour du texte. */
.section--appel { background: var(--sauge-clair); padding-block: clamp(64px, 9vw, 128px); }
.appel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 7vw, 96px);
  align-items: center;
}
@media (max-width: 900px) { .appel { grid-template-columns: minmax(0, 1fr); gap: var(--e6); } }
.appel__image {
  border-radius: var(--r-media);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--sauge);
}
@media (max-width: 900px) { .appel__image { aspect-ratio: 4 / 3; } }
.appel__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.appel__texte { padding-inline: clamp(0px, 2vw, 24px); }
.appel__surtitre {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vert-action);
  margin: 0 0 var(--e3);
}
.appel__texte .titre-section { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); }
.appel__texte p:not(.appel__surtitre) { color: var(--encre-doux); max-width: 46ch; font-size: 1.0625rem; line-height: 1.6; }
.appel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e6);
}

/* Badges du pied de page : quatre faits, une ligne d'icônes filaires. */
.pied__confiance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--e4) var(--e5);
  margin: 0 0 var(--e7);
  padding: 0 0 var(--e5);
  list-style: none;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.pied__confiance li {
  display: flex;
  gap: var(--e3);
  align-items: flex-start;
  margin: 0;
  font-size: var(--t-petit);
  color: rgba(255, 255, 255, .78);
}
.pied__confiance svg { flex: 0 0 24px; margin-top: 2px; color: #fff; }
.pied__confiance strong { display: block; color: #fff; font-weight: 600; margin-bottom: 2px; }
.pied__confiance a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   ACCUEIL — bloc éditorial à la largeur du conteneur
   La sortie de colonne du bloc 6 laissait les trois traditions sur la moitié
   gauche de la page (vu à 1440 px, le 10/09/2026). Ici le conteneur est large,
   et ce sont les paragraphes qui se limitent à une colonne de lecture.
   ========================================================================== */
.editorial--accueil { max-width: var(--conteneur); }
.editorial--accueil > h2,
.editorial--accueil > p { max-width: 68ch; margin-inline: 0; }
.editorial--accueil .traditions {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  margin-block: var(--e7) var(--e9);
  gap: clamp(24px, 4vw, 56px);
}
.editorial--accueil .tradition img {
  /* Packshots sur blanc, posés sur la page blanche : l'aplat gris a été retiré à la
     demande du porteur (10/09/2026). Le contour reste celui de la photo. */
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: var(--e4);
  border: 0;
  background: transparent;
}
.editorial--accueil .tradition h3 { font-size: 1.375rem; }
.editorial--accueil .tradition p { max-width: 40ch; }
@media (max-width: 600px) {
  .editorial--accueil .tradition img { aspect-ratio: 3 / 2; padding: var(--e5); }
}

/* ==========================================================================
   PIED DE PAGE — respiration
   Ajouté le 10/09/2026 à la demande du porteur : « pas joli, aère, plus design,
   rassurant ». Trois étages : identité + repères, colonnes de liens, ligne basse.
   Ces règles reprennent la main sur celles du bloc 12 (mêmes sélecteurs, plus bas).
   ========================================================================== */
.pied { padding-block: clamp(56px, 8vw, 104px) clamp(32px, 4vw, 48px); }
.pied__haut {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
  padding-bottom: clamp(40px, 5vw, 64px);
  margin-bottom: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.pied__marque { font-size: 1.75rem; margin: 0 0 var(--e2); }
.pied__intro { margin: 0 0 var(--e4); }
.pied__phrase {
  margin: 0;
  max-width: 34ch;
  font-size: var(--t-base);
  line-height: 1.6;
  color: rgba(255, 255, 255, .86);
}
.pied__confiance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e6) var(--e6);
  margin: 0;
  padding: 0;
  border: 0;
}
.pied__confiance li { gap: var(--e4); align-items: flex-start; font-size: var(--t-petit); line-height: 1.55; }
.pied__icone {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
}
.pied__confiance svg { margin: 0; }
.pied__confiance strong { font-size: var(--t-base); margin-bottom: 4px; }

.pied__grille {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 72px);
}
.pied h2 { margin-bottom: var(--e4); }
.pied li { margin-bottom: var(--e3); }
.pied__contact p { margin: 0 0 var(--e3); font-size: var(--t-petit); }
.pied__contact > p:first-of-type a { font-size: var(--t-base); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.pied__contact-note { color: rgba(255, 255, 255, .72); max-width: 32ch; line-height: 1.55; }
.pied__suivi {
  display: inline-block;
  margin-top: var(--e2);
  padding: var(--e2) var(--e4);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--r-capsule);
  text-decoration: none !important;
}
.pied__suivi:hover { background: rgba(255, 255, 255, .1); }
.pied__bas { margin-top: clamp(40px, 5vw, 64px); }

@media (max-width: 900px) {
  .pied__haut { grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
  .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied__contact { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .pied__confiance { grid-template-columns: minmax(0, 1fr); gap: var(--e5); }
  .pied__grille { grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
}

/* ==========================================================================
   ARTICLES — bloc « Dans la boutique » (mu-plugin linfuserie-articles-boutique)
   ========================================================================== */
.article-boutique {
  margin-block: clamp(40px, 6vw, 64px);
  padding: clamp(24px, 4vw, 40px);
  border-radius: var(--r-carte);
  background: var(--sauge-clair);
}
.article-boutique__entete { margin-bottom: var(--e5); }
.article-boutique__surtitre {
  margin: 0 0 var(--e1);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vert-action);
}
.article-boutique__titre { margin: 0; font-size: 1.5rem; }
.editorial .article-boutique ul.products,
.article-boutique__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e4);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 600px) {
  .editorial .article-boutique ul.products,
  .article-boutique__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
}
.article-boutique__lien { margin: var(--e5) 0 0; font-size: var(--t-petit); font-weight: 600; }
.article-boutique__lien a { color: var(--vert-action); }

/* ==========================================================================
   ACCUEIL — « Trois questions avant de choisir » : grande photo + liste illustrée
   Ajouté le 10/09/2026. Le texte est inchangé (H2, trois H3 et leurs réponses).
   ========================================================================== */
.editorial--accueil .questions {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  width: 100%;
  max-width: none;
  margin-block: var(--e8) var(--e7);
}
.editorial--accueil .questions__grande { margin: 0; }
.editorial--accueil .questions__grande img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-media);
  background: var(--sauge);
}
.editorial--accueil .questions__liste h2 { margin: 0 0 var(--e4); max-width: none; }
.editorial--accueil .question {
  display: flex;
  gap: var(--e5);
  align-items: flex-start;
  padding-block: var(--e5);
  border-top: 1px solid var(--bordure);
  margin: 0;
}
.editorial--accueil .question:last-child { padding-bottom: 0; }
.editorial--accueil .question img {
  flex: 0 0 120px;
  width: 120px;
  height: 120px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-champ);
  background: var(--sauge);
}
.editorial--accueil .question h3 {
  margin: 0 0 var(--e2);
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
}
.editorial--accueil .question p { margin: 0; font-size: var(--t-petit); line-height: 1.6; color: var(--encre-doux); max-width: 52ch; }

@media (max-width: 900px) {
  .editorial--accueil .questions { grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
  .editorial--accueil .questions__grande img { aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
  .editorial--accueil .question { gap: var(--e4); }
  .editorial--accueil .question img { flex-basis: 84px; width: 84px; height: 84px; }
}



/* Pastille de rupture : posee sur la photo, lisible sans survol (§12.19).
   Encre sur blanc plutot que la couleur signal : un etat, pas une alerte, et la
   couleur d'action reste reservee au bouton d'achat. */
.pastille-rupture {
  position: absolute;
  top: var(--e3);
  left: var(--e3);
  z-index: 2;
  padding: var(--e1) var(--e3);
  border-radius: var(--r-capsule);
  background: var(--encre);
  color: #fff;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.6;
  pointer-events: none;
}
.galerie-produit__principale { position: relative; }
.woocommerce ul.products li.product.outofstock .carte-produit__media img { opacity: .72; }