/* Genere par docs/outils/build_frontend.py : NE PAS EDITER. Sources : assets/css/tokens.css, assets/css/site.css, assets/css/components.css */
/* ==========================================================================
   BioMerveille v2 — tokens du système de design (validé, brief section 7)
   Thème clair unique. Aucune ombre. Vert = accent, jamais un fond de page.
   Toutes les tailles en rem : le bouton « Texte plus grand » agit sur html{font-size}.
   ========================================================================== */
:root {
  color-scheme: light;

  /* Couleurs (tokens exacts du brief) */
  --paper: #ffffff;
  --surface: #ffffff;
  --surface-alt: #f7f6f2;
  --ink: #1e2a17;
  --ink-dim: #5b6b52;
  --ink-faint: #8b9880;      /* contours, filets, décor uniquement (3,04:1) — jamais du texte courant */
  --line: #e7e9e1;
  --line-strong: #d7dbcd;
  --leaf-deep: #3d5730;      /* boutons pleins, liens forts, texte d'accent (8,06:1 sur blanc) */
  --leaf: #6d8f4e;           /* fonds de pastille, icônes, décor — pas de texte dessus */
  --leaf-light: #a8c084;
  --leaf-tint: #eef2e3;
  --gold: #a9791f;           /* étoiles d'avis, solidaire — jamais un libellé de bouton */
  --gold-tint: #f8f0da;
  --promo: #b23a2e;

  /* Ombres vertes (décision David, 11/09/2026) : elles remplacent la règle « aucune ombre ».
     Toutes teintées de --leaf-deep, jamais de gris neutre : la profondeur reste dans la palette. */
  --glow-xs: 0 1px 3px rgba(61, 87, 48, .07);
  --glow-sm: 0 2px 10px rgba(61, 87, 48, .09);
  --glow: 0 8px 26px -6px rgba(61, 87, 48, .16), 0 2px 6px rgba(61, 87, 48, .06);
  --glow-lg: 0 18px 48px -12px rgba(61, 87, 48, .22), 0 4px 12px rgba(61, 87, 48, .08);
  --glow-leaf: 0 10px 30px -8px rgba(109, 143, 78, .45);      /* accent lumineux sur fond clair */
  --glow-btn: 0 6px 18px -4px rgba(61, 87, 48, .38);          /* bouton principal au repos */
  --glow-btn-hover: 0 12px 30px -6px rgba(61, 87, 48, .48);   /* bouton principal au survol */
  --glow-band: 0 24px 60px -18px rgba(61, 87, 48, .5);        /* bandeau solidaire, hero */
  --shadow: var(--glow);
  --shadow-sm: var(--glow-sm);

  /* Typographie */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;   /* police des titres du site actuel */
  --font-text: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;   /* police de texte du site actuel */
  --text-xs: 0.8125rem;   /* 14,6 px à 18 px de base — réservé aux légendes non essentielles */
  --text-sm: 0.9375rem;   /* 16,9 px */
  --text-base: 1rem;      /* 18 px desktop / 17 px mobile */
  --text-lg: 1.125rem;
  /* Echelle fluide : les titres respirent entre 360 px et 1400 px sans palier brutal.
     Le plancher reste la taille mobile lisible, le plafond la taille desktop validee. */
  /* Echelle resserree le 12/09/2026 : Playfair Display est plus large que
     Fraunces, les titres paraissaient trop gros a taille egale. Le corps de
     texte ne bouge pas, il reste a 18 px pour la lisibilite. */
  --text-xl: clamp(1.15rem, 1rem + 0.55vw, 1.25rem);
  --text-2xl: clamp(1.3rem, 1.08rem + 1vw, 1.5rem);
  --text-3xl: clamp(1.55rem, 1.15rem + 1.8vw, 1.95rem);
  --text-hero: clamp(2.05rem, 4.4vw, 3.35rem);
  --leading: 1.6;
  --leading-tight: 1.15;
  --measure: 62ch;

  /* Espacements */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: clamp(2rem, 1.3rem + 2.4vw, 3rem);
  --space-8: clamp(2.75rem, 1.6rem + 4vw, 4.5rem);

  /* Rayons */
  --r-sm: 0.75rem;
  --r-md: 1.25rem;
  --r-lg: 1.75rem;
  --r-pill: 999px;

  /* Cibles tactiles et focus */
  --tap: 3.25rem;            /* 52 px */
  --tap-sm: 2.75rem;         /* 44 px */
  --focus: 0 0 0 2px #fff, 0 0 0 5px var(--leaf-deep);

  /* Mise en page */
  --wrap: 74rem;
  --gutter: clamp(1.125rem, 4vw, 2rem);

  /* Animation */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur: 250ms;
}

/* Taille de base : 18 px desktop, 17 px mobile. « Texte plus grand » : 125 % / 118 %. */
html { font-size: 112.5%; }
@media (max-width: 40em) { html { font-size: 106.25%; } }
html[data-text="large"] { font-size: 125%; }
@media (max-width: 40em) { html[data-text="large"] { font-size: 118.75%; } }

/* ==========================================================================
   BioMerveille v2 — feuille de style du site public
   Base, composants, gabarits. Dépend de tokens.css.
   ========================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-text); font-size: var(--text-base); line-height: var(--leading);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: var(--leading-tight); margin: 0; text-wrap: balance; letter-spacing: -0.005em; }
h1 { font-size: var(--text-hero); }   /* Playfair Display n'a pas d'axe optique */
h2 { font-size: var(--text-3xl); font-variation-settings: "opsz" 48; }
h3 { font-size: var(--text-xl); font-variation-settings: "opsz" 24; }
p { margin: 0; }
p + p { margin-top: var(--space-4); }
a { color: var(--leaf-deep); text-decoration-thickness: 0.08em; text-underline-offset: 0.16em; }
a:hover { color: var(--ink); }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
::selection { background: var(--leaf-light); color: var(--leaf-deep); }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: var(--space-4); top: -100%; z-index: 100; background: var(--leaf-deep); color: #fff; padding: var(--space-3) var(--space-5); border-radius: var(--r-sm); font-weight: 600; }
.skip-link:focus { top: var(--space-4); }
.muted { color: var(--ink-dim); }
.small { font-size: var(--text-sm); }
.lead { font-size: var(--text-lg); color: var(--ink-dim); max-width: var(--measure); }
.center { text-align: center; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap); padding: 0 var(--space-5); border-radius: var(--r-sm);
  font-weight: 600; font-size: var(--text-base); text-decoration: none; border: 2px solid transparent;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* Un libelle plus large que la place disponible faisait deborder le bouton
   hors de sa colonne sur petit ecran : un bouton ne depasse jamais son
   parent, quitte a passer sur deux lignes. */
.btn { max-width: 100%; }
@media (max-width: 30em) {
  .btn { white-space: normal; text-align: center; padding-inline: var(--space-4); }
}
.btn-primary { position: relative; overflow: hidden; background: var(--leaf-deep); color: #fff; border-color: var(--leaf-deep); box-shadow: var(--glow-btn); }
.btn-primary:hover { background: #2f4526; border-color: #2f4526; color: #fff; box-shadow: var(--glow-btn-hover); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); box-shadow: var(--glow-btn); }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 35%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-18deg); animation: shine 3.6s ease-in-out 3; animation-delay: 1.2s;
}
@keyframes shine { 0% { left: -60%; } 35% { left: 130%; } 100% { left: 130%; } }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--leaf-deep); color: var(--leaf-deep); box-shadow: var(--glow-sm); }
.btn-tint { background: var(--leaf-tint); color: var(--leaf-deep); border-color: var(--leaf-tint); }
.btn-tint:hover { background: #e2e9d3; color: var(--leaf-deep); }
.btn-inverse { background: #fff; color: var(--leaf-deep); border-color: #fff; }
.btn-inverse:hover { background: var(--leaf-tint); color: var(--leaf-deep); }
.btn-block { width: 100%; }
.btn svg { flex: none; }

/* ---------- Pastilles ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--leaf-deep); background: var(--leaf-tint); border: 1px solid color-mix(in srgb, var(--leaf) 30%, transparent);
  padding: var(--space-2) var(--space-3); border-radius: var(--r-pill);
}
.tag { display: inline-block; font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--leaf-deep); background: var(--surface); border: 1px solid var(--line-strong); padding: .3rem .6rem; border-radius: var(--r-pill); }
.tag-gold { color: #6f4f10; background: var(--gold-tint); border-color: #eadcb5; }

/* ---------- Bandeau d'annonce ---------- */
.announce { background: var(--leaf-tint); border-bottom: 1px solid var(--line); font-size: var(--text-sm); font-weight: 600; color: var(--leaf-deep); }
.announce .wrap { display: flex; align-items: center; justify-content: center; gap: var(--space-4); min-height: 2.75rem; text-align: center; }
.announce a { color: inherit; }
.announce button { background: none; border: 0; color: inherit; min-width: var(--tap-sm); min-height: var(--tap-sm); border-radius: var(--r-pill); }
.announce button:hover { background: #e2e9d3; }

/* ---------- En-tête ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); box-shadow: var(--glow-xs); }
.header-row { display: flex; align-items: center; gap: var(--space-5); min-height: 4.75rem; }
.logo { display: inline-flex; align-items: center; flex: none; }
.logo img { height: 2.4rem; width: auto; }
.main-nav { display: flex; align-items: center; gap: var(--space-5); margin-inline: auto; }
.main-nav a { position: relative; display: inline-flex; align-items: center; min-height: var(--tap-sm); padding: 0 var(--space-1); font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--leaf-deep); }
.main-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: .35rem; height: 2px; background: var(--leaf); border-radius: 2px; }
.header-tools { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.tool { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-sm); padding: 0 var(--space-3); border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 600; font-size: var(--text-sm); text-decoration: none; }
.tool:hover { border-color: var(--leaf-deep); color: var(--leaf-deep); }
/* Icones de boutique : recherche, compte, panier. Rondes, sans cadre, une
   zone tactile de 44 px ; le panier porte le nombre d'articles en pastille.
   (Decision de David du 24/10/2026 : « pas un bouton, un vrai panier ».) */
.tool-icone { position: relative; justify-content: center; width: var(--tap-sm); min-width: var(--tap-sm); padding: 0;
  border-color: transparent; background: transparent; border-radius: 50%; color: var(--ink); }
.tool-icone:hover { background: var(--leaf-tint, #eef2e3); border-color: transparent; color: var(--leaf-deep); }
.tool-icone:focus-visible { outline: 2px solid var(--leaf-deep); outline-offset: 2px; }
.tool-icone svg { flex: none; }
.cart-pastille { position: absolute; top: 2px; right: 0; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
  background: var(--leaf-deep); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1;
  border: 2px solid var(--surface); font-variant-numeric: tabular-nums; }
.cart-pastille[hidden] { display: none; }
.tool-cart.vient-de-changer .cart-pastille { animation: pastille-saut .45s ease; }
@keyframes pastille-saut { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .tool-cart.vient-de-changer .cart-pastille { animation: none; } }
:root[data-motion="reduced"] .tool-cart.vient-de-changer .cart-pastille { animation: none; }
.tool-menu { display: none; }
.tool .aa { font-family: var(--font-display); font-weight: 680; letter-spacing: -.02em; }

/* Menu mobile plein écran (dialog) */
/* ==========================================================================
   Menu mobile (refonte demandee par David le 12/09/2026)
   Chaque entree devient une carte : pastille verte, titre, sous-titre, chevron.
   Le fond est un degrade tres clair ponctue de deux halos verts, pas un aplat
   vert : la regle du theme clair tient. Entree en cascade, coupee sous
   prefers-reduced-motion.
   ========================================================================== */
.menu-dialog {
  border: 0; padding: 0;
  max-width: 100vw; width: 100vw;
  max-height: 100dvh; height: 100dvh;
  color: var(--ink);
  background:
    radial-gradient(38rem 26rem at 108% -6%, color-mix(in srgb, var(--leaf-light) 34%, transparent), transparent 70%),
    radial-gradient(30rem 24rem at -14% 104%, color-mix(in srgb, var(--leaf) 20%, transparent), transparent 72%),
    linear-gradient(178deg, var(--leaf-tint) 0%, var(--paper) 46%);
}
.menu-dialog::backdrop { background: rgba(30,42,23,.45); }
.menu-inner {
  display: flex; flex-direction: column;
  min-height: 100%;
  padding: var(--space-4) var(--gutter) var(--space-6);
}
.menu-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }

.menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); min-width: 0; }
.menu-item { min-width: 0; }
.menu-item > a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap);
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: var(--r-lg, 1rem);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  box-shadow: var(--glow-xs);
  color: var(--ink);
  text-decoration: none;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease),
              border-color 180ms var(--ease), background-color 180ms var(--ease);
}
.menu-ico {
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  color: var(--paper);
  background: linear-gradient(140deg, var(--leaf-deep), var(--leaf));
  box-shadow: var(--glow-leaf);
}
.menu-ico svg { width: 1.15rem; height: 1.15rem; }
.menu-txt { display: grid; gap: .15rem; min-width: 0; }
.menu-txt strong { font-size: var(--text-lg); font-weight: 600; line-height: 1.2; }
.menu-txt > span { font-size: var(--text-sm); color: var(--ink-dim); line-height: 1.35; }
.menu-fleche { font-size: 1.5rem; line-height: 1; color: var(--leaf); transition: transform 180ms var(--ease); }

