/* =========================================================================
   MARIE LOULOU COOKIES — feuille de style principale
   Organisation : 1.Polices  2.Tokens  3.Reset/base  4.Typo utilitaires
   5.Boutons  6.Nav  7.Hero  8.Histoire  9.Cookies  10.Boissons
   11.Galerie  12.Avis  13.Me trouver  14.Motif+Footer  15.Banniere cookies
   16.Lightbox  17.Reveal/animations  18.Responsive  19.Reduced-motion
   Charte : vert #008B50 · roses · beige #FFF1E4 · caramel #D16F28
   ========================================================================= */

/* ---------- 1. POLICES (auto-hebergees) --------------------------------- */
@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Vibur";
  src: url("../fonts/vibur.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* declaree en couleur animable : permet a .carousel__glow de transitionner
   nativement (compositeur) entre deux boissons au lieu d'etre recalculee en
   JS a chaque frame de scroll. */
@property --glow-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #ffffff;
}

/* ---------- 2. TOKENS ---------------------------------------------------- */
:root {
  /* couleurs de marque */
  --vert: #008B50;
  --vert-fonce: #04502f;
  --rose-pastel: #F6B6CE;
  --rose-vif: #F695C2;
  --rose-vichy: #F8B2D6;
  /* Surface des cartes cookies uniquement : le rose de marque, tres legerement
     eclairci (mele d'une pointe de creme) pour gagner en lisibilite sur les
     textes fonces, sans toucher a la palette de marque ci-dessus. */
  --rose-carte-1: #F9C4DA;
  --rose-carte-2: #FAC1DE;
  --beige: #FFF1E4;
  --beige-2: #FCE8D6;      /* beige un peu plus soutenu pour alterner */
  --jaune-vichy: #FDF0C4;
  --caramel: #D16F28;
  --noir: #1D1D1B;
  --creme-carte: #FFFBF5;  /* fond des cartes, jamais blanc pur */

  /* typographie */
  --font-display: "Fredoka", "Segoe UI", system-ui, sans-serif;
  --font-script: "Vibur", "Segoe UI", cursive;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* rythme */
  --wrap: 1200px;
  --wrap-wide: 1360px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(4.5rem, 11vw, 9rem);

  /* formes (verrou : cartes rondes, boutons pilule) */
  --r-sm: 14px;
  --r: 22px;
  --r-lg: 34px;
  --r-xl: 44px;
  --r-pill: 999px;

  /* ombres douces teintees vert (jamais de noir pur) */
  --shadow-sm: 0 4px 14px rgba(4, 80, 47, .07);
  --shadow: 0 14px 34px rgba(4, 80, 47, .10);
  --shadow-lg: 0 26px 60px rgba(4, 80, 47, .14);

  /* transitions */
  --ease: cubic-bezier(.16, 1, .3, 1);            /* sortie douce (reveals, scroll) */
  --ease-soft: cubic-bezier(.33, 1, .68, 1);      /* micro-interactions, retour calme */
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);   /* leger rebond (survols, boutons) */
  --nav-h: 74px;
}

/* ---------- 3. RESET / BASE --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* la nav est fixe (--nav-h) : chaque cible d'ancre se positionne juste sous elle,
   avec un peu d'air, au lieu d'etre masquee par la barre. */
:target,
section[id],
[id="accueil"] { scroll-margin-top: calc(var(--nav-h) + 1rem); }
body {
  font-family: var(--font-body);
  color: var(--noir);
  background: var(--beige);
  line-height: 1.65;
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
/* picture est un simple emballage technique pour <source> : le rendre "contents"
   laisse l'<img> agir comme le vrai enfant flex/grid, sinon il s'etire et casse
   tout centrage (justify-content) applique au parent. */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
:focus-visible { outline: 3px solid var(--caramel); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
  background: var(--vert); color: #fff; padding: .6rem 1.2rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm); z-index: 200; transition: top .25s;
}
.skip-link:focus { top: 0; }

/* ---------- 4. TYPO UTILITAIRES ----------------------------------------- */
.section__eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--caramel);
  margin-bottom: .9rem;
}
.section__eyebrow--light { color: var(--rose-vif); }

.section__title {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  color: var(--vert);
  letter-spacing: -.01em;
}
.section__title--center { text-align: center; }
.section__title--light { color: var(--beige); }

.section__intro {
  max-width: 60ch;
  margin-top: 1.1rem;
  color: #4a4a46;
  font-size: 1.08rem;
}
.section__intro--light { color: rgba(255, 241, 228, .82); }
.section__title--center + .section__intro,
.cookies__head .section__intro { margin-left: auto; margin-right: auto; text-align: center; }

/* Accent manuscrit reutilisable : reprend la typographie script de la marque
   (deja utilisee au hero et en signature) pour souligner un mot-cle au fil du
   texte courant, sans jamais crier plus fort que le reste de la phrase. */
.script-accent {
  font-family: var(--font-script); font-style: normal; font-weight: 400;
  color: var(--vert); font-size: 1.2em; line-height: 1;
}

