/* ==========================================================================
   Neosent - Styles globaux
   Version 17.16 - 11/10/2026 (v17.22 : trois livraisons en boutons sur 3 colonnes (fond vert foncé pour le choix), goutte d'attente 20 % plus petite ; v17.21 : goutte animée d'attente (tout le site), zone de livraison en deux boutons sur la page de paiement, cartes carrées de « merci » ; v17.20 : page de paiement du site (paiement.html) ; v17.19 : filtres collés juste sous la ligne de la croix, pastilles à 6 px du bord ; v17.18 : coins du menu 6 px, croix à 6 px ; barre des filtres sans bande blanche, plus transparente, pastilles plus petites ; v17.17 : encadré du menu sans bordure, coins 8 px, croix écartées de 12 px ; badges d'état aux couleurs de la gestion ; message du lieu de remise en rouge ; v17.16 : menu en encadré blanc flottant à la Stripe (filets en croix dégradés), lieu de remise dans le panier, flèche des boutons <button> ; v17.15 : page de rétractation et formulaire « être prévenu », polices hébergées sur le site ; v17.14 : frise fine sur 10 dates, apparitions rapides, guillemets insécables, photos de Nos racines alignées ; v17.13 : frise de Nos racines contrastée, animée et cliquable ; v17.12 : piliers de l'accueil x 0,8, Engagements en cartes flottantes alternées + logos partenaires, ancres sous l'en-tête ; v17.11 : frise alternée de Nos racines, témoin Guerlain ; v17.10 : 5 promesses de l'accueil, 8 exigences d'Engagements en frises animées ; v17.9 : Engagements : trois engagements en bulles reliées par un fil, slogan en deux phrases ; v17.8 : anneau de la filière en miroir, titres coupés après la virgule, fil d'or mesuré à l'arrivée, Nos racines à 3 générations (traits dorés), frise en 2 rangées, encadré Guerlain, horaires et réseaux de Contact ; v17.7 : fils de la carte mentale raccordés et animés au survol, 4e génération et duo de Nos racines ; v17.6 : carte mentale de la Distillerie ; v17.5 : boucle de la filière en anneau ; v17.4 : « 1 procédé, 5 objectifs » animé ; v17.3 : séparations compactes sur toutes les pages, avant/après homogène ; v17.2 : pages Nos racines et Engagements ; v17.1 : boutons du haut harmonisés, avis sur 2 lignes et formulaire d'avis, Distillerie v1.1 (avant-après, 1 procédé 5 objectifs, boucle de relance) ; v17 : pages Contact et Distillerie, formulaires, fondus réutilisables ; v16.2 : profession dans les avis ; v16.1 : formulaires « Me prévenir » et tirage au sort ; v16 : lueur fluide (transform, plus petite, plus réactive) ; v15 : fondu continu sans ligne, lueur d'une seule couleur, Propriétés, survols vifs ; v14 : bulles douces, goutte libre, lueur adaptée au fond, fondus longs, fiche affinée ; v13 : fiche éditoriale, réassurance animée, Retrouvez-nous, WhatsApp, pied de page compact ; v12 : Boutique, panier)
   Deux inspirations, deux rôles (demande de Kassim) :
   - STRIPE = le squelette et le mouvement : filets de 1 px, dégradés vivants, animations précises,
     aucune ombre portée, une seule famille pour les titres (Inter Tight 300).
   - OEVRA  = l'atmosphère : lavis de vert sauge qui "respirent" sur les sections claires, coins doux
     (15 px sur photos et cartes, pilule fine sur les boutons), étiquettes en Space Grotesk, photo
     glissée dans un titre, indicateur vertical "Défiler", titres légers qui murmurent.
   Couleurs : vert forêt mat (biodiversité) et bleu marine (confiance) à parts égales, or du logo en
   touches, grain de papier léger sur les sections sombres. Aucune couleur étrangère au logo.
   v7 : retour aux boutons rectangulaires fins de la v5 (préférés par Kassim), plus de photo dans les titres,
   compatibilité élargie (Safari iPhone, Chrome/Samsung Android, Firefox, Edge : pas de propriété `translate`,
   repli `vh` avant `svh`). (v4, v5 et v6 archivées dans _sources/archives/)
   ========================================================================== */
/* Polices hébergées sur le site (10/10/2026) : plus aucune requête vers Google Fonts (l'adresse IP des visiteurs ne part plus chez Google).
   Inter Tight et Space Grotesk, licence libre SIL Open Font License 1.1 (voir assets/fonts/LICENCE.txt). Sous-ensembles latin et latin étendu. */
