/* ==========================================================================
   KALASPROD · kalasprod.com
   Direction artistique : carbone teinté rouge, argent, rouge du logo.
   Signature : le triangle Play. Prémisse : tout commence quand on appuie sur REC.
   ========================================================================== */

/* ---------- Fontes locales (site 100 % hors-ligne) ---------- */
@font-face{
  font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/anton-400.woff2') format('woff2');
}
@font-face{
  font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('fonts/manrope-400-800.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/ibm-plex-mono-500.woff2') format('woff2');
}

/* ---------- Jetons ---------- */
:root{
  --canvas:#100C0D;
  --canvas-2:#140F10;
  --panel:#1A1415;
  --panel-2:#211919;
  --line:rgba(237,231,228,.10);
  --line-strong:rgba(237,231,228,.22);
  --text-primary:#EFE9E6;
  --text-secondary:#B5AAA8;
  --text-faint:#8F8482;
  --accent:#C8262C;
  --accent-hover:#E03238;
  --accent-text:#E4555A;
  --accent-muted:rgba(200,38,44,.32);
  --ember:rgba(224,80,70,.16);
  --display:'Anton',Impact,'Arial Narrow',sans-serif;
  --body:'Manrope','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono','SF Mono',Menlo,monospace;
  --ease:cubic-bezier(.22,.7,.25,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --radius:14px;
  --gutter:clamp(20px,5vw,72px);
  --tshadow:0 1px 2px rgba(5,5,10,.9),0 3px 12px rgba(5,5,10,.6);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;overflow-x:clip}
body{
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--body);
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  opacity:0;transition:opacity .7s var(--ease-soft);
}
body.ready{opacity:1}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent-hover);outline-offset:3px;border-radius:4px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--accent);color:#fff;padding:10px 18px;border-radius:0 0 10px 0;font-weight:700}
.skip-link:focus{left:0}

/* ---------- L'environnement : une seule couche fixe (grain + braise) ---------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none}
.env::before{ /* grain carbone */
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .93 0 0 0 0 .91 0 0 0 0 .9 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.env::after{ /* braise qui dérive, cycle très lent */
  content:"";position:absolute;inset:-30%;
  background:
    radial-gradient(42% 34% at 22% 78%,var(--ember) 0%,transparent 70%),
    radial-gradient(36% 30% at 80% 18%,rgba(200,38,44,.10) 0%,transparent 70%);
  animation:emberDrift 90s var(--ease-soft) infinite alternate;
  animation-delay:-30s;
}
@keyframes emberDrift{
  from{transform:translate3d(-2%,1%,0) scale(1)}
  to{transform:translate3d(3%,-2%,0) scale(1.08)}
}
main{position:relative;z-index:1}

