/* ═══════════════════════════════════════════════════════════
   LE BARON — le-baron.fr
   Charte : noir & niveaux de gris, tonique jaune.
   Typographie : Cormorant Garamond (titres) + Jost (libellés, texte).
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:      #050505;
  --ink-2:    #0a0a0a;
  --ink-3:    #111111;
  --bone:     #f2f0ec;
  --bone-dim: rgba(242,240,236,.66);
  --bone-mut: rgba(242,240,236,.44);
  --hair:     rgba(242,240,236,.14);
  --hair-2:   rgba(242,240,236,.07);

  --gold:     #e4b84b;
  --gold-hot: #ffd86b;
  --gold-dim: rgba(228,184,75,.42);

  --ui:   "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --disp: "Cormorant Garamond", "Times New Roman", Georgia, serif;

  --pad: clamp(20px, 4.4vw, 68px);
  --console-h: 76px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.65,.02,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--ui);
  font-weight:300;
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-intro{ overflow:hidden; }

img{ 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(--gold); color:#0b0900; }

:focus-visible{ outline:1px solid var(--gold); outline-offset:4px; }

.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── Micro-typographie : capitales Jost, largement espacées ── */
.tag, .label, .time, .nav__links a, .nav__cta, .intro__skip,
.track__tags span, .track__meta, .specs dt, .contact__links a, .contact__base,
.console__idx{
  font-family:var(--ui);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:400;
}

/* ── Titres : didone claire, très grande, tonique jaune sur l'accent ── */
.display{
  font-family:var(--disp);
  font-weight:300;
  font-size:clamp(38px, 6.6vw, 92px);
  line-height:1.02;
  letter-spacing:-.005em;
  margin:0;
}
.display em{
  font-style:italic;
  font-weight:300;
  color:var(--gold);
}
.display--sm{ font-size:clamp(28px, 3.8vw, 52px); line-height:1.1; }

/* ═══ INTRO ═══════════════════════════════════════════════ */
.intro{
  position:fixed; inset:0; z-index:200;
  background:#000;
  display:grid; place-items:center;
  transition:opacity 1.4s var(--ease), visibility 1.4s;
}
.intro[hidden]{ display:none; }
.intro.is-out{ opacity:0; visibility:hidden; pointer-events:none; }
/* dimensions et calage posés par app.js : le dessin de la vidéo doit tomber
   exactement sur le logo rendu en WebGL derrière. */
.intro__video{
  position:absolute; top:50%; left:50%;
  translate:-50% -50%;
  mix-blend-mode:screen;
  filter:contrast(1.06) brightness(1.02);
  transition:opacity .5s linear;
}
.intro.is-out .intro__video,
.intro.is-out .intro__skip{ opacity:0; }
.intro__grain{
  position:absolute; inset:0; pointer-events:none; opacity:.45;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}
.intro__skip{
  position:absolute; bottom:clamp(24px,5vh,48px); right:var(--pad);
  color:var(--bone-mut); transition:color .3s;
}
.intro__skip span{ margin-left:.5em; }
.intro__skip:hover{ color:var(--gold); }

/* l'habillage n'apparaît qu'une fois le Baron posé sur l'eau */
body.is-intro .nav,
body.is-intro .hero__meta,
body.is-intro .descend,
body.is-intro .hero__frame,
body.is-intro .console{ opacity:0; }
.nav, .hero__meta, .descend, .hero__frame{
  transition:opacity 1.2s var(--ease) .25s;
}
body.is-ready .hero__meta--tl{ transition-delay:.45s; }
body.is-ready .hero__meta--tr{ transition-delay:.55s; }
body.is-ready .hero__meta--br{ transition-delay:.75s; }
body.is-ready .descend      { transition-delay:.95s; }