.menu-item > a:hover,
.menu-item > a:focus-visible {
  background: var(--paper);
  border-color: color-mix(in srgb, var(--leaf) 45%, transparent);
  box-shadow: var(--glow);
  transform: translateY(-2px);
}
.menu-item > a:hover .menu-fleche,
.menu-item > a:focus-visible .menu-fleche { transform: translateX(3px); }
.menu-item > a:active { transform: scale(.985); box-shadow: var(--glow-xs); }

/* La page en cours se signale par un liseré vert */
.menu-item > a[aria-current="page"] {
  border-color: var(--leaf);
  background: var(--paper);
  box-shadow: var(--glow-sm);
}

/* Entree en cascade : les cartes montent l'une apres l'autre */
@keyframes bm-menu-entre {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.menu-dialog[open] .menu-item,
.menu-dialog[open] .menu-foot {
  animation: bm-menu-entre 420ms var(--ease) both;
}
.menu-dialog[open] .menu-item:nth-child(1) { animation-delay: 40ms; }
.menu-dialog[open] .menu-item:nth-child(2) { animation-delay: 80ms; }
.menu-dialog[open] .menu-item:nth-child(3) { animation-delay: 120ms; }
.menu-dialog[open] .menu-item:nth-child(4) { animation-delay: 160ms; }
.menu-dialog[open] .menu-item:nth-child(5) { animation-delay: 200ms; }
.menu-dialog[open] .menu-item:nth-child(6) { animation-delay: 240ms; }
.menu-dialog[open] .menu-item:nth-child(7) { animation-delay: 280ms; }
.menu-dialog[open] .menu-foot { animation-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
  .menu-dialog[open] .menu-item,
  .menu-dialog[open] .menu-foot { animation: none; }
  .menu-item > a { transition: none; }
}
html[data-motion="reduced"] .menu-dialog[open] .menu-item,
html[data-motion="reduced"] .menu-dialog[open] .menu-foot { animation: none; }
.menu-foot { margin-top: auto; padding-top: var(--space-5); display: grid; gap: var(--space-4); }
.menu-comfort { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-alt); }

/* Popover « Confort de lecture » */
.comfort { position: relative; }
.comfort-panel { position: absolute; right: 0; top: calc(100% + .5rem); width: min(22rem, 90vw); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: var(--space-4); z-index: 50; box-shadow: var(--glow-lg); }
.comfort-panel[hidden] { display: none; }
.comfort-panel h3 { font-family: var(--font-text); font-size: var(--text-base); margin-bottom: var(--space-3); }
.switch { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; min-height: var(--tap); padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); text-align: left; font-weight: 500; }
.switch + .switch { margin-top: var(--space-2); }
.switch .knob { flex: none; width: 3rem; height: 1.75rem; border-radius: var(--r-pill); background: var(--line-strong); position: relative; transition: background var(--dur); }
.switch .knob::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: #fff; transition: transform var(--dur) var(--ease); }
.switch[aria-pressed="true"] .knob { background: var(--leaf-deep); }
.switch[aria-pressed="true"] .knob::after { transform: translateX(1.25rem); }

/* ---------- Sections ---------- */
.section { padding-block: var(--space-8); }
.section-alt { background: var(--surface-alt); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); flex-wrap: wrap; }
.section-head .eyebrow { margin-bottom: var(--space-3); }
.section-head p { color: var(--ink-dim); max-width: 50ch; margin-top: var(--space-2); }
.section-link { font-weight: 700; color: var(--leaf-deep); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-sm); white-space: nowrap; }
.section-link:hover { text-decoration: underline; }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: 1.18fr .82fr; gap: var(--space-7); align-items: center; padding-block: var(--space-7) var(--space-8); }
/* Visuel du hero volontairement plus petit : le texte et les boutons priment. */
.hero-frame { max-width: 26rem; margin-left: auto; }
.hero-copy .eyebrow { margin-bottom: var(--space-5); }
/* Le H1 de l'accueil est descendu sous la taille generale des H1 le
   12/09/2026 : --text-hero debordait de la colonne de 712 px.
   Le titre pose par David (« BioMerveille : Huile Essentielle et
   Aromatherapie au Naturel ») fait 60 caracteres : il ne peut pas tenir sur
   une ligne, il faudrait 26 px au lieu de 44. On l'assume donc sur deux
   lignes, equilibrees par text-wrap: balance. */
.hero-copy h1 {
  color: var(--ink);
  font-size: clamp(1.5rem, 3.05vw, 2.6rem);
  line-height: 1.14;
  text-wrap: balance;
}
.hero-copy h1 em { font-style: normal; color: var(--leaf-deep); }
/* Pas de largeur reservee ici : les 10ch d'avant elargissaient le H1 de
   76 px et le faisaient passer sur deux lignes a 1440 px. Les trois mots
   tournants (« la memoire », « le sommeil », « le souffle ») font la meme
   longueur a 1 caractere pres, le decalage est invisible. */
.hero-rot { display: inline-block; position: relative; }
.hero-rot span { display: inline-block; transition: opacity 320ms var(--ease), transform 320ms var(--ease); }
.hero-rot span.is-leaving { opacity: 0; transform: translateY(-.35em); position: absolute; left: 0; }
.hero-rot span.is-entering { opacity: 0; transform: translateY(.35em); }
.hero-sub { margin: var(--space-5) 0 var(--space-6); }
.cta-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.trust-row { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.trust-item { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--ink-dim); }
.trust-item svg { color: var(--leaf); flex: none; }

.hero-visual { position: relative; }
.hero-frame { position: relative; }
.announce-short { display: none; }
.hero-stage { position: relative; aspect-ratio: 1 / 1.02; border-radius: var(--r-lg); background: var(--surface-alt); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--glow-lg); }
.hero-slide { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity 600ms var(--ease); }
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-slide.is-active img { animation: kenburns 12s ease-in-out 2; }
.hero-slide.contain img { object-fit: contain; padding: 10%; }
@keyframes kenburns { 0% { transform: scale(1); } 50% { transform: scale(1.08) translate(-1%, -1%); } 100% { transform: scale(1); } }
.hero-badge {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: var(--space-3);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4); max-width: 15rem; font-size: var(--text-sm); font-weight: 600; line-height: 1.35;
  box-shadow: var(--glow); animation: floatY 4.8s ease-in-out 2;
}
.hero-badge .ic { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--gold-tint); color: var(--gold); }
.hero-badge.left { left: -4%; top: 6%; }
.hero-badge.right { right: -3%; bottom: 14%; background: var(--leaf-deep); color: #fff; border-color: var(--leaf-deep); box-shadow: var(--glow-leaf); animation-delay: .9s; }
.hero-badge.right .ic { background: rgba(255,255,255,.16); color: #fff; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.45rem); } }
.hero-tabs { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); flex-wrap: wrap; }
.hero-tab { min-height: var(--tap-sm); padding: 0 var(--space-4); border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); font-weight: 600; font-size: var(--text-sm); color: var(--ink); }
.hero-tab[aria-pressed="true"] { background: var(--leaf-deep); color: #fff; border-color: var(--leaf-deep); }
.hero-tab:hover { border-color: var(--leaf-deep); }
.hero-frame .price-note { position: absolute; left: 6%; bottom: 6%; z-index: 3; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: .4rem .9rem; font-weight: 700; }

/* ---------- Bandeau de réassurance ---------- */
/* Bandeau de reassurance sous le hero (demande David, 12/09/2026).
   Fond vert plein, texte blanc : c'est la deuxieme exception a la regle
   « jamais de fond vert plein », apres le bandeau solidaire. Le contraste du
   blanc sur --leaf-deep est de 8,06:1, largement au-dessus du AA. */
.certs {
  position: relative;
  isolation: isolate;
  margin-block: var(--space-6) 0;
  background:
    linear-gradient(115deg,
      var(--leaf-deep) 0%,
      color-mix(in srgb, var(--leaf-deep) 88%, var(--leaf)) 48%,
      color-mix(in srgb, var(--leaf-deep) 70%, var(--leaf)) 100%);
  color: var(--paper);
  box-shadow: var(--glow-band);
}
/* halo vert qui deborde en haut et en bas, pour que la bande ne soit pas
   un simple rectangle pose sur le blanc */
.certs::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 140% at 12% 0%, color-mix(in srgb, var(--leaf-light) 34%, transparent), transparent 70%),
    radial-gradient(60% 130% at 88% 100%, color-mix(in srgb, var(--leaf-light) 26%, transparent), transparent 70%);
  pointer-events: none;
}
/* Les six engagements ne tiennent pas sur une ligne avant 1 700 px environ.
   « space-between » collait alors la deuxieme ligne a gauche : on centre, le
   repli sur deux lignes devient equilibre au lieu de paraitre casse. */
.certs-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-5);
  flex-wrap: wrap;
}
.certs .cert {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--paper);
}
/* la coche vit dans une pastille claire : lisible sur le vert sans alourdir */
.certs .cert svg {
  flex: none;
  width: 1.55em;
  height: 1.55em;
  padding: .32em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 18%, transparent);
  color: var(--paper);
}
.cert { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--ink-dim); }
.cert svg { color: var(--leaf); flex: none; }

