/* ============================================================
   Nuage Bleu · site vitrine · V3 sombre
   Bricolage Grotesque partout (opsz 96 en titre, 12 en texte).
   Aurore WebGL en fond, grain, révélations orchestrées par GSAP.
   Aucun tiret cadratin.
   ============================================================ */

:root {
  --bg: #08090b;
  --bg-2: #0d0f12;
  --surf: #13161a;
  --line: rgba(238,243,238,.09);
  --txt: #eef3ee;
  --txt-2: rgba(238,243,238,.64);
  --txt-3: rgba(238,243,238,.42);
  --card-a: #142720;
  --card-b: #0d1b15;
  --paper: #f5f0e6;
  --paper-ink: var(--paper-ink);
  --deep: var(--deep);
  --deep-2: var(--deep-2);
  --silhouette: var(--silhouette);
  --clip-a: #2b6355;
  --clip-b: #357564;
  --orb-1: color-mix(in srgb, var(--pop) 50%, transparent);
  --orb-2: rgba(99,162,163,.5);
  --dot: rgba(238,243,238,.085);
  --shadow: var(--shadow);

  /* teintes des cadres de pub */
  --t1: #2f6f8c; --t2: #3f7a6c; --t3: #23594b; --t4: #4f8f92; --t5: #365f80; --t6: #2a6a5e;

  --forest: #1f5b41;
  --moss: #3f8b78;
  --teal: #63a2a3;
  --cyan: #8ad0e0;
  /* la couleur qui claque : dégradé jaune pâle → cyan (choix 18 de la planche 2).
     Autres variantes toujours testables par ?accent=nom. */
  --pop: #f4fc03;
  --pop-2: #f9ff7d;
  --pop-deep: #4a4f01;
  --pop-grad: linear-gradient(100deg, #f4fc03, #e3fa2a);
  --amber: var(--pop);
  --amber-2: var(--pop-2);

  --font: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --gut: clamp(20px, 5vw, 80px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* Variantes d'accent, sélectionnables par ?accent=nom (planche de validation) */
html[data-accent="bleu"] { --pop-grad: none; --pop: #8fd3ff; --pop-2: #cfeeff; --pop-deep: #123a5a; }
html[data-accent="kaki"] { --pop-grad: none; --pop: #c6cc7c; --pop-2: #e3e6b8; --pop-deep: #3c4018; }
html[data-accent="jaune"] { --pop-grad: none; --pop: #f6e27a; --pop-2: #fbf0b4; --pop-deep: #5a4a12; }
html[data-accent="rose"] { --pop-grad: none; --pop: #ffaac6; --pop-2: #ffd3e1; --pop-deep: #5a1a36; }
html[data-accent="menthe"] { --pop-grad: none; --pop: #9ff0d4; --pop-2: #d6fbef; --pop-deep: #0f4a3a; }
html[data-accent="blanc"] { --pop-grad: none; --pop: #ffffff; --pop-2: #ffffff; --pop-deep: #3a3f45; }
html[data-accent="champagne"] { --pop-grad: none; --pop: #e2c27a; --pop-2: #f3e2b6; --pop-deep: #4d3a12; }
html[data-accent="electrique"] { --pop-grad: none; --pop: #4f7cff; --pop-2: #a9beff; --pop-deep: #10204f; }
html[data-accent="cyan"] { --pop-grad: none; --pop: #8ad0e0; --pop-2: #cbeef5; --pop-deep: #143a45; }
html[data-accent="lavande"] { --pop-grad: none; --pop: #b9a8ff; --pop-2: #ddd5ff; --pop-deep: #2c1f5a; }
html[data-accent="citron"] { --pop-grad: none; --pop: #c8ff5a; --pop-2: #e6ffb0; --pop-deep: #33500c; }
html[data-accent="emeraude"] { --pop-grad: none; --pop: #34d399; --pop-2: #a7f3d0; --pop-deep: #0b3d2a; }
html[data-accent="marque"] { --pop: #63c9c0; --pop-2: #bfeee8; --pop-deep: #143a45; --pop-grad: linear-gradient(100deg, #3f8b78, #8ad0e0); }
html[data-accent="ciel-rose"] { --pop: #c7c0e6; --pop-2: #e9e4ff; --pop-deep: #2f2a55; --pop-grad: linear-gradient(100deg, #8fd3ff, #ffaac6); }
html[data-accent="menthe-jaune"] { --pop: #cbe9a7; --pop-2: #eaf7d4; --pop-deep: #2f4a1c; --pop-grad: linear-gradient(100deg, #9ff0d4, #f6e27a); }
html[data-accent="violet-cyan"] { --pop: #8e9dff; --pop-2: #cbd3ff; --pop-deep: #23205a; --pop-grad: linear-gradient(100deg, #7c5cff, #8ad0e0); }
/* Planche 2 : autour du cyan du logo et des dégradés clairs (analogues, triadiques, split) */
html[data-accent="cyan-menthe"] { --pop: #94dfd9; --pop-2: #d3f6f2; --pop-deep: #12403c; --pop-grad: linear-gradient(100deg, #8ad0e0, #9ff0d4); }
html[data-accent="glace"] { --pop: #c4e7f0; --pop-2: #ffffff; --pop-deep: #1d3a42; --pop-grad: linear-gradient(100deg, #8ad0e0, #ffffff); }
html[data-accent="aurore"] { --pop: #a3d8e8; --pop-2: #dff2f8; --pop-deep: #23305a; --pop-grad: linear-gradient(100deg, #9ff0d4, #8ad0e0 50%, #b9a8ff); }
html[data-accent="jaune-cyan"] { --pop: #c0d9ad; --pop-2: #e8f3dc; --pop-deep: #2f4030; --pop-grad: linear-gradient(100deg, #f6e27a, #8ad0e0); }
html[data-accent="kaki-jaune"] { --pop: #dcd77b; --pop-2: #eeecb9; --pop-deep: #454313; --pop-grad: linear-gradient(100deg, #c6cc7c, #f6e27a); }
html[data-accent="sorbet"] { --pop: #d6f9bd; --pop-2: #f0fde3; --pop-deep: #2c4a22; --pop-grad: linear-gradient(100deg, #b8ffd9, #fff3a0); }
html[data-accent="ocean"] { --pop: #6da6f0; --pop-2: #c0d8ff; --pop-deep: #142a5a; --pop-grad: linear-gradient(100deg, #8ad0e0, #4f7cff); }
html[data-accent="turquoise"] { --pop-grad: none; --pop: #2dd4bf; --pop-2: #99f6e4; --pop-deep: #0b3d38; }
html[data-accent="glacier"] { --pop-grad: none; --pop: #bfe9ff; --pop-2: #ecf8ff; --pop-deep: #1b3a4a; }
html[data-accent="vert-eau"] { --pop-grad: none; --pop: #a8e6cf; --pop-2: #d9f5ea; --pop-deep: #17402f; }
html[data-accent="holo"] { --pop: #cfd0c8; --pop-2: #f2f2ee; --pop-deep: #3a2a3a; --pop-grad: linear-gradient(100deg, #8ad0e0, #ffaac6 50%, #f6e27a); }
html[data-accent="argent"] { --pop: #c9cfd6; --pop-2: #eef1f4; --pop-deep: #2b3138; --pop-grad: linear-gradient(100deg, #f2f4f7, #9aa3ad); }
html[data-accent="lagon"] { --pop: #a8ceae; --pop-2: #dcefe0; --pop-deep: #1e3f2e; --pop-grad: linear-gradient(100deg, #8ad0e0, #c6cc7c); }
html[data-accent="trio"] { --pop: #b8e6b8; --pop-2: #e4f6e4; --pop-deep: #23402f; --pop-grad: linear-gradient(100deg, #f6e27a, #9ff0d4 50%, #8ad0e0); }
html[data-accent="ivoire"] { --pop: #ecdcb0; --pop-2: #fbf5e6; --pop-deep: #4d3f1a; --pop-grad: linear-gradient(100deg, #fff6e0, #e2c27a); }
/* 🚨 background-clip: text ne peint QUE dans la boîte de l'élément. Avec une
   interlettre serrée (line-height .9), la boîte est plus courte que les glyphes et
   les jambages des g et le point final ne sont pas peints. On agrandit la boîte et
   on compense en marge pour ne rien déplacer. */
h1 .pop { padding: .16em .08em .26em 0; margin: -.16em -.08em -.26em 0; }
.fn.amber { padding: .12em .06em .14em 0; margin: -.12em -.06em -.14em 0; }

html[data-grad] h1 .pop, html[data-grad] .fn.amber, html:not([data-accent]) h1 .pop, html:not([data-accent]) .fn.amber { background: var(--pop-grad); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
html[data-grad] .btn.pop, html[data-grad] .btn.amber, html[data-grad] .funnel-steps li.on:last-child, html:not([data-accent]) .btn.pop, html:not([data-accent]) .btn.amber, html:not([data-accent]) .funnel-steps li.on:last-child { background: var(--pop-grad); }
html[data-grad] .funnel-grid i.win, html:not([data-accent]) .funnel-grid i.win { background: var(--pop-grad); }
html[data-grad] .outro { --pop: var(--pop); }
html[data-grad] .lamp .l1, html:not([data-accent]) .lamp .l1 { background: var(--pop-grad); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); transition: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font);
  font-variation-settings: 'opsz' 12;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; }
::selection { background: var(--amber); color: var(--bg); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 4px; }

h1, h2, h3, .n, .p-num, .loader-n, .clients-line, .reveal {
  font-family: var(--font);
  font-variation-settings: 'opsz' 96;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: .96;
  margin: 0;
}
h2 { font-size: clamp(38px, 5.2vw, 76px); max-width: 15ch; text-wrap: balance; }
h3 { font-size: clamp(30px, 3.4vw, 48px); }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .1em .2em 0; margin: 0 -.1em -.2em 0; }
.split .w > span { display: inline-block; transform: translateY(110%); }

.no-js .split .w > span, .split.is-in .w > span { transform: none; }

/* ---------------------------------------------- calques fixes */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 40%, transparent 100%);
  mask-image: radial-gradient(120% 90% at 50% 30%, #000 40%, transparent 100%);
}
/* la texture de fond vit sur ce calque, pour laisser les halos tranquilles */
.bg::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size: 26px 26px;
}
.orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; will-change: transform; }
.orb.o1 { width: 60vw; height: 60vw; left: -18vw; top: -22vw; background: radial-gradient(closest-side, var(--orb-1), transparent); animation: drift1 26s ease-in-out infinite alternate; }
.orb.o2 { width: 50vw; height: 50vw; right: -16vw; top: 18vh; background: radial-gradient(closest-side, var(--orb-2), transparent); animation: drift2 32s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(14vw, 10vh) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-10vw, 16vh) scale(.9); } }
.grain {
  position: fixed; inset: -50%; width: 200%; height: 200%; z-index: 1; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-4%); }
  60% { transform: translate(-4%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); }
}
main, .nav { position: relative; z-index: 2; }

/* ---------------------------------------------- curseur */
.cur { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; display: none; }
.has-cursor .cur { display: block; }
.cur-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--txt); transform: translate(-50%, -50%); }
.cur-ring {
  position: absolute; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(238,243,238,.55);
  transform: translate(-50%, -50%); display: grid; place-items: center;
  transition: width .35s var(--ease), height .35s var(--ease), background .35s, border-color .35s;
}
.cur-ring span { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--bg); opacity: 0; transition: opacity .2s; }
.cur.is-link .cur-ring { width: 72px; height: 72px; background: var(--amber); border-color: var(--amber); mix-blend-mode: normal; }
.cur.is-link .cur-dot { opacity: 0; }
.cur.is-link .cur-ring span { opacity: 1; }
.cur.is-frame .cur-ring { width: 84px; height: 84px; background: var(--txt); border-color: var(--txt); }

/* ---------------------------------------------- boutons */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-radius: 999px;
  background: var(--txt); color: var(--bg);
  font-weight: 600; font-size: 15.5px; letter-spacing: -.005em;
  overflow: hidden; isolation: isolate;
  transition: transform .3s var(--ease);
  will-change: transform;
}
.btn > span { position: relative; z-index: 2; }
.btn::after { content: ''; position: relative; z-index: 2; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); transition: transform .35s var(--ease); }
.btn:hover::after { transform: scale(1.6); }
.btn.big { padding: 18px 28px; font-size: 17px; }
.btn.amber, .btn.pop { background: var(--pop); color: var(--bg); }
.btn.amber::after, .btn.pop::after { background: var(--bg); }
.btn.pop:hover { box-shadow: 0 0 40px -6px color-mix(in srgb, var(--pop) 70%, transparent); }
.lnk { display: inline-block; font-weight: 600; padding: 10px 2px; position: relative; }
.lnk::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--amber); transform-origin: left; transition: transform .5s var(--ease); }
.lnk:hover::after { transform: scaleX(.3); }

/* ---------------------------------------------- en-tête flottant */
.nav {
  position: fixed; left: 0; right: 0; top: 0; z-index: 30;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 18px var(--gut);
  transform: translateY(0);
  transition: transform .5s var(--ease), background .4s, backdrop-filter .4s;
}
.nav.is-hidden { transform: translateY(-110%); }
/* le fond de la nav est un dégradé sans bord : aucune ligne de coupe */
.nav::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 190%; z-index: -1;
  background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 45%, transparent 100%);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 100%);
  opacity: 0; transition: opacity .45s var(--ease); pointer-events: none;
}
.nav.is-solid::before { opacity: 1; }
.logo img { height: 28px; width: auto; }
.menu { display: flex; gap: 32px; font-weight: 500; font-size: 15px; color: var(--txt-2); }
.menu a { position: relative; padding: 4px 0; transition: color .25s; }
.menu a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--amber); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.menu a:hover { color: var(--txt); }
.menu a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav .btn { justify-self: end; padding: 11px 18px; font-size: 14.5px; background: var(--pop); color: var(--bg); }
.nav .btn::after { background: var(--bg); }

/* ---------------------------------------------- hero vidéo */
.hero { position: relative; }
.hero-pin { position: relative; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(30px, 4vw, 60px); padding: 110px var(--gut) 60px; overflow: hidden; }
.hero-txt { position: relative; z-index: 2; will-change: transform, opacity; }
h1 {
  font-size: clamp(46px, 5.9vw, 92px);
  line-height: .92;
  letter-spacing: -.045em;
  font-weight: 700;
  display: flex; flex-direction: column;
}
/* le masque ne sert qu'à la révélation : ensuite on libère jambages et ponctuation */
.ln { display: block; overflow: hidden; padding: 0 .12em .18em 0; margin: 0 -.12em -.18em 0; }
.h-lines.is-done .ln { overflow: visible; }
.ln > span { display: inline-block; transform: translateY(110%); }
.no-js .ln > span { transform: none; }
.pop { color: var(--pop); }
.lede { margin-top: 28px; font-size: clamp(18px, 1.45vw, 22px); line-height: 1.35; font-weight: 500; letter-spacing: -.015em; max-width: 34ch; color: var(--txt-2); font-variation-settings: 'opsz' 30; }
.cta-row { opacity: 0; transform: translateY(24px); }
.no-js .cta-row { opacity: 1; transform: none; }
.cta-row { display: flex; align-items: center; gap: 28px; margin-top: 34px; flex-wrap: wrap; }
.hero-vid { position: relative; z-index: 1; display: grid; justify-items: center; gap: 16px; perspective: 1400px; }
.vid-frame {
  position: relative; width: min(100%, 340px); aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden;
  background: #000;
  transform: rotateY(-16deg) rotateX(6deg) rotateZ(2deg);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 60px 120px -40px var(--shadow), 0 0 80px -20px color-mix(in srgb, var(--pop) 35%, transparent);
  will-change: transform;
  transform-origin: center;
}
.vid-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vid-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%, transparent 70%, rgba(0,0,0,.45)); }
.vid-sound { position: absolute; right: 16px; bottom: 16px; z-index: 2; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.45); backdrop-filter: blur(8px); color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.vid-sound::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); }
.vid-sound[aria-pressed="true"]::before { background: var(--pop); box-shadow: 0 0 8px var(--pop); }
.vid-cap { font-size: 13.5px; color: var(--txt-3); text-align: center; }
.scroll-hint {
  position: absolute; left: var(--gut); bottom: 30px; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 500; color: var(--txt-3);
  opacity: 0;
}
.scroll-hint i { width: 1px; height: 46px; background: linear-gradient(var(--txt-3), transparent); position: relative; overflow: hidden; }
.scroll-hint i::after { content: ''; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: var(--pop); animation: hint 1.8s var(--ease) infinite; }
@keyframes hint { 0% { top: -100%; } 100% { top: 100%; } }

/* ---------------------------------------------- le mur 3D */
.wall { position: relative; overflow: hidden; margin: 0; perspective: 1400px; z-index: 1;
  /* le mur remonte sur la vidéo du hero, et garde juste la place que réclame
     l'inclinaison pour qu'aucune carte ne soit tranchée en haut */
  margin-top: -17vh;
  padding: clamp(112px, 8.6vw, 168px) 0 clamp(165px, 13vw, 250px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent); }
.wall-tilt { transform: rotateX(15deg) rotateZ(-4deg) scale(1); transform-style: preserve-3d; will-change: transform; }
.wall-row { overflow: visible; margin: 18px 0; }
.wall-track { display: flex; gap: 22px; width: max-content; will-change: transform; }
.fr {
  --t: var(--moss);
  position: relative; flex: 0 0 auto;
  width: clamp(140px, 13vw, 196px); aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--t) 60%, #fff) 0%, transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--t) 70%, #000) 0%, var(--deep) 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 30px 60px -30px var(--shadow);
  transition: transform .6s var(--ease);
}
.fr::before {
  content: ''; position: absolute; inset: 0; opacity: .32; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* reflet qui suit la souris */
.fr::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.22), transparent 55%);
}
.fr:hover::after { opacity: 1; }
.fr:hover { transform: translateY(-10px) scale(1.03); }
.foot { position: absolute; inset: 0; overflow: hidden; }
.foot i { position: absolute; left: 50%; transform: translateX(-50%); background: var(--silhouette); filter: blur(7px); }
.foot .h { top: 22%; width: 42%; aspect-ratio: 1; border-radius: 50%; }
.foot .s { top: 52%; width: 120%; height: 60%; border-radius: 50% 50% 0 0; }
.fr .lbl, .phone .lbl { position: absolute; top: 12px; left: 13px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: rgba(255,255,255,.7); }
.cart {
  position: absolute; left: 12px; right: 12px; top: 50%; transform: translateY(-50%);
  text-align: center; font-size: clamp(11px, 1vw, 14px); line-height: 1.22; font-weight: 600; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 14px rgba(0,0,0,.45);
}
.cart b { color: var(--pop); font-weight: 700; }
.fr.win { box-shadow: 0 0 0 1.5px var(--amber) inset, 0 0 50px -8px color-mix(in srgb, var(--pop) 55%, transparent), 0 30px 60px -30px var(--shadow); }
.stamp {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%) rotate(-7deg);
  padding: 3px 10px; border-radius: 5px; border: 1.5px solid var(--amber-2); color: var(--amber-2);
  font-size: 13px; font-weight: 800; letter-spacing: .02em;
}

/* ---------------------------------------------- avant / après */
.ba { padding: clamp(40px, 6vh, 80px) var(--gut) clamp(50px, 8vh, 110px); }
.ba-head { max-width: 62ch; margin-bottom: 40px; }
.ba-head p { margin-top: 20px; color: var(--txt-2); font-size: 18px; max-width: 52ch; }
.ba-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(20px, 4vw, 60px); align-items: center; }
.ba-side { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; color: var(--txt-2); font-size: 16px; }
.ba-side li { position: relative; padding-left: 22px; }
.ba-side li::before { content: ''; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(238,243,238,.3) inset; }
.ba-side.right { text-align: right; color: var(--txt); }
.ba-side.right li { padding-left: 0; padding-right: 22px; }
.ba-side.right li::before { left: auto; right: 0; background: var(--pop); box-shadow: 0 0 12px color-mix(in srgb, var(--pop) 50%, transparent); }
.ba-stage { position: relative; width: min(100%, 380px); height: min(78vh, 675px); aspect-ratio: 9 / 16; border-radius: 30px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 60px 120px -40px var(--shadow); cursor: ew-resize; touch-action: pan-y; user-select: none; }
.ba-layer { position: absolute; inset: 0; }
.ba-layer video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-layer.before video { filter: saturate(.45) contrast(.82) brightness(.92); }
.ba-layer.before::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); pointer-events: none; }
.ba-layer.after { clip-path: inset(0 0 0 var(--x, 50%)); }
.ba-layer.after video { filter: saturate(1.15) contrast(1.06); }
.ba-layer.after::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% 50%, transparent 55%, rgba(0,0,0,.45)); }
.ba-tc { position: absolute; top: 16px; left: 16px; font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.7); font-weight: 600; }
.ba-silence { position: absolute; left: 16px; right: 16px; bottom: 22px; height: 26px; border-radius: 6px; background: repeating-linear-gradient(-55deg, rgba(255,255,255,.08) 0 5px, rgba(255,255,255,.02) 5px 10px); font-size: 11px; font-weight: 600; color: rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center; letter-spacing: .02em; }
.ba-tag { position: absolute; top: 16px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: rgba(0,0,0,.5); color: #fff; backdrop-filter: blur(8px); }
.ba-layer.before .ba-tag { right: 16px; }
.ba-layer.after .ba-tag { right: 16px; background: var(--pop); color: var(--bg); }
.ba-layer.after .cart { font-size: 17px; left: 20px; right: 20px; top: 74%; }
.ba-outro { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--pop-grad, var(--pop)); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; transform: translateX(-50%); box-shadow: 0 0 20px rgba(0,0,0,.6); }
.ba-handle i { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 10px 30px -8px rgba(0,0,0,.8); }
.ba-handle i::before, .ba-handle i::after { content: ''; position: absolute; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--bg); border-left: 2px solid var(--bg); }
.ba-handle i::before { left: 12px; transform: translateY(-50%) rotate(-45deg); }
.ba-handle i::after { right: 12px; transform: translateY(-50%) rotate(135deg); }