/* ═══ NAV ═════════════════════════════════════════════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:90;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:22px var(--pad);
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease), backdrop-filter .5s, border-color .5s, padding .5s var(--ease);
}
.nav.is-stuck{
  padding:15px var(--pad);
  background:linear-gradient(to bottom, rgba(5,5,5,.90), rgba(5,5,5,.66));
  backdrop-filter:blur(16px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  border-bottom-color:var(--hair-2);
}
.nav__brand{
  font-family:var(--disp);
  font-weight:400;
  font-size:23px;
  letter-spacing:.06em;
  color:var(--bone);
  transition:color .4s;
}
.nav__brand:hover{ color:var(--gold); }

.nav__links{ display:flex; gap:clamp(18px,2.6vw,38px); }
.nav__links a{
  color:var(--bone-mut);
  display:inline-flex; align-items:baseline; gap:.8em;
  position:relative; padding-bottom:5px;
  transition:color .35s var(--ease);
}
.nav__links a i{ font-style:normal; font-size:10px; color:rgba(242,240,236,.28); }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold);
  transition:width .45s var(--ease);
}
.nav__links a:hover{ color:var(--bone); }
.nav__links a:hover::after{ width:100%; }
@media (max-width:820px){ .nav__links{ display:none; } }

.nav__cta{
  display:inline-flex; align-items:center; gap:11px;
  padding:10px 20px;
  border:1px solid var(--hair);
  border-radius:999px;
  color:var(--bone-dim);
  transition:border-color .4s, color .4s, background .4s, box-shadow .4s;
}
.nav__cta:hover{
  color:var(--bone); border-color:var(--gold-dim);
  background:rgba(228,184,75,.07);
  box-shadow:0 0 30px -10px rgba(228,184,75,.6);
}
.nav__cta-dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--bone-mut);
  transition:background .4s, box-shadow .4s;
}
.nav__cta:hover .nav__cta-dot,
body.is-playing .nav__cta-dot{
  background:var(--gold); box-shadow:0 0 10px var(--gold);
}
body.is-playing .nav__cta-dot{ animation:pulse 1.9s infinite var(--ease-io); }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }

/* ═══ HERO ════════════════════════════════════════════════ */
.hero{
  position:relative;
  height:100svh; min-height:560px;
  overflow:hidden;
}
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero__fallback{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  height:46vh;
}

.hero__frame{ position:absolute; inset:0; pointer-events:none; }
.rule{ position:absolute; background:var(--hair-2); }
.rule--t{ top:calc(var(--pad) * .9); left:var(--pad); right:var(--pad); height:1px; }
.rule--b{ bottom:calc(var(--console-h) + var(--pad) * .7); left:var(--pad); right:var(--pad); height:1px; }
.rule--l{ left:var(--pad); top:var(--pad); bottom:calc(var(--console-h) + var(--pad) * .7); width:1px; }
.rule--r{ right:var(--pad); top:var(--pad); bottom:calc(var(--console-h) + var(--pad) * .7); width:1px; }
@media (max-width:760px){ .rule--l,.rule--r{ display:none; } }

.hero__meta{
  position:absolute; z-index:3;
  display:flex; flex-direction:column; gap:9px;
}
.hero__meta--tl{ top:calc(var(--pad) * 1.9); left:calc(var(--pad) + 20px); }
.hero__meta--tr{ top:calc(var(--pad) * 1.9); right:calc(var(--pad) + 20px); align-items:flex-end; }
.hero__meta--br{ bottom:calc(var(--console-h) + var(--pad) * 1.1); right:calc(var(--pad) + 20px); align-items:flex-end; }
@media (max-width:760px){
  .hero__meta--tl{ top:98px; left:var(--pad); }
  .hero__meta--tr{ top:98px; right:var(--pad); }
  .hero__meta--br{ right:var(--pad); bottom:calc(var(--console-h) + 24px); }
}

.tag{ color:var(--bone-mut); }
.tag--dim{ color:rgba(242,240,236,.26); }

/* ── Picto de descente ───────────────────────────────────── */
.descend{
  position:absolute; z-index:3;
  left:50%; translate:-50% 0;
  bottom:calc(var(--console-h) + clamp(34px, 6vh, 62px));
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:6px 18px;
}
.descend__rail{
  position:relative; width:1px; height:62px;
  background:linear-gradient(to bottom, transparent, var(--hair) 30%, var(--hair));
  overflow:hidden;
}
.descend__rail::after{
  content:""; position:absolute; left:0; top:0;
  width:1px; height:26px;
  background:linear-gradient(to bottom, transparent, var(--gold-hot));
  animation:descend-drip 2.9s var(--ease-io) infinite;
}
@keyframes descend-drip{
  0%   { transform:translateY(-28px); opacity:0; }
  18%  { opacity:1; }
  70%  { transform:translateY(62px); opacity:1; }
  100% { transform:translateY(62px); opacity:0; }
}
.descend__chev{
  width:17px; height:20px; overflow:visible;
  fill:none; stroke:var(--gold);
  stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round;
  opacity:.55;
  animation:descend-bob 2.9s var(--ease-io) infinite;
}
@keyframes descend-bob{
  0%,100% { transform:translateY(0);   opacity:.4; }
  60%     { transform:translateY(4px); opacity:.95; }
}
.descend:hover .descend__chev{ opacity:1; }
.descend:hover .descend__rail{ background:linear-gradient(to bottom, transparent, var(--gold-dim)); }