/* ---------- Besoins ---------- */
.needs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.need { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3); min-height: 9rem; padding: var(--space-5); border-radius: var(--r-md); background: var(--leaf-tint); border: 1px solid color-mix(in srgb, var(--leaf) 22%, transparent); color: var(--ink); text-decoration: none; transition: border-color var(--dur), background var(--dur), box-shadow var(--dur), transform var(--dur); }
.need:hover { border-color: var(--leaf-deep); background: #e6ecd8; color: var(--ink); box-shadow: var(--glow); transform: translateY(-3px); }
.need strong { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; }
.need span { color: var(--ink-dim); font-size: var(--text-sm); }
.need .go { color: var(--leaf-deep); font-weight: 700; font-size: var(--text-sm); }

/* ---------- Cartes produit ---------- */
.p-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.p-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--glow-xs); transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur); }
.p-card:hover { border-color: var(--leaf); box-shadow: var(--glow); transform: translateY(-3px); }
.p-media { position: relative; aspect-ratio: 1 / .86; background: var(--surface-alt); overflow: hidden; }
.p-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.p-card:hover .p-media img { transform: scale(1.03); }
.p-media .tag { position: absolute; top: var(--space-3); left: var(--space-3); }
.p-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-5); flex: 1; }
.p-name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; line-height: 1.2; }
.p-name a { color: inherit; text-decoration: none; }
.p-name a::after { content: ""; position: absolute; inset: 0; }
.p-card { position: relative; }
.p-desc { color: var(--ink-dim); font-size: var(--text-sm); flex: 1; }
/* Le pied de la carte produit passe a la ligne quand la colonne est etroite :
   prix et format se chevauchaient dans une grille tres dense. */
.p-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin-top: var(--space-2); }
.p-foot > *, .p-body > * { min-width: 0; overflow-wrap: anywhere; }
.p-price { font-size: var(--text-lg); font-weight: 700; }
.p-price s { color: var(--ink-dim); font-weight: 500; font-size: var(--text-sm); margin-right: var(--space-2); }
.p-card .btn { position: relative; z-index: 1; margin-top: var(--space-3); }

/* ---------- Étapes (inhalateur) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; }
.split .media { aspect-ratio: 1 / 1; border-radius: var(--r-lg); background: var(--surface-alt); border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; }
.split .media img { width: 100%; height: 100%; object-fit: cover; }
.split .media.contain img { object-fit: contain; padding: 8%; }
.steps { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-4); counter-reset: step; }
.step { display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--space-4); align-items: start; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.step::before { counter-increment: step; content: counter(step); font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); color: var(--leaf-deep); width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--leaf-tint); display: grid; place-items: center; }
.step strong { display: block; font-size: var(--text-lg); margin-bottom: var(--space-1); }
.step span { color: var(--ink-dim); }

/* ---------- Bandeau solidaire (seul bloc de couleur forte) ---------- */
.band { background: linear-gradient(155deg, var(--leaf-deep) 0%, #4c6a3a 60%, var(--leaf) 130%); color: #fff; border-radius: var(--r-lg); box-shadow: var(--glow-band); }
.band-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-7); align-items: center; padding: var(--space-7); }
.band h2 { color: #fff; margin-bottom: var(--space-4); }
.band p { color: rgba(255,255,255,.88); max-width: 52ch; }
.band .cta-row { margin-top: var(--space-5); }
.band-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.bstat { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-md); padding: var(--space-5); }
.bstat .n { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; line-height: 1; }
.bstat .l { margin-top: var(--space-2); color: rgba(255,255,255,.85); font-size: var(--text-sm); }

/* ---------- Avis ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.review { padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); display: flex; flex-direction: column; gap: var(--space-3); box-shadow: var(--glow-xs); }
.stars { color: var(--gold); letter-spacing: .1em; font-size: var(--text-lg); }
.review blockquote { margin: 0; font-size: var(--text-base); }
.review footer { color: var(--ink-dim); font-size: var(--text-sm); display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }

/* ---------- Articles ---------- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.post { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border-radius: var(--r-md); background: var(--surface-alt); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur); }
.post:hover { border-color: var(--leaf-deep); color: var(--ink); box-shadow: var(--glow); transform: translateY(-3px); background: var(--surface); }
.post h3 { font-size: var(--text-xl); }
.post .meta { color: var(--ink-dim); font-size: var(--text-sm); }
.post .more { margin-top: auto; color: var(--leaf-deep); font-weight: 700; }

/* ---------- Newsletter ---------- */
.newsletter { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-6); align-items: center; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--glow); }
.newsletter form { display: grid; gap: var(--space-3); }
.field { display: grid; gap: var(--space-2); }
.field label { font-weight: 600; }
.field .help { color: var(--ink-dim); font-size: var(--text-sm); }
.input { min-height: var(--tap); padding: 0 var(--space-4); border: 2px solid var(--ink-faint); border-radius: var(--r-sm); background: var(--surface); width: 100%; font-size: var(--text-base); }
.input:focus { border-color: var(--leaf-deep); outline: none; box-shadow: var(--focus), var(--glow-sm); }
.check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); color: var(--ink-dim); }
.check input { width: 1.5rem; height: 1.5rem; margin: .1rem 0 0; accent-color: var(--leaf-deep); flex: none; }

/* ---------- Tiroir panier ---------- */
.drawer { border: 0; padding: 0; margin: 0; max-width: 100vw; max-height: 100vh; height: 100vh; width: min(30rem, 100vw); margin-left: auto; background: var(--surface); color: var(--ink); box-shadow: var(--glow-lg); }
.drawer::backdrop { background: rgba(30,42,23,.35); }
.drawer-inner { display: flex; flex-direction: column; height: 100%; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: var(--text-xl); }
.drawer-body { padding: var(--space-5); overflow: auto; flex: 1; display: grid; gap: var(--space-4); align-content: start; }
.line-item { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: var(--space-3); align-items: center; }
.line-item img { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-alt); border: 1px solid var(--line); }
.line-item .name { font-weight: 600; }
.line-item .qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-pill); overflow: hidden; margin-top: var(--space-2); }
.line-item .qty button { width: var(--tap-sm); height: var(--tap-sm); border: 0; background: var(--surface); font-weight: 700; }
.line-item .qty output { min-width: 2.25rem; text-align: center; font-weight: 600; }
.progress { height: .6rem; background: var(--leaf-tint); border-radius: var(--r-pill); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--leaf); border-radius: var(--r-pill); }
.drawer-foot { padding: var(--space-5); border-top: 1px solid var(--line); display: grid; gap: var(--space-3); }
.total-row { display: flex; justify-content: space-between; font-weight: 700; font-size: var(--text-lg); }
.help-box { padding: var(--space-4); border-radius: var(--r-md); background: var(--surface-alt); border: 1px solid var(--line); font-size: var(--text-sm); color: var(--ink-dim); }
.help-box strong { color: var(--ink); display: block; margin-bottom: var(--space-1); }
.help-box a { font-weight: 700; }

/* ---------- Pied de page ---------- */
.site-footer { border-top: 1px solid var(--line); padding: var(--space-7) 0 var(--space-6); background: var(--surface); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); margin-bottom: var(--space-6); }
.foot-brand p { color: var(--ink-dim); max-width: 34ch; margin-top: var(--space-3); font-size: var(--text-sm); }
.foot-col h4 { font-family: var(--font-text); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: var(--space-3); }
.foot-col a { display: inline-flex; align-items: center; min-height: 2.25rem; color: var(--ink); text-decoration: none; font-size: var(--text-sm); }
.foot-col a:hover { color: var(--leaf-deep); text-decoration: underline; }
.foot-col ul { list-style: none; margin: 0; padding: 0; }
/* Confort de lecture en pied de page */
.foot-comfort { display: grid; grid-template-columns: 1fr auto; gap: var(--space-5); align-items: center; padding: var(--space-5); margin-bottom: var(--space-5); border-radius: var(--r-md); background: var(--leaf-tint); border: 1px solid color-mix(in srgb, var(--leaf) 28%, transparent); box-shadow: var(--glow-sm); }
.foot-comfort h3 { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-text); font-size: var(--text-base); color: var(--leaf-deep); }
.foot-comfort h3 .aa { font-family: var(--font-display); font-weight: 680; font-size: var(--text-xl); letter-spacing: -.02em; }
.foot-comfort p { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--ink-dim); max-width: 46ch; }
.foot-comfort-switches { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.foot-comfort .switch { background: var(--surface); border-color: var(--line-strong); min-width: 15rem; }
.foot-comfort .switch:hover { border-color: var(--leaf-deep); }

.foot-reassure { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); padding-block: var(--space-4); border-block: 1px solid var(--line); font-size: var(--text-sm); color: var(--ink-dim); font-weight: 600; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-4); color: var(--ink-dim); font-size: var(--text-sm); }
.foot-bottom a { color: inherit; }

/* ---------- Responsive ---------- */
@media (max-width: 75em) { /* ~1200 px : Rechercher et Compte passent dans le menu, le bouton Menu apparaît */
  .hero { gap: var(--space-6); }
  .tool-hide-mobile { display: none; }
  .tool-menu { display: inline-flex; }
  .main-nav { gap: var(--space-4); }
}
@media (max-width: 55em) { /* ~880 px */
  .header-row { gap: var(--space-3); min-height: 4.25rem; }
  .logo img { height: 2.1rem; }
  .main-nav { display: none; }
  .tool-menu { display: inline-flex; }
  .tool-hide-mobile { display: none; }
  .header-tools { margin-left: auto; }
  .foot-comfort { grid-template-columns: 1fr; }
  .foot-comfort .switch { min-width: 0; width: 100%; }
  .announce-long { display: none; }
  .announce-short { display: inline; }
  .certs { display: none; } /* la réassurance du hero suffit sur mobile */
  .need { min-height: 0; }
  .hero { grid-template-columns: 1fr; padding-top: var(--space-5); padding-bottom: var(--space-7); gap: var(--space-5); }
  .hero-visual { order: -1; max-width: 30rem; width: 100%; margin-inline: auto; }
  .split, .band-inner, .newsletter { grid-template-columns: 1fr; }
  .band-inner { padding: var(--space-6) var(--space-5); }
  .p-grid, .reviews, .posts { grid-template-columns: 1fr 1fr; }
  .needs { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .section { padding-block: var(--space-7); }
}
@media (max-width: 40em) { /* ~640 px */
  .p-grid, .reviews, .posts { grid-template-columns: 1fr; }
  .hero-badge.left { left: 2%; top: 3%; max-width: 11.5rem; }
  .hero-badge.right { right: 2%; bottom: 4%; max-width: 12.5rem; }
  .hero-frame .price-note { left: auto; right: 4%; top: 4%; bottom: auto; }
}
@media (max-width: 35em) { /* ~560 px */
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; }
  .needs { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .band-stats { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .foot-grid { grid-template-columns: 1fr; }
  .hero-tabs { justify-content: center; }
}

/* ---------- Mouvement réduit (préférence système ou bouton « Moins d'animations ») ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
  html { scroll-behavior: auto; }
}
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { animation: none !important; transition-duration: 1ms !important; }
html[data-motion="reduced"] .hero-slide.is-active img { transform: none; }

/* ---------- Impression ---------- */
@media print { .site-header, .announce, .site-footer, .hero-tabs, .btn { display: none !important; } }

/* ==========================================================================
   Ambiance verte (demande David, 12/09/2026) : le site ne doit plus paraitre
   blanc. Teintes issues des tokens uniquement, ombres issues des tokens,
   animations coupees sous prefers-reduced-motion et sous data-motion="reduced".
   ========================================================================== */

/* 1. Halo de fond, fixe derriere tout le contenu */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58rem 42rem at 12% -8%, color-mix(in srgb, var(--leaf) 13%, transparent), transparent 62%),
    radial-gradient(46rem 36rem at 96% 6%, color-mix(in srgb, var(--leaf-light) 22%, transparent), transparent 60%),
    radial-gradient(70rem 50rem at 50% 112%, color-mix(in srgb, var(--leaf) 10%, transparent), transparent 66%),
    var(--paper);
}