/* ---------- Iris d'objectif (ouverture de caméra) ---------- */
.iris{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:transparent;pointer-events:none}
.iris svg{width:max(200vw,200vh);height:max(200vw,200vh);flex:none}
.iris .blade{fill:#0A0708;stroke:rgba(239,233,230,.12);stroke-width:.35;transition:transform 1s var(--ease)}
.iris .ring{fill:none;stroke:var(--accent);stroke-width:.5;opacity:.55;transition:opacity .6s var(--ease-soft)}
.iris.open .blade{transform:rotate(34deg) translate(30px,0)}
.iris.open .ring{opacity:0}
.iris svg{transition:opacity .45s var(--ease-soft) .55s}
.iris.open svg{opacity:0}
.iris.gone{display:none}

/* ---------- Navigation ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:28px;
  padding:14px var(--gutter);
  background:linear-gradient(rgba(16,12,13,.92),rgba(16,12,13,.55) 70%,transparent);
  transition:background .5s var(--ease-soft);
}
.nav.solid{background:rgba(16,12,13,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .brand{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-weight:500;letter-spacing:.14em;font-size:13px}
.nav .brand img{width:46px;height:46px}
.nav ul{display:flex;gap:26px;list-style:none;margin-left:auto}
.nav ul a{font-size:13.5px;font-weight:600;letter-spacing:.06em;color:var(--text-secondary);transition:color .35s var(--ease-soft);position:relative;padding:8px 2px}
.nav ul a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;background:var(--accent);transition:right .35s var(--ease)}
.nav ul a:hover,.nav ul a[aria-current]{color:var(--text-primary)}
.nav ul a:hover::after,.nav ul a[aria-current]::after{right:0}
.nav .cta{margin-left:8px}
.nav-burger{display:none;margin-left:auto;width:46px;height:46px;position:relative}
.nav-burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--text-primary);transition:transform .4s var(--ease),opacity .3s}
.nav-burger span:nth-child(1){top:17px}
.nav-burger span:nth-child(2){top:23px}
.nav-burger span:nth-child(3){top:29px}
body.menu-open .nav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .nav-burger span:nth-child(2){opacity:0}
body.menu-open .nav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:999px;
  font-weight:700;font-size:14.5px;letter-spacing:.04em;
  transition:transform .35s var(--ease),background .35s var(--ease-soft),border-color .35s var(--ease-soft),box-shadow .35s var(--ease-soft);
  text-shadow:none;
}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 30px rgba(200,38,44,.25)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 12px 36px rgba(200,38,44,.35)}
.btn-ghost{border:1px solid var(--line-strong);color:var(--text-primary);background:rgba(239,233,230,.03)}
.btn-ghost:hover{border-color:var(--text-secondary);transform:translateY(-2px)}
.btn .tri{width:10px;height:12px;flex:none}
@media(pointer:coarse){.btn{min-height:48px}}

/* ---------- Typo utilitaires ---------- */
.kicker{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.32em;
  text-transform:uppercase;color:var(--accent-text);
  display:inline-flex;align-items:center;gap:10px;
}
.kicker::before{content:"";width:22px;height:1px;background:var(--accent);flex:none}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.04;letter-spacing:.01em;text-transform:uppercase}
h2{font-size:clamp(34px,5vw,58px);margin:18px 0 14px}
.lede{color:var(--text-secondary);font-size:clamp(16px,1.4vw,18.5px);max-width:58ch}
.accent{color:var(--accent-text)}

/* ---------- Sections ---------- */
section{position:relative;padding:clamp(80px,11vh,140px) var(--gutter)}
.wrap{max-width:1240px;margin:0 auto}
.sect-head{max-width:760px;margin-bottom:clamp(36px,5vh,60px)}

/* ---------- Chorégraphie d'entrée ---------- */
.reveal .part{opacity:0;transform:translateY(26px)}
.reveal.in .part{opacity:1;transform:none;transition:opacity .8s var(--ease-soft),transform .8s var(--ease)}
.reveal.in .part:nth-child(2){transition-delay:.09s}
.reveal.in .part:nth-child(3){transition-delay:.18s}
.reveal.in .part:nth-child(4){transition-delay:.27s}
.reveal.in .part:nth-child(5){transition-delay:.36s}
.reveal.in .part:nth-child(6){transition-delay:.45s}
.reveal.in .part:nth-child(7){transition-delay:.54s}
/* retraite des délais une fois l'entrée jouée (spécificité >= aux règles nth-child) */
.reveal.done .part:nth-child(n){transition-delay:0s}