/* ═══ SECTIONS ════════════════════════════════════════════ */
.sect{
  position:relative;
  padding:clamp(96px,14vh,180px) var(--pad);
  border-top:1px solid var(--hair-2);
}
.sect__head{ max-width:1500px; margin:0 auto clamp(52px,7vh,96px); }
.label{
  display:inline-flex; align-items:baseline; gap:1em;
  color:var(--bone-mut); margin-bottom:30px;
}
.label i{ font-style:normal; color:var(--gold); font-size:10px; }
.sect__note{
  max-width:48ch; margin:30px 0 0;
  font-size:15px; line-height:1.9; font-weight:300;
  color:var(--bone-dim);
}

@media (max-width:760px){
  .sect{ padding:clamp(64px,9vh,104px) var(--pad); }   /* moins de vide sur petit écran */
  .sect__head{ margin-bottom:clamp(36px,5vh,56px); }
  .specs{ margin-top:32px; }
}

/* ── Tracklist ───────────────────────────────────────────── */
.tracks{ list-style:none; margin:0 auto; padding:0; max-width:1500px; }

.track{
  position:relative;
  display:grid; align-items:center;
  grid-template-columns:64px minmax(180px,1.05fr) minmax(240px,2.1fr) 168px 96px;
  gap:clamp(14px,2.4vw,38px);
  padding:32px 8px;
  border-top:1px solid var(--hair-2);
  cursor:pointer;
  transition:background .5s var(--ease);
}
.track:last-child{ border-bottom:1px solid var(--hair-2); }
.track::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(228,184,75,.07), rgba(228,184,75,0) 55%);
  opacity:0; transition:opacity .55s var(--ease);
}
.track:hover::before,
.track.is-active::before{ opacity:1; }
.track.is-active{ background:rgba(242,240,236,.012); }

.track__idx{
  font-family:var(--ui); font-size:11px; letter-spacing:.22em; font-weight:400;
  color:rgba(242,240,236,.32);
  display:flex; align-items:center; gap:10px;
}
.track.is-active .track__idx{ color:var(--gold); }

.track__id{ min-width:0; }
.track__title{
  font-family:var(--disp); font-weight:400;
  font-size:clamp(26px,2.8vw,40px);
  line-height:1.08; letter-spacing:.005em; margin:0 0 10px;
  transition:color .4s, letter-spacing .6s var(--ease);
}
.track:hover .track__title{ letter-spacing:.022em; }
.track.is-active .track__title{ color:var(--gold); }

.track__tags{ display:flex; gap:16px; flex-wrap:wrap; }
.track__tags span{ font-size:10px; letter-spacing:.18em; color:rgba(242,240,236,.34); }

.track__meta{
  display:flex; justify-content:flex-end; align-items:center; gap:20px;
  color:var(--bone-mut); font-variant-numeric:tabular-nums;
  font-size:10px; letter-spacing:.18em;
}
.track__state{ color:rgba(242,240,236,.30); }
.track.is-active .track__state{ color:var(--gold); }

.track__act{ display:flex; align-items:center; justify-content:flex-end; gap:10px; }

.track__dl{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid transparent;
  transition:border-color .4s, background .4s, transform .4s var(--ease);
}
.track__dl svg{
  width:16px; height:16px;
  fill:none; stroke:rgba(242,240,236,.40); stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .4s, transform .4s var(--ease);
}
.track__dl:hover{ border-color:var(--hair); background:rgba(242,240,236,.04); }
.track__dl:hover svg{ stroke:var(--gold); transform:translateY(1px); }