/* 2. Bandes alternees : degrade vert tres doux plutot qu'un beige plat */
.section-alt {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--leaf-tint) 85%, var(--paper)), var(--surface-alt) 70%);
  border-block: 1px solid color-mix(in srgb, var(--leaf) 14%, transparent);
}

/* 3. Cartes : legere teinte verte et halo au survol */
.card, .p-card, .post, .faq details, .benefit {
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover, .faq details:hover, .benefit:hover {
  box-shadow: var(--glow-sm);
  border-color: color-mix(in srgb, var(--leaf) 34%, var(--line));
}
.p-card:hover, .post:hover, .need:hover {
  box-shadow: var(--glow);
  border-color: color-mix(in srgb, var(--leaf) 42%, var(--line));
  transform: translateY(-2px);
}

/* 4. Filet vert lumineux en haut des cartes produit */
.p-card { position: relative; }
.p-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg, transparent, var(--leaf-light), var(--leaf), var(--leaf-light), transparent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.p-card:hover::before { opacity: 1; }

/* 5. Titres de section : soulignement vert anime */
.section-head h2, .doc-hero h1 { position: relative; }
.section-head .eyebrow, .eyebrow {
  text-shadow: 0 0 18px color-mix(in srgb, var(--leaf) 28%, transparent);
}

/* 6. Bouton principal : halo vert respirant */
.btn-primary { box-shadow: var(--glow-btn); }
.btn-primary:hover { box-shadow: var(--glow-btn-hover); }
.btn-primary:not([aria-disabled="true"]) { animation: respire 5.5s var(--ease) infinite; }
@keyframes respire {
  0%, 100% { box-shadow: var(--glow-btn); }
  50%      { box-shadow: var(--glow-btn-hover); }
}

/* 7. Liens de contenu : soulignement vert qui se deroule */
.prose a:not(.btn), .answer a:not(.btn) {
  background-image: linear-gradient(var(--leaf), var(--leaf));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur) var(--ease);
}
.prose a:not(.btn):hover, .answer a:not(.btn):hover { background-size: 100% 2px; }

/* 8. Pastilles et puces vertes lumineuses */
.tag, .status, .eyebrow { text-shadow: none; }
.tag { box-shadow: var(--glow-sm); }

/* 9. Apparition au defilement */
.revele { opacity: 0; transform: translateY(14px); }
.revele.est-visible {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}

/* 10. Respect des preferences de mouvement */
@media (prefers-reduced-motion: reduce) {
  .btn-primary:not([aria-disabled="true"]) { animation: none; }
  .revele, .revele.est-visible { opacity: 1; transform: none; transition: none; }
}
html[data-motion="reduced"] .btn-primary:not([aria-disabled="true"]) { animation: none; }
html[data-motion="reduced"] .revele,
html[data-motion="reduced"] .revele.est-visible { opacity: 1; transform: none; transition: none; }

/* ==========================================================================
   Fond video du hero (demande David, 12/09/2026)
   Video decorative reprise de l'ancien site. Texte toujours pose sur un voile
   opaque : le contraste AA ne depend jamais de l'image qui passe dessous.
   ========================================================================== */
.hero { position: relative; isolation: isolate; }
.hero > *:not(.hero-video) { position: relative; z-index: 1; }

.hero-video {
  position: absolute;
  top: calc(var(--space-6) * -1);
  bottom: calc(var(--space-5) * -1);
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: 0;
  overflow: hidden;
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--leaf-tint) 90%, var(--paper)), var(--paper) 70%);
}

/* --------------------------------------------------------------------------
   Nappes d'huile animees, 100 % CSS (12/09/2026).
   Elles remplacent la video iStock, qui n'etait qu'un apercu filigrane non
   licencie. Trois couches : une nappe de fond qui ondule, trois taches qui
   derivent et se deforment, une brillance qui balaie en diagonale.
   Tout est anime en transform et en background-position : aucune reprise de
   mise en page, donc aucun a-coup au defilement.
   -------------------------------------------------------------------------- */
/* Le voile garantit le contraste du texte quoi qu'il se passe dessous : opaque
   a gauche ou vit la colonne de texte, presque nul a droite pour qu'on voie le
   decor onduler. Sans lui, une tache foncee passant sous le titre ferait
   tomber le contraste sous le seuil AA. */
.hero-voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--paper) 92%, transparent) 0%,
      color-mix(in srgb, var(--paper) 84%, transparent) 30%,
      color-mix(in srgb, var(--paper) 40%, transparent) 52%,
      transparent 74%),
    linear-gradient(to bottom, transparent 62%, var(--paper) 100%);
}

.hero-onde { position: absolute; inset: 0; overflow: hidden; }
.hero-onde > * { position: absolute; display: block; }

/* La nappe : deux trames de gradients qui glissent a des vitesses differentes,
   ce qui donne le moire d'une surface huileuse. */
.onde-nappe {
  inset: -20%;
  background:
    radial-gradient(38% 28% at 22% 34%, color-mix(in srgb, var(--leaf-light) 68%, transparent), transparent 62%),
    radial-gradient(30% 24% at 72% 22%, color-mix(in srgb, var(--leaf-tint) 88%, transparent), transparent 60%),
    radial-gradient(44% 32% at 58% 78%, color-mix(in srgb, var(--leaf) 46%, transparent), transparent 64%),
    radial-gradient(36% 26% at 12% 82%, color-mix(in srgb, var(--leaf-light) 52%, transparent), transparent 62%);
  animation: bm-nappe 34s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes bm-nappe {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.04); }
  50%  { transform: translate3d(2%, 2%, 0) scale(1.10); }
  100% { transform: translate3d(-1%, 1%, 0) scale(1.05); }
}

/* Les taches : des cercles flous qui derivent et changent lentement de forme.
   C'est la deformation du border-radius qui donne l'ondulation. */
.onde-blob {
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
  filter: blur(3.2rem);
  will-change: transform, border-radius;
}
.onde-blob.b1 {
  width: 46vw; height: 46vw; left: -6vw; top: -10vw;
  background: radial-gradient(circle at 38% 36%,
    color-mix(in srgb, var(--leaf-light) 92%, transparent),
    color-mix(in srgb, var(--leaf-tint) 70%, transparent) 62%, transparent 76%);
  animation: bm-blob-a 26s ease-in-out infinite alternate, bm-morph 19s ease-in-out infinite alternate;
}
.onde-blob.b2 {
  width: 38vw; height: 38vw; right: -4vw; top: 8vw;
  background: radial-gradient(circle at 58% 42%,
    color-mix(in srgb, var(--leaf) 72%, transparent),
    color-mix(in srgb, var(--leaf-light) 48%, transparent) 60%, transparent 76%);
  animation: bm-blob-b 31s ease-in-out infinite alternate, bm-morph 23s ease-in-out infinite alternate reverse;
}
.onde-blob.b3 {
  width: 52vw; height: 34vw; left: 28vw; bottom: -14vw;
  background: radial-gradient(circle at 46% 54%,
    color-mix(in srgb, var(--leaf-deep) 40%, transparent),
    color-mix(in srgb, var(--leaf) 34%, transparent) 58%, transparent 76%);
  animation: bm-blob-c 38s ease-in-out infinite alternate, bm-morph 27s ease-in-out infinite alternate;
}
@keyframes bm-blob-a {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(6vw, 4vw, 0) rotate(22deg); }
}
@keyframes bm-blob-b {
  from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  to   { transform: translate3d(-7vw, 6vw, 0) rotate(-18deg) scale(1.12); }
}
@keyframes bm-blob-c {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-5vw, -5vw, 0) scale(1.14); }
}
@keyframes bm-morph {
  0%   { border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%; }
  33%  { border-radius: 62% 38% 44% 56% / 42% 58% 42% 58%; }
  66%  { border-radius: 38% 62% 52% 48% / 60% 40% 60% 40%; }
  100% { border-radius: 54% 46% 40% 60% / 46% 56% 44% 54%; }
}

/* La brillance : un trait de lumiere etroit qui traverse en diagonale, comme
   un reflet qui court sur de l'huile. */
.onde-brillance {
  inset: -40% -60%;
  background: linear-gradient(104deg,
    transparent 38%,
    color-mix(in srgb, var(--paper) 62%, transparent) 47%,
    color-mix(in srgb, var(--paper) 88%, transparent) 50%,
    color-mix(in srgb, var(--paper) 55%, transparent) 53%,
    transparent 62%);
  mix-blend-mode: overlay;
  opacity: 1;
  animation: bm-brillance 11s cubic-bezier(.45, 0, .2, 1) infinite;
  will-change: transform;
}
@keyframes bm-brillance {
  0%, 62% { transform: translate3d(-60%, -18%, 0); }
  92%, 100% { transform: translate3d(60%, 18%, 0); }
}

/* Sur petit ecran on garde la nappe et une seule tache : trois plans flous
   coutent cher sur un telephone pour un decor qu'on voit a peine. */
@media (max-width: 48em) {
  .hero-video { inset: calc(var(--space-4) * -1) calc(var(--space-4) * -1); }
  .onde-blob.b2, .onde-blob.b3, .onde-brillance { display: none; }
  .onde-blob.b1 { filter: blur(1.8rem); }
}

/* Moins d'animations : le decor reste, il cesse simplement de bouger. */
@media (prefers-reduced-motion: reduce) {
  .onde-nappe, .onde-blob, .onde-brillance { animation: none; }
  .onde-brillance { opacity: .35; transform: translate3d(0, 0, 0); }
}
html[data-motion="reduced"] .onde-nappe,
html[data-motion="reduced"] .onde-blob,
html[data-motion="reduced"] .onde-brillance { animation: none; }
html[data-motion="reduced"] .onde-brillance { opacity: .35; transform: translate3d(0, 0, 0); }

/* ==========================================================================
   Passe responsive et animations (demande David, 12/09/2026)
   Palier tablette ajoute, grilles fluides, animations au survol et a l'entree.
   ========================================================================== */