@font-face { font-family: 'Inter Tight'; font-style: italic; font-weight: 300 600; font-display: swap; src: url('../assets/fonts/inter-tight-italique-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter Tight'; font-style: italic; font-weight: 300 600; font-display: swap; src: url('../assets/fonts/inter-tight-italique-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('../assets/fonts/inter-tight-romain-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('../assets/fonts/inter-tight-romain-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('../assets/fonts/space-grotesk-romain-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('../assets/fonts/space-grotesk-romain-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


:root {
  /* encre et textes (dérivés du marine du logo) */
  --encre        : #060365;
  --texte        : #0f1342;
  --acier        : #4a5070;
  --ardoise      : #636a8c;
  --fumee        : #b4bccf;   /* mots "éteints" du récit */

  /* vert forêt mat */
  --foret        : #0e3b2e;
  --foret-profond: #0a2a21;
  --nuit         : #0b1d45;   /* bleu nuit adouci (piliers), remplace le marine pur jugé "cassant" */
  --action       : #0f4a36;
  --action-survol: #17674a;
  --mousse       : #c9dccd;
  --sauge-rgb    : 104, 138, 92;   /* vert sauge des lavis (inspiration Oevra), tiré du vert forêt */

  /* couleurs du logo (touches) */
  --marine       : #060365;
  --bleu-logo    : #2196f3;
  --vert-logo    : #3e9914;
  --or-logo      : #ffdc05;
  --or-mat       : #e9cf55;

  /* surfaces claires */
  --toile        : #ffffff;
  --brume        : #f3f6f2;
  --givre        : #dfe7e1;
  --lin          : #eef3ee;

  --police       : 'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --police-ui    : 'Space Grotesk', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --titre-hero   : clamp(32px, 3.4vw, 50px);   /* même taille pour le haut de page et l'appel final */
  --rayon        : 15px;      /* photos, cartes (Oevra) */
  --rayon-pilule : 999px;     /* étiquettes (Oevra) */
  --rayon-btn    : 4px;       /* boutons : rectangles fins de la v5, préférés par Kassim */
  --largeur      : 1240px;
  --gouttiere    : clamp(20px, 4vw, 40px);
  --entete-h     : 72px;
  --ressort      : cubic-bezier(.16, 1, .3, 1);
  --rebond       : cubic-bezier(.34, 1.56, .64, 1);
  --grain        : url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--toile);
  color: var(--texte);
  font-family: var(--police);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  font-feature-settings: "ss01" on, "tnum" on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
p, h1, h2, h3, figure { margin: 0; }
h1, h2, h3 { font-weight: 300; color: var(--encre); }
::selection { background: var(--mousse); color: var(--foret); }
:focus-visible { outline: 2px solid var(--bleu-logo); outline-offset: 3px; border-radius: 4px; }

.conteneur { width: min(100% - 2 * var(--gouttiere), var(--largeur)); margin-inline: auto; }

/* grain mat des sections sombres */
.grain { position: relative; isolation: isolate; }
.grain::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .07; pointer-events: none; }

/* lavis de sauge (Oevra) : un souffle de vert qui s'efface vers les bords, jamais un aplat */
.fond-sauge {
  background:
    radial-gradient(ellipse 70% 60% at 50% 38%, rgba(var(--sauge-rgb), .26) 0%, rgba(var(--sauge-rgb), .09) 52%, rgba(var(--sauge-rgb), 0) 100%),
    var(--brume);
}
.fond-aube {
  background:
    radial-gradient(ellipse 55% 60% at 12% 30%, rgba(var(--sauge-rgb), .24) 0%, rgba(var(--sauge-rgb), 0) 70%),
    radial-gradient(ellipse 50% 60% at 92% 75%, rgba(33, 150, 243, .12) 0%, rgba(33, 150, 243, 0) 70%),
    var(--brume);
}
.fond-foret { background: var(--foret); color: var(--lin); }
.fond-foret h2, .fond-foret h3, .fond-nuit h2, .fond-nuit h3 { color: #fff; }
.fond-foret .t-sous-titre, .fond-nuit .t-sous-titre { color: rgba(238, 243, 238, .72); }
.fond-foret .surtitre, .fond-nuit .surtitre { color: var(--or-mat); }

/* échelle typographique : titres plus petits (demande de Kassim), légers, qui murmurent */
.t-display   { font-size: var(--titre-hero); line-height: 1.08; letter-spacing: -0.03em; }
.t-titre-lg  { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.025em; }
.t-sous-titre{ font-size: clamp(16px, 1.35vw, 18px); line-height: 1.55; letter-spacing: -0.005em; color: var(--acier); }
.surtitre    { display: inline-flex; align-items: center; gap: 10px; font: 400 12px/1.3 var(--police-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--action); margin-bottom: 18px; }
.surtitre::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--or-logo); box-shadow: 0 0 0 3px rgba(255, 220, 5, .22); }

.section { padding: clamp(80px, 9vw, 128px) 0; position: relative; }

/* en-tête de section centré : étiquette, titre, phrase, lien */
.titre-section { max-width: 860px; margin: 0 auto clamp(44px, 5vw, 64px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.titre-section h2 { margin-bottom: 16px; }
.titre-section .lien-titre { margin-top: 24px; }
@media (min-width: 900px) { .une-ligne { white-space: nowrap; } }


/* ---------- boutons : rectangles fins de la v5 (préférés par Kassim), un seul bouton plein vert par zone ---------- */
.btn {
  --x: 0px; --y: 0px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px 15px;
  border-radius: var(--rayon-btn);
  border: 1px solid transparent;
  font: 400 14px/1 var(--police);
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transform: translate(var(--x), var(--y));
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn:active { transform: translate(var(--x), var(--y)) scale(.98); }
.btn[data-aimant] { transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .45s var(--ressort); }
.btn--plein { background: var(--action); color: #fff; }
.btn--plein:hover, .btn--plein:focus-visible { background: var(--action-survol); }
.btn--fantome { background: rgba(255, 255, 255, .55); color: var(--encre); border-color: var(--mousse); }
.btn--fantome:hover, .btn--fantome:focus-visible { background: #fff; border-color: var(--action); }
.btn--petit { padding: 10px 16px 11px; }

/* flèche : la tige apparaît et la pointe avance au survol */
.fleche { width: 10px; height: 10px; flex-shrink: 0; overflow: visible; }
.fleche path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fleche__tige { opacity: 0; transition: opacity .2s ease; }
.fleche__pointe { transition: transform .25s var(--ressort); }
a:hover .fleche__tige, a:focus-visible .fleche__tige, button:hover .fleche__tige, button:focus-visible .fleche__tige { opacity: 1; }
a:hover .fleche__pointe, a:focus-visible .fleche__pointe, button:hover .fleche__pointe, button:focus-visible .fleche__pointe { transform: translateX(3px); }

/* lien sous un titre : soulignement qui se dessine + rond qui se remplit */
.lien-titre { display: inline-flex; align-items: center; gap: 12px; font: 400 13px/1.2 var(--police-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--encre); }
.lien-titre__texte { background: linear-gradient(currentColor, currentColor) left bottom / 0% 1px no-repeat, linear-gradient(rgba(6,3,101,.22), rgba(6,3,101,.22)) left bottom / 100% 1px no-repeat; padding-bottom: 4px; transition: background-size .5s var(--ressort); }
.lien-titre__rond { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(6,3,101,.25); display: grid; place-items: center; color: var(--action); transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .5s var(--rebond); }
.lien-titre:hover .lien-titre__texte, .lien-titre:focus-visible .lien-titre__texte { background-size: 100% 1px, 100% 1px; }
.lien-titre:hover .lien-titre__rond, .lien-titre:focus-visible .lien-titre__rond { background: var(--action); border-color: var(--action); color: #fff; transform: rotate(-45deg); }
.fond-foret .lien-titre, .fond-nuit .lien-titre { color: #fff; }
.fond-foret .lien-titre__rond, .fond-nuit .lien-titre__rond { border-color: rgba(255,255,255,.3); color: var(--or-mat); }
.fond-foret .lien-titre__texte, .fond-nuit .lien-titre__texte { background: linear-gradient(currentColor, currentColor) left bottom / 0% 1px no-repeat, linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.25)) left bottom / 100% 1px no-repeat; }
.fond-foret .lien-titre:hover .lien-titre__rond, .fond-nuit .lien-titre:hover .lien-titre__rond { background: var(--or-mat); border-color: var(--or-mat); color: var(--foret); }

/* étiquette "Objectif visé" */
.statut { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 4px 11px; border-radius: var(--rayon-pilule); font: 400 11px/1.3 var(--police-ui); letter-spacing: .08em; text-transform: uppercase; border: 1px solid rgba(233, 207, 85, .45); color: var(--or-mat); }

/* ---------- en-tête ---------- */
.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--entete-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color .35s ease, border-color .35s ease;
}
/* Pas de backdrop-filter sur l'en-tête FIXE : certains moteurs de rendu sans accélération
   graphique (dont l'aperçu de Claude Code) n'affichent alors plus le reste de la page. */
.entete--givre { background: rgba(255, 255, 255, .96); border-bottom-color: var(--givre); }
.entete__barre { display: flex; align-items: center; gap: 36px; }

.logo-lien { display: inline-flex; flex-shrink: 0; position: relative; }
/* Le dessin du logo est plus haut que ses lettres : on le remonte de 17 % de sa hauteur
   pour que la ligne des lettres soit centrée sur celle du menu (validé par Kassim). */
.logo-anime { height: 30px; width: auto; overflow: visible; transform: translateY(-17%); transition: filter .5s ease; }
.logo-lien::before {
  content: ""; position: absolute; left: -18px; right: -18px; top: 50%; height: 56px;
  margin-top: -35px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(33, 150, 243, .2), rgba(62, 153, 20, .1) 55%, rgba(255, 255, 255, 0));
  opacity: 0; transform: scale(.7);
  transition: opacity .45s ease, transform .6s var(--ressort);
  pointer-events: none;
}
.logo-lien:hover::before, .logo-lien:focus-visible::before { opacity: 1; transform: none; }
.logo-lien:hover .logo-anime, .logo-lien:focus-visible .logo-anime { filter: drop-shadow(0 6px 10px rgba(6, 3, 101, .22)); }
.logo-anime__bulle, .logo-anime__feuille { transform-box: fill-box; }
.logo-anime__bulle { transform-origin: 50% 50%; transition: transform .6s var(--rebond), opacity .4s ease; }
.logo-anime__feuille { transform-origin: 50% 100%; transition: transform .7s var(--rebond); }
.logo-lien:hover .logo-anime__bulle, .logo-lien:focus-visible .logo-anime__bulle { transform: translateY(-120px) scale(1.4); }
.logo-lien:hover .logo-anime__bulle:nth-of-type(2), .logo-lien:focus-visible .logo-anime__bulle:nth-of-type(2) { transition-delay: .05s; }
.logo-lien:hover .logo-anime__bulle:nth-of-type(3), .logo-lien:focus-visible .logo-anime__bulle:nth-of-type(3) { transition-delay: .1s; }
.logo-lien:hover .logo-anime__feuille, .logo-lien:focus-visible .logo-anime__feuille { transform: rotate(-5deg); }

.nav { position: relative; display: flex; align-items: center; gap: 4px; margin-right: auto; }
/* menu : apparence de la v5, cohérente avec les boutons (Inter Tight 14 px, surlignage rectangulaire fin) */
.nav a { position: relative; z-index: 1; display: block; padding: 9px 12px; font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.01em; color: var(--texte); border-radius: var(--rayon-btn); transition: color .2s ease; }
.nav a[aria-current="page"] { color: var(--action); }
.nav__surligne {
  position: absolute; z-index: 0; top: 0; left: 0;
  height: 36px; width: 0;               /* hauteur et position recalculées sur le lien survolé (js/main.js) */
  border-radius: var(--rayon-btn);
  background: rgba(255, 255, 255, .6);
  opacity: 0; pointer-events: none;
  transition: transform .45s var(--ressort), width .45s var(--ressort), opacity .25s ease;
}
.entete--givre .nav__surligne { background: var(--brume); }
.entete__actions { display: flex; align-items: center; gap: 8px; }

.nav-bascule { display: none; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; padding: 0; position: relative; margin-left: auto; }
.nav-bascule span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--encre); border-radius: 2px; transition: transform .3s var(--ressort), opacity .2s ease; }
.nav-bascule span:nth-child(1) { top: 14px; }
.nav-bascule span:nth-child(2) { top: 19.5px; }
.nav-bascule span:nth-child(3) { top: 25px; }
.nav-bascule[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-bascule[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-bascule[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.menu-mobile { display: none; }

/* ---------- menu téléphone : s'ouvre en cercle depuis le bouton, sur le dégradé vivant du haut de page,
   grands liens légers qui se lèvent un à un (même geste que le titre), slogan et réseaux en bas ---------- */
@media (max-width: 900px) {
  .nav, .entete__actions { display: none; }
  .nav-bascule { display: block; z-index: 2; }
  /* Fluidité (v11) : le cercle n'est plus une découpe animée (clip-path, recalculée à chaque image) mais un
     disque agrandi par « transform », que la carte graphique du téléphone anime sans effort. Le dégradé vivant
     ne s'installe qu'une fois l'écran couvert. */
  .menu-mobile {
    display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
    position: fixed; z-index: 99; inset: 0;
    padding: calc(var(--entete-h) + 28px) var(--gouttiere) calc(28px + env(safe-area-inset-bottom, 0px));
    overflow: hidden; isolation: isolate;
    visibility: hidden; pointer-events: none;
    transition: visibility 0s linear .65s;
  }
  .menu-mobile[data-ouvert="true"] { visibility: visible; pointer-events: auto; transition: none; }
  .menu-mobile__rond {
    position: absolute; z-index: -2; width: 240vmax; height: 240vmax;
    right: calc(var(--gouttiere) + 20px - 120vmax); top: calc(36px - 120vmax);
    border-radius: 50%;
    background:
      /* l'écran du téléphone correspond au quart bas-gauche autour du centre du disque (le bouton) */
      radial-gradient(circle at 36% 54%, rgba(255, 220, 5, .34), rgba(255, 220, 5, 0) 13%),
      radial-gradient(circle at 49% 60%, rgba(33, 150, 243, .42), rgba(33, 150, 243, 0) 14%),
      radial-gradient(circle at 44% 88%, rgba(14, 59, 46, .5), rgba(14, 59, 46, 0) 16%),
      #eef5f6;
    transform: scale(0); will-change: transform;
    transition: transform .6s cubic-bezier(.7, 0, .2, 1);
  }
  .menu-mobile[data-ouvert="true"] .menu-mobile__rond { transform: scale(1); transition-duration: .7s; }
  .menu-mobile__vie { position: absolute; inset: 0; z-index: -1; overflow: hidden; opacity: 0; transition: opacity .3s ease; }
  .menu-mobile[data-ouvert="true"] .menu-mobile__vie { opacity: 1; transition: opacity 1.2s ease .55s; }
  .menu-mobile__vie .tache { width: 110vmax; height: 110vmax; animation-play-state: paused; }
  .menu-mobile[data-ouvert="true"] .menu-mobile__vie .tache { animation-play-state: running; }
  .menu-mobile__vie .tache--or { left: -50vmax; top: -45vmax; }
  .menu-mobile__vie .tache--bleu { right: -60vmax; top: -30vmax; }
  .menu-mobile__vie .tache--foret { right: -55vmax; bottom: -65vmax; }
  .menu-mobile__nav { display: flex; flex-direction: column; }
  .menu-mobile__lien { position: relative; display: block; padding: 12px 0 14px; border-bottom: 1px solid rgba(6, 3, 101, .1); transition: padding-left .45s var(--ressort); }
  .menu-mobile__lien::before { content: ""; position: absolute; left: 0; top: 27px; width: 6px; height: 6px; border-radius: 50%; background: var(--or-logo); box-shadow: 0 0 0 3px rgba(255, 220, 5, .25); opacity: 0; transform: scale(.4); transition: opacity .3s ease, transform .45s var(--rebond); }
  .menu-mobile__lien:active, .menu-mobile__lien:focus-visible { padding-left: 18px; }
  .menu-mobile__lien:active::before, .menu-mobile__lien:focus-visible::before { opacity: 1; transform: none; }
  .menu-mobile__masque { display: block; overflow: hidden; padding-bottom: .08em; }
  .menu-mobile__mot { display: inline-block; font-size: clamp(28px, 8vw, 38px); font-weight: 300; line-height: 1.08; letter-spacing: -0.035em; color: var(--encre); transform: translateY(110%) rotate(6deg); transform-origin: 0 100%; transition: transform .9s var(--ressort); }
  .menu-mobile__detail { display: block; margin-top: 4px; font: 400 11px/1.4 var(--police-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--action); opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .6s var(--ressort); }
  .menu-mobile[data-ouvert="true"] .menu-mobile__mot { transform: none; transition-delay: calc(.28s + var(--i) * .07s); }
  .menu-mobile[data-ouvert="true"] .menu-mobile__detail { opacity: 1; transform: none; transition-delay: calc(.45s + var(--i) * .07s); }
  .menu-mobile__pied { display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateY(10px); transition: opacity .25s ease, transform .6s var(--ressort); }
  .menu-mobile[data-ouvert="true"] .menu-mobile__pied { opacity: 1; transform: none; transition-delay: .75s; }
  .menu-mobile__slogan { font-size: 18px; letter-spacing: -0.02em; color: var(--encre); }
  .menu-mobile__slogan em { font-style: italic; color: var(--action); }
  .menu-mobile__reseaux { display: flex; gap: 20px; }
  .menu-mobile__reseaux a { font: 400 12px/1.3 var(--police-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--acier); border-bottom: 1px solid rgba(6, 3, 101, .2); padding-bottom: 3px; }
  body.menu-ouvert { overflow: hidden; }
  body.menu-ouvert .entete { background: transparent; border-bottom-color: transparent; }
  .logo-anime { height: 26px; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .menu-mobile, .menu-mobile[data-ouvert="true"], .menu-mobile__rond, .menu-mobile__vie { transition: none !important; }
  .menu-mobile__mot, .menu-mobile__detail, .menu-mobile__pied { transform: none !important; opacity: 1 !important; transition: none !important; }
}

/* ---------- hero ---------- */
.hero { position: relative; min-height: min(100vh, 860px); min-height: min(100svh, 860px); padding-top: var(--entete-h); overflow: hidden; background: #eef5f6; }
.hero__ciel { position: absolute; inset: 0; overflow: hidden; }
/* v16 : le fond du haut de page suit la souris en se DÉPLAÇANT d'un bloc (transform, sans repeindre les grands dégradés) */
#hero-ciel { inset: -40px; transform: translate3d(calc(var(--px, 0) * 36px), calc(var(--py, 0) * 28px), 0); will-change: transform; }
.tache { position: absolute; border-radius: 50%; width: 62vmax; height: 62vmax; will-change: transform; }
.tache--or     { left: -14vmax; top: -24vmax; background: radial-gradient(circle, rgba(255,220,5,.5) 0%, rgba(255,220,5,0) 62%); animation: derive-a 19s ease-in-out infinite alternate; }
.tache--ciel   { left: 6vmax;   top: -4vmax;  background: radial-gradient(circle, rgba(163,214,255,.85) 0%, rgba(163,214,255,0) 60%); animation: derive-b 23s ease-in-out infinite alternate; }
.tache--bleu   { right: -8vmax; top: -22vmax; background: radial-gradient(circle, rgba(33,150,243,.75) 0%, rgba(33,150,243,0) 62%); animation: derive-c 17s ease-in-out infinite alternate; }
.tache--marine { right: -26vmax; top: -2vmax; background: radial-gradient(circle, rgba(6,3,101,.7) 0%, rgba(6,3,101,0) 64%); animation: derive-d 21s ease-in-out infinite alternate; }
.tache--foret  { right: 2vmax; bottom: -34vmax; width: 70vmax; height: 70vmax; background: radial-gradient(circle, rgba(14,59,46,.85) 0%, rgba(14,59,46,.45) 34%, rgba(14,59,46,0) 64%); animation: derive-e 25s ease-in-out infinite alternate; }
.tache--sauge  { left: -10vmax; bottom: -30vmax; width: 60vmax; height: 60vmax; background: radial-gradient(circle, rgba(var(--sauge-rgb),.5) 0%, rgba(var(--sauge-rgb),0) 62%); animation: derive-b 27s ease-in-out infinite alternate-reverse; }
@keyframes derive-a { to { transform: translate3d(9vmax, 6vmax, 0) scale(1.12); } }
@keyframes derive-b { to { transform: translate3d(-6vmax, 9vmax, 0) scale(.9); } }
@keyframes derive-c { to { transform: translate3d(-12vmax, 7vmax, 0) scale(1.15); } }
@keyframes derive-d { to { transform: translate3d(-8vmax, -6vmax, 0) scale(1.08); } }
@keyframes derive-e { to { transform: translate3d(-10vmax, -6vmax, 0) scale(1.12); } }

.hero__grille {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 48px;
  align-items: center;
  min-height: calc(min(100vh, 860px) - var(--entete-h));
  min-height: calc(min(100svh, 860px) - var(--entete-h));
  padding-block: 32px 80px;
}
/* logo L'Authentique Mahoraise® + titre sur deux lignes, et la goutte à leur droite, de même hauteur */
.hero__entete { --h-marque: 32px; --ecart-marque: 12px; display: flex; align-items: flex-start; gap: clamp(20px, 2.4vw, 36px); margin-bottom: 28px; }
.hero__titres { min-width: 0; }
.hero__marque { display: inline-block; margin-bottom: var(--ecart-marque); }
.hero__marque img { height: var(--h-marque); width: auto; transition: transform .6s var(--ressort); }
.hero__marque:hover img { transform: translateY(-2px); }
.hero h1 { font-size: var(--titre-hero); line-height: 1.08; letter-spacing: -0.03em; }
.hero h1 .ligne { display: block; }
@media (min-width: 901px) { .hero h1 .ligne { white-space: nowrap; } }
/* "Mayotte" en dégradé : le dégradé est porté par CHAQUE mot (et non par le titre), sinon il
   disparaît quand le mot est animé ou quand on fait défiler pendant l'animation */
.hero h1 em { font-style: italic; }
.em-degrade { font-style: italic; }
.hero h1 em .mot__in, .hero h1 em.sans-animation, .em-degrade {
  background: linear-gradient(100deg, var(--action) 0%, var(--bleu-logo) 60%, var(--marine) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .06em;
}

/* la goutte du logo, en grand : bulles qui s'envolent, feuille qui ondule, ombre douce au survol */
.goutte { position: relative; flex-shrink: 0; display: block; height: calc(var(--h-marque) + var(--ecart-marque) + 2 * 1.08 * var(--titre-hero)); }
.goutte__svg { height: 100%; width: auto; overflow: visible; transition: transform .7s var(--ressort), filter .6s ease; }
.goutte__ombre { position: absolute; left: 50%; bottom: -14px; width: 74%; height: 14px; margin-left: -37%; border-radius: 50%; background: radial-gradient(closest-side, rgba(6, 3, 101, .3), rgba(6, 3, 101, 0)); opacity: .3; transform: scale(.72); transition: opacity .6s ease, transform .7s var(--ressort); pointer-events: none; }
/* v14 : la bulle flotte grâce à son groupe ; au survol, la bulle elle-même monte en douceur (même geste que le logo de l'en-tête) */
.goutte__bulle-flotte { animation: bulle-vit 4.5s ease-in-out infinite; }
.goutte__bulle-flotte:nth-of-type(2) { animation-delay: -1.5s; }
.goutte__bulle-flotte:nth-of-type(3) { animation-delay: -3s; }
@keyframes bulle-vit { 50% { transform: translateY(-14px); } }
.goutte:hover .goutte__svg, .goutte:focus-visible .goutte__svg { transform: translateY(-8px); filter: drop-shadow(0 10px 14px rgba(6, 3, 101, .18)); }
.goutte:hover .goutte__ombre, .goutte:focus-visible .goutte__ombre { opacity: 1; transform: scale(1); }
.goutte:hover .logo-anime__bulle, .goutte:focus-visible .logo-anime__bulle { transform: translateY(-150px) scale(1.4); }
.goutte:hover .goutte__bulle-flotte:nth-of-type(2) .logo-anime__bulle { transition-delay: .05s; }
.goutte:hover .goutte__bulle-flotte:nth-of-type(3) .logo-anime__bulle { transition-delay: .1s; }
.goutte:hover .logo-anime__feuille, .goutte:focus-visible .logo-anime__feuille { transform: rotate(-6deg); }

.hero__sous-titre { max-width: 36em; margin-bottom: 34px; color: var(--texte); opacity: .84; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero .btn--fantome { background: rgba(255, 255, 255, .7); }

/* entrée du haut de page : état de départ posé par le petit script de <head> (classe .js-anim), pour que le titre
   ne s'affiche pas avant de s'animer ; si le script principal ne se charge pas, tout apparaît après 2,5 s */
.js-anim #hero-titre:not(.titre-decoupe), .js-anim [data-entree] { opacity: 0; animation: secours-entree 0s linear 2.5s forwards; }
.js-anim #hero-titre.titre-decoupe { opacity: 1; }
@keyframes secours-entree { to { opacity: 1; } }

/* titre découpé mot à mot par js/main.js */
.mot { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .14em; margin-bottom: -.14em; }
.mot__in { display: inline-block; transform: translateY(110%) rotate(8deg); transform-origin: 0 100%; opacity: 0; transition: transform 1.2s var(--ressort), opacity .9s ease; }   /* v17.28 : sans flou (fluidité) */
.titre-pret .mot__in { transform: none; opacity: 1; }

/* collage : grappe d'ylang + flacon tenu à la main, photos entières, filet fin (Oevra), reflet qui suit la souris */
.hero__visuel { position: relative; height: clamp(440px, 44vw, 600px); }
.collage { position: absolute; will-change: transform; }
.collage__cadre { position: relative; overflow: hidden; border-radius: var(--rayon); height: 100%; border: 1px solid rgba(6, 3, 101, .16); }
.collage img { width: 100%; height: 100%; object-fit: cover; }
.collage--fleurs { right: 0; top: 0; width: 91%; aspect-ratio: 1000 / 1301; }   /* +20 % (v9), photo entière */
.collage--flacon { left: 0; bottom: 0; width: 42%; aspect-ratio: 480 / 768; }
.collage--flacon .collage__cadre { animation: flotter 7s ease-in-out infinite; border-color: rgba(255, 255, 255, .7); }
@keyframes flotter { 50% { transform: translateY(-12px); } }
.reflet { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 60%); mix-blend-mode: soft-light; transition: opacity .5s ease; }
.collage:hover .reflet, .produit:hover .reflet { opacity: 1; }
.bulle-or { position: absolute; border-radius: 50%; background: var(--or-logo); box-shadow: 0 0 0 4px rgba(255, 220, 5, .18); opacity: 0; animation: monter 9s ease-in infinite; pointer-events: none; }
.bulle-or--1 { width: 10px; height: 10px; left: 30%; bottom: 58%; }
.bulle-or--2 { width: 15px; height: 15px; left: 24%; bottom: 66%; animation-delay: -3s; animation-duration: 11s; }
.bulle-or--3 { width: 8px; height: 8px; left: 35%; bottom: 72%; animation-delay: -6s; animation-duration: 10s; }
@keyframes monter { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 80% { opacity: .9; } 100% { transform: translateY(-200px) scale(1.1); opacity: 0; } }

/* le fond du haut de page suit subtilement la souris (inspiration Oevra) : lueur + taches en léger décalage */
/* lueur qui suit la souris PARTOUT sur la page (inspiration Oevra), concentrée, toujours DERRIÈRE le texte :
   un calque par section (ajouté par js/main.js), au-dessus du fond de la section mais sous son contenu */
.a-lueur { position: relative; isolation: isolate; }
/* v16 : le calque .lueur ne fait que découper (overflow) ; le disque .lueur__point est DÉPLACÉ par transform (aucun
   repeint). Couleur : une seule à la fois, choisie par js/main.js (attribut data-lueur sur <html>), avec un fondu. */
@property --lueur-1 { syntax: "<color>"; inherits: true; initial-value: rgba(62, 110, 70, .22); }
@property --lueur-2 { syntax: "<color>"; inherits: true; initial-value: rgba(104, 138, 92, .1); }
.lueur { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.lueur__point { position: absolute; top: 0; left: 0; width: 420px; height: 420px; border-radius: 50%; will-change: transform;
  --lueur-1: rgba(62, 110, 70, .22); --lueur-2: rgba(104, 138, 92, .1);
  background: radial-gradient(closest-side, var(--lueur-1), var(--lueur-2) 50%, rgba(255, 255, 255, 0) 100%);
  transition: --lueur-1 .5s ease, --lueur-2 .5s ease; }
html[data-lueur="sombre"] .lueur__point { --lueur-1: rgba(255, 220, 5, .12); --lueur-2: rgba(255, 255, 255, .05); }
html[data-lueur="aube"] .lueur__point { --lueur-1: rgba(255, 255, 255, .45); --lueur-2: rgba(255, 255, 255, .14); }
.a-lueur.lueur-on > .lueur { opacity: 1; }
.hero > .lueur, .appel > .lueur { z-index: 1; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .lueur { display: none; } }

/* goutte flottante : suit le défilement (pas la souris), laisse une traînée qui s'efface lentement,
   s'anime au survol comme la grande goutte et ramène en haut de page au clic */
.goutte--flottante { position: fixed; top: 0; right: max(14px, calc((100vw - var(--largeur)) / 4 - 14px)); z-index: 90; height: 46px; opacity: 0; pointer-events: none; transition: opacity .8s ease; will-change: transform; }
.goutte--flottante.visible { opacity: 1; pointer-events: auto; }
.goutte--flottante.goutte--libre { left: 0; right: auto; }   /* boutique : promenade sur tout l'écran */
.goutte--flottante .goutte__svg { filter: drop-shadow(0 0 8px rgba(255, 255, 255, .55)); }
.goutte--flottante:hover .goutte__svg { filter: drop-shadow(0 0 8px rgba(255, 255, 255, .55)) drop-shadow(0 10px 12px rgba(6, 3, 101, .22)); }
.goutte--flottante .goutte__ombre { bottom: -12px; }
.goutte__trainee { position: absolute; left: 50%; width: 1px; margin-left: -.5px; height: var(--l, 0px); opacity: 0; transition: opacity 1.6s ease; pointer-events: none; }
.goutte__trainee.active { opacity: 1; transition: opacity .25s ease; }
.goutte__trainee--haut { bottom: 100%; background: linear-gradient(to top, rgba(6, 3, 101, .5), rgba(6, 3, 101, 0)); }
.goutte__trainee--bas { top: 100%; background: linear-gradient(to bottom, rgba(6, 3, 101, .5), rgba(6, 3, 101, 0)); }
@media (max-width: 1199px), (hover: none), (prefers-reduced-motion: reduce) { .goutte--flottante { display: none; } }

/* indicateur vertical "Défiler" (Oevra) */
.defiler { position: absolute; left: calc(var(--gouttiere) / 2 - 6px); bottom: 48px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 12px; font: 400 10px/1 var(--police-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--encre); }
.defiler span { writing-mode: vertical-rl; transform: rotate(180deg); }
.defiler i { width: 1px; height: 48px; background: linear-gradient(var(--encre), rgba(6,3,101,0)); transform-origin: top; animation: defiler-trait 2.4s var(--ressort) infinite; }
@keyframes defiler-trait { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 1100px) { .defiler { display: none; } }

@media (max-width: 900px) {
  .hero { min-height: auto; }
  .hero__grille { grid-template-columns: 1fr; min-height: 0; padding-block: 28px 64px; gap: 44px; }
  .hero__visuel { height: 440px; max-width: 480px; }
  .tache { width: 150vw; height: 150vw; }
  .tache--or { left: -50vw; top: -60vw; }
  .tache--ciel { left: -10vw; top: 10vw; }
  .tache--bleu { right: -70vw; top: 20vw; }
  .tache--marine { right: -90vw; top: 60vw; }
  .tache--foret { right: -40vw; bottom: -60vw; }
}
@media (max-width: 600px) {
  /* téléphone : le titre passe sur plusieurs lignes, la goutte se place à droite du logo */
  :root { --titre-hero: clamp(26px, 7.8vw, 32px); }   /* le titre tient sur 2 lignes, même sur téléphone */
  .hero__entete { position: relative; display: block; }
  .goutte { position: absolute; right: 0; top: -16px; height: 60px; }
  .hero__marque { max-width: calc(100% - 64px); margin-bottom: 20px; }
  .hero__marque img { height: auto; width: 100%; max-width: 250px; }
}

/* ---------- bandeau défilant : fin et discret ---------- */
.defile { background: var(--foret); color: rgba(238, 243, 238, .86); overflow: hidden; padding: 9px 0; }
.defile__piste { display: flex; width: max-content; animation: defiler 60s linear infinite; }
.defile:hover .defile__piste { animation-play-state: paused; }
.defile__groupe { display: flex; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap; font: 400 11.5px/1.4 var(--police-ui); letter-spacing: .22em; text-transform: uppercase; }
.defile__groupe em { font-style: normal; color: var(--or-mat); }
.defile__point { width: 4px; height: 4px; border-radius: 50%; background: var(--or-logo); flex-shrink: 0; }
@keyframes defiler { to { transform: translateX(-50%); } }

/* ---------- constat : photo pleine largeur, entière (sans zoom ni voile), fondu vers la suite ---------- */
.constat { position: relative; background: var(--foret); color: var(--lin); overflow: hidden; }
.constat__scene { display: grid; }
.constat__scene > * { grid-area: 1 / 1; }
.constat__photo { position: relative; }
.constat__photo img { width: 100%; height: auto; }
.constat__photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(180deg, rgba(14, 59, 46, 0) 0%, var(--foret) 100%); }
/* dégradé de séparation en haut (prolonge le bandeau vert) : il porte aussi le titre, sans voiler la photo */
.constat__photo::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 58%; z-index: 1; background: linear-gradient(180deg, var(--foret) 0%, rgba(14, 59, 46, .72) 30%, rgba(14, 59, 46, 0) 100%); }
.constat__entete { align-self: start; padding-top: clamp(40px, 6vw, 88px); position: relative; z-index: 1; }
.constat .surtitre { color: #fff; }
.constat__titre { max-width: 1000px; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.15; letter-spacing: -0.025em; color: #fff; text-shadow: 0 2px 22px rgba(0, 0, 0, .35); }
.constat__chiffre { color: var(--or-mat); white-space: nowrap; }
.constat__titre .ligne { display: block; }
@media (min-width: 1000px) { .constat__titre .ligne { white-space: nowrap; } }
.constat sup { line-height: 0; font-size: .55em; }
.constat__suite { padding: 8px 0 clamp(56px, 7vw, 96px); }
.constat__faits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 64px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.16); margin-bottom: 36px; }
.constat__faits + .constat__faits { border-top: 0; padding-top: 0; }
.fait__pays { display: block; font: 400 12px/1.3 var(--police-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--or-mat); margin-bottom: 10px; }
.fait strong { display: block; font-weight: 300; font-size: clamp(32px, 3.2vw, 44px); line-height: 1.05; letter-spacing: -0.03em; color: #fff; margin-bottom: 8px; }
.fait p { font-size: 16px; line-height: 1.5; color: rgba(238,243,238,.8); max-width: 30em; }
.constat__conclusion { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.4; color: #fff; max-width: 34em; }
@media (max-width: 700px) { .br-bureau { display: none; } }   /* retour à la ligne réservé à l'ordinateur */
.constat__sources { margin-top: 24px; font: 400 11px/1.4 var(--police-ui); letter-spacing: .04em; color: rgba(238,243,238,.55); }
@media (max-width: 800px) {
  .constat__scene { display: block; }
  .constat__entete { padding-top: 32px; }
  .constat__titre { text-shadow: none; }
  .constat__faits { grid-template-columns: 1fr; }
}

/* ---------- chiffres : trois objectifs sur une ligne, l'héritage centré dessous ---------- */
.chiffres-section { padding-top: clamp(32px, 4vw, 56px); }
.chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 56px); }
.chiffre { position: relative; padding: 36px 0 44px; }
.chiffre::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255,255,255,.14); }
.chiffre::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--or-mat); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ressort) .2s; }
.chiffre.vu::after { transform: scaleX(1); }
.chiffre--large { grid-column: 1 / -1; text-align: center; display: flex; flex-direction: column; align-items: center; padding-top: 44px; }
.chiffre__fait { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font: 400 11px/1.3 var(--police-ui); letter-spacing: .14em; text-transform: uppercase; color: rgba(238, 243, 238, .6); }
.chiffre--large::after { transform-origin: center; }
.chiffre--large .chiffre__nombre { justify-content: center; }
.chiffre__nombre { display: flex; align-items: baseline; gap: .16em; font-size: clamp(44px, 4.4vw, 62px); line-height: 1; letter-spacing: -0.04em; color: #fff; margin-bottom: 18px; }
.chiffre__nombre small { font-size: .36em; letter-spacing: -0.01em; color: var(--or-mat); margin-left: .1em; }
.chiffre__titre { font-size: 19px; font-weight: 400; letter-spacing: -0.01em; color: #fff; margin-bottom: 10px; }
.chiffre__texte { font-size: 15.5px; line-height: 1.6; color: rgba(238,243,238,.74); max-width: 36em; }
@media (max-width: 900px) { .chiffres { grid-template-columns: 1fr; } .chiffre--large { text-align: left; align-items: flex-start; } .chiffre--large .chiffre__nombre { justify-content: flex-start; } }

/* rouleaux (compteur de type odomètre) */
.odo { display: inline-flex; }
.odo__col { display: inline-block; height: 1em; overflow: hidden; line-height: 1; }
.odo__ruban { display: flex; flex-direction: column; transform: translateY(0); transition: transform 2s var(--ressort); }
.odo__ruban span { height: 1em; }

/* ---------- produits : trois expressions, photos entières (sans recadrage ni zoom), plus petites ---------- */
.produits { display: grid; grid-template-columns: repeat(3, minmax(0, 272px)); justify-content: center; gap: clamp(28px, 5vw, 72px); }
.produit { position: relative; display: block; perspective: 900px; }
.produit__cadre { position: relative; display: flex; flex-direction: column; transform-style: preserve-3d; transition: transform .6s var(--ressort); }
.produit__media { position: relative; aspect-ratio: 5 / 8; overflow: hidden; border-radius: var(--rayon); border: 1px solid rgba(6, 3, 101, .12); background: var(--givre); }
.produit__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .6s ease; }
.produit__voile {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 14px;
  padding: 20px;
  background: linear-gradient(180deg, rgba(10,42,33,0) 30%, rgba(10,42,33,.88) 100%);
  color: #fff; opacity: 0;
  transition: opacity .45s ease;
}
.produit__voile p { font-size: 15px; line-height: 1.45; transform: translateY(14px); transition: transform .6s var(--ressort); }
.produit__voile-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; transform: translateY(14px); transition: transform .6s var(--ressort) .05s; }
.produit__voile-prix { font-size: 20px; letter-spacing: -0.02em; }
/* même bouton que « Découvrir nos huiles » du haut de page : rectangle fin vert, flèche qui s'allonge */
.produit__voile-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 11px; border-radius: var(--rayon-btn); border: 1px solid rgba(255, 255, 255, .22); background: var(--action); color: #fff; font: 400 14px/1 var(--police); letter-spacing: -0.01em; white-space: nowrap; transition: background-color .25s ease; }
.produit:hover .produit__voile-cta { background: var(--action-survol); }
.produit__legende { padding: 18px 2px 0; text-align: center; }
.produit__expression { display: block; font: 400 11px/1.3 var(--police-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--action); margin-bottom: 8px; }
.produit__nom { display: block; font-size: 16px; line-height: 1.3; color: var(--encre); letter-spacing: -0.015em; white-space: nowrap; }
.produit__prix { display: block; margin-top: 4px; font-size: 15px; color: var(--acier); }
.produit__badge { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 4px 10px; border-radius: var(--rayon-pilule); background: var(--toile); color: var(--encre); font: 400 11px/1.3 var(--police-ui); letter-spacing: .06em; text-transform: uppercase; }
.produit--epuise .produit__media img { filter: grayscale(.8); }
.produit__alerte { padding: 12px 0 0; text-align: center; }
.produit__alerte p { font-size: 14px; color: var(--acier); margin-bottom: 12px; }
.produit__form { display: flex; gap: 8px; }
.produit__form input { flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid var(--givre); border-radius: var(--rayon-btn); font: 300 14px var(--police); color: var(--texte); background: var(--toile); }
.produit__form input:focus-visible { outline: 2px solid var(--action); outline-offset: 0; border-color: transparent; }
.produit__merci { font-size: 14px; color: var(--action); font-weight: 400; }
/* v16.1 : mention sous « Me prévenir » (RGPD : à quoi sert l'e-mail), qui devient le message d'erreur si l'envoi échoue */
.produit__alerte .produit__mention, .fiche__alerte .produit__mention { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--acier); opacity: .85; }
.produit__alerte .produit__mention--erreur, .fiche__alerte .produit__mention--erreur { color: #a4262c; opacity: 1; }
/* champ piège invisible (anti-robots) : jamais vu ni atteint au clavier par un humain */
.piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .produit:not(.produit--epuise):hover .produit__voile,
  .produit:not(.produit--epuise):focus-within .produit__voile { opacity: 1; }
  .produit:not(.produit--epuise):hover .produit__voile p,
  .produit:not(.produit--epuise):hover .produit__voile-pied,
  .produit:not(.produit--epuise):focus-within .produit__voile p,
  .produit:not(.produit--epuise):focus-within .produit__voile-pied { transform: none; }
}
@media (hover: none), (pointer: coarse) { .produit__voile { display: none; } }
@media (hover: hover) and (pointer: fine) { .produit .produit__prix { display: none; } }   /* sur ordinateur, le prix apparaît au survol */
@media (max-width: 900px) { .produits { grid-template-columns: repeat(auto-fit, minmax(0, 272px)); } }

/* ---------- l'ylang-ylang aux champs : photo pleine largeur, fondue dans le vert ---------- */
/* la photo et le récit partagent UN SEUL fond (.suite-aube) : aucune frontière visible entre eux */
.suite-aube {
  background:
    radial-gradient(ellipse 60% 30% at 10% 62%, rgba(var(--sauge-rgb), .22) 0%, rgba(var(--sauge-rgb), 0) 70%),
    radial-gradient(ellipse 50% 28% at 92% 86%, rgba(33, 150, 243, .11) 0%, rgba(33, 150, 243, 0) 70%),
    var(--brume);
}
.bandeau-photo { position: relative; padding-bottom: clamp(24px, 3vw, 40px); }
.bandeau-photo__cadre { position: relative; height: clamp(440px, 62vw, 880px); overflow: hidden;
  /* fondu long et progressif en haut et en bas : la photo naît du fond et y retourne, sans bord visible */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.08) 7%, rgba(0,0,0,.3) 14%, rgba(0,0,0,.65) 22%, #000 32%, #000 60%, rgba(0,0,0,.65) 72%, rgba(0,0,0,.3) 82%, rgba(0,0,0,.08) 91%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.08) 7%, rgba(0,0,0,.3) 14%, rgba(0,0,0,.65) 22%, #000 32%, #000 60%, rgba(0,0,0,.65) 72%, rgba(0,0,0,.3) 82%, rgba(0,0,0,.08) 91%, transparent 100%); }
.bandeau-photo__revele { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 0 0 0); }   /* l'ouverture animée, séparée du fondu (plus sûr sur tous les navigateurs) */
.bandeau-photo__cadre img { position: absolute; top: -6%; left: 0; width: 100%; height: 112%; object-fit: cover; }
.bandeau-photo__badge { position: absolute; left: 0; right: 0; bottom: 42%; width: -webkit-fit-content; width: fit-content; margin: 0 auto; z-index: 1; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: var(--rayon-pilule); background: rgba(10, 42, 33, .72); color: var(--lin); font: 400 12px/1.2 var(--police-ui); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.bandeau-photo__badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--or-logo); }
.bandeau-photo__texte { max-width: 640px; margin: -120px auto 0; padding: 0 var(--gouttiere); text-align: center; position: relative; z-index: 1; }
@media (max-width: 700px) { .bandeau-photo__texte { margin-top: -40px; } }
.bandeau-photo__texte strong { display: block; font-weight: 300; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -0.02em; color: var(--encre); margin-bottom: 14px; }
.bandeau-photo__texte p { font-size: 16px; line-height: 1.65; color: var(--acier); }

/* ---------- avis clients : un avis en grand, les autres en carrousel ---------- */
.avis { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(24px, 3vw, 40px); }   /* v17.1 : moins d'espace avant le récit */
.avis-une { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, .6fr); gap: clamp(32px, 5vw, 72px); align-items: center; max-width: 1180px; margin: 0 auto; }
.avis-une__texte { position: relative; padding-top: 36px; }
.avis-une__guillemet { position: absolute; top: -40px; left: -6px; font: 400 150px/1 Georgia, 'Times New Roman', serif; color: rgba(var(--sauge-rgb), .45); pointer-events: none; }   /* vrai guillemet typographique (ornement) */
.avis-une blockquote { margin: 0 0 28px; }
.avis-une blockquote p { font-size: clamp(17px, 1.55vw, 21px); line-height: 1.7; letter-spacing: -0.012em; color: var(--encre); text-wrap: pretty; }
.avis-une blockquote p + p { margin-top: 1.1em; }   /* avis longs : paragraphes bien aérés */
.avis__auteur { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.avis__ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.avis__ligne--meta { align-items: center; }
.avis__prenom { font-size: 16px; font-weight: 400; color: var(--encre); }
.avis__profession { font-size: 14px; font-style: italic; color: var(--acier); }
.avis__meta { font-size: 14px; color: var(--acier); }
.avis__source { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--rayon-pilule); border: 1px solid rgba(var(--sauge-rgb), .45); font: 400 11px/1.3 var(--police-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--action); }
.avis__source::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--vert-logo); }
.avis__exemple { display: inline-block; margin-top: 16px; padding: 4px 10px; border-radius: var(--rayon-pilule); background: #fff4c7; color: #6b5600; font: 400 11px/1.3 var(--police-ui); letter-spacing: .06em; text-transform: uppercase; }
.avis-une__produit { display: flex; flex-direction: column; gap: 10px; perspective: 900px; }
.avis-une__cadre { position: relative; border-radius: var(--rayon); overflow: hidden; aspect-ratio: 5 / 8; border: 1px solid rgba(6, 3, 101, .12); max-width: 220px; transition: transform .6s var(--ressort); }
.avis-une__produit:hover .reflet { opacity: 1; }
.avis-une__cadre img { width: 100%; height: 100%; object-fit: cover; transition: filter .5s ease; }
.avis-une__produit:hover .avis-une__cadre img { filter: saturate(1.1) brightness(1.04); }
.avis__etiquette { font: 400 11px/1.3 var(--police-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--action); }
.avis__produit-nom { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--encre); transition: color .25s ease; }
.avis-une__produit:hover .avis__produit-nom, .avis-une__produit:focus-visible .avis__produit-nom { color: var(--action-survol); }
.avis-carte__produit a { transition: color .25s ease; }
.avis-carte__produit a:hover { color: var(--action-survol); }
.avis__suite { margin-top: clamp(48px, 6vw, 80px); }
.avis__piste { display: grid; grid-auto-flow: column; grid-auto-columns: min(360px, 84%); justify-content: start; justify-content: safe center; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 2px 14px; scrollbar-width: none; }
.avis__piste::-webkit-scrollbar { display: none; }
.avis__piste:focus-visible { outline: 2px solid var(--bleu-logo); outline-offset: 4px; }
.avis-carte { scroll-snap-align: start; display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: var(--rayon); background: rgba(255, 255, 255, .62); border: 1px solid rgba(6, 3, 101, .1); transition: border-color .3s ease, transform .5s var(--ressort), background-color .3s ease; }
.avis-carte:hover { border-color: rgba(var(--sauge-rgb), .6); background: rgba(255, 255, 255, .85); transform: translateY(-4px); }
.avis-carte__guillemet { font: 400 60px/.8 Georgia, 'Times New Roman', serif; color: rgba(var(--sauge-rgb), .55); height: 28px; }
.avis-carte__texte { font-size: 17px; line-height: 1.55; color: var(--encre); flex: 1; }
.avis-carte__produit { font-size: 14px; color: var(--acier); border-top: 1px solid var(--givre); padding-top: 14px; }
.avis-carte__produit a { color: var(--action); }
.avis__commandes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.avis__fleche { padding: 10px 14px 11px; }
.avis__fleche[disabled] { opacity: .35; cursor: default; }
.avis__pied { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: clamp(40px, 5vw, 64px); text-align: center; }
.avis__mention { font-size: 13px; line-height: 1.5; color: var(--ardoise); max-width: 40em; }
button.lien-titre { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
.avis__form { max-width: 760px; margin: 28px auto 0; }
@media (max-width: 800px) {
  .avis-une { grid-template-columns: 1fr; }
  .avis-une__produit { flex-direction: row; align-items: center; }
  .avis-une__cadre { max-width: 110px; flex-shrink: 0; }
}

/* ---------- récit : la fleur à huit pétales ---------- */
.recit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.recit__media { position: relative; border-radius: var(--rayon); overflow: hidden; aspect-ratio: 4 / 3; clip-path: inset(0 0 0 0 round 15px); border: 1px solid rgba(6,3,101,.12); }
.recit__media img { width: 100%; height: 100%; object-fit: cover; }
.recit__media figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; border-radius: var(--rayon-pilule); background: rgba(255,255,255,.9); color: var(--encre); font: 400 11px/1.3 var(--police-ui); letter-spacing: .08em; text-transform: uppercase; }
.recit__texte-bloc h2 { margin-bottom: 24px; }
.recit__texte { font-size: clamp(17px, 1.45vw, 19px); line-height: 1.7; letter-spacing: -0.01em; color: var(--encre); max-width: 32em; }
.recit__texte + .recit__texte { margin-top: 1em; }
.recit__texte .mot-recit { color: var(--fumee); transition: color .4s ease; }
.recit__texte .mot-recit.allume { color: var(--encre); }
.recit__texte em { font-style: italic; }
.recit__pied { margin-top: 36px; display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 900px) { .recit { grid-template-columns: 1fr; } .recit__media { max-width: 560px; } }

