/* ============================================================
   VOXXED DAYS AMSTERDAM 2027 / site.css (v3)
   Structure et modules calqués sur la grammaire devoxx.be :
   hero vidéo en slider · bande inscription · intro deux colonnes ·
   bande de pilules · grille tracks à icônes · hall (countdown + player)
   · sponsors en cartes blanches par palier · about sur fond artwork ·
   carrousel · newsletter sur fond artwork · footer trois colonnes.
   Aucune couleur en dur : tout vient de theme-*.css.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html{scroll-behavior:smooth}
html{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img,video,svg,iframe{display:block;max-width:100%}
/* les navigateurs donnent 1em 40px aux <figure> : ca faisait deborder la rangee de bustes */
figure{margin:0}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.25em}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- scrollbar, as on the reference ---- */
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--divider-strong);border-radius:4px}

/* ---- layout ---- */
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:var(--container-narrow);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-pad)}
.section--tight{padding-block:calc(var(--section-pad) * .55)}
.grid{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}.grid-4{grid-template-columns:1fr 1fr}
@media(min-width:720px){.grid-2,.grid-3{grid-template-columns:1fr 1fr}}
@media(min-width:1020px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}

/* ---- type ---- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1.05;margin:0 0 .4em;text-transform:uppercase;letter-spacing:var(--display-tracking)}
h2{font-size:clamp(1.6rem,3.6vw,2.6rem)}
h3{font-size:clamp(.95rem,1.4vw,1.1rem);letter-spacing:.06em}
p{margin:0 0 1em}p:last-child{margin-bottom:0}
.eyebrow{font-family:var(--font-display);font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;color:var(--accent);margin:0 0 .9rem}
.hl{color:var(--accent)}
.centered{text-align:center}
.rule{width:2.4rem;height:2px;background:var(--accent);margin:1.1rem auto 1.6rem;border-radius:1px}
.centered .rule{margin-inline:auto}.left .rule{margin-inline:0}
.section-head{margin-bottom:clamp(1.6rem,4vw,2.6rem)}
.section-head p{color:var(--muted);max-width:62ch;margin-inline:auto}

/* ---- buttons: pills ---- */
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-display);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  padding:.9rem 1.9rem;border-radius:999px;border:1px solid var(--accent);color:var(--btn-fg);background:var(--accent);
  transition:transform .15s ease,box-shadow .2s ease,background .15s ease,color .15s ease;white-space:nowrap;
  box-shadow:0 8px 30px var(--accent-glow);
}
.pill:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 12px 40px var(--accent-glow)}
/* la pilule du menu : hauteur bornee, pas de halo / elle debordait sous la barre */
.nav .pill{padding:.5rem 1rem;font-size:.6rem;line-height:1;box-shadow:none;flex:0 0 auto}
/* `.nav a:hover{color:var(--accent)}` gagnait en specificite sur `.pill--ghost:hover` :
   le texte devenait cyan sur fond cyan, la pilule paraissait vide. */
.nav a.pill:hover{transform:none;box-shadow:none;color:var(--btn-fg);background:var(--accent);border-color:var(--accent)}
.nav a.pill::after{display:none}
.pill--ghost{background:transparent;color:var(--accent);box-shadow:none}
.pill--ghost:hover{background:var(--accent);color:var(--btn-fg)}
.pill--white{background:transparent;color:var(--fg);border-color:var(--divider-strong);box-shadow:none}
.pill--white:hover{border-color:var(--fg)}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem}

/* ---- header ---- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:80;padding-block:1.1rem;transition:background .25s ease,padding .25s ease,backdrop-filter .25s ease}
.site-header.is-scrolled{background:var(--header-bg);backdrop-filter:blur(8px);padding-block:.55rem;border-bottom:1px solid var(--divider)}
.site-header.is-scrolled .logo img{height:42px}
.bar{display:flex;align-items:center;gap:1.2rem;min-height:52px;max-width:100%}
.logo{margin-right:auto;display:block}
.logo{flex:0 0 auto;line-height:0}
.logo img{height:52px;width:auto;max-width:none;object-fit:contain}
.site-header .bar{max-width:none;padding-inline:var(--edge)}
.nav{flex:0 1 auto;min-width:0}
.nav ul{display:flex;gap:1.4rem;align-items:center;list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.nav a{font-family:var(--font-display);font-size:.66rem;white-space:nowrap;letter-spacing:.24em;text-transform:uppercase;color:var(--fg);position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--accent);transition:right .25s ease}
.nav a:hover{text-decoration:none;color:var(--accent)}.nav a:hover::after{right:0}
.nav-toggle{display:none;color:var(--fg);padding:.4rem}
@media(max-width:1280px){
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--divider)}
  .nav.is-open{display:block}.nav ul{flex-direction:column;gap:0;padding:.6rem var(--gutter)}
  .nav a{display:block;padding:.85rem 0;border-bottom:1px solid var(--divider)}.nav-toggle{display:inline-flex}
}

/* ============================ HERO SLIDER ============================ */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;isolation:isolate;background:#000;contain:layout paint}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.slide.is-active{opacity:1;pointer-events:auto}
.slide-media{position:absolute;inset:0;z-index:-2;background:var(--hero-fallback);transform:translateZ(0)}
/* Les medias sont visibles des leur insertion. Le fondu progressif etait pilote par
   des evenements de chargement qui pouvaient etre manques : la video jouait alors
   derriere un calque a opacite nulle. Le poster en attribut suffit a couvrir l'attente. */
.slide-media video,.slide-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.slide-veil{position:absolute;inset:0;z-index:-1;background:var(--hero-veil)}
/* Correction colorimetrique du hero, en deux couches :
   - un voile bleu en `soft-light` qui refroidit les hautes lumieres orangees
   - un leger `multiply` cyan en bas pour raccrocher au bleu de la page
   Reglable ici sans retoucher la video. */
.slide-grade{position:absolute;inset:0;z-index:-1;pointer-events:none}
.slide-grade::before{content:"";position:absolute;inset:0;mix-blend-mode:soft-light;
  background:linear-gradient(180deg,rgba(0,120,200,.55) 0%,rgba(0,80,160,.35) 45%,rgba(0,40,90,.65) 100%)}
