/* =====================================================================
   CS SOLUTIONS — Design system "Table de montage" (v3, 2026)
   Référence : l'interface d'une suite de montage (timecode, timeline,
   marqueurs de chapitre, pellicule) + la narration au défilement des
   pages produit Apple (sections épinglées, média qui évolue au scroll).
   Règle d'or : le texte est TOUJOURS posé sur un voile qui le rend
   plus lisible que l'image derrière.
   ===================================================================== */
:root{
  --noir:#08080a; --noir-2:#0e0e11; --noir-3:#141418; --noir-4:#1b1b20;
  --blanc:#f2f0eb; --blanc-2:rgba(242,240,235,.72); --gris:#9a9aa2; --gris-d:#5f5f68;
  --line:rgba(242,240,235,.09); --line-2:rgba(242,240,235,.16);
  --or:#b4b6bc; --or-lt:#e6e7ea; --or-d:#6b6d73;
  --or-grad:linear-gradient(135deg,#f0f0f1 0%,#b8bac0 46%,#7c7e85 100%);
  --rec:#ff3b2f;                       /* le seul accent : le point « REC » */
  --f-dis:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-ser:'Instrument Serif',Georgia,'Times New Roman',serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --pad:clamp(1.2rem,4vw,4rem);
  --scrim:linear-gradient(180deg,rgba(8,8,10,.15) 0%,rgba(8,8,10,.55) 55%,rgba(8,8,10,.92) 100%);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{background:var(--noir);color:var(--blanc);font-family:var(--f-dis);font-weight:400;overflow-x:hidden;line-height:1.5;}
img,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
::selection{background:var(--blanc);color:var(--noir);}
:focus-visible{outline:2px solid var(--blanc);outline-offset:3px;}
.ser{font-family:var(--f-ser);font-style:italic;font-weight:400;letter-spacing:-.01em;}
.mono{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;}
.wrap{max-width:1360px;margin:0 auto;padding:0 var(--pad);}
.dim{color:var(--blanc-2);}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

/* grain argentique global, très léger */
body::after{content:'';position:fixed;inset:-50%;z-index:900;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite;}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(1%,3%)}}