/* 1. Grilles fluides : plus de palier brutal entre 2 et 3 colonnes */
.p-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.benefits { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.values { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.numbers { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.triptych { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }

/* 2. Palier tablette : le tunnel et la fiche produit passent en une colonne plus tot */
@media (max-width: 62em) {
  .checkout-layout, .cart-layout { grid-template-columns: 1fr; }
  .checkout-layout aside, .cart-layout aside { position: static; }
  .pdp { grid-template-columns: 1fr; gap: var(--space-6); }
  .pdp .gallery { max-width: 34rem; margin-inline: auto; width: 100%; }
  .split { grid-template-columns: 1fr; }
  .band-inner { grid-template-columns: 1fr; }
}

/* 3. Rien ne deborde jamais en largeur */
img, video, svg, table { max-width: 100%; }
.rating, .price-row, .crumbs, .btn-row, .cta-row { flex-wrap: wrap; }
.rating a { overflow-wrap: anywhere; }
h1, h2, h3, .p-name { overflow-wrap: break-word; hyphens: auto; }

/* 4. Animations d'interaction */
.btn { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.variant { transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.variant:hover { border-color: var(--leaf); box-shadow: var(--glow-sm); }
.variant[aria-pressed="true"] { box-shadow: var(--glow-sm); }
.p-media img { transition: transform 600ms var(--ease); }
.p-card:hover .p-media img { transform: scale(1.04); }
.thumb { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.thumb:hover { box-shadow: var(--glow-sm); }
.doc-shortcut { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.doc-shortcut:hover { transform: translateY(-2px); box-shadow: var(--glow-sm); }
.hero-tab { transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.hero-tab:hover { transform: translateY(-1px); }

/* 5. Entree en douceur des alertes creees par le script */
.alert.is-auto, .promo-retour { animation: alerte-entre 420ms var(--ease) both; }
@keyframes alerte-entre {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* 6. Tout se coupe si l'utilisateur prefere le calme */
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .hero-tab:hover, .doc-shortcut:hover, .p-card:hover .p-media img { transform: none; }
  .alert.is-auto, .promo-retour { animation: none; }
}
html[data-motion="reduced"] .btn:hover,
html[data-motion="reduced"] .hero-tab:hover,
html[data-motion="reduced"] .doc-shortcut:hover,
html[data-motion="reduced"] .p-card:hover .p-media img { transform: none; }
html[data-motion="reduced"] .alert.is-auto,
html[data-motion="reduced"] .promo-retour { animation: none; }

/* ==========================================================================
   Sous-menu Boutique (demande David, 12/09/2026)
   Ouvre au survol ET au clavier. Sur mobile il devient une sous-liste dans le
   tiroir de menu, jamais un survol qu'un doigt ne peut pas declencher.
   ========================================================================== */
.nav-groupe { display: inline-flex; align-items: center; }
.site-header { position: sticky; }   /* conteneur de reference du sous-menu */
.nav-groupe > a { gap: var(--space-1); }
.nav-groupe .chevron { transition: transform var(--dur) var(--ease); }
.nav-groupe[data-ouvert] .chevron { transform: rotate(180deg); }

/* Le panneau s'accroche a l'en-tete, pas au lien Boutique : centre sur le lien,
   il sortait de l'ecran par la gauche. Il est centre sur la page et borne a la
   largeur de la fenetre. */
.sous-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: 60;
  width: min(56rem, calc(100vw - 2 * var(--space-5)));
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--glow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sous-menu[hidden] { display: block; }            /* on anime, on ne coupe pas */
.nav-groupe[data-ouvert] .sous-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Le sous-menu vit dans .main-nav, qui impose « white-space: nowrap » pour que
   les entrees du menu tiennent sur une ligne. Cette consigne se transmet aux
   descendants : les phrases du sous-menu ne revenaient donc jamais a la ligne
   et sortaient du cadre (144 px de debordement, releve le 19/09/2026). On la
   remet a « normal » ici, et nulle part ailleurs. */
.sous-menu, .sous-menu * { white-space: normal; }
.sous-menu-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.sous-menu-titre {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: var(--space-3);
}
.sous-menu a {
  display: block; padding: var(--space-2) var(--space-3); border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none; min-height: var(--tap-sm);
  transition: background-color var(--dur) var(--ease);
}
.sous-menu a:hover { background: var(--leaf-tint); }
.sous-menu a strong { display: block; font-size: var(--text-base); }
.sous-menu a span { display: block; font-size: var(--text-sm); color: var(--ink-dim); font-weight: 500; }
.sous-menu-mise-en-avant { border-left: 1px solid var(--line); padding-left: var(--space-5); }
/* « .sous-menu a » a la meme specificite et vient avant : sans « .sous-menu »
   devant, ce display:flex etait purement decoratif et la carte restait en
   bloc, image au-dessus du texte. */
.sous-menu a.sous-menu-vedette { display: flex; gap: var(--space-3); align-items: center; background: var(--surface-alt); margin-bottom: var(--space-2); }
.sous-menu-vedette img { width: 3.5rem; height: 3.5rem; border-radius: var(--r-sm); object-fit: cover; flex: none; }
/* Le texte de la carte vedette est un enfant de flex : sans min-width, il
   prend sa largeur de contenu et sort du sous-menu (144 px de debordement
   mesures le 19/09/2026). Meme cause que les grilles en 1fr, meme remede. */
.sous-menu-vedette > * { min-width: 0; }
.sous-menu-vedette strong, .sous-menu-vedette span { overflow-wrap: break-word; }

/* Sous-liste du tiroir mobile */
/* Les collections defilent horizontalement en pastilles sous la carte
   Boutique : cinq entrees empilees poussaient tout le reste hors de l'ecran. */
.menu-sous-liste {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0 0 var(--space-1);
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.menu-sous-liste::-webkit-scrollbar { display: none; }
.menu-sous-liste li { flex: none; scroll-snap-align: start; }
.menu-sous-liste a {
  display: inline-flex; align-items: center;
  min-height: var(--tap-sm);
  padding: 0 var(--space-4);
  border: 1px solid color-mix(in srgb, var(--leaf) 30%, transparent);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--leaf-deep);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 160ms var(--ease), box-shadow 160ms var(--ease), transform 160ms var(--ease);
}
.menu-sous-liste a:hover,
.menu-sous-liste a:focus-visible {
  background: var(--leaf-deep); color: var(--paper);
  border-color: var(--leaf-deep);
  box-shadow: var(--glow-btn);
}
.menu-sous-liste a:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .menu-sous-liste a { transition: none; } }

@media (max-width: 55em) { .sous-menu { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .sous-menu, .nav-groupe .chevron { transition: none; }
}


/* La video du hero deborde volontairement la grille : on coupe au niveau de la page.
   overflow-x: clip plutot que hidden, pour ne pas casser position: sticky. */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* ==========================================================================
   Correctifs responsive du 12/09/2026, trouves par l'audit a 360 px.
   Deux vrais defauts : l'en-tete debordait sous 400 px, et les grilles en
   « 1fr » pouvaient depasser leur conteneur (le « grid blowout » classique).
   ========================================================================== */

/* 1. Aucune cellule de grille ou de flex ne peut depasser son conteneur.
      « 1fr » vaut « minmax(auto, 1fr) » : le contenu impose sa largeur
      minimale et fait deborder. On force le minimum a zero. */
.hero > *, .page-hero > *, .pdp > *, .split > *, .checkout-layout > *,
.cart-layout > *, .band-inner > *, .p-grid > *, .benefits > *, .values > *,
.numbers > *, .triptych > *, .form-grid > *, .collections > *,
.result-list > *, .doc-key > *, .sous-menu-grille > * { min-width: 0; }

/* 2. En-tete compact sous 400 px : le libelle du panier disparait,
      il ne reste que le pictogramme et le nombre d'articles. */
@media (max-width: 25em) {
  .header-row { gap: var(--space-2); padding-inline: var(--space-3); }
  .logo img { height: 1.8rem; }
  .tool { padding-inline: var(--space-3); }
  .tool-icone { width: 2.6rem; min-width: 2.6rem; }
  .announce .wrap { padding-inline: var(--space-3); }
  .wrap { padding-inline: var(--space-4); }
}

/* 3. Les tableaux defilent toujours dans leur propre cadre */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 34rem; }

/* 4. Cibles tactiles : aucun lien isole sous 44 px */
.doc-shortcut, .relay button, .thumb, .variant, .hero-tab,
.recherche-suggestions a, .menu-sous-liste a { min-height: var(--tap-sm); }
.btn-link { min-height: 2.75rem; display: inline-flex; align-items: center; }
.prose .btn-link, p .btn-link, li .btn-link, .answer .btn-link { min-height: 0; display: inline; }

/* 5. Le logo garde une cible confortable */
.logo { display: inline-flex; align-items: center; min-height: var(--tap-sm); }

/* Suite des correctifs responsive : grilles qui restaient plus larges que leur
   conteneur sous 400 px. « 1fr » remplace par « minmax(0, 1fr) ». */
.article-layout > *, .contact-grid > *, .account-nav > *, .reassure > *,
.card-fields > *, .pay-methods > *, .featured > *, .campaign-hero > *,
.reviews-list > *, .review-summary > *, .relay-list > *, .checkout-steps > * { min-width: 0; }

.account-nav { grid-template-columns: minmax(0, 1fr); }
.account-nav a { white-space: normal; }

@media (max-width: 55em) {
  .article-layout, .contact-grid, .featured, .campaign-hero,
  .values, .reviews-list, .review-summary { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 48em) {
  .card-fields { grid-template-columns: minmax(0, 1fr); }
  .reassure { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid .span-2 { grid-column: auto; }
}

/* Dernier lot de correctifs responsive : barres laterales et tableaux.
   « 1fr » laisse le contenu imposer sa largeur, on force « minmax(0, 1fr) ». */
@media (max-width: 55em) {
  .doc-layout, .account-layout, .sg-layout { grid-template-columns: minmax(0, 1fr); }
  .doc-layout > *, .account-layout > *, .sg-layout > * { min-width: 0; }
  .doc-nav, .sg-nav, .account-nav { position: static; max-width: 100%; }
  .doc-nav ol, .sg-nav ol, .account-nav { grid-template-columns: minmax(0, 1fr); }
  .doc-nav a, .sg-nav a, .account-nav a { white-space: normal; overflow-wrap: anywhere; }
  .contact-card { min-width: 0; }
  .contact-card .tel { overflow-wrap: anywhere; }
}

/* Un tableau dans du texte courant defile plutot que de deborder */
.prose table { display: block; overflow-x: auto; max-width: 100%; }

/* Une pastille de reassurance ne force jamais la largeur */
.reassure span, .reassure strong, .foot-reassure span { overflow-wrap: anywhere; min-width: 0; }

/* Deux grilles oubliees : la colonne laterale des pages de contenu et les
   sections basses de la fiche produit. Meme cause, meme correctif. */
.with-aside > *, .pdp-sections > * { min-width: 0; }
@media (max-width: 55em) {
  .with-aside, .pdp-sections { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Correction d'espacement (demande David, 12/09/2026)
   Sur l'accueil, les bandes alternees sont au premier niveau : leur fond va
   d'un bord a l'autre. Sur les pages de contenu, tout est dans un .wrap, donc
   la bande restait coincee dans la colonne de texte avec 80 px de vide de
   chaque cote. On etend seulement le fond, sans toucher a la mise en page.
   ========================================================================== */
.wrap > .section-alt {
  background: none;
  border-block: 0;
  position: relative;
  isolation: isolate;
}
.wrap > .section-alt::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--leaf-tint) 85%, var(--paper)), var(--surface-alt) 70%);
  border-block: 1px solid color-mix(in srgb, var(--leaf) 14%, transparent);
}

/* Respiration plus mesuree dans les pages de contenu que sur l'accueil */
.wrap > .section { padding-block: var(--space-7); }
.wrap > .section + .section { padding-top: var(--space-7); }

/* Les .wrap imbriques neutralisaient la gouttiere : on la rend au contenu */
.section-alt > .wrap[style*="padding:0"] { padding-inline: 0; }

/* Compte connecte : une petite pastille verte sur l'icone, a la place du prenom
   qui s'affichait en toutes lettres dans l'en-tete. Bornee au grand ecran ou
   l'icone est visible ; sur mobile, le compte est dans le menu. */
.tool-icone.est-connecte::after { content: ""; position: absolute; top: 7px; right: 7px; width: .5rem; height: .5rem;
  border-radius: 50%; background: var(--leaf); border: 2px solid var(--surface); }

/* ------------------------------------ achat rapide depuis la carte produit */
.p-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-2); margin-top: var(--space-3); }
.p-actions .btn { min-height: var(--tap-sm); justify-content: center; text-align: center; }
.p-actions .btn.is-done { background: var(--leaf); border-color: var(--leaf); }
@media (max-width: 30em) {
  .p-actions { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------- modal de choix de variante
   Refaite le 24/10/2026 : vraie croix de fermeture, photo et prix lisibles,
   choix en pastilles nettes, melange en grille a deux lignes, recapitulatif
   encadre, pied colle en bas avec la quantite et le bouton. */
.modal-variante {
  width: min(46rem, 94vw);
  max-height: 90vh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--glow-lg);
  overflow: hidden;
  color: var(--ink);
}
.modal-variante[open] { animation: cv-entree 220ms var(--ease); }
@keyframes cv-entree { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-variante::backdrop { background: rgba(30, 42, 23, .45); backdrop-filter: blur(3px); }
.cv-inner { display: flex; flex-direction: column; max-height: 90vh; }
.cv-tete {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--leaf-tint);
}
.cv-tete h2 { font-size: var(--text-lg); margin: 0; color: var(--leaf-deep); }
.cv-fermer {
  flex: none; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer;
  box-shadow: var(--glow-xs); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cv-fermer:hover { background: var(--leaf-deep); color: #fff; }
.cv-fermer:focus-visible { outline: 3px solid var(--leaf-deep); outline-offset: 2px; }
.cv-corps { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-5); padding: var(--space-5); overflow-y: auto; }
.cv-corps > * { min-width: 0; }
.cv-visuel { border-radius: var(--r-md); overflow: hidden; background: var(--surface-alt); align-self: start; aspect-ratio: 1; box-shadow: var(--glow-xs); }
.cv-visuel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cv-nom { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.25; margin: 0; }
.cv-prix { font-size: var(--text-2xl); font-weight: 700; color: var(--leaf-deep); margin: var(--space-1) 0 0; }
.cv-corps .variant-set { margin-top: var(--space-5); }
.cv-corps .variant-set legend { font-size: var(--text-base); font-family: var(--font-text); font-weight: 700; padding: 0; }
.cv-corps .variants { margin-top: var(--space-3); }
.cv-corps .variant { min-height: 2.9rem; font-size: var(--text-sm); }
.cv-corps .variants-echelle { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.cv-corps .variants-echelle .variant { text-align: left; padding: var(--space-2) var(--space-3); }
.cv-corps .variants-echelle .variant small { font-size: .82rem; margin-top: 2px; }
.cv-resume { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); border-radius: var(--r-sm);
  background: var(--leaf-tint); color: var(--leaf-deep) !important; font-weight: 600; }
.cv-resume:empty { display: none; }
.cv-resume.a-choisir { background: color-mix(in srgb, var(--promo) 8%, white); color: var(--promo) !important; }
.cv-pied {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.cv-pied .btn { flex: 1; min-width: 12rem; min-height: var(--tap); }
.cv-lien { padding: var(--space-3) var(--space-5); margin: 0; background: var(--surface-alt); text-align: center; }
.cv-lien a { font-weight: 600; color: var(--leaf-deep); }
@media (max-width: 40em) {
  .modal-variante { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .cv-inner { max-height: 100dvh; height: 100dvh; }
  .cv-corps { grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); align-content: start; }
  .cv-corps .cv-choix { display: contents; }
  .cv-visuel { grid-row: span 2; }
  .cv-nom, .cv-prix { grid-column: 2; }
  .cv-corps .variant-set, .cv-resume, .cv-corps [data-cv-groupes] { grid-column: 1 / -1; }
  .cv-corps .variants-echelle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-pied { padding: var(--space-3) var(--space-4); }
  .cv-pied .btn { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-variante[open] { animation: none; }
  .cv-fermer { transition: none; }
}
}

/* ------------------------------------------------ progression du franco
   Remplace le texte du bandeau des qu'il y a un article dans le panier. */
.announce-franco { display: inline-flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.announce-franco[hidden] { display: none; }
.announce-jauge { display: inline-block; width: 8rem; height: .45rem; border-radius: 999px; background: rgba(61, 87, 48, .18); overflow: hidden; }
.announce-jauge span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--leaf-deep); transition: width .5s var(--ease); }
.announce.franco-actif .announce-long, .announce.franco-actif .announce-short { display: none; }

/* ------------------------------------------------ suggestions du panier */
.complements { margin-top: var(--space-5); }
.complements[hidden] { display: none; }
.complements h2, .complements h3 { font-size: var(--text-lg); margin: 0 0 var(--space-3); }
.comp-liste { display: grid; gap: var(--space-3); }
.comp-item { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: var(--space-3); align-items: center;
  padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.comp-item img { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: var(--r-sm, 8px); background: var(--surface-alt); }
.comp-item .comp-nom { font-weight: 700; line-height: 1.3; }
.comp-item .comp-pourquoi { font-size: var(--text-sm); color: var(--ink-soft, #5b6b52); }
.comp-item .comp-prix { font-weight: 700; color: var(--leaf-deep); }
.comp-item .btn { min-height: var(--tap-sm); white-space: nowrap; }
@media (max-width: 30em) {
  .comp-item { grid-template-columns: 4rem minmax(0, 1fr); }
  .comp-item .btn { grid-column: 1 / -1; }
}

/* Boutique sur telephone : deux produits par rangee, comme dans toute boutique
   en ligne (24/10/2026). Une fiche par ecran obligeait a faire defiler six
   ecrans pour voir six produits. On garde l'essentiel : photo, nom, prix,
   bouton d'ajout. Le texte d'accroche et « Voir le produit » disparaissent :
   le nom et la photo menent deja a la fiche. Le corps de texte ne descend pas
   sous son plancher de 17 px. Regle bornee par max-width : ecrite en fin de
   fichier, elle ne doit pas ecraser les colonnes du grand ecran. */
@media (max-width: 47.99em) {
  .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .p-grid .p-card .p-desc,
  .p-grid .p-card .p-foot .small,
  .p-grid .p-card .p-actions .btn-ghost { display: none; }
  .p-grid .p-card .p-body { padding: var(--space-3); gap: var(--space-1); }
  .p-grid .p-card .p-media { aspect-ratio: 1 / 1; }
  .p-grid .p-card .p-actions { grid-template-columns: minmax(0, 1fr); }
  .p-grid .p-card .p-actions .btn { padding-inline: var(--space-2); white-space: normal; line-height: 1.2; }
  .p-grid .p-card .p-price { font-size: var(--text-lg); }
  /* Le nom est un titre, pas du corps de texte : il peut se resserrer. */
  .p-grid .p-card .p-name { font-size: 1.05rem; line-height: 1.25; }
  .p-grid .p-card .p-actions { margin-top: auto; }
  .p-grid .p-card .p-actions .btn { font-size: var(--text-sm); }
}


/* ===================================================== en-tete et pied verts
   Decision de David du 24/10/2026 : la barre de navigation et le pied de page
   passent en vert, texte blanc. Le blanc sur --leaf-deep donne 8,06:1, bien
   au-dessus du AA. Le logo est rendu en blanc par un filtre (le fichier reste
   celui de l'identite, remplacable depuis les Reglages). Le sous-menu et les
   fenetres (tiroir, menu mobile, recherche) restent clairs : on y lit, on y
   choisit. */
.site-header { background: linear-gradient(180deg, var(--leaf-deep), #33492a); border-bottom-color: transparent; }
.site-header .logo img { filter: brightness(0) invert(1); }
.site-header .main-nav > a, .site-header .main-nav > .nav-groupe > a { color: #fff; }
.site-header .main-nav > a:hover, .site-header .main-nav > a[aria-current="page"],
.site-header .main-nav > .nav-groupe > a:hover, .site-header .main-nav > .nav-groupe > a[aria-current="page"] { color: #fff; opacity: .85; }
.site-header .main-nav a[aria-current="page"]::after { background: #fff; }
.site-header .tool { color: #fff; border-color: rgba(255, 255, 255, .45); background: transparent; }
.site-header .tool:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .12); }
.site-header .tool-icone { border-color: transparent; }
.site-header .tool-icone:hover { background: rgba(255, 255, 255, .14); }
.site-header .tool-icone:focus-visible, .site-header .main-nav a:focus-visible { outline-color: #fff; }
.site-header .cart-pastille { background: #fff; color: var(--leaf-deep); border-color: var(--leaf-deep); }
.site-header .tool-icone.est-connecte::after { background: #fff; border-color: var(--leaf-deep); }
.site-header .sous-menu, .site-header .sous-menu a, .site-header .sous-menu * { color: var(--ink); }
.site-header .sous-menu a:hover { color: var(--leaf-deep); }

.site-footer { background: linear-gradient(180deg, #33492a, var(--leaf-deep)); color: rgba(255, 255, 255, .88); border-top-color: transparent; }
.site-footer h2, .site-footer h3, .site-footer h4, .site-footer strong, .site-footer .foot-title { color: #fff; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: #fff; opacity: .8; }
.site-footer p, .site-footer li, .site-footer span, .site-footer small, .site-footer .small, .site-footer .muted { color: rgba(255, 255, 255, .86); }
.site-footer .logo img, .site-footer img.foot-logo { filter: brightness(0) invert(1); }
.site-footer .foot-reassure { border-color: rgba(255, 255, 255, .2); }
.site-footer .foot-bottom { border-color: rgba(255, 255, 255, .2); }
.site-footer button:not(.btn), .site-footer .btn-link { color: #fff; }
.site-footer .input, .site-footer input, .site-footer select { color: var(--ink); }


/* Une variante a choisir avant d'ajouter au panier (24/10/2026) : rien n'est
   plus coche a la place du client, sauf le melange sur-mesure. */
.variant-set.est-manquant { border-radius: var(--r-md); outline: 2px solid var(--promo); outline-offset: 6px; }
.variant-manque { margin: var(--space-2) 0 0; color: var(--promo); font-weight: 700; font-size: var(--text-sm); }

/* Respiration avant le pied de page (24/10/2026) : sur une vingtaine de
   pages (tunnel de commande, panier, fiches, pages legales, compte), le
   dernier bloc touchait le pied de page vert. Un espace commun sous le
   contenu de toutes les pages ; les sections qui en portaient deja un en
   bas le rendent, pour ne pas le doubler. */
main#contenu { padding-bottom: var(--space-8); }
/* :nth-last-child(1 of :not(script)) : le dernier bloc VISIBLE, le script
   de donnees structurees qui ferme souvent la page ne compte pas. */
main#contenu > .section:nth-last-child(1 of :not(script)),
main#contenu > .wrap:nth-last-child(1 of :not(script)) > .section:nth-last-child(1 of :not(script)),
main#contenu > .wrap:nth-last-child(1 of :not(script)) > section:nth-last-child(1 of :not(script)),
main#contenu > .wrap:nth-last-child(1 of :not(script)) > .boutique-layout:nth-last-child(1 of :not(script)) { padding-bottom: 0; }
main#contenu > :nth-last-child(1 of :not(script)),
main#contenu > :nth-last-child(1 of :not(script)) > :nth-last-child(1 of :not(script)) { margin-bottom: 0; }

/* ==========================================================================
   BioMerveille v2 — composants partagés par les pages intérieures
   (fil d'Ariane, en-têtes de page, alertes, formulaires, choix, tableaux,
   FAQ, pagination, prose, prix, chronologie, mise en page avec colonne)
   ========================================================================== */

/* ---------- Fil d'Ariane et en-tête de page ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--ink-dim); list-style: none; margin: 0; }
.crumbs li + li::before { content: "›"; margin-right: var(--space-2); color: var(--ink-faint); }
.crumbs a { color: var(--ink-dim); text-decoration: none; }
.crumbs a:hover { color: var(--leaf-deep); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.page-head { padding: var(--space-6) 0 var(--space-5); max-width: 62rem; }
.page-head .eyebrow { margin-bottom: var(--space-4); }
.page-head h1 { font-size: var(--text-3xl); }
.page-head .lead { margin-top: var(--space-4); }
.page-head.center { margin-inline: auto; text-align: center; }
.page-head.center .lead { margin-inline: auto; }
.page-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-7); align-items: center; padding: var(--space-6) 0 var(--space-7); }
.page-hero > * { min-width: 0; }
.page-hero .media { aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface-alt); box-shadow: var(--glow-lg); }
.page-hero .media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero .media.kb img { animation: kenburns 12s ease-in-out 2; }
/* Photo produit carree : cadre carre, cadrage entier, aucun zoom.
   Une image 1080x1080 dans un cadre 4/3 perdait un tiers de sa hauteur. */
.page-hero .media-carre { aspect-ratio: 1 / 1; max-width: 30rem; margin-inline: auto; }
.page-hero .media-carre img { object-fit: contain; padding: 9%; animation: none; }
.page-hero .media-carre { background: linear-gradient(155deg, color-mix(in srgb, var(--leaf-tint) 80%, var(--paper)), var(--paper) 72%); }

/* ---------- Mise en page avec colonne latérale ---------- */
.with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--space-7); align-items: start; }
.with-aside.left { grid-template-columns: 17rem minmax(0, 1fr); }
.sticky { position: sticky; top: 6rem; }
.stack { display: grid; gap: var(--space-4); }
/* Une colonne qui ne se laisse pas elargir par son contenu. */
.stack-lg { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--space-5); box-shadow: var(--glow-xs); }
.card-alt { background: var(--surface-alt); }
.card h2, .card h3 { margin-bottom: var(--space-3); }
.card + .card { margin-top: var(--space-4); }
.divider { border: 0; border-top: 1px solid var(--line); margin: var(--space-5) 0; }
.row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.inline-list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; margin: 0; padding: 0; }

/* ---------- Alertes ---------- */
.alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-5); border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface-alt); color: var(--ink); box-shadow: var(--glow-xs); }
.alert svg { flex: none; margin-top: .15rem; }
.alert strong { display: block; margin-bottom: var(--space-1); }
.alert-info { background: var(--leaf-tint); border-color: color-mix(in srgb, var(--leaf) 35%, transparent); }
.alert-info svg { color: var(--leaf-deep); }
.alert-success { background: var(--leaf-tint); border-color: var(--leaf); }
.alert-success svg { color: var(--leaf-deep); }
.alert-error { background: color-mix(in srgb, var(--promo) 7%, white); border-color: var(--promo); }
.alert-error svg { color: var(--promo); }
.alert-warn { background: var(--gold-tint); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.alert-warn svg { color: var(--gold); }
.alert .actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.demo-label { display: inline-block; font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6f4f10; background: var(--gold-tint); border: 1px dashed var(--gold); padding: .25rem .6rem; border-radius: var(--r-pill); margin-bottom: var(--space-3); }
.demo-block { border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding: var(--space-5); margin-top: var(--space-6); }

/* ---------- Formulaires ---------- */
.form { display: grid; gap: var(--space-4); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-grid .span-2 { grid-column: 1 / -1; }
.field .req { color: var(--promo); font-weight: 700; }
.field .error-msg { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--promo); font-weight: 600; font-size: var(--text-sm); }
.field.is-invalid .input { border-color: var(--promo); }
.field.is-valid .input { border-color: var(--leaf); }
.input-row { display: flex; gap: var(--space-2); }
.input-row .input { flex: 1; }
select.input { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%231e2a17' stroke-width='2'><path d='M3 6l5 5 5-5'/></svg>"); background-repeat: no-repeat; background-position: right var(--space-4) center; padding-right: 3rem; }
textarea.input { min-height: 9rem; padding: var(--space-3) var(--space-4); resize: vertical; }
.input[readonly] { background: var(--surface-alt); }
.counter { font-size: var(--text-xs); color: var(--ink-dim); text-align: right; }
.form-summary { border-left: 4px solid var(--promo); }
.pw-toggle { align-self: end; white-space: nowrap; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 600; margin-bottom: var(--space-3); padding: 0; font-size: var(--text-lg); }
.choice { display: grid; grid-template-columns: 1.75rem 1fr auto; gap: var(--space-3); align-items: start; padding: var(--space-4); border: 2px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); cursor: pointer; }
.choice + .choice { margin-top: var(--space-3); }
.choice input { width: 1.5rem; height: 1.5rem; margin: .15rem 0 0; accent-color: var(--leaf-deep); }
.choice:has(input:checked) { border-color: var(--leaf-deep); background: var(--leaf-tint); box-shadow: var(--glow-sm); }
.choice:has(input:focus-visible) { box-shadow: var(--focus); }
.choice strong { display: block; }
.choice .desc { color: var(--ink-dim); font-size: var(--text-sm); }
.choice .amount { font-weight: 700; white-space: nowrap; }
.choice.is-disabled { opacity: .55; cursor: not-allowed; }
.check strong { color: var(--ink); }
.check.lg { font-size: var(--text-base); color: var(--ink); }

/* ---------- Boutons supplémentaires ---------- */
.btn-sm { min-height: var(--tap-sm); padding: 0 var(--space-4); font-size: var(--text-sm); }
.btn-link { background: none; border: 0; color: var(--leaf-deep); font-weight: 700; padding: 0; min-height: var(--tap-sm); text-decoration: underline; text-underline-offset: .16em; }
.btn-link:hover { color: var(--ink); }
.btn-danger { background: var(--surface); color: var(--promo); border-color: var(--promo); }
.btn-danger:hover { background: color-mix(in srgb, var(--promo) 8%, white); color: var(--promo); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
.btn.is-loading { position: relative; color: transparent; }
.btn.is-loading::before { content: ""; position: absolute; width: 1.25rem; height: 1.25rem; border: 3px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn.is-done { background: var(--leaf); border-color: var(--leaf); }
.btn-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.btn-row.between { justify-content: space-between; }

/* ---------- Puces de filtre ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { min-height: var(--tap-sm); padding: 0 var(--space-4); border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); font-weight: 600; font-size: var(--text-sm); color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); }
.chip:hover { border-color: var(--leaf-deep); color: var(--leaf-deep); }
.chip[aria-pressed="true"], .chip.is-active { background: var(--leaf-deep); color: #fff; border-color: var(--leaf-deep); box-shadow: var(--glow-btn); }

/* ---------- Prix ---------- */
.price { font-size: var(--text-xl); font-weight: 700; color: var(--ink); }
.price.lg { font-size: var(--text-2xl); }
.price .promo { color: var(--promo); }
.price s { color: var(--ink-dim); font-weight: 500; font-size: var(--text-base); margin-left: var(--space-2); }
.price-ref { display: block; font-size: var(--text-sm); color: var(--ink-dim); margin-top: var(--space-1); }
.tax { font-size: var(--text-sm); color: var(--ink-dim); font-weight: 500; }

/* ---------- Quantité ---------- */
/* Boutons de variante : partages par la fiche produit ET la fenetre de choix
   rapide, qui s'ouvre depuis toutes les pages (accueil, boutique, panier).
   Ils vivaient dans produit.css : hors de la fiche, la fenetre affichait des
   boutons bruts, colles les uns aux autres. */
.variant-set { margin: var(--space-5) 0 0; border: 0; padding: 0; }
.variant-set legend { font-family: var(--font-display); font-size: var(--text-lg); padding: 0; }
.variant-help { font-size: var(--text-sm); color: var(--ink-dim); margin-top: var(--space-2); max-width: 42rem; }
.variants { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; }
.variants-echelle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.variants-echelle .variant { padding: var(--space-2) var(--space-3); border-radius: var(--r-md); line-height: 1.25; }
.variant small { display: block; font-weight: 500; font-size: var(--text-sm); color: var(--ink-dim); }
.variant[aria-pressed="true"] small { color: var(--leaf-deep); }
.variant { min-height: var(--tap-sm); padding: 0 var(--space-4); border-radius: var(--r-pill); border: 2px solid var(--line-strong); background: var(--surface); font-weight: 600; }
.variant[aria-pressed="true"] { border-color: var(--leaf-deep); background: var(--leaf-tint); color: var(--leaf-deep); }
@media (max-width: 40em) {
  .variants-echelle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.qty { display: inline-flex; align-items: center; border: 2px solid var(--line-strong); border-radius: var(--r-pill); overflow: hidden; }
.qty button { width: 3rem; height: 3rem; border: 0; background: var(--surface); font-weight: 700; font-size: var(--text-lg); }
.qty button:hover { background: var(--leaf-tint); color: var(--leaf-deep); }
.qty input, .qty output { width: 3rem; text-align: center; font-weight: 700; border: 0; background: var(--surface); font-size: var(--text-base); }

/* ---------- Étoiles et avis ---------- */
.rating { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--ink-dim); }
.rating .stars { font-size: var(--text-base); }
.badge-verified { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--text-xs); font-weight: 700; color: var(--leaf-deep); background: var(--leaf-tint); border-radius: var(--r-pill); padding: .2rem .6rem; }
.review .meta { display: flex; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-sm); color: var(--ink-dim); }
.review .reply { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--leaf); background: var(--surface-alt); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: var(--text-sm); }

/* ---------- Tableaux ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--glow-xs); }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th, .table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { background: var(--surface-alt); font-weight: 700; color: var(--ink); }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- FAQ (details) ---------- */
.faq { display: grid; gap: var(--space-3); }
.faq details { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--glow-xs); transition: box-shadow var(--dur), border-color var(--dur); }
.faq details:hover { border-color: var(--line-strong); box-shadow: var(--glow-sm); }
.faq details[open] { box-shadow: var(--glow); border-color: var(--line-strong); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--tap); padding: var(--space-3) var(--space-5); font-weight: 600; font-size: var(--text-lg); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); font-size: var(--text-2xl); color: var(--leaf-deep); flex: none; width: 2rem; text-align: center; }
.faq details[open] summary::after { content: "−"; }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq .answer { padding: var(--space-4) var(--space-5) var(--space-5); color: var(--ink-dim); }
.faq .answer p + p { margin-top: var(--space-3); }

/* ---------- Pagination ---------- */
.pagination { display: flex; justify-content: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-6); list-style: none; padding: 0; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); padding: 0 var(--space-3); border-radius: var(--r-sm); border: 1px solid var(--line-strong); font-weight: 600; text-decoration: none; color: var(--ink); }
.pagination [aria-current] { background: var(--leaf-deep); color: #fff; border-color: var(--leaf-deep); }
.pagination a:hover { border-color: var(--leaf-deep); color: var(--leaf-deep); }

/* ---------- Prose (articles, guides, pages légales) ---------- */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: var(--text-2xl); margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-6); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: var(--space-2); }
.prose img { border-radius: var(--r-md); border: 1px solid var(--line); }
.prose figcaption { font-size: var(--text-sm); color: var(--ink-dim); margin-top: var(--space-2); }
.prose blockquote { margin: 0; padding: var(--space-4) var(--space-5); border-left: 4px solid var(--leaf); background: var(--surface-alt); border-radius: 0 var(--r-md) var(--r-md) 0; font-family: var(--font-display); font-size: var(--text-xl); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.prose th, .prose td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); }
.prose .callout { padding: var(--space-4) var(--space-5); border-radius: var(--r-md); background: var(--leaf-tint); border: 1px solid color-mix(in srgb, var(--leaf) 35%, transparent); box-shadow: var(--glow-sm); }
.prose .callout strong { display: block; margin-bottom: var(--space-2); }
.prose .callout-warn { background: var(--gold-tint); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); color: var(--ink-dim); font-size: var(--text-sm); }
.toc { padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-alt); box-shadow: var(--glow-xs); }
.toc strong { display: block; margin-bottom: var(--space-2); }
.toc ol { margin: 0; padding-left: 1.3rem; }
.toc li + li { margin-top: var(--space-1); }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.legal h2 { counter-increment: sec; }
.legal h2::before { content: counter(sec) ". "; color: var(--leaf-deep); }
.legal { counter-reset: sec; }
.legal .box { border: 2px solid var(--leaf-deep); border-radius: var(--r-md); padding: var(--space-4) var(--space-5); }

/* ---------- Bloc produit inséré dans un contenu ---------- */
.product-inline { display: grid; grid-template-columns: 7rem 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--glow-sm); }
.product-inline img { width: 7rem; height: 7rem; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-alt); }
.product-inline .name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); }
.product-inline .desc { color: var(--ink-dim); font-size: var(--text-sm); }

/* ---------- Chronologie de commande ---------- */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-3); position: relative; padding-bottom: var(--space-4); }
.timeline li::before { content: ""; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 3px solid var(--line-strong); background: var(--surface); margin-top: .2rem; justify-self: center; }
.timeline li::after { content: ""; position: absolute; left: .93rem; top: 1.6rem; bottom: 0; width: 3px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline li.done::before { background: var(--leaf-deep); border-color: var(--leaf-deep); }
.timeline li.current::before { border-color: var(--leaf-deep); background: var(--leaf-tint); }
.timeline li.done::after { background: var(--leaf-deep); }
.timeline strong { display: block; }
.timeline span { color: var(--ink-dim); font-size: var(--text-sm); }
.status { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--text-sm); font-weight: 700; padding: .3rem .75rem; border-radius: var(--r-pill); background: var(--leaf-tint); color: var(--leaf-deep); }
.status.neutral { background: var(--surface-alt); color: var(--ink-dim); }
.status.warn { background: var(--gold-tint); color: #6f4f10; }

/* ---------- Bloc « Besoin d'aide ? » ---------- */
.help-block { padding: var(--space-5); border-radius: var(--r-md); background: var(--surface-alt); border: 1px solid var(--line); box-shadow: var(--glow-xs); }
.help-block h3 { font-family: var(--font-text); font-size: var(--text-base); margin-bottom: var(--space-2); }
.help-block .tel { display: block; font-size: var(--text-xl); font-weight: 700; color: var(--leaf-deep); text-decoration: none; overflow-wrap: anywhere; }
.help-block p { color: var(--ink-dim); font-size: var(--text-sm); }
.help-block .btn { margin-top: var(--space-3); }

/* ---------- Réassurance en liste ---------- */
.reassure { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.reassure li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); color: var(--ink-dim); }
.reassure svg { color: var(--leaf); flex: none; margin-top: .2rem; }
.reassure strong { color: var(--ink); }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: var(--space-7) var(--space-5); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--glow-xs); }
.empty h2 { margin-bottom: var(--space-3); }
.empty p { color: var(--ink-dim); max-width: 44ch; margin-inline: auto; }
.empty .btn { margin-top: var(--space-5); }