.slide-grade::after{content:"";position:absolute;inset:0;mix-blend-mode:multiply;
  background:linear-gradient(180deg,rgba(255,255,255,0) 40%,rgba(0,200,240,.16) 100%)}
.hero-date{position:absolute;left:var(--edge);top:calc(4.6rem + 2vh);font-family:var(--font-display);font-size:clamp(.82rem,1.05vw,.98rem);letter-spacing:.36em;text-transform:uppercase;line-height:1.85}
.hero-date b{display:block;font-weight:400;color:var(--accent)}
.slide-copy{position:absolute;left:var(--edge);bottom:clamp(4.5rem,10vh,7rem);max-width:min(92vw,900px)}
.slide-count{font-family:var(--font-display);font-size:.7rem;letter-spacing:.42em;color:var(--muted);margin:0 0 1rem}
.hero-title{font-size:clamp(2.2rem,6.2vw,5.2rem);line-height:.95;margin:0;letter-spacing:-.01em}
.hero-title span{display:block;overflow:hidden}
.hero-title span > i{display:inline-block;font-style:normal;transform:translateY(105%)}
.slide.is-active .hero-title span > i{animation:rise .9s cubic-bezier(.2,.75,.2,1) forwards}
.slide.is-active .hero-title span:nth-child(2) > i{animation-delay:.08s}.slide.is-active .hero-title span:nth-child(3) > i{animation-delay:.16s}
@keyframes rise{to{transform:none}}
.hero-sub{font-family:var(--font-display);font-size:clamp(.85rem,1.6vw,1.15rem);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:1.2rem 0 0;opacity:0}
.slide.is-active .hero-sub{animation:fade .8s .5s ease forwards}
.hero-cta{margin-top:1.6rem;opacity:0}
.slide.is-active .hero-cta{animation:fade .8s .75s ease forwards}
@keyframes fade{to{opacity:1}}
.slide-nav{position:absolute;left:var(--edge);right:var(--edge);bottom:clamp(2rem,5vh,3.2rem);display:flex;align-items:center;gap:1.4rem}
.progress{display:flex;gap:.5rem;align-items:center}
.progress button{position:relative;width:34px;height:14px;padding:0}
.progress button::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:var(--divider-strong)}
.progress button::after{content:"";position:absolute;left:0;top:4px;width:5px;height:5px;border-radius:50%;background:var(--fg);opacity:0;transition:opacity .2s}
.progress button[aria-current="true"]::after{opacity:1;animation:travel var(--slide-duration,8s) linear forwards}
@keyframes travel{from{left:0}to{left:calc(100% - 5px)}}
.progress button[aria-current="true"]::before{background:var(--fg)}
.slide-index{font-family:var(--font-display);font-size:.62rem;letter-spacing:.42em;color:var(--muted)}
.scroll-hint{position:absolute;right:var(--edge);top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:center;font-family:var(--font-display);font-size:.58rem;letter-spacing:.5em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.sound{position:absolute;right:var(--edge);bottom:clamp(2rem,5vh,3.2rem);font-family:var(--font-display);font-size:.6rem;letter-spacing:.4em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.5rem}
.sound svg{width:14px;height:14px;stroke:currentColor}
.sound:hover{color:var(--fg)}
/* le hero ne porte plus de video : le poster suffit et la page demarre instantanement */
.hero-loader{display:none;position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px;border:1px solid var(--divider-strong);border-top-color:var(--fg);border-radius:50%;animation:spin 1s linear infinite;opacity:.7;pointer-events:none}
.hero.is-loaded .hero-loader{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:720px){.scroll-hint{display:none}.hero-date{top:5rem}}

/* ============================ BANDS ============================ */
.band{background:var(--band-bg);border-block:1px solid var(--divider);text-align:center;padding-block:clamp(2.2rem,5vw,3.4rem)}
.band p{color:var(--muted);margin:.9rem 0 0;font-size:.95rem}
.band .pills{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}

/* ============================ INTRO ============================ */
.intro .cols{display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:1fr;text-align:left;font-size:.95rem}
@media(min-width:820px){.intro .cols{grid-template-columns:1fr 1fr}.intro .cols > div:first-child{border-right:1px solid var(--divider);padding-right:clamp(1.5rem,4vw,3rem)}}
.intro .cols p{color:var(--fg-soft)}

/* ============================ TRACKS ============================ */
.tracks{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:720px){.tracks{grid-template-columns:1fr 1fr}}
@media(min-width:1020px){.tracks{grid-template-columns:repeat(3,1fr)}}
.track{background:var(--card-bg);border:1px solid var(--divider);border-radius:var(--radius);padding:2.2rem 1.6rem 2.6rem;text-align:center;min-height:15rem;transition:border-color .2s,transform .2s}
.track:hover{border-color:var(--accent);transform:translateY(-3px)}
.track .icons{display:flex;justify-content:center;margin-bottom:1.2rem}
.track .icons svg{width:44px;height:44px;color:var(--accent);fill:none;overflow:visible;
  filter:drop-shadow(0 0 10px rgba(0,200,240,.35))}
.track .icons .x{width:26px;height:26px}
.track h3{font-size:.8rem;letter-spacing:.14em;margin-bottom:.6rem}
.track p{font-size:.85rem;color:var(--muted);margin:0}

/* ============================ HALL: countdown + player ============================ */
.hall{position:relative;background:var(--band-bg);border-block:1px solid var(--divider)}
.countdown{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1.4rem,6vw,4.5rem);margin:0 0 clamp(2rem,5vw,3.5rem);padding:0;list-style:none}
.countdown div{font-family:var(--font-display);font-size:clamp(2.2rem,6.5vw,4.4rem);line-height:1;color:var(--fg);font-variant-numeric:tabular-nums}
.countdown span{display:block;font-family:var(--font-display);font-size:.6rem;letter-spacing:.4em;text-transform:uppercase;color:var(--accent);margin-top:.6rem}
.player{position:relative;aspect-ratio:16/9;max-width:940px;margin-inline:auto;border-radius:var(--radius);overflow:hidden;border:1px solid var(--divider);background:var(--hero-fallback);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.player video,.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.player .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.player .play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;padding-bottom:0;color:var(--fg);background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55));font-family:var(--font-display);font-size:.66rem;letter-spacing:.4em;text-transform:uppercase}
.player .play svg{width:64px;height:64px;stroke:var(--accent);fill:none;stroke-width:1;transition:transform .2s ease}
.player .play:hover svg{transform:scale(1.06)}
/* ============================ LIGHTBOX ============================ */
.lightbox{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);
  background:rgba(2,8,16,.82);backdrop-filter:blur(6px);opacity:0;transition:opacity .26s ease}
