/* =========================================================
   BINTJE KING — feuille de style unique
   Toute la mise en forme du site est ici. Les sections sont
   numérotées dans l'ordre : polices, jetons de couleur et de
   typographie, base, composants, puis les blocs de page.
   ========================================================= */

/* ---------- 1. Polices ---------- */
/* Police des titres.
   1) Burbank Big Condensed Black — police commerciale (House Industries), fournie ici sous
      la licence du propriétaire du projet. NE PAS redistribuer ce fichier hors du projet.
   2) Passion One Black — substitut libre (SIL OFL) : condensée, ultra-grasse, angles
      légèrement arrondis. Sert de secours si le fichier Burbank est retiré.
   3) Anton — repli, conservé car c'est la police du logo et des sachets. */
@font-face{font-family:"Burbank Big Cd Bk";src:url("assets/fonts/burbank-big-cd-bk.woff2") format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Passion One";src:url("assets/fonts/passion-one-black.woff2") format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Anton";src:url("assets/fonts/anton.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Archivo Black";src:url("assets/fonts/archivo-black.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Archivo";src:url("assets/fonts/archivo.woff2") format("woff2");font-weight:100 900;font-display:swap}

/* ---------- 2. Tokens ---------- */
:root{
  /* couleurs de marque */
  --ink:#0E0B08;
  --ink-2:#171009;
  --ink-3:#231809;
  --paper:#FFF6E6;
  --paper-dim:#D8C9B2;
  --jaune:#FFD400;
  --jaune-fonce:#E0B800;
  --or:#DCA93F;
  --rouge:#E5231F;
  --brun:#20120A;

  /* couleurs saveurs */
  --carbonnade:#C67D29;
  --himalaya:#C03129;
  --bolognaise:#4AA545;
  --andalouse:#C96839;
  --moules:#A47448;
  --boulet:#6D3B7A;

  /* typo */
  --display:"Burbank Big Cd Bk","Passion One","Anton",Impact,"Arial Narrow Bold",sans-serif;
  --display-weight:900;
  /* police du logotype, conservée pour le mot-symbole */
  --logo:"Anton",Impact,sans-serif;
  --strong:"Archivo Black","Arial Black",Helvetica,sans-serif;
  --body:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* échelle */
  --step--1:clamp(.78rem,.76rem + .1vw,.85rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.06rem);
  --step-1:clamp(1.2rem,1.1rem + .4vw,1.35rem);
  --step-2:clamp(1.6rem,1.4rem + .9vw,2.1rem);
  --step-3:clamp(2.2rem,1.7rem + 2.2vw,3.8rem);
  --step-4:clamp(3rem,2rem + 4.6vw,6.6rem);
  --step-5:clamp(3.6rem,1.6rem + 7.4vw,9.6rem);

  /* espacements & rayons */
  --gut:clamp(20px,3.4vw,64px);
  --sec:clamp(56px,8vw,116px);
  --r-s:10px;
  --r-m:18px;
  --r-l:28px;
  --shadow:0 24px 60px rgba(0,0,0,.45);
  --max:1440px;
}

@media (min-width:1720px){
  :root{--max:1640px;--gut:72px}
}
@media (min-width:2200px){
  :root{--max:1840px}
}

/* ---------- 3. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:var(--step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
[id]{scroll-margin-top:100px}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}

h1,h2,h3,h4{margin:0;text-wrap:balance;line-height:1}
h1,h2{font-family:var(--display);font-weight:var(--display-weight);letter-spacing:-.005em;text-transform:uppercase}
h3,h4{font-family:var(--strong);font-weight:400;line-height:1.15}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec)}
.stack{display:flex;flex-direction:column;gap:18px}
.muted{color:var(--paper-dim)}
.lede{font-size:var(--step-1);color:var(--paper-dim);max-width:60ch;line-height:1.5}
.measure{max-width:62ch}

.skip-link{
  position:absolute;left:12px;top:-64px;z-index:200;
  background:var(--jaune);color:#000;padding:12px 18px;border-radius:0 0 var(--r-s) var(--r-s);
  font-family:var(--strong);text-decoration:none;transition:top .18s ease;
}
.skip-link:focus{top:0}
:focus-visible{outline:3px solid var(--jaune);outline-offset:3px;border-radius:4px}

/* ---------- 4. Éléments de marque ---------- */
.eyebrow{
  font-family:var(--strong);font-size:var(--step--1);
  letter-spacing:.2em;text-transform:uppercase;color:var(--jaune);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:4px;border-radius:2px;background:var(--jaune)}

/* Filet tricolore. Les couleurs du drapeau belge ne changent jamais : sur les
   fonds sombres du site, c'est le fond qui change — le drapeau est posé sur une
   plaque crème, ce qui rend la bande noire lisible. */
.tricolore{display:inline-flex;width:max-content;padding:4px;border-radius:8px;background:var(--paper)}
.tricolore span{display:block;width:38px;height:7px}
.tricolore span:nth-child(1){background:#141414;border-radius:4px 0 0 4px}
.tricolore span:nth-child(2){background:var(--jaune)}
.tricolore span:nth-child(3){background:var(--rouge);border-radius:0 4px 4px 0}

.badge{
  display:inline-block;font-family:var(--strong);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;padding:7px 12px;border-radius:999px;white-space:nowrap;
}
.badge--new{background:var(--jaune);color:#000}
.badge--best{background:var(--paper);color:var(--brun)}
.badge--ghost{background:rgba(255,246,230,.12);color:var(--paper);border:1px solid rgba(255,246,230,.28)}

/* boutons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--strong);font-size:.92rem;letter-spacing:.06em;text-transform:uppercase;
  padding:16px 28px;border-radius:999px;border:3px solid transparent;text-decoration:none;
  cursor:pointer;min-height:52px;transition:transform .16s ease,background .16s ease,color .16s ease,border-color .16s ease;
}
.btn--primary{background:var(--jaune);color:#120C00;border-color:var(--jaune)}
.btn--primary:hover{background:#fff;border-color:#fff;transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--paper);border-color:rgba(255,246,230,.4)}
.btn--ghost:hover{border-color:var(--jaune);color:var(--jaune);transform:translateY(-2px)}
.btn--dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--dark:hover{background:#000;transform:translateY(-2px)}
.btn--sm{padding:11px 18px;min-height:44px;font-size:.78rem}
.btn:active{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.btn,.btn:hover{transform:none}}

/* ---------- 5. En-tête ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(14,11,8,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,246,230,.1);
  transition:background .2s ease,border-color .2s ease;
}
.site-header.is-scrolled{background:rgba(14,11,8,.97);border-color:rgba(255,212,0,.35)}
.nav{display:flex;align-items:center;gap:20px;min-height:78px}
.nav__logo{flex:0 0 auto;display:block}
.nav__logo img{height:clamp(30px,2.6vw,42px);width:auto}
.nav__list{display:flex;gap:6px;margin-left:auto;align-items:center}
.nav__link{
  font-family:var(--strong);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;padding:11px 14px;border-radius:999px;color:var(--paper-dim);
  transition:color .16s ease,background .16s ease;display:block;
}
.nav__link:hover{color:var(--paper);background:rgba(255,246,230,.08)}
.nav__link[aria-current="page"]{color:var(--jaune);background:rgba(255,212,0,.12)}
.nav__cta{margin-left:10px}
.nav__burger{
  display:none;margin-left:auto;width:52px;height:52px;border-radius:14px;
  background:rgba(255,246,230,.08);border:1px solid rgba(255,246,230,.2);cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.nav__burger span{display:block;width:22px;height:2.5px;background:var(--paper);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

@media (max-width:900px){
  .nav__burger{display:flex}
  .nav__list{
    position:fixed;inset:78px 0 auto 0;flex-direction:column;align-items:stretch;gap:2px;
    background:var(--ink-2);padding:18px var(--gut) 28px;margin:0;
    border-bottom:3px solid var(--jaune);
    transform:translateY(-120%);transition:transform .28s ease;
  }
  .nav__list.is-open{transform:translateY(0)}
  .nav__link{padding:16px 12px;font-size:.92rem}
  .nav__cta{margin:12px 0 0}
  .nav__cta .btn{width:100%}
}

/* ---------- 6. Hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(40px,6vw,84px) clamp(30px,5vw,64px);
  background:radial-gradient(90% 120% at 78% 10%,#3A2409 0%,#1A1109 46%,#0E0B08 100%)}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 76% 34%,rgba(255,212,0,.035) 0deg 6deg,transparent 6deg 18deg);
}
.hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(24px,4vw,56px);align-items:center}
.hero__title{font-size:var(--step-5);line-height:.85}
.hero__title .outline{
  -webkit-text-stroke:3px var(--jaune);color:transparent;display:block;
}
.hero__title .solid{display:block;color:var(--paper)}
.hero__title .yellow{color:var(--jaune)}
.hero__claim{margin-top:26px;font-size:var(--step-1);color:var(--paper-dim);max-width:46ch;line-height:1.45}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero__facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.hero__stage{position:relative;min-height:min(68vh,640px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.hero__canvas{width:100%;flex:1 1 auto;min-height:min(62vh,600px);display:block;border-radius:var(--r-l)}
.hero__fallback{position:absolute;inset:0;display:grid;place-items:center;padding:20px}
.hero__fallback img{max-height:100%;width:auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,.6))}
.hero__hint{
  font-family:var(--strong);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(216,201,178,.75);text-align:center;margin:0;
}
.sticker{
  position:absolute;font-family:var(--strong);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  padding:12px 16px;border-radius:14px;color:#120C00;box-shadow:0 10px 24px rgba(0,0,0,.4);z-index:3;
}
.sticker--1{background:var(--jaune);top:4%;left:-2%;transform:rotate(-9deg)}
.sticker--2{background:var(--paper);bottom:14%;right:-1%;transform:rotate(7deg)}
.sticker--3{background:var(--rouge);color:#fff;top:46%;right:-3%;transform:rotate(-5deg)}

@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .hero__showcase{order:-1}
  .hero__stage{order:-1;min-height:auto}
  .hero__canvas{min-height:min(48vh,380px)}
  .sticker--1{left:0}.sticker--2{right:0}.sticker--3{display:none}
}

/* ---------- 7. Bandeau défilant ---------- */
.ticker{background:var(--jaune);color:#0E0B08;overflow:hidden;padding:14px 0;border-block:3px solid #0E0B08}
.ticker__track{display:flex;gap:38px;width:max-content;animation:slide 26s linear infinite}
.ticker__track span{font-family:var(--display);font-weight:var(--display-weight);font-size:clamp(1.1rem,2.2vw,1.6rem);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none}}

/* ---------- 8. Titres de section ---------- */
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(26px,4vw,44px);max-width:70ch}
.sec-head--split{flex-direction:row;justify-content:space-between;align-items:flex-end;max-width:none;gap:24px;flex-wrap:wrap}
.sec-head--split > div{display:flex;flex-direction:column;gap:14px;max-width:64ch}

/* ---------- 9. Cartes produits ---------- */
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(16px,2.2vw,28px)}
@media (min-width:1180px){.products{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{
  --accent:var(--or);
  position:relative;display:flex;flex-direction:column;
  border-radius:var(--r-l);overflow:hidden;background:var(--ink-2);
  border:1px solid rgba(255,246,230,.1);
  transition:transform .2s ease,border-color .2s ease;
}
.card:hover,.card:focus-within{transform:translateY(-6px);border-color:var(--accent)}
.card__visual{
  position:relative;display:grid;place-items:center;padding:58px 24px 20px;min-height:clamp(300px,24vw,380px);
  background:
    radial-gradient(120% 110% at 50% 0%,color-mix(in srgb,var(--accent) 70%,#000) 0%,color-mix(in srgb,var(--accent) 32%,#0E0B08) 70%,#0E0B08 100%);
}
.card__visual img{max-height:clamp(210px,26vw,300px);width:auto;filter:drop-shadow(0 18px 26px rgba(0,0,0,.5));transition:transform .25s ease}
.card:hover .card__visual img{transform:translateY(-6px) rotate(-2deg)}
.card__flags{position:absolute;top:16px;left:16px;z-index:2;display:flex;gap:8px;flex-wrap:wrap;max-width:calc(100% - 32px)}
.card__body{display:flex;flex-direction:column;gap:10px;padding:22px 22px 24px;flex:1}
.card__name{font-family:var(--display);font-weight:var(--display-weight);font-size:var(--step-2);text-transform:uppercase;line-height:.95}
.card__desc{font-size:.94rem;color:var(--paper-dim);line-height:1.55;flex:1}
.card__meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:.8rem;color:var(--paper-dim);
  font-variant-numeric:tabular-nums;border-top:1px solid rgba(255,246,230,.12);padding-top:14px}
.card__taste{font-family:var(--strong);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.card__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.card__price{font-family:var(--display);font-weight:var(--display-weight);font-size:var(--step-1)}
.heat{display:inline-flex;gap:3px;align-items:center}
.heat i{width:9px;height:9px;border-radius:2px;background:rgba(255,246,230,.22);display:block}
.heat i.on{background:var(--accent)}

/* ---------- 10. Filtres ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.filter{
  font-family:var(--strong);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  padding:11px 18px;border-radius:999px;background:transparent;cursor:pointer;
  border:2px solid rgba(255,246,230,.22);color:var(--paper-dim);min-height:44px;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.filter:hover{border-color:var(--paper);color:var(--paper)}
.filter[aria-pressed="true"]{background:var(--jaune);border-color:var(--jaune);color:#120C00}
.filter-empty{padding:40px 0;color:var(--paper-dim)}

/* ---------- 11. Nouveautés ---------- */
.news{display:grid;gap:clamp(16px,2.4vw,26px)}
.news__item{
  --accent:var(--jaune);
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:clamp(20px,3vw,44px);
  align-items:center;border-radius:var(--r-l);overflow:hidden;
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 26%,#0E0B08),#141009 72%);
  border:1px solid rgba(255,246,230,.12);
}
.news__visual{display:grid;place-items:center;padding:28px;background:radial-gradient(90% 90% at 50% 30%,color-mix(in srgb,var(--accent) 62%,#000),transparent 72%)}
.news__visual img{max-height:clamp(240px,24vw,400px);width:auto;filter:drop-shadow(0 20px 34px rgba(0,0,0,.55))}
.news__body{padding:10px clamp(20px,3vw,40px) 30px 0;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
@media (max-width:820px){
  .news__item{grid-template-columns:1fr}
  .news__body{padding:0 24px 30px}
}

/* ---------- 12. Histoire / valeurs ---------- */
.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.story__figure{position:relative;display:grid;place-items:center;padding:20px}
.story__figure::before{
  content:"";position:absolute;inset:6% 10%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,212,0,.22),transparent 68%);
}
.story__figure img{position:relative;max-height:clamp(280px,34vw,560px);width:auto;filter:drop-shadow(0 26px 40px rgba(0,0,0,.55))}
/* La couronne 3D remplace l'image dans ce bloc. Un <canvas> n'a aucun
   ratio intrinsèque : sans hauteur explicite il se replierait à zéro. */
.story__figure--3d{width:100%}
.story__figure--3d .couronne__canvas{
  position:relative;display:block;width:100%;height:clamp(280px,32vw,470px);
  touch-action:pan-y;filter:drop-shadow(0 24px 36px rgba(0,0,0,.5));
}
.story__legende{
  position:relative;margin-top:6px;text-align:center;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-dim);
}
/* Sur un écran tactile il n'y a pas de souris : on retire le conseil. */
@media (pointer:coarse){.story__astuce{display:none}}
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:clamp(30px,4vw,52px)}
.value{padding:24px;border-radius:var(--r-m);background:var(--ink-2);border:1px solid rgba(255,246,230,.1);display:flex;flex-direction:column;gap:8px}
.value__n{font-family:var(--display);font-weight:var(--display-weight);font-size:2rem;color:var(--jaune);line-height:1}
.value h3{font-size:1rem;letter-spacing:.04em;text-transform:uppercase}
.value p{font-size:.92rem;color:var(--paper-dim);line-height:1.55}
@media (max-width:820px){.story{grid-template-columns:1fr}.story__figure{order:-1}}

/* ---------- 13. Section 3D ---------- */
.scene{background:linear-gradient(180deg,#0E0B08,#1C1207 45%,#0E0B08)}
.scene__box{
  position:relative;border-radius:var(--r-l);overflow:hidden;
  border:1px solid rgba(255,212,0,.28);background:#100C07;
}
.scene__canvas{display:block;width:100%;height:clamp(340px,54vh,560px)}
.scene__fallback{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;gap:16px}
.scene__controls{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  padding:16px;border-top:1px solid rgba(255,246,230,.12);background:rgba(0,0,0,.35);
}
.swatch{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;min-height:44px;
  font-family:var(--strong);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  padding:10px 16px;border-radius:999px;border:2px solid rgba(255,246,230,.2);
  background:transparent;color:var(--paper-dim);transition:border-color .16s ease,color .16s ease;
}
.swatch::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--dot,#fff)}
.swatch:hover{color:var(--paper);border-color:var(--paper)}
.swatch[aria-pressed="true"]{border-color:var(--jaune);color:var(--jaune)}

/* ---------- 14. Bande CTA ---------- */
.cta-band{background:var(--jaune);color:#0E0B08;border-radius:var(--r-l);padding:clamp(30px,5vw,58px);
  display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.cta-band h2{color:#0E0B08;max-width:18ch}
.cta-band p{color:#3A2E00;max-width:44ch;margin-top:10px}

/* ---------- 15. Formulaire ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field label{font-family:var(--strong);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--paper)}
.field .req{color:var(--jaune)}
.field input,.field select,.field textarea{
  background:var(--ink-2);border:2px solid rgba(255,246,230,.2);border-radius:var(--r-s);
  padding:14px 16px;color:var(--paper);font-size:1rem;min-height:52px;width:100%;
  transition:border-color .16s ease,background .16s ease;
}
.field textarea{min-height:160px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(255,246,230,.4)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--jaune);background:#1D1509}
.field .error{font-size:.82rem;color:#FF9C97;min-height:1.2em}
.field[data-invalid="true"] input,.field[data-invalid="true"] select,.field[data-invalid="true"] textarea{border-color:#FF6B63}
.form__foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.form__status{font-family:var(--strong);font-size:.84rem;letter-spacing:.04em}
.form__status[data-state="ok"]{color:var(--jaune)}
.form__status[data-state="ko"]{color:#FF9C97}
@media (max-width:700px){.form{grid-template-columns:1fr}}

.contact-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.info-list{display:flex;flex-direction:column;gap:20px}
.info-list li{display:flex;flex-direction:column;gap:4px;padding-bottom:18px;border-bottom:1px solid rgba(255,246,230,.12)}
.info-list b{font-family:var(--strong);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--jaune)}
.info-list a{color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(255,246,230,.3)}
.info-list a:hover{color:var(--jaune);border-color:var(--jaune)}

/* ---------- 16. Page interne : en-tête ---------- */
.page-head{padding-block:clamp(46px,7vw,86px) clamp(26px,4vw,44px);
  background:radial-gradient(80% 130% at 20% 0%,#31200B,#0E0B08 72%)}
.page-head .stack > *{max-width:70ch}
.page-head + .section{padding-top:clamp(26px,4vw,56px)}
.breadcrumb{display:flex;gap:8px;flex-wrap:wrap;font-size:.82rem;color:var(--paper-dim)}
.breadcrumb a{text-decoration:none;color:var(--paper-dim)}
.breadcrumb a:hover{color:var(--jaune)}
.breadcrumb li+li::before{content:"›";margin-right:8px;opacity:.6}
.breadcrumb ol{display:flex;gap:8px;list-style:none;margin:0;padding:0;flex-wrap:wrap}

/* ---------- 17. Contenu éditorial ---------- */
.prose{display:flex;flex-direction:column;gap:20px;max-width:66ch}
.prose h2{font-size:var(--step-2);margin-top:16px}
.prose p{color:var(--paper-dim);line-height:1.7}
.prose strong{color:var(--paper)}
.timeline{display:flex;flex-direction:column;gap:0}
.timeline li{display:grid;grid-template-columns:110px 1fr;gap:20px;padding:22px 0;border-top:1px solid rgba(255,246,230,.14)}
.timeline b{font-family:var(--display);font-weight:var(--display-weight);font-size:1.6rem;color:var(--jaune);line-height:1}
.timeline p{color:var(--paper-dim);font-size:.95rem}
@media (max-width:600px){.timeline li{grid-template-columns:1fr;gap:6px}}

/* ---------- 18. Pied de page ---------- */
.site-footer{background:var(--ink-2);border-top:3px solid var(--jaune);padding-block:clamp(40px,6vw,72px) 28px;margin-top:var(--sec)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,44px)}
.footer-grid h4{font-family:var(--strong);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--jaune);margin-bottom:16px}
.footer-grid ul{display:flex;flex-direction:column;gap:11px}
.footer-grid a{color:var(--paper-dim);text-decoration:none;font-size:.94rem}
.footer-grid a:hover{color:var(--jaune)}
.footer__brand img{width:200px;margin-bottom:18px}
.footer__brand p{color:var(--paper-dim);font-size:.94rem;max-width:34ch}
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,246,230,.08);border:1px solid rgba(255,246,230,.16);
}
.socials a:hover{background:var(--jaune);border-color:var(--jaune)}
.socials svg{width:20px;height:20px;fill:currentColor}
.socials a:hover svg{fill:#0E0B08}
.footer-bottom{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  margin-top:clamp(30px,4vw,52px);padding-top:22px;border-top:1px solid rgba(255,246,230,.12);
  font-size:.86rem;color:var(--paper-dim)}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* ---------- 19. Design system (page) ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.tile{border-radius:var(--r-m);overflow:hidden;border:1px solid rgba(255,246,230,.12);background:var(--ink-2)}
.tile .chip{height:88px}
.tile .info{padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.tile .n{font-family:var(--strong);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.tile .hex{font-size:.84rem;color:var(--paper-dim);font-variant-numeric:tabular-nums}
.spec-row{display:grid;grid-template-columns:180px 1fr;gap:22px;padding:22px 0;border-top:1px solid rgba(255,246,230,.12);align-items:baseline}
.spec-row .k{font-family:var(--strong);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--jaune)}
@media (max-width:640px){.spec-row{grid-template-columns:1fr;gap:8px}}

/* ---------- 20. Apparition au scroll ---------- */
.reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
  .js .reveal.is-in{opacity:1;transform:none}
}

/* ---------- 21. Utilitaires ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;
  background:rgba(255,246,230,.1);padding:2px 6px;border-radius:5px}

/* =========================================================
   22. Hero à trois colonnes : mascotte · discours · 3D
   ========================================================= */
.hero__mascot{
  position:relative;display:none;align-self:end;justify-self:start;
  margin-bottom:-6px;
}
.hero__mascot img{
  width:100%;max-width:400px;height:auto;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.6));
}
.hero__mascot::before{
  content:"";position:absolute;left:6%;right:6%;bottom:2%;height:34%;
  background:radial-gradient(closest-side,rgba(255,212,0,.28),transparent 72%);
  filter:blur(6px);z-index:-1;
}
@media (min-width:1200px){
  /* la mascotte déborde jusqu'au bord gauche de l'écran */
  .hero__mascot{display:block;margin-bottom:0;margin-left:calc(-1 * clamp(28px,4.5vw,130px))}
  .hero__mascot img{width:100%;max-width:none}
  /* le hero déborde du conteneur : la mascotte et la 3D vont chercher les bords de l'écran */
  .hero .container{max-width:none;padding-inline:clamp(28px,4.5vw,130px)}
  .hero__grid{grid-template-columns:minmax(240px,.56fr) minmax(0,1.32fr) minmax(0,1.18fr);
    gap:clamp(20px,2.4vw,64px)}
  /* la colonne de texte se resserre : on borne le titre pour qu'il ne casse pas */
  .hero__title{font-size:clamp(3.4rem,6.1vw,7.2rem)}
  .hero__mascot img{max-width:400px}
  .hero{padding-bottom:0}
}
@media (min-width:1700px){
  .hero__grid{grid-template-columns:minmax(230px,.74fr) minmax(0,1.05fr) minmax(0,1.28fr)}
  .hero__title{font-size:clamp(5.4rem,5.6vw,9.6rem)}
  .hero__mascot img{max-width:600px}
}
@media (min-width:2200px){
  .hero__mascot img{max-width:700px}
}

/* ---------- 23. Éclats décoratifs (clin d'œil aux stickers) ---------- */
.eclat{position:absolute;display:block;pointer-events:none;z-index:1;line-height:0}
.eclat svg{width:100%;height:100%;display:block}
.eclat--star svg path{fill:var(--jaune)}
.eclat--cream svg path{fill:var(--paper)}
.eclat--or svg path{fill:var(--or)}
.eclat img{width:100%;height:auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45))}
@media (prefers-reduced-motion:no-preference){
  .eclat--pulse{animation:twinkle 3.6s ease-in-out infinite}
  .eclat--pulse.d1{animation-delay:.8s}
  .eclat--pulse.d2{animation-delay:1.7s}
  .eclat--float{animation:floaty 7s ease-in-out infinite}
  .eclat--float.d1{animation-delay:1.2s}
}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0deg);opacity:.9}50%{transform:scale(.72) rotate(18deg);opacity:.5}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-16px) rotate(6deg)}}

.hero .eclat--h1{width:38px;height:38px;top:16%;left:34%}
.hero .eclat--h2{width:22px;height:22px;top:52%;left:29%}
.hero .eclat--h3{width:30px;height:30px;top:8%;right:44%}
.hero .eclat--h4{width:88px;top:auto;bottom:9%;left:49%;display:none}
@media (min-width:1500px){.hero .eclat--h4{display:block}}
.hero .eclat--h6{width:64px;top:20%;right:8%}
.hero .eclat--h5{width:60px;top:7%;left:20%}
@media (max-width:1199px){.hero .eclat--h1,.hero .eclat--h2,.hero .eclat--h4,.hero .eclat--h5,.hero .eclat--h6{display:none}}

.section{position:relative}
.section .eclat--s1{width:30px;height:30px;top:6%;right:4%}
.section .eclat--s2{width:20px;height:20px;top:14%;left:2%}
@media (max-width:900px){.section .eclat--s1,.section .eclat--s2{display:none}}

/* ---------- 24. Le rayon — la vitrine des saveurs ----------
   Un carrousel à trois cartes alignées, c'est la mise en page de tous les
   sites de e-commerce. Ici la piste déborde de la grille jusqu'aux bords de
   l'écran, la carte au centre est mise en vedette pendant que ses voisines
   reculent, et la section entière prend la couleur de la saveur regardée.
   On garde le défilement natif — donc l'inertie du trackpad, le swipe
   tactile et le clavier — et on n'ajoute que ce que le natif ne fait pas :
   le glisser à la souris, la mise en vedette, le rail. */
.rayon{position:relative;overflow:clip;--vedette:var(--jaune);--carte:clamp(238px,24vw,330px)}

/* la lueur de la saveur en vedette, posée derrière tout le bloc */
.rayon::before{
  content:"";position:absolute;left:-15%;right:-15%;top:8%;height:min(720px,84%);
  background:radial-gradient(52% 58% at 50% 46%,
    color-mix(in srgb, var(--vedette) 30%, transparent), transparent 72%);
  transition:background .55s ease;pointer-events:none;z-index:0;
}
.rayon > *{position:relative;z-index:1}

/* Le mot géant : le nom de la saveur en vedette, en lettres creuses.
   Les cartes passent devant, c'est ce chevauchement qui donne la profondeur. */
.rayon__mot{
  z-index:0;margin:clamp(6px,1vw,18px) 0 calc(-1 * clamp(24px,3.6vw,68px));
  padding-inline:clamp(20px,5vw,110px);
  font-family:var(--display);font-weight:var(--display-weight);
  font-size:clamp(3.6rem,12.5vw,11.5rem);line-height:.78;text-align:left;
  text-transform:uppercase;white-space:nowrap;letter-spacing:-.01em;
  color:transparent;-webkit-text-stroke:2px color-mix(in srgb, var(--vedette) 58%, transparent);
  opacity:.55;transition:-webkit-text-stroke-color .55s ease;
}

.rayon__piste{
  /* Le point de mire n'est pas le centre mais le premier tiers : la carte en
     vedette s'y arrête et toutes les suivantes défilent à sa droite. Caler la
     vedette au centre obligerait à laisser une demi-page vide à gauche au
     chargement, ce qui se lit comme un bug plutôt que comme une intention. */
  --mire:clamp(20px,5vw,110px);
  display:grid;grid-auto-flow:column;grid-auto-columns:var(--carte);
  gap:clamp(14px,1.6vw,26px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline-start:var(--mire);
  padding-block:clamp(16px,2.4vw,38px);
  padding-inline:var(--mire) max(var(--mire), calc(100% - var(--mire) - var(--carte)));
  scrollbar-width:none;cursor:grab;
}
.rayon__piste::-webkit-scrollbar{display:none}
.rayon__piste > *{scroll-snap-align:start}
/* pendant le glisser on coupe l'aimant, sinon il se bat avec la souris */
.rayon__piste[data-glisse]{cursor:grabbing;scroll-snap-type:none}

/* --- les cartes du rayon --- */
.rayon .card{
  transform:scale(.85) translateY(12px);filter:saturate(.45) brightness(.62);
  transition:transform .5s cubic-bezier(.2,.75,.2,1),filter .5s ease,
             border-color .35s ease,box-shadow .5s ease;
}
.rayon .card:hover{transform:scale(.88) translateY(6px);filter:saturate(.7) brightness(.8)}
.rayon .card[data-actif]{
  transform:none;filter:none;
  border-color:color-mix(in srgb, var(--accent) 62%, transparent);
  box-shadow:0 34px 64px -26px color-mix(in srgb, var(--accent) 78%, transparent);
}
.rayon .card[data-actif]:hover{transform:translateY(-4px)}
/* Le numéro de la saveur, en très gros dans le coin du visuel. Le pseudo est
   sur l'article et non sur .card__visual : attr() ne sait lire que les
   attributs de son propre élément, et data-num vit sur l'article. */
.rayon .card::after{
  content:attr(data-num);position:absolute;right:16px;
  top:clamp(232px,20.5vw,318px);
  font-family:var(--display);font-weight:var(--display-weight);
  font-size:clamp(2.6rem,4vw,4.2rem);line-height:1;
  color:rgba(255,246,230,.13);pointer-events:none;z-index:2;
}
@media (prefers-reduced-motion:reduce){
  .rayon .card,.rayon .card:hover{transform:none;transition:filter .2s ease}
}

/* --- la navigation --- */
.rayon__nav{display:flex;gap:10px}
.rayon__btn{
  width:52px;height:52px;border-radius:50%;cursor:pointer;
  background:transparent;border:2px solid rgba(255,246,230,.28);color:var(--paper);
  display:grid;place-items:center;transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.rayon__btn:hover:not(:disabled){background:var(--jaune);border-color:var(--jaune);color:#0E0B08}
.rayon__btn:disabled{opacity:.35;cursor:default}
.rayon__btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* --- le rail : six segments, un par saveur, cliquables --- */
.rayon__rail{display:flex;gap:8px;margin-top:clamp(16px,2.2vw,28px)}
.rayon__onglet{
  flex:1;min-width:0;padding:0;border:0;background:none;cursor:pointer;
  text-align:left;font:inherit;color:inherit;
}
.rayon__onglet::before{
  content:"";display:block;height:4px;border-radius:99px;
  background:rgba(255,246,230,.16);transition:background .3s ease,height .3s ease;
}
.rayon__onglet:hover::before{background:rgba(255,246,230,.34)}
.rayon__onglet[aria-current="true"]::before{background:var(--accent);height:9px}
.rayon__onglet span{
  display:block;margin-top:9px;font-family:var(--strong);
  font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--paper-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .3s ease;
}
.rayon__onglet[aria-current="true"] span{color:var(--paper)}
@media (max-width:640px){.rayon__onglet span{display:none}}

.sec-head--split .head-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* =========================================================
   25. Hero « Nouvelle saveur » — composition de la bannière
   ========================================================= */
:root{ --creme-vert:#FAFFC6; }

/* --- bulle de la mascotte --- */
.hero__mascot{position:relative}
.bubble{font-weight:var(--display-weight);
  position:absolute;top:6%;left:52%;z-index:3;
  display:inline-block;white-space:nowrap;
  font-family:var(--display);font-size:clamp(1.1rem,1.5vw,1.9rem);
  text-transform:uppercase;letter-spacing:.02em;color:#141414;
  background:#fff;padding:.5em .85em .55em;border-radius:999px;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
}
.bubble::after{
  content:"";position:absolute;left:14%;bottom:-13px;
  width:26px;height:20px;background:#fff;
  clip-path:polygon(100% 0,0 0,58% 100%);
}
.bubble::before{
  content:"";position:absolute;left:2%;bottom:-26px;
  width:11px;height:11px;border-radius:50%;background:#fff;
}

/* --- les trois sachets alignés --- */
.hero__packs{position:relative;display:flex;align-items:flex-end;justify-content:center;padding-top:6px}
.hero__packs img{
  width:36%;height:auto;flex:0 0 auto;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.6));
  transition:transform .25s ease;
}
.hero__packs img:nth-child(1){transform:rotate(-7deg) translateY(10px);z-index:1}
.hero__packs-3d{width:50%;aspect-ratio:.68;position:relative;z-index:3;margin-inline:-5%;flex:0 0 auto}
.hero__packs-3d canvas{width:100%;height:100%;display:block}
.hero__packs-fallback{position:absolute;inset:0;margin:auto;width:82%!important;height:auto}
.hero__packs img:last-of-type{transform:rotate(7deg) translateY(10px);z-index:2}
.hero__packs:hover img:nth-child(1){transform:rotate(-11deg) translateY(0)}

.hero__packs:hover img:last-of-type{transform:rotate(11deg) translateY(0)}
@media (prefers-reduced-motion:reduce){
  .hero__packs img,.hero__packs:hover img{transition:none}
}

/* --- le bandeau « Nouvelle saveur » --- */
.hero__flag{
  display:block;text-align:center;margin:0 0 6px;
  font-family:var(--display);font-weight:var(--display-weight);text-transform:uppercase;line-height:.92;
  font-size:clamp(1.6rem,3vw,3.4rem);color:var(--creme-vert);
  text-shadow:0 4px 16px rgba(0,0,0,.5);
}
.hero__flag small{display:block;font-size:.36em;letter-spacing:.16em;color:var(--jaune);
  font-family:var(--strong);margin-top:.6em}

/* --- la colonne visuelle du hero --- */
.hero__showcase{display:flex;flex-direction:column;justify-content:center;gap:6px;position:relative}
.hero__showcase .hero__hint{position:relative;z-index:4;margin-top:16px}
@media (max-width:1199px){
  .bubble{font-weight:var(--display-weight);font-size:clamp(1rem,3vw,1.4rem)}
}
@media (max-width:899px){
  .hero__packs img{width:36%}
}

/* =========================================================
   26. Hero « Croky » — slogan centré, line-up de sachets, vague
   ========================================================= */
.hero--claim{padding-block:clamp(26px,3.2vw,54px) 0;text-align:center}
.hero--claim .container{position:relative;z-index:2}
.hero__intro{display:flex;flex-direction:column;align-items:center;gap:18px;
  max-width:56ch;margin-inline:auto}
.hero__claim-title{
  font-family:var(--display);font-weight:var(--display-weight);text-transform:uppercase;
  font-size:clamp(2.6rem,5.8vw,8.2rem);line-height:.88;letter-spacing:-.008em;
  color:var(--paper);margin:0;text-wrap:balance;
}
.hero__claim-title em{font-style:normal;color:var(--jaune);display:block}
.hero__sub{font-size:clamp(1rem,1.25vw,1.22rem);color:var(--paper-dim);line-height:1.5;max-width:44ch}
.hero--claim .hero__actions{justify-content:center;margin-top:6px}

/* --- le line-up : mascotte + trois sachets --- */
.hero__lineup{
  position:relative;z-index:2;
  display:flex;align-items:flex-end;justify-content:center;
  margin-top:clamp(8px,1.4vw,24px);
  padding:0 clamp(20px,3vw,64px) clamp(14px,1.8vw,30px);
}
.hero__lineup .hero__packs{width:min(820px,96%);padding-top:0}
@media (min-width:1700px){.hero__lineup .hero__packs{width:min(1120px,70%)}}
.hero__king{
  position:absolute;left:clamp(-30px,1vw,40px);bottom:-6px;z-index:4;
  width:clamp(180px,21vw,440px);pointer-events:none;
}
/* Ordre d'empilement explicite entre la couronne et la mascotte. Le navigateur
   promeut ces deux éléments en couches séparées pendant l'animation d'entrée
   (transform animé sur le parent, filtre sur l'image, canvas WebGL) : sans
   z-index déclaré, rien ne garantit que la couronne reste devant. */
.hero__king img{position:relative;z-index:1;display:block;width:100%;height:auto;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.6))}
/* La couronne 3D flotte au-dessus du crâne. Tout est en pourcentage de la
   largeur de la mascotte : le sacre reste calé quelle que soit la taille
   d'écran. Le canvas est plus large que la couronne (elle occupe ~77 % de
   sa largeur), c'est cette marge qui crée l'espace entre l'or et la tête. */
.hero__couronne{
  position:absolute;left:50%;bottom:94%;z-index:2;transform:translateX(-50%);
  width:54%;aspect-ratio:1.35;display:block;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.5));
}
@media (max-width:900px){
  .hero__king{display:none}
  .hero__lineup{padding-inline:0}
}