/* ---------------------------------------------- rail de lecture */
.rail { position: fixed; left: 18px; top: 50%; transform: translateY(-50%); z-index: 25; display: grid; grid-template-columns: auto auto; gap: 14px; align-items: stretch; opacity: 0; transition: opacity .6s; pointer-events: none; }
.rail.on { opacity: 1; }
.rail-line { position: relative; width: 1px; height: 46vh; background: rgba(238,243,238,.14); }
.rail-line i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--pop-grad, var(--pop)); transform-origin: top; transform: scaleY(0); }
.rail-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; font-size: 11.5px; font-weight: 600; color: var(--txt-3); letter-spacing: .01em; }
.rail-steps li { position: relative; line-height: 1; opacity: 0; transition: color .3s, transform .3s var(--ease), opacity .3s; }
.rail-steps li::before { content: ''; position: absolute; left: -17px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: rgba(238,243,238,.25); transform: translate(-50%, -50%); transition: background .3s, box-shadow .3s; }
.rail-steps li.on { color: var(--txt); transform: translateX(4px); opacity: 1; }
.rail-steps li.on::before { background: var(--pop); box-shadow: 0 0 10px var(--pop); }

/* ---------------------------------------------- la chaîne (épinglée, horizontale) */
.chain { position: relative; }
.chain-pin { position: relative; height: 100vh; overflow: hidden; }
.chain-track { display: flex; height: 100%; width: max-content; will-change: transform; }
.panel {
  position: relative; width: 100vw; height: 100%; flex: 0 0 100vw;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center;
  gap: clamp(30px, 5vw, 90px); padding: 120px var(--gut) 100px;
  perspective: 1600px;
}
.panel.intro { grid-template-columns: 1fr; align-content: center; border-left: 0; }
.panel.intro p { margin-top: 26px; font-size: 19px; color: var(--txt-2); max-width: 52ch; }
.panel-arrow { position: absolute; right: var(--gut); bottom: 90px; width: 120px; height: 1px; background: var(--txt-3); }
.panel-arrow::after { content: ''; position: absolute; right: 0; top: -5px; width: 10px; height: 10px; border-top: 1px solid var(--txt-3); border-right: 1px solid var(--txt-3); transform: rotate(45deg); }
.p-num { position: absolute; top: 90px; left: var(--gut); font-size: clamp(140px, 22vw, 340px); line-height: 1; font-weight: 800; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px var(--line); pointer-events: none; will-change: transform; }
.p-obj { position: relative; z-index: 1; display: flex; justify-content: center; transform-style: preserve-3d; will-change: transform; }
.p-txt { position: relative; z-index: 1; max-width: 46ch; }
.kick { margin: 16px 0 14px; font-weight: 600; font-size: 20px; color: var(--cyan); }
.p-txt > p:last-child { color: var(--txt-2); }
.chain-bar { position: absolute; left: var(--gut); right: var(--gut); bottom: 34px; height: 1px; background: var(--line); }
.chain-bar i { display: block; height: 100%; width: 100%; background: var(--amber); transform-origin: left; transform: scaleX(0); }