.track__btn{
  width:48px; height:48px; border-radius:50%;
  border:1px solid var(--hair);
  display:grid; place-items:center;
  transition:border-color .4s, background .4s, box-shadow .4s, transform .4s var(--ease);
}
.track__btn svg{ width:13px; height:13px; fill:var(--bone-dim); transition:fill .4s; }
.track__btn .i-pause{ display:none; }
.track:hover .track__btn{ border-color:var(--gold-dim); background:rgba(228,184,75,.07); transform:scale(1.06); }
.track:hover .track__btn svg{ fill:var(--gold); }
.track.is-playing .track__btn{ border-color:var(--gold); box-shadow:0 0 26px -6px rgba(228,184,75,.55); }
.track.is-playing .track__btn svg{ fill:var(--gold); }
.track.is-playing .track__btn .i-play{ display:none; }
.track.is-playing .track__btn .i-pause{ display:block; }

@media (max-width:960px){
  .track{
    grid-template-columns:44px 1fr 94px;
    grid-template-areas:"idx id act" ".  wave wave" ". meta meta";
    row-gap:18px; padding:28px 4px;
  }
  .track__idx{ grid-area:idx; align-items:flex-start; }
  .track__id{ grid-area:id; }
  .track__wave{ grid-area:wave; }
  .track__meta{ grid-area:meta; justify-content:flex-start; }
  .track__act{ grid-area:act; align-self:start; }
}

/* ── Formes d'onde ───────────────────────────────────────── */
.wave{ position:relative; height:56px; cursor:pointer; touch-action:none; }
.wave canvas{ width:100%; height:100%; display:block; }
.wave--console{ height:34px; flex:1; min-width:0; }

/* ── Le Baron ────────────────────────────────────────────── */
.sect--baron{ overflow:hidden; }
.baron__ghost{
  position:absolute; right:-4%; top:50%; transform:translateY(-50%);
  height:min(120%, 800px); width:auto;
  opacity:.030; pointer-events:none;
}
.baron__grid{
  position:relative;
  max-width:1500px; margin:0 auto;
  display:grid; grid-template-columns:1.05fr 1fr;
  gap:clamp(36px,6vw,110px); align-items:start;
}
@media (max-width:900px){
  .baron__grid{ grid-template-columns:1fr; }
  .baron__ghost{ opacity:.016; right:-22%; }
}
.baron__body p{
  font-size:15.5px; line-height:1.92; font-weight:300;
  color:var(--bone-dim); max-width:54ch; margin:0 0 24px;
}
.baron__body em{
  font-family:var(--disp); font-style:italic; font-weight:400;
  font-size:19px; color:var(--bone);
}

.specs{ margin:44px 0 0; display:grid; gap:1px; background:var(--hair-2); border-block:1px solid var(--hair-2); }
.specs > div{
  display:flex; justify-content:space-between; gap:20px;
  padding:18px 2px; background:var(--ink);
}
.specs dt{ color:rgba(242,240,236,.34); }
.specs dd{ margin:0; font-size:14px; color:var(--bone-dim); }

/* ── Contact ─────────────────────────────────────────────── */
.sect--contact{ padding-bottom:calc(var(--console-h) + 84px); }
.contact__grid{
  max-width:1500px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:40px; flex-wrap:wrap;
}
.contact__mail{
  font-family:var(--disp); font-style:italic; font-weight:400;
  font-size:clamp(24px,3vw,44px);
  color:var(--bone-dim);
  border-bottom:1px solid var(--hair);
  padding-bottom:8px;
  transition:color .4s, border-color .4s;
}
.contact__mail:hover{ color:var(--gold); border-color:var(--gold); }
.contact__links{ list-style:none; display:flex; gap:clamp(18px,2.8vw,38px); margin:0; padding:0; flex-wrap:wrap; }
.contact__links a{
  color:var(--bone-mut); position:relative; padding-bottom:5px;
  transition:color .4s;
}
.contact__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width .45s var(--ease);
}
.contact__links a:hover{ color:var(--bone); }
.contact__links a:hover::after{ width:100%; }

/* ── Section EP ── */
.ep{
  max-width:1500px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(36px,5vw,90px); align-items:center;
}
@media (max-width:900px){ .ep{ grid-template-columns:1fr; gap:36px; } }

.ep__art{ margin:0; position:relative; }
.ep__art img{
  width:100%; height:auto; display:block;
  filter:contrast(1.04);
}
.ep__art::after{           /* filet doré discret, comme le reste de la charte */
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(242,240,236,.10);
}