/* ---------- titres ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);}
.eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--rec);box-shadow:0 0 12px var(--rec);}
.h-xl{font-size:clamp(3rem,10.5vw,10rem);line-height:.88;letter-spacing:-.045em;font-weight:600;}
.h-l{font-size:clamp(2.3rem,6vw,5.4rem);line-height:.95;letter-spacing:-.035em;font-weight:600;}
.h-m{font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.02;letter-spacing:-.025em;font-weight:600;}
.lead{font-size:clamp(1rem,1.25vw,1.18rem);line-height:1.65;color:var(--blanc-2);max-width:560px;}
.metal{background:var(--or-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ---------- boutons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.75rem;padding:1rem 1.6rem;border-radius:100px;font-weight:600;font-size:.86rem;letter-spacing:.01em;overflow:hidden;transition:transform .4s var(--ease),background .3s,color .3s,border-color .3s;isolation:isolate;}
.btn i{transition:transform .35s var(--ease);}
.btn:hover i{transform:translateX(4px);}
.btn-w{background:var(--blanc);color:var(--noir);}
.btn-w::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--or-grad);transform:translateY(101%);transition:transform .45s var(--ease);}
.btn-w:hover::before{transform:none;}
.btn-o{border:1px solid var(--line-2);color:var(--blanc);background:rgba(8,8,10,.35);backdrop-filter:blur(10px);}
.btn-o:hover{border-color:var(--blanc);}
.btn:active{transform:scale(.97);}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:500;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem var(--pad);transition:padding .4s var(--ease),background .4s,border-color .4s;border-bottom:1px solid transparent;}
.nav.stuck{padding:.7rem var(--pad);background:rgba(8,8,10,.72);backdrop-filter:blur(18px) saturate(1.2);border-color:var(--line);}
.brand{display:flex;align-items:center;gap:.75rem;}
.brand img{width:38px;height:38px;}
.brand b{display:block;font-weight:600;font-size:.95rem;letter-spacing:.24em;}
.brand small{display:block;font-family:var(--f-mono);font-size:.52rem;letter-spacing:.2em;color:var(--gris);margin-top:.2rem;text-transform:uppercase;}
.nav-links{display:flex;gap:.3rem;list-style:none;padding:.3rem;border:1px solid var(--line);border-radius:100px;background:rgba(8,8,10,.45);backdrop-filter:blur(12px);}
.nav-links a{display:block;padding:.55rem 1rem;border-radius:100px;font-size:.8rem;font-weight:500;color:var(--blanc-2);transition:background .3s,color .3s;}
.nav-links a:hover,.nav-links a.on{background:rgba(242,240,235,.1);color:var(--blanc);}
.nav-cta{display:flex;align-items:center;gap:.6rem;}
.burger{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:rgba(8,8,10,.5);backdrop-filter:blur(10px);position:relative;}
.burger span{position:absolute;left:14px;right:14px;height:1.5px;background:var(--blanc);transition:transform .4s var(--ease),top .4s var(--ease);}
.burger span:nth-child(1){top:18px}.burger span:nth-child(2){top:26px}
body.menu .burger span:nth-child(1){top:22px;transform:rotate(45deg)}
body.menu .burger span:nth-child(2){top:22px;transform:rotate(-45deg)}
.menu-ov{position:fixed;inset:0;z-index:490;background:rgba(8,8,10,.97);backdrop-filter:blur(14px);display:flex;flex-direction:column;justify-content:center;padding:6rem var(--pad) 3rem;
  clip-path:circle(0% at calc(100% - 3rem) 2.4rem);transition:clip-path .7s var(--ease);visibility:hidden;}
body.menu .menu-ov{clip-path:circle(150% at calc(100% - 3rem) 2.4rem);visibility:visible;}
.menu-ov a{font-size:clamp(2.2rem,9vw,4rem);font-weight:600;letter-spacing:-.04em;line-height:1.15;opacity:0;transform:translateY(24px);transition:opacity .5s,transform .5s var(--ease);}
.menu-ov a .mono{margin-right:.8rem;color:var(--gris);vertical-align:middle;}
body.menu .menu-ov a{opacity:1;transform:none;}
body.menu .menu-ov a:nth-child(2){transition-delay:.06s}body.menu .menu-ov a:nth-child(3){transition-delay:.12s}
body.menu .menu-ov a:nth-child(4){transition-delay:.18s}body.menu .menu-ov a:nth-child(5){transition-delay:.24s}body.menu .menu-ov a:nth-child(6){transition-delay:.3s}

/* ---------- HUD de montage (timecode + progression) ---------- */
.hud{position:fixed;left:var(--pad);bottom:1.1rem;z-index:480;display:flex;align-items:center;gap:.9rem;pointer-events:none;
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;color:var(--blanc-2);text-transform:uppercase;
  padding:.45rem .8rem;border-radius:100px;background:rgba(8,8,10,.55);backdrop-filter:blur(10px);border:1px solid var(--line);}
.hud .dot{width:7px;height:7px;border-radius:50%;background:var(--rec);animation:blink 1.4s infinite;}
.hud .tc{color:var(--blanc);font-variant-numeric:tabular-nums;}
@keyframes blink{50%{opacity:.25}}
.rail{position:fixed;top:0;left:0;right:0;height:2px;z-index:510;background:transparent;pointer-events:none;}
.rail i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--prog,0));background:linear-gradient(90deg,var(--blanc),var(--rec));}

/* ---------- curseur (desktop) ---------- */
.cursor{position:fixed;top:0;left:0;z-index:950;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--blanc);mix-blend-mode:difference;pointer-events:none;
  transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .3s;display:flex;align-items:center;justify-content:center;}
.cursor b{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.14em;color:var(--noir);opacity:0;transition:opacity .2s;}
.cursor.big{width:86px;height:86px;margin:-43px 0 0 -43px;mix-blend-mode:normal;background:var(--blanc);}
.cursor.big b{opacity:1;}
@media (hover:none){.cursor{display:none}}

/* ---------- apparitions ---------- */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease);}
.rv.in{opacity:1;transform:none;}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em;}
.split .w>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease);}
.split.in .w>span{transform:none;}