/* objet 1 : la feuille de script, en 3D avec son double */
.sheet-scene { position: relative; width: min(100%, 400px); transform-style: preserve-3d; }
.sheet { position: relative; width: 100%; padding: 30px 32px 36px; background: var(--paper); color: var(--paper-ink); border-radius: 6px 6px 22px 6px; transform: rotateY(-14deg) rotateX(6deg) rotate(-3deg); box-shadow: 0 60px 90px -40px var(--shadow), 0 0 0 1px rgba(0,0,0,.1); will-change: transform; }
.sheet.back { position: absolute; inset: 0; background: #d9d2c4; transform: rotateY(-14deg) rotateX(6deg) rotate(3deg) translateZ(-40px) translateX(26px) translateY(18px); box-shadow: none; opacity: .7; }
.sheet-h { display: flex; justify-content: space-between; font-weight: 700; font-size: 17px; margin-bottom: 20px; }
.sheet-h span:last-child { font-weight: 500; opacity: .55; }
.sl { height: 9px; border-radius: 5px; background: #e3dccd; margin: 9px 0; }
.sl.w9 { width: 92%; } .sl.w8 { width: 80%; } .sl.w7 { width: 68%; } .sl.w6 { width: 60%; } .sl.w5 { width: 52%; } .sl.w4 { width: 40%; } .sl.w3 { width: 30%; }
.sl.hook { height: auto; width: 74%; padding: 7px 12px; margin: 16px 0; background: var(--pop); color: var(--pop-deep); font-size: 13px; font-weight: 700; }
.sheet-stamp { position: absolute; right: 26px; bottom: 26px; padding: 4px 12px; border: 2px solid var(--moss); color: var(--moss); border-radius: 6px; font-weight: 800; font-size: 15px; transform: rotate(-9deg); opacity: .85; }

/* objet 2 : le téléphone qui pivote */
.phone-scene { position: relative; width: min(100%, 290px); transform-style: preserve-3d; }
.phone { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 34px; overflow: hidden; background: radial-gradient(90% 60% at 50% 0%, var(--teal) 0%, transparent 60%), linear-gradient(180deg, var(--forest), var(--deep)); box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 0 0 6px var(--deep), 0 0 0 7px rgba(255,255,255,.08), 0 60px 90px -40px var(--shadow); will-change: transform; }
.phone .cart { font-size: 19px; left: 22px; right: 22px; }
.phone .lbl { top: 20px; left: 22px; font-size: 12px; }
.rec { position: absolute; top: 20px; right: 20px; width: 10px; height: 10px; border-radius: 50%; background: #ff5a4e; box-shadow: 0 0 0 3px rgba(255,90,78,.25); animation: rec 1.2s infinite; }
@keyframes rec { 50% { opacity: .3; } }
.phone-bar { position: absolute; left: 22px; right: 22px; bottom: 22px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.2); overflow: hidden; }
.phone-bar i { display: block; height: 100%; width: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.phone-shadow { position: absolute; left: 10%; right: 10%; bottom: -40px; height: 40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.8), transparent); filter: blur(10px); }

/* objet 3 : la timeline pilotée par le scroll */
.tl { position: relative; width: min(100%, 560px); padding: 22px 22px 22px; border-radius: 18px; background: var(--surf); box-shadow: 0 0 0 1px var(--line) inset, 0 60px 90px -40px var(--shadow); transform: rotateY(10deg) rotateX(4deg); }
.tl-head { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--txt-3); margin-bottom: 14px; }
.tl-tc { font-variant-numeric: tabular-nums; color: var(--amber); font-weight: 600; }
.tl-row { display: flex; gap: 3px; height: 40px; margin-bottom: 6px; }
.tl-row i { flex: 0 0 var(--w); border-radius: 6px; background: repeating-linear-gradient(-55deg, var(--clip-a) 0 5px, var(--clip-b) 5px 10px); }
.tl-row.a { height: 18px; }
.tl-row.a i { background: linear-gradient(90deg, #62a3a4, #8ad0e0); opacity: .5; }
.tl-row.s { height: 12px; }
.tl-row.s i { background: color-mix(in srgb, var(--txt) 16%, transparent); }
.tl-row i.out { background: linear-gradient(90deg, #4fa9e0, var(--pop-2)); }
.tl-ph { position: absolute; top: 48px; bottom: 66px; width: 1px; background: var(--amber); left: 22px; will-change: left; }
.tl-ph::before { content: ''; position: absolute; top: -7px; left: -6px; width: 13px; height: 13px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 14px color-mix(in srgb, var(--pop) 80%, transparent); }
.tl-sub { margin-top: 14px; text-align: center; font-size: 12.5px; font-weight: 600; color: #fff; padding: 8px 10px; background: rgba(0,0,0,.6); border-radius: 6px; }

/* objet 4 : le registre, les verdicts s'allument */
.ledger { width: min(100%, 460px); padding: 8px 12px; background: var(--surf); border-radius: 18px; box-shadow: 0 0 0 1px var(--line) inset, 0 60px 90px -40px var(--shadow); font-size: 14px; transform: rotateY(-10deg) rotateX(4deg); }
.lg-h, .lg-r { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; align-items: center; padding: 12px 10px; border-bottom: 1px solid var(--line); }
.lg-h { font-weight: 500; color: var(--txt-3); font-size: 12px; }
.lg-r:last-child { border-bottom: 0; }
.lg-r span { font-weight: 700; font-size: 16px; }
.lg-r i { display: block; width: 14px; height: 14px; border-radius: 50%; justify-self: center; transform: scale(.4); opacity: .25; transition: transform .5s var(--ease), opacity .5s, background .5s; }
.lg-r.lit i { transform: scale(1); opacity: 1; }
.lg-r i.ok { background: var(--teal); box-shadow: 0 0 12px rgba(99,162,163,.6); }
.lg-r i.no { background: transparent; box-shadow: 0 0 0 1px rgba(238,243,238,.22) inset; }
.lg-r.win { border-radius: 8px; transition: background .5s; }
.lg-r.win.lit { background: color-mix(in srgb, var(--pop) 14%, transparent); }
.lg-r.win.lit span { color: var(--amber-2); }
.lg-r.win i.ok { background: var(--amber); box-shadow: 0 0 12px color-mix(in srgb, var(--pop) 70%, transparent); }

/* ---------------------------------------------- apprentissages : cartes empilées */
.lessons { padding: clamp(40px, 6vh, 80px) var(--gut) 0; }
.lessons-head { max-width: 62ch; margin-bottom: 60px; }
.lessons-head p { margin-top: 22px; color: var(--txt-2); font-size: 18px; max-width: 52ch; }
.stack { display: grid; gap: 24px; padding-bottom: 12vh; }
.lc {
  position: sticky; top: calc(96px + var(--i) * 22px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 70px); align-items: center;
  min-height: 62vh; padding: clamp(28px, 4vw, 56px);
  border-radius: 28px; background: linear-gradient(160deg, var(--card-a), var(--card-b));
  box-shadow: 0 0 0 1px var(--line) inset, 0 -20px 60px -30px var(--shadow);
  transform-origin: top center; will-change: transform, filter; filter: brightness(1);
}
.lc-vis { display: grid; justify-items: center; gap: 22px; min-width: 0; overflow: hidden; }
.lc > * { min-width: 0; }
.lc-cap { font-size: 13.5px; color: var(--txt-3); }
.big { font-size: clamp(28px, 3.2vw, 46px); font-weight: 600; letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; }
.big::first-letter { color: var(--amber); }
.lc-txt > p:last-child { margin-top: 18px; color: var(--txt-2); max-width: 44ch; }
/* scènes */
.mini-row { display: flex; gap: 8px; perspective: 800px; }
.mini-row i { display: block; width: clamp(18px, 6vw, 30px); aspect-ratio: 9 / 16; border-radius: 5px; background: var(--inset); box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset; transform: rotateY(-20deg); }
.mini-row i.on { background: linear-gradient(180deg, #8ad0e0, #3f8b78 50%, var(--deep-2)); box-shadow: 0 0 20px -4px rgba(138,208,224,.6); }
.faces { display: flex; gap: 10px; }
.faces i { position: relative; display: block; width: clamp(20px, 6.4vw, 32px); height: 60px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #3f8b78, #1f5b41); overflow: hidden; }
.faces i::before { content: ''; position: absolute; top: 8px; left: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--deep-2); transform: translateX(-50%); }
.faces i::after { content: ''; position: absolute; top: 30px; left: 50%; width: 44px; height: 40px; border-radius: 50% 50% 0 0; background: var(--deep-2); transform: translateX(-50%); }
.faces i.nohead::before { display: none; }
.faces i.nohead { background: linear-gradient(180deg, var(--pop), var(--pop-deep)); }
.verdicts { display: grid; gap: 8px; width: min(100%, 300px); }
.verdicts div { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-radius: 12px; background: var(--inset); box-shadow: 0 0 0 1px var(--line) inset; font-weight: 600; font-size: 15px; }
.verdicts i { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(238,243,238,.22) inset; }
.verdicts .win { background: color-mix(in srgb, var(--pop) 14%, transparent); color: var(--amber-2); }
.verdicts .win i { background: var(--amber); box-shadow: 0 0 12px color-mix(in srgb, var(--pop) 70%, transparent); }
.remake { display: flex; align-items: center; gap: 18px; }
.remake .fr { width: 120px; }
.remake .fr .cart { font-size: 11px; }
.remake .fr .stamp { font-size: 11px; bottom: 14px; }
.remake-eq { font-size: 40px; font-weight: 300; color: var(--amber); }
/* démo d'outro : la dernière image, balayée par la bande accent, sans noir */
.outro-demo { position: relative; width: 150px; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, var(--t4), var(--deep)); box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset; }
.outro-demo i.a { position: absolute; left: 50%; top: 22%; width: 42%; aspect-ratio: 1; border-radius: 50%; background: var(--silhouette); filter: blur(6px); transform: translateX(-50%); }
.outro-demo i.b { position: absolute; inset: -10% -40%; background: linear-gradient(100deg, transparent 30%, var(--pop) 45%, var(--pop-2) 50%, var(--pop) 55%, transparent 70%); mix-blend-mode: screen; animation: outro-demo 3s var(--ease) infinite; }
@keyframes outro-demo { 0%, 30% { transform: translateX(-110%); } 70%, 100% { transform: translateX(110%); } }
.outro-demo span { position: absolute; left: 10px; bottom: 12px; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.75); }

/* ---------------------------------------------- formats : la route de mots */
.formats { padding: clamp(30px, 4vh, 60px) 0 0; overflow: hidden; }
.formats-head { padding: 0 var(--gut); margin-bottom: 20px; }
.formats-head p, .tools-head p { margin-top: 22px; color: var(--txt-2); font-size: 18px; max-width: 52ch; }
.road { perspective: 900px; perspective-origin: 50% 0%; padding: 40px 0 0; margin-bottom: -60px; }
.road-tilt { transform: rotateX(38deg); transform-origin: 50% 100%; }
.mq { overflow: hidden; white-space: nowrap; padding: 4px 0; }
.mq.far { opacity: .35; } .mq.mid { opacity: .6; }
.mq-in { display: inline-flex; will-change: transform; }
.mq-in span { display: inline-block; padding: 0 .55em; font-size: clamp(44px, 7.5vw, 120px); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; font-variation-settings: 'opsz' 96; color: var(--txt-3); }
.mq-in span.hot { color: var(--txt); }
.mq-in span::after { content: '·'; margin-left: 1.1em; color: var(--amber); }
.road::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.road { position: relative; }

/* ---------------------------------------------- outils : cartes 3D */
.tools { padding: clamp(50px, 7vh, 100px) var(--gut) clamp(40px, 6vh, 80px); }
.tools-head { max-width: 62ch; margin-bottom: 50px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; perspective: 1200px; }
.card {
  --mx: -400px; --my: -400px;
  position: relative; padding: 24px 26px 26px; border-radius: 22px;
  background: linear-gradient(160deg, var(--card-a), var(--card-b));
  isolation: isolate; transform-style: preserve-3d; will-change: transform;
}
.card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 2; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx) var(--my), var(--cyan), rgba(138,208,224,.05) 60%, transparent 75%), var(--line);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(99,162,163,.16), transparent 60%);
}
.card:hover::after { opacity: 1; }
.card h3 { font-size: 26px; letter-spacing: -.025em; position: relative; z-index: 1; transform: translateZ(30px); }
.card p { margin-top: 10px; color: var(--txt-2); font-size: 15px; position: relative; z-index: 1; min-height: 4.6em; transform: translateZ(20px); }
.tag { position: absolute; top: 22px; right: 22px; z-index: 1; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--txt-3); border: 1px solid var(--line); padding: 4px 9px; border-radius: 999px; transform: translateZ(40px); }
.card-vis { position: relative; height: 112px; margin-bottom: 22px; border-radius: 14px; background: var(--inset); box-shadow: 0 0 0 1px var(--line) inset; overflow: hidden; transform: translateZ(50px); display: flex; align-items: center; justify-content: center; gap: 4px; padding: 14px; }
.vis-brain { flex-direction: column; align-items: stretch; gap: 6px; }
.vis-brain .row { display: grid; grid-template-columns: 44px 1fr 1fr 1fr; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; }
.vis-brain .row i { height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--txt) 12%, transparent); }
.vis-brain .row i.t { background: var(--teal); } .vis-brain .row i.a { background: var(--amber); box-shadow: 0 0 10px color-mix(in srgb, var(--pop) 60%, transparent); }
.vis-cut i { height: 40px; flex: 0 0 var(--w); border-radius: 5px; background: repeating-linear-gradient(-55deg, var(--clip-a) 0 5px, var(--clip-b) 5px 10px); }
.vis-cut i.gap { flex: 0 0 2px; height: 56px; background: var(--amber); box-shadow: 0 0 10px color-mix(in srgb, var(--pop) 70%, transparent); border-radius: 0; }
.vis-gen { flex-direction: column; align-items: flex-start; gap: 9px; }
.vis-gen i { display: block; height: 9px; width: var(--w); border-radius: 5px; background: color-mix(in srgb, var(--txt) 18%, transparent); }
.vis-gen i.cursor { width: 2px; height: 16px; background: var(--amber); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.vis-wave { gap: 3px; }
.vis-wave i { width: 4px; height: 20px; border-radius: 2px; background: var(--teal); animation: wave 1.4s ease-in-out infinite; }
.vis-wave i:nth-child(3n) { height: 48px; animation-delay: .2s; } .vis-wave i:nth-child(4n) { height: 34px; animation-delay: .4s; background: var(--cyan); } .vis-wave i:nth-child(5n) { height: 58px; animation-delay: .6s; } .vis-wave i:nth-child(7n) { animation-delay: .8s; background: var(--amber); }
@keyframes wave { 50% { transform: scaleY(.35); } }
.vis-broll { perspective: 600px; }
.vis-broll i { width: 50px; height: 76px; border-radius: 6px; background: linear-gradient(180deg, var(--teal), var(--forest)); margin: 0 -14px; transform: rotateY(-30deg); box-shadow: 0 10px 20px -8px var(--shadow); }
.vis-broll i:nth-child(2) { transform: rotateY(-30deg) translateZ(20px); z-index: 1; } .vis-broll i:nth-child(3) { transform: rotateY(-30deg) translateZ(40px); z-index: 2; }
.vis-aff i { width: 44px; height: 70px; border-radius: 4px; background: linear-gradient(160deg, var(--t1), var(--deep)); position: relative; margin: 0 4px; transform: rotate(-6deg); }
.vis-aff i:nth-child(2) { transform: rotate(0); background: linear-gradient(160deg, var(--pop), var(--pop-deep)); } .vis-aff i:nth-child(3) { transform: rotate(6deg); }
.vis-aff i::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 10px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.7); }