.ep__side{ display:flex; flex-direction:column; align-items:flex-start; gap:0; }
.ep__side .display{ margin-bottom:18px; }
.ep__def{
  margin:0 0 34px; max-width:38ch;
  font-size:15px; line-height:1.85; font-weight:300; color:var(--bone-dim);
}
.ep__def em{ font-family:var(--disp); font-style:italic; color:var(--bone); font-size:17px; }
.ep__note{
  margin:20px 0 0; max-width:40ch;
  font-size:12.5px; line-height:1.75; color:var(--bone-mut);
}

.release__dl{
  display:inline-flex; align-items:center; gap:18px;
  padding:16px 26px 16px 20px;
  border:1px solid var(--hair); border-radius:2px;
  transition:border-color .4s, background .4s, box-shadow .4s;
}
.release__dl:hover{
  border-color:var(--gold-dim); background:rgba(228,184,75,.05);
  box-shadow:0 0 40px -18px rgba(228,184,75,.8);
}
.release__ico{
  width:22px; height:22px; flex:none;
  fill:none; stroke:var(--gold); stroke-width:1.3;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .45s var(--ease);
}
.release__dl:hover .release__ico{ transform:translateY(2px); }
.release__dl strong{
  display:block; font-family:var(--disp); font-weight:500;
  font-size:19px; letter-spacing:-.01em; color:var(--bone);
}
.release__dl em{
  display:block; margin-top:3px; font-style:normal;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(242,240,236,.36);
}
.release__note{
  margin:0; max-width:40ch;
  font-size:12.5px; line-height:1.75; color:var(--bone-mut);
}

/* ── Mentions légales ── */
.legal{
  max-width:1500px; margin:0 auto;
  border-top:1px solid var(--hair-2);
}
.legal__sum{
  display:flex; align-items:center; gap:12px;
  padding:22px 0; cursor:pointer; list-style:none;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:400;
  color:var(--bone-mut);
  transition:color .35s;
}
.legal__sum::-webkit-details-marker{ display:none; }
.legal__sum:hover{ color:var(--bone); }
.legal__sum span{
  width:9px; height:9px; flex:none; position:relative;
}
.legal__sum span::before,
.legal__sum span::after{
  content:""; position:absolute; inset:0; margin:auto;
  background:var(--gold);
}
.legal__sum span::before{ width:9px; height:1px; }
.legal__sum span::after{ width:1px; height:9px; transition:transform .4s var(--ease); }
.legal[open] .legal__sum span::after{ transform:scaleY(0); }

.legal__body{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:clamp(24px,3vw,54px);
  padding:8px 0 40px;
}
.legal__body h3{
  margin:0 0 10px;
  font-size:10.5px; letter-spacing:.20em; text-transform:uppercase; font-weight:500;
  color:rgba(242,240,236,.38);
}
.legal__body p{
  margin:0; font-size:13px; line-height:1.85; color:var(--bone-mut);
}
.legal__body strong{ color:var(--bone-dim); font-weight:500; }
.legal__body em{ color:rgba(242,240,236,.32); }
.legal__body a{ color:var(--bone-dim); border-bottom:1px solid var(--hair); }
.legal__body a:hover{ color:var(--gold); border-color:var(--gold); }

.contact__base{
  max-width:1500px; margin:clamp(60px,9vh,120px) auto 0;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-top:24px; border-top:1px solid var(--hair-2);
  font-size:10px; color:rgba(242,240,236,.30);
}
.contact__base a:hover{ color:var(--gold); }

/* ═══ CONSOLE (player) ════════════════════════════════════ */
.console{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  transform:translateY(120%);
  transition:transform .9s var(--ease), opacity 1.2s var(--ease) .6s;
  background:linear-gradient(to top, rgba(5,5,5,.97), rgba(10,10,10,.84));
  backdrop-filter:blur(22px) saturate(1.1);
  -webkit-backdrop-filter:blur(22px) saturate(1.1);
  border-top:1px solid rgba(242,240,236,.04);
  padding-bottom:env(safe-area-inset-bottom);
}
.console.is-up{ transform:translateY(0); }
/* Le filet du haut n'est pas un décor : c'est le tracé du signal lui-même.
   Le canvas pose sa ligne de repos exactement sur l'arête du lecteur, si bien
   que filet et forme d'onde ne font qu'un — plat au silence, soulevé au son. */
.console__spectrum{
  position:absolute; left:0; right:0; bottom:100%; height:88px;
  pointer-events:none;
}
.console__spectrum canvas{ width:100%; height:100%; display:block; }