.lightbox.is-open{opacity:1}
.lb-stage{position:relative;width:min(100%,1100px);aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:#000;box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(0,200,240,.25);
  transform:scale(.97) translateY(8px);transition:transform .26s cubic-bezier(.2,.7,.2,1)}
.lightbox.is-open .lb-stage{transform:none}
.lb-stage iframe,.lb-stage video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.lb-close{position:absolute;top:.6rem;right:.6rem;z-index:2;width:2.4rem;height:2.4rem;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.22);
  transition:background .15s ease,border-color .15s ease}
.lb-close:hover{background:var(--accent);color:var(--btn-fg);border-color:var(--accent)}
.lb-close svg{width:16px;height:16px}
@media(max-width:720px){.lb-close{top:-2.9rem;right:0;background:transparent;border-color:rgba(255,255,255,.3)}}
@media (prefers-reduced-motion:reduce){.lightbox,.lb-stage{transition:none}}

/* ============================ SPONSORS ============================ */
.tier{margin-bottom:2.4rem}
.tier h3{text-align:center;font-size:.62rem;letter-spacing:.42em;color:var(--muted);margin:0 0 1rem;position:relative}
.tier h3::before,.tier h3::after{content:"";position:absolute;top:50%;width:calc(50% - 5rem);height:1px;background:var(--divider)}
.tier h3::before{left:0}.tier h3::after{right:0}
.logos{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem}
.logo-card{background:#fff;border-radius:var(--radius);height:5.2rem;flex:0 0 calc(33.333% - .6rem);max-width:15rem;min-width:9rem;
  display:flex;align-items:center;justify-content:center;padding:.9rem 1.4rem;color:#0b1a2b;
  font-family:var(--font-display);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;text-align:center;transition:transform .2s}
.logo-card:hover{transform:translateY(-2px)}
.logo-card{overflow:hidden}
/* l'image occupe la boite moins la marge, centree sur les deux axes :
   sans `height:100%` les logos larges (CGI, VX, EDSN, elastic) se collaient en bas */
.logo-card img{display:block;width:100%;height:100%;object-fit:contain;object-position:center center}
.tier--lg .logo-card{height:6.2rem;flex-basis:calc(33.333% - .6rem)}
.tier--sm .logo-card{height:4.2rem;flex-basis:calc(25% - .6rem);min-width:8rem;max-width:12rem}
@media(max-width:720px){.logo-card,.tier--sm .logo-card{flex-basis:calc(50% - .4rem)}}

/* ============================ ART SECTIONS (about, newsletter) ============================ */
.art{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(5rem,12vw,9rem)}
.art-bg{position:absolute;inset:0;z-index:-2;background:var(--art-fallback);transform:translateZ(0);backface-visibility:hidden}
.art-bg video,.art-bg img{width:100%;height:110%;object-fit:cover}
.art{contain:paint}
/* fond image : légèrement plus haut que la section pour laisser courir la parallaxe */
.art:not(.has-video) .art-bg{height:118%;top:-9%}
.art-bg img,.art-bg video{width:100%;height:100%;object-fit:cover}
.art-veil{position:absolute;inset:0;z-index:-1;background:var(--art-veil)}
/* Voile entrelace facon balayage video : une ligne noire une ligne sur trois,
   pose au-dessus du fond anime. Il casse les hautes lumieres de la video et
   redonne du contraste au texte sans l'assombrir uniformement.
   Le pas est fixe en pixels physiques pour rester net sur ecran Retina. */
.art.has-video .art-veil::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,
    rgba(0,0,0,.42) 0px, rgba(0,0,0,.42) 1px,
    rgba(0,0,0,0)   1px, rgba(0,0,0,0)   3px);
  mix-blend-mode:multiply;
}
@media(min-resolution:2dppx){
  .art.has-video .art-veil::after{
    background:repeating-linear-gradient(180deg,
      rgba(0,0,0,.42) 0px, rgba(0,0,0,.42) .5px,
      rgba(0,0,0,0)   .5px, rgba(0,0,0,0)  2px);
  }
}
/* a video background never also carries a parallax: decoding + transform on the same layer is what stutters */
.art.has-video .art-bg{transform:none!important}
.panel{background:var(--panel-bg);border:1px solid var(--divider);border-radius:var(--radius);padding:clamp(1.8rem,4vw,3.2rem);max-width:var(--container-narrow);margin-inline:auto}
.panel .cols{display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:1fr;text-align:left;font-size:.95rem}
@media(min-width:820px){.panel .cols{grid-template-columns:1fr 1fr}.panel .cols > div:first-child{border-right:1px solid var(--divider);padding-right:clamp(1.5rem,4vw,3rem)}}

/* ============================ CAROUSEL ============================ */
/* Le rail deborde jusqu'aux bords de l'ecran avec un padding interne egal a la
   gouttiere : marges gauche et droite identiques, derniere vignette non collee
   au bord. `html{overflow-x:clip}` empeche la marge negative de rendre la page
   scrollable horizontalement. */
.carousel{position:relative}
.carousel-track{display:flex;gap:1rem;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
  scrollbar-width:none;padding:0 var(--gutter) .5rem;margin-inline:calc(-1 * var(--gutter));
  -webkit-overflow-scrolling:touch}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track > *{flex:0 0 min(78vw,420px);scroll-snap-align:start;scroll-snap-stop:always}