/* ---------------------------------------------- clients : noms géants, pub qui suit */
.clients { position: relative; padding: clamp(40px, 6vh, 80px) var(--gut) clamp(60px, 9vh, 120px); }
.clients-kicker { font-size: 15px; color: var(--txt-3); margin-bottom: 20px; }
.cl-list { list-style: none; margin: 0; padding: 0; }
.cl { display: flex; align-items: baseline; justify-content: space-between; gap: 30px; padding: 22px 0; cursor: none; }
.cl:last-child { border-bottom: 1px solid var(--line); }
.cl-name {
  font-size: clamp(40px, 6.4vw, 104px); font-weight: 800; letter-spacing: -.045em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(238,243,238,.35);
  transition: color .5s var(--ease), -webkit-text-stroke-color .5s, transform .6s var(--ease);
  font-variation-settings: 'opsz' 96;
}
.cl:hover .cl-name { color: var(--txt); -webkit-text-stroke-color: transparent; transform: translateX(14px); }
.cl-what { font-size: 14.5px; color: var(--txt-3); max-width: 30ch; text-align: right; }
.cl-float { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(-6deg); transition: opacity .35s, transform .5s var(--ease); will-change: transform; }
.cl-float.on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-6deg); }
.cl-float .fr { width: 190px; }
.clients-sub { margin-top: 30px; color: var(--txt-2); max-width: 54ch; }