/* ---------- Bandeau cookies (démonstration) ---------- */
.cookie-banner { position: fixed; inset: auto var(--gutter) var(--gutter); z-index: 60; max-width: 44rem; margin-inline: auto; background: var(--surface); border: 2px solid var(--leaf-deep); border-radius: var(--r-lg); padding: var(--space-5); box-shadow: var(--glow-band); }
.cookie-banner[hidden] { display: none; }
.cookie-banner .btn-row { margin-top: var(--space-4); }
.cookie-banner .btn { flex: 1 1 10rem; }

/* ---------- Responsive ---------- */
@media (max-width: 55em) {
  .with-aside, .with-aside.left { grid-template-columns: 1fr; }
  .sticky { position: static; }
  .page-hero { grid-template-columns: 1fr; }
  .page-hero .media { order: -1; }
  .form-grid { grid-template-columns: 1fr; }
  .product-inline { grid-template-columns: 5rem 1fr; }
  .product-inline img { width: 5rem; height: 5rem; }
  .product-inline .btn { grid-column: 1 / -1; }
}

/* Liste de resultats : deplacee depuis catalogue.css le 12/09/2026, le calque
   de recherche est present sur toutes les pages. */
.result-group h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
.result-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.result-list a { display: block; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--r-md); text-decoration: none; color: var(--ink); }
.result-list a { box-shadow: var(--glow-xs); transition: border-color var(--dur), box-shadow var(--dur); }
.result-list a:hover { border-color: var(--leaf); box-shadow: var(--glow); }
.result-list strong { display: block; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.result-list span { color: var(--ink-dim); font-size: var(--text-sm); }
.result-list mark { background: var(--gold-tint); color: inherit; }

/* ==========================================================================
   Recherche dynamique (demande David, 12/09/2026)
   ========================================================================== */
.recherche-calque {
  width: min(52rem, 94vw);
  max-height: 84vh;
  margin: 6vh auto auto;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--glow-lg);
  overflow: hidden;
}
.recherche-calque::backdrop { background: rgba(30, 42, 23, .38); backdrop-filter: blur(2px); }
.recherche-calque-inner { display: flex; flex-direction: column; max-height: 84vh; }
.recherche-barre {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.recherche-barre svg { color: var(--leaf-deep); flex: none; }
.recherche-barre .input { flex: 1; border: 0; font-size: var(--text-lg); padding-inline: 0; }
.recherche-barre .input:focus { outline: none; box-shadow: none; }
.recherche-calque [data-compteur] { padding: var(--space-3) var(--space-5) 0; margin: 0; }
.recherche-resultats { overflow-y: auto; padding: var(--space-3) var(--space-5) var(--space-4); }
.recherche-calque .result-group + .result-group { margin-top: var(--space-4); }
.recherche-calque .result-group h2 { font-size: var(--text-base); font-family: var(--font-text); color: var(--ink-dim); }

.recherche-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line); background: var(--surface-alt); }
.recherche-suggestions a {
  display: inline-flex; align-items: center; min-height: var(--tap-sm);
  padding: 0 var(--space-4); border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface);
  font-size: var(--text-sm); font-weight: 600; color: var(--ink); text-decoration: none;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.recherche-suggestions a:hover { border-color: var(--leaf-deep); background: var(--leaf-tint); color: var(--leaf-deep); }