.console__inner{
  height:var(--console-h);
  display:grid;
  grid-template-columns:minmax(190px,1fr) auto minmax(280px,2.1fr) auto;
  align-items:center; gap:clamp(16px,2.6vw,38px);
  padding:0 var(--pad);
}
.console__id{ display:flex; align-items:baseline; gap:14px; min-width:0; }
.console__idx{ color:rgba(242,240,236,.32); font-size:10px; }
.console__title{
  font-family:var(--disp); font-weight:400; font-size:20px; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.is-playing .console__title{ color:var(--gold); }

.console__transport{ display:flex; align-items:center; gap:8px; }
.ctl{
  width:34px; height:34px; display:grid; place-items:center;
  border-radius:50%; color:var(--bone-mut);
  transition:color .35s, background .35s, transform .35s var(--ease);
}
.ctl svg{ width:15px; height:15px; fill:currentColor; }
.ctl:hover{ color:var(--bone); background:rgba(242,240,236,.05); }
.ctl:active{ transform:scale(.92); }
.ctl--play{
  width:44px; height:44px;
  border:1px solid var(--hair); color:var(--bone);
  transition:border-color .4s, box-shadow .4s, background .4s, transform .35s var(--ease);
}
.ctl--play svg{ width:16px; height:16px; }
.ctl--play:hover{ border-color:var(--gold-dim); background:rgba(228,184,75,.08); box-shadow:0 0 30px -8px rgba(228,184,75,.6); }
.ctl--play .i-pause{ display:none; }
body.is-playing .ctl--play .i-play{ display:none; }
body.is-playing .ctl--play .i-pause{ display:block; }
body.is-playing .ctl--play{ border-color:var(--gold-dim); color:var(--gold); box-shadow:0 0 34px -12px rgba(228,184,75,.75); }
.ctl--sm{ width:28px; height:28px; }
.ctl--sm svg{ width:14px; height:14px; }
.ctl--sm.is-muted .i-wave1,.ctl--sm.is-muted .i-wave2{ opacity:.15; }

.console__seek{ display:flex; align-items:center; gap:16px; min-width:0; }
.time{ color:var(--bone-mut); font-variant-numeric:tabular-nums; font-size:10px; letter-spacing:.12em; }
.time--dim{ color:rgba(242,240,236,.30); }

.console__vol{ display:flex; align-items:center; gap:10px; }
.vol{
  -webkit-appearance:none; appearance:none;
  width:78px; height:1px; background:var(--hair); cursor:pointer;
}
.vol::-webkit-slider-thumb{
  -webkit-appearance:none; width:9px; height:9px; border-radius:50%;
  background:var(--bone-dim); transition:background .3s, box-shadow .3s;
}
.vol:hover::-webkit-slider-thumb{ background:var(--gold); box-shadow:0 0 10px var(--gold); }
.vol::-moz-range-thumb{ width:9px; height:9px; border:0; border-radius:50%; background:var(--bone-dim); }

@media (max-width:1080px){
  .console__vol{ display:none; }
  .console__inner{ grid-template-columns:minmax(150px,1fr) auto minmax(200px,1.6fr); }
}
@media (max-width:720px){
  :root{ --console-h:64px; }
  .console__inner{
    grid-template-columns:auto 1fr;
    grid-template-areas:"transport seek";
    gap:14px;
  }
  .console__id{ display:none; }
  .console__transport{ grid-area:transport; }
  .console__seek{ grid-area:seek; }
  .console__seek .time--dim{ display:none; }
  .wave--console{ height:26px; }
}

/* ═══ Repli sans WebGL ════════════════════════════════════ */
body.no-gl .hero__canvas{ display:none; }
body.no-gl .hero{
  background:
    radial-gradient(120% 80% at 50% 34%, rgba(228,184,75,.10), transparent 60%),
    var(--ink);
}
body.no-gl .hero::after{
  content:""; position:absolute; inset:0;
  background:url("assets/logo.svg") no-repeat center 32% / auto 46%;
}

/* ═══ Apparitions ═════════════════════════════════════════ */
.reveal{ opacity:0; transform:translateY(28px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);
}

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; }
  .descend__rail::after, .descend__chev, .nav__cta-dot{ animation:none; }
  .intro{ display:none !important; }
}