/* ---------------------------------------------- outro : la lampe ambrée */
.outro { position: relative; overflow: hidden; padding: clamp(100px, 16vh, 180px) var(--gut) 34px; }
.lamp { position: absolute; left: 0; right: 0; top: 0; height: 100%; pointer-events: none; }
.lamp i { position: absolute; left: 50%; transform: translateX(-50%); }
.lamp .l1 { top: -1px; width: min(70vw, 900px); height: 2px; background: var(--amber); box-shadow: 0 0 40px 6px color-mix(in srgb, var(--pop) 70%, transparent); }
.lamp .l2 { top: 0; width: min(100vw, 1400px); height: 70vh; background: radial-gradient(50% 100% at 50% 0%, color-mix(in srgb, var(--pop) 34%, transparent), color-mix(in srgb, var(--pop) 8%, transparent) 45%, transparent 72%); transform: translateX(-50%) scaleX(0); transform-origin: top; }
.lamp .l3 { top: -20vh; width: 60vw; height: 60vh; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--pop) 35%, transparent), transparent); filter: blur(50px); opacity: 0; }
.outro-in { position: relative; max-width: 62ch; text-align: center; margin: 0 auto; display: grid; justify-items: center; }
.outro h2 { max-width: 14ch; font-size: clamp(48px, 7vw, 112px); }
.outro-in p { margin: 24px 0 34px; font-size: 18px; color: var(--txt-2); max-width: 46ch; }
.outro footer {
  position: relative; margin-top: clamp(90px, 16vh, 160px);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--txt-3);
}
.outro footer img { height: 22px; width: auto; opacity: .8; }
.outro footer .sp { margin-left: auto; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
  padding: 12px 18px; border-radius: 999px;
  background: var(--txt); color: var(--bg); font-size: 14.5px; font-weight: 600;
  box-shadow: 0 16px 30px -12px rgba(0,0,0,.8);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--ease); z-index: 50;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------- tablette et mobile */