/* ---------- 5. BOUTONS --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 500; font-size: 1.02rem;
  padding: .82rem 1.7rem; border-radius: var(--r-pill);
  transition: transform .3s var(--ease-spring), background-color .25s var(--ease-soft),
    box-shadow .3s var(--ease-soft), color .25s var(--ease-soft);
  white-space: nowrap; text-align: center;
}
.btn--sm { padding: .55rem 1.1rem; font-size: .92rem; }
.btn--vert { background: var(--vert); color: #fff; box-shadow: var(--shadow-sm); }
.btn--vert:hover { background: #007443; transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow); }
.btn--ghost { background: transparent; color: var(--vert); box-shadow: inset 0 0 0 2px var(--vert); }
.btn--ghost:hover { background: var(--vert); color: #fff; transform: translateY(-2px) scale(1.02); }
.btn--ghost-dark { color: var(--vert); box-shadow: inset 0 0 0 2px rgba(0,139,80,.4); }
.btn:active { transform: translateY(0) scale(.97); transition-duration: .1s; }

/* ---------- 6. NAVIGATION ----------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background-color .35s, box-shadow .35s, backdrop-filter .35s;
}
.nav__inner {
  max-width: var(--wrap-wide); margin: 0 auto;
  height: var(--nav-h); padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
}
.nav__logo { height: 46px; width: auto; transition: transform .35s var(--ease-spring); }
.nav__brand:hover .nav__logo { transform: scale(1.04); }
.nav__links { display: flex; align-items: center; gap: 1.6rem; }
.nav__links a {
  font-family: var(--font-display); font-weight: 500; font-size: 1rem;
  color: var(--vert-fonce); position: relative; padding: .3rem 0; transition: color .2s;
}
.nav__links a:not(.nav__cta)::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--caramel); transition: width .3s var(--ease);
}
.nav__links a:not(.nav__cta):hover::after { width: 100%; }
.nav__cta {
  background: var(--vert); color: #fff !important; padding: .55rem 1.2rem;
  border-radius: var(--r-pill); transition: background-color .25s, transform .25s;
}
.nav__cta:hover { background: #007443; transform: translateY(-1px); }

/* etat haut de page : transparent */
.nav[data-state="top"] { background: transparent; }
.nav[data-state="top"] .nav__links a { color: var(--vert-fonce); }
/* etat scrolle : fond beige translucide + flou + ombre */
.nav[data-state="scrolled"] {
  background: rgba(255, 241, 228, .88);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 6px 24px rgba(4, 80, 47, .08);
}

.nav__burger {
  display: none; width: 44px; height: 44px; position: relative; border-radius: 12px;
}
.nav__burger span {
  position: absolute; left: 11px; right: 11px; height: 2.5px; border-radius: 2px;
  background: var(--vert-fonce); transition: transform .3s var(--ease), opacity .2s;
}
.nav__burger span:nth-child(1) { top: 15px; }
.nav__burger span:nth-child(2) { top: 21px; }
.nav__burger span:nth-child(3) { top: 27px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 99;
  background: var(--beige);
  padding: 1.5rem var(--gutter) 2.2rem;
  box-shadow: 0 20px 40px rgba(4, 80, 47, .12);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  transform: translateY(-12px); opacity: 0; pointer-events: none;
  transition: transform .3s var(--ease), opacity .3s;
}
.mobile-menu[data-open="true"] { transform: none; opacity: 1; pointer-events: auto; }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu a {
  font-family: var(--font-display); font-weight: 500; font-size: 1.25rem;
  color: var(--vert-fonce); padding: .85rem 0; border-bottom: 1px solid rgba(4,80,47,.08);
}
.mobile-menu a.mobile-menu__cta { margin-top: 1.4rem; width: 100%; color: #fff; border-bottom: 0; }

/* ---------- 7. HERO ------------------------------------------------------ */
.hero {
  position: relative; overflow: hidden;
  padding: calc(var(--nav-h) + clamp(1.5rem, 5vw, 3.5rem)) var(--gutter) clamp(3rem, 7vw, 5rem);
  min-height: 100dvh; display: flex; align-items: center;
  background:
    radial-gradient(120% 90% at 85% 0%, #fff7ee 0%, var(--beige) 55%);
}
.hero__inner {
  max-width: var(--wrap); margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  position: relative; z-index: 1;
}
.hero__eyebrow {
  font-family: var(--font-display); font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; font-size: .82rem; color: var(--caramel); margin-bottom: 1.1rem;
}
.hero__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.7rem, 1.6rem + 4.6vw, 5rem); line-height: 1.02;
  letter-spacing: -.015em; display: flex; flex-direction: column;
}
.hero__title span { display: block; }
.hero__title span:nth-child(1) { color: var(--vert); }
.hero__title span:nth-child(3) { color: var(--caramel); font-weight: 500; }
.hero__script { font-family: var(--font-script); font-weight: 400; color: var(--rose-vif);
  font-size: 1.28em; line-height: .95; }
.hero__script--vert { color: var(--vert); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

.hero__visual { position: relative; display: flex; justify-content: center; }
.hero__sticker {
  position: relative; will-change: transform;
  animation: float 6.5s ease-in-out infinite;
}
.hero__sticker img {
  width: min(100%, 520px); will-change: transform;
  filter: drop-shadow(0 30px 40px rgba(4, 80, 47, .22));
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-.4deg); }
  50%      { transform: translateY(-16px) rotate(.4deg); }
}
.hero__blob { position: absolute; border-radius: 50%; filter: blur(8px); z-index: 0; opacity: .5; }
.hero__blob--rose { width: 42vw; max-width: 460px; aspect-ratio: 1; right: -8vw; top: 4vh;
  background: radial-gradient(circle, rgba(246,149,194,.5), transparent 68%); }
.hero__blob--vert { width: 34vw; max-width: 380px; aspect-ratio: 1; left: -10vw; bottom: -6vh;
  background: radial-gradient(circle, rgba(0,139,80,.18), transparent 68%); }

/* Bandes verticales rose pastel, tres douces, qui donnent du rythme au Hero
   et se prolongent visuellement jusqu'en haut de "Mon histoire" (voir .histoire::before). */
.hero__stripes {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg,
    rgba(246, 182, 206, .10) 0 64px, transparent 64px 224px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
}

/* Decors discrets en fond de plan : silhouette et pictogrammes de la charte,
   tres attenues, qui reagissent tres legerement au survol du Hero. */