/* ---------- HERO vidéo ---------- */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;display:flex;align-items:flex-end;padding-top:clamp(6rem,13vh,8.5rem);}
.hero .bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.08 + var(--p,0)*.12));filter:saturate(.85) contrast(1.05);}
.hero::before{content:'';position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(8,8,10,.86) 0%,rgba(8,8,10,.55) 42%,rgba(8,8,10,.1) 75%),
  linear-gradient(180deg,rgba(8,8,10,.55) 0%,rgba(8,8,10,0) 28%,rgba(8,8,10,.25) 62%,var(--noir) 100%);}
.hero .letterbox{position:absolute;left:0;right:0;height:9vh;background:var(--noir);z-index:3;transition:transform 1.6s var(--ease) .2s;}
.hero .letterbox.t{top:0;}.hero .letterbox.b{bottom:0;}
body.ready .hero .letterbox.t{transform:translateY(-100%);}
body.ready .hero .letterbox.b{transform:translateY(100%);}
.hero-in{position:relative;z-index:2;width:100%;padding:0 var(--pad) clamp(4.2rem,9vh,7rem);opacity:calc(1 - var(--p,0)*1.7);transform:translateY(calc(var(--p,0)*-90px));}
.hero h1{margin:1.1rem 0 1.4rem;font-size:clamp(2.8rem,min(9.5vw,14svh),9.5rem);text-shadow:0 4px 40px rgba(0,0,0,.45);}
.hero h1 .ser{font-weight:400;letter-spacing:-.03em;}
.hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding-right:2.8rem;}
.hero .lead{color:rgba(242,240,235,.86);}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem;}
.slate{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blanc-2);
  border:1px solid var(--line-2);border-radius:14px;padding:1rem 1.1rem;background:rgba(8,8,10,.5);backdrop-filter:blur(10px);min-width:250px;}
.slate div{display:flex;justify-content:space-between;gap:1.5rem;padding:.38rem 0;border-bottom:1px dashed var(--line);}
.slate div:last-child{border:0;}
.slate b{color:var(--blanc);font-weight:500;}
.scroll-cue{position:absolute;right:var(--pad);bottom:2rem;z-index:2;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;color:var(--blanc-2);writing-mode:vertical-rl;display:flex;align-items:center;gap:.8rem;}
.scroll-cue::after{content:'';width:1px;height:60px;background:linear-gradient(var(--blanc),transparent);animation:cue 2s var(--ease) infinite;}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.sound{position:absolute;right:var(--pad);top:50%;z-index:2;width:48px;height:48px;border-radius:50%;border:1px solid var(--line-2);background:rgba(8,8,10,.5);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;font-size:.85rem;}

/* ---------- pellicule défilante (marquee) ---------- */
.mq{overflow:hidden;position:relative;}
.mq-track{display:flex;width:max-content;will-change:transform;}
.film{padding:.9rem 0;background:#050506;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;}
.film::before,.film::after{content:'';position:absolute;left:0;right:0;height:8px;z-index:2;
  background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(242,240,235,.14) 10px 20px);}
.film::before{top:3px}.film::after{bottom:3px}
.film .mq-track{gap:.6rem;}
.film figure{position:relative;height:clamp(150px,22vw,250px);flex:none;border-radius:6px;overflow:hidden;background:var(--noir-3);}
.film figure img{height:100%;width:auto;object-fit:cover;filter:saturate(.9);transition:filter .5s,transform .8s var(--ease);}
.film figure:hover img{filter:saturate(1.1);transform:scale(1.05);}
.film figcaption{position:absolute;left:.6rem;bottom:.5rem;font-family:var(--f-mono);font-size:.55rem;letter-spacing:.14em;color:var(--blanc);text-transform:uppercase;
  background:rgba(8,8,10,.7);padding:.2rem .45rem;border-radius:4px;}
.film-sm figure{height:clamp(110px,14vw,170px);}
.giant{font-size:clamp(4rem,14vw,13rem);font-weight:700;letter-spacing:-.05em;line-height:1;white-space:nowrap;padding:0 2rem;}
.giant.out{color:transparent;-webkit-text-stroke:1px rgba(242,240,235,.22);}
.giant .ser{-webkit-text-stroke:0;color:var(--blanc);}