@media(max-width:720px){.carousel-track > *{flex-basis:calc(100vw - 2 * var(--gutter))}}
.card{background:var(--card-bg);border:1px solid var(--divider);border-radius:var(--radius);padding:1.4rem;transition:border-color .2s}
.card:hover{border-color:var(--accent)}
.card h3{font-size:.8rem;letter-spacing:.14em}
.card p{font-size:.9rem;color:var(--muted)}
.photo{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--card-bg);border:1px solid var(--divider);position:relative}
.photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease,opacity .45s ease}
/* squelette : un degrade du theme qui respire, remplace par l'image une fois decodee */
.photo-skeleton{position:absolute;inset:0;background:var(--visual-empty);opacity:1;transition:opacity .45s ease}
.photo-skeleton::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.06) 45%,transparent 70%);
  background-size:220% 100%;animation:shimmer 1.6s linear infinite}
@keyframes shimmer{to{background-position:-220% 0}}
.photo.is-loading img{opacity:0}
.photo:not(.is-loading) .photo-skeleton{opacity:0;pointer-events:none}
.photo.is-failed .photo-skeleton::after{animation:none}
@media (prefers-reduced-motion:reduce){.photo-skeleton::after{animation:none}}
.photo:hover img{transform:scale(1.04)}
.photo figcaption{position:absolute;left:.9rem;bottom:.8rem;font-family:var(--font-display);font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;color:var(--fg);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.albums-lead{margin:2.2rem 0 .9rem;color:var(--muted);font-size:.95rem}
.albums{justify-content:center}
.carousel-foot{display:flex;justify-content:flex-end;align-items:center;gap:1rem;margin-top:.8rem;font-family:var(--font-display);font-size:.62rem;letter-spacing:.42em;color:var(--muted)}
.carousel-foot .line{width:5rem;height:1px;background:var(--divider-strong);position:relative;overflow:hidden}
.carousel-foot .line i{position:absolute;left:0;top:0;height:100%;background:var(--accent);width:20%;transition:width .3s,left .3s}
.carousel-btn{width:2.2rem;height:2.2rem;border:1px solid var(--divider-strong);border-radius:50%;display:grid;place-items:center;color:var(--fg)}
.carousel-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.carousel-btn:disabled{opacity:.3;cursor:default}
.carousel-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6}

/* ============================ SPEAKERS ============================ */
.speaker{text-align:center}
.speaker-photo{aspect-ratio:1;border-radius:50%;width:min(100%,180px);margin:0 auto 1rem;background:var(--card-bg);border:1px solid var(--divider);display:grid;place-items:center;overflow:hidden}
/* la photo est posee par-dessus la silhouette et n'apparait qu'une fois chargee */
.speaker-photo{position:relative}
.speaker-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .4s ease}
.speaker-photo.has-photo img{opacity:1}
.speaker-photo.has-photo svg{opacity:0}
.speaker-photo svg{width:36%;opacity:.35}
.speaker h3{font-size:.78rem;letter-spacing:.12em;margin:0 0 .25rem}
.speaker p{font-size:.82rem;color:var(--muted);margin:0}
.speakers-2026{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;gap:0 1.5rem;grid-template-columns:1fr 1fr}
@media(min-width:860px){.speakers-2026{grid-template-columns:repeat(4,1fr)}}
.speakers-2026 li{border-top:1px solid var(--divider);padding:.9rem 0}
.speakers-2026 b{display:block;font-family:var(--font-display);font-weight:400;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.speakers-2026 span{font-size:.8rem;color:var(--muted)}

/* ============================ SCHEDULE ============================ */
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:1.6rem}
.tab{font-family:var(--font-display);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;padding:.7rem 1.3rem;border-radius:999px;border:1px solid var(--divider-strong);color:var(--muted)}
.tab[aria-selected="true"]{border-color:var(--accent);color:var(--accent)}
.slot{display:grid;grid-template-columns:5.5rem 1fr;gap:1rem;align-items:baseline;padding:1rem 0;border-bottom:1px solid var(--divider)}
@media(min-width:720px){.slot{grid-template-columns:6.5rem 1fr auto}}
.slot time{font-family:var(--font-display);font-size:.8rem;color:var(--accent);font-variant-numeric:tabular-nums}
.slot h4{font-size:.8rem;letter-spacing:.1em;margin:0 0 .15rem}
.slot p{margin:0;font-size:.85rem;color:var(--muted)}
.slot .fmt{font-family:var(--font-display);font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.slot.is-break{opacity:.6}

/* ============================ TICKETS ============================ */
.ticket{text-align:center;padding:2rem 1.4rem 2.2rem}
.ticket .status{font-family:var(--font-display);font-size:.58rem;letter-spacing:.36em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.8rem}
.ticket .price{font-family:var(--font-display);font-size:2.4rem;line-height:1;margin:.8rem 0 .2rem}
.ticket .price small{display:block;font-family:var(--font-body);font-size:.72rem;letter-spacing:.06em;text-transform:none;color:var(--muted);margin-top:.5rem}
.ticket ul{list-style:none;margin:1.2rem 0 0;padding:0;font-size:.85rem;color:var(--muted)}
.ticket li{padding:.35rem 0;border-top:1px solid var(--divider)}
.ticket.is-featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 20px 60px var(--accent-glow)}

/* ============================ AMBASSADORS / CONTACT / FAQ ============================ */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.chip{font-family:var(--font-display);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);border:1px solid var(--divider-strong);border-radius:999px;padding:.7rem 1.2rem}
.chip:hover{color:var(--accent);border-color:var(--accent);text-decoration:none}
address{font-style:normal;color:var(--muted);font-size:.92rem}
.map{aspect-ratio:16/9;border-radius:var(--radius);border:1px solid var(--divider);overflow:hidden}
.map{position:relative;isolation:isolate}
.map iframe{width:100%;height:100%;border:0;filter:var(--map-filter)}
/* teinte bleue par-dessus la carte : le filtre seul laisse des verts et des ocres */
.map::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:color;
  background:linear-gradient(160deg,rgba(0,200,240,.85),rgba(10,60,120,.85))}