.hero__deco { position: absolute; z-index: 0; pointer-events: none; }
.hero__deco img {
  display: block; width: 100%; transition: transform .5s var(--ease);
  /* opacite portee par l'image (pas par .hero__deco) pour ne pas entrer en
     conflit avec l'animation d'apparition .reveal appliquee au conteneur */
  opacity: .16;
}
.hero:hover .hero__deco img { transform: scale(1.08); }
.hero__deco--colis { left: 3%; bottom: 8%; width: clamp(52px, 6vw, 78px); }
.hero__deco--colis img { opacity: .15; transform: rotate(-9deg); }
.hero:hover .hero__deco--colis img { transform: rotate(-9deg) scale(1.08); }
.hero__deco--recettes { right: 5%; top: 12%; width: clamp(44px, 5vw, 62px); }
.hero__deco--recettes img { opacity: .18; }
.hero__deco--faitmaison { left: 6%; top: 9%; width: clamp(38px, 4.4vw, 54px); }
.hero__deco--faitmaison img { opacity: .16; }

/* ---------- 8. HISTOIRE -------------------------------------------------- */
.histoire { padding: var(--section-y) var(--gutter); position: relative; }
/* prolonge tres doucement les bandes du Hero sur le haut de la section suivante,
   pour une transition continue plutot qu'une coupure nette entre les deux fonds. */
.histoire::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 180px; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg,
    rgba(246, 182, 206, .07) 0 64px, transparent 64px 224px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
}
.histoire__inner {
  max-width: var(--wrap); margin: 0 auto; position: relative; z-index: 1;
  display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.histoire__media { position: relative; }
.histoire__media img:not(.histoire__silhouette) {
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  width: 100%; object-fit: cover; position: relative; z-index: 1;
}
.histoire__media::before {
  content: ""; position: absolute; inset: auto -18px -18px auto; width: 72%; height: 72%;
  border-radius: var(--r-xl); background: var(--rose-pastel); opacity: .35; z-index: 0;
}
.histoire__silhouette {
  position: absolute; left: -46px; bottom: -30px; width: 130px; z-index: 2;
  opacity: .92;
}
.histoire__body p { margin-top: 1.1rem; max-width: 56ch; }
.histoire__sign {
  font-family: var(--font-script); font-size: 2.6rem; color: var(--rose-vif);
  margin-top: 1.4rem; line-height: 1;
}

/* ---------- 9. COOKIES --------------------------------------------------- */
.cookies { padding: var(--section-y) var(--gutter); background: var(--beige-2); }
.cookies__head { max-width: var(--wrap); margin: 0 auto 2.2rem; text-align: center; }

/* Grille des cookies : les cartes ne portent plus qu'un badge special
   (Cookie du mois / Edition ephemere) sur deux d'entre elles ; les autres
   laissent tout l'espace au cookie, a son nom et a sa description. */
.cookie-grid {
  max-width: var(--wrap); margin: 0 auto 2.2rem;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.5rem);
}
.cookie-card {
  background: linear-gradient(150deg, var(--rose-carte-1), var(--rose-carte-2));
  border-radius: var(--r-lg); padding: 1.5rem 1.4rem 1.3rem;
  box-shadow: var(--shadow-sm); text-align: center; position: relative;
  transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease-soft);
}
.cookie-card:hover { transform: translateY(-8px) rotate(-.6deg); box-shadow: var(--shadow-lg); }
/* Retour tactile : une simple reduction d'echelle, jamais de "saut" -
   le relachement revient a l'etat normal via la transition de base. */
.cookie-card:active { transform: scale(.98); transition: transform .18s var(--ease-soft); }
/* .cookie-card.reveal (section 17) partage la specificite de :active ; sans
   ce doublon plus precis, le tempo de la revelation grignoterait le press
   rapide voulu ici (l'appui doit rester instantane, meme apres l'apparition). */
.cookie-card.reveal:active { transition: transform .18s var(--ease-soft); }
/* Badge special (les deux seuls restants) : petite etiquette "email" vert de
   marque a texte creme, plus qualitative et un rien plus visible que l'ancien
   badge translucide, tout en restant discrete dans le coin de la carte. */
.cookie-card__badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-family: var(--font-display); font-weight: 600; font-size: .7rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--creme-carte);
  background: var(--vert-fonce); padding: .3rem .8rem; border-radius: var(--r-pill);
  box-shadow: 0 4px 12px rgba(4,80,47,.22);
  /* apparition tres legerement decalee par rapport a la carte, pour un effet
     plus vivant (le badge "se pose" juste apres que la carte ait commence). */
  opacity: 0; transform: translateY(-8px);
  transition: opacity .45s var(--ease-soft), transform .45s var(--ease-spring);
  transition-delay: calc(var(--d, 0) * 90ms + 240ms);
}
.cookie-card.reveal.is-visible .cookie-card__badge { opacity: 1; transform: none; transition-delay: 0s; }
.cookie-card__media {
  display: flex; justify-content: center; margin-bottom: .9rem;
  /* le visuel du cookie apparait avec un leger delai supplementaire par
     rapport a la carte (cf. .cookie-card.reveal), independamment du zoom au
     survol qui reste porte par l'image elle-meme (aucun conflit de transform). */
  opacity: 0; transform: scale(.86) translateY(10px);
  transition: opacity .5s var(--ease-soft), transform .55s var(--ease-spring);
  transition-delay: calc(var(--d, 0) * 90ms + 150ms);
}
.cookie-card.reveal.is-visible .cookie-card__media { opacity: 1; transform: none; transition-delay: 0s; }
.cookie-card__media img {
  width: min(62%, 176px); transition: transform .5s var(--ease-spring);
  filter: drop-shadow(0 14px 18px rgba(4,80,47,.16));
}
.cookie-card:hover .cookie-card__media img { transform: scale(1.07) rotate(2deg) translateY(-2px); }
.cookie-card__name { font-family: var(--font-display); font-weight: 600; color: var(--vert);
  text-transform: uppercase; letter-spacing: .01em; font-size: 1.18rem; overflow-wrap: break-word; }
