/* ==========================================================================
   ICE&JOY — feuille de style
   1. Jetons & base      5. Section 1 · arrivée givrée   9. Section 5 · revendeur
   2. Typographie        6. Section 2 · engagements     10. Pied de page
   3. Boutons            7. Section 3 · formats         11. Responsive
   4. En-tête & menu     8. Section 4 · points de vente 12. Mouvement réduit
   ========================================================================== */

/* ---------- 1. Jetons & base ---------------------------------------------- */
:root{
  --choco:#391a10;
  --choco-2:#5c3418;
  --choco-3:#7b4a2a;
  --creme:#fff9ef;
  --creme-2:#f7ecdb;
  --bleu:#a9dff5;
  --bleu-glace:#e3f3fa;
  --bleu-vif:#6fc6f2;
  --bleu-focus:#0f6d8c;

  --large:1320px;
  --marge:clamp(20px,5vw,80px);
  --rayon:28px;
  --rayon-l:44px;

  --ombre-produit:0 42px 60px -34px rgba(20,60,86,.55);
  --ombre-carte:0 30px 70px -40px rgba(57,26,16,.4);

  --t-rapide:.22s cubic-bezier(.4,0,.2,1);
  --t-doux:.55s cubic-bezier(.22,.8,.3,1);
}

@property --fonte{ syntax:'<percentage>'; inherits:false; initial-value:0%; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--creme); color:var(--choco);
  font-family:Nunito,'Segoe UI',system-ui,sans-serif; font-size:17px; line-height:1.62;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