details{border-bottom:1px solid var(--divider);padding:1.05rem 0}
summary{cursor:pointer;list-style:none;display:flex;gap:.8rem;align-items:baseline;font-family:var(--font-display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
summary::-webkit-details-marker{display:none}
summary::before{content:"/";color:var(--accent);flex:none}
details[open] summary{color:var(--accent)}
details p{margin:.8rem 0 0 1.4rem;color:var(--muted);font-size:.9rem}

/* ============================ NEWSLETTER FORM ============================ */
.form-card{background:#fff;color:#0b1a2b;border-radius:var(--radius);padding:1.6rem;max-width:26rem;margin:1.6rem auto 0;text-align:left}
.form-card label{display:block;font-size:.72rem;margin-bottom:.35rem;color:#334}
.form-card input[type=email]{width:100%;font:inherit;padding:.65rem .8rem;border:1px solid #c8d0d8;border-radius:4px;margin-bottom:.9rem}
.form-card .consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.68rem;color:#556;margin-bottom:1rem}
.form-card .pill{padding:.7rem 1.4rem;font-size:.62rem}
.form-note{font-size:.72rem;color:#667;margin:.8rem 0 0}

/* ============================ FOOTER ============================ */
.site-footer{padding-block:clamp(3rem,7vw,5rem) 2rem;text-align:center}
.site-footer .logo{margin:0 auto 1.4rem;width:max-content}
.site-footer .logo img{height:36px}
.site-footer .tagline{font-family:var(--font-display);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;max-width:34ch;margin:0 auto 1.4rem;line-height:1.8}
.socials{display:flex;justify-content:center;gap:1.8rem;list-style:none;margin:2.2rem auto;padding:1.6rem 0;border-block:1px solid var(--divider);max-width:var(--container-narrow)}
.socials a{color:var(--fg)}.socials a:hover{color:var(--accent)}
.socials svg{width:22px;height:22px;fill:currentColor}
.foot-cols{display:grid;gap:2rem;grid-template-columns:1fr;text-align:left;max-width:var(--container-narrow);margin:0 auto}
@media(min-width:720px){.foot-cols{grid-template-columns:repeat(3,1fr)}}
.foot-cols h4{font-size:.58rem;letter-spacing:.42em;color:var(--muted);border-bottom:1px solid var(--divider);padding-bottom:.7rem;margin-bottom:.9rem}
.foot-cols ul{list-style:none;margin:0;padding:0}
.foot-cols li{margin-bottom:.7rem}
.foot-cols a{font-family:var(--font-display);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--fg)}
.foot-cols a::before{content:"/ ";color:var(--accent)}
.foot-cols a:hover{color:var(--accent);text-decoration:none}
.legal{margin-top:2.6rem;font-size:.72rem;color:var(--muted);letter-spacing:.06em}
.legal a{color:var(--muted)}

/* ---- back to top ---- */
.to-top{position:fixed;right:1.4rem;bottom:1.4rem;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--divider-strong);display:grid;place-items:center;color:var(--muted);z-index:70;opacity:0;pointer-events:none;transition:opacity .3s;background:var(--header-bg)}
.to-top.is-visible{opacity:1;pointer-events:auto}
.to-top:hover{color:var(--accent);border-color:var(--accent)}
.to-top svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6}

/* ---- reveal hooks (driven by motion.js; static without it) ---- */
html.has-motion [data-reveal],
html.has-motion [data-stagger] > *{
  opacity:0;transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
}
html.has-motion [data-reveal].is-in,
html.has-motion [data-stagger] > *.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .slide.is-active .hero-title span > i{transform:none}.hero-sub{opacity:1}
  html.has-gsap [data-reveal],html.has-gsap [data-stagger] > *{opacity:1;transform:none}
}

/* ============================ LOGO TICKER (animated) ============================ */
.ticker{overflow:hidden;padding-block:1.4rem;margin-bottom:2.4rem;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ticker{contain:paint}
.ticker-track{display:flex;gap:.8rem;width:max-content;animation:ticker 40s linear infinite;will-change:transform;backface-visibility:hidden}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker .logo-card{flex:0 0 11rem;height:4.4rem;padding:.7rem 1rem}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ============================ SPEAKER SLIDER (auto) ============================ */
.speaker-slider{overflow:hidden;margin-top:2.6rem;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.speaker-slider{contain:paint}
.speaker-track{display:flex;gap:1.2rem;width:max-content;animation:ticker 48s linear infinite;will-change:transform;backface-visibility:hidden}
.speaker-slider:hover .speaker-track{animation-play-state:paused}
.speaker-track .speaker{flex:0 0 13rem}
.speaker-track .speaker-photo{width:9rem}
@media (prefers-reduced-motion:reduce){.ticker-track,.speaker-track{animation:none;flex-wrap:wrap;width:auto}}

/* ============================ COUNTERS (after hero) ============================ */
.countdown-band{background:var(--band-bg);border-block:1px solid var(--divider)}
.countdown-band .wrap{display:grid;gap:1.5rem;align-items:center;padding-block:clamp(2rem,5vw,3rem)}
@media(min-width:860px){.countdown-band .wrap{grid-template-columns:auto 1fr;gap:3rem}}
.countdown-band .countdown{margin:0;justify-content:flex-start}
.countdown-label{font-family:var(--font-display);font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);margin:0}
.stats-band{border-bottom:1px solid var(--divider)}
.stats{display:grid;gap:1.5rem;grid-template-columns:repeat(2,1fr);padding-block:clamp(2rem,5vw,3.5rem)}
@media(min-width:860px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{border-left:1px solid var(--divider);padding-left:1rem}
.stat b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,6vw,4.2rem);line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.stat span{display:block;font-family:var(--font-display);font-size:.56rem;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);margin-top:.5rem}
@media(max-width:859px){.countdown-band .countdown{justify-content:center}}

/* ============================ STATEMENT (words light up) ============================ */
.statement-wrap{padding-block:clamp(4rem,10vw,7rem)}
.statement{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,3.8vw,3rem);line-height:1.25;letter-spacing:.02em;text-transform:none;max-width:24ch;margin:0}
.statement .sw{color:var(--muted);opacity:.3;transition:opacity .5s ease,color .5s ease}
.statement .sw.on{opacity:1;color:var(--fg)}
.statement .sw.hl.on{color:var(--accent)}
html:not(.has-motion) .statement .sw{opacity:1;color:var(--fg)}
html:not(.has-motion) .statement .sw.hl{color:var(--accent)}
.intro-cols{display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:1fr;text-align:left}
@media(min-width:900px){.intro-cols{grid-template-columns:1.15fr .85fr;align-items:start}}
@media(min-width:1024px){
  /* la colonne de droite portait .85fr et se retrouvait tres etroite une fois
     la perspective appliquee : on rend les deux colonnes quasi egales */
  .intro .narrow{max-width:calc(var(--container-narrow) + 11rem)}
    .intro-cols{grid-template-columns:1fr .82fr;gap:clamp(1.8rem,3.2vw,2.8rem);
    padding-right:clamp(0px,6vw,110px);align-items:center}
  .intro-cols .card--3d{padding:clamp(1.6rem,2.2vw,2.2rem);align-self:center}
}
.intro-cols h2{font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.1}
.intro-cols p{color:var(--fg-soft);font-size:.95rem}
.intro-cols .card{padding:clamp(1.4rem,3vw,2.2rem)}
.intro-cols .card h3{color:var(--accent);margin-bottom:.8rem}
.intro-cols .card p{color:var(--muted)}

/* ============================ FOOTER v3 ============================ */
.site-footer{text-align:left}
.foot-grid{display:grid;gap:2.5rem;grid-template-columns:1fr;padding-bottom:2.5rem;border-bottom:1px solid var(--divider)}
@media(min-width:1020px){.foot-grid{grid-template-columns:1.4fr repeat(4,1fr)}}
.foot-brand .logo{margin:0 0 1.2rem;width:max-content}
.foot-brand .tagline{margin:0 0 1.2rem;max-width:30ch}
.foot-brand .socials{justify-content:flex-start;margin:1.4rem 0 0;padding:0;border:0;max-width:none;gap:1.2rem}
.foot-bottom{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center;padding-top:1.6rem;font-size:.72rem;color:var(--muted)}
.foot-bottom a{color:var(--muted)}
.foot-bottom .badge{font-family:var(--font-display);font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);border:1px solid var(--divider);border-radius:999px;padding:.5rem 1rem}