/* ==========================================================================
   HÉROS : plateau nocturne, scène dessinée en code
   ========================================================================== */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:120px;overflow:hidden;overflow:clip;
}
.hero-stage{position:absolute;inset:0;pointer-events:none}
/* faisceaux de projecteurs */
.beam{position:absolute;top:-12%;width:34vw;height:130%;opacity:.5;filter:blur(26px);will-change:transform}
.beam-a{left:44%;background:linear-gradient(192deg,rgba(224,80,70,.30),transparent 62%);transform:rotate(14deg)}
.beam-b{left:66%;background:linear-gradient(168deg,rgba(200,38,44,.24),transparent 58%);transform:rotate(-11deg)}
.beam-c{left:22%;background:linear-gradient(200deg,rgba(239,233,230,.10),transparent 55%);transform:rotate(20deg)}
/* sol de plateau */
.hero-floor{position:absolute;left:0;right:0;bottom:0;height:44%;
  background:
    radial-gradient(60% 90% at 62% 100%,rgba(200,38,44,.20) 0%,transparent 65%),
    linear-gradient(transparent,rgba(6,4,5,.9));
}
/* vignettage */
.hero-vignette{position:absolute;inset:0;z-index:1;background:radial-gradient(120% 95% at 50% 42%,transparent 45%,rgba(6,4,5,.72) 100%)}
/* le triangle Play géant, signature (au-dessus du vignettage, sous le texte) */
.hero-tri{position:absolute;z-index:2;right:max(-7vw,-110px);top:50%;width:min(44vw,640px);transform:translateY(-50%);opacity:.8;animation:triFloat 9s var(--ease-soft) infinite alternate;animation-delay:-3s}
.hero-tri .t-fill{fill:rgba(30,21,22,.6)}
.hero-tri .t-edge{fill:none;stroke:rgba(239,233,230,.3);stroke-width:1.1}
.hero-tri .t-glow{fill:none;stroke:var(--accent);stroke-width:1.4;opacity:.55;filter:drop-shadow(0 0 16px rgba(210,45,50,.6))}
@keyframes triFloat{from{transform:translateY(-52%)}to{transform:translateY(-48%)}}
/* poussière de plateau */
.dust{position:absolute;width:5px;height:5px;border-radius:50%;background:rgba(239,233,230,.5);filter:blur(1px);animation:dustFloat 11s linear infinite}
.dust:nth-child(odd){background:rgba(228,85,90,.55)}
@keyframes dustFloat{
  0%{transform:translate3d(0,12vh,0);opacity:0}
  12%{opacity:.7}
  88%{opacity:.5}
  100%{transform:translate3d(3vw,-64vh,0);opacity:0}
}
/* contenu du héros */
.hero-inner{position:relative;z-index:3;max-width:1240px;margin:0 auto;width:100%}
.hero h1{font-size:clamp(52px,8.4vw,124px);line-height:.98;margin:20px 0 22px;text-shadow:var(--tshadow)}
.hero h1 .row{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero h1 .w{display:inline-block;transform:translateY(112%);transition:transform .9s var(--ease)}
body.ready .hero h1 .w{transform:none}
.hero h1 .row:nth-child(2) .w{transition-delay:.14s}
.hero .lede{text-shadow:var(--tshadow)}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px}
.hero-rec{
  position:absolute;left:var(--gutter);bottom:26px;display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.18em;color:var(--text-faint);
}
.rec-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);position:relative}
.rec-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--accent);opacity:0;animation:recPing 2.6s var(--ease-soft) infinite;animation-delay:-1s}
@keyframes recPing{0%{transform:scale(.6);opacity:.8}70%{transform:scale(1.7);opacity:0}100%{opacity:0}}
.scroll-cue{position:absolute;right:var(--gutter);bottom:22px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-faint);font-family:var(--mono);font-size:11px;letter-spacing:.3em}
.scroll-cue .line{width:1px;height:44px;background:linear-gradient(var(--text-faint),transparent);animation:cueSlide 2.2s var(--ease-soft) infinite;animation-delay:-.6s;transform-origin:top}
@keyframes cueSlide{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ==========================================================================
   EXPERTISES : six cartes, détails vivants à niveau murmure
   ========================================================================== */
.grid-exp{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  position:relative;background:linear-gradient(160deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px 26px;overflow:hidden;overflow:clip;
  transition:transform .5s var(--ease),border-color .5s var(--ease-soft);
}
.card:hover{transform:translateY(-6px);border-color:rgba(200,38,44,.4)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(60% 50% at 20% 0%,rgba(200,38,44,.12),transparent 70%);opacity:0;transition:opacity .5s var(--ease-soft)}
.card:hover::after{opacity:1}
.card .ico{width:44px;height:44px;color:var(--accent-text);margin-bottom:18px}
.card h3{font-size:21px;letter-spacing:.03em;margin-bottom:10px}
.card p{color:var(--text-secondary);font-size:14.5px}
.card .num{position:absolute;top:24px;right:24px;font-family:var(--mono);font-size:12px;color:var(--text-faint)}
/* détails vivants */
.vu{display:flex;gap:3px;align-items:flex-end;height:16px;margin-top:18px}
.vu i{width:4px;background:var(--accent-muted);border-radius:2px;height:30%}
.in-view .vu i{animation:vuPulse 4.4s var(--ease-soft) infinite}
.vu i:nth-child(2){animation-delay:-.7s}.vu i:nth-child(3){animation-delay:-1.6s}
.vu i:nth-child(4){animation-delay:-2.3s}.vu i:nth-child(5){animation-delay:-3.1s}
.vu i:nth-child(6){animation-delay:-3.8s}
@keyframes vuPulse{0%,100%{height:30%}35%{height:95%}60%{height:45%}80%{height:70%}}
.cursorline{margin-top:18px;font-family:var(--mono);font-size:12px;color:var(--text-faint)}
.cursorline::after{content:"▍";color:var(--accent-text)}
.in-view .cursorline::after{animation:blink 1.4s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ==========================================================================
   REC : le moment interactif signature
   ========================================================================== */
.rec-sect{background:linear-gradient(var(--canvas),var(--canvas-2) 30%,var(--canvas))}
.rec-module{display:grid;grid-template-columns:auto 1fr;gap:clamp(30px,5vw,70px);align-items:center;max-width:980px;margin:0 auto}
.rec-btn{
  position:relative;width:190px;height:190px;border-radius:50%;flex:none;
  display:grid;place-items:center;user-select:none;-webkit-user-select:none;touch-action:none;
  background:radial-gradient(circle at 34% 30%,#241B1C,#120E0F 70%);
  border:1px solid var(--line-strong);
  transition:transform .4s var(--ease),border-color .4s var(--ease-soft);
}
.rec-btn:hover{border-color:rgba(200,38,44,.5)}
.rec-btn:active{transform:scale(.97)}
.rec-btn .label{display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--mono);letter-spacing:.3em;font-size:15px;font-weight:500}
.rec-btn .dot{width:16px;height:16px;border-radius:50%;background:var(--accent);transition:box-shadow .3s var(--ease-soft)}
.rec-btn.holding .dot{box-shadow:0 0 22px rgba(224,60,60,.9);animation:recBlink 1s steps(1) infinite}
@keyframes recBlink{50%{opacity:.35}}
.rec-ring{position:absolute;inset:-9px;transform:rotate(-90deg)}
.rec-ring circle{fill:none;stroke-width:3}
.rec-ring .track{stroke:rgba(239,233,228,.1)}
.rec-ring .fill{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:653;stroke-dashoffset:653}
.rec-copy .timecode{font-family:var(--mono);font-size:clamp(26px,3.4vw,40px);letter-spacing:.12em;color:var(--text-primary);margin:14px 0 6px;font-variant-numeric:tabular-nums}
.rec-copy .hint{color:var(--text-faint);font-size:14px;font-family:var(--mono);letter-spacing:.06em}
.rec-done{margin-top:16px;font-size:17px;color:var(--text-secondary);max-width:46ch;opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease-soft),transform .8s var(--ease)}
.rec-done.show{opacity:1;transform:none}
.rec-done strong{color:var(--text-primary)}

/* ==========================================================================
   RÉALISATIONS : vignettes
   ========================================================================== */
.grid-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tile{
  position:relative;aspect-ratio:16/10.5;border-radius:var(--radius);overflow:hidden;overflow:clip;
  border:1px solid var(--line);display:flex;align-items:flex-end;
  transition:transform .5s var(--ease),border-color .5s var(--ease-soft);
}
.tile:hover{transform:translateY(-6px);border-color:rgba(200,38,44,.45)}
.tile .scene{position:absolute;inset:0;transition:transform .8s var(--ease)}
.tile:hover .scene{transform:scale(1.05)}
.tile .grad-a{background:radial-gradient(90% 90% at 70% 20%,#3A181B,#150F10 70%)}
.tile .grad-b{background:radial-gradient(90% 90% at 25% 15%,#33232A,#141011 70%)}
.tile .grad-c{background:radial-gradient(90% 100% at 50% 0%,#28303A,#101214 70%)}
.tile .grad-d{background:radial-gradient(90% 90% at 75% 80%,#3A2A18,#151110 70%)}
.tile .grad-e{background:radial-gradient(100% 90% at 30% 80%,#20303022,#101314),radial-gradient(90% 90% at 30% 75%,#1E3230,#101314 75%)}
.tile .grad-f{background:radial-gradient(90% 90% at 60% 30%,#332030,#131013 72%)}
.tile .scene svg{position:absolute;inset:auto;right:8%;top:14%;width:30%;height:auto;color:rgba(239,233,230,.2)}
.tile .scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .scene.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(200,38,44,.08),rgba(10,7,8,.30) 80%)}
.tile .meta{position:relative;width:100%;padding:18px 20px;display:flex;align-items:center;gap:12px;
  background:linear-gradient(transparent,rgba(8,6,7,.85) 45%)}
.tile .meta .tri{width:11px;height:13px;color:var(--accent-text);flex:none;transition:transform .4s var(--ease)}
.tile:hover .meta .tri{transform:translateX(4px)}
.tile .meta h3{font-size:16.5px;letter-spacing:.05em}
.tile .meta span{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--text-faint);letter-spacing:.14em}
.tiles-note{margin-top:18px;font-family:var(--mono);font-size:12.5px;color:var(--text-faint);letter-spacing:.04em}
.tiles-foot{margin-top:34px;display:flex;justify-content:center}

/* filtres (page réalisations) */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 34px}
.chip{
  padding:9px 18px;border-radius:999px;border:1px solid var(--line-strong);
  font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--text-secondary);
  transition:color .3s,border-color .3s,background .3s;
}
.chip:hover{color:var(--text-primary)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.tile.hidden{display:none}

/* ==========================================================================
   PROCESSUS : la ligne qui se dessine, le Play comme curseur
   ========================================================================== */
.process{background:var(--canvas-2)}
.proc-rail{position:relative;max-width:900px;margin:0 auto;padding-left:56px}
.proc-line{position:absolute;left:18px;top:6px;bottom:6px;width:2px;background:var(--line)}
.proc-line .ink{position:absolute;left:0;top:0;width:100%;height:0%;background:linear-gradient(var(--accent),var(--accent-hover))}
.proc-cursor{position:absolute;left:-8px;top:0;width:18px;height:18px;color:var(--accent);filter:drop-shadow(0 0 8px rgba(200,38,44,.7));transform:translateY(-6px)}
.step{position:relative;padding:26px 0 30px;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step .n{position:absolute;left:-56px;top:30px;width:37px;height:37px;border-radius:50%;
  display:grid;place-items:center;background:var(--panel);border:1px solid var(--line-strong);
  font-family:var(--mono);font-size:12px;color:var(--text-secondary);transition:border-color .4s,color .4s,background .4s}
.step.lit .n{border-color:var(--accent);color:#fff;background:rgba(200,38,44,.2)}
.step h3{font-size:clamp(22px,2.6vw,30px);margin-bottom:8px}
.step p{color:var(--text-secondary);max-width:58ch}

/* ==========================================================================
   STUDIO (bande sur l'accueil)
   ========================================================================== */
.studio-band .band-in{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,70px);align-items:center;
  background:linear-gradient(150deg,var(--panel),#161011 65%);
  border:1px solid var(--line);border-radius:calc(var(--radius) + 8px);
  padding:clamp(30px,4.5vw,60px);position:relative;overflow:hidden;overflow:clip;
}
.studio-band .band-in::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 70% at 85% 20%,rgba(200,38,44,.14),transparent 70%)}
.band-media{position:relative;border-radius:var(--radius);overflow:hidden;overflow:clip;border:1px solid var(--line)}
.band-media img{width:100%;height:auto;aspect-ratio:16/11;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.band-media:hover img{transform:scale(1.04)}
.band-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(10,7,8,0) 55%,rgba(10,7,8,.5))}
.studio-band .wave{height:46px;margin-top:16px}
.wave{display:flex;align-items:center;gap:3px;height:120px}
.wave i{flex:1;background:linear-gradient(var(--accent-muted),rgba(200,38,44,.55),var(--accent-muted));border-radius:3px;height:12%}
.in-view .wave i{animation:wavePulse 5.2s var(--ease-soft) infinite}
@keyframes wavePulse{0%,100%{height:12%}30%{height:var(--h,70%)}55%{height:22%}75%{height:calc(var(--h,70%) * .6)}}

/* ==========================================================================
   CONFIANCE
   ========================================================================== */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust>div{padding:34px 28px;border-left:1px solid var(--line)}
.trust>div:first-child{border-left:0}
.trust .t-num{font-family:var(--mono);font-size:12px;color:var(--accent-text);letter-spacing:.2em}
.trust h3{font-size:19px;margin:12px 0 8px;letter-spacing:.04em}
.trust p{font-size:14px;color:var(--text-secondary)}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:baseline;gap:18px;list-style:none;cursor:pointer;
  padding:24px 4px;font-weight:700;font-size:17px;transition:color .3s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-text)}
.faq summary .q-tri{width:11px;height:13px;flex:none;color:var(--accent-text);transition:transform .4s var(--ease);align-self:center}
.faq details[open] summary .q-tri{transform:rotate(90deg)}
.faq .a{padding:0 4px 26px 29px;color:var(--text-secondary);max-width:64ch}

/* ==========================================================================
   CTA FINAL + FORMULAIRE
   ========================================================================== */
.final{background:radial-gradient(70% 90% at 50% 110%,rgba(200,38,44,.16),transparent 70%),var(--canvas-2)}
.final .wrap{max-width:880px;text-align:center}
.final h2{font-size:clamp(40px,6vw,76px)}
.final .lede{margin:0 auto 40px}
form.quote{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left;margin-top:44px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint)}
.field input,.field select,.field textarea{
  background:rgba(239,233,230,.045);border:1px solid var(--line-strong);border-radius:10px;
  padding:13px 16px;color:var(--text-primary);font:inherit;font-size:15px;
  transition:border-color .3s,background .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:rgba(239,233,230,.07)}
.field textarea{min-height:130px;resize:vertical}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='12' viewBox='0 0 10 12'%3E%3Cpath d='M1 1l8 5-8 5z' fill='%23E4555A'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.form-foot{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:8px}
.form-note{font-size:13px;color:var(--text-faint)}
.form-status{grid-column:1/-1;font-size:14.5px;color:var(--accent-text);min-height:1.4em}

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */
footer{position:relative;z-index:1;border-top:1px solid var(--line);padding:50px var(--gutter) 34px;background:#0C090A}
.foot-in{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:34px}
.foot-in .brandline{display:flex;align-items:center;gap:14px}
.foot-in .brandline img{width:54px;height:54px}
.foot-in .brandline b{font-family:var(--mono);letter-spacing:.16em;font-weight:500}
.foot-in p{color:var(--text-faint);font-size:13.5px;margin-top:14px;max-width:34ch}
.foot-in h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;color:var(--text-faint);text-transform:uppercase;margin-bottom:16px}
.foot-in ul{list-style:none}
.foot-in ul a{display:inline-block;padding:5px 0;color:var(--text-secondary);font-size:14.5px;transition:color .3s}
.foot-in ul a:hover{color:var(--accent-text)}
.foot-base{max-width:1240px;margin:40px auto 0;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--text-faint)}
.foot-base a{color:var(--text-faint)}
.foot-base a:hover{color:var(--text-secondary)}

/* ==========================================================================
   PAGES INTÉRIEURES : en-tête + chapitres façon Apple
   ========================================================================== */
.page-hero{min-height:64svh;display:flex;align-items:flex-end;padding-top:140px;padding-bottom:40px;overflow:hidden;overflow:clip}
.page-hero h1{font-size:clamp(48px,8vw,110px);text-shadow:var(--tshadow)}
.page-hero .lede{margin-top:18px}

.chapter{height:230vh;padding:0}
.chapter .stick{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden;overflow:clip;padding:0 var(--gutter)}
.chapter .ch-in{position:relative;z-index:3;text-align:center;max-width:900px;will-change:transform,opacity}
.chapter .ch-in h2{font-size:clamp(44px,7.4vw,104px);text-shadow:var(--tshadow)}
.chapter .ch-in .lede{margin:22px auto 0;max-width:52ch;text-shadow:var(--tshadow)}
.chapter .ch-back{position:absolute;inset:0;pointer-events:none;opacity:.55}
/* fond photo du chapitre, zoom lent piloté au scroll */
.chapter .ch-media{position:absolute;inset:0;overflow:hidden;overflow:clip}
.chapter .ch-media img{width:100%;height:100%;object-fit:cover;will-change:transform,opacity;transform:scale(1.14)}
.chapter .ch-media::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 62% at 50% 52%,rgba(9,6,7,.62) 0%,rgba(9,6,7,.38) 48%,rgba(9,6,7,.22) 100%)}

/* ---------- La révélation façon Apple : la caméra s'ouvre au scroll ---------- */
.reveal-apple{height:320vh;padding:0}
.reveal-apple .stick{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden;overflow:clip;padding:0 var(--gutter)}
.reveal-apple .ra-stage{position:relative;width:min(1100px,92vw);aspect-ratio:16/9;display:grid;place-items:center}
.reveal-apple .ra-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;will-change:transform,opacity}
.reveal-apple .ra-b{opacity:0}
.reveal-apple .ra-cap{position:absolute;left:0;right:0;bottom:clamp(20px,6vh,60px);z-index:3;text-align:center;pointer-events:none}
.reveal-apple .ra-cap p{position:absolute;left:0;right:0;bottom:0;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(26px,3.6vw,48px);letter-spacing:.02em;opacity:0;transform:translateY(14px);
  will-change:transform,opacity;text-shadow:var(--tshadow)}
.reveal-apple .ra-halo{position:absolute;inset:-10%;pointer-events:none;
  background:radial-gradient(50% 45% at 50% 55%,rgba(200,38,44,.16),transparent 70%);opacity:0;will-change:opacity}

/* fond photo discret des en-têtes de pages intérieures */
.page-hero .ph-media{position:absolute;inset:0;z-index:0;overflow:hidden;overflow:clip}
.page-hero .ph-media img{width:100%;height:100%;object-fit:cover;object-position:right center}
.page-hero .ph-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--canvas) 22%,rgba(16,12,13,.72) 55%,rgba(16,12,13,.34) 100%),
             linear-gradient(rgba(16,12,13,.2),var(--canvas) 96%)}