/* ---------- MANIFESTE épinglé ---------- */
.pin{position:relative;}
.pin-in{position:sticky;top:0;height:100svh;overflow:hidden;}
.mani{height:260vh;}
.mani .pin-in{display:flex;align-items:center;justify-content:center;}
.mani-txt{position:relative;z-index:3;max-width:1100px;padding:0 var(--pad);text-align:center;font-size:clamp(1.8rem,4.6vw,4.2rem);line-height:1.08;letter-spacing:-.035em;font-weight:600;}
.mani-txt::before{content:'';position:absolute;inset:-14% -6%;z-index:-1;background:radial-gradient(closest-side,rgba(8,8,10,.92),rgba(8,8,10,.7) 60%,transparent);}
.mani-txt .wd{opacity:.14;transition:opacity .25s,color .25s;}
.mani-txt .wd.on{opacity:1;}
.mani-txt .wd.ser{font-weight:400;}
.float{position:absolute;z-index:1;border-radius:10px;overflow:hidden;opacity:calc(.15 + var(--p,0)*.55);
  transform:translate(calc(var(--x)*(1 - var(--p,0))),calc(var(--y)*(1 - var(--p,0)))) rotate(calc(var(--r)*(1 - var(--p,0)))) scale(calc(.75 + var(--p,0)*.25));
  -webkit-mask-image:radial-gradient(ellipse at center,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse at center,#000 55%,transparent 100%);}
.float img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.8);}

/* ---------- SAVOIR-FAIRE : défilement horizontal épinglé ---------- */
.hpin .pin-in{display:flex;flex-direction:column;justify-content:center;}
.hpin-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;padding:0 var(--pad);margin-bottom:2rem;}
.hpin-count{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;color:var(--gris);white-space:nowrap;}
.hpin-count b{color:var(--blanc);font-size:1.6rem;letter-spacing:0;font-weight:500;margin-right:.3rem;}
.hpin-track{display:flex;gap:1.2rem;padding:0 var(--pad);will-change:transform;}
.panel{position:relative;flex:none;width:min(72vw,880px);height:min(64svh,600px);border-radius:22px;overflow:hidden;border:1px solid var(--line);background:var(--noir-3);}
.panel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.75) brightness(.72);transform:scale(1.15) translateX(calc(var(--k,0)*-4%));transition:filter .6s;}
.panel:hover>img{filter:saturate(.95) brightness(.8);}
.panel::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,8,10,.95) 8%,rgba(8,8,10,.55) 48%,rgba(8,8,10,.2) 100%);}
.panel-in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(1.4rem,3vw,2.6rem);}
.panel .num{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;color:var(--blanc-2);display:flex;justify-content:space-between;}
.panel h3{font-size:clamp(1.9rem,4vw,3.6rem);line-height:.95;letter-spacing:-.035em;font-weight:600;margin-bottom:1rem;}
.panel p{max-width:520px;color:rgba(242,240,235,.85);font-size:.98rem;line-height:1.6;}
.tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.2rem;}
.tags span{font-size:.72rem;padding:.4rem .8rem;border-radius:100px;border:1px solid var(--line-2);background:rgba(8,8,10,.5);backdrop-filter:blur(6px);}
.price-hint{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;color:var(--blanc);background:rgba(242,240,235,.1);padding:.4rem .7rem;border-radius:6px;}
.panel.intro{background:transparent;border:0;width:min(46vw,560px);}
.panel.intro::after{display:none;}

/* ---------- ZOOM épinglé ---------- */
.zoom{height:280vh;}
.zoom .pin-in{display:flex;align-items:center;justify-content:center;}
.zoom-media{position:relative;width:100vw;height:100svh;border-radius:calc(28px*(1 - var(--z,0)));overflow:hidden;
  transform:scale(calc(.42 + var(--z,0)*.58));will-change:transform;}
.zoom-media video{width:100%;height:100%;object-fit:cover;}
.zoom-media::after{content:'';position:absolute;inset:0;background:rgba(8,8,10,calc(.15 + var(--z2,0)*.5));}
.zoom-cap{position:absolute;z-index:3;text-align:center;padding:0 var(--pad);pointer-events:none;}
.zoom-cap.a{top:9vh;opacity:calc(1 - var(--z,0)*2.2);transform:translateY(calc(var(--z,0)*-60px));}
.zoom-cap.b{opacity:calc(var(--z2,0)*1.6 - .3);transform:translateY(calc((1 - var(--z2,0))*40px));}
.zoom.done .zoom-cap.b{pointer-events:auto;}
.zoom-cap.a .h-xl{text-shadow:0 6px 50px rgba(0,0,0,.8);}
.zoom-cap.b h2{text-shadow:0 4px 40px rgba(0,0,0,.6);}