/* build stamp in the footer: tells at a glance which package is live */
.foot-bottom .build{font-family:var(--font-display);font-size:.62rem;letter-spacing:.2em;color:var(--accent);opacity:.85}

/* ---- chaque section entre en fondu ---- */
html.has-motion .section,html.has-motion .art,html.has-motion .band,
html.has-motion .countdown-band,html.has-motion .stats-band,html.has-motion .statement-wrap{
  opacity:0;transition:opacity .8s ease;
}
html.has-motion .section.sec-in,html.has-motion .art.sec-in,html.has-motion .band.sec-in,
html.has-motion .countdown-band.sec-in,html.has-motion .stats-band.sec-in,html.has-motion .statement-wrap.sec-in{opacity:1}
html:not(.has-motion) .section,html:not(.has-motion) .art{opacity:1}

/* Les deux cartes du CFP : contenu centre et boutons alignes sur la meme ligne
   de base, quelle que soit la longueur du texte au-dessus. */
#speak .grid-2 .card{display:flex;flex-direction:column}
#speak .grid-2 .card .cta-row{margin-top:auto;padding-top:1.4rem;justify-content:center}

/* ============================================================
   INTRO / perspective de la carte + deux plans en parallaxe
   Tout est desactive sous 1024 px : les visuels passent en bloc
   fixe sous la colonne de texte, la carte redevient plate.
   ============================================================ */
.intro{position:relative;isolation:isolate;overflow:hidden}

.intro .narrow{position:relative;z-index:2}

.intro-scene{position:absolute;inset:0;z-index:0;pointer-events:none}
.intro-layer{position:absolute;will-change:transform}
.intro-layer img{display:block;width:100%;height:auto;max-width:none}
/* le fond de ville, tres flou, large et bas */
/* Le fond couvre TOUTE la moitie droite, avec une marge haute et basse
   suffisante pour que la parallaxe ne fasse jamais apparaitre ses bords.
   `object-fit:cover` + surdimensionnement vertical : l'image est recadree,
   jamais deformee, et le degrade de masque estompe les aretes. */