.page-hero{position:relative}
.page-hero .wrap{position:relative;z-index:1;width:100%}
.specs{background:var(--canvas-2)}
.specs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.spec{border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;background:var(--panel)}
.spec .s-k{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--accent-text);text-transform:uppercase}
.spec h3{font-size:18px;margin:12px 0 6px;letter-spacing:.03em}
.spec p{font-size:13.5px;color:var(--text-secondary)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:1024px){
  .grid-exp{grid-template-columns:repeat(2,1fr)}
  .grid-tiles{grid-template-columns:repeat(2,1fr)}
  .trust{grid-template-columns:repeat(2,1fr)}
  .trust>div:nth-child(3){border-left:0}
  .trust>div{border-top:1px solid var(--line)}
  .trust>div:nth-child(-n+2){border-top:0}
  .specs-grid{grid-template-columns:repeat(2,1fr)}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .nav ul,.nav .cta{display:none}
  .nav-burger{display:block}
  body.menu-open .nav{background:rgba(16,12,13,.97)}
  body.menu-open .nav ul{
    display:flex;flex-direction:column;position:fixed;top:74px;left:0;right:0;
    background:#14100F;backdrop-filter:blur(16px);
    padding:20px var(--gutter) 30px;gap:4px;border-bottom:1px solid var(--line);
  }
  body.menu-open .nav ul a{font-size:19px;padding:12px 0;display:block}
  .rec-module{grid-template-columns:1fr;justify-items:center;text-align:center}
  .rec-copy .hint{display:block}
  .studio-band .band-in{grid-template-columns:1fr}
  .hero-tri{right:-24vw;opacity:.45;width:80vw}
  .scroll-cue{display:none}
}
@media(max-width:640px){
  .grid-exp,.grid-tiles{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr}
  .trust>div{border-left:0;border-top:1px solid var(--line)}
  .trust>div:first-child{border-top:0}
  form.quote{grid-template-columns:1fr}
  .specs-grid{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr}
  .hero-rec{display:none}
}
@media(max-height:560px) and (min-width:821px){
  .scroll-cue,.hero-rec{display:none}
}

/* ==========================================================================
   MOUVEMENT RÉDUIT : tout se fige en état final
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  body,.reveal .part{opacity:1;transform:none}
  .hero h1 .w{transform:none}
  .iris{display:none}
  .rec-done{opacity:1;transform:none}
  .proc-line .ink{height:100%!important}
  .step .n{border-color:var(--accent);color:#fff;background:rgba(200,38,44,.2)}
  .rec-ring .fill{stroke-dashoffset:0}
  .chapter{height:auto;padding:clamp(80px,11vh,140px) 0}
  .chapter .stick{position:relative;height:auto;min-height:70vh;padding:clamp(60px,10vh,120px) var(--gutter)}
  .chapter .ch-in{opacity:1!important;transform:none!important}
  .chapter .ch-media img{transform:none}
  .reveal-apple{height:auto}
  .reveal-apple .stick{position:relative;height:auto;padding:clamp(60px,10vh,120px) var(--gutter)}
  .reveal-apple .ra-a{opacity:0}
  .reveal-apple .ra-b{opacity:1}
  .reveal-apple .ra-halo{opacity:1}
  .reveal-apple .ra-cap p{opacity:0}
  .reveal-apple .ra-cap p:last-child{opacity:1;transform:none}
}