/* ---------- sections génériques ---------- */
.sec{padding:clamp(5rem,12vh,9rem) 0;position:relative;}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2.5rem,6vh,4rem);}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.stat{padding:2.4rem 1.6rem;border-right:1px solid var(--line);}
.stat:last-child{border-right:0;}
.stat strong{display:block;font-size:clamp(2.8rem,6vw,5.2rem);font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;}
.stat>span{display:block;margin-top:.8rem;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);}
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:3rem;}
.why div{padding:1.6rem;border-radius:18px;background:var(--noir-2);border:1px solid var(--line);transition:border-color .4s,transform .5s var(--ease);}
.why div:hover{border-color:var(--line-2);transform:translateY(-4px);}
.why h3{font-size:1.15rem;letter-spacing:-.02em;margin:1rem 0 .5rem;}
.why p{font-size:.9rem;color:var(--blanc-2);line-height:1.6;}
.why i{font-size:1.1rem;color:var(--or-lt);}

/* produits */
.prods{display:grid;grid-template-columns:1.15fr .85fr;gap:1.2rem;}
.prod{position:relative;border-radius:26px;overflow:hidden;padding:clamp(1.6rem,3vw,2.8rem);background:var(--noir-2);border:1px solid var(--line);min-height:520px;display:flex;flex-direction:column;isolation:isolate;}
.prod::before{content:'';position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--ang,0deg),transparent 0 60%,rgba(242,240,235,.55) 75%,transparent 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 6s linear infinite;}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg;}
@keyframes spin{to{--ang:360deg}}
.prod h3{font-size:clamp(2.2rem,4.5vw,3.8rem);letter-spacing:-.045em;line-height:.95;margin:1rem 0 .8rem;font-weight:600;}
.prod p{color:var(--blanc-2);max-width:440px;line-height:1.6;}
.prod .badge{align-self:flex-start;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;padding:.35rem .7rem;border-radius:100px;border:1px solid var(--line-2);}
.prod .badge.live{color:#7dffb0;border-color:rgba(125,255,176,.35);}
.prod .badge.soon{color:var(--rec);border-color:rgba(255,59,47,.4);}
.prod .meta{display:flex;gap:1.4rem;flex-wrap:wrap;margin:1.4rem 0;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;color:var(--gris);text-transform:uppercase;}
.prod .meta b{display:block;font-family:var(--f-dis);font-size:1.3rem;letter-spacing:-.02em;color:var(--blanc);text-transform:none;margin-bottom:.2rem;}
/* mini-app Disponi animée */
.app{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:end;}
.phone{width:100%;max-width:250px;justify-self:end;aspect-ratio:9/17;border-radius:30px;border:1px solid var(--line-2);background:linear-gradient(180deg,#121216,#0b0b0d);padding:1rem .8rem;position:relative;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.5);}
.phone .bar{width:38%;height:5px;border-radius:9px;background:var(--line-2);margin:0 auto .9rem;}
.phone h4{font-size:.78rem;font-weight:600;margin-bottom:.15rem;}
.phone small{font-family:var(--f-mono);font-size:.5rem;color:var(--gris);letter-spacing:.1em;}
.slots{display:flex;flex-direction:column;gap:.4rem;margin-top:.8rem;}
.slot{display:flex;justify-content:space-between;align-items:center;font-size:.66rem;padding:.5rem .6rem;border-radius:9px;background:rgba(242,240,235,.05);border:1px solid var(--line);}
.slot em{font-style:normal;font-family:var(--f-mono);font-size:.5rem;letter-spacing:.08em;padding:.15rem .35rem;border-radius:5px;}
.slot.free em{background:rgba(255,59,47,.18);color:#ff9a92;}
.slot.fill em{background:rgba(125,255,176,.16);color:#7dffb0;}
.slot.flash{animation:flash 1.2s var(--ease);}
@keyframes flash{0%{background:rgba(125,255,176,.35)}100%{background:rgba(242,240,235,.05)}}
.notif{position:absolute;left:.6rem;right:.6rem;top:.6rem;padding:.55rem .65rem;border-radius:12px;background:rgba(242,240,235,.94);color:var(--noir);font-size:.6rem;line-height:1.35;transform:translateY(-130%);transition:transform .6s var(--ease);}
.notif.show{transform:none;}
.notif b{display:block;font-size:.62rem;}
.dfeat{display:flex;flex-direction:column;gap:.55rem;font-size:.86rem;color:var(--blanc-2);}
.dfeat span::before{content:'→ ';color:var(--blanc);}
/* Glory */
.glory{background:radial-gradient(120% 90% at 100% 0%,rgba(255,59,47,.18),transparent 55%),var(--noir-2);}
.route{margin-top:auto;position:relative;height:210px;}
.route svg{width:100%;height:100%;}
.route path{fill:none;stroke:rgba(242,240,235,.25);stroke-width:1.5;stroke-dasharray:4 6;}
.route .run{stroke:var(--rec);stroke-dasharray:none;stroke-width:2;stroke-dashoffset:var(--dash,600);}
.route .pin-a,.route .pin-b{fill:var(--blanc);}
.route .moto{offset-path:path('M20,170 C120,40 230,200 330,80 S 470,40 520,30');offset-distance:0%;animation:ride 5s var(--ease) infinite;}
@keyframes ride{0%{offset-distance:0%}85%,100%{offset-distance:100%}}

/* méthode — schéma qui se trace au scroll */
.method{position:relative;}
.method svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.method .trace{fill:none;stroke:url(#gTrace);stroke-width:2;stroke-dasharray:var(--len,2000);stroke-dashoffset:calc(var(--len,2000)*(1 - var(--p,0)*1.35));}
.method .ghost{fill:none;stroke:var(--line);stroke-width:2;}
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}
.stepc{position:relative;padding:2rem 1.6rem;border-radius:20px;background:rgba(14,14,17,.85);backdrop-filter:blur(6px);border:1px solid var(--line);}
.stepc:nth-child(2){margin-top:6rem}.stepc:nth-child(3){margin-top:12rem}
.stepc .n{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;color:var(--gris);}
.stepc h3{font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.04em;margin:.6rem 0 .6rem;font-weight:600;}
.stepc p{color:var(--blanc-2);font-size:.95rem;line-height:1.6;}
.stepc img{width:100%;height:150px;object-fit:cover;border-radius:12px;margin-bottom:1.2rem;filter:saturate(.85) brightness(.85);}
.node{position:absolute;top:-7px;left:1.6rem;width:14px;height:14px;border-radius:50%;background:var(--noir);border:2px solid var(--gris-d);transition:background .4s,border-color .4s,box-shadow .4s;}
.stepc.lit .node{background:var(--rec);border-color:var(--rec);box-shadow:0 0 18px var(--rec);}

/* témoignages */
.quotes .mq-track{gap:1rem;padding:.5rem 0;}
.q{flex:none;width:min(440px,82vw);padding:1.6rem;border-radius:20px;background:var(--noir-2);border:1px solid var(--line);}
.q p{font-size:1rem;line-height:1.6;color:rgba(242,240,235,.9);}
.q footer{display:flex;align-items:center;gap:.7rem;margin-top:1.2rem;}
.q footer img{width:42px;height:42px;border-radius:50%;object-fit:cover;}
.q footer b{display:block;font-size:.85rem;}
.q footer div span{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.12em;color:var(--gris);text-transform:uppercase;}
.stars{color:var(--or-lt);font-size:.7rem;letter-spacing:.2em;margin-bottom:.8rem;}

/* CTA final */
.final{position:relative;overflow:hidden;padding:clamp(6rem,16vh,11rem) 0;}
.final .bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;filter:grayscale(.3);}
.final::before{content:'';position:absolute;inset:0;z-index:1;background:radial-gradient(70% 70% at 50% 50%,rgba(8,8,10,.55),var(--noir) 85%);}
.final-in{position:relative;z-index:2;text-align:center;}

/* footer */
.foot{border-top:1px solid var(--line);padding:4rem 0 6rem;background:#050506;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;}
.foot img.logo{width:190px;margin-bottom:1.2rem;}
.foot h5{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin-bottom:1rem;font-weight:500;}
.foot a,.foot p{display:block;font-size:.88rem;color:var(--blanc-2);margin-bottom:.6rem;transition:color .25s;}
.foot a:hover{color:var(--blanc);}
.socials{display:flex;gap:.5rem;margin-top:.8rem;}
.socials a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;margin:0;}
.socials a:hover{background:var(--blanc);color:var(--noir);}
.foot-bot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line);font-size:.74rem;color:var(--gris-d);}

/* page-hero (pages internes) */
.phero{position:relative;padding:clamp(8rem,20vh,12rem) 0 clamp(3rem,8vh,5rem);overflow:hidden;}
.phero .bgv,.phero .bgi{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.38;filter:saturate(.7);}
.phero::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,8,10,.6),rgba(8,8,10,.75) 50%,var(--noir) 100%);}
.phero .wrap{position:relative;z-index:2;}
.crumbs{display:flex;gap:.5rem;align-items:center;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-bottom:1.6rem;}
.crumbs a:hover{color:var(--blanc);}