.cookie-card__desc {
  color: #4f4f49; margin: .4rem auto 0; font-size: .92rem; line-height: 1.5;
  max-width: 30ch; text-wrap: pretty;
}
/* Mention discrete (cookie du mois / edition ephemere) : plus effacee que la
   description principale (poids et taille moindres), mais un vert de marque
   assourdi lui donne assez de contraste sur le fond rose pour rester lisible
   au premier coup d'oeil. Le filet fin la separe proprement des ingredients. */
.cookie-card__note {
  color: rgba(4,80,47,.72); margin: .55rem auto 0; padding-top: .5rem;
  font-weight: 500; font-size: .8rem; line-height: 1.5; letter-spacing: .005em;
  max-width: 27ch; text-wrap: pretty;
  border-top: 1px solid rgba(4,80,47,.14);
}
/* ---------- 10. BOISSONS (bloc d'ambiance immersif) --------------------- */
.boissons {
  padding: var(--section-y) 0; position: relative; overflow: hidden;
  background: radial-gradient(120% 100% at 20% 0%, #0a5e3a 0%, var(--vert-fonce) 60%, #032a1c 100%);
  color: var(--beige);
}
.boissons__head { max-width: var(--wrap); margin: 0 auto 3rem; padding: 0 var(--gutter); text-align: center; }
.boissons__head .section__intro {
  max-width: 600px; margin-left: auto; margin-right: auto;
  font-size: 1.05rem; line-height: 1.65; letter-spacing: .003em;
  font-weight: 300; color: rgba(255, 241, 228, .72);
  text-wrap: balance;
}
.boissons__lattes-head {
  max-width: var(--wrap); margin: 3.5rem auto 2rem; padding: 0 var(--gutter); text-align: center;
}

.carousel { position: relative; }
/* Halo partage (un seul element, pas un par carte) : reste centre sur la
   carte active par construction (le scroll-snap centre toujours la carte
   courante dans le carrousel). Sa couleur n'est plus interpolee en JS a
   chaque frame de scroll (ce qui repeignait un degrade flou de plusieurs
   centaines de pixels 60x/s, une des causes de saccade au swipe) : @property
   declare --glow-color comme une vraie couleur animable, et la transition
   CSS ci-dessous fait tout le travail d'interpolation, geree par le
   compositeur, a chaque changement de boisson active (un seul write JS par
   boisson, pas un par frame). */
.carousel__glow {
  position: absolute; left: 50%; top: 50%; z-index: 0; pointer-events: none;
  width: min(58vw, 640px); aspect-ratio: 1;
  /* le decalage vertical compense la hauteur des points de pagination : ceux-ci
     sont EN DEHORS de la piste (sous elle), donc le vrai centre visuel des
     cartes est legerement au-dessus du centre de .carousel (piste + points). */
  transform: translate(-50%, calc(-50% - 16px));
  background: radial-gradient(circle, var(--glow-color, #ffffff) 0%, transparent 65%);
  opacity: .85; filter: blur(55px);
  transition: opacity .5s var(--ease-soft), --glow-color .5s var(--ease-soft);
}
.carousel__track {
  /* carte active volontairement plus etroite qu'avant : la largeur reduite
     laisse deviner les cartes voisines de part et d'autre (effet coverflow). */
  --slide-w: min(46vw, 560px);
  display: flex; gap: clamp(1rem, 3vw, 2rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  /* padding lateral = exactement la moitie de l'espace restant autour d'une slide,
     pour que la 1ere et la derniere puissent, elles aussi, se centrer parfaitement
     (sans cela le navigateur ne peut pas scroller "avant" le debut / "apres" la fin). */
  padding-block: 2.4rem 1.6rem;
  padding-inline: calc((100% - var(--slide-w)) / 2);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  position: relative; z-index: 1;
}
.carousel__track::-webkit-scrollbar { display: none; }
/* Carte de base = etat du FALLBACK (navigateurs sans scroll-driven animations,
   ex. anciens iOS) : taille pleine, opacite pleine, une seule ombre statique.
   Aucune propriete n'est pilotee par JS ni animee pendant le scroll -> le
   defilement reste 100% natif et intrinsequement fluide. L'apercu des cartes
   voisines vient uniquement de la largeur reduite + du centrage (padding de la
   piste), pas d'un effet JS. */
.slide {
  flex: 0 0 var(--slide-w); scroll-snap-align: center;
  display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-xl); padding: clamp(1.4rem, 3.5vw, 2.8rem);
  position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,.30);
}
/* Effet coverflow — UNIQUEMENT la ou les scroll-driven animations existent
   (Chrome/Edge 115+, Safari 26+). L'animation est pilotee par le COMPOSITEUR et
   sa progression est la position de scroll elle-meme (animation-timeline:
   view(inline)) : echelle et opacite sont donc rigoureusement synchronisees a la
   carte, image par image, du premier au dernier pixel du geste, sans JavaScript.
   La carte atteint son pic (scale 1, opacite 1) exactement quand elle est
   centree dans la piste (50% de la plage "cover"). */
@supports (animation-timeline: view()) {
  .slide {
    animation: slide-coverflow linear both;
    animation-timeline: view(inline);
    will-change: transform, opacity;
  }
}
@keyframes slide-coverflow {
  0%   { opacity: .5; transform: scale(.86) translateY(8px); z-index: 1; }
  50%  { opacity: 1;  transform: none;                       z-index: 2; }
  100% { opacity: .5; transform: scale(.86) translateY(8px); z-index: 1; }
}
.slide__media { position: relative; z-index: 1; display: flex; justify-content: center; }
.slide__media img { width: min(100%, 260px);
  filter: drop-shadow(0 26px 30px rgba(0,0,0,.4)); }
.slide__body { position: relative; z-index: 1; }
.slide__name { font-family: var(--font-display); font-weight: 600; color: #fff;
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem); line-height: 1; }
.slide__hook { color: rgba(255,241,228,.9); margin: .9rem 0 1.2rem; max-width: 40ch; }
.slide__flavors { display: flex; flex-wrap: wrap; gap: .5rem; }
.slide__flavors li {
  font-family: var(--font-display); font-weight: 500; font-size: .88rem;
  background: rgba(255,255,255,.16); color: #fff; padding: .35rem .9rem; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .3s var(--ease-spring), background-color .3s var(--ease-soft);
}
.slide__flavors li:hover { transform: translateY(-2px); background: rgba(255,255,255,.26); }

.carousel__arrow {
  /* meme correction que .carousel__glow : les points de pagination, sous la
     piste, decalent legerement vers le bas le centre de .carousel par rapport
     au centre reel de la carte. */
  position: absolute; top: 50%; transform: translateY(calc(-50% - 10px)); z-index: 5;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.92); box-shadow: var(--shadow);
  display: none; align-items: center; justify-content: center;
  transition: transform .3s var(--ease-spring), background-color .25s var(--ease-soft);
}
.carousel__arrow svg { width: 22px; height: 22px; fill: none; stroke: var(--vert-fonce);
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.carousel__arrow:hover { transform: translateY(calc(-50% - 10px)) scale(1.12); background: #fff; }
.carousel__arrow:active { transform: translateY(calc(-50% - 10px)) scale(.96); transition-duration: .12s; }
.carousel__arrow--prev { left: calc(var(--gutter) - 26px); }
.carousel__arrow--next { right: calc(var(--gutter) - 26px); }
.carousel__arrow[disabled] { opacity: .35; cursor: default; }

.carousel__dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.4rem; }
.carousel__dots button {
  width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.3);
  position: relative;
  transition: width .35s var(--ease), background-color .3s var(--ease-soft), transform .3s var(--ease-spring);
}
/* Zone tactile agrandie, invisible : le point reste visuellement petit, seule
   la cible de clic/tap est elargie. Limitee a -10px (et non 44px plein) pour
   ne pas empieter sur les points voisins, tres rapproches (gap de .5rem). */