/* --- la vague qui plonge dans le bandeau jaune --- */
.hero__wave{
  position:absolute;left:0;right:0;bottom:-1px;width:100%;
  height:clamp(38px,4.6vw,88px);display:block;z-index:1;
}
.hero--claim .hero__packs img{width:26%}
.hero--claim .hero__packs-3d{width:36%;aspect-ratio:.8;margin-inline:-3%}
@media (max-width:640px){
  .hero--claim .hero__packs img{width:29%}
  .hero--claim .hero__packs-3d{width:40%}
}

/* --- iframe Spline, quand elle remplace la scène Three.js --- */
.scene__spline{width:100%;height:clamp(340px,54vh,560px);border:0;display:block;background:#100C07}

/* --- iframe Spline dans le line-up du hero (remplace le canvas Three.js) --- */
.hero__spline{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;display:block;background:transparent;
}



/* =========================================================
   27. Intro du hero — motion reprise de Figma
   ---------------------------------------------------------
   Timeline Figma : 5 s, lecture unique, points clés à 40 %
   et 52 %. Chorégraphie d'origine :
     · sachet gauche  : arrive du bas          -> posé à 40 %
     · sachet droite  : arrive de la droite    -> posé à 40 %
     · sachet central : monte du bas, dépasse à 40 %, puis
                        redescend en rétrécissant jusqu'à 52 %
     · mascotte       : arrive de la gauche en rétrécissant
   Les 48 % restants du timeline Figma sont un temps mort :
   la durée web est ramenée à 2,6 s (= 52 % de 5 s), les
   proportions entre les étapes sont conservées à l'identique.
   Les amplitudes sont adaptées au cadrage du site, qui n'a
   pas les mêmes dimensions que la maquette 1920 × 1080.
   ========================================================= */
:root{ --intro:2.6s; --intro-cle:77%; }   /* 77 % de 2,6 s = 2 s = les 40 % de Figma */

@media (prefers-reduced-motion:no-preference){
  .hero__packs img:nth-child(1){ animation:intro-sachet-gauche var(--intro) linear backwards }
  .hero__packs-3d            { animation:intro-sachet-centre var(--intro) linear backwards }
  .hero__packs img:last-of-type{ animation:intro-sachet-droite var(--intro) linear backwards }
  .hero__king                { animation:intro-mascotte var(--intro) linear backwards }
  .hero__couronne            { animation:intro-couronne var(--intro) linear backwards }
}

/* Chaque image d'animation redonne la transformation de repos :
   une animation sur transform écrase la règle statique. */
@keyframes intro-sachet-gauche{
  0%   { transform:rotate(-7deg) translateY(64%); opacity:0 }
  18%  { opacity:1 }
  77%,100% { transform:rotate(-7deg) translateY(10px); opacity:1 }
}
@keyframes intro-sachet-droite{
  0%   { transform:rotate(7deg) translateX(96%); opacity:0 }
  18%  { opacity:1 }
  77%,100% { transform:rotate(7deg) translateY(10px); opacity:1 }
}
@keyframes intro-sachet-centre{
  0%   { transform:translateY(128%) scale(1.18); opacity:0;
         animation-timing-function:cubic-bezier(.5,0,.5,1) }
  16%  { opacity:1 }
  77%  { transform:translateY(-9%) scale(1.18) }
  100% { transform:translateY(0) scale(1) }
}
@keyframes intro-mascotte{
  0%   { transform:translateX(-78%) scale(1.24); opacity:0 }
  20%  { opacity:1 }
  100% { transform:translateX(0) scale(1); opacity:1 }
}
/* Le sacre : la couronne descend se poser au-dessus de la tête une fois la
   mascotte arrivée. Elle garde son translateX(-50%) de centrage, sinon
   l'animation écraserait la règle statique et la décalerait d'une demi-largeur. */
@keyframes intro-couronne{
  0%,42% { transform:translate(-50%,-70%) scale(.72); opacity:0 }
  62%    { opacity:1 }
  100%   { transform:translate(-50%,0) scale(1); opacity:1 }
}

/* =========================================================
   28. Bloc film (page « Qui sommes-nous ? »)
   ========================================================= */
.film{margin:0;display:flex;flex-direction:column;gap:16px}
.film__video{
  width:100%;height:auto;max-width:1000px;margin-inline:auto;display:block;
  aspect-ratio:16/9;background:#0E0B08;
  border-radius:var(--r-l);border:1px solid rgba(255,246,230,.14);
  box-shadow:var(--shadow);
}
.film__legende{
  max-width:64ch;margin-inline:auto;color:var(--paper-dim);
  font-size:.96rem;line-height:1.6;text-align:center;
}
.film__legende strong{color:var(--paper)}
.film__mention{
  display:block;margin-top:10px;font-size:.82rem;color:rgba(216,201,178,.6);
  font-style:italic;
}