.intro-layer--bg{right:0;left:34%;top:-18%;bottom:-18%;width:auto;opacity:.5;
  -webkit-mask-image:radial-gradient(120% 88% at 72% 50%,#000 42%,transparent 80%);
          mask-image:radial-gradient(120% 88% at 72% 50%,#000 42%,transparent 80%)}
.intro-layer--bg img{width:100%;height:100%;object-fit:cover;object-position:68% 55%}
/* la silhouette detouree : plus grande, plus proche, donc plus mobile.
   Un halo froid derriere elle la detache du fond, sinon ses vetements
   sombres se confondent avec la nuit. */
/* dimensionnee en HAUTEUR : une silhouette en pied est tres verticale,
   la contraindre en largeur la faisait deborder de la section */
/* Plus grande et ancree en bas : elle deborde volontairement sous la carte.
   `bottom:-24%` la fait descendre de ~270 px sous la section, soit davantage
   que l'amplitude de la parallaxe (190 px) : ses pieds restent hors champ meme
   au point haut de la course, on ne voit donc jamais la coupure du detourage. */
.intro-layer--figure{right:-2%;bottom:-22%;top:auto;height:min(112%,1060px);width:auto}
.intro-layer--figure img{width:auto;height:100%}
.intro-layer--figure::before{content:"";position:absolute;left:4%;top:10%;width:92%;height:70%;
  background:radial-gradient(60% 55% at 52% 42%,rgba(0,200,240,.30),rgba(0,120,200,.12) 45%,transparent 72%);
  filter:blur(28px);z-index:-1}
.intro-layer--figure img{position:relative;filter:drop-shadow(0 24px 50px rgba(0,0,0,.55))}

/* la carte prend une profondeur : elle pivote autour de l'axe Y, le bord
   gauche recule donc parait plus court. La perspective est portee par le
   parent pour que la deformation reste naturelle. */
@media(min-width:1024px){
  .intro-cols{perspective:1400px;perspective-origin:50% 45%}
  .card--3d{
    transform-style:preserve-3d;
    transform:rotateY(-7deg) rotateX(1.5deg) translateZ(0);
    box-shadow:-18px 22px 60px rgba(0,0,0,.45),0 0 0 1px rgba(0,200,240,.18);
    transition:transform .5s cubic-bezier(.2,.7,.2,1);
  }
  .card--3d:hover{transform:rotateY(-3deg) rotateX(.5deg) translateZ(12px)}
}

/* mobile et tablette : pas de 3D, pas de parallaxe.
   Les deux plans sont composes en un seul bloc fixe, pose sous le texte,
   au format 4/3 pour ne pas laisser de vide. */
@media(max-width:1023px){
  /* le bloc visuel est premier dans le HTML (il doit etre en arriere-plan sur
     grand ecran) : en colonne on le renvoie apres le contenu */
  .intro{overflow:visible;display:flex;flex-direction:column}
  .intro > .narrow{order:1}
  /* `width:100%` explicite : le bloc n'a que des enfants en position absolue,
     sa largeur naturelle est nulle et il se reduisait a rien en colonne flex */
  .intro-scene{order:2;position:relative;inset:auto;height:auto;width:min(100% - 2*var(--gutter),560px);
    aspect-ratio:4/3;margin:2.5rem auto 0;border-radius:var(--radius);
    overflow:hidden;background:var(--visual-empty)}
  .intro-layer{position:absolute;transform:none!important}
  .intro-layer--bg{inset:0;width:100%;height:100%;opacity:.75;
    -webkit-mask-image:none;mask-image:none}
  .intro-layer--bg img{width:100%;height:100%;object-fit:cover}
  .intro-layer--figure{right:2%;bottom:0;top:auto;height:92%;width:auto}
  .intro-layer--figure img{width:auto;height:100%}
  .intro-layer--figure::before{left:0;top:10%;width:100%;height:80%;filter:blur(24px)}
}
@media (prefers-reduced-motion:reduce){
  .intro-layer{transform:none!important}
  .card--3d{transform:none!important;transition:none}
}

/* ============================================================
   CFP OPEN - la rangee de bustes
   Au repos : desatures, sombres, en retrait. Au survol : le buste
   reprend ses couleurs, un halo de la teinte de sa piste s'allume
   derriere lui, et le nom de la piste apparait dessous. Les autres
   s'effacent pour isoler celui qu'on designe.
   ============================================================ */
.cfp-open{position:relative;isolation:isolate}
/* bandeau de ville derriere la rangee, dans la tonalite du site :
   les silhouettes detourees flottaient sur du vide */
/* le fond couvre toute la section et non plus seulement son bas : il habille
   la zone des bustes. Attenue et retenu dans la tonalite du theme. */
.cast-backdrop{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.cast-backdrop img{width:100%;height:100%;object-fit:cover;object-position:center 58%;
  opacity:.26;filter:saturate(.5) brightness(.72)}
.cast-backdrop::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--bg) 0%,rgba(6,19,33,.72) 22%,rgba(6,19,33,.55) 58%,var(--bg) 100%)}

.cast{display:flex;justify-content:center;align-items:flex-start;gap:clamp(.5rem,1.4vw,1.2rem);
  margin-top:clamp(2.5rem,6vw,4.5rem);flex-wrap:wrap}
.cast-figure{position:relative;flex:0 1 clamp(130px,15vw,215px);max-width:215px;
  display:flex;flex-direction:column;align-items:center;isolation:isolate}
/* PAS d'overflow:hidden ici : le halo et les pieds debordaient en un bord net */
.cast-figure .shot{position:relative;width:100%;aspect-ratio:3/4}
.cast-figure img{width:100%;height:100%;object-fit:cover;object-position:center 12%;display:block;
  filter:grayscale(.65) brightness(.62) contrast(1.05);opacity:.62;
  transform:scale(1.02);
  /* fondu du bas : la silhouette se dissout au lieu d'etre coupee net */
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 99%);
          mask-image:linear-gradient(180deg,#000 78%,transparent 99%);
  transition:filter .45s ease,opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
/* le halo : plus large que le cadre, sans bord, pose derriere le buste */
.cast-figure .shot::before{content:"";position:absolute;left:-34%;right:-34%;top:-18%;bottom:-22%;z-index:-1;
  background:radial-gradient(50% 46% at 50% 44%,var(--accent-fig),transparent 72%);
  opacity:0;filter:blur(38px);transition:opacity .45s ease}
.cast-figure .label{margin-top:.9rem;text-align:center;min-height:3.2em}
.cast-figure .who{display:block;font-family:var(--font-display);font-size:.58rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);transition:color .35s ease}
.cast-figure .track-name{display:block;margin-top:.35rem;font-family:var(--font-display);font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-fig);
  opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s cubic-bezier(.2,.7,.2,1)}

.cast-figure:hover img,.cast-figure:focus-within img{
  filter:none;opacity:1;transform:scale(1.06)}
.cast-figure:hover .shot::before,.cast-figure:focus-within .shot::before{opacity:.9}
.cast-figure:hover .who,.cast-figure:focus-within .who{color:var(--fg)}
.cast-figure:hover .track-name,.cast-figure:focus-within .track-name{opacity:1;transform:none}
.cast:hover .cast-figure:not(:hover) img{opacity:.32}