.carousel__dots button::before {
  content: ""; position: absolute; inset: -10px;
}
.carousel__dots button:hover { transform: scale(1.35); background: rgba(255,255,255,.55); }
.carousel__dots button[aria-selected="true"] { background: var(--rose-vif); width: 26px; border-radius: 5px; transform: none; }

.boissons-plus {
  max-width: var(--wrap); margin: 3.5rem auto 0; padding: 2.2rem clamp(1.6rem, 4vw, 3rem);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg); text-align: center; margin-inline: var(--gutter);
}
@media (min-width: 1264px) { .boissons-plus { margin-inline: auto; } }
.boissons-plus__title { font-family: var(--font-display); font-weight: 600; color: #fff;
  font-size: 1.5rem; margin-bottom: 1.2rem; }
.boissons-plus__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.boissons-plus__list li {
  font-family: var(--font-display); font-weight: 400;
  background: rgba(255,255,255,.12); color: var(--beige);
  padding: .45rem 1.1rem; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.1);
  transition: transform .3s var(--ease-spring), background-color .3s var(--ease-soft);
}
.boissons-plus__list li:hover { transform: translateY(-2px); background: rgba(255,255,255,.2); }
.boissons-plus__note { color: rgba(255,241,228,.72); margin-top: 1.3rem; font-size: .95rem; }

/* ---------- 11. GALERIE (composition compacte, sans recadrage agressif) */
/* Grille reguliere et editoriale : toutes les cartes partagent la meme
   largeur de colonne et (quasi) le meme ratio ; "wide" n'introduit qu'une
   respiration tres discrete (ratio legerement moins haut), jamais un
   changement de largeur. Aucune carte ne domine les autres. */
.galerie { padding: var(--section-y) var(--gutter); }
.galerie__head { max-width: var(--wrap); margin: 0 auto 2.4rem; text-align: center; }
.galerie__frame { max-width: var(--wrap); margin: 0 auto; }
.galerie__grid {
  --gg: clamp(.55rem, 1.1vw, .85rem);
  --cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gg);
}
.galerie__item {
  border-radius: var(--r); overflow: hidden;
  box-shadow: var(--shadow-sm); position: relative; cursor: pointer;
  display: block; width: 100%; aspect-ratio: 3 / 4;
  transition: transform .45s var(--ease-spring), box-shadow .45s var(--ease-soft);
}
.galerie__item img { width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block; transition: transform .6s var(--ease); }
.galerie__item::after {
  content: ""; position: absolute; inset: 0; background: rgba(4,80,47,.0); transition: background .35s var(--ease-soft);
}
/* Survol : legere elevation + zoom tres subtil de la photo (transform seul,
   pas de reflow), voile vert discret pour signaler l'action de clic. */
.galerie__item:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.galerie__item:hover img { transform: scale(1.045); }
.galerie__item:hover::after { background: rgba(4,80,47,.10); }
.galerie__item:active { transform: translateY(-2px) scale(.99); transition-duration: .12s; }
/* meme raison que pour .cookie-card.reveal:active plus haut : garde le press
   instantane malgre la specificite de .galerie__item.reveal. */
.galerie__item.reveal:active { transition-duration: .12s; }
.galerie__item[hidden] { display: none; }
.galerie__more { text-align: center; margin-top: 2rem; }
.galerie__more[hidden] { display: none; }

/* Seule variation autorisee : un ratio tres legerement moins haut (4:5 au
   lieu de 3:4), pour un souffle occasionnel sans jamais elargir la carte ni
   casser l'alignement de la grille. */
.galerie__item--wide { aspect-ratio: 4 / 5; }

/* Cartes reveleles par "Voir plus" : animation propre geree en JS (pas par
   l'observer de scroll partage), pour pouvoir aussi les re-masquer proprement
   au clic sur "Voir moins". */
.galerie__item--extra {
  opacity: 0; transform: translateY(28px) scale(.94);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: calc(var(--d, 0) * 80ms);
}
.galerie__item--extra.is-visible { opacity: 1; transform: none; }

