:root{--noir:#F7F7F4;--jaune:#F5C518;--blanc:#0B0B0D;--gris:rgba(11,11,13,.68)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--noir);scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{font-family:Inter,"Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;color:var(--blanc);background:var(--noir);-webkit-font-smoothing:antialiased;line-height:1.4;overflow-x:hidden}
.progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:20;pointer-events:none}
.progress i{display:block;height:100%;background:var(--jaune);transform:scaleX(0);transform-origin:left}
.top{position:fixed;inset:0 0 auto 0;z-index:15;padding:calc(16px + env(safe-area-inset-top)) 20px 10px;pointer-events:none}
.brand{pointer-events:auto;display:inline-flex;align-items:center;gap:9px;color:var(--blanc);text-decoration:none;font-weight:900;letter-spacing:.08em;font-size:13px}
.brand b{background:var(--jaune);color:#111;padding:2px 7px;border-radius:5px}
.eclair{width:12px;height:19px;background:var(--jaune);clip-path:polygon(58% 0,12% 56%,44% 56%,30% 100%,88% 38%,54% 38%,72% 0)}

.track{position:relative}
.stage{position:relative;overflow:hidden;background:var(--noir)}
#vid,.fixe,.voile,.lueur,.grain,.papier{position:absolute;inset:0;width:100%;height:100%;display:block}
.fixe{display:none;object-fit:cover}
#vid{object-fit:cover;background:#F7F7F4;pointer-events:none}
.voile{pointer-events:none;opacity:var(--voile,1);background:
  linear-gradient(to top,rgba(247,247,244,.95) 0,rgba(247,247,244,.78) 26%,rgba(247,247,244,0) 58%),
  radial-gradient(ellipse 120% 90% at 50% 40%,rgba(247,247,244,0) 60%,rgba(247,247,244,.5) 100%)}
.lueur{pointer-events:none;display:none;opacity:.0;will-change:opacity;background:radial-gradient(ellipse 70% 38% at 50% 100%,rgba(245,197,24,.30),rgba(245,197,24,0) 70%)}
.grain{pointer-events:none;inset:-60px;width:calc(100% + 120px);height:calc(100% + 120px);opacity:.03;animation:gr 1s steps(6) infinite;will-change:transform}
@keyframes gr{0%{transform:translate(0,0)}20%{transform:translate(-26px,14px)}40%{transform:translate(18px,-30px)}60%{transform:translate(-12px,-8px)}80%{transform:translate(30px,22px)}100%{transform:translate(0,0)}}

/* textes */
.ch{position:absolute;left:20px;right:20px;bottom:calc(30px + env(safe-area-inset-bottom));z-index:5;visibility:hidden;pointer-events:none}
.ch.on{visibility:visible}
.cta.on{pointer-events:auto}
.kick{font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#7A5F00;margin-bottom:14px}
h1,h2{font-weight:900;letter-spacing:-.045em;line-height:.94;font-size:clamp(3rem,15.5vw,6.6rem);color:var(--blanc)}
.ln{display:block;overflow:hidden;padding:.04em 0 .12em;margin-bottom:-.1em}
.ln>span{display:block;will-change:transform}
em{font-style:normal;background:var(--jaune);color:#0B0B0D;padding:0 .12em;border-radius:.12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.cta h2{font-size:clamp(2.6rem,13vw,5.6rem)}
sup{font-size:.45em;vertical-align:.8em;letter-spacing:0}
.sub{margin-top:20px;font-size:clamp(1rem,4.3vw,1.3rem);color:var(--gris);max-width:30ch;font-weight:500}
.hint{margin-top:26px;font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);display:flex;align-items:center;gap:12px}
.hint i{display:block;width:1px;height:34px;background:linear-gradient(var(--jaune),transparent);transform-origin:top}
.ch.on .hint i{animation:chute 1.6s ease-in-out infinite}
@keyframes chute{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.btn{position:relative;display:inline-block;margin-top:24px;background:var(--jaune);color:#111;font-weight:900;text-decoration:none;padding:18px 34px;border-radius:999px;font-size:1.05rem;min-height:52px;box-shadow:0 10px 30px rgba(245,197,24,.45)}
.btn::after{content:"";position:absolute;inset:0;border-radius:999px;border:2px solid rgba(245,197,24,.7);opacity:0}
.cta.on .btn::after{animation:puls 2.4s ease-out infinite}
@keyframes puls{0%{opacity:1;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.25)}}
.small{margin-top:20px;font-size:11.5px;line-height:1.5;color:rgba(11,11,13,.62);max-width:46ch}
.foot{padding:30px 20px calc(30px + env(safe-area-inset-bottom));text-align:center;font-size:13px;color:rgba(11,11,13,.6);background:var(--noir)}
.foot a{color:inherit}

/* mode animé (JS) */
html.js .track{height:800vh}
html.js .stage{position:sticky;top:0;height:100vh;height:100svh}
html.js .ln>span{transform:translate3d(0,112%,0)}
html.js .fade{opacity:0}
html.js .ch.sans-js-anim .ln>span{transform:none}

/* mobile : la vidéo occupe le haut de l'écran, les titres restent dessous (jamais sur les cartouches) ; voile seulement sous le texte */
@media (max-aspect-ratio:11/10){
  html.js #vid{height:64%;bottom:auto;object-fit:cover;object-position:50% 50%;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 88%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 88%,transparent 100%)}
  html.js .voile{background:linear-gradient(to top,rgba(247,247,244,.96) 0,rgba(247,247,244,.85) 30%,rgba(247,247,244,0) 40%)}
}
/* ordinateur : texte à gauche, produit à droite */
@media (min-aspect-ratio:11/10) and (min-width:760px){
  /* mode large : la vidéo (9:16) est au CENTRE de l'écran, toute la hauteur ; ses bords se fondent dans le fond (masque), aucun cadre visible */
  #vid,.fixe{left:0;right:0;margin:0 auto;width:64svh;height:100%;object-fit:cover;object-position:50% 40%;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 22%,#000 78%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 22%,#000 78%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
  html.js .track{height:880vh}
  .ch{left:4vw;right:auto;bottom:auto;top:50%;translate:0 -50%;width:27vw}
  h1,h2{font-size:clamp(2.6rem,4.2vw,5.4rem)}
  .cta h2{font-size:clamp(2.4rem,3.8vw,4.8rem)}
  .voile{background:linear-gradient(to right,rgba(247,247,244,.94) 0,rgba(247,247,244,.7) 14%,rgba(247,247,244,0) 28%)}
  .sub{font-size:clamp(.95rem,1.2vw,1.3rem)}
  .top{padding-left:6vw}
}

/* mouvement réduit / mode statique : image fixe et textes l'un sous l'autre */
html.statique .track{height:auto}
html.statique .stage{position:relative;height:auto;padding-bottom:20px}
html.statique #vid,html.statique .grain,html.statique .lueur,html.statique .hint{display:none}
html.statique .fixe{display:block;position:relative;height:auto;max-height:70vh;object-fit:cover}
html.statique .voile{display:none}
html.statique .ch{position:relative;inset:auto;translate:none;visibility:visible;width:auto;margin:34px 20px 0;pointer-events:auto}
html.statique .ln>span{transform:none}
html.statique .fade{opacity:1}
html.statique .btn{animation:none}
@media (prefers-reduced-motion:reduce){.grain,.hint i,.btn{animation:none}}

/* fin de séquence : la feuille remplit l'écran, le texte passe en encre sombre (continuité feuille -> page) */
.brand,.cta h2,.cta .sub,.cta .small,.cta .kick,h1,h2,.sub{transition:color .5s}
html.clair .brand,html.retour .brand{color:#0B0B0D}
html.clair .progress i,html.retour .progress i{box-shadow:none}
html.clair .cta h2,html.retour .cta h2{color:#0B0B0D}

html.clair .cta .kick,html.retour .cta .kick{color:#7A5F00}
html.clair .cta .small,html.retour .cta .small{color:rgba(11,11,13,.62)}
html.clair .grain,html.retour .grain{opacity:.04}
html.clair .brand b,html.retour .brand b{color:#111}
.papier{pointer-events:none;background:#F7F7F4;opacity:0}
html.statique .papier{display:none}

/* lien « Passer » : visible dès le début, discret */
.passer{position:fixed;top:calc(14px + env(safe-area-inset-top));right:16px;z-index:16;color:rgba(11,11,13,.75);font-size:12px;font-weight:700;letter-spacing:.06em;text-decoration:none;padding:8px 12px;border:1px solid rgba(11,11,13,.25);border-radius:999px;background:rgba(247,247,244,.6);transition:opacity .4s,color .4s,border-color .4s}
.passer.cache{opacity:0;pointer-events:none}
html.clair .passer{color:rgba(11,11,13,.7);border-color:rgba(11,11,13,.25);background:rgba(247,247,244,.5)}
.rejouer{margin-top:18px}
.rejouer a{font-size:12.5px;font-weight:700;color:rgba(11,11,13,.55);text-decoration:underline;text-underline-offset:3px}
.rejouer{display:none}
/* visiteur qui revient : page finale directe, sans animation ni image */
html.retour .rejouer{display:block}
html.retour .passer,html.retour .hint,html.retour #vid,html.retour .grain,html.retour .lueur,html.retour .voile{display:none}
html.retour .track{height:auto}
html.retour .stage{position:relative;height:auto;min-height:100vh;min-height:100svh}
html.retour .papier{opacity:1}
html.retour .ch:not(.cta){display:none}
html.retour .ch.cta{visibility:visible;pointer-events:auto;position:absolute;left:20px;right:20px;bottom:calc(30px + env(safe-area-inset-bottom))}
html.retour .ln>span,html.retour .fade{transform:none;opacity:1}
html.retour .btn::after{animation:puls 2.4s ease-out infinite}
@media (min-aspect-ratio:11/10) and (min-width:760px){html.retour .ch.cta{left:6vw;right:auto;bottom:auto;top:50%;translate:0 -50%;width:42vw}}
html.statique .passer{display:none}
@media (prefers-reduced-motion:reduce){.passer{transition:none}}

/* feuille finale : élément net (SVG) qui prend le relais de la vidéo ; position et taille posées par le script */
.feuille{position:absolute;left:0;top:0;width:0;height:0;opacity:0;pointer-events:none;z-index:3;box-shadow:0 14px 40px rgba(11,11,13,.14);background:#fffffd}
.feuille svg{display:block;width:100%;height:100%}
html.statique .feuille,html.retour .feuille{display:none}