@media (max-width: 960px) {
  .hero-pin { grid-template-columns: 1fr; align-items: end; padding: 0; height: 100svh; }
  .hero-vid { position: absolute; inset: 0; display: block; perspective: none;
    /* la vidéo se dissout dans les nuages, sinon elle finit sur une barre nette */
    -webkit-mask-image: linear-gradient(180deg, #000 54%, rgba(0,0,0,.55) 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 54%, rgba(0,0,0,.55) 78%, transparent 100%); }
  .vid-frame { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; transform: none !important; box-shadow: none; }
  .vid-frame video { filter: brightness(.72) saturate(.9); }
  .vid-frame::after { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 60%, transparent) 0%, color-mix(in srgb, var(--bg) 10%, transparent) 28%, color-mix(in srgb, var(--bg) 55%, transparent) 46%, color-mix(in srgb, var(--bg) 78%, transparent) 70%, color-mix(in srgb, var(--bg) 30%, transparent) 100%); }
  .hero-txt h1 { text-shadow: 0 2px 18px color-mix(in srgb, var(--bg) 85%, transparent), 0 1px 3px color-mix(in srgb, var(--bg) 90%, transparent); }
  .vid-sound { bottom: auto; top: 84px; right: 18px; }
  .vid-cap { display: none; }
  .hero-txt { padding: 0 18px 70px; }
  h1 { font-size: 12.5vw; }
  .scroll-hint { display: none; }
  /* la chaîne redevient verticale */
  .chain-pin { height: auto; overflow: visible; }
  .chain-track { display: block; width: auto; transform: none !important; }
  .panel { width: auto; flex: none; height: auto; grid-template-columns: 1fr; padding: 40px var(--gut) 40px; gap: 34px; }
  .panel.intro { padding-top: 30px; }
  .panel-arrow { display: none; }
  .p-num { position: static; font-size: 84px; margin-bottom: -20px; }
  .p-obj { justify-content: flex-start; padding: 20px 0; }
  .sheet-scene { width: min(100%, 320px); }
  .chain-bar { display: none; }
  /* 🚨 sur mobile les cartes sont bien plus hautes (visuel au-dessus du texte) :
     empilées en sticky, chacune recouvrait le texte de la précédente. On les
     laisse simplement se suivre. */
  .lc { grid-template-columns: 1fr; min-height: 0; position: relative; top: auto; }
  .stack { gap: 16px; padding-bottom: 0; }
  .grid { grid-template-columns: 1fr 1fr; }
  .cl { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cl-what { text-align: left; }
  .cl-name { color: var(--txt); -webkit-text-stroke: 0; }
  .cl-float { display: none; }
  .rail { display: none; }
  .ba-wrap { grid-template-columns: 1fr; justify-items: center; }
  .ba-side { width: 100%; grid-template-columns: 1fr 1fr; }
  .ba-side.right { text-align: left; }
  .ba-side.right li { padding-left: 22px; padding-right: 0; }
  .ba-side.right li::before { left: 0; right: auto; }
  .ba-stage { order: -1; }
  .ba-stage { height: min(70vh, 640px); }
  /* sur téléphone le hero est plein écran : on remonte moins pour ne pas
     recouvrir le lien, et on garde de la place pour l'inclinaison */
  .wall { margin-top: -132px; padding-top: 88px; }
  .wall-tilt { transform: rotateX(13deg) rotateZ(-3deg) scale(1); }
  .road-tilt { transform: rotateX(30deg); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .nav { grid-template-columns: 1fr auto; padding: 14px 18px; }
  .menu { display: none; }
  .logo img { height: 24px; }
  .grid { grid-template-columns: 1fr; }
  .cta-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .funnel-steps { flex-wrap: wrap; }
  .fr { width: 128px; }
  .remake .fr { width: 88px; }
  .remake { gap: 10px; }
  .faces, .mini-row { gap: 6px; }
  .lc { padding: 24px 20px; }
  .ba-side { grid-template-columns: 1fr; gap: 8px; font-size: 14.5px; }
  .ba-stage { width: 100%; height: auto; }
  .outro footer .sp { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .grain, .scroll-hint i::after, .rec, .vis-gen i.cursor, .vis-wave i, .orb { animation: none !important; }
  .ln > span, .split .w > span { transform: none !important; }
  .cta-row { opacity: 1 !important; transform: none !important; }
  .vid-frame { transform: none !important; }
  .lg-r i { transform: scale(1); opacity: 1; }
  .cl-float { display: none; }
  .wall-tilt { transform: none; }
}