/* ---------- 12. AVIS ----------------------------------------------------- */
.avis { padding: var(--section-y) var(--gutter);
  background: linear-gradient(180deg, var(--beige) 0%, #fbe4ef 100%); }
.avis__head { max-width: var(--wrap); margin: 0 auto 2.4rem; text-align: center; }
.avis__rating {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem; margin-top: 1.6rem; padding: .6rem 1.3rem;
  border: 1px solid rgba(4, 80, 47, .14); border-radius: 999px;
  background: rgba(255, 255, 255, .5);
}
.avis__score {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.2rem, .95rem + .8vw, 1.7rem);
  color: var(--vert-fonce); line-height: 1; letter-spacing: -.01em;
}
.avis__rating-sep { color: rgba(74, 74, 70, .35); font-size: .9rem; }
.avis__source { color: #6a6a64; font-size: .92rem; letter-spacing: .02em; }

.avis-carousel { max-width: 860px; margin: 0 auto; position: relative; }
.avis-carousel__track {
  --slide-w: min(84vw, 640px);
  display: flex; gap: clamp(1rem, 3vw, 1.75rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding-block: .4rem .5rem;
  padding-inline: calc((100% - var(--slide-w)) / 2);
  scrollbar-width: none;
  cursor: grab; user-select: none;
  -webkit-user-select: none;
}
.avis-carousel__track::-webkit-scrollbar { display: none; }
.avis-carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.avis-review {
  flex: 0 0 var(--slide-w); scroll-snap-align: center;
  opacity: .6; transform: scale(.97); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.avis-review.is-current { opacity: 1; transform: none; }
.avis-card {
  background: var(--creme-carte); border-radius: var(--r-lg); padding: clamp(1.8rem, 4vw, 2.8rem);
  box-shadow: var(--shadow); text-align: center;
}
.avis-card__stars { color: var(--caramel); font-size: 1.25rem; letter-spacing: .12em; }
.avis-card__quote { font-size: 1.25rem; line-height: 1.5; color: #3a3a36; margin: 1rem 0 1.4rem;
  font-family: var(--font-display); font-weight: 400; }
.avis-card__name { font-family: var(--font-display); font-weight: 600; color: var(--vert); }
.avis-carousel__dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.6rem; }
.avis-carousel__dots button { width: 9px; height: 9px; border-radius: 50%;
  background: rgba(0,139,80,.22); position: relative;
  transition: width .35s var(--ease), background-color .3s var(--ease-soft), transform .3s var(--ease-spring); }
/* meme raison que .carousel__dots button::before : zone tactile elargie sans
   agrandir le point visuellement (inset limite pour ne pas empieter sur les
   points voisins, tres rapproches). */
.avis-carousel__dots button::before { content: ""; position: absolute; inset: -10px; }
.avis-carousel__dots button:hover { transform: scale(1.35); background: rgba(0,139,80,.4); }
.avis-carousel__dots button[aria-selected="true"] { background: var(--vert); width: 26px; border-radius: 5px; transform: none; }
.avis__cta { text-align: center; margin-top: 2.4rem; }

/* ---------- 13. ME TROUVER -------------------------------------------- */
.trouver { padding: var(--section-y) var(--gutter); }
.trouver__inner { max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.trouver__info .section__title { margin-bottom: 1.8rem; }
.info-card {
  display: flex; gap: 1.1rem; align-items: flex-start;
  background: var(--creme-carte); border-radius: var(--r); padding: 1.3rem 1.5rem;
  box-shadow: var(--shadow-sm); margin-bottom: 1rem;
  transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease-soft);
}
.info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.info-card__icon { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0;
  transition: transform .5s var(--ease-spring); }
.info-card:hover .info-card__icon { transform: scale(1.08) rotate(-3deg); }
.info-card__title { font-family: var(--font-display); font-weight: 600; color: var(--vert);
  font-size: 1.2rem; margin-bottom: .2rem; }
.info-card p { line-height: 1.5; }
.info-card__muted { color: #6e6e67; font-size: .92rem; margin-top: .3rem; }
.info-card--insta a { color: var(--rose-vif); font-family: var(--font-display); font-weight: 600; }
.info-card--insta a:hover { text-decoration: underline; }

.trouver__map { position: sticky; top: calc(var(--nav-h) + 1rem); }
.trouver__map-frame {
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  border: 6px solid var(--creme-carte); aspect-ratio: 4 / 3.4;
}
.trouver__map-frame iframe { width: 100%; height: 100%; border: 0; }
.trouver__itineraire { margin-top: 1.4rem; width: 100%; }

/* ---------- 14. MOTIF + FOOTER ------------------------------------------ */
.motif-band {
  height: 74px;
  background-color: var(--jaune-vichy);
  background-image:
    repeating-linear-gradient(90deg, rgba(248,178,214,.62) 0 26px, transparent 26px 52px),
    repeating-linear-gradient(180deg, rgba(248,178,214,.62) 0 26px, transparent 26px 52px);
}
.footer { background: var(--beige); padding: 3rem var(--gutter); }
.footer__inner { max-width: var(--wrap); margin: 0 auto; display: flex; flex-direction: column;
  align-items: center; gap: 1.2rem; text-align: center; }
.footer__logo { height: 74px; width: auto; }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; }
.footer__links a { color: var(--vert-fonce); font-size: .95rem; transition: color .2s; }
.footer__links a:hover { color: var(--caramel); }
.footer__copy { color: #6e6e67; font-size: .88rem; }

/* ---------- 15. BANNIERE COOKIES ---------------------------------------- */
.cookie-banner {
  position: fixed; left: 50%; bottom: clamp(1rem, 3vw, 2rem); transform: translateX(-50%) translateY(0);
  z-index: 150; width: min(560px, calc(100% - 2rem));
  background: var(--creme-carte); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 1.4rem 1.6rem; border: 1px solid rgba(4,80,47,.08);
  display: grid; gap: 1rem; animation: banner-in .5s var(--ease) both;
}
.cookie-banner[hidden] { display: none; }
@keyframes banner-in { from { opacity: 0; transform: translateX(-50%) translateY(20px); } }
.cookie-banner__text { font-size: .96rem; color: #4a4a46; }
.cookie-banner__actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.cookie-banner__actions .btn { flex: 1; min-width: 120px; }
.cookie-banner__link { font-size: .85rem; color: var(--vert); text-decoration: underline;
  justify-self: start; }

/* ---------- 16. LIGHTBOX ------------------------------------------------- */
/* Fond verre : sombre translucide + flou d'arriere-plan (glassmorphism
   discret). Ouverture/fermeture pilotees par la classe .is-open (rAF au JS),
   pour animer aussi bien l'entree que la sortie, uniquement en opacity/transform. */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(9, 30, 20, .68);
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 5vw, 4rem);
  opacity: 0; transition: opacity .4s var(--ease-soft);
}
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }
.lightbox__figure {
  max-width: 90vw; max-height: 86vh;
  opacity: 0; transform: scale(.92) translateY(14px);
  transition: opacity .45s var(--ease-soft), transform .55s var(--ease-spring);
  will-change: transform, opacity;
}
.lightbox.is-open .lightbox__figure { opacity: 1; transform: none; }
.lightbox__figure img { max-width: 90vw; max-height: 86vh; width: auto; border-radius: var(--r);
  box-shadow: 0 30px 80px rgba(0,0,0,.5); transition: opacity .28s var(--ease-soft); }
/* crossfade tres bref lors du passage a la photo suivante/precedente */
.lightbox__figure img.is-swapping { opacity: 0; }
.lightbox__close {
  position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem);
  width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.14);
  color: #fff; font-size: 2rem; line-height: 1;
  transition: background .25s var(--ease-soft), transform .3s var(--ease-spring);
}
.lightbox__close:hover { background: rgba(255,255,255,.28); transform: rotate(90deg) scale(1.05); }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.14);
  color: #fff; font-size: 2rem; line-height: 1;
  transition: background .25s var(--ease-soft), transform .3s var(--ease-spring);
}
.lightbox__nav:hover { background: rgba(255,255,255,.28); }
.lightbox__nav--prev { left: clamp(.5rem, 2vw, 2rem); }
.lightbox__nav--prev:hover { transform: translateY(-50%) translateX(-3px) scale(1.06); }
.lightbox__nav--next { right: clamp(.5rem, 2vw, 2rem); }
.lightbox__nav--next:hover { transform: translateY(-50%) translateX(3px) scale(1.06); }