.recherche-vide { padding: var(--space-5); border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface-alt); }
#resultats mark, .recherche-resultats mark { background: var(--leaf-tint); color: var(--leaf-deep); border-radius: 3px; padding: 0 .15em; }

@media (max-width: 40em) {
  .recherche-calque { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .recherche-calque-inner { max-height: 100dvh; height: 100dvh; }
}

/* Photos d'ambiance reprises de la mediatheque de l'ancien site */
.figure-large {
  margin: var(--space-6) 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--glow);
}
.figure-large picture, .figure-large img { display: block; width: 100%; height: auto; }
.figure-large figcaption {
  padding: var(--space-3) var(--space-5);
  background: var(--surface-alt);
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--ink-dim);
}

/* ==========================================================================
   Bandeau cookies. Refuser est aussi visible qu'accepter : meme classe de
   bouton, meme taille, meme couleur (recommandation CNIL).
   ========================================================================== */
.cookie-bandeau {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 90;
  background: var(--surface);
  border-top: 2px solid var(--leaf-deep);
  box-shadow: var(--glow-lg);
  animation: cookie-entre 360ms var(--ease) both;
}
@keyframes cookie-entre { from { transform: translateY(100%); } to { transform: none; } }
.cookie-inner {
  max-width: 78rem;
  margin-inline: auto;
  padding: var(--space-5);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: center;
}
.cookie-texte h2 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.cookie-texte p { font-size: var(--text-sm); color: var(--ink-dim); max-width: 52rem; }
.cookie-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.cookie-actions .btn { min-width: 11rem; }
.cookie-detail {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.cookie-detail .check span { font-size: var(--text-sm); }

@media (max-width: 55em) {
  .cookie-inner { grid-template-columns: minmax(0, 1fr); }
  .cookie-actions .btn { flex: 1 1 12rem; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .cookie-bandeau { animation: none; } }
html[data-motion="reduced"] .cookie-bandeau { animation: none; }

/* ==========================================================================
   Chapeau de page de collection : titre plus mesure, visuel plus petit, et
   surtout les produits plus haut dans la page (demande David, 12/09/2026).
   ========================================================================== */
/* Les deux colonnes sont bornees a partir de 55 em. Sans cette borne, cette
   regle ecrite plus bas annulait « grid-template-columns: 1fr » du bloc
   @media situe plus haut : sur un telephone, le chapeau restait en deux
   colonnes de 193 et 116 px, et le bouton « Voir les trois inhalateurs » ne
   tenait pas dans la sienne. Meme piege que dans produit.css. */
.page-hero { padding-block: var(--space-5) var(--space-6); gap: var(--space-6); }
@media (min-width: 55.01em) {
  .page-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  .page-hero .media { margin-left: auto; }
}
.page-hero h1 { font-size: var(--text-3xl); line-height: 1.15; max-width: 22ch; }
.page-hero .lead { font-size: var(--text-lg); max-width: 54ch; }
.page-hero .media { aspect-ratio: 5 / 4; max-width: min(24rem, 100%); }

@media (max-width: 55em) {
  .page-hero { gap: var(--space-4); padding-block: var(--space-4) var(--space-5); }
  .page-hero h1 { font-size: var(--text-2xl); max-width: none; }
  /* min() : 22 rem valent 352 px, soit plus que la colonne d'un telephone. */
  .page-hero .media { max-width: min(22rem, 100%); margin-inline: auto; }
}

/* Vignette dans les résultats de recherche : on reconnaît le produit d'un
   coup d'œil, sans lire le titre. */
.result-list a.avec-vignette {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
}
.result-vignette {
  width: 4rem; height: 4rem;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--leaf-tint);
  border: 1px solid var(--line);
}
.result-texte { display: block; min-width: 0; }
.result-texte > span { display: block; }