svg{ width:100%; height:100%; }
.sprite{ position:absolute; width:0; height:0; }
.sprite symbol{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.sr{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.lien-evitement{
  position:fixed; top:10px; left:10px; z-index:200; transform:translateY(-160%);
  background:var(--choco); color:var(--creme); padding:12px 20px; border-radius:30px;
  text-decoration:none; font-weight:700; transition:transform var(--t-rapide);
}
.lien-evitement:focus{ transform:none; }

:where(a,button,input,textarea,summary):focus-visible{
  outline:3px solid var(--bleu-focus); outline-offset:4px; border-radius:6px;
}
.revendeur :where(a,button,input,textarea):focus-visible{ outline-color:var(--bleu); }

/* ---------- 2. Typographie ------------------------------------------------ */
h1,h2,h3{ font-family:'Baloo 2',Nunito,sans-serif; font-weight:800; letter-spacing:-.022em; margin:0; }
h1{ font-size:clamp(3.15rem,8.1vw,7rem); line-height:.94; }
h2{ font-size:clamp(2.5rem,5.1vw,4.7rem); line-height:.96; }
h3{ font-size:clamp(1.65rem,2.7vw,2.5rem); line-height:1; }
p{ margin:0; }

.surtitre{
  font-size:.7rem; font-weight:900; letter-spacing:.22em; text-transform:uppercase;
  color:var(--choco-3); margin-bottom:1.1em;
}
.note{ font-size:.78rem; line-height:1.6; color:color-mix(in srgb,var(--choco) 66%,transparent); max-width:64ch; }
.note em,.etoile{ font-style:normal; color:var(--bleu-focus); font-weight:800; }
.statut{ font-size:.92rem; line-height:1.55; margin-top:14px; min-height:1.4em; }
.statut:empty{ margin:0; min-height:0; }

/* ---------- 3. Boutons & liens -------------------------------------------- */
.bouton{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:56px; padding:15px 32px; border-radius:40px; border:1.5px solid transparent;
  font-family:inherit; font-size:1rem; font-weight:700; text-decoration:none; cursor:pointer;
  transition:transform var(--t-rapide),background var(--t-rapide),color var(--t-rapide),box-shadow var(--t-rapide);
}
.bouton:hover{ transform:translateY(-2px); }
.bouton:active{ transform:translateY(0); }
.bouton--choco{ background:var(--choco); color:var(--creme); box-shadow:0 14px 30px -16px rgba(57,26,16,.8); }
.bouton--choco:hover{ background:var(--choco-2); box-shadow:0 20px 38px -16px rgba(57,26,16,.75); }
.bouton--contour{ background:var(--creme); color:var(--choco); border-color:var(--choco); font-size:.9rem; min-height:48px; padding:12px 24px; }
.bouton--contour:hover{ background:var(--choco); color:var(--creme); }
.bouton--bleu{ background:var(--bleu-vif); color:var(--choco); box-shadow:0 14px 34px -16px rgba(0,0,0,.6); }
.bouton--bleu:hover{ background:#8ad3f7; }

.lien-icone{
  display:inline-flex; align-items:center; gap:12px; margin-top:20px; padding:10px 4px;
  background:none; border:0; cursor:pointer; color:inherit; font:inherit; font-weight:700;
}
.lien-icone svg{ width:26px; height:26px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; }
.lien-icone span{ text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1.5px; }
.lien-icone:hover span{ color:var(--bleu-focus); }

.lien-souligne{
  display:inline-flex; align-items:center; gap:8px; margin-top:26px; font-weight:800; color:inherit;
  text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px;
}
.lien-souligne:hover{ color:var(--bleu-focus); }

/* ---------- 4. En-tête & menu mobile -------------------------------------- */
.entete{
  position:fixed; inset:0 0 auto; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:18px var(--marge);
  transition:background var(--t-doux),box-shadow var(--t-doux),padding var(--t-doux);
}
/* En haut de page, l'en-tête se pose sur le ciel : liens en blanc. */
@media (min-width:900px){
  .entete:not(.entete--colle){ padding:1.7vw 4.4vw 0; align-items:flex-start; }
  .entete:not(.entete--colle) .entete__nav a{ color:#fff; text-shadow:0 2px 10px rgba(6,28,56,.55); }
  .entete:not(.entete--colle) .entete__logo img{ filter:drop-shadow(0 3px 12px rgba(6,28,56,.5)); }
  .entete:not(.entete--colle) .entete__logo img{ width:min(10.47vw,164px); }
  .entete:not(.entete--colle) .entete__nav{ margin-top:.62vw; font-size:min(1.42vw,17px); gap:min(3.2vw,46px); }
  /* Plafonné : sur un grand écran, la pastille de la maquette deviendrait énorme. */
  .entete:not(.entete--colle) .entete__cta{
    height:min(3.23vw,52px); min-height:0; width:min(14.53vw,224px);
    padding:0; font-size:min(1.34vw,16px);
  }
}
.entete--colle{
  background:color-mix(in srgb,var(--creme) 88%,transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(57,26,16,.09); padding-block:12px;
}
.entete__logo img{ width:clamp(112px,11vw,146px); }
.entete__nav{ display:flex; gap:clamp(18px,2.6vw,38px); }
.entete__nav a{
  color:inherit; text-decoration:none; font-weight:700; font-size:.98rem; padding:6px 2px;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;
  transition:background-size var(--t-rapide);
}
.entete__nav a:hover{ background-size:100% 2px; }
.entete__burger{
  display:none; width:48px; height:48px; padding:11px; border:1.5px solid var(--choco);
  border-radius:50%; background:var(--creme); color:var(--choco); cursor:pointer;
}
.entete__burger svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

.menu-mobile{
  position:fixed; inset:0; z-index:150; background:var(--creme);
  display:flex; flex-direction:column; padding:18px var(--marge) 40px;
}
.menu-mobile[hidden]{ display:none; }
.menu-mobile__tete{ display:flex; align-items:center; justify-content:space-between; }
.menu-mobile__tete img{ width:120px; }
.menu-mobile__fermer{
  width:48px; height:48px; padding:12px; border:1.5px solid var(--choco); border-radius:50%;
  background:none; color:var(--choco); cursor:pointer;
}
.menu-mobile__fermer svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.menu-mobile nav{ display:flex; flex-direction:column; gap:6px; margin:auto 0; }
.menu-mobile nav a{
  font-family:'Baloo 2',sans-serif; font-size:2.4rem; font-weight:800; line-height:1.25;
  color:inherit; text-decoration:none; padding:8px 0;
}
.menu-mobile .bouton{ width:100%; }

/* ---------- 5. Section 1 · l'arrivée givrée -------------------------------- */
/* Le visuel remplit toute la fenêtre en « cover » : jamais de bande sur les
   côtés. Le haut des pots se trouve à 28,3 % de la hauteur de l'image ; on en
   déduit, en CSS, la bande de ciel disponible entre la navigation et les pots,
   et le titre s'y dimensionne tout seul. Il ne peut donc pas les chevaucher. */
.heros{
  position:relative; isolation:isolate; overflow:hidden;
  height:100svh; min-height:560px; background:#0e4f8f;
  --img-h:max(100svh,56.25vw);
  --debord:calc(var(--img-h) - 100svh);
  --img-haut:calc(var(--debord) * -.15);
  --pots-haut:calc(var(--img-haut) + var(--img-h) * .283);
  --nav-bas:clamp(78px,6.6vw,124px);
  /* 18 px de garde : le titre ne doit jamais frôler le haut des pots. */
  --bande:calc(var(--pots-haut) - var(--nav-bas) - 18px);
}
.heros__scene{ position:absolute; inset:0; z-index:1; }
.heros__visuel{
  position:absolute; inset:0; overflow:hidden;
  transform:translateY(calc(var(--sortie,0) * -3vh)) scale(calc(1 + var(--sortie,0) * .05));
}
/* <picture> est une boîte en ligne sans hauteur : sans cette règle, le
   height:100% de l'image se résout à zéro et le visuel disparaît. */
.heros__visuel picture{ position:absolute; inset:0; display:block; }
.heros__fond{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:50% 15%;
}

/* Le bloc porte le placement et la lévitation ; le titre reste un simple bloc
   de texte, sinon <em>/<strong>/<span> deviendraient des éléments de grille et
   la phrase se casserait en trois lignes. */
.heros__haut{
  position:absolute; left:0; right:0; top:var(--nav-bas); height:var(--bande);
  z-index:3; display:grid; place-content:center;
  animation:levite-titre 7s ease-in-out infinite;
}
.heros__titre{
  margin:0; text-align:center;
  color:#fff; font-family:'Baloo 2',Nunito,sans-serif; font-weight:800;
  font-size:min(5.6vw,calc(var(--bande) * .42)); line-height:.92; letter-spacing:-.015em;
  text-shadow:0 2px 3px rgba(6,28,56,.28),0 10px 34px rgba(6,28,56,.45);
}
/* Un seul balisage sert aux deux versions : sur grand écran on revient à la
   phrase en bas de casse, sur téléphone au lettrage de la maquette. */
.heros__titre em,.heros__titre strong,.heros__titre span{
  font:inherit; font-style:normal; display:inline;
}
.heros__titre strong,.heros__titre span{ text-transform:lowercase; }
.heros__titre em::after{ content:' '; }
.heros__titre strong::after{ content:' '; }
.heros__atouts,.heros__parfums{ display:none; }
@keyframes levite-titre{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
/* Écran large et bas : la bande de ciel se resserre, le titre passe sur une
   ligne plutôt que de rapetisser. */
@media (min-aspect-ratio:2/1){
  .heros__titre br{ display:none; }
  .heros__titre{ font-size:min(4.4vw,calc(var(--bande) * .76)); }
}

.heros__cta{
  position:absolute; left:0; right:0; margin-inline:auto; z-index:3;
  bottom:clamp(26px,5.6vh,64px); width:max-content;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:clamp(52px,4.4vh,62px); padding:0 clamp(26px,2.4vw,40px);
  border-radius:99px; background:var(--choco); color:var(--creme);
  text-decoration:none; font-weight:700; font-size:clamp(.98rem,1.1vw,1.12rem);
  box-shadow:0 16px 36px -18px rgba(6,20,40,.85);
  transition:transform var(--t-rapide),background var(--t-rapide);
}
.heros__cta:hover{ background:var(--choco-2); transform:translateY(-2px); }

body.intro .heros__visuel{ animation:surgir 1.5s cubic-bezier(.2,.75,.3,1) .28s both; }
@keyframes surgir{
  0%{ transform:scale(1.07); }
  100%{ transform:none; }
}
body.intro .heros__titre{ animation:apparition .8s ease-out .34s both,
                                    levite-titre 7s ease-in-out .34s infinite; }
body.intro .heros__cta{ animation:apparition .8s ease-out .62s both; }
@keyframes apparition{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

/* givre : une plaque de glace gèle l'écran, se fissure, puis vole en éclats */
.givre{ position:absolute; inset:0; z-index:7; pointer-events:none; opacity:0; }
body.intro .givre{ opacity:1; }

/* Le flou ne coûte qu'une couche : il disparaît au moment où la plaque cède. */
.givre__flou{
  position:absolute; inset:0; z-index:1;
  backdrop-filter:blur(5px) saturate(.9); -webkit-backdrop-filter:blur(5px) saturate(.9);
}
body.intro .givre__flou{ animation:degel .3s ease-in .25s both; }
@keyframes degel{ to{ opacity:0; } }

.tesson{
  position:absolute; inset:0; z-index:2; will-change:transform,opacity; backface-visibility:hidden;
  background:linear-gradient(var(--g,140deg),
    rgba(255,255,255,.5),rgba(219,241,253,.2) 44%,rgba(255,255,255,.46));
}
.tesson::after{
  content:''; position:absolute; inset:0;
  background:url('assets/givre.webp') center/cover no-repeat;
}
body.intro .tesson{ animation:brise .92s cubic-bezier(.3,.76,.36,1) var(--d) both; }
@keyframes brise{
  0%{ opacity:1; transform:translate(0,0) rotate(0) scale(1); }
  8%{ opacity:1; transform:translate(calc(var(--tx) * .05),calc(var(--ty) * .05)) rotate(calc(var(--rot) * .08)) scale(1.008); }
  100%{ opacity:0; transform:translate(var(--tx),var(--ty)) rotate(var(--rot)) scale(1.16); }
}

.givre__fissures{ position:absolute; inset:0; z-index:3; }
.givre__fissures path{
  fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round;
  stroke-dasharray:var(--l,400); stroke-dashoffset:var(--l,400);
  filter:drop-shadow(0 0 5px rgba(140,212,245,.95));
}
body.intro .givre__fissures path{ animation:fissure .26s cubic-bezier(.2,.9,.3,1) var(--d) both; }
@keyframes fissure{ 55%{ stroke-dashoffset:0; opacity:1; } to{ stroke-dashoffset:0; opacity:0; } }

.givre__eclair{
  position:absolute; inset:0; z-index:4; opacity:0;
  background:radial-gradient(54% 58% at 50% 45%,rgba(255,255,255,.72),rgba(206,237,253,.4) 50%,transparent 74%);
}
body.intro .givre__eclair{ animation:eclair .38s ease-out .23s both; }
@keyframes eclair{ 0%{opacity:0} 20%{opacity:1} 100%{opacity:0} }

.passer,.rejouer{
  position:absolute; right:clamp(14px,2vw,26px); z-index:9;
  border-radius:30px; font:inherit; font-weight:700; cursor:pointer;
  background:color-mix(in srgb,var(--creme) 88%,transparent); color:var(--choco);
  border:1px solid color-mix(in srgb,var(--choco) 30%,transparent);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.passer{ display:none; bottom:clamp(60px,9vh,96px); padding:11px 20px; font-size:.85rem; }
body.intro .passer{ display:block; }
.rejouer{ bottom:clamp(16px,2.6vh,26px); padding:9px 16px; font-size:.76rem; opacity:.72; }
.rejouer:hover{ opacity:1; }

/* ---------- 6. Section 2 · le bon à l'intérieur ---------------------------- */
/* Cadre unique calé sur la direction artistique : chaque élément est posé en
   pourcentage du cadre, et dimensionné à partir de sa HAUTEUR pour rester
   proportionné quel que soit le format d'écran. */
.engagements{ background:linear-gradient(#fffaf1,#effaff 34%,#d6eefa 74%,#c2e6f8); }
.engagements__piste{ height:320vh; }
.engagements__fixe{
  position:sticky; top:0; height:100svh; min-height:600px; overflow:hidden;
}
.engagements__givre{   /* halo glacé derrière le produit */
  position:absolute; z-index:0; left:50%; top:50%; width:min(112vh,1250px); aspect-ratio:1;
  transform:translate(-50%,-50%) scale(calc(1 + var(--vague,0) * .1));
  background:radial-gradient(circle,rgba(255,255,255,.96) 8%,rgba(255,255,255,.6) 36%,rgba(255,255,255,0) 66%);
  pointer-events:none;
}
.engagements__fixe::after{    /* sol givré */
  content:''; position:absolute; z-index:0; left:-6%; right:-6%; bottom:-12%; height:44%;
  background:radial-gradient(56% 100% at 50% 100%,rgba(255,255,255,.94),rgba(255,255,255,0) 70%);
  pointer-events:none;
}
.scene{ position:absolute; inset:0; z-index:2; }

.engagements__tete{
  position:absolute; left:var(--marge); top:10.5%; z-index:6; max-width:48%;
  transform:translateY(calc(var(--vague,0) * -2.4vh));
}
.engagements__tete h2{ font-size:clamp(2.6rem,5.6vw,5.2rem); }
.engagements__surtitre,.engagements__chapo{ display:none; }

.scene__traits{ position:absolute; inset:0; z-index:4; }
.scene__traits path{
  fill:none; stroke:var(--choco-2); stroke-width:1.7; stroke-linecap:round; opacity:.6;
  stroke-dasharray:var(--l,600); stroke-dashoffset:var(--l,600);
  transition:stroke-dashoffset .72s cubic-bezier(.3,.8,.35,1);
}
.scene__traits path.vu{ stroke-dashoffset:0; }
.scene__traits path[data-point]{ stroke-dasharray:none; opacity:0; transition:opacity .3s ease .3s; }
.scene__traits path[data-point].vu{ opacity:.75; }

.scene__produit{
  position:absolute; inset:0; z-index:3;
  transform:scale(var(--zoom,1)); transform-origin:48.5% 64%; will-change:transform;
}
/* <picture> ne sert qu'à choisir la source selon la largeur : display:contents
   l'efface de la mise en page, les <img> restent les calques positionnés. */
.scene__produit picture{ display:contents; }
.socle-glace,.pot,.boule,.couvercle{ position:absolute; left:48.5%; }

.socle-glace{
  height:11%; aspect-ratio:5/1; width:auto; bottom:1%; z-index:0;
  transform:translateX(-50%);
  border-radius:50%/42% 42% 58% 58%;
  background:radial-gradient(62% 130% at 50% 0%,rgba(255,255,255,.98),rgba(226,245,253,.7) 52%,rgba(174,218,241,0) 78%);
}
/* Le pot est dédoublé et découpé à 26,4 % de sa hauteur — la mesure exacte du
   bord avant — pour que la boule sorte de l'intérieur et non de derrière.
   Aucun filtre ici : drop-shadow sur une image découpée dessine une ombre le
   long de la coupe et fait apparaître un liseré en travers du pot. */
.pot{ height:40%; width:auto; bottom:5.5%; transform:translateX(-50%); }
.pot--arriere{ z-index:1; clip-path:inset(0 0 73.6% 0); }
.pot--avant  { z-index:3; clip-path:inset(26.4% 0 0 0); }
.boule{
  height:27%; width:auto; z-index:2; top:57.5%; transform-origin:50% 72%;
  transform:translateX(-50%) translateY(calc(var(--boule,0) * -107%)) scale(calc(.93 + var(--boule,0) * .07));
  filter:drop-shadow(0 14px 18px rgba(16,62,90,.26));
}
.couvercle{
  height:13.4%; width:auto; z-index:5; top:55.4%; transform-origin:50% 60%;
  transform:translateX(-50%) translateY(calc(var(--couvercle,0) * -316%)) rotate(calc(var(--couvercle,0) * -9deg));
  filter:drop-shadow(0 16px 20px rgba(16,62,90,.28));
}
.eclats-glace{ position:absolute; inset:0; z-index:4; pointer-events:none; }
.eclat-glace{
  position:absolute; left:var(--x); top:var(--y); height:var(--h); width:auto;
  opacity:calc(var(--o,0) * 1.2);
  transform:translate(-50%,-50%)
            translate(calc(var(--o,0) * var(--dx)),calc(var(--o,0) * var(--dy)))
            rotate(calc(var(--o,0) * var(--dr)));
  filter:drop-shadow(0 5px 7px rgba(16,62,90,.3));
  will-change:transform,opacity;
}

.atouts{ list-style:none; margin:0; padding:0; }
.atout{
  position:absolute; left:var(--x); top:var(--y); z-index:6;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  width:max-content; max-width:clamp(142px,13.5vw,196px);
  opacity:0; transform:translate(-50%,-40px) scale(.9);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.3,1);
}
.atout.vu{ opacity:1; transform:translate(-50%,-40px) scale(1); }
.atout__pastille{
  --p:clamp(56px,5.3vw,74px);
  width:var(--p); height:var(--p); flex:none; display:grid; place-items:center;
  padding:calc(var(--p) * .24); border:2px solid var(--choco); border-radius:50%;
  background:var(--creme); color:var(--choco);
}
.atout__pastille svg{ fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.atout__pastille--nutri{
  --p:clamp(76px,7vw,104px); padding:0; line-height:1; border-width:3.4px;
  background:radial-gradient(circle at 40% 32%,#d9f3ff,#8ed1f2 74%);
  box-shadow:0 10px 22px -10px rgba(16,62,90,.75);
}
.atout__pastille--nutri b{
  font-family:'Baloo 2',sans-serif; font-weight:800; line-height:.86;
  font-size:clamp(2.4rem,3.4vw,3.5rem);
}
.atout__texte{
  font-family:'Baloo 2',sans-serif; font-weight:800; line-height:1.06; text-align:center;
  font-size:clamp(.98rem,1.28vw,1.34rem);
}
.atout__valeur{ display:block; font-size:.78rem; font-weight:700; color:var(--choco-3); }
.atout__detail{
  text-align:center; max-width:20ch; line-height:1.36;
  font-size:clamp(.66rem,.79vw,.82rem);
  color:color-mix(in srgb,var(--choco) 64%,transparent);
  opacity:0; transform:translateY(-5px);
  transition:opacity .45s ease .2s,transform .45s ease .2s;
}
.atout.vu .atout__detail{ opacity:1; transform:none; }

.engagements .note{ position:absolute; left:var(--marge); bottom:4%; z-index:6; max-width:32ch; font-size:.74rem; }
.indice-bas{
  position:absolute; right:var(--marge); bottom:5%; z-index:6; text-align:right;
  font-size:clamp(.82rem,1vw,1rem); font-weight:700; line-height:1.3; color:var(--choco-2);
}
.indice-bas span{ display:inline-block; animation:flotte 2.4s ease-in-out infinite; }

/* ---------- 6bis. Section 3 · les parfums ---------------------------------
   Un seul produit à l'écran. Toute la scène est calée sur une seule variable,
   --ph (hauteur du produit) : les deux parfums font exactement la même
   hauteur, donc le passage de l'un à l'autre ne provoque aucun saut. */
.parfums{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100svh; display:flex; flex-direction:column; align-items:center;
  padding:clamp(88px,9vh,130px) var(--marge) clamp(34px,5vh,60px);
  background:#dfeefa url('assets/m/gourmand.webp') center/cover no-repeat;
  --ph:min(52svh,440px);
}
/* Voile crème en haut et en bas : le titre et le pied restent lisibles quel
   que soit le recadrage du fond. */
.parfums__voile{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(color-mix(in srgb,var(--creme) 82%,transparent) 0%,
                             rgba(255,246,233,0) 26%,
                             rgba(255,246,233,0) 52%,
                             color-mix(in srgb,var(--creme) 88%,transparent) 84%);
}
.parfums > :not(.parfums__voile){ position:relative; z-index:1; width:100%; }

.parfums__tete{ text-align:center; }
.parfums__tete h2{ font-size:clamp(2.3rem,4.6vw,4.2rem); }

.parfums__onglets{
  display:flex; justify-content:center; gap:10px; margin-top:clamp(20px,3vh,34px);
}
.parfums__onglet{
  min-height:46px; padding:0 20px; border-radius:99px; cursor:pointer;
  border:1.5px solid color-mix(in srgb,var(--choco) 34%,transparent);
  background:color-mix(in srgb,var(--creme) 62%,transparent); color:var(--choco);
  font:inherit; font-size:.92rem; font-weight:700;
  transition:background var(--t-rapide),color var(--t-rapide),border-color var(--t-rapide);
}
.parfums__onglet:hover{ background:var(--creme); }
.parfums__onglet[aria-selected="true"]{
  background:var(--choco); border-color:var(--choco); color:var(--creme);
}

.parfums__scene{
  position:relative; height:var(--ph); margin-top:clamp(22px,3.4vh,40px);
}
.parfum-vue{
  position:absolute; inset:0; transition:opacity .42s ease,transform .42s ease;
}
.parfum-vue img{ position:absolute; left:50%; width:auto; transform:translateX(-50%); }
.parfums[data-parfum="cookies"] .parfum-vue--choco,
.parfums[data-parfum="choco"]   .parfum-vue--cookies{
  opacity:0; visibility:hidden; transform:scale(.97);
}
/* Cookies & Cream : la boule est déjà dans l'image, un seul calque. */
.parfum-vue--cookies .parfum-pot{ top:0; height:100%; }
/* Chocolat intense : le pot ouvert et la boule séparée. La lèvre avant du pot
   est à 15,5 % de sa hauteur — on découpe deux copies de part et d'autre de
   cette ligne, la boule se glisse entre les deux et sort de l'ouverture. */
.parfum-vue--choco .parfum-pot{ bottom:0; height:74.6%; }
.parfum-vue--choco .parfum-pot--arriere{ z-index:1; clip-path:inset(0 0 84.5% 0); }
.parfum-vue--choco .parfum-pot--avant  { z-index:3; clip-path:inset(15.5% 0 0 0); }
.parfum-vue--choco .parfum-boule{
  top:calc(var(--ph) * .05); width:calc(var(--ph) * .535); height:auto; z-index:2;
  filter:drop-shadow(0 16px 20px rgba(46,22,10,.18));
}

.parfums__pied{ margin-top:clamp(24px,3.6vh,42px); text-align:center; }
.parfums__nom{ font-size:clamp(1.6rem,3vw,2.3rem); }
.parfums__ligne{
  margin:8px auto 0; max-width:34ch; font-size:1rem; line-height:1.45; color:var(--choco-2);
}
.parfums__cta{ margin-top:clamp(16px,2.4vh,26px); }

/* ---------- 7. Section 3 · les formats ------------------------------------ */
.formats{
  position:relative; overflow:hidden;
  padding:clamp(72px,9vw,124px) 0 clamp(64px,8vw,108px);
  background:linear-gradient(#f6fcff,#ddf1fc 34%,#bce5f8 72%,#a3dcf4);
}
.formats::after{   /* sol glacé */
  content:''; position:absolute; left:-4%; right:-4%; bottom:-6%; height:34%;
  background:radial-gradient(60% 100% at 50% 100%,rgba(255,255,255,.9),rgba(255,255,255,0) 72%);
  pointer-events:none;
}
.formats > *{ position:relative; z-index:2; }
.formats__tete{ max-width:var(--large); margin-inline:auto; padding:0 var(--marge); text-align:center; }
.formats__accroche{
  margin-top:clamp(14px,2vw,22px); font-size:clamp(1.02rem,1.35vw,1.28rem);
  font-weight:600; color:var(--choco-2);
}

.formats__duo{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.6vw,38px);
  max-width:var(--large); margin:clamp(38px,5vw,64px) auto 0; padding:0 var(--marge);
}
.format{
  display:flex; flex-direction:column; border-radius:34px; overflow:hidden;
  background:linear-gradient(#ffffff,#f2fbff 62%,#e3f4fd);
  box-shadow:0 30px 60px -38px rgba(16,62,90,.55),0 0 0 1px rgba(255,255,255,.7) inset;
  transition:transform .5s cubic-bezier(.2,.8,.3,1),box-shadow .5s;
}
.format:hover{ transform:translateY(-6px); box-shadow:0 44px 74px -40px rgba(16,62,90,.6); }
.format__scene{
  position:relative; aspect-ratio:1/.86; display:grid; place-items:end center;
  background:linear-gradient(200deg,#d9f0fc,#b4e2f8 58%,#98d5f1);
  overflow:hidden;
}
.format__halo{
  position:absolute; left:50%; top:46%; width:78%; aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,0) 66%);
}
.format__pot{
  /* Dimensionné en largeur : un pourcentage de hauteur sur une image en grille
     ne se résout pas de façon fiable selon les moteurs. */
  position:relative; z-index:3; height:auto; margin-bottom:8%;
  filter:drop-shadow(0 30px 26px rgba(16,62,90,.34));
  animation:levite 6.5s ease-in-out infinite;
}
.format--petit .format__pot{ width:47%; }
.format--grand .format__pot{ width:58%; animation-delay:-3.2s; }
@keyframes levite{ 0%,100%{ transform:translateY(0) rotate(-.6deg); } 50%{ transform:translateY(-14px) rotate(.6deg); } }

.format__socle{
  position:absolute; z-index:2; left:50%; bottom:6%; transform:translateX(-50%);
  width:52%; aspect-ratio:3.4/1; border-radius:50%;
  background:radial-gradient(60% 130% at 50% 6%,#ffffff,#e6f6fd 54%,#c2e6f8);
  box-shadow:0 12px 0 -2px #a9d9f0,0 30px 30px -18px rgba(16,62,90,.5);
}
.format--grand .format__socle{ width:58%; }
.format__eclats{ position:absolute; inset:0; z-index:4; pointer-events:none; }
.format__eclat{
  position:absolute; left:calc(50% + var(--ex)); top:calc(50% + var(--ey));
  height:var(--eh); width:auto; transform:translate(-50%,-50%) rotate(var(--er));
  filter:drop-shadow(0 6px 8px rgba(16,62,90,.32));
  animation:flotte-eclat 7s ease-in-out infinite;
}
.format__eclat:nth-child(2n){ animation-duration:8.5s; animation-delay:-2s; }
.format__eclat:nth-child(3n){ animation-duration:9.5s; animation-delay:-4s; }
@keyframes flotte-eclat{
  0%,100%{ transform:translate(-50%,-50%) rotate(var(--er)); }
  50%{ transform:translate(-50%,calc(-50% - 12px)) rotate(calc(var(--er) + 8deg)); }
}

.format__texte{ padding:clamp(26px,3vw,40px) clamp(24px,3vw,42px) clamp(30px,3.4vw,44px); }
.format__rang{
  font-family:'Baloo 2',sans-serif; font-weight:800; line-height:1;
  font-size:clamp(1.9rem,2.9vw,2.7rem);
}
.format__volume{
  display:flex; align-items:baseline; gap:.22em; margin-top:.15em;
  font-family:'Baloo 2',sans-serif; font-weight:800; line-height:.95;
  font-size:clamp(2.6rem,4.4vw,4.2rem); color:var(--bleu-focus);
}
.format__volume [hidden]{ display:none; }
.format__volume .unite{ font-size:.34em; font-weight:800; letter-spacing:.02em; }
.format__ligne{ margin-top:.5em; font-size:clamp(1rem,1.25vw,1.16rem); font-weight:700; color:var(--choco-2); }
.format__specs{ margin:clamp(20px,2.4vw,30px) 0 0; display:grid; gap:0; }
.format__specs div{
  display:grid; grid-template-columns:8.5em 1fr; gap:14px; padding:13px 0;
  border-top:1px solid color-mix(in srgb,var(--choco) 14%,transparent); font-size:.94rem;
}
.format__specs dt{ font-weight:800; font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; color:var(--choco-3); align-self:center; }
.format__specs dd{ margin:0; font-weight:600; color:var(--choco-2); }

.formats__pied{
  display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center;
  padding:clamp(44px,5.4vw,72px) var(--marge) 0;
}

/* ---------- 8. Section 4 · où nous trouver -------------------------------- */
.trouver{ background:var(--creme); padding:clamp(64px,8vw,112px) 0 clamp(70px,9vw,120px); }
.trouver__tete{ max-width:var(--large); margin-inline:auto; padding:0 var(--marge); }
.trouver h2{ font-size:clamp(2.1rem,3.5vw,3.1rem); margin-top:.1em; }
.trouver__grille{
  display:grid; grid-template-columns:minmax(300px,30%) 1fr; gap:clamp(26px,3vw,46px);
  align-items:stretch; max-width:var(--large); margin:clamp(30px,4vw,50px) auto 0; padding:0 var(--marge);
}
.trouver__panneau{ display:flex; flex-direction:column; }

.recherche label{ display:block; font-size:.86rem; font-weight:700; margin-bottom:10px; }
.recherche__champ{
  display:flex; align-items:center; gap:12px; padding:5px 5px 5px 20px;
  border:1.6px solid var(--choco); border-radius:50px; background:transparent;
  transition:box-shadow var(--t-rapide);
}
.recherche__champ:focus-within{ box-shadow:0 0 0 4px color-mix(in srgb,var(--bleu) 58%,transparent); }
.recherche__champ svg{ width:21px; height:21px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; opacity:.75; }
.recherche__champ input{
  flex:1; min-width:0; min-height:48px; border:0; background:none; color:inherit;
  font:inherit; font-size:1rem; outline:none;
}
.recherche__champ input::placeholder{ color:color-mix(in srgb,var(--choco) 45%,transparent); }
.recherche__envoi{
  min-height:44px; padding:11px 20px; border:0; border-radius:40px; cursor:pointer;
  background:var(--choco); color:var(--creme); font:inherit; font-weight:700; white-space:nowrap;
}
.recherche__envoi:hover{ background:var(--choco-2); }

.liste{ margin-top:22px; flex:1; min-height:0; }
.liste-pdv{
  list-style:none; margin:0; padding:0 4px 0 0; display:grid; gap:10px;
  max-height:min(52vh,460px); overflow:auto; scrollbar-width:thin;
}
.liste-pdv li{
  padding:14px 16px; border-radius:18px; cursor:pointer;
  border:1px solid color-mix(in srgb,var(--choco) 14%,transparent);
  background:color-mix(in srgb,#fff 60%,transparent);
  transition:border-color var(--t-rapide),background var(--t-rapide),transform var(--t-rapide);
}
.liste-pdv li:hover,.liste-pdv li[aria-current="true"]{
  border-color:var(--bleu-focus); background:#fff; transform:translateX(3px);
}
.liste-pdv strong{ display:block; font-size:1rem; }
.liste-pdv .lieu{ font-size:.86rem; color:var(--choco-2); }
.liste-pdv .pastille{
  display:inline-block; margin-top:7px; padding:3px 10px; border-radius:20px;
  font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  background:var(--bleu); color:var(--choco);
}
.liste-pdv .pastille--attente{ background:color-mix(in srgb,var(--choco) 12%,transparent); color:var(--choco-2); }
.vide{ display:grid; gap:6px; }
.vide__icone{ width:44px; height:44px; color:var(--choco); }
.vide__icone svg{ fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.vide h3{ font-size:clamp(1.3rem,1.9vw,1.7rem); margin-top:8px; }
.vide p{ color:var(--choco-2); }

/* Carte : traitement clair et arrondi, dans l'esprit des cartes iOS */
.carte{
  position:relative; border-radius:28px; overflow:hidden;
  min-height:clamp(420px,54vw,640px);
  background:linear-gradient(170deg,#eaf6fd,#cfeafa);
  box-shadow:0 34px 70px -42px rgba(16,62,90,.55),0 0 0 1px rgba(16,62,90,.08);
}
/* La feuille de MapLibre, injectée après la nôtre, impose position:relative sur
   le conteneur ; on reprend la main avec un sélecteur plus spécifique. */
.carte > .carte__toile{ position:absolute; inset:0; }
.carte > .carte__toile:focus-visible{ outline:3px solid var(--bleu-focus); outline-offset:-3px; }
.carte__repli{ position:absolute; inset:0; display:grid; place-items:center; padding:6%; }
.carte--vive .carte__repli{ display:none; }
.carte__repli svg{ width:auto; height:88%; max-width:100%; }
.carte__pays path{ fill:url(#deg-carte); stroke:#fff; stroke-width:3; stroke-linejoin:round;
  filter:drop-shadow(0 16px 20px rgba(16,62,90,.22)); }
.carte__mention{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:3;
  padding:9px 16px; border-radius:30px; white-space:nowrap; pointer-events:none;
  font-size:.72rem; font-weight:700; letter-spacing:.03em;
  background:color-mix(in srgb,var(--creme) 88%,transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 18px -10px rgba(16,62,90,.6);
}
.carte .maplibregl-ctrl-group{
  border-radius:14px!important; overflow:hidden; border:0!important;
  box-shadow:0 8px 22px -12px rgba(16,62,90,.7)!important;
}
.carte .maplibregl-ctrl-attrib{ font-size:10px; border-radius:12px 0 0 0; }
.epingle{
  width:26px; height:34px; cursor:pointer; transform-origin:50% 100%;
  transition:transform .2s cubic-bezier(.2,.9,.3,1.3);
  filter:drop-shadow(0 4px 6px rgba(16,62,90,.55));
}
.epingle:hover,.epingle--active{ transform:scale(1.22); }
.grappe{
  display:grid; place-items:center; border-radius:50%; cursor:pointer;
  background:var(--choco); color:var(--creme); font-weight:800; font-size:.86rem;
  border:2.5px solid var(--creme); box-shadow:0 6px 16px -6px rgba(16,62,90,.7);
}
.carte .maplibregl-popup-content{
  border-radius:18px; padding:16px 18px; font-family:inherit;
  box-shadow:0 18px 40px -22px rgba(16,62,90,.7);
}
.carte .maplibregl-popup-content strong{ display:block; font-size:1rem; font-family:'Baloo 2',sans-serif; }
.carte .maplibregl-popup-content p{ font-size:.86rem; color:var(--choco-2); margin-top:3px; }
.carte .maplibregl-popup-content a{ display:inline-block; margin-top:9px; font-weight:800; font-size:.86rem; color:var(--bleu-focus); }
.carte .maplibregl-popup-close-button{ font-size:20px; padding:2px 8px; }

/* ---------- 9. Section 5 · devenir revendeur ------------------------------ */
.revendeur{
  position:relative; background:var(--choco); color:var(--creme);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,80px);
  max-width:none; padding:clamp(72px,9vw,126px) var(--marge) clamp(56px,7vw,96px);
}
.revendeur > *{ position:relative; z-index:2; }
.revendeur__gauche,.revendeur__form{ max-width:640px; }
.revendeur__gauche{ justify-self:end; width:100%; }
.revendeur__form{ justify-self:start; width:100%; }
.revendeur .surtitre{ color:color-mix(in srgb,var(--creme) 62%,transparent); }
.revendeur__accroche{ font-size:clamp(1.12rem,1.7vw,1.45rem); font-weight:700; margin-top:.9em; }
/* Transition : une vraie nappe de chocolat, pas un tracé géométrique.
   L'image de coulée est retournée pour que la masse rejoigne la section et que
   les coulures remontent dans la crème. Deux calques décalés se croisent très
   lentement : le chocolat semble vivant sans rien de clinquant. */
.coulee{
  position:absolute; left:0; right:0; top:0; z-index:2;
  height:clamp(96px,11.5vw,184px); transform:translateY(-99.5%);
  pointer-events:none; overflow:hidden;
  /* Le haut de la bande est un recadrage net : sur les côtés le chocolat
     arrivait à l'équerre. Ce masque le dissout dans la crème, la crête de la
     coulée reste pleine. */
  -webkit-mask-image:linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,.28) 11%,#000 36%);
  mask-image:linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,.28) 11%,#000 36%);
}
.coulee__nappe{
  position:absolute; inset:0 -8%;
  background:url('assets/chocolat-coulee.webp') center 42%/cover no-repeat;
  transform:scaleY(-1);
  filter:brightness(.46) saturate(1.25) contrast(1.04);
}
.coulee__nappe--2{
  inset:0 -18%; opacity:.62;
  filter:brightness(.36) saturate(1.1);
  animation:nappe 22s ease-in-out infinite alternate;
}
@keyframes nappe{
  from{ transform:scaleY(-1) translateX(2.6%); }
  to{   transform:scaleY(-1) translateX(-2.6%); }
}
.coulee::after{   /* raccord invisible avec le chocolat de la section */
  content:''; position:absolute; inset:auto 0 0; height:44%; z-index:1;
  background:linear-gradient(rgba(57,26,16,0),var(--choco) 72%);
}

/* Bandeau enseignes */
.enseignes{
  max-width:var(--large); margin:clamp(40px,5vw,66px) auto 0;
  padding:0 var(--marge); text-align:center;
}
.enseignes__titre{
  font-size:.72rem; font-weight:900; letter-spacing:.2em; text-transform:uppercase;
  color:var(--choco-3);
}
.enseignes__liste{
  list-style:none; margin:clamp(16px,2vw,24px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:clamp(12px,1.6vw,22px) 0;
}
.enseignes__liste li{
  font-family:'Baloo 2',sans-serif; font-weight:800; line-height:1;
  font-size:clamp(.95rem,1.45vw,1.3rem); color:var(--choco-2);
  padding:0 clamp(10px,1.35vw,20px);
  border-right:1px solid color-mix(in srgb,var(--choco) 22%,transparent);
}
.enseignes__liste li:last-child{ border-right:0; }
.enseignes{ padding-bottom:clamp(10px,1.6vw,22px); }

.revendeur__pots{ position:relative; display:flex; align-items:flex-end; justify-content:flex-start;
  gap:0; margin-top:clamp(28px,4vw,52px); max-width:430px;
  transform:translateY(calc((.5 - var(--r,.5)) * 5vh)); }
.revendeur__pots img{ position:relative; z-index:2; filter:drop-shadow(0 30px 34px rgba(0,0,0,.55)); }
.revendeur__pots img:nth-of-type(1){ width:52%; transform:rotate(-7deg); transform-origin:50% 100%; }
.revendeur__pots img:nth-of-type(2){ width:47%; margin-left:-5%; transform:rotate(6deg); transform-origin:50% 100%; }
.socle--choco{ width:104%; bottom:-5%; background:linear-gradient(#5c3418,#41200f 60%,#2d1309); box-shadow:none; }

.champs{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.champ{ display:grid; gap:8px; margin:0; }
.champ--large{ grid-column:1/-1; }
.champ label{ font-size:.88rem; font-weight:700; }
.facultatif{ font-weight:400; opacity:.7; }
.revendeur input,.revendeur textarea{
  width:100%; min-height:54px; padding:14px 18px; border-radius:16px;
  border:1.5px solid color-mix(in srgb,var(--creme) 42%,transparent);
  background:transparent; color:var(--creme); font:inherit; font-size:1rem;
  transition:border-color var(--t-rapide),background var(--t-rapide);
}
.revendeur textarea{ resize:vertical; min-height:120px; }
.revendeur input:hover,.revendeur textarea:hover{ border-color:color-mix(in srgb,var(--creme) 70%,transparent); }
.revendeur input[aria-invalid="true"],.revendeur textarea[aria-invalid="true"]{ border-color:#ffb4a2; background:rgba(255,120,90,.08); }
.erreur{ font-size:.82rem; font-weight:700; color:#ffc2b2; }
.erreur[hidden]{ display:none; }
.piege{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.revendeur__rgpd{ font-size:.82rem; line-height:1.65; margin-top:24px; color:color-mix(in srgb,var(--creme) 76%,transparent); }
.revendeur__envoi{ width:100%; margin-top:18px; }
.revendeur__envoi[disabled]{ opacity:.65; cursor:progress; }
.statut--form{ font-weight:700; }
.statut--form[data-etat="erreur"]{ color:#ffc2b2; }
.statut--form[data-etat="succes"]{ color:var(--bleu); }

/* ---------- 10. Pied de page ---------------------------------------------- */
.pied{
  background:var(--choco); color:var(--creme);
  border-top:1px solid color-mix(in srgb,var(--creme) 20%,transparent);
  display:flex; flex-wrap:wrap; align-items:center; gap:20px clamp(24px,4vw,60px);
  padding:28px var(--marge); font-size:.78rem;
}
.pied__logo{ width:126px; }
.pied__liens{ display:flex; gap:clamp(16px,2.6vw,34px); }
.pied__liens a{ color:inherit; text-decoration:none; font-weight:700; }
.pied__liens a:hover{ text-decoration:underline; text-underline-offset:5px; }
.pied__liens a[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; }
.pied__note{ margin-left:auto; opacity:.62; }

/* Révélations : l'attribut est posé par le script, donc rien n'est masqué sans JS. */
[data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity .85s cubic-bezier(.2,.7,.3,1) calc(var(--i,0) * 85ms),
             transform .85s cubic-bezier(.2,.7,.3,1) calc(var(--i,0) * 85ms);
}
[data-reveal].vu{ opacity:1; transform:none; }

/* ---------- 11. Responsive ------------------------------------------------ */
@media (max-width:1200px){
}

@media (max-width:1099px){
  .engagements__piste{ height:auto; }
  .engagements__fixe{
    position:relative; height:auto; min-height:0; overflow:hidden;
    padding:clamp(56px,9vw,90px) var(--marge);
  }
  .engagements__givre{ display:none; }
  .scene{ position:relative; z-index:2; }
  .engagements__tete{ position:static; max-width:none; transform:none; }
  .engagements__tete h2{ font-size:clamp(2.4rem,7.4vw,3.6rem); }
  .scene__traits,.eclats-glace,.indice-bas{ display:none; }
  .scene__produit{
    position:relative; inset:auto; width:min(100%,400px); aspect-ratio:1/1.55;
    margin:clamp(20px,4vw,34px) auto 0; transform:none;
  }
  .socle-glace{ height:8%; aspect-ratio:4.4/1; bottom:0; }
  .pot{ height:55%; bottom:2%; }
  .boule{
    height:33%; top:52%;
    transform:translateX(-50%) translateY(calc(var(--boule,0) * -108%)) scale(calc(.94 + var(--boule,0) * .06));
  }
  .couvercle{
    height:16%; top:45%;
    transform:translateX(-50%) translateY(calc(var(--couvercle,0) * -281%)) rotate(calc(var(--couvercle,0) * -8deg));
  }
  .atouts{
    position:static; display:grid; gap:12px; margin-top:clamp(24px,4vw,36px);
    grid-template-columns:repeat(auto-fit,minmax(min(100%,238px),1fr));
  }
  .atout{
    position:static; opacity:1; transform:none; max-width:none; width:auto;
    display:grid; grid-template-columns:auto 1fr; gap:2px 13px; align-items:center;
    padding:13px 16px; border-radius:20px;
    background:color-mix(in srgb,#ffffff 78%,transparent);
  }
  .atout.vu{ transform:none; }
  .atout__pastille{ grid-row:1/3; --p:46px; width:46px; height:46px; padding:11px; border-width:1.6px; }
  .atout__pastille--nutri{ --p:50px; width:50px; height:50px; padding:0; border-width:2px; }
  .atout__pastille--nutri b{ font-size:1.45rem; }
  .atout__texte{ grid-column:2; align-self:end; font-size:1rem; text-align:left; }
  .atout__texte br{ display:none; }
  .atout__detail{
    grid-column:2; align-self:start; opacity:1; transform:none;
    text-align:left; max-width:none; font-size:.78rem; line-height:1.4;
  }
  .engagements .note{ position:relative; z-index:2; margin-top:22px; max-width:none; }

  .trouver__grille{ grid-template-columns:1fr; }
  .carte{ order:2; min-height:clamp(340px,60vw,460px); }
  .liste-pdv{ max-height:58vh; }
  .revendeur{ grid-template-columns:1fr; }
  .revendeur__gauche,.revendeur__form{ justify-self:stretch; max-width:none; }
  .revendeur__form{ margin-top:12px; }
}

/* ---------- Héros téléphone ------------------------------------------------
   Le visuel vertical du kit (933 × 1685) remplit tout l'écran sous une bande
   de ciel peinte exactement à la couleur du haut de l'image : la jointure est
   invisible et le recadrage horizontal reste sous les 5 % de chaque côté, donc
   les deux pots restent entiers. Titre et arguments forment un seul bloc posé
   dans le ciel, le bouton se pose dans les nuages du bas. */
@media (max-width:899px){
  .entete{ padding:14px var(--marge); }
  .entete__burger{
    width:44px; height:44px; padding:10px;
    border-color:rgba(255,255,255,.62); background:none; color:#fff;
  }
  .entete--colle .entete__burger{ border-color:var(--choco); color:var(--choco); }
  .entete__logo img{ width:106px; }

  .heros{
    height:100svh; min-height:600px;
    --bande-nav:clamp(72px,19vw,96px);
    /* échantillonnée sur la première ligne de assets/m/hero.webp */
    background:#014b8c;
  }
  .heros__visuel{ inset:var(--bande-nav) 0 0; }
  .heros__fond{ object-position:50% 50%; }

  .heros__haut{
    display:block; position:absolute; left:0; right:0; top:var(--bande-nav); height:auto; z-index:3;
    padding:clamp(10px,3.4vw,20px) var(--marge) 0; text-align:center; color:#fff9ee;
    animation:levite-titre 8s ease-in-out infinite;
  }
  .heros__titre{
    position:static; height:auto; display:block; margin:0; padding:0; font-size:inherit;
    text-shadow:0 2px 4px rgba(4,38,72,.32),0 10px 30px rgba(4,38,72,.4);
  }
  .heros__titre em{
    display:block; font-family:Georgia,'Times New Roman',serif; font-style:italic;
    font-weight:400; font-size:clamp(1.45rem,7vw,1.95rem); line-height:1; margin-bottom:-.05em;
  }
  .heros__titre strong{
    display:block; text-transform:none; font-weight:800; letter-spacing:-.045em;
    font-size:clamp(3.5rem,17.2vw,4.6rem); line-height:.95;
  }
  .heros__titre span{
    display:block; text-transform:none; font-weight:800; letter-spacing:-.02em;
    margin-top:.3em; font-size:clamp(1.22rem,6vw,1.6rem); line-height:1.08;
  }
  .heros__titre em::after,.heros__titre strong::after{ content:none; }

  .heros__atouts{
    display:flex; justify-content:center; align-items:center; margin:clamp(15px,4.4vw,24px) 0 0;
    padding:0; list-style:none; gap:clamp(13px,4vw,19px);
  }
  .heros__atouts li{ display:flex; align-items:center; gap:8px; font-size:.67rem; line-height:1.15; text-align:left; }
  .heros__atouts li + li{ border-left:1px solid rgba(255,249,238,.45); padding-left:clamp(13px,4vw,19px); }
  .heros__atouts .score{
    display:grid; place-content:center; width:32px; height:36px; border-radius:8px; flex:none;
    background:#12734c; border:1px solid rgba(255,255,255,.75);
    font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.45rem; line-height:1;
  }
  .heros__atouts li:last-child{ flex-direction:column; align-items:flex-start; gap:0; }
  .heros__atouts b{ font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.6rem; line-height:1; }

  .heros__cta{
    left:var(--marge); right:var(--marge); bottom:clamp(54px,14vw,76px);
    width:auto; margin:0; min-height:56px; padding:0 22px; font-size:1rem;
    box-shadow:0 18px 36px -18px rgba(20,8,2,.8);
  }
  .heros__parfums{
    position:absolute; left:0; right:0; bottom:clamp(19px,5.2vw,28px); z-index:3;
    display:block; margin:0; text-align:center; color:var(--choco-2);
    font-size:.64rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  }
  .passer{ top:auto; bottom:calc(14px + env(safe-area-inset-bottom)); right:14px; left:auto; margin:0; }
  .rejouer{ display:none; }
}

/* ---------- Section 2 sur téléphone : l'écran se fige --------------------
   La piste haute + le bloc collant immobilisent l'écran pendant que le doigt
   continue de défiler : c'est le geste qui fait sortir la boule du pot.
   Le calage vient des assets eux-mêmes : le bord du pot (son ellipse la plus
   large) est à 11,7 % de sa hauteur, sa lèvre avant à 15,5 % — d'où les deux
   copies du pot qui encadrent la boule, et l'échelle du couvercle. */
@media (max-width:899px){
  .engagements__piste{ height:240vh; }
  .engagements__fixe{
    position:sticky; top:0; height:100svh; min-height:0; padding:0; overflow:hidden;
    background:url('assets/m/ciel.webp') center/cover no-repeat;
  }
  .engagements__fixe::after{ display:none; }
  .scene{ position:absolute; inset:0; }

  .engagements__tete{
    position:absolute; left:0; right:0; top:clamp(84px,11.5vh,108px); z-index:6;
    max-width:none; padding:0 var(--marge); text-align:center; transform:none;
  }
  .engagements__surtitre{
    display:block; margin:0 0 clamp(10px,1.6vh,15px);
    font-size:.6rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
    color:color-mix(in srgb,var(--choco) 72%,transparent);
  }
  .engagements__tete h2{ font-size:clamp(1.95rem,8.4vw,2.55rem); line-height:1.04; letter-spacing:-.03em; }
  .engagements__chapo{
    display:block; margin:clamp(11px,1.7vh,16px) auto 0; max-width:30ch;
    font-size:.88rem; line-height:1.45; color:var(--choco-2);
  }

  /* Boîte de scène : une seule variable règle la taille de tous les calques,
     donc rien ne se décale quand l'écran change de proportions. */
  .scene__produit{
    --l:min(92vw,38.5svh);
    position:absolute; inset:auto; left:50%; top:27%;
    width:var(--l); height:calc(var(--l) * 1.5);
    transform:translateX(-50%) scale(calc(1 + (var(--zoom,.87) - .87) * .21));
    transform-origin:50% 72%;
  }
  .socle-glace{ display:none; }
  .pot,.boule,.couvercle{ left:50%; height:auto; bottom:auto; }
  .pot{ width:calc(var(--l) * .40); top:calc(var(--l) * .75); transform:translateX(-50%); }
  .pot--arriere{ z-index:1; clip-path:inset(0 0 84.5% 0); }
  .pot--avant  { z-index:3; clip-path:inset(15.5% 0 0 0); }
  .boule{
    z-index:2; width:calc(var(--l) * .424); top:calc(var(--l) * .378);
    transform-origin:50% 50%;
    transform:translateX(-50%)
              translateY(calc((1 - var(--boule,0)) * var(--l) * .435))
              scale(calc(.7 + var(--boule,0) * .3));
  }
  .couvercle{
    z-index:5; width:calc(var(--l) * .408); top:calc(var(--l) * .5581);
    transform-origin:50% 100%;
    transform:translateX(-50%)
              translateY(calc(var(--couvercle,0) * -182.6%))
              rotate(calc(var(--couvercle,0) * -9deg))
              scaleY(calc(.66 + var(--couvercle,0) * .34));
    filter:drop-shadow(0 14px 18px rgba(16,62,90,.24));
  }

  .atouts{
    position:absolute; left:var(--marge); right:var(--marge); z-index:6;
    bottom:clamp(56px,9svh,80px); margin:0; padding:clamp(10px,1.6vh,15px) 0 0;
    display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
    border-top:1px solid color-mix(in srgb,var(--choco) 22%,transparent);
  }
  .atout{
    position:static; left:auto; top:auto; width:auto; max-width:none; padding:0;
    background:none; border-radius:0; display:flex; flex-direction:column;
    align-items:center; gap:6px; text-align:center;
    opacity:0; transform:translateY(9px); transition:opacity .5s ease,transform .5s ease;
  }
  .atout.vu{ opacity:1; transform:none; }
  .atout__pastille{ grid-row:auto; --p:34px; width:34px; height:34px; padding:8px; border-width:1.5px; }
  .atout__pastille--nutri{ --p:34px; width:34px; height:34px; padding:0; border-width:1.7px; }
  .atout__pastille--nutri b{ font-size:1.02rem; }
  .atout__texte{ grid-column:auto; font-size:.72rem; line-height:1.25; text-align:center; }
  .atout__texte br{ display:inline; }
  .atout__detail{ display:none; }
  /* Protéines et Nutri-Score sont déjà mis en avant dans l'écran d'accueil :
     ici on garde les trois allégations « sans », comme la maquette. */
  .atouts .atout--1,.atouts .atout--5{ display:none; }

  .engagements .note{
    position:absolute; left:var(--marge); right:var(--marge); bottom:clamp(10px,1.8svh,18px);
    z-index:6; margin:0; max-width:none; text-align:center; font-size:.58rem; line-height:1.4;
  }
}

/* ---------- Section 3 sur téléphone --------------------------------------- */
@media (max-width:899px){
  .parfums{
    min-height:100svh; justify-content:center;
    padding:clamp(92px,13vh,120px) var(--marge) clamp(26px,4vh,42px);
    --ph:min(42svh,78vw);
  }
  .parfums__tete h2{ font-size:clamp(2.1rem,9vw,2.8rem); }
  .parfums__onglets{ gap:8px; }
  .parfums__onglet{ min-height:44px; padding:0 15px; font-size:.84rem; }
  .parfums__ligne{ font-size:.95rem; }
  .parfums__cta{ display:flex; width:100%; }
}

/* Écran peu haut, ou mouvement réduit : on ne fige plus, la scène défile
   normalement et s'ouvre à l'entrée dans la fenêtre. */
@media (max-width:899px) and (max-height:700px),
       (max-width:899px) and (prefers-reduced-motion:reduce){
  .engagements__piste{ height:auto; }
  .engagements__fixe{
    position:relative; height:auto; min-height:0; background:none;
    padding:clamp(48px,9vw,72px) var(--marge);
  }
  .engagements{ background:linear-gradient(#eaf6fe,#d9eefb 60%,#cfe9fa); }
  .scene{ position:relative; inset:auto; }
  .engagements__tete{ position:static; padding:0; }
  .scene__produit{
    position:relative; left:auto; top:auto; margin:clamp(22px,5vw,34px) auto 0;
    --l:min(78vw,300px); transform:none;
  }
  .atouts{
    position:static; margin-top:clamp(22px,4.6vw,32px);
    padding-top:clamp(14px,3vw,20px);
  }
  .atout{ opacity:1; transform:none; }
  .engagements .note{ position:relative; bottom:auto; margin-top:18px; text-align:left; font-size:.72rem; }
}

@media (max-width:860px){
  .entete__nav,.entete__cta{ display:none; }
  .entete__burger{ display:block; }
  .formats__duo{ grid-template-columns:1fr; gap:22px; }
  .format__scene{ aspect-ratio:1/.72; }
  .format--petit .format__pot{ width:44%; }
  .format--grand .format__pot{ width:55%; }
  .format__specs div{ grid-template-columns:1fr; gap:3px; padding:11px 0; }
  .pied{ flex-direction:column; align-items:flex-start; }
  .pied__note{ margin-left:0; }
}

@media (max-width:640px){
  body{ font-size:16px; }
  h1{ font-size:clamp(2.7rem,11.6vw,4rem); }
  h2{ font-size:clamp(2.25rem,9.6vw,3.2rem); }
  .surtitre{ font-size:.62rem; letter-spacing:.14em; }
  .passer{ bottom:auto; top:74px; right:16px; padding:9px 14px; font-size:.78rem; }
  .champs{ grid-template-columns:1fr; }
  .recherche__champ{ padding-left:18px; gap:8px; }
  .recherche__envoi{ padding:12px 18px; }
  .carte__mention{ font-size:.66rem; padding:8px 13px; }
  .trouver h2{ font-size:clamp(1.9rem,8vw,2.5rem); }
  .menu-mobile nav a{ font-size:2rem; }
}

@media (max-width:380px){
  .recherche__envoi{ padding:12px 14px; font-size:.9rem; }
  .format__eclat{ display:none; }
}

/* Écrans peu hauts : pas de fixation, révélation courte à l'entrée */
/* Écrans très bas : la zone fixée ne doit jamais dépasser la fenêtre. */
@media (max-height:620px){
  .engagements__fixe{ min-height:0; }
  .engagements__piste{ height:260vh; }
}

/* ---------- 12. Mouvement réduit ------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; }
  .givre,.passer,.rejouer{ display:none!important; }
  .atout__detail{ opacity:1!important; transform:none!important; }
  .engagements__piste{ height:auto!important; }
  .engagements__fixe{ position:relative!important; height:auto!important; min-height:0; }
  .atout{ opacity:1!important; }
  .scene__traits path{ stroke-dashoffset:0!important; }
  .indice-bas span,.format__pot,.format__eclat,.coulee__nappe--2{ animation:none!important; }
  .heros__visuel,.heros__haut,.heros__titre,.format__scene,.carte svg,.revendeur__pots,.scene__produit{
    transform:none!important;
  }
  [data-reveal]{ opacity:1!important; transform:none!important; }
}
/* Sur grand écran, les atouts restent calés sur leur point d'ancrage. */
@media (prefers-reduced-motion:reduce) and (min-width:1100px){
  .atout{ transform:translate(-50%,-40px)!important; }
}