/* ---------- 17. REVEAL --------------------------------------------------- */
/* Apparition de base : translation verticale + tres leger recul d'echelle +
   fondu. Le mouvement est pilote par transform/opacity uniquement (aucun
   reflow), et le rythme par --d (rang dans la cascade) via l'attribut style. */
/* IMPORTANT specificite : l'etat "cache" (translation+echelle) ne vit que
   tant que .is-visible n'est pas pose (:not()). Ainsi il s'efface de
   lui-meme une fois la carte revelee au lieu de rester a specificite egale
   (2 classes) avec les regles :hover/:active des elements interactifs
   (cookie-card, galerie__item, info-card...) et de les ecraser par ordre de
   source - piege deja present avant cette passe, corrige ici a la racine. */
.reveal {
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(30px) scale(.985);
  will-change: transform, opacity;
}
.reveal.is-visible { opacity: 1; will-change: auto; }

/* Personnalite par section (meme grammaire, accents differents) --------- */

/* Titres : montee un peu plus ample + echelle plus marquee = entree posee. */
.section__title.reveal { transform: translateY(34px) scale(.965); }
.section__title.reveal.is-visible { transform: none; }

/* Histoire : le texte "monte" doucement, cadence resserree pour un flux calme
   de lecture (les paragraphes se suivent de pres). */
.histoire__body .reveal:not(.is-visible) { transform: translateY(22px); }

/* Cookies : les cartes arrivent avec un leger elan (translation + echelle un
   peu plus prononcee), en cascade par colonne via --d.
   IMPORTANT specificite : la valeur de transform "d'entree" et son delai en
   cascade ne vivent QUE tant que .is-visible n'est pas pose (:not()), pour
   qu'ils s'effacent d'eux-memes une fois la carte revelee au lieu d'ecraser
   :hover/:active (meme nombre de classes que le survol => plus de conflit). */
.cookie-card.reveal {
  transition: opacity .7s var(--ease), transform .5s var(--ease-spring),
    box-shadow .4s var(--ease-soft);
}
.cookie-card.reveal:not(.is-visible) {
  transform: translateY(38px) scale(.95);
  transition-delay: calc(var(--d, 0) * 90ms);
}

/* Me trouver : les fiches glissent legerement depuis la gauche, cadencees. */
.trouver__info .info-card.reveal {
  transition: opacity .7s var(--ease), transform .5s var(--ease-spring),
    box-shadow .4s var(--ease-soft);
}
.trouver__info .info-card.reveal:not(.is-visible) {
  transform: translateY(24px) translateX(-14px);
  transition-delay: calc(var(--d, 0) * 90ms);
}

/* Galerie : les vignettes montent avec une echelle un rien plus creuse pour
   un effet "photo qui se pose" (cascade par rangee, --d pose en JS). */
.galerie__item.reveal {
  transition: opacity .6s var(--ease), transform .45s var(--ease-spring),
    box-shadow .45s var(--ease-soft);
}
.galerie__item.reveal:not(.is-visible) {
  transform: translateY(30px) scale(.94);
  transition-delay: calc(var(--d, 0) * 90ms);
}