.cast-hint{margin:1.6rem 0 0;font-family:var(--font-display);font-size:.58rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--muted);opacity:.7}

@media(max-width:860px){
  .cast{gap:.6rem}
  .cast-figure{flex:0 1 calc(33.333% - .5rem)}
  .cast-figure .label{min-height:3.4em}
  /* pas de survol au doigt : tout est deja allume */
  .cast-figure img{filter:grayscale(.3) brightness(.85);opacity:.92}
  .cast-figure .track-name{opacity:1;transform:none}
  .cast-hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .cast-figure img,.cast-figure .shot::before,.cast-figure .track-name{transition:none}
}

/* ============================================================
   STORY / bandes narratives a deux calques en parallaxe
   Le personnage occupe deux tiers du cadre, le texte le tiers
   laisse sombre : a gauche pour `.story--right`, a droite pour
   `.story--left`. Meme mecanique que la section intro, avec des
   sens opposes entre le fond et la silhouette.
   ============================================================ */
.story{position:relative;isolation:isolate;overflow:hidden;
  min-height:min(88vh,820px);display:flex;align-items:center;
  padding-block:clamp(3.5rem,8vw,6rem)}
.story-scene{position:absolute;inset:0;z-index:0;pointer-events:none}
.story-layer{position:absolute;will-change:transform}
.story-layer img{display:block;max-width:none}

/* le fond couvre tout, avec de la marge verticale pour la course de parallaxe */
.story-layer--bg{inset:-16% 0;width:100%}
.story-layer--bg img{width:100%;height:100%;object-fit:cover}
/* la silhouette, ancree en bas, debordant sous le cadre */
.story-layer--figure{bottom:-18%;top:auto;height:min(116%,1040px);width:auto}
.story-layer--figure img{width:auto;height:100%}

/* cote du personnage selon la variante */
.story--left  .story-layer--figure{left:-2%;right:auto}
.story--right .story-layer--figure{right:-2%;left:auto}
/* on assombrit le tiers oppose pour poser le texte dessus */
.story-scene::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.story--left  .story-scene::after{background:linear-gradient(90deg,transparent 30%,rgba(6,19,33,.55) 52%,rgba(6,19,33,.92) 72%)}
.story--right .story-scene::after{background:linear-gradient(270deg,transparent 30%,rgba(6,19,33,.55) 52%,rgba(6,19,33,.92) 72%)}

.story-grid{position:relative;z-index:2;width:100%;display:grid}
@media(min-width:900px){
  .story--left  .story-grid{grid-template-columns:52% 48%}
  .story--right .story-grid{grid-template-columns:48% 52%}
  .story--left  .story-copy{grid-column:2}
  .story--right .story-copy{grid-column:1}
}
.story-copy{max-width:46ch}
.story-copy h2{font-size:clamp(1.7rem,3.6vw,2.7rem)}
.story-copy .rule{margin-inline:0}
.story-copy p{color:var(--fg-soft);font-size:.95rem}
.story-copy .cta-row{margin-top:1.6rem}

/* petit ecran : le visuel devient une banniere au-dessus du texte, sans parallaxe */
@media(max-width:899px){
  .story{display:block;min-height:0;overflow:visible}
  .story-scene{position:relative;inset:auto;height:auto;aspect-ratio:4/3;
    border-radius:var(--radius);overflow:hidden;background:var(--visual-empty);
    width:min(100% - 2*var(--gutter),560px);margin:0 auto clamp(1.8rem,5vw,2.5rem)}
  .story-layer{transform:none!important}
  .story-layer--bg{inset:0;width:100%;height:100%}
  .story-layer--figure{height:96%;bottom:0}
  .story--left .story-layer--figure{left:0}
  .story--right .story-layer--figure{right:0}
  .story-scene::after{background:none!important}
  .story-copy{max-width:none;text-align:center}
  .story-copy .rule{margin-inline:auto}
  .story-copy .cta-row{justify-content:center}
}
@media (prefers-reduced-motion:reduce){.story-layer{transform:none!important}}

/* slide image fixe : zoom tres lent pour garder la vie du hero sans video */
.slide-media--still{overflow:hidden}
.slide-media--still img{object-position:center 40%;transform-origin:55% 45%}
.slide.is-active .slide-media--still img{animation:stillzoom calc(var(--slide-duration,10s) + 2s) ease-out forwards}
@keyframes stillzoom{from{transform:scale(1)}to{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.slide.is-active .slide-media--still img{animation:none}}

/* une seule slide : pas de compteur, pas de barre de progression, pas d'indice de scroll sur l'image */
.hero--single .slide-count,.hero--single .slide-nav,.hero--single .scroll-hint{display:none}
/* titre dans le ciel, en haut a gauche, sous la date : les trois personnages restent visibles */
.slide--copy-top .slide-copy{top:calc(4.6rem + 2vh + clamp(4.2rem,7vh,5.6rem));bottom:auto;max-width:min(46vw,680px)}
.slide--copy-top .hero-title{font-size:clamp(2rem,3.5vw,3.7rem);line-height:.98;text-shadow:0 2px 24px rgba(4,10,24,.45)}
.slide--copy-top .hero-sub{margin-top:1rem;text-shadow:0 1px 12px rgba(4,10,24,.6)}
/* ecrans moins larges que 16:10 : l'image est rognee sur les cotes, le trio se resserre -> titre plus petit */
@media(min-width:721px) and (max-aspect-ratio:16/10){.slide--copy-top .hero-title{font-size:clamp(1.8rem,2.9vw,3rem)}.slide--copy-top .slide-copy{max-width:36vw}.slide--copy-top .hero-sub{white-space:nowrap}}
@media(max-width:720px){
  .slide-media--still img{object-position:30% 40%}
  .slide--copy-top .slide-copy{top:auto;bottom:clamp(2.5rem,6vh,4rem);max-width:92vw}
  .slide--copy-top .hero-title{font-size:clamp(1.8rem,8vw,2.4rem)}
  .slide--copy-top .hero-sub{letter-spacing:.18em;font-size:.72rem}
}