/* lightbox */
.lb{position:fixed;inset:0;z-index:960;background:rgba(5,5,6,.95);backdrop-filter:blur(14px);display:none;align-items:center;justify-content:center;padding:2rem;}
.lb.open{display:flex;}
.lb-in{position:relative;width:min(94vw,1150px);}
.lb-in.tall{width:min(92vw,440px);}
.lb video{width:100%;max-height:86svh;border-radius:14px;background:#000;}
.lb-x{position:absolute;top:-3.2rem;right:0;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);font-size:1rem;}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .nav-links{display:none;}.burger{display:block;}
  .nav-cta .btn{display:none;}
  .prods{grid-template-columns:1fr;}
  .why{grid-template-columns:1fr 1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .stats{grid-template-columns:1fr 1fr;}
  .stat:nth-child(2){border-right:0;}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line);}
  .why{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .stepc:nth-child(2),.stepc:nth-child(3){margin-top:0;}
  .method svg{display:none;}
  .hero-row .slate{display:none;}
  .hero::before{background:linear-gradient(180deg,rgba(8,8,10,.55) 0%,rgba(8,8,10,.3) 30%,rgba(8,8,10,.85) 75%,var(--noir) 100%);}
  .panel{width:84vw;height:min(68svh,560px);}
  .panel.intro{width:84vw;}
  .app{grid-template-columns:1fr;}
  .phone{justify-self:center;max-width:220px;}
  .float{opacity:calc(.08 + var(--p,0)*.22);}
  .hud{left:50%;transform:translateX(-50%);bottom:.8rem;}
  .hud .chap{display:none;}
  .foot-grid{grid-template-columns:1fr;}
  .sound{top:auto;bottom:6rem;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .rv,.split .w>span{opacity:1!important;transform:none!important;}
}
@media (max-height:700px) and (min-width:761px){.hero-in{padding-bottom:5.2rem;}.hero .lead{font-size:.95rem;}}

/* ---------- hero : film vertical FreshCut (fond flouté + vidéo nette au format natif) ---------- */
.hero .bgv.blur{filter:blur(28px) saturate(.9) brightness(.75);transform:scale(calc(1.25 + var(--p,0)*.1));}
.hero-reel{position:absolute;z-index:2;right:calc(var(--pad) + 2.8rem);top:50%;height:min(72svh,680px);aspect-ratio:9/16;margin:0;
  transform:translateY(calc(-46% - var(--p,0)*60px)) rotate(1.5deg);border-radius:22px;overflow:hidden;cursor:pointer;
  border:1px solid var(--line-2);box-shadow:0 40px 100px rgba(0,0,0,.65);opacity:0;transition:opacity 1.2s var(--ease) .5s,transform .8s var(--ease);}
body.ready .hero-reel{opacity:1;}
.hero-reel:hover{transform:translateY(-46%) rotate(0deg) scale(1.02);}
.hero-reel video{width:100%;height:100%;object-fit:cover;}
.hero-reel figcaption{position:absolute;left:.7rem;right:.7rem;bottom:.7rem;display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;border-radius:10px;
  background:rgba(8,8,10,.65);backdrop-filter:blur(8px);font-family:var(--f-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blanc);}
.hero-reel .dot{width:6px;height:6px;border-radius:50%;background:var(--rec);animation:blink 1.4s infinite;flex:none;}
@media (max-width:760px){
  .hero-reel{display:none;}
  .hero .bgv.blur{filter:saturate(.95) brightness(.8);transform:scale(calc(1.02 + var(--p,0)*.08));}
}