/* ---------- 18. RESPONSIVE ---------------------------------------------- */
@media (max-width: 1080px) {
  /* moins de colonnes : les cartes restent au meme ratio, juste plus larges. */
  .galerie__grid { --cols: 3; }
  /* carte active plus generosement dimensionnee sur tablette, le peek des
     voisines reste proportionnellement similaire au desktop. */
  .carousel__track { --slide-w: min(58vw, 520px); }
}
@media (max-width: 960px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .hero__inner { grid-template-columns: 1fr; text-align: center; gap: 2rem; }
  .hero__copy { order: 2; }
  .hero__visual { order: 1; }
  .hero__actions { justify-content: center; }
  .histoire__inner, .trouver__inner { grid-template-columns: 1fr; }
  .histoire__sign { font-size: 1.9rem; }
  .trouver__map { position: static; }
  .slide { grid-template-columns: 1fr; text-align: center; }
  .slide__media { order: -1; }
  .slide__flavors { justify-content: center; }
  /* la mise en page passe en pile (image au-dessus du texte) : la carte peut
     etre plus etroite sans jamais tasser le contenu. */
  .carousel__track { --slide-w: min(70vw, 440px); }
  /* la carte devient beaucoup plus haute (image empilee sur le texte) : le halo
     abandonne le cercle 1:1 pour une forme etiree verticalement, capable
     d'envelopper toute la carte au lieu de n'eclairer que son centre. */
  .carousel__glow {
    width: min(150vw, 620px); aspect-ratio: auto; height: min(72vh, 620px);
    transform: translate(-50%, calc(-50% - 22px));
    filter: blur(48px);
  }
}
@media (max-width: 720px) {
  .galerie__grid { --cols: 2; }
  .hero__title { align-items: center; }
  /* volontairement plus etroite qu'avant : laisse un vrai aperçu (et non un
     filet de quelques pixels) des boissons voisines de part et d'autre, pour
     guider naturellement le regard vers la carte suivante. */
  .carousel__track { --slide-w: min(62vw, 320px); }
}
@media (max-width: 640px) {
  /* Mobile : 2 cookies par ligne (comme desktop/tablette), mais avec des
     espacements resserres et une typographie ajustee pour rester equilibre et
     lisible jusque sur les plus petits iPhone. L'image reste genereuse par
     rapport a la largeur de la carte pour bien mettre le cookie en valeur.
     La cascade --d posee inline dans le HTML (paires 0,0,1,1,2,2,3,3) convient
     deja a la grille a 2 colonnes : aucun recalcul necessaire ici. */
  .cookie-grid { gap: clamp(.65rem, 2.6vw, 1rem); }
  .cookie-card { padding: 1.1rem .85rem 1rem; border-radius: var(--r); }
  .cookie-card__media { margin-bottom: .7rem; }
  .cookie-card__media img { width: min(78%, 148px); }
  .cookie-card__name { font-size: 1.02rem; }
  .cookie-card__desc { font-size: .84rem; line-height: 1.45; margin-top: .35rem; }
  .cookie-card__note { font-size: .74rem; line-height: 1.45; margin-top: .45rem; padding-top: .4rem; }
  .cookie-card__badge { top: 10px; left: 10px; font-size: .62rem; padding: .24rem .6rem; letter-spacing: .03em; }
}
@media (max-width: 480px) {
  .carousel__track { --slide-w: min(68vw, 270px); }
  .carousel__glow { width: min(160vw, 560px); height: min(68vh, 600px); }
}
@media (min-width: 961px) {
  .carousel__arrow { display: inline-flex; }
}
@media (max-width: 420px) {
  .avis-card__quote { font-size: 1.1rem; }
}

/* ---------- 18b. PAGES LEGALES ------------------------------------------ */
.legal-nav { padding: 1.1rem var(--gutter); border-bottom: 1px solid rgba(4,80,47,.08);
  display: flex; align-items: center; justify-content: space-between; background: var(--beige); }
.legal-nav img { height: 42px; width: auto; }
.legal-nav a.legal-nav__back { font-family: var(--font-display); font-weight: 500; color: var(--vert); }
.legal-nav a.legal-nav__back:hover { color: var(--caramel); }
.legal { max-width: 760px; margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) var(--gutter) 4rem; }
.legal h1 { font-family: var(--font-display); font-weight: 600; color: var(--vert);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); line-height: 1.05; margin-bottom: .5rem; }
.legal .legal__updated { color: #6e6e67; font-size: .9rem; margin-bottom: 2.2rem; }
.legal h2 { font-family: var(--font-display); font-weight: 600; color: var(--vert-fonce);
  font-size: 1.35rem; margin: 2.2rem 0 .6rem; }
.legal p, .legal li { color: #45403c; }
.legal p { margin-bottom: .9rem; }
.legal ul { list-style: disc; padding-left: 1.4rem; margin-bottom: .9rem; }
.legal li { margin-bottom: .35rem; }
.legal a { color: var(--vert); text-decoration: underline; }

/* ---------- 19. PREFERS-REDUCED-MOTION ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; }
  /* Neutralise TOUS les etats initiaux animes (y compris les variantes de reveal
     par section, plus specifiques que .reveal) : rien ne doit rester decale ou
     transparent si l'utilisateur refuse le mouvement. */
  .reveal, .reveal.is-visible,
  .section__title.reveal, .cookie-card.reveal, .galerie__item.reveal,
  .trouver__info .info-card.reveal, .histoire__body .reveal,
  .galerie__item--extra, .lightbox__figure,
  .cookie-card__media, .cookie-card__badge {
    opacity: 1 !important; transform: none !important;
  }
  /* Aucun effet coverflow sous reduced-motion : on desactive la scroll-driven
     animation et on fige toutes les cartes a taille/opacite pleines. Le scroll
     reste utilisable, simplement sans mouvement d'echelle. */
  .slide { animation: none !important; opacity: 1 !important; transform: none !important; }
  .carousel__glow { display: none; }
  .hero__sticker { animation: none; }
}