/* ---------- du champ au nez : frise de cinq exigences ---------- */
.frise { --p: 0; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; padding-top: 60px; }
.frise__rail { position: absolute; top: 14px; left: 6px; right: 6px; height: 1px; background: rgba(255,255,255,.16); }
.frise__rail-plein { position: absolute; inset: 0; background: var(--or-mat); transform-origin: left center; transform: scaleX(var(--p)); }
.etape { position: relative; opacity: .35; transition: opacity .6s ease; display: flex; flex-direction: column; }
.etape.active { opacity: 1; }
.etape__point { position: absolute; top: -53px; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--foret); border: 1px solid rgba(255,255,255,.4); transition: background-color .3s ease, border-color .3s ease, transform .5s var(--rebond); }
.etape.active .etape__point { background: var(--or-logo); border-color: var(--or-logo); transform: scale(1.2); box-shadow: 0 0 0 5px rgba(255, 220, 5, .16); }
.etape__num { display: block; font: 400 12px/1 var(--police-ui); letter-spacing: .14em; color: var(--or-mat); margin-bottom: 14px; }
.etape__titre { font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; color: #fff; margin-bottom: 10px; }
.etape__engagement { font-size: 15px; line-height: 1.45; font-weight: 400; color: var(--lin); margin-bottom: 14px; min-height: 2.9em; }
.etape__texte { font-size: 14.5px; line-height: 1.62; color: rgba(238,243,238,.7); }
.etape .statut { align-self: flex-start; }
@media (min-width: 1101px) { .etape__titre { white-space: nowrap; } }
@media (max-width: 1100px) {
  .frise { grid-template-columns: 1fr; padding-top: 0; padding-left: 40px; gap: 44px; max-width: 620px; margin-inline: auto; }
  .frise__rail { top: 6px; bottom: 6px; left: 7px; right: auto; width: 1px; height: auto; }
  .frise__rail-plein { transform-origin: center top; transform: scaleY(var(--p)); }
  .etape__point { top: 2px; left: -40px; }
  .etape__engagement { min-height: 0; }
}

/* ---------- piliers : dégradé forêt -> nuit -> aube (plus de bleu "cassant") ---------- */
.fond-nuit {
  color: var(--lin);
  background:
    radial-gradient(ellipse 60% 40% at 80% 30%, rgba(33, 150, 243, .16), rgba(33, 150, 243, 0) 70%),
    radial-gradient(ellipse 50% 40% at 15% 55%, rgba(var(--sauge-rgb), .22), rgba(var(--sauge-rgb), 0) 70%),
    linear-gradient(180deg, var(--foret) 0%, #0c2c3c 16%, var(--nuit) 55%, #15295a 100%);
}
.piliers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); align-items: start; padding-bottom: 24px; }
.pilier-col:nth-child(2) { margin-top: 88px; }
.pilier-col:nth-child(3) { margin-top: 28px; }
.pilier { --x: 0px; --y: 0px; --r: 0deg; display: block; transform: translate(var(--x), var(--y)) rotate(var(--r)); transition: transform .7s var(--ressort); }
.pilier__flotte { position: relative; border-radius: var(--rayon); overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid rgba(255,255,255,.14); animation: flotter 8s ease-in-out infinite; }
.pilier-col:nth-child(2) .pilier__flotte { animation-duration: 9.5s; animation-delay: -3s; }
.pilier-col:nth-child(3) .pilier__flotte { animation-duration: 7.2s; animation-delay: -5s; }
.pilier__flotte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .6s ease; }
.pilier__corps { position: absolute; inset: auto 0 0 0; padding: 26px; background: linear-gradient(180deg, rgba(11,29,69,0) 0%, rgba(11,29,69,.55) 30%, rgba(8,20,48,.92) 100%); color: #fff; }
.pilier__num { display: block; font: 400 12px/1 var(--police-ui); letter-spacing: .14em; color: var(--or-mat); margin-bottom: 10px; }
.pilier__titre { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -0.02em; color: #fff; }
.pilier__texte { font-size: 15.5px; line-height: 1.55; color: rgba(255,255,255,.86); display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .6s var(--ressort), opacity .5s ease, margin .6s var(--ressort); }
.pilier__texte > span { overflow: hidden; min-height: 0; }
.pilier__lien { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font: 400 11px/1 var(--police-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--or-mat); opacity: 0; transform: translateY(8px); transition: opacity .4s ease .1s, transform .5s var(--ressort) .1s; }
.pilier:hover .pilier__texte, .pilier:focus-visible .pilier__texte { grid-template-rows: 1fr; opacity: 1; margin-top: 12px; }
.pilier:hover .pilier__lien, .pilier:focus-visible .pilier__lien { opacity: 1; transform: none; }
.pilier:hover .pilier__flotte img, .pilier:focus-visible .pilier__flotte img { filter: saturate(1.12) brightness(1.04); }
.piliers__pied { display: flex; justify-content: center; margin: 48px 0 0; padding-bottom: clamp(80px, 9vw, 128px); }
@media (hover: none), (pointer: coarse) {
  .pilier__texte { grid-template-rows: 1fr; opacity: 1; margin-top: 12px; }
  .pilier__lien { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
  .piliers { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; gap: 28px; }
  .pilier-col:nth-child(n) { margin-top: 0; }
}

/* ---------- appel final pleine largeur (l'aube) ---------- */
.appel { position: relative; overflow: hidden; background: #eef5f6; padding: clamp(56px, 6vw, 88px) 0 clamp(64px, 7vw, 100px); text-align: center; }   /* v13 : plus bas, pour voir l'appel et le pied de page ensemble */
.appel .tache--foret { left: -20vmax; right: auto; bottom: -40vmax; }
.appel .tache--marine { right: -30vmax; top: -10vmax; }
.appel__contenu { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.appel__logo { height: clamp(32px, 3.6vw, 44px); width: auto; margin-bottom: 22px; }
.appel h2 { max-width: 17em; margin-bottom: 16px; }
.appel .t-sous-titre { color: var(--texte); opacity: .8; margin-bottom: 28px; }
.appel__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ---------- pied de page ---------- */
.pied { background: var(--foret-profond); color: rgba(238,243,238,.7); padding: 44px 0 16px; }   /* v13 : plus compact */
.pied__grille { display: grid; grid-template-columns: 1.8fr repeat(4, minmax(0, 1fr)); gap: 32px; padding-bottom: 28px; }
/* logo du pied de page : même animation que celui du menu (bulles, feuille, halo, ombre au survol) */
.pied__logo { margin-bottom: 14px; }
.pied .logo-anime { height: 30px; transform: none; }
.pied .logo-lien::before { background: radial-gradient(closest-side, rgba(255, 255, 255, .16), rgba(62, 153, 20, .14) 55%, rgba(255, 255, 255, 0)); }
.pied .logo-lien:hover .logo-anime, .pied .logo-lien:focus-visible .logo-anime { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.pied__slogan { font-size: 18px; line-height: 1.3; letter-spacing: -0.02em; color: #fff; margin-bottom: 8px; }
@media (min-width: 400px) { .pied__slogan { white-space: nowrap; } }
.pied__slogan em { font-style: italic; color: var(--or-mat); }
.pied__baseline { font-size: 14px; line-height: 1.55; max-width: 24em; }
.pied h3 { font: 400 11px/1.3 var(--police-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--or-mat); margin-bottom: 12px; }
.pied ul { display: flex; flex-direction: column; gap: 4px; }
.pied ul a { display: inline-block; font-size: 14px; line-height: 1.5; transition: color .2s ease, transform .35s var(--ressort); }
.pied__horaires { display: block; font-size: 12px; color: rgba(238,243,238,.5); }
.pied ul a:hover, .pied ul a:focus-visible { color: #fff; transform: translateX(4px); }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); font: 400 11px/1.4 var(--police-ui); letter-spacing: .04em; }
@media (max-width: 1000px) { .pied__grille { grid-template-columns: 1fr 1fr; } .pied__grille > :first-child { grid-column: 1 / -1; } }

/* ---------- pages juridiques ---------- */
.legal { padding: calc(var(--entete-h) + 64px) 0 96px; }
.legal__contenu { max-width: 760px; margin-inline: auto; }
.legal h1 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 12px; }
.legal__maj { font: 400 12px/1.4 var(--police-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ardoise); margin-bottom: 28px; }
.legal__brouillon { border: 1px solid rgba(233, 207, 85, .8); background: #fffbe6; border-radius: var(--rayon); padding: 16px 20px; font-size: 15px; margin-bottom: 40px; }
.legal h2 { font-size: 22px; letter-spacing: -0.015em; margin: 40px 0 12px; }
.legal p, .legal li { font-size: 16px; line-height: 1.7; color: var(--texte); }
.legal p + p { margin-top: 12px; }
.legal ul { list-style: disc; padding-left: 22px; margin: 10px 0; }
.legal .a-completer { background: #fff1b8; padding: 0 4px; border-radius: 4px; }
.legal__contenu a { color: var(--action); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- apparitions au scroll ---------- */
/* v17.28 (13/10, saccades au défilement) : plus de flou (filter: blur) à l'apparition : fondu + glissement seulement, faits par la carte graphique */
[data-revele] { opacity: 0; transform: translateY(28px); }
[data-revele].revele { opacity: 1; transform: none; transition: opacity .9s var(--ressort), transform 1s var(--ressort); }

.saut { position: absolute; left: -999px; top: 8px; z-index: 200; padding: 10px 16px; background: var(--action); color: #fff; border-radius: var(--rayon-btn); }
.saut:focus { left: 8px; }

/* ---------- mouvement réduit : tout s'affiche, rien ne bouge ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }
  [data-revele] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .mot__in { transform: none !important; opacity: 1 !important; filter: none !important; }
  .recit__texte .mot-recit { color: var(--encre) !important; }
  .etape { opacity: 1 !important; }
  .frise { --p: 1 !important; }
  .chiffre::after { transform: scaleX(1) !important; }
  .pilier__texte { grid-template-rows: 1fr; opacity: 1; margin-top: 12px; }
}


/* ==========================================================================
   v12 — BOUTIQUE (produits.html), PANIER, FICHE PRODUIT
   Même charte que l'accueil : filets de 1 px, aucune ombre portée, coins de 15 px sur photos et cartes,
   pilules sur les petites étiquettes, boutons rectangles fins de 4 px, Space Grotesk en capitales.
   ========================================================================== */
[hidden] { display: none !important; }   /* un élément « caché » l'est toujours, quel que soit son style (cartes filtrées) */
.cache-visuel { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.a-completer { background: #fff1b8; padding: 0 4px; border-radius: 4px; }

/* ---------- prix : ancien prix barré + nouveau prix quand une remise est en cours ---------- */
.prix-barre { color: var(--ardoise); text-decoration-thickness: 1px; margin-right: 2px; font-size: .9em; }
.prix-final--remise { color: var(--action); }
.prix-des { font-size: .86em; color: var(--ardoise); }
.produit__voile .prix-barre { color: rgba(255, 255, 255, .6); }
.produit__voile .prix-final--remise { color: var(--or-mat); }
.produit__badge--remise { background: var(--or-logo); }

/* ---------- bouton panier de l'en-tête (toutes les pages) ---------- */
.panier-bouton { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; margin-left: -28px; padding: 0; border: 1px solid var(--mousse); border-radius: var(--rayon-btn); background: rgba(255, 255, 255, .55); color: var(--encre); cursor: pointer; transition: background-color .25s ease, border-color .25s ease, opacity .25s ease; }
.panier-bouton:hover, .panier-bouton:focus-visible { background: #fff; border-color: var(--action); }
.panier-bouton svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--rebond); }
.panier-bouton:hover svg { transform: translateY(-2px) rotate(-6deg); }
.panier-bouton__nb { position: absolute; top: -8px; right: -8px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--rayon-pilule); background: var(--or-logo); color: var(--encre); font: 400 11px/19px var(--police-ui); text-align: center; box-shadow: 0 0 0 2px var(--toile); }
.panier-bouton__nb.rebond { animation: rebond-nb .6s var(--rebond); }
@keyframes rebond-nb { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@media (max-width: 900px) {
  .panier-bouton { margin-left: auto; z-index: 2; }
  .panier-bouton + .nav-bascule { margin-left: 6px; }
  body.menu-ouvert .panier-bouton { opacity: 0; pointer-events: none; }
}

/* ---------- tiroirs (panier, fiche produit) : panneau qui glisse depuis la droite, fond vert voilé ---------- */
.tiroir { position: fixed; inset: 0; z-index: 150; visibility: hidden; pointer-events: none; transition: visibility 0s linear .65s; }
.tiroir[data-ouvert="true"] { visibility: visible; pointer-events: auto; transition: none; }
.tiroir.panier { z-index: 160; }
.tiroir__fond { position: absolute; inset: 0; background: rgba(10, 42, 33, .42); opacity: 0; transition: opacity .45s ease; }
.tiroir[data-ouvert="true"] .tiroir__fond { opacity: 1; }
.tiroir__panneau {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%);
  display: flex; flex-direction: column; overflow: hidden; outline: none;
  background: radial-gradient(ellipse 80% 40% at 15% 0%, rgba(var(--sauge-rgb), .18), rgba(var(--sauge-rgb), 0) 70%), var(--brume);
  border-left: 1px solid var(--givre);
  transform: translateX(100%); transition: transform .6s var(--ressort);
}
.tiroir[data-ouvert="true"] .tiroir__panneau { transform: none; }
.tiroir__fermer { position: relative; width: 40px; height: 40px; flex-shrink: 0; padding: 0; border: 1px solid var(--mousse); border-radius: var(--rayon-btn); background: rgba(255, 255, 255, .6); cursor: pointer; transition: background-color .25s ease, border-color .25s ease; }
.tiroir__fermer:hover, .tiroir__fermer:focus-visible { background: #fff; border-color: var(--action); }
.tiroir__fermer span { position: absolute; left: 11px; right: 11px; top: 50%; height: 1.5px; margin-top: -.75px; border-radius: 2px; background: var(--encre); transition: transform .45s var(--ressort); }
.tiroir__fermer span:first-child { transform: rotate(45deg); }
.tiroir__fermer span:last-child { transform: rotate(-45deg); }
.tiroir__fermer:hover span:first-child { transform: rotate(135deg); }
.tiroir__fermer:hover span:last-child { transform: rotate(45deg); }
body.tiroir-ouvert { overflow: hidden; }

/* sélecteur de quantité (panier, fiche) */
.quantite { display: inline-flex; align-items: center; border: 1px solid var(--mousse); border-radius: var(--rayon-btn); background: rgba(255, 255, 255, .7); }
.quantite button { width: 32px; height: 32px; padding: 0; border: 0; background: none; font: 300 18px/1 var(--police); color: var(--encre); cursor: pointer; transition: color .2s ease; }
.quantite button:hover:not(:disabled) { color: var(--action-survol); }
.quantite button:disabled { opacity: .3; cursor: default; }
.quantite span { min-width: 22px; text-align: center; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--encre); }
.quantite--grande button { width: 44px; height: 100%; min-height: 48px; }
.quantite--grande span { min-width: 26px; font-size: 16px; }

/* ---------- panier ---------- */
.panier__tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--givre); }
.panier__tete h2 { font-size: 22px; letter-spacing: -0.02em; }
.panier__corps { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 24px; }
.panier__lignes li + li { border-top: 1px solid var(--givre); }
.panier-ligne { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 18px 0; }
.panier-ligne--nouveau { animation: ligne-nouvelle 1.6s ease; }
@keyframes ligne-nouvelle { 0%, 30% { background: rgba(var(--sauge-rgb), .16); } 100% { background: rgba(var(--sauge-rgb), 0); } }
.panier-ligne__photo { position: relative; display: block; width: 64px; aspect-ratio: 5 / 8; overflow: hidden; border-radius: 8px; border: 1px solid rgba(6, 3, 101, .1); background: var(--givre); }
.panier-ligne__photo img { width: 100%; height: 100%; object-fit: cover; }
.panier-ligne__infos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.panier-ligne__nom { font-size: 15px; line-height: 1.3; color: var(--encre); transition: color .2s ease; }
.panier-ligne__nom:hover { color: var(--action-survol); }
.panier-ligne__meta { font-size: 13px; color: var(--ardoise); }
.panier-ligne__bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.panier-ligne__prix { font-size: 15px; color: var(--encre); font-variant-numeric: tabular-nums; }
.panier-ligne__retirer { align-self: flex-start; margin-top: 8px; padding: 0 0 2px; border: 0; border-bottom: 1px solid rgba(6, 3, 101, .2); background: none; font: 400 11px/1.3 var(--police-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ardoise); cursor: pointer; transition: color .2s ease, border-color .2s ease; }
.panier-ligne__retirer:hover { color: var(--action); border-color: var(--action); }
.panier__vide { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 32px 0; }
.panier__vide p { font-size: 18px; color: var(--encre); }
.panier__pied { padding: 20px 24px calc(20px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--givre); background: rgba(255, 255, 255, .5); }
.panier__pied:empty { display: none; }
.panier__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; color: var(--encre); }
.panier__total strong { font-weight: 400; font-size: 21px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.panier__lieu { display: grid; gap: 6px; margin: 14px 0 6px; font-size: 13px; color: var(--ardoise); }
.panier__lieu select { width: 100%; padding: 10px 12px; border: 1px solid var(--givre); border-radius: 4px; background: #fff; font: inherit; font-size: 15px; color: var(--encre); }
.panier__note { margin: 4px 0 16px; font-size: 13px; color: var(--ardoise); }
.panier__commander { width: 100%; justify-content: center; padding-block: 16px 17px; }
.panier__commander.en-cours { opacity: .7; cursor: progress; }
.panier__message { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--action); }
.panier__message:empty { display: none; }
.panier__securite, .fiche__securite { display: flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.45; color: var(--ardoise); }
.panier__securite { margin-top: 12px; }
.panier__securite svg, .fiche__securite svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: var(--action); stroke-width: 1.4; stroke-linejoin: round; }

/* ---------- boutique : haut de page compact, sur le fond vivant de l'accueil ---------- */
.boutique-haut { position: relative; overflow: hidden; background: #eef5f6; padding: calc(var(--entete-h) + clamp(44px, 6vw, 88px)) 0 clamp(64px, 7vw, 104px); text-align: center; }
.boutique-haut::after { content: ""; position: absolute; inset: auto 0 0 0; z-index: 0; height: 55%; background: linear-gradient(180deg, rgba(243, 246, 242, 0) 0%, rgba(243, 246, 242, .7) 55%, var(--brume) 100%); pointer-events: none; }
.boutique-haut > .lueur { z-index: 1; }
.boutique-haut__contenu { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
/* v13 : pas de marine ni de forêt derrière le titre (trait sombre, « Mayotte » peu lisible) ; les taches restent claires
   quelle que soit leur position dans leur lente dérive, donc le fond se ressemble d'un onglet à l'autre */
.boutique-haut .tache--bleu { opacity: .5; }
.boutique-haut .tache--or { opacity: .8; }
.boutique-haut__contenu::before { content: ""; position: absolute; inset: -40% -8%; z-index: -1; background: radial-gradient(closest-side, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)); pointer-events: none; }   /* halo clair derrière le titre */
.boutique-haut h1 { max-width: 16em; margin-bottom: 18px; }
.boutique-haut .t-sous-titre { max-width: 38em; color: var(--texte); opacity: .84; }

/* barre des filtres : reste sous l'en-tête pendant le défilement */
.boutique-barre { position: sticky; top: var(--entete-h); z-index: 60; background: rgba(243, 246, 242, .92); border-bottom: 1px solid var(--givre); }
/* v17.18 : quand la barre colle sous le menu, son fond remonte jusqu'en haut de l'écran (derrière l'encadré du menu) :
   plus d'espace vide où l'on voyait passer le haut de la page (la « bande blanche » qui apparaissait au défilement) */
.boutique-barre::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--entete-h); background: inherit; opacity: 0; pointer-events: none; }
.boutique-barre--collee::before { opacity: 1; }
.boutique-barre__contenu { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; }
.filtres { position: relative; display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.filtres::-webkit-scrollbar { display: none; }
.filtres__surligne { position: absolute; top: 0; left: 0; z-index: 0; width: 0; border-radius: var(--rayon-pilule); background: var(--action); pointer-events: none; transition: transform .55s var(--ressort), width .55s var(--ressort); }
.filtre { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 7px 13px; border: 1px solid var(--mousse); border-radius: var(--rayon-pilule); background: transparent; font: 400 11px/1.2 var(--police-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--encre); white-space: nowrap; cursor: pointer; transition: color .3s ease, border-color .3s ease; }
.filtre:hover { border-color: var(--action); }
.filtre[aria-pressed="true"] { color: #fff; border-color: transparent; }
.filtre__nb { font-size: 10px; opacity: .55; }
.tri { flex-shrink: 0; }
.tri select { -webkit-appearance: none; appearance: none; padding: 7px 32px 7px 13px; border: 1px solid var(--mousse); border-radius: var(--rayon-btn); background: rgba(255, 255, 255, .6) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2 3.5l3 3 3-3' fill='none' stroke='%23060365' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 12px center / 10px; font: 400 13.5px/1.2 var(--police); color: var(--encre); cursor: pointer; transition: border-color .25s ease, background-color .25s ease; }
.tri select:hover { border-color: var(--action); background-color: #fff; }

/* grille */
.boutique { padding-top: clamp(40px, 5vw, 64px); }
.boutique__intro { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 720px; margin: 0 auto clamp(36px, 4vw, 56px); text-align: center; }
.boutique__intro .t-sous-titre:empty { display: none; }
.boutique__compte { font: 400 11px/1.3 var(--police-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ardoise); }
.boutique-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 272px)); justify-content: center;   /* même format que l'accueil ; 1 ou 2 produits restent centrés */
  gap: clamp(44px, 5vw, 64px) clamp(28px, 5vw, 72px); }
.boutique__sans-js { text-align: center; color: var(--acier); }

/* carte de la boutique (même famille que les cartes de l'accueil) */
.produit--boutique { display: flex; flex-direction: column; }
.produit__visuel { position: relative; perspective: 900px; }
.produit__cadre-lien { display: block; }
.produit--boutique .produit__media img { transition: filter .6s ease, opacity .7s ease; }
.produit__img-survol { opacity: 0; }
.produit__visuel:hover .reflet { opacity: 1; }
.produit__badges { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--rayon-pilule); background: var(--toile); color: var(--encre); font: 400 11px/1.3 var(--police-ui); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.badge--remise { background: var(--or-logo); }
.badge--etiquette { background: var(--foret); color: #fff; }
.produit__ajout { position: absolute; left: 0; right: 0; bottom: 14px; width: 172px; margin-inline: auto; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px 13px; border: 1px solid rgba(255, 255, 255, .5); border-radius: var(--rayon-btn); background: rgba(255, 255, 255, .94); color: var(--encre); font: 400 14px/1 var(--police); letter-spacing: -0.01em; cursor: pointer; opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .5s var(--ressort), background-color .25s ease, color .25s ease, border-color .25s ease; }
.produit__visuel:hover .produit__ajout, .produit__ajout:focus-visible { opacity: 1; transform: none; }
.produit__ajout:hover, .produit__ajout.ajoute { background: var(--action); border-color: var(--action); color: #fff; }
.icone-plus { width: 11px; height: 11px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; transition: transform .45s var(--rebond); }
.produit__ajout:hover .icone-plus { transform: rotate(90deg); }
.produit--boutique .produit__voile { padding: 18px 18px 70px; justify-content: flex-end; }
.produit--boutique .produit__voile p { font-size: 14.5px; line-height: 1.45; text-align: center; }
@media (hover: hover) and (pointer: fine) {
  .produit__visuel:hover .produit__img-survol { opacity: 1; }
}
@media (hover: none), (pointer: coarse) {
  /* téléphone : petit bouton rond « + » toujours visible dans le coin de la photo */
  .produit__ajout { left: auto; right: 10px; bottom: 10px; width: 40px; height: 40px; margin: 0; padding: 0; border-radius: 50%; opacity: 1; transform: none; }
  .produit__ajout-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .produit__ajout .icone-plus { width: 13px; height: 13px; }
}
.produit--boutique .produit__legende { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 16px; }
.produit--boutique .produit__expression { margin-bottom: 6px; }
.produit--boutique .produit__nom { white-space: normal; text-wrap: balance; transition: color .25s ease; }
.produit--boutique .produit__nom:hover, .produit--boutique .produit__nom:focus-visible { color: var(--action-survol); }
.produit__meta { font-size: 13.5px; color: var(--ardoise); }
.produit.produit--boutique .produit__prix { display: block; margin-top: 6px; font-size: 16px; color: var(--encre); font-variant-numeric: tabular-nums; }
.produit__peu { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; color: var(--acier); }
.produit__peu::before, .point-stock { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--or-logo); box-shadow: 0 0 0 3px rgba(255, 220, 5, .25); flex-shrink: 0; }

/* photo pas encore prise : un lavis de sauge, jamais une case vide */
.photo-a-venir { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse 80% 60% at 50% 42%, rgba(var(--sauge-rgb), .3), rgba(var(--sauge-rgb), .06) 72%), var(--lin); }
.photo-a-venir span { display: inline-flex; align-items: center; gap: 8px; font: 400 11px/1.3 var(--police-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ardoise); }
.photo-a-venir span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--or-logo); }
.photo-a-venir--mini { position: absolute; }

@media (max-width: 600px) {
  /* téléphone : filtres et tri sur UNE ligne (la barre reste fine quand elle colle en haut) ;
     les pastilles défilent sous le doigt, jusqu'au bord gauche de l'écran */
  .boutique-barre__contenu { gap: 8px; padding-block: 9px; }
  .filtres { flex: 1; margin-left: calc(-1 * var(--gouttiere)); padding-left: var(--gouttiere);
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .filtre { padding: 7px 12px; font-size: 10.5px; }
  .tri select { max-width: 132px; padding: 8px 26px 8px 10px; background-position: right 9px center; font-size: 13px; }
  .boutique-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 14px; justify-content: stretch; }
  .produit--boutique .produit__nom { font-size: 15px; }
  .produit__meta { font-size: 12.5px; }
  .produit__badges { top: 8px; left: 8px; right: 8px; }
}

/* ---------- réassurance : six engagements numérotés, filet d'or qui se trace (v13) ---------- */
/* plus de longue bande claire au-dessus : un fondu court part du lavis de sauge */
/* RÈGLE (Kassim, v14-v15) : entre deux sections de couleurs différentes, jamais de bande claire ni de ligne visible.
   Le fondu suit UNE seule courbe douce (smoothstep) partagée entre les deux sections : 120 px dans le bas de la section
   du dessus, 120 px dans le haut de la suivante. La pente est la même des deux côtés de la jonction (sinon l'œil voit une ligne). */
.boutique.fond-sauge { padding-bottom: clamp(130px, 12vw, 160px);
  background:
    linear-gradient(180deg, rgba(243, 246, 242, 0) calc(100% - 120px), rgb(241, 245, 241) calc(100% - 108px), rgb(237, 241, 237) calc(100% - 96px), rgb(229, 235, 230) calc(100% - 84px), rgb(219, 227, 222) calc(100% - 72px), rgb(207, 217, 211) calc(100% - 60px), rgb(194, 206, 200) calc(100% - 48px), rgb(178, 193, 187) calc(100% - 36px), rgb(162, 180, 173) calc(100% - 24px), rgb(146, 166, 159) calc(100% - 12px), rgb(128, 152, 144) calc(100% - 0px)),
    radial-gradient(ellipse 70% 60% at 50% 38%, rgba(var(--sauge-rgb), .26) 0%, rgba(var(--sauge-rgb), .09) 52%, rgba(var(--sauge-rgb), 0) 100%),
    var(--brume); }
.rassurance-section {
  background: linear-gradient(180deg, rgb(128, 152, 144) 0px, rgb(111, 139, 129) 12px, rgb(95, 125, 115) 24px, rgb(79, 112, 101) 36px, rgb(63, 99, 88) 48px, rgb(50, 88, 77) 60px, rgb(38, 78, 66) 72px, rgb(28, 70, 58) 84px, rgb(20, 64, 51) 96px, rgb(16, 60, 47) 108px, rgb(14, 59, 46) 120px);
  color: var(--lin); padding-block: clamp(150px, 13vw, 180px) clamp(56px, 6vw, 88px);
}
.rassurance-section.grain::after { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 120px); mask-image: linear-gradient(180deg, transparent 0, #000 120px); }
.rassurance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) clamp(28px, 4vw, 56px); counter-reset: none; }
.rassurance__item { position: relative; padding: 26px 0 0; border-top: 1px solid rgba(255, 255, 255, .14); transition: transform .6s var(--ressort); }
.rassurance__item::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: var(--or-mat); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ressort); }
.rassurance__item.vu::before { transform: scaleX(1); }
.rassurance__num { display: block; font: 400 12px/1 var(--police-ui); letter-spacing: .14em; color: var(--or-mat); margin-bottom: 16px; opacity: 0; transform: translateY(8px); transition: opacity .6s ease .3s, transform .8s var(--ressort) .3s; }
.rassurance__item h3 { font-size: 20px; font-weight: 400; letter-spacing: -0.015em; color: #fff; margin-bottom: 10px; opacity: 0; transform: translateY(10px); transition: opacity .7s ease .4s, transform .9s var(--ressort) .4s; }
.rassurance__item p { font-size: 15px; line-height: 1.6; color: rgba(238, 243, 238, .74); max-width: 27em; opacity: 0; transform: translateY(10px); transition: opacity .7s ease .5s, transform .9s var(--ressort) .5s; }
.rassurance__item.vu .rassurance__num, .rassurance__item.vu h3, .rassurance__item.vu p { opacity: 1; transform: none; }
.rassurance__item:hover { transform: translateY(-4px); }
.rassurance__item a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }
.rassurance__lien { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font: 400 11px/1.2 var(--police-ui); letter-spacing: .1em; text-transform: uppercase; text-decoration: none !important; color: var(--or-mat) !important; }
@media (max-width: 900px) { .rassurance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .rassurance { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .rassurance__item::before, .rassurance__num, .rassurance__item h3, .rassurance__item p { transform: none !important; opacity: 1 !important; transition: none !important; } }

/* ---------- Retrouvez-nous : réseaux et rendez-vous, sur le dégradé forêt → nuit (comme les piliers de l'accueil) ---------- */
.retrouvez { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(56px, 6vw, 88px); }
.retrouvez__grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.reseaux-icones { display: flex; gap: 14px; padding-bottom: 24px; }
.reseau { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); color: #fff; transition: transform .3s var(--rebond), background-color .15s ease, border-color .15s ease, color .15s ease; }
.reseau svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.reseau svg .plein { fill: currentColor; stroke: none; }
.reseau:hover, .reseau:focus-visible { transform: translateY(-5px); background: var(--or-logo); border-color: var(--or-logo); color: var(--foret); }
.reseau__nom { position: absolute; top: calc(100% + 8px); left: -40px; right: -40px; text-align: center; font: 400 10.5px/1.2 var(--police-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--or-mat); opacity: 0; transform: translateY(-4px); transition: opacity .15s ease, transform .3s var(--ressort); pointer-events: none; }
.reseau:hover .reseau__nom, .reseau:focus-visible .reseau__nom { opacity: 1; transform: none; }
.retrouvez__h3 { font: 400 12px/1.3 var(--police-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--or-mat); margin-bottom: 14px; }
.rendez-vous { display: flex; flex-direction: column; gap: 12px; }
.rdv { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 20px; padding: 20px; border-radius: var(--rayon); border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); transition: border-color .3s ease, background-color .3s ease, transform .6s var(--ressort); }
.rdv:hover { border-color: rgba(233, 207, 85, .5); background: rgba(255, 255, 255, .07); transform: translateY(-3px); }
.rdv__date { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 6px; border-radius: 10px; background: rgba(255, 255, 255, .06); text-align: center; }
.rdv__jour { font-size: 36px; font-weight: 300; line-height: 1; letter-spacing: -0.03em; color: #fff; }
.rdv__jour--texte { font-size: 18px; }
.rdv__mois { margin-top: 6px; font: 400 10.5px/1.3 var(--police-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--or-mat); }
.rdv h3 { font-size: 20px; font-weight: 400; color: #fff; margin-bottom: 4px; }
.rdv p { font-size: 14.5px; line-height: 1.55; color: rgba(238, 243, 238, .72); }
.rdv__lieu { font: 400 11px/1.4 var(--police-ui) !important; letter-spacing: .08em; text-transform: uppercase; color: rgba(238, 243, 238, .55) !important; margin-bottom: 8px; }
.rdv__lien { margin-top: 12px; color: #fff; }
.rdv .avis__exemple { margin-top: 12px; }
.rdv--vide { display: block; }
.jeu { margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(255, 255, 255, .18); }
.jeu__texte { font-size: 15px; line-height: 1.5; color: #fff; margin-bottom: 12px; }
.jeu__bouton { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 12px; border-radius: var(--rayon-btn); background: var(--or-logo); color: var(--encre); font: 400 14px/1.2 var(--police); transition: background-color .25s ease, transform .5s var(--ressort); }
.jeu__bouton::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .8), rgba(255, 255, 255, 0)); transform: translateX(-160%); animation: jeu-reflet 3.4s ease-in-out infinite; pointer-events: none; }
@keyframes jeu-reflet { 0%, 55% { transform: translateX(-160%); } 100% { transform: translateX(330%); } }
.jeu__cadeau { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; transform-origin: 50% 85%; animation: jeu-cadeau 3.4s ease-in-out infinite; }
@keyframes jeu-cadeau { 0%, 70%, 100% { transform: none; } 76% { transform: rotate(-12deg) translateY(-1px); } 82% { transform: rotate(10deg); } 88% { transform: rotate(-6deg); } 94% { transform: rotate(3deg); } }
a.jeu__bouton:hover { background: #ffe44d; transform: translateY(-2px); }
.jeu--attente .jeu__bouton { background: transparent; color: rgba(238, 243, 238, .8); border: 1px dashed rgba(233, 207, 85, .6); cursor: default; }
.jeu--attente .jeu__bouton::after { opacity: .25; }
.jeu__reglement { display: block; margin-top: 10px; font-size: 12px; color: rgba(238, 243, 238, .55); }
a.jeu__reglement, .jeu__reglement a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .jeu__bouton::after, .jeu__cadeau { animation: none !important; } }
/* v16.1 : le bouton du tirage déplie un petit formulaire d'inscription (sur le fond vert forêt de « Retrouvez-nous ») */
button.jeu__bouton { border: 0; cursor: pointer; }
button.jeu__bouton:hover { background: #ffe44d; transform: translateY(-2px); }
button.jeu__bouton[aria-expanded="true"] .fleche { transform: rotate(90deg); }
.jeu__form { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.jeu__champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.jeu__champs label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: rgba(238, 243, 238, .75); }
.jeu__large { grid-column: 1 / -1; }
.jeu__champs input { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--rayon-btn); background: rgba(255, 255, 255, .06); color: #fff; font: 300 15px/1.3 var(--police); transition: border-color .2s ease, background-color .2s ease; }
.jeu__champs input:focus { outline: none; border-color: var(--or-logo); background: rgba(255, 255, 255, .1); }
.jeu__case { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.45; color: rgba(238, 243, 238, .85); cursor: pointer; }
.jeu__case input { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--or-logo); }
.jeu__case a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.jeu__envoi { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.jeu__message { font-size: 13.5px; color: rgba(238, 243, 238, .8); }
.jeu__message--erreur { color: #ffb4a8; }
.jeu__merci { margin-top: 12px; padding: 12px 14px; border-radius: var(--rayon-btn); background: rgba(255, 220, 5, .12); border: 1px solid rgba(255, 220, 5, .35); color: #fff; font-size: 15px; }
@media (max-width: 520px) { .jeu__champs { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .retrouvez__grille { grid-template-columns: 1fr; } .rdv { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 16px; } }


/* ---------- WhatsApp : bouton de l'en-tête (numéro et horaires au survol), boutons, pied de page ---------- */
.icone-wa { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.whatsapp-bouton { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--mousse); border-radius: var(--rayon-btn); background: rgba(255, 255, 255, .55); color: var(--action); transition: background-color .25s ease, border-color .25s ease; }
.whatsapp-bouton .icone-wa { width: 19px; height: 19px; }
.whatsapp-bouton:hover, .whatsapp-bouton:focus-visible { background: #fff; border-color: var(--action); }
.whatsapp-bouton__bulle { position: absolute; top: calc(100% + 10px); right: -8px; z-index: 5; display: flex; flex-direction: column; gap: 2px; min-width: 220px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--givre); background: #fff; text-align: left; font-size: 13.5px; line-height: 1.4; color: var(--acier); white-space: nowrap; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .25s ease, transform .4s var(--ressort); }
.whatsapp-bouton__bulle strong { font: 400 11px/1.3 var(--police-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--action); margin-bottom: 2px; }
.whatsapp-bouton__bulle [data-site="numero"] { font-size: 15px; color: var(--encre); }
.whatsapp-bouton:hover .whatsapp-bouton__bulle, .whatsapp-bouton:focus-visible .whatsapp-bouton__bulle { opacity: 1; transform: none; }
.appel__actions .icone-wa { margin-right: 2px; }

/* ---------- panier : « Continuer mes achats », moyens de paiement ---------- */
.panier__continuer { width: 100%; justify-content: center; margin-top: 8px; }
.moyens-paiement { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.moyens-paiement span { padding: 3px 9px; border: 1px solid var(--givre); border-radius: var(--rayon-pilule); background: #fff; font: 400 10.5px/1.4 var(--police-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--acier); }

/* ---------- icônes colorées par famille : le dessin sert de masque, la couleur vient d'ici ---------- */
.icone { display: inline-block; flex-shrink: 0; width: 24px; height: 24px; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.icone--vide { -webkit-mask: none; mask: none; width: 7px; height: 7px; border-radius: 50%; }
.icone--usage { color: var(--action); }
.icone--zone { color: var(--encre); }
.icone--badge { color: var(--or-logo); }

/* ---------- fiche produit v13 : une page éditoriale plutôt qu'un formulaire d'achat ----------
   Grande photo sur toute la hauteur, à gauche, sans marge (jamais recadrée : même format 5:8 que les photos) ;
   à droite, le récit du produit, l'achat, puis les repères (utilisation, zones, exigences, fiche, précautions). */
.fiche__panneau { width: min(1200px, 100%); }
.fiche__fermer { position: absolute; top: 18px; right: 18px; z-index: 5; }
.fiche__contenu { height: 100%; display: grid; grid-template-columns: min(50vw, calc(100vh * .625)) minmax(0, 1fr); grid-template-columns: min(50vw, calc(100svh * .625)) minmax(0, 1fr); overflow: hidden; }   /* colonne photo = format exact des photos (5:8) */
.fiche__galerie { position: relative; height: 100%; min-width: 0; background: var(--givre); }
.fiche__piste { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; clip-path: inset(0 0 0 0); }
.fiche__piste::-webkit-scrollbar { display: none; }
.fiche__piste:focus-visible { outline: 2px solid var(--bleu-logo); outline-offset: -4px; }
.fiche__photo { flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: start; }
.fiche__photo img { width: 100%; height: 100%; object-fit: contain; }   /* jamais recadrée ni agrandie */
.fiche__piste--vide { position: relative; }
.fiche__reperes { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 40px 18px 16px; background: linear-gradient(180deg, rgba(10, 42, 33, 0), rgba(10, 42, 33, .45)); color: #fff; }
.fiche__compteur { font: 400 11px/1 var(--police-ui); letter-spacing: .14em; }
.fiche__traits { display: flex; gap: 6px; flex: 1; }
.fiche__traits button { flex: 1; height: 16px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.fiche__traits button::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: rgba(255, 255, 255, .4); transition: background-color .3s ease; }
.fiche__traits button[aria-current="true"]::after { background: #fff; }
.fiche__fleche { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; transition: background-color .25s ease; }
.fiche__fleche:hover { background: rgba(255, 255, 255, .28); }
.fiche__fleche svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fiche__infos { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: clamp(48px, 6vh, 72px) clamp(28px, 4vw, 64px) 56px; }
.fiche__infos > * + * { margin-top: 18px; }
.fiche__haut { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-right: 48px; }
.fiche__haut .surtitre { margin: 0; white-space: nowrap; }
.fiche__am { height: 18px; width: auto; }
.fiche__titre { font-size: clamp(30px, 3vw, 42px); line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; }
.fiche__titre-l2 { display: block; margin-top: 10px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.4; letter-spacing: -0.01em; color: var(--acier); text-wrap: pretty; }
.fiche__titre-l2 em { font-style: italic; }
.fiche__contenance { font-size: 15px; letter-spacing: 0; color: var(--ardoise); }
.fiche__marque { display: inline-block; font: 400 11px/1.3 var(--police-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ardoise); vertical-align: 1px; }
.fiche__court { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--texte); max-width: 34em; }
.fiche__suggestion { position: relative; padding: 16px 18px 16px 20px; border-radius: 12px; background: rgba(var(--sauge-rgb), .12); font-size: 15.5px; line-height: 1.6; font-style: italic; color: var(--encre); }
.fiche__suggestion::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--or-mat); }
.fiche__suggestion span { display: block; margin-bottom: 4px; font: normal 400 10.5px/1.3 var(--police-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--action); }
.fiche__vente { padding: 22px 0 26px; border-top: 1px solid var(--givre); border-bottom: 1px solid var(--givre); margin-top: 26px !important; }
.fiche__prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 16px; font-size: 26px; letter-spacing: -0.02em; color: var(--encre); font-variant-numeric: tabular-nums; }
.fiche__prix .badge { align-self: center; letter-spacing: .06em; }
.fiche__formats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.format { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 16px 11px; border: 1px solid var(--mousse); border-radius: var(--rayon-btn); background: rgba(255, 255, 255, .5); font: inherit; text-align: left; cursor: pointer; transition: border-color .25s ease, background-color .25s ease; }
.format:hover { border-color: var(--action); }
.format[aria-checked="true"] { border-color: var(--action); background: #fff; box-shadow: inset 0 0 0 1px var(--action); }
.format__nom { font-size: 14px; color: var(--encre); }
.format__prix { font-size: 13px; color: var(--ardoise); }
.fiche__achat { display: flex; align-items: stretch; gap: 10px; margin-bottom: 12px; }
.fiche__ajouter { flex: 1; justify-content: center; }
.fiche__stock { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--acier); }
.fiche__stock-sep { color: var(--fumee); }
.fiche__cadenas { width: 13px; height: 13px; fill: none; stroke: var(--action); stroke-width: 1.4; stroke-linejoin: round; }
.point-stock { background: var(--vert-logo); box-shadow: 0 0 0 3px rgba(62, 153, 20, .18); }
.point-stock--peu { background: var(--or-logo); box-shadow: 0 0 0 3px rgba(255, 220, 5, .25); }
.fiche__alerte p { margin-bottom: 12px; font-size: 15px; line-height: 1.55; color: var(--acier); }
.fiche__section { padding-top: 26px; }
/* pastilles rondes : badges (bleu marine et or) et utilisations (vert) ; le sens glisse dessous au survol */
.fiche__badges { margin-top: 24px !important; }
.pictos { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.picto { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 88px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.picto__rond { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--mousse); background: #fff; transition: background-color .15s ease, border-color .15s ease, transform .3s var(--rebond); }
.picto__rond .icone { width: 28px; height: 28px; transition: color .15s ease; }
.picto__nom { font: 400 10.5px/1.3 var(--police-ui); letter-spacing: .08em; text-transform: uppercase; text-align: center; color: var(--acier); transition: color .15s ease; }
.picto__statut { padding: 2px 7px; border: 1px dashed rgba(6, 3, 101, .3); border-radius: var(--rayon-pilule); font: 400 9px/1.3 var(--police-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ardoise); white-space: nowrap; }
.picto[aria-pressed="true"] .picto__rond { transform: translateY(-3px); }
.picto[aria-pressed="true"] .picto__nom { color: var(--encre); }
.pictos--usage .picto[aria-pressed="true"] .picto__rond { background: var(--action); border-color: var(--action); }
.pictos--usage .picto[aria-pressed="true"] .icone { color: #fff; }
.pictos--badge .picto__rond { border-color: rgba(6, 3, 101, .22); }
.pictos--badge .picto__nom { min-height: 2.6em; }   /* les mentions « Objectif visé » restent alignées */
.pictos--badge .icone { color: var(--encre); }
.pictos--badge .picto[aria-pressed="true"] .picto__rond { background: var(--encre); border-color: var(--encre); }
.pictos--badge .picto[aria-pressed="true"] .icone { color: var(--or-logo); }
.pictos--propriete .picto__rond { border-color: rgba(33, 150, 243, .35); }
.pictos--propriete .icone { color: #1667b7; }
.pictos--propriete .picto[aria-pressed="true"] .picto__rond { background: var(--bleu-logo); border-color: var(--bleu-logo); }
.pictos--propriete .picto[aria-pressed="true"] .icone { color: #fff; }
.pictos__detail { margin-top: 14px; min-height: 2.4em; font-size: 15px; line-height: 1.55; color: var(--acier); }
.fiche__h3 { font: 400 11.5px/1.3 var(--police-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--action); margin-bottom: 16px; }
.fiche__h3-sous { font-size: 14px; color: var(--ardoise); margin: -10px 0 16px; }
/* zones */
.zones { display: flex; flex-wrap: wrap; gap: 8px; }
.zones li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border: 1px solid var(--givre); border-radius: var(--rayon-pilule); background: #fff; font-size: 13.5px; color: var(--encre); }
.zones li::before { content: ""; width: 6px; height: 6px; margin: 0 2px 0 4px; border-radius: 50%; background: var(--or-logo); flex-shrink: 0; }   /* toutes les zones ont la même apparence */
/* mini-frise « Du champ au nez » (les 5 exigences de l'accueil) */
.mini-frise { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding-top: 22px; }
.mini-frise::before { content: ""; position: absolute; top: 6px; left: 7px; right: 7px; height: 1px; background: linear-gradient(90deg, var(--or-mat), rgba(233, 207, 85, .35)); }
.mini-frise__etape { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.mini-frise-cadre { position: relative; overflow: hidden; padding: 10px 8px 6px; margin: -10px -8px -6px; }   /* la lueur reste sur l'axe, le disque n'est jamais coupé */
.mini-frise__point { position: absolute; z-index: 2; top: -22px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--brume); border: 1px solid var(--or-mat); transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .3s var(--ressort); }
/* lueur d'or : elle glisse jusqu'au point actif et éclaire l'axe de part et d'autre */
.mini-frise__lueur { position: absolute; z-index: 1; left: 0; top: 0; width: 160px; height: 3px; margin: -1.5px 0 0 -80px; border-radius: 3px; background: linear-gradient(90deg, rgba(255, 220, 5, 0), rgba(255, 220, 5, .7) 50%, rgba(255, 220, 5, 0)); opacity: 0; pointer-events: none; transition: left .35s var(--ressort), top .35s var(--ressort), opacity .25s ease; }
.mini-frise__lueur::after { content: ""; position: absolute; inset: -6px 20px; background: radial-gradient(closest-side, rgba(255, 220, 5, .22), rgba(255, 220, 5, 0)); }
.mini-frise__lueur.visible { opacity: 1; }
.mini-frise__etape--objectif .mini-frise__point { border-style: dashed; }
.mini-frise__etape[aria-pressed="true"] .mini-frise__point { background: #f6d531; border-color: #f6d531; transform: scale(1.2); box-shadow: 0 0 0 4px rgba(255, 220, 5, .14); }
.mini-frise__num { font: 400 10.5px/1 var(--police-ui); letter-spacing: .12em; color: var(--ardoise); }
.mini-frise__titre { font-size: 13.5px; line-height: 1.3; color: var(--encre); }
.statut--clair { margin: 0 0 0 6px; padding: 2px 9px; border-color: rgba(15, 74, 54, .3); color: var(--action); vertical-align: 1px; }
.fiche__lien { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font: 400 11.5px/1.2 var(--police-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--action); }
/* dépliants : fiche d'identité, précautions */
.fiche__deplie { border-top: 1px solid var(--givre); margin-top: 26px !important; }
.fiche__deplie + .fiche__deplie { margin-top: 0 !important; }
.fiche__deplie:last-child { border-bottom: 1px solid var(--givre); }
.fiche__deplie summary { display: flex; align-items: center; justify-content: space-between; padding: 17px 0; list-style: none; font-size: 17px; letter-spacing: -0.01em; color: var(--encre); cursor: pointer; }
.fiche__deplie summary::-webkit-details-marker { display: none; }
.fiche__deplie summary::after { content: "+"; font-size: 22px; font-weight: 300; line-height: 1; color: var(--action); transition: transform .45s var(--ressort); }
.fiche__deplie[open] summary::after { transform: rotate(45deg); }
.fiche__deplie.fermeture summary::after { transform: none; }
.fiche__deplie-corps { overflow: hidden; }
.origine-icone { display: inline-block; height: 22px; width: auto; margin-left: 10px; vertical-align: -5px; }
.fiche__objectif { display: block; margin-top: 4px; color: var(--action); }
.fiche__note { margin: -8px 0 18px; font-size: 12.5px; color: var(--ardoise); }
.fiche__carac { margin: 0 0 18px; }
.fiche__carac > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--givre); }
.fiche__carac > div:last-child { border-bottom: 0; }
.fiche__carac dt { padding-top: 3px; font: 400 10.5px/1.5 var(--police-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ardoise); }
.fiche__carac dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--texte); }
.fiche__precautions-intro { font-size: 14.5px; color: var(--ardoise); margin-bottom: 12px; }
.fiche__precautions { display: grid; gap: 10px; padding-bottom: 20px; }
.fiche__precautions li { position: relative; padding-left: 16px; font-size: 14.5px; line-height: 1.55; color: var(--texte); }
.fiche__precautions li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--mousse); }
.fiche__precautions strong { font-weight: 400; color: var(--encre); }
/* barre d'achat collée en bas (téléphone seulement) */
.fiche__barre { display: none; }
@media (max-width: 900px) {
  .fiche__panneau { width: 100%; border-left: 0; transform: translateY(100%); }
  .fiche__fermer { top: 12px; right: 12px; background: rgba(255, 255, 255, .92); }
  .fiche__contenu { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .fiche__galerie { height: auto; width: min(100%, calc(60vh * .625)); width: min(100%, calc(60svh * .625)); max-width: none; margin: 0 auto; aspect-ratio: 5 / 8; }
  .fiche__infos { height: auto; overflow: visible; padding: 28px 20px 110px; }
  .fiche__haut { padding-right: 0; }
  .fiche__carac > div { grid-template-columns: 112px minmax(0, 1fr); }
  .mini-frise { grid-template-columns: 1fr; gap: 14px; padding: 0 0 0 28px; }
  .mini-frise::before { top: 6px; bottom: 6px; left: 6px; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, var(--or-mat), rgba(233, 207, 85, .35)); }
  .mini-frise__point { top: 2px; left: -28px; }
  .mini-frise__lueur { width: 3px; height: 110px; margin: -55px 0 0 -1.5px; background: linear-gradient(180deg, rgba(255, 220, 5, 0), rgba(255, 220, 5, .95) 50%, rgba(255, 220, 5, 0)); }
  .mini-frise__lueur::after { inset: 20px -6px; }
  .mini-frise__etape { flex-direction: row; align-items: baseline; gap: 10px; }
  .fiche__barre { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--givre); }
  .fiche__barre-prix { font-size: 20px; letter-spacing: -0.02em; color: var(--encre); }
}
@media (prefers-reduced-motion: reduce) {
  .tiroir__panneau, .tiroir__fond, .filtres__surligne { transition: none !important; }
}

/* ==========================================================================
   v17 (07/10/2026) : pages Contact et Distillerie
   ========================================================================== */
/* fondus réutilisables : même courbe douce que la boutique (sauge -> forêt), 120 px de chaque côté */
.fond-sauge.fondu-bas { padding-bottom: clamp(130px, 12vw, 160px);
  background:
    linear-gradient(180deg, rgba(243, 246, 242, 0) calc(100% - 120px), rgb(241, 245, 241) calc(100% - 108px), rgb(237, 241, 237) calc(100% - 96px), rgb(229, 235, 230) calc(100% - 84px), rgb(219, 227, 222) calc(100% - 72px), rgb(207, 217, 211) calc(100% - 60px), rgb(194, 206, 200) calc(100% - 48px), rgb(178, 193, 187) calc(100% - 36px), rgb(162, 180, 173) calc(100% - 24px), rgb(146, 166, 159) calc(100% - 12px), rgb(128, 152, 144) calc(100% - 0px)),
    radial-gradient(ellipse 70% 60% at 50% 38%, rgba(var(--sauge-rgb), .26) 0%, rgba(var(--sauge-rgb), .09) 52%, rgba(var(--sauge-rgb), 0) 100%),
    var(--brume); }
.fond-foret.fondu-haut { background: linear-gradient(180deg, rgb(128, 152, 144) 0px, rgb(111, 139, 129) 12px, rgb(95, 125, 115) 24px, rgb(79, 112, 101) 36px, rgb(63, 99, 88) 48px, rgb(50, 88, 77) 60px, rgb(38, 78, 66) 72px, rgb(28, 70, 58) 84px, rgb(20, 64, 51) 96px, rgb(16, 60, 47) 108px, rgb(14, 59, 46) 120px); padding-top: clamp(150px, 13vw, 180px); }
.fond-foret.fondu-haut.grain::after { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 120px); mask-image: linear-gradient(180deg, transparent 0, #000 120px); }
.page-haut { padding-bottom: clamp(48px, 5vw, 72px); }

/* Contact : moyens de nous joindre + formulaire */
.contact__grille { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.contact__moyens { display: flex; flex-direction: column; gap: 14px; }
.moyen { display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border-radius: var(--rayon); border: 1px solid rgba(var(--sauge-rgb), .28); background: rgba(255, 255, 255, .72); transition: transform .5s var(--ressort), border-color .25s ease; }
.moyen:hover { transform: translateY(-3px); border-color: rgba(var(--sauge-rgb), .6); }
.moyen__icone { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--action); color: #fff; }
.moyen__icone svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.moyen__corps { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.moyen h2 { font: 400 12px/1.3 var(--police-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--action); }
.moyen__valeur { font-size: 20px; letter-spacing: -.01em; color: var(--encre); overflow-wrap: anywhere; }
.moyen p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--acier); }
.moyen .btn { align-self: flex-start; margin-top: 6px; }
.moyen__liens { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.moyen__liens a { color: var(--encre); text-decoration: underline; text-decoration-color: rgba(var(--sauge-rgb), .6); text-underline-offset: 4px; transition: text-decoration-color .2s ease; }
.moyen__liens a:hover { text-decoration-color: var(--action); }

/* formulaires du site (Contact, Distillerie) : carte blanche, filets fins, pas d'ombre */
.formulaire { padding: clamp(24px, 3vw, 40px); border-radius: var(--rayon); border: 1px solid rgba(var(--sauge-rgb), .28); background: #fff; color: var(--texte); text-align: left; }
.formulaire__titre { font-size: clamp(22px, 2.2vw, 28px); font-weight: 300; letter-spacing: -.02em; color: var(--encre); margin-bottom: 6px; }
.formulaire__intro { font-size: 15px; color: var(--acier); margin-bottom: 22px; }
.formulaire__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.champ { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--acier); }
.champ--large { grid-column: 1 / -1; }
.champ input, .champ select, .champ textarea { width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid var(--givre); border-radius: var(--rayon-btn); background: #fff; font: 300 16px/1.4 var(--police); color: var(--texte); transition: border-color .2s ease, box-shadow .2s ease; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px rgba(15, 74, 54, .12); }
.champ textarea { min-height: 150px; resize: vertical; }
.choix { display: flex; flex-wrap: wrap; gap: 8px; }
.choix label { position: relative; }
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix span { display: inline-flex; padding: 8px 14px; border: 1px solid var(--givre); border-radius: var(--rayon-pilule); font-size: 14px; color: var(--acier); cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
.choix input:checked + span { border-color: var(--action); background: var(--action); color: #fff; }
.choix input:focus-visible + span { outline: 2px solid var(--action); outline-offset: 2px; }
.case { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: 14px; line-height: 1.45; color: var(--acier); cursor: pointer; }
.case input { flex-shrink: 0; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--action); }
.formulaire__pied { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.formulaire__statut { font-size: 14px; color: var(--acier); }
.formulaire__statut--erreur { color: #a4262c; }
.formulaire__mention { margin-top: 16px; font-size: 12.5px; line-height: 1.5; color: var(--acier); }
.formulaire__mention a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.formulaire__merci { padding: 28px; border-radius: var(--rayon); border: 1px solid rgba(var(--sauge-rgb), .45); background: rgba(var(--sauge-rgb), .08); }
.formulaire__merci h3 { font-size: 22px; font-weight: 300; color: var(--encre); margin-bottom: 8px; }
.formulaire__merci p { color: var(--acier); }

/* questions fréquentes */
.faq { max-width: 820px; margin: clamp(64px, 8vw, 112px) auto 0; }
.faq .titre-section { margin-bottom: 28px; }
.faq__item { border-top: 1px solid rgba(var(--sauge-rgb), .35); }
.faq__item:last-child { border-bottom: 1px solid rgba(var(--sauge-rgb), .35); }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; list-style: none; cursor: pointer; font-size: 18px; color: var(--encre); transition: color .2s ease; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex-shrink: 0; font-size: 24px; font-weight: 300; line-height: 1; color: var(--action); transition: transform .35s var(--ressort); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover { color: var(--action); }
.faq__item p { max-width: 62ch; margin: 0 0 22px; color: var(--acier); line-height: 1.6; }
.faq__item p a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }

/* Distillerie */
.pourquoi__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.pourquoi__texte h2 { margin-bottom: 18px; }
.pourquoi__texte p { margin-bottom: 14px; color: var(--texte); line-height: 1.65; }
.pourquoi__photos { display: grid; gap: 16px; }
.pourquoi__photos figure { margin: 0; }
.pourquoi__photos img { display: block; width: 100%; height: auto; border-radius: var(--rayon); }   /* photo entière, jamais recadrée */
.pourquoi__photos figcaption { margin-top: 8px; font-size: 13px; color: var(--acier); }
.projet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); margin: 0; padding: 0; list-style: none; }
.projet__item { padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .16); }
.projet__num { display: block; margin-bottom: 16px; font: 400 12px/1 var(--police-ui); letter-spacing: .14em; color: var(--or-mat); }
.projet__item h3 { margin-bottom: 10px; font-size: 22px; font-weight: 300; letter-spacing: -.01em; }
.projet__item p { color: rgba(238, 243, 238, .74); line-height: 1.6; }
.projet__item em { color: var(--or-mat); font-style: normal; }
.suivre__grille { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.suivre__texte .t-sous-titre { margin-top: 14px; }
.suivre__texte .titre-section { text-align: left; align-items: flex-start; margin-inline: 0; }

@media (max-width: 900px) {
  .contact__grille, .pourquoi__grille, .suivre__grille { grid-template-columns: 1fr; }
  .projet { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .formulaire__grille { grid-template-columns: 1fr; }
  .moyen { padding: 18px; }
}

/* ==========================================================================
   v17.1 (07/10/2026) : boutons du haut harmonisés (comme l'accueil) et page Distillerie v1.1
   ========================================================================== */
/* RÈGLE (Kassim, 07/10) : sur chaque page, les boutons du haut ont le format de « Découvrir nos huiles » de l'accueil :
   une paire (plein + fantôme) dans .hero__actions, l'animation d'entrée sur le CONTENEUR (sinon l'effet aimanté est bloqué) */
.page-haut .t-sous-titre { margin-bottom: 34px; }
.page-haut__actions { justify-content: center; }
.page-haut .btn--fantome { background: rgba(255, 255, 255, .7); }

/* deux photos côte à côte, entières (jamais recadrées) */
.photos-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); align-items: start; }
.photos-duo figure { margin: 0; }
.photos-duo--hier { grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); }   /* largeurs proportionnelles aux photos : même hauteur, rien de recadré */
.photos-duo img, .avant-apres img { display: block; width: 100%; height: auto; border-radius: var(--rayon); }
.photos-duo figcaption, .avant-apres figcaption { margin-top: 8px; font-size: 13px; color: var(--acier); }

/* avant / après */
.avant-apres { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(14px, 2vw, 24px); align-items: center; }
.avant-apres figure { position: relative; margin: 0; }
.avant-apres figcaption { color: rgba(238, 243, 238, .7); }
.avant-apres__etiquette { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 5px 12px; border-radius: var(--rayon-pilule); background: rgba(14, 59, 46, .82); color: #fff; font: 400 11px/1.3 var(--police-ui); letter-spacing: .12em; text-transform: uppercase; }
.avant-apres__etiquette--or { background: var(--or-logo); color: var(--encre); }
.avant-apres__fleche { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); color: var(--or-mat); }
.avant-apres__fleche svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.innover__ligne { max-width: 46em; margin: clamp(28px, 3vw, 40px) auto 0; text-align: center; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: rgba(238, 243, 238, .82); }
.innover__ligne strong { font-weight: 400; color: #fff; }

/* 1 procédé, 5 objectifs */
.procede { margin-top: clamp(56px, 7vw, 88px); }
.procede__titre { text-align: center; margin-bottom: clamp(28px, 3vw, 40px); font-size: clamp(22px, 2.4vw, 30px); font-weight: 300; letter-spacing: -.02em; color: #fff; }
.procede__un { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; margin: 0 .1em; border-radius: 50%; background: var(--or-logo); color: var(--encre); font-size: .85em; font-weight: 400; vertical-align: .05em; }
.procede__objectifs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
.procede__objectifs li { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .16); transition: border-color .3s ease; }
.procede__objectifs li:hover { border-top-color: var(--or-mat); }
.procede__num { display: block; margin-bottom: 12px; font: 400 12px/1 var(--police-ui); letter-spacing: .14em; color: var(--or-mat); }
.procede__objectifs h3 { margin-bottom: 8px; font-size: 19px; font-weight: 300; }
.procede__objectifs p { font-size: 15px; line-height: 1.55; color: rgba(238, 243, 238, .72); }

/* boucle de relance de la filière */
.demain .projet { margin-bottom: clamp(64px, 8vw, 104px); }
.relance { max-width: 1080px; margin: 0 auto clamp(72px, 9vw, 120px); text-align: center; }
.relance__titre { margin-bottom: clamp(28px, 3vw, 40px); font-size: clamp(22px, 2.4vw, 30px); font-weight: 300; letter-spacing: -.02em; }
.relance__etapes { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.relance__etapes::before { content: ""; position: absolute; top: 21px; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, rgba(233, 207, 85, .25), var(--or-mat), rgba(233, 207, 85, .25)); }
.relance__etapes li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 4px; }
.relance__point { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 8px; border-radius: 50%; background: var(--nuit, #0b1d45); border: 1px solid var(--or-mat); color: var(--or-mat); font: 400 13px/1 var(--police-ui); transition: background-color .25s ease, color .25s ease; }
.relance__etapes li:hover .relance__point { background: var(--or-mat); color: var(--encre); }
.relance__etapes strong { font-weight: 400; font-size: 17px; color: #fff; }
.relance__etapes span:last-child { font-size: 14px; line-height: 1.45; color: rgba(238, 243, 238, .7); }
.relance__retour { display: block; width: 80%; height: 48px; margin: 10px auto 0; overflow: visible; }
.relance__retour path { fill: none; stroke: var(--or-mat); stroke-width: 1.2; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.relance__retour .relance__pointe { stroke-dasharray: none; }
.relance__boucle { margin-top: 10px; font-size: 15px; color: rgba(238, 243, 238, .78); font-style: italic; }

@media (max-width: 900px) {
  .procede__objectifs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .avant-apres { grid-template-columns: 1fr; }
  .avant-apres__fleche { transform: rotate(90deg); margin: 0 auto; }
  .relance__etapes { grid-template-columns: 1fr; gap: 18px; text-align: left; }
  .relance__etapes::before { top: 10px; bottom: 10px; left: 20px; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, rgba(233, 207, 85, .25), var(--or-mat), rgba(233, 207, 85, .25)); }
  .relance__etapes li { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .relance__point { grid-row: span 2; margin: 0; }
  .relance__retour { display: none; }
  .relance__boucle { text-align: left; }
}
@media (max-width: 560px) {
  .photos-duo, .photos-duo--hier, .procede__objectifs { grid-template-columns: 1fr; }
}

/* v17.1 : encadré officiel des garanties légales dans les CGV (décret 2022-946) */
.legal__encadre { margin: 18px 0 10px; padding: clamp(18px, 2.4vw, 28px); border: 1px solid rgba(6, 3, 101, .25); border-radius: var(--rayon); background: #fff; font-size: 14.5px; line-height: 1.6; }
.legal__encadre p + p { margin-top: .8em; }
.legal__source { font-size: 13px; color: var(--acier); }

/* ==========================================================================
   v17.2 (07/10/2026) : pages « Nos racines » et « Nos engagements »
   ========================================================================== */
/* citation fondatrice */
.citation { max-width: 880px; margin: 0 auto clamp(64px, 8vw, 104px); text-align: center; }
.citation blockquote { margin: 0 0 18px; }
.citation blockquote p { font-size: clamp(22px, 2.6vw, 32px); font-weight: 300; line-height: 1.35; letter-spacing: -.02em; color: var(--encre); text-wrap: balance; }
.citation blockquote p::before { content: "«\00a0"; color: rgba(var(--sauge-rgb), .8); }
.citation blockquote p::after { content: "\00a0»"; color: rgba(var(--sauge-rgb), .8); }
.citation figcaption { font-size: 14px; color: var(--acier); }
.citation figcaption strong { font-weight: 400; color: var(--encre); }

/* frise des deux îles */
.chrono { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin: 0; padding: 0; list-style: none; }
.chrono::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(233, 207, 85, .15), var(--or-mat), rgba(233, 207, 85, .15)); }
.chrono li { position: relative; padding-top: 30px; }
.chrono li::before { content: ""; position: absolute; top: 2px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--or-logo); box-shadow: 0 0 0 4px rgba(255, 220, 5, .2); }
.chrono__date { display: block; margin-bottom: 8px; font: 400 13px/1.3 var(--police-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--action); }
.chrono p { font-size: 15px; line-height: 1.55; color: var(--texte); }

/* trois générations */
.generations .projet__num sup, .chrono__date sup { font-size: .7em; }
.photos-duo--egal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.famille__photos { margin-top: clamp(48px, 6vw, 80px); }
.famille__photos figcaption { color: rgba(238, 243, 238, .7); }
.famille__pont { max-width: 44em; margin: clamp(32px, 4vw, 48px) auto 0; text-align: center; font-size: clamp(18px, 1.8vw, 22px); font-weight: 300; line-height: 1.5; color: #fff; }

/* le geste : galerie photo + légendes */
.galerie-recit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 32px) clamp(16px, 2vw, 24px); align-items: start; }
.galerie-recit figure { margin: 0; }
.galerie-recit img, .chemin__photo img { display: block; width: 100%; height: auto; border-radius: var(--rayon); }   /* photos entières */
.galerie-recit figcaption, .chemin__photo figcaption { margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: rgba(238, 243, 238, .74); }
.galerie-recit figcaption strong { font-weight: 400; color: #fff; }

/* le chemin de Kassim, Mayotte */
.chemin { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: clamp(80px, 10vw, 128px); }
.chemin--inverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.chemin__photo { margin: 0; }
.chemin__texte h2 { margin: 12px 0 18px; color: #fff; }
.chemin__texte p { margin-bottom: 14px; line-height: 1.65; color: rgba(238, 243, 238, .8); }
.chemin__texte .lien-titre { margin-top: 10px; }

/* engagements : trois cartes claires */
.engagements { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
.engagement { padding: clamp(24px, 3vw, 36px); border-radius: var(--rayon); border: 1px solid rgba(var(--sauge-rgb), .28); background: rgba(255, 255, 255, .72); transition: transform .5s var(--ressort), border-color .25s ease; }
.engagement:hover { transform: translateY(-4px); border-color: rgba(var(--sauge-rgb), .6); }
.engagement__num { display: block; margin-bottom: 18px; font: 400 12px/1 var(--police-ui); letter-spacing: .14em; color: var(--action); }
.engagement h3 { margin-bottom: 12px; font-size: 24px; font-weight: 300; color: var(--encre); }
.engagement p { line-height: 1.6; color: var(--texte); }
.engagement__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.engagement__tags span { padding: 4px 11px; border-radius: var(--rayon-pilule); border: 1px solid rgba(var(--sauge-rgb), .45); font: 400 11px/1.3 var(--police-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--action); }

/* cahier des charges : huit exigences */
.exigences8 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 44px) clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
.exigences8 li { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .16); transition: border-color .3s ease; }
.exigences8 li:hover { border-top-color: var(--or-mat); }
.exigences8 h3 { margin-bottom: 8px; font-size: 19px; font-weight: 300; }
.exigences8 p { font-size: 15px; line-height: 1.55; color: rgba(238, 243, 238, .72); }

@media (max-width: 1000px) {
  .chrono { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .chrono::before { display: none; }
  .exigences8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .galerie-recit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chemin, .chemin--inverse { grid-template-columns: 1fr; }
  .chemin--inverse .chemin__photo { order: 2; }
  .engagements { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .chrono, .galerie-recit, .photos-duo--egal, .exigences8 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   v17.3 (07/10/2026) : séparations compactes et photos avant/après homogènes
   ========================================================================== */
/* RÈGLE (Kassim, 07/10, TOUTES les pages) : séparation compacte entre deux sections. Le fondu garde ses 120 px de chaque
   côté (même courbe smoothstep), mais le contenu peut s'approcher de ses extrémités, où la couleur ne change presque pas :
   l'espace vide entre le dernier élément d'une section et le titre de la suivante passe d'environ 340 px à environ 190 px. */
.fond-sauge.fondu-bas, .boutique.fond-sauge { padding-bottom: clamp(76px, 7vw, 92px); }
.fond-foret.fondu-haut, .rassurance-section { padding-top: clamp(92px, 8.5vw, 108px); }
/* deux sections sombres qui se suivent (forêt puis nuit, sans fondu) : même compacité */
.fond-foret.fondu-haut { padding-bottom: clamp(56px, 6vw, 80px); }
.fond-foret + .fond-nuit { padding-top: clamp(56px, 6vw, 80px); }

/* avant / après : même format pour les deux photos (2:1, sujet jamais coupé), agrandies au survol (demande de Kassim) */
.innover .titre-section .t-sous-titre { max-width: 52em; text-wrap: balance; }   /* lignes équilibrées malgré le retour à la ligne voulu */
.avant-apres img { aspect-ratio: 2 / 1; object-fit: cover; object-position: center; }
.avant-apres figure { transition: transform .35s var(--ressort); transform-origin: center; }
.avant-apres figure:hover { transform: scale(1.06); z-index: 2; }
.avant-apres figure:hover figcaption { color: #fff; }
@media (prefers-reduced-motion: reduce) { .avant-apres figure, .avant-apres figure:hover { transition: none; transform: none; } }

/* ==========================================================================
   v17.4 (07/10/2026) : « 1 procédé, 5 objectifs » (Distillerie), d'après le visuel de Kassim
   un fil d'or ondule d'une bulle à l'autre et se trace à l'arrivée (js/main.js, section 21) ; les bulles flottent
   ========================================================================== */
.objectifs5 { margin: 0 auto clamp(72px, 9vw, 112px); max-width: 1180px; }
.objectifs5__tete { text-align: center; margin-bottom: clamp(32px, 4vw, 48px); }
.objectifs5__sous { max-width: 46em; margin: 0 auto; font-size: 16px; line-height: 1.6; color: rgba(238, 243, 238, .74); text-wrap: balance; }
.objectifs5__scene { position: relative; }
.objectifs5__fil { position: absolute; top: 0; left: 0; width: 100%; height: 300px; overflow: visible; pointer-events: none; }
.objectifs5__fil path { fill: none; stroke: var(--or-mat); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .85; }
.objectifs5__liste { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.objectif { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 10px; }
.objectif--bas { margin-top: 140px; }
.objectif__bulle { display: block; width: 150px; height: 150px; margin-bottom: 16px; animation: flotter 7s ease-in-out infinite; }
.objectif:nth-child(2) .objectif__bulle { animation-duration: 8.5s; animation-delay: -2s; }
.objectif:nth-child(3) .objectif__bulle { animation-duration: 7.5s; animation-delay: -4s; }
.objectif:nth-child(4) .objectif__bulle { animation-duration: 9s; animation-delay: -1s; }
.objectif:nth-child(5) .objectif__bulle { animation-duration: 8s; animation-delay: -3s; }
.objectif__forme { display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border: 1px solid rgba(233, 207, 85, .45); transition: transform .35s var(--ressort), border-color .25s ease; }
.objectif:hover .objectif__forme { transform: scale(1.08); border-color: var(--or-mat); }
.objectif__forme img { width: 100%; height: 100%; object-fit: cover; }
.objectif__forme--1 { border-radius: 62% 38% 46% 54% / 52% 44% 56% 48%; }
.objectif__forme--2 { border-radius: 45% 55% 60% 40% / 55% 42% 58% 45%; }
.objectif__forme--3 { border-radius: 55% 45% 40% 60% / 45% 58% 42% 55%; }
.objectif__forme--4 { border-radius: 40% 60% 55% 45% / 58% 45% 55% 42%; }
.objectif__forme--5 { border-radius: 58% 42% 50% 50% / 42% 55% 45% 58%; }
.objectif__forme--eau { background: radial-gradient(circle at 35% 30%, #4fb3ff, #1565c0 70%, #0b3d82); }
.objectif__forme--dechets { background: radial-gradient(circle at 35% 30%, #7cc35a, #3e7d22 65%, #1f4a12); }
.objectif__forme svg { width: 56%; height: 56%; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.objectif__nom { margin-bottom: 6px; font: 400 12px/1.3 var(--police-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--or-mat); }
.objectif__chiffre { font-size: 20px; font-weight: 400; line-height: 1.25; letter-spacing: -.01em; color: #fff; }
.objectif__detail { margin-top: 4px; font-size: 14px; line-height: 1.45; color: rgba(238, 243, 238, .7); max-width: 15em; }
/* entrée : chaque objectif apparaît quand le fil l'atteint (seulement si les animations sont permises) */
.js-anim .objectifs5[data-objectifs] .objectif { opacity: 0; transform: translateY(18px) scale(.92); transition: opacity .7s ease, transform .9s var(--ressort); }
.js-anim .objectifs5[data-objectifs] .objectif.vu { opacity: 1; transform: none; }
.js-anim .objectifs5[data-objectifs]:not(.fil-pret) .objectifs5__fil path { opacity: 0; }   /* caché jusqu'à son tracé (main.js, section 21) */
@media (max-width: 900px) {
  .objectifs5__fil { display: none; }
  .objectifs5__liste { grid-template-columns: 1fr; gap: 22px; max-width: 520px; margin: 0 auto; }
  .objectifs5__liste::before { content: ""; position: absolute; top: 40px; bottom: 40px; left: 45px; width: 1px; background: linear-gradient(180deg, rgba(233, 207, 85, .2), var(--or-mat), rgba(233, 207, 85, .2)); }
  .objectif, .objectif--bas { display: grid; grid-template-columns: 90px minmax(0, 1fr); column-gap: 18px; align-items: center; margin: 0; padding: 0; text-align: left; }
  .objectif__bulle { position: relative; grid-row: span 3; width: 90px; height: 90px; margin: 0; }
  .objectif__nom, .objectif__chiffre, .objectif__detail { grid-column: 2; }
  .objectif__nom { margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .objectif__bulle { animation: none; } }

/* ==========================================================================
   v17.5 (08/10/2026) : « Relancer la filière » en anneau (Distillerie) : 5 étapes autour d'un cercle, flèches d'or
   entre chaque étape, une bille qui tourne sans fin (« la boucle recommence »), la phrase-clé au centre
   ========================================================================== */
.relance .relance__titre { margin-bottom: 104px; }
.cycle { position: relative; width: min(420px, 100%); margin: 0 auto; }
.cycle__carre { position: relative; width: 100%; aspect-ratio: 1; }
.cycle__anneau { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cycle__trace { fill: none; stroke: rgba(233, 207, 85, .14); stroke-width: 1; }
.cycle__arc { fill: none; stroke: var(--or-mat); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
#cycle-pointe path { fill: none; stroke: var(--or-mat); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cycle__noeud { position: absolute; z-index: 2; left: var(--x); top: var(--y); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--nuit); border: 1px solid var(--or-mat); color: var(--or-mat); font: 400 15px/1 var(--police-ui); transform: translate(-50%, -50%); transition: background-color .2s ease, color .2s ease, transform .3s var(--ressort); }
.cycle__noeud:hover { background: var(--or-mat); color: var(--encre); transform: translate(-50%, -50%) scale(1.1); }
.cycle__orbite { position: absolute; inset: 0; z-index: 1; pointer-events: none; animation: cycle-tour 16s linear infinite; }
.cycle__bille { position: absolute; left: 50%; top: 16%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--or-logo); box-shadow: 0 0 0 4px rgba(255, 220, 5, .18), 0 0 16px rgba(255, 220, 5, .55); }
@keyframes cycle-tour { to { transform: rotate(360deg); } }
.cycle__centre { position: absolute; left: 50%; top: 50%; width: 46%; transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: 8px; text-align: center; }
.cycle__centre strong { font-size: clamp(17px, 1.7vw, 21px); font-weight: 300; line-height: 1.3; color: #fff; text-wrap: balance; }
.cycle__centre span { font-size: 13.5px; line-height: 1.45; font-style: italic; color: rgba(238, 243, 238, .72); text-wrap: balance; }
.cycle__etapes { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.cycle__etape { position: absolute; left: var(--x); top: var(--y); width: 210px; display: flex; flex-direction: column; gap: 4px; pointer-events: auto; }
.cycle__etape strong { font-size: 17px; font-weight: 400; color: #fff; }
.cycle__etape span:last-child { font-size: 14px; line-height: 1.45; color: rgba(238, 243, 238, .72); }
.cycle__num { display: none; }
.cycle__etape--haut { transform: translate(-50%, calc(-100% - 34px)); align-items: center; text-align: center; }
.cycle__etape--droite, .cycle__etape--bas-droite { align-items: flex-start; text-align: left; }
/* v26 : étapes 2 ↔ 5 et 3 ↔ 4 en miroir : le titre à hauteur de son numéro, le texte collé à l'anneau des deux côtés */
.cycle__etape--droite { transform: translate(38px, -13px); }
.cycle__etape--bas-droite { transform: translate(32px, -13px); }
.cycle__etape--bas-gauche { transform: translate(calc(-100% - 32px), -13px); align-items: flex-end; text-align: right; }
.cycle__etape--gauche { transform: translate(calc(-100% - 38px), -13px); align-items: flex-end; text-align: right; }
/* entrée (si les animations sont permises) : chaque étape s'allume, puis la flèche suivante se trace, puis la bille part */
.js-anim .cycle[data-cycle] .cycle__arc { stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .9s cubic-bezier(.45, 0, .2, 1), opacity .25s ease; transition-delay: calc(var(--i) * .5s + .25s); }
.js-anim .cycle[data-cycle] .cycle__noeud, .js-anim .cycle[data-cycle] .cycle__etape { opacity: 0; transition-property: opacity, background-color, color, transform; transition-duration: .5s, .2s, .2s, .3s; transition-delay: calc(var(--i) * .5s), 0s, 0s, 0s; }
.js-anim .cycle[data-cycle] .cycle__orbite, .js-anim .cycle[data-cycle] .cycle__centre { opacity: 0; transition: opacity .8s ease 2.6s; }
.js-anim .cycle.vu .cycle__arc, .js-anim .cycle.vu .cycle__noeud, .js-anim .cycle.vu .cycle__etape, .js-anim .cycle.vu .cycle__orbite, .js-anim .cycle.vu .cycle__centre { opacity: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .cycle__orbite { animation: none; } }
@media (max-width: 960px) {
  .relance .relance__titre { margin-bottom: 28px; }
  .cycle { width: 100%; }
  .cycle__carre { width: min(300px, 82vw); margin: 0 auto; }
  .cycle__centre strong { font-size: 15px; }
  .cycle__centre span { font-size: 12px; }
  .cycle__noeud { width: 38px; height: 38px; font-size: 13px; }
  .cycle__etapes { position: static; display: flex; flex-direction: column; gap: 16px; max-width: 420px; margin: 28px auto 0; text-align: left; }
  .cycle__etape, .cycle__etape--haut, .cycle__etape--droite, .cycle__etape--bas-droite, .cycle__etape--bas-gauche, .cycle__etape--gauche {
    position: static; transform: none; width: auto; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; align-items: start; text-align: left; }
  .cycle__num { display: grid; grid-row: span 2; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--or-mat); color: var(--or-mat); font: 400 13px/1 var(--police-ui); }
}

/* ==========================================================================
   v17.6 (08/10/2026) : carte mentale « Innover à chaque étape » (Distillerie)
   un nœud central relié par un fil d'or à 9 branches ; les entrées ★ (choix de Neosent) en or ;
   le bouton « Nos priorités » estompe les autres pistes (js/main.js, section 23)
   ========================================================================== */
.carte-mentale { max-width: 1180px; margin: 0 auto clamp(72px, 9vw, 112px); }
.carte-mentale__tete { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.carte-mentale__hub { position: relative; display: inline-flex; margin-top: 18px; padding: 14px 26px; border-radius: var(--rayon-pilule); border: 1px solid var(--or-mat); background: rgba(233, 207, 85, .08); font-size: clamp(20px, 2.2vw, 26px); font-weight: 300; letter-spacing: -.01em; color: #fff; }
.carte-mentale__choix { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--rayon-pilule); border: 1px solid rgba(255, 255, 255, .16); }
.carte-mentale__choix button { padding: 7px 14px; border: 0; border-radius: var(--rayon-pilule); background: transparent; color: rgba(238, 243, 238, .75); font: 400 13.5px/1.2 var(--police); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.carte-mentale__choix button[aria-pressed="true"] { background: var(--or-mat); color: var(--encre); }
.carte-mentale__choix button span { color: inherit; }
.piste { position: relative; padding: 22px 22px 20px; border-radius: var(--rayon); border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .035); transition: border-color .25s ease, transform .4s var(--ressort), opacity .3s ease; }
.piste:hover { border-color: rgba(233, 207, 85, .55); }   /* pas de déplacement : les fils restent raccordés */
.piste__titre { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; font-size: 19px; font-weight: 400; color: #fff; }
.piste__num { font: 400 12px/1 var(--police-ui); letter-spacing: .12em; color: var(--or-mat); }
.piste__liste, .piste__sous { margin: 0; padding: 0; list-style: none; }
.piste__entree { position: relative; padding-left: 18px; margin-top: 8px; font-size: 14.5px; line-height: 1.45; color: rgba(238, 243, 238, .72); transition: opacity .3s ease, color .3s ease; }
.piste__entree::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; border: 1px solid rgba(238, 243, 238, .45); }
.piste__entree--prio { color: #fff; }
.piste__entree--prio::before { content: "★"; top: 0; left: -1px; width: auto; height: auto; border: 0; font-size: 12px; line-height: 1.7; color: var(--or-logo); }
.piste__sous { margin: 6px 0 2px; padding-left: 4px; border-left: 1px solid rgba(233, 207, 85, .35); }
.piste__sous li { padding-left: 10px; margin-top: 4px; font-size: 13.5px; color: rgba(238, 243, 238, .7); }
/* « Nos priorités » : seules les entrées ★ restent bien visibles */
.carte-mentale.priorites .piste__entree:not(.piste__entree--prio) { opacity: .25; }
.carte-mentale.priorites .piste--sans-prio { opacity: .35; }
.carte-mentale.priorites .piste__entree--prio { color: var(--or-mat); }

/* ==========================================================================
   v17.7 (08/10/2026) : carte mentale, fils d'or exactement raccordés (tige → barre → chaque branche, et d'une
   branche à la suivante dans la même colonne) ; au survol d'une branche, son chemin s'allume depuis le centre
   (le trait doré grandit par transform, jamais de repeinture continue) — js/main.js, section 23
   ========================================================================== */
.carte-mentale__reseau { position: relative; --g: clamp(16px, 2.2vw, 28px); --rg: 34px; --tige: 44px; margin-top: 0; padding-top: calc(var(--tige) + var(--rg)); }
.carte-mentale__branches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rg) var(--g); margin: 0; padding: 0; list-style: none; }
.cm-fil { position: absolute; background: rgba(233, 207, 85, .55); }
.cm-fil::after, .piste::after { content: ""; position: absolute; inset: 0; background: var(--or-logo); box-shadow: 0 0 10px rgba(255, 220, 5, .65); transition: transform .25s ease; }
.cm-fil--tige { top: 0; left: 50%; width: 1px; height: var(--tige); margin-left: -.5px; }
.cm-fil--tige::after { transform: scaleY(0); transform-origin: top; }
.cm-fil--barre-g, .cm-fil--barre-d { top: var(--tige); height: 1px; }
.cm-fil--barre-g { left: calc((100% - 2 * var(--g)) / 6); right: 50%; }
.cm-fil--barre-d { left: 50%; right: calc((100% - 2 * var(--g)) / 6); }
.cm-fil--barre-g::after { transform: scaleX(0); transform-origin: right; }
.cm-fil--barre-d::after { transform: scaleX(0); transform-origin: left; }
/* chaque branche a son fil au-dessus d'elle : depuis la barre (1re rangée) ou depuis la branche du dessus */
.piste::before { content: ""; position: absolute; top: calc(-1 * var(--rg) - 1px); left: 50%; width: 1px; height: calc(var(--rg) + 1px); margin-left: -.5px; background: rgba(233, 207, 85, .55); }
.piste::after { inset: auto; top: calc(-1 * var(--rg) - 1px); left: 50%; width: 1px; height: calc(var(--rg) + 1px); margin-left: -.5px; transform: scaleY(0); transform-origin: top; }
/* survol : le chemin s'allume du centre vers la branche */
.carte-mentale.fil .cm-fil--tige::after { transform: scaleY(1); }
.carte-mentale.fil-g .cm-fil--barre-g::after, .carte-mentale.fil-d .cm-fil--barre-d::after { transform: scaleX(1); transition-delay: .18s; }
.piste.fil-actif::after { transform: scaleY(1); transition-delay: calc(.32s + var(--ordre, 0) * .14s); }
.piste.fil-actif { border-color: rgba(233, 207, 85, .55); }
@media (max-width: 960px) {
  .carte-mentale__branches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-fil--barre-g { left: calc((100% - var(--g)) / 4); }
  .cm-fil--barre-d { right: calc((100% - var(--g)) / 4); }
}
@media (max-width: 600px) {
  .carte-mentale__reseau { --rg: 16px; }
  .carte-mentale__branches { grid-template-columns: 1fr; }
  .cm-fil--barre-g, .cm-fil--barre-d { display: none; }
}
/* Nos racines : duo « récolte de l'huile / mesure » */
.geste-duo { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: clamp(40px, 5vw, 64px); }
.geste-duo figure { margin: 0; }
.geste-duo img { display: block; width: 100%; height: auto; border-radius: var(--rayon); }   /* photo entière, verticale */
.geste-duo__texte { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); }
.geste-duo__recit h3 { margin: 10px 0 14px; font-size: clamp(22px, 2.4vw, 28px); font-weight: 300; color: #fff; }
.geste-duo__recit p:not(.surtitre) { margin-bottom: 12px; line-height: 1.65; color: rgba(238, 243, 238, .8); max-width: 58ch; }
.geste-duo__mesure { max-width: 520px; }
.geste-duo__mesure figcaption { margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: rgba(238, 243, 238, .74); }
.geste-duo__mesure figcaption strong { font-weight: 400; color: #fff; }
@media (max-width: 800px) { .geste-duo { grid-template-columns: 1fr; } .geste-duo__portrait { max-width: 340px; margin: 0 auto; } }

/* ==========================================================================
   v17.8 (09/10/2026) : titres avec une virgule (js/main.js, section 24) :
   sur téléphone et tablette, un titre trop long passe à la ligne APRÈS la virgule, jamais au milieu d'un morceau
   ========================================================================== */
@media (max-width: 1024px) { .titre-morceau { display: inline-block; } }

/* Nos racines (v26) : traits dorés au-dessus des trois générations */
.generations .projet__item { border-top-color: rgba(233, 207, 85, .6); }
/* frise en 2 rangées de 4 dates : chaque date porte son morceau de fil d'or (le fil continue d'une date à l'autre) */
.chrono { --g: clamp(14px, 2vw, 24px); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(36px, 4vw, 52px) var(--g); }
.chrono::before { display: none; }
.chrono li::before { z-index: 1; }
.chrono li::after { content: ""; position: absolute; top: 7px; left: 0; right: calc(-1 * var(--g)); height: 1px; background: rgba(233, 207, 85, .55); }
.chrono li:nth-child(4n)::after, .chrono li:last-child::after { right: 0; }
@media (max-width: 1000px) {
  .chrono { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chrono li:nth-child(n)::after { right: calc(-1 * var(--g)); }
  .chrono li:nth-child(2n)::after, .chrono li:last-child::after { right: 0; }
}
@media (max-width: 600px) { .chrono { grid-template-columns: 1fr; } .chrono li::after { display: none; } }
/* « Le regard d'un parfumeur » (préface de J.-P. Guerlain) */
.temoin { max-width: 780px; margin: clamp(56px, 7vw, 88px) auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.temoin__texte { font-size: clamp(19px, 2vw, 24px); font-weight: 300; line-height: 1.45; letter-spacing: -.01em; color: var(--encre); text-wrap: balance; }
.temoin figcaption { font-size: 14px; line-height: 1.5; color: var(--acier); text-wrap: balance; }
.temoin cite { font-style: italic; }
/* Contact (v26) : horaires en petit tableau (js/panier.js, tableauHoraires) */
.horaires { margin: 4px 0 2px; }
.horaires dl { margin: 0; }
.horaires__ligne { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid rgba(var(--sauge-rgb), .3); font-size: 15px; line-height: 1.4; }
.horaires__ligne:last-child { border-bottom: 1px solid rgba(var(--sauge-rgb), .3); }
.horaires dt { color: var(--encre); }
.horaires dd { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 16px; color: var(--acier); font-variant-numeric: tabular-nums; }
.horaires dd span { white-space: nowrap; }
.horaires__note { margin-top: 8px !important; font-size: 13px !important; color: var(--acier); }
/* Contact (v26) : réseaux en petites icônes, moitié de la taille des pictogrammes de la page (42 px → 21 px) */
.reseaux-icones--petites { gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.reseau--clair { width: 21px; height: 21px; border-color: var(--action); color: var(--action); }
.reseau--clair::after { content: ""; position: absolute; inset: -10px; }   /* zone de clic plus large que l'icône */
.reseau--clair svg { width: 11px; height: 11px; stroke-width: 1.8; }
.reseau--clair:hover, .reseau--clair:focus-visible { transform: translateY(-3px); background: var(--action); border-color: var(--action); color: #fff; }
.reseau--clair .reseau__nom { top: calc(100% + 6px); color: var(--action); }

/* ==========================================================================
   v17.9 (09/10/2026) : Engagements : les trois engagements en bulles reliées par un fil (même mécanique que « 1 procédé, 5 objectifs »,
   js/main.js section 21), sur fond clair ; slogan en deux phrases qui ne se coupent jamais au milieu
   ========================================================================== */
.titre-morceau--toujours { display: inline-block; }
.objectifs5--trois { max-width: 1080px; margin-bottom: 0; }
.objectifs5--trois .objectifs5__fil { height: 400px; }
.objectifs5--trois .objectifs5__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.objectifs5--trois .objectif { padding: 0 clamp(12px, 2vw, 28px); }
.objectifs5--trois .objectif--bas { margin-top: 120px; }
.objectifs5--trois .objectif__bulle { width: 210px; height: 262px; margin-bottom: 22px; }   /* photo entière (4:5), seuls les coins s'arrondissent */
.objectifs5--trois .objectif__forme--1 { border-radius: 58% 42% 50% 50% / 44% 50% 50% 56%; }
.objectifs5--trois .objectif__forme--2 { border-radius: 46% 54% 52% 48% / 40% 42% 58% 60%; }
.objectifs5--trois .objectif__forme--3 { border-radius: 52% 48% 44% 20% / 42% 46% 54% 20%; }   /* coin bas gauche presque droit : le flacon reste entier */
.objectifs5--trois .objectif__detail { max-width: 22em; margin-top: 8px; }
.objectifs5--trois .engagement__tags { justify-content: center; margin-top: 14px; }
.objectifs5--clair .objectifs5__fil path { stroke: var(--action); opacity: .5; }
.objectifs5--clair .objectif__forme { border-color: rgba(var(--sauge-rgb), .55); }
.objectifs5--clair .objectif:hover .objectif__forme { border-color: var(--action); }
.objectifs5--clair .objectif__nom { color: var(--action); }
.objectifs5--clair .objectif__chiffre { font-size: clamp(22px, 2.2vw, 26px); font-weight: 300; color: var(--encre); }
.objectifs5--clair .objectif__detail { font-size: 15px; line-height: 1.6; color: var(--texte); }
@media (max-width: 900px) {
  .objectifs5--trois .objectifs5__liste { grid-template-columns: 1fr; gap: 30px; }
  .objectifs5--trois .objectif, .objectifs5--trois .objectif--bas { grid-template-columns: 96px minmax(0, 1fr); padding: 0; margin: 0; }
  .objectifs5--trois .objectif__bulle { width: 96px; height: 120px; grid-row: span 4; margin: 0; }
  .objectifs5--trois .objectif__detail { max-width: none; }
  .objectifs5--trois .engagement__tags { grid-column: 2; justify-content: flex-start; margin-top: 10px; }
  .objectifs5--trois .objectifs5__liste::before { left: 48px; }
  .objectifs5--clair .objectifs5__liste::before { background: linear-gradient(180deg, rgba(var(--sauge-rgb), .15), var(--action), rgba(var(--sauge-rgb), .15)); opacity: .5; }
}

/* ==========================================================================
   v17.10 (09/10/2026) : frises « Du champ au nez » (5 promesses, accueil) et 8 exigences (Engagements, 2 frises de 4, même format animé)
   ========================================================================== */
.frise--promesses .etape__titre { white-space: normal; text-wrap: balance; }
@media (min-width: 1101px) { .frise--promesses .etape__titre { min-height: 2.5em; } }   /* titres sur 1 ou 2 lignes : les textes restent alignés */
.frise__pied { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 56px); }
.frise--quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.frise--quatre .etape__engagement { min-height: 0; color: rgba(238, 243, 238, .78); }
.frise--quatre + .frise--quatre { margin-top: clamp(48px, 5vw, 64px); }
@media (max-width: 1100px) {
  .frise--quatre { grid-template-columns: 1fr; }
  .frise--quatre + .frise--quatre { margin-top: 44px; }
}

/* ==========================================================================
   v17.11 (09/10/2026) : Nos racines : frise alternée (dessus / dessous d'un fil horizontal) sur ordinateur,
   qui défile de gauche à droite sur tablette, verticale sur téléphone ; témoin Guerlain plus aéré
   ========================================================================== */
.chrono__aide { display: none; }
.chrono.chrono--alterne { --rang: 56px; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-template-rows: auto var(--rang) auto; gap: 0; }
.chrono--alterne::before { display: block; position: static; grid-row: 2; grid-column: 1 / -1; align-self: center; height: 1px; background: linear-gradient(90deg, rgba(233, 207, 85, .2), var(--or-mat) 8%, var(--or-mat) 92%, rgba(233, 207, 85, .2)); }
.chrono.chrono--alterne li { padding: 0 18px 0 16px; border-left: 1px solid rgba(233, 207, 85, .55); }
.chrono.chrono--alterne li:nth-child(odd) { grid-row: 1; align-self: end; padding-bottom: 4px; }
.chrono.chrono--alterne li:nth-child(even) { grid-row: 3; align-self: start; padding-top: 4px; }
.chrono--alterne li:nth-child(1) { grid-column: 1 / span 2; } .chrono--alterne li:nth-child(2) { grid-column: 2 / span 2; }
.chrono--alterne li:nth-child(3) { grid-column: 3 / span 2; } .chrono--alterne li:nth-child(4) { grid-column: 4 / span 2; }
.chrono--alterne li:nth-child(5) { grid-column: 5 / span 2; } .chrono--alterne li:nth-child(6) { grid-column: 6 / span 2; }
.chrono--alterne li:nth-child(7) { grid-column: 7 / span 2; } .chrono--alterne li:nth-child(8) { grid-column: 8 / span 2; }
/* trait du texte jusqu'au fil, et point d'or sur le fil */
.chrono.chrono--alterne li::after { display: block; content: ""; position: absolute; left: -1px; right: auto; width: 1px; height: calc(var(--rang) / 2); background: rgba(233, 207, 85, .55); }
.chrono.chrono--alterne li:nth-child(odd)::after { top: 100%; }
.chrono.chrono--alterne li:nth-child(even)::after { top: auto; bottom: 100%; }
.chrono.chrono--alterne li::before { left: -6px; z-index: 1; }
.chrono.chrono--alterne li:nth-child(odd)::before { top: calc(100% + var(--rang) / 2 - 5.5px); }
.chrono.chrono--alterne li:nth-child(even)::before { top: calc(-1 * var(--rang) / 2 - 5.5px); }
.chrono--alterne .chrono__date { margin-bottom: 6px; }
/* tablette : la frise garde son dessin et défile de gauche à droite */
@media (max-width: 1099px) and (min-width: 601px) {
  .chrono__aide { display: block; margin: 0 0 12px; text-align: right; font: 400 12px/1.3 var(--police-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--action); }
  .chrono__aide span { display: inline-block; animation: aide-glisse 1.6s ease-in-out infinite; }
  .chrono-defile { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding-inline: var(--gouttiere); padding: 14px 0 18px; margin: 0 calc(-1 * var(--gouttiere)); padding-inline: var(--gouttiere); }
  .chrono.chrono--alterne { min-width: 1080px; }
  .chrono.chrono--alterne li { scroll-snap-align: start; }
}
@keyframes aide-glisse { 50% { transform: translateX(6px); } }
/* téléphone : frise verticale, un fil à gauche */
@media (max-width: 600px) {
  .chrono.chrono--alterne { display: flex; flex-direction: column; gap: 26px; padding-left: 26px; }
  .chrono--alterne::before { position: absolute; top: 6px; bottom: 6px; left: 5px; width: 1px; height: auto; align-self: stretch; background: linear-gradient(180deg, rgba(233, 207, 85, .25), var(--or-mat), rgba(233, 207, 85, .25)); }
  .chrono.chrono--alterne li, .chrono.chrono--alterne li:nth-child(odd), .chrono.chrono--alterne li:nth-child(even) { align-self: stretch; padding: 0; border-left: 0; }
  .chrono.chrono--alterne li::after { display: none; }
  .chrono.chrono--alterne li:nth-child(odd)::before, .chrono.chrono--alterne li:nth-child(even)::before { top: 2px; left: -26px; }
}
@media (prefers-reduced-motion: reduce) { .chrono__aide span { animation: none; } }
/* témoin Guerlain : une introduction, puis sa phrase en grand, à la première personne */
.temoin { gap: 18px; max-width: 820px; padding: clamp(36px, 5vw, 56px) clamp(20px, 4vw, 48px); border-top: 1px solid rgba(233, 207, 85, .55); border-bottom: 1px solid rgba(233, 207, 85, .55); }
.temoin__intro { max-width: 40em; font-size: 16px; line-height: 1.65; color: var(--texte); text-wrap: balance; }
.temoin__citation { margin: 6px 0; }
.temoin__citation p { font-size: clamp(24px, 3vw, 36px); font-weight: 300; line-height: 1.3; letter-spacing: -.02em; color: var(--encre); text-wrap: balance; }
.temoin__citation p::before { content: "«\00a0"; color: rgba(var(--sauge-rgb), .8); }
.temoin__citation p::after { content: "\00a0»"; color: rgba(var(--sauge-rgb), .8); }
.temoin figcaption strong { font-weight: 400; color: var(--encre); }

/* ==========================================================================
   v17.12 (10/10/2026) : piliers de l'accueil plus petits (x 0,8) et plus aérés ; Engagements : cartes flottantes alternées
   (même carte que l'accueil) + descriptif détaillé et logos des partenaires ; arrivée sur une ancre juste sous l'en-tête
   ========================================================================== */
html { scroll-padding-top: calc(var(--entete-h) + var(--bandeau-h, 0px) + 24px); }
#engagements .piliers { max-width: 960px; margin-inline: auto; gap: clamp(28px, 4.5vw, 64px); }
.eng-lignes { display: flex; flex-direction: column; gap: clamp(72px, 9vw, 120px); max-width: 1080px; margin: clamp(8px, 2vw, 24px) auto 0; }
.eng-ligne { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.eng-ligne--inverse { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
.eng-ligne--inverse .eng-ligne__carte { order: 2; }
.eng-ligne .pilier-col:nth-child(n) { margin-top: 0; }
.eng-ligne .pilier { cursor: default; }
.eng-ligne .pilier__titre { display: block; }
.eng-ligne__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 34em; }
.eng-ligne--inverse .eng-ligne__texte { justify-self: end; }
.eng-ligne__titre { font-size: clamp(24px, 2.6vw, 32px); font-weight: 300; line-height: 1.2; letter-spacing: -.02em; color: var(--encre); text-wrap: balance; }
.eng-ligne__texte > p:not(.surtitre):not(.engagement__tags) { font-size: 16px; line-height: 1.65; color: var(--texte); }
.eng-ligne__texte strong { font-weight: 500; color: var(--encre); }
.eng-ligne__texte .engagement__tags { margin-top: 2px; }
.partenaires { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 8px; padding-top: 18px; border-top: 1px solid rgba(var(--sauge-rgb), .35); }
.partenaires__titre { font: 400 11px/1.2 var(--police-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--action); }
.partenaires__liste { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin: 0; padding: 0; list-style: none; }
.partenaires__liste img { display: block; width: auto; height: 56px; max-width: 150px; object-fit: contain; }
@media (max-width: 900px) {
  .eng-ligne, .eng-ligne--inverse { grid-template-columns: 1fr; gap: 28px; }
  .eng-ligne--inverse .eng-ligne__carte { order: 0; }
  .eng-ligne__carte { width: min(320px, 82vw); margin-inline: auto; }
  .eng-ligne--inverse .eng-ligne__texte { justify-self: start; }
  .partenaires__liste img { height: 48px; }
}

/* ==========================================================================
   v17.13 (10/10/2026) : Nos racines : frise plus contrastée sur fond clair (fil marine fin + fil d'or épais qui se trace,
   points cerclés de marine), animée comme les frises de l'accueil (js/main.js, section 25), dates cliquables : un récit
   apparaît en fondu (sous la frise ; sous la date sur téléphone) ; Guerlain : une phrase par ligne
   ========================================================================== */
.chrono__consigne { margin: 0 0 clamp(24px, 3vw, 36px); text-align: center; font: 400 12px/1.3 var(--police-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--action); }
.chrono.chrono--alterne li { border-left-color: rgba(6, 3, 101, .2); }
.chrono.chrono--alterne li::after { background: rgba(6, 3, 101, .22); }
.chrono--alterne::before { height: 1px; background: rgba(6, 3, 101, .22); }
.chrono--alterne::after { content: ""; display: block; grid-row: 2; grid-column: 1 / -1; align-self: center; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #f2c400, var(--or-logo) 60%, #f2c400); transform-origin: left center; transform: scaleX(var(--p, 1)); transition: transform .9s var(--ressort); pointer-events: none; }
.chrono.chrono--alterne li::before { width: 13px; height: 13px; left: -7px; background: var(--or-logo); border: 2px solid var(--encre); box-shadow: 0 0 0 4px rgba(255, 220, 5, .28); transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .4s var(--rebond); }
.chrono.chrono--alterne li:nth-child(odd)::before { top: calc(100% + var(--rang) / 2 - 6.5px); }
.chrono.chrono--alterne li:nth-child(even)::before { top: calc(-1 * var(--rang) / 2 - 6.5px); }
.chrono--alterne .chrono__date { color: var(--encre); }
.chrono__bouton { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: opacity .6s ease, transform .7s var(--ressort); }
.chrono__bouton:focus-visible { outline: 2px solid var(--action); outline-offset: 6px; border-radius: 4px; }
.chrono__texte { display: block; font-size: 15px; line-height: 1.55; color: var(--texte); }
.chrono__suite { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font: 400 11px/1.2 var(--police-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--action); opacity: .7; transition: opacity .15s ease; }
.chrono__plus-signe { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; border: 1px solid currentColor; font-size: 13px; line-height: 1; transition: transform .25s var(--ressort), background-color .15s ease, color .15s ease; }
.chrono__bouton:hover .chrono__suite, .chrono__bouton:focus-visible .chrono__suite, .chrono__item.choisi .chrono__suite { opacity: 1; }
.chrono__bouton:hover .chrono__plus-signe { background: var(--action); color: #fff; }
.chrono__item.choisi .chrono__plus-signe { transform: rotate(45deg); background: var(--action); color: #fff; }
.chrono.chrono--alterne li.choisi::before { transform: scale(1.3); }
/* avant leur tour : le fil n'est pas tracé, les dates attendent (seulement si les animations sont permises) */
.js-anim .chrono--alterne[data-chrono] { --p: 0; }
.js-anim .chrono--alterne[data-chrono] .chrono__item:not(.actif) .chrono__bouton { opacity: .16; transform: translateY(8px); }
.js-anim .chrono.chrono--alterne[data-chrono] li:not(.actif)::before { background: #fff; border-color: rgba(6, 3, 101, .3); box-shadow: none; }
/* le récit d'une date */
.chrono__recit { position: relative; max-width: 820px; margin: clamp(28px, 3vw, 40px) auto 0; padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 40px); border-radius: var(--rayon); border: 1px solid rgba(var(--sauge-rgb), .38); background: rgba(255, 255, 255, .82); opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .35s var(--ressort); }
.chrono__recit.ouvert { opacity: 1; transform: none; }
.chrono__recit-date { margin: 0 40px 10px 0; font: 400 13px/1.3 var(--police-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--action); }
.chrono__recit-corps p { margin: 0 0 12px; font-size: 17px; font-weight: 300; line-height: 1.7; color: var(--encre); }
.chrono__recit-corps .chrono__source { margin: 6px 0 0; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--acier); }
.chrono__fermer { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(var(--sauge-rgb), .5); background: #fff; color: var(--encre); font-size: 18px; line-height: 1; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.chrono__fermer:hover, .chrono__fermer:focus-visible { background: var(--action); border-color: var(--action); color: #fff; }
@media (max-width: 600px) {
  .chrono--alterne::after { position: absolute; top: 6px; bottom: 6px; left: 4px; width: 3px; height: auto; align-self: stretch; transform-origin: center top; transform: scaleY(var(--p, 1)); background: linear-gradient(180deg, #f2c400, var(--or-logo)); }
  .chrono--alterne::before { left: 5px; background: rgba(6, 3, 101, .22); }
  .chrono.chrono--alterne li:nth-child(odd)::before, .chrono.chrono--alterne li:nth-child(even)::before { top: 2px; left: -27px; }
  .chrono__recit { margin: 14px 0 0; padding: 18px 18px 16px; }
  .chrono__recit-corps p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .chrono__recit, .chrono__bouton, .chrono--alterne::after { transition: none; } }
/* Guerlain : une phrase par ligne */
.temoin__intro > span { display: block; }

/* ==========================================================================
   v17.14 (10/10/2026) : frise de Nos racines sur 10 dates, fil et points plus fins ; apparitions plus rapides
   (images sans flou) ; photos de Nos racines calées sur leur badge ; témoin Guerlain
   ========================================================================== */
.chrono.chrono--alterne { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.chrono--alterne li:nth-child(9) { grid-column: 9 / span 2; } .chrono--alterne li:nth-child(10) { grid-column: 10 / span 2; }
.chrono.chrono--alterne li { padding: 0 12px 0 14px; }
.chrono--alterne .chrono__texte { font-size: 14.5px; }
.chrono--alterne::before { background: rgba(6, 3, 101, .16); }
.chrono--alterne::after { height: 1.5px; border-radius: 1px; background: linear-gradient(90deg, #e9bc00, #f5cf00 50%, #e9bc00); }
.chrono.chrono--alterne li::before { width: 9px; height: 9px; left: -5px; border-width: 1px; box-shadow: 0 0 0 3px rgba(255, 220, 5, .22); }
.chrono.chrono--alterne li:nth-child(odd)::before { top: calc(100% + var(--rang) / 2 - 4.5px); }
.chrono.chrono--alterne li:nth-child(even)::before { top: calc(-1 * var(--rang) / 2 - 4.5px); }
.chrono.chrono--alterne li.choisi::before { transform: scale(1.35); }
@media (max-width: 1099px) and (min-width: 601px) { .chrono.chrono--alterne { min-width: 1320px; } }
@media (max-width: 600px) {
  .chrono--alterne::after { width: 1.5px; left: 5px; }
  .chrono.chrono--alterne li:nth-child(odd)::before, .chrono.chrono--alterne li:nth-child(even)::before { top: 4px; left: -25px; }
}
.temoin__suite { font-size: 16px; line-height: 1.6; color: var(--texte); }
/* apparitions : plus rapides, et sans flou pour les blocs avec image (le flou d'une grande image ralentit les téléphones) */
[data-revele].revele { transition: opacity .7s var(--ressort), transform .8s var(--ressort), filter .7s var(--ressort); }
[data-revele].sans-flou { filter: none; }
[data-revele].sans-flou:not(.revele) { transform: translateY(14px); }
/* Nos racines : chaque photo commence à la hauteur de son badge (« La relève », « Le chemin de Kassim », « Mayotte, l'île sœur ») ;
   la photo de Tasnime finit à la hauteur de la légende de Younous (largeur calculée par js/main.js, section 27) */
.chemin { align-items: start; }
.chemin__texte > .surtitre:first-child, .geste-duo__recit > .surtitre:first-child { display: flex; width: -webkit-fit-content; width: fit-content; margin-top: 0; }   /* bloc : plus de décalage dû à la ligne de texte */
.geste-duo__portrait img { height: auto; }

/* ==========================================================================
   v17.15 (10/10/2026) : pages légales finales : « Renoncer au contrat ici » (déclaration puis confirmation),
   formulaire « être prévenu » de la page livraison
   ========================================================================== */
.legal__intro { font-size: 17px; line-height: 1.65; color: var(--encre); max-width: 46em; }
.legal .formulaire { margin: 24px 0 8px; }
.legal .formulaire h2.formulaire__titre { margin-top: 0; }
.formulaire--compact { max-width: 640px; }
.retractation { max-width: 760px; }
.retractation [data-etape] > .formulaire__titre { margin-bottom: 18px; }
.retractation__recap { display: grid; gap: 0; margin: 0 0 16px; border-top: 1px solid var(--givre); }
.retractation__recap > div { display: grid; grid-template-columns: minmax(0, 12em) minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--givre); }
.retractation__recap dt { color: var(--acier); font-size: 14px; }
.retractation__recap dd { margin: 0; color: var(--encre); overflow-wrap: anywhere; white-space: pre-line; }
.retractation .formulaire__pied { gap: 10px; flex-wrap: wrap; }
@media (max-width: 600px) { .retractation__recap > div { grid-template-columns: 1fr; gap: 2px; } }


/* ---------- v17.16 (Kassim, 11/10) : au défilement, le menu devient un ENCADRÉ blanc flottant (comme Stripe)
   au lieu d'une bande sur toute la largeur ; filets fins dégradés en croix aux coins (ils ne font pas
   toute la hauteur). Ordinateur et tablette ; le téléphone garde sa barre. ---------- */
@media (min-width: 901px) {
  .entete, .entete--givre { background: transparent; border-bottom-color: transparent; }
  .entete__barre {
    position: relative; height: 56px; padding-inline: 18px 10px;
    border-radius: 6px;
    transition: background-color .35s ease;
  }
  .entete--givre .entete__barre { background: rgba(255, 255, 255, .97); }
  .entete__barre::before, .entete__barre::after {
    content: ""; position: absolute; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  }
  /* filets verticaux de part et d'autre de l'encadré, à 6 px de lui (même écart que le filet horizontal),
     qui s'effacent vers le haut et vers le bas */
  .entete__barre::before {
    top: -24px; bottom: -70px; left: -6px; right: -6px;
    border-inline: 1px solid transparent;
    border-image: linear-gradient(to bottom, rgba(6, 3, 101, 0), rgba(6, 3, 101, .14) 30%, rgba(6, 3, 101, .14) 55%, rgba(6, 3, 101, 0)) 1;
  }
  /* filet horizontal sous l'encadré, qui dépasse et s'efface sur les côtés : il forme la croix aux coins */
  .entete__barre::after {
    left: -54px; right: -54px; bottom: -7px; height: 1px;
    background: linear-gradient(to right, rgba(6, 3, 101, 0), rgba(6, 3, 101, .14) 48px, rgba(6, 3, 101, .14) calc(100% - 48px), rgba(6, 3, 101, 0));
  }
  .entete--givre .entete__barre::before, .entete--givre .entete__barre::after { opacity: 1; }
  /* v17.19 (Kassim, 11/10) : la barre des filtres colle juste sous la ligne horizontale de la croix (bas de l'encadré + 7 px),
     et ses pastilles sont à 6 px de son bord, comme l'encadré du menu est à 6 px de la ligne */
  .boutique-barre { top: calc(var(--entete-h) - 1px); }
  .boutique-barre__contenu { padding-block: 6px; }
}

/* ---------- v17.17 : badges d'état sur les photos = mêmes couleurs que l'Espace gestion (point + teinte) ---------- */
.badge--bientot, .produit__badge--bientot { background: #e3f0fc; color: #0d5c9b; }
.badge--epuise, .produit__badge--epuise { background: #f8ebeb; color: #a4262c; }
.badge--bientot, .badge--epuise, .produit__badge--bientot, .produit__badge--epuise { gap: 6px; }
.badge--bientot::before, .badge--epuise::before, .produit__badge--bientot::before, .produit__badge--epuise::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0;
}
.produit__badge--bientot, .produit__badge--epuise { display: inline-flex; align-items: center; }
/* panier : lieu de remise oublié */
.panier__lieu-erreur { display: block; font-size: 13.5px; color: #a4262c; }
.panier__lieu select[aria-invalid="true"] { border-color: #a4262c; }

/* ---------- v17.18 : page « merci » (après le paiement) ---------- */
.merci-haut .t-titre-lg { margin-bottom: 14px; }
.merci-recap { display: grid; gap: 0; width: min(100%, 560px); margin: 26px auto 0; padding: 6px 22px; border-radius: var(--rayon); background: rgba(255, 255, 255, .78); text-align: left; }
.merci-recap > div { display: grid; grid-template-columns: 11em 1fr; gap: 14px; padding: 13px 0; border-top: 1px solid var(--givre); }
.merci-recap > div:first-child { border-top: 0; }
.merci-recap dt { font: 400 11px/1.6 var(--police-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ardoise); }
.merci-recap dd { margin: 0; font-size: 15.5px; color: var(--encre); overflow-wrap: anywhere; }
.merci-haut .page-haut__actions { margin-top: 30px; }
.merci-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); margin-top: 8px; }
/* v17.21 : cartes carrées (la photo entière tient sans couper le sujet), titre sur un dégradé vert, texte au survol
   (comme le voile des cartes produits) ; elles flottent doucement */
.merci-carte { position: relative; display: block; aspect-ratio: 1; border-radius: var(--rayon); overflow: hidden; color: #fff; text-decoration: none; animation: flotter 9s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -3s); }
.merci-carte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ressort), filter .3s ease; }
.merci-carte:hover img, .merci-carte:focus-visible img { filter: saturate(1.1) brightness(1.04); }
.merci-carte__voile { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; padding: 40px 22px 18px; background: linear-gradient(180deg, rgba(15, 74, 54, 0) 0%, rgba(15, 74, 54, .5) 45%, rgba(10, 42, 33, .92) 100%); }
.merci-carte__titre { font-size: 21px; letter-spacing: -0.02em; }
.merci-carte__texte { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s var(--ressort), opacity .3s ease, margin .45s var(--ressort); }
.merci-carte__texte > span { overflow: hidden; min-height: 0; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.merci-carte__lien { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font: 400 11px/1 var(--police-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--or-mat); opacity: 0; transform: translateY(6px); transition: opacity .3s ease .05s, transform .4s var(--ressort) .05s; }
.merci-carte:hover .merci-carte__texte, .merci-carte:focus-visible .merci-carte__texte { grid-template-rows: 1fr; opacity: 1; margin-top: 8px; }
.merci-carte:hover .merci-carte__lien, .merci-carte:focus-visible .merci-carte__lien { opacity: 1; transform: none; }
.merci-carte:hover .fleche__tige, .merci-carte:focus-visible .fleche__tige { opacity: 1; }
.merci-carte:hover .fleche__pointe, .merci-carte:focus-visible .fleche__pointe { transform: translateX(3px); }
@media (hover: none) {
  .merci-carte__texte { grid-template-rows: 1fr; opacity: 1; margin-top: 8px; }
  .merci-carte__lien { opacity: 1; transform: none; }
}
.merci-suivre { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: clamp(48px, 6vw, 72px); }
.merci-suivre__titre { font: 400 11px/1.3 var(--police-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ardoise); }
@media (max-width: 760px) {
  .merci-cartes { grid-template-columns: 1fr; }
  .merci-recap > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ==========================================================================
   v17.20 (12/10/2026) : PAGE DE PAIEMENT du site (paiement.html, js/paiement.js)
   À gauche le récapitulatif sur le vert du bouton « Commander » (luxe, comme les grandes maisons),
   à droite les coordonnées et le paiement sur le vert-gris clair. Champs blancs, filets fins, pas d'ombre.
   ========================================================================== */
.caisse-page { background: #f1f5f2; }
.caisse { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); min-height: 100vh; min-height: 100dvh; }
.caisse__resume { position: relative; background: var(--action); color: #fff; }
.caisse__paiement { background: #f1f5f2; color: var(--texte); }
.caisse__int { width: min(100%, 520px); padding: clamp(28px, 4vw, 56px) clamp(20px, 3.4vw, 48px) 64px; }
.caisse__resume .caisse__int { width: min(100%, 600px); margin-left: auto; }
.caisse__retour { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255, 255, 255, .72); text-decoration: none; transition: color .2s ease; }
.caisse__retour svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.caisse__retour:hover { color: #fff; }
.caisse__marque { margin: 30px 0 34px; }
.caisse__logo { display: inline-flex; }
.caisse__logo .logo-anime { height: 30px; transform: none; }   /* même taille que le pied de page */
.caisse__logo::before { background: radial-gradient(closest-side, rgba(255, 255, 255, .16), rgba(62, 153, 20, .14) 55%, rgba(255, 255, 255, 0)); }
.caisse__slogan { margin: 7px 0 0; }   /* 14 px sous le logo, comme dans le pied de page */
.caisse__test { display: inline-block; margin: 0 0 18px; padding: 4px 11px; border-radius: var(--rayon-pilule); background: var(--or-logo); color: var(--encre); font: 400 11px/1.3 var(--police-ui); letter-spacing: .08em; text-transform: uppercase; }
.caisse__titre { margin: 0 0 18px; font-size: clamp(24px, 2.2vw, 30px); font-weight: 300; letter-spacing: -0.02em; color: #fff; }
.caisse__h2 { margin: 34px 0 14px; font-size: 18px; font-weight: 400; letter-spacing: -0.015em; color: inherit; }
.caisse__h2:first-child { margin-top: 0; }
.caisse__attente { color: rgba(255, 255, 255, .72); font-size: 15px; }
.caisse__paiement .caisse__attente { color: var(--acier); }

/* tableau Article | Prix unitaire | Quantité | Total */
.caisse__table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.caisse__table th { padding: 0 0 10px; text-align: right; font: 400 10.5px/1.3 var(--police-ui); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); border-bottom: 1px solid rgba(255, 255, 255, .16); }
.caisse__table th:first-child { text-align: left; }
.caisse__table th { white-space: nowrap; }
.caisse__table td { padding: 16px 0; text-align: right; vertical-align: middle; border-bottom: 1px solid rgba(255, 255, 255, .12); white-space: nowrap; }
.caisse__table td + td, .caisse__table th + th { padding-left: 12px; }
.caisse__table th:first-child, .caisse__article { width: 100%; }
.caisse__table s { color: rgba(255, 255, 255, .5); font-size: 13px; }
.caisse__article { text-align: left !important; white-space: normal !important; }
.caisse__article { display: flex; align-items: center; gap: 12px; }
.caisse__article img, .caisse__vignette { flex-shrink: 0; width: 44px; height: 70px; border-radius: 8px; object-fit: cover; background: rgba(255, 255, 255, .1); }
.caisse__article > span { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.caisse__article strong { font-weight: 400; font-size: 15px; line-height: 1.3; }
.caisse__article small { font-size: 12.5px; color: rgba(255, 255, 255, .62); }
.caisse__retirer { margin-top: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: rgba(255, 255, 255, .55); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.caisse__retirer:hover { color: #fff; }
.caisse__qte { display: inline-flex; align-items: center; border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--rayon-btn); }
.caisse__qte button { width: 30px; height: 30px; padding: 0; border: 0; background: none; font: 300 17px/1 var(--police); color: #fff; cursor: pointer; transition: background-color .15s ease; }
.caisse__qte button:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
.caisse__qte button:disabled { opacity: .3; cursor: default; }
.caisse__qte output { min-width: 26px; text-align: center; font-size: 14.5px; }
.caisse__montant { font-size: 15px; }

.caisse__totaux { margin: 6px 0 0; }
.caisse__totaux > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.caisse__totaux dt small { display: block; margin-top: 2px; font-size: 12.5px; color: rgba(255, 255, 255, .62); }
.caisse__totaux dd { margin: 0; white-space: nowrap; }
.caisse__total { margin-top: 6px; padding-top: 16px !important; border-top: 1px solid rgba(255, 255, 255, .22); }
.caisse__total dt { font-size: 17px; }
.caisse__total dd { font-size: 26px; font-weight: 300; letter-spacing: -0.02em; }
.caisse__tva { margin: 4px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .55); }

/* propositions : petites cartes flottantes avec photo */
.caisse__propositions { margin-top: 40px; }
.caisse__cartes { display: flex; flex-direction: column; gap: 12px; }
.caisse-carte { display: flex; gap: 14px; padding: 12px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--rayon); background: rgba(255, 255, 255, .06); animation: caisse-flotter 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -2.3s); transition: background-color .2s ease, border-color .2s ease; }
.caisse-carte:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .26); }
.caisse-carte img { flex-shrink: 0; width: 64px; height: 102px; border-radius: 10px; object-fit: cover; }
.caisse-carte__corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.caisse-carte__corps strong { font-weight: 400; font-size: 15px; }
.caisse-carte__corps small { font-size: 12.5px; color: rgba(255, 255, 255, .62); }
.caisse-carte__corps p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .82); }
.caisse-carte__pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 10px; font-variant-numeric: tabular-nums; }
.caisse-carte__ajouter { padding: 7px 12px; border: 1px solid rgba(255, 255, 255, .4); border-radius: var(--rayon-btn); background: none; font: 400 13.5px/1 var(--police); color: #fff; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.caisse-carte__ajouter:hover { background: #fff; color: var(--action); }
.caisse__btn-clair { margin-top: 16px; color: #fff; border-color: rgba(255, 255, 255, .5); }

/* formulaire (côté clair) : champs blancs, filets fins, jamais le jaune de remplissage automatique */
.caisse__form { display: block; }
.caisse__form--occupe { opacity: .75; }
.caisse__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.caisse__grille + .caisse__grille, .caisse__lieu + .caisse__grille { margin-top: 12px; }
.caisse__champ { display: flex; flex-direction: column; gap: 6px; }
.caisse__champ--large { grid-column: 1 / -1; }
.caisse__champ > span { font-size: 13.5px; color: var(--acier); }
.caisse__champ small { font-size: 12.5px; color: var(--ardoise); }
.caisse__champ input, .caisse__champ select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--mousse); border-radius: var(--rayon-btn); background: #fff;
  font: 400 15px/1.3 var(--police); color: var(--texte); transition: border-color .15s ease, box-shadow .15s ease;
}
.caisse__champ select { -webkit-appearance: none; appearance: none; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2 3.5l3 3 3-3' fill='none' stroke='%23060365' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 14px center / 10px; padding-right: 36px; }
.caisse__champ input:focus, .caisse__champ select:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px rgba(15, 74, 54, .12); }
.caisse__champ input:-webkit-autofill, .caisse__champ input:-webkit-autofill:hover, .caisse__champ input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset; -webkit-text-fill-color: var(--texte); caret-color: var(--texte); transition: background-color 9999s ease-out;
}
.caisse__form--verifie .caisse__champ input:invalid, .caisse__form--verifie .caisse__champ select:invalid { border-color: var(--danger, #a4262c); }
.caisse__lieu { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--mousse); border-radius: var(--rayon-btn); background: rgba(255, 255, 255, .6); }
.caisse__lieu svg { flex-shrink: 0; width: 22px; height: 22px; fill: none; stroke: var(--action); stroke-width: 1.5; stroke-linejoin: round; }
.caisse__lieu > div { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.caisse__lieu strong { font-weight: 500; font-size: 15px; color: var(--encre); }
.caisse__lieu span { font-size: 13px; color: var(--acier); }
.caisse__lieu-changer { font-size: 13px; color: var(--action); }
.caisse__carte { min-height: 120px; }
.caisse__case { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--texte); cursor: pointer; }
.caisse__case input { flex-shrink: 0; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--action); }
.caisse__case a { color: var(--action); }
.caisse__form--verifie .caisse__case input:invalid + span { color: var(--danger, #a4262c); }
.caisse__payer { width: 100%; margin-top: 24px; padding-block: 15px; font-size: 16px; justify-content: center; }
.caisse__payer:disabled { opacity: .55; cursor: default; }
.caisse__message { min-height: 1.4em; margin: 12px 0 0; font-size: 14px; color: var(--danger, #a4262c); }
.caisse__securite { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 12.5px; color: var(--ardoise); }
.caisse__securite svg { flex-shrink: 0; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; }

@media (max-width: 900px) {
  .caisse { grid-template-columns: 1fr; }
  .caisse__int { width: 100%; max-width: 620px; margin-inline: auto !important; padding-bottom: 40px; }
}
@media (max-width: 560px) {
  .caisse__grille { grid-template-columns: 1fr; }
  .caisse__table thead { display: none; }
  .caisse__table, .caisse__table tbody { display: block; }
  .caisse__table tr { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .caisse__table td { padding: 0 !important; border: 0; }
  .caisse__article { grid-column: 1 / -1; }
  .caisse__table td[data-titre="Prix unitaire"] { display: none; }
  .caisse__table td[data-titre="Quantité"] { text-align: left; }
}
@keyframes caisse-flotter { 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .caisse-carte { animation: none; } }

/* ==========================================================================
   v17.21 (12/10/2026) : GOUTTE ANIMÉE D'ATTENTE (idée de Kassim, tout le site ; js/goutte.js la dessine)
   Cycle de 1,4 s : la goutte s'écrase pour prendre son élan, saute, retombe et s'écrase à l'atterrissage ;
   pendant le saut, les bulles d'or s'envolent et la tige verte ondule ; l'ombre rétrécit quand elle est en l'air.
   ========================================================================== */
.goutte-attente { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 27px; color: var(--acier); }
.goutte-attente__corps { display: block; width: 24px; height: 38px; transform-origin: 50% 100%; animation: ga-saut 1.4s infinite; }
.goutte-attente__corps svg { display: block; width: 100%; height: 100%; overflow: visible; }
.goutte-attente .ga-tige { transform-box: fill-box; transform-origin: 50% 100%; animation: ga-tige 1.4s ease-in-out infinite; }
.goutte-attente .ga-bulle { transform-box: fill-box; transform-origin: 50% 50%; animation: ga-bulle 1.4s ease-out infinite; }
.goutte-attente .ga-bulle:nth-last-of-type(2) { animation-delay: .07s; }
.goutte-attente .ga-bulle:nth-last-of-type(3) { animation-delay: .14s; }
.goutte-attente__ombre { display: block; width: 22px; height: 5px; margin-top: -8px; border-radius: 50%; background: rgba(6, 3, 101, .16); animation: ga-ombre 1.4s infinite; }
.goutte-attente__texte { font-size: 14.5px; }
.goutte-attente--claire { color: rgba(255, 255, 255, .8); }
.goutte-attente--claire .goutte-attente__ombre { background: rgba(0, 0, 0, .28); }
.goutte-attente--claire svg path:first-child { fill: #fff; }   /* sur fond sombre : la goutte en blanc, comme le logo du pied de page */
.goutte-attente--petite { padding-top: 19px; }
.goutte-attente--petite .goutte-attente__corps { width: 18px; height: 27px; }
.goutte-attente--petite .goutte-attente__ombre { width: 16px; height: 4px; margin-top: -6px; }
@keyframes ga-saut {
  0%   { transform: translateY(0) scale(1, 1); animation-timing-function: ease-in; }
  14%  { transform: translateY(0) scale(1.16, .82); animation-timing-function: cubic-bezier(.2, .7, .35, 1); }   /* s'écrase pour prendre l'élan */
  46%  { transform: translateY(-24px) scale(.95, 1.06); animation-timing-function: cubic-bezier(.55, 0, .85, .35); } /* au sommet */
  76%  { transform: translateY(0) scale(.95, 1.06); animation-timing-function: ease-out; }                        /* touche le sol */
  86%  { transform: translateY(0) scale(1.12, .86); animation-timing-function: ease-out; }                        /* s'écrase */
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes ga-ombre {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  14%, 86% { transform: scaleX(1.18); opacity: 1; }
  46%      { transform: scaleX(.5); opacity: .4; }
  76%      { transform: scaleX(1); opacity: 1; }
}
@keyframes ga-bulle {
  0%, 14% { transform: translateY(0) scale(1); opacity: 1; }
  52%     { transform: translateY(-140px) scale(1.45); opacity: 0; }
  53%     { transform: translateY(30px) scale(.3); opacity: 0; }
  82%, 100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes ga-tige {
  0%, 100% { transform: rotate(0); }
  14%      { transform: rotate(5deg); }
  46%      { transform: rotate(-10deg); }
  76%      { transform: rotate(3deg); }
  86%      { transform: rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .goutte-attente__corps { animation: ga-pouls 1.6s ease-in-out infinite; }
  .goutte-attente .ga-tige, .goutte-attente .ga-bulle, .goutte-attente__ombre { animation: none; }
  @keyframes ga-pouls { 50% { opacity: .45; } }
}

/* page de paiement v1.1 : zone de livraison en deux boutons, titre « Paiement sécurisé », voile pendant le paiement */
.caisse__zones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.caisse__zones button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 12px 14px; min-width: 0;
  border: 1px solid var(--mousse); border-radius: var(--rayon-btn); background: #fff; font: 400 14.5px/1.35 var(--police); text-align: left; color: var(--encre); cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.caisse__zones button > span { overflow-wrap: anywhere; }
.caisse__zones .caisse__zone-prix { margin-top: 4px; color: var(--acier); font-variant-numeric: tabular-nums; }
.caisse__zones button:hover { border-color: var(--action); }
.caisse__zones button[aria-checked="true"] { background: var(--action); border-color: var(--action); color: #fff; }
.caisse__zones button[aria-checked="true"] .caisse__zone-prix { color: rgba(255, 255, 255, .8); }
.caisse__aide { margin: 10px 0 14px; font-size: 13px; line-height: 1.5; color: var(--ardoise); }
.caisse__h2--cadenas { display: flex; align-items: center; gap: 8px; }
.caisse__h2--cadenas svg { width: 15px; height: 15px; fill: none; stroke: var(--action); stroke-width: 1.4; }
.caisse__carte { display: flex; justify-content: center; }
.caisse__carte > div, .caisse__carte iframe { width: 100%; }
.caisse__carte .goutte-attente { padding-block: 26px 10px; }
.caisse-voile { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: rgba(241, 245, 242, .95); }
.caisse-voile p { margin: 0; font-size: 15px; color: var(--encre); }
@media (max-width: 420px) { .caisse__zones button { padding: 10px; font-size: 13.5px; } }

/* v17.23 (13/10) : rubrique « Synergies » des fiches d'huiles essentielles */
.synergies { display: grid; gap: 10px; }
.synergie { padding: 14px 16px; border: 1px solid var(--givre); border-radius: 12px; background: rgba(255, 255, 255, .6); font-size: 15px; line-height: 1.55; }
.synergie p { margin: 0; }
.synergie__titre { margin-bottom: 4px !important; font: 400 11px/1.3 var(--police-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--action); }

/* v17.24 (13/10) : « Notre héritage » en rubrique à part sous « Notre réponse » (même fond forêt) */
.heritage { margin-top: clamp(20px, 3vw, 36px); }
/* trait d'or de « 3 générations » : même longueur que ceux des trois chiffres au-dessus, centré */
.heritage .chiffre--large::after { width: calc((100% - 2 * clamp(28px, 4vw, 56px)) / 3); left: 50%; margin-left: calc((100% - 2 * clamp(28px, 4vw, 56px)) / -6); }
.heritage .chiffre--large::before { display: none; }
@media (max-width: 900px) { .heritage .chiffre--large::after { width: 100%; left: 0; margin-left: 0; } }   /* une colonne : trait pleine largeur, comme les chiffres au-dessus */

/* ==========================================================================
   v17.25 (13/10/2026) : PAGE « BIENTÔT » (bientot.html, jusqu'au 14/10 à 9 h, heure de Mayotte)
   Plein écran : la fleur d'ylang-ylang sous un voile vert forêt, bulles d'or qui montent, logo et slogan du pied de page,
   compte à rebours, inscription « me prévenir ». Pas de défilement sur ordinateur.
   ========================================================================== */
.bientot-page { background: var(--foret-profond); }
.bientot { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 56px var(--gouttiere) 72px; color: #fff; text-align: center; background: var(--foret); }
.bientot__fond { position: absolute; inset: 0; z-index: 0; }
.bientot__fond img { width: 100%; height: 100%; object-fit: cover; object-position: 28% 50%; opacity: .62; }   /* la fleur à 6 pétales reste visible, même sur téléphone */
.bientot__fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 42, 33, .35) 0%, rgba(10, 42, 33, .78) 42%, rgba(10, 42, 33, .86) 62%, rgba(10, 42, 33, .7) 100%), linear-gradient(180deg, rgba(10, 42, 33, .15), rgba(10, 42, 33, .7)); }   /* fleur plus visible à gauche, texte bien lisible au centre */
.bientot__bulles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.bientot__bulles span { position: absolute; bottom: -20px; width: 8px; height: 8px; border-radius: 50%; background: var(--or-logo); opacity: 0; animation: bientot-bulle 14s linear infinite; }
.bientot__bulles span:nth-child(1) { left: 12%; animation-delay: 0s; }
.bientot__bulles span:nth-child(2) { left: 27%; width: 5px; height: 5px; animation-delay: -4s; animation-duration: 17s; }
.bientot__bulles span:nth-child(3) { left: 44%; width: 11px; height: 11px; animation-delay: -9s; }
.bientot__bulles span:nth-child(4) { left: 58%; width: 6px; height: 6px; animation-delay: -2s; animation-duration: 19s; }
.bientot__bulles span:nth-child(5) { left: 71%; animation-delay: -12s; animation-duration: 15s; }
.bientot__bulles span:nth-child(6) { left: 84%; width: 5px; height: 5px; animation-delay: -6s; }
.bientot__bulles span:nth-child(7) { left: 92%; width: 9px; height: 9px; animation-delay: -15s; animation-duration: 21s; }
@keyframes bientot-bulle { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: .55; } 80% { opacity: .35; } 100% { transform: translateY(-105vh); opacity: 0; } }
.bientot__contenu { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: min(100%, 720px); }
.bientot__logo { display: inline-flex; }
.bientot__logo .logo-anime { height: 40px; transform: none; }
.bientot__logo .logo-anime { overflow: visible; }
/* les trois bulles du logo montent et s'effacent EN CONTINU, décalées d'un tiers de cycle : jamais de pause */
.bientot__logo .logo-anime__bulle { animation: bientot-logo-bulle 3.6s cubic-bezier(.35, .1, .55, 1) infinite; }
.bientot__logo .logo-anime__bulle:nth-of-type(2) { animation-delay: -1.2s; }
.bientot__logo .logo-anime__bulle:nth-of-type(3) { animation-delay: -2.4s; }
@keyframes bientot-logo-bulle {
  0%   { transform: translateY(30px) scale(.4); opacity: 0; }
  18%  { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-260px) scale(1.35); opacity: 0; }
}
.bientot__slogan { margin: 9px 0 0; }
.bientot__date { margin: clamp(36px, 6vh, 64px) 0 16px; font: 400 11.5px/1.4 var(--police-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--or-mat); }
.bientot__titre { margin: 0 0 18px; font-size: var(--titre-hero); font-weight: 300; line-height: 1.12; letter-spacing: -0.025em; color: #fff; text-wrap: balance; }
.bientot__texte { max-width: 34em; margin: 0 0 clamp(28px, 5vh, 44px); font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .82); }
.bientot__compte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 2.4vw, 24px); width: min(100%, 520px); margin-bottom: clamp(28px, 5vh, 44px); }
.bientot__compte div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 6px 14px; border-top: 1px solid rgba(233, 207, 85, .55); }
.bientot__compte span { font-size: clamp(34px, 6vw, 54px); font-weight: 300; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.bientot__compte small { font: 400 10.5px/1.3 var(--police-ui); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.bientot__form { display: flex; gap: 8px; width: min(100%, 460px); }
.bientot__form input[type=email] { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--rayon-btn); background: rgba(255, 255, 255, .08); font: 400 15px/1.3 var(--police); color: #fff; }
.bientot__form input[type=email]::placeholder { color: rgba(255, 255, 255, .55); }
.bientot__form input[type=email]:focus { outline: none; border-color: var(--or-mat); }
.bientot__form .btn { flex-shrink: 0; background: var(--or-logo); border-color: var(--or-logo); color: var(--encre); }
.bientot__form .btn:hover { background: #ffe44d; }
.bientot__mention { margin: 10px 0 0; max-width: 34em; font-size: 12.5px; color: rgba(255, 255, 255, .6); }
.bientot__mention a, .bientot__legal a { color: inherit; }
.bientot__merci { margin: 0; font-size: 16px; color: var(--or-mat); }
.bientot__reseaux { display: flex; gap: 14px; margin: clamp(28px, 5vh, 40px) 0 0; padding: 0; list-style: none; }
.bientot__reseaux a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; color: #fff; transition: border-color .2s ease, background-color .2s ease; }
.bientot__reseaux a:hover { border-color: var(--or-mat); background: rgba(255, 255, 255, .06); }
.bientot__reseaux svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bientot__reseaux svg .plein { fill: currentColor; stroke: none; }
.bientot__legal { position: absolute; z-index: 2; bottom: 18px; left: 0; right: 0; margin: 0; font-size: 12px; color: rgba(255, 255, 255, .45); }
@media (max-width: 520px) {
  .bientot__form { flex-direction: column; }
  .bientot__compte div { padding-inline: 2px; }
}
@media (prefers-reduced-motion: reduce) { .bientot__bulles span, .bientot__logo .logo-anime__bulle { animation: none; } .bientot__bulles { display: none; } }
.bientot .em-degrade { background-image: linear-gradient(100deg, #ffdc05 10%, #e9cf55 45%, #9fd27c 95%) !important; -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }   /* « Mayotte » lisible sur le fond sombre */

/* v17.26 (13/10) : icônes à main levée, plus détaillées que les anciens pictogrammes : plus grandes pour rester lisibles */
.picto__rond .icone { width: 44px; height: 44px; }
.icone { width: 30px; height: 30px; }

/* ==========================================================================
   v17.27 (13/10/2026) : BANDE D'INFORMATION DÉFILANTE au-dessus du menu (toutes les pages à en-tête)
   Fine bande vert forêt, texte en petites capitales qui défile en continu ; le menu et la page descendent d'autant.
   ========================================================================== */
:root { --bandeau-h: 30px; }
body:has(.bandeau-info) { padding-top: var(--bandeau-h); }
body:has(.bandeau-info) .entete { top: var(--bandeau-h); }
body:has(.bandeau-info) .boutique-barre { top: calc(var(--entete-h) + var(--bandeau-h)); }
@media (min-width: 901px) { body:has(.bandeau-info) .boutique-barre { top: calc(var(--entete-h) + var(--bandeau-h) - 1px); } }
body:has(.bandeau-info) .boutique-barre::before { height: calc(var(--entete-h) + var(--bandeau-h)); }
.bandeau-info { position: fixed; top: 0; left: 0; right: 0; z-index: 99; height: var(--bandeau-h); overflow: hidden; display: flex; align-items: center; background: var(--foret); color: rgba(255, 255, 255, .88); font: 400 10.5px/1 var(--police-ui); letter-spacing: .14em; text-transform: uppercase; }
.bandeau-info__piste { display: flex; width: max-content; animation: bandeau-defile 60s linear infinite; }
.bandeau-info__piste > div { display: flex; align-items: center; flex-shrink: 0; }
.bandeau-info__piste span:not(.bandeau-info__point) { white-space: nowrap; }
.bandeau-info__point { display: inline-block; width: 4px; height: 4px; margin: 0 22px; border-radius: 50%; background: var(--or-logo); }
.bandeau-info:hover .bandeau-info__piste { animation-play-state: paused; }
@keyframes bandeau-defile { to { transform: translateX(-50%); } }
@media (max-width: 900px) { body:has(.bandeau-info) .menu-mobile { padding-top: calc(var(--entete-h) + var(--bandeau-h) + 28px); } }
@media (prefers-reduced-motion: reduce) { .bandeau-info__piste { animation: none; } }

/* v17.28 (13/10) : une section hors de l'écran met ses animations décoratives en pause (classe posée par main.js, section 29) */
.anim-pause, .anim-pause *, .anim-pause *::before, .anim-pause *::after { animation-play-state: paused !important; }