/* ============================================================
   SWOAK — Press Kit — style.css  (rebuild V9)
   ============================================================ */

/* ── FONTS ── */
@font-face {
  font-family: 'Nersans';
  src: url('fonts/nersans.woff') format('woff');
  font-weight: normal;
  font-style:  normal;
  font-display: swap;
}
@font-face {
  font-family: 'Akkurat';
  src: url('fonts/akkurat.woff') format('woff');
  font-weight: normal;
  font-style:  normal;
  font-display: swap;
}

/* ── DESIGN SYSTEM — TOKENS ──
   Source unique de vérité, chargée par TOUTES les pages (index, release,
   download, 404, tempo) via style.css → union complète du design.
   Migration terminée : plus aucun alias, tout passe par les tokens ci-dessous. */
:root {
  /* ── Couleur ── */
  --bg:            #0a0a0a;
  --bg-elevated:   #141414;                     /* carte opaque (mobile, sans blur) */
  --bg-card:       rgba(255, 255, 255, 0.03);   /* carte translucide (desktop) */
  --bg-veil:       rgba(10, 10, 10, 0.85);      /* voile noir sur la photo de fond (body) — monter = plus sombre */
  --text:          #f0ede6;                      /* 16.9:1 — titres, texte fort */
  --text-2:        rgba(240, 237, 230, 0.72);    /* 8.6:1  — corps de lecture */
  --text-3:        rgba(240, 237, 230, 0.60);    /* 6.3:1  — PLANCHER texte signifiant */
  --text-mute:     rgba(240, 237, 230, 0.42);    /* 3.5:1  — décoratif uniquement */
  --accent:        #f0ede6;                      /* l'interface reste monochrome ; la couleur vient des images */
  --accent-ink:    #0a0a0a;                      /* texte sur fond accent */
  --line:          rgba(240, 237, 230, 0.10);
  --line-strong:   rgba(240, 237, 230, 0.22);
  --focus:         #f0ede6;
  --press-mouv:    #58f3aa;

  /* ── Typographie ── */
  --font-display:  'Nersans', serif;
  --font-body:     'Akkurat', 'Helvetica Neue', Arial, sans-serif;
  --fs-display:    clamp(52px, 13vw, 180px);
  --fs-h1:         clamp(28px, 4.5vw, 52px);
  --fs-h2:         clamp(19px, 2.4vw, 30px);
  --fs-lead:       17px;
  --fs-body:       15px;
  --fs-sm:         13px;
  --fs-label:      11px;
  --measure:       66ch;                         /* largeur max de lecture */
  --lh-tight:      1.1;
  --lh-body:       1.6;
  --lh-lead:       1.7;

  /* ── Espacement (base 8) ── */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;
  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;  --sp-9: 80px;
  --card-pad: var(--sp-5);

  /* ── Rayons ── */
  --r-sm: 4px;  --r-md: 8px;  --r-lg: 12px;  --r-pill: 999px;

  /* ── Mouvement ── */
  --dur-fast: .15s;  --dur-mid: .3s;  --dur-slow: .7s;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: ease-in-out;
  /* Rideau d'ouverture : durée et courbe propres (mouvement long, entrée
     ET sortie appuyées — c'est un rideau de scène, pas une transition
     d'interface). Tokenisés ici plutôt qu'écrits en dur dans le composant. */
  --dur-curtain: .55s;
  --ease-curtain: cubic-bezier(.65, 0, .35, 1);

  /* ── Surfaces cartes — recette « glass » UNIQUE (source de vérité) ──
     Ces valeurs = le rendu actuel exact, centralisé ici au lieu d'être
     copié dans ~26 composants. Le repli opaque mobile vit dans la media
     query PERFORMANCE. (--bg-card ci-dessus reste la cible théorique ;
     --glass-* décrit la recette réellement utilisée aujourd'hui.) */
  --glass-bg:          #0d0d0d;
  --glass-blur:        none;
  --glass-bg-hover:    #121212;
  --glass-solid:       #0d0d0d;
  --glass-solid-hover: #121212;
  --accent-wash:       rgba(240, 237, 230, 0.045);

  /* ── Layout ── */
  --nav-h:            72px;
  --max:              1400px;
  --pad:              40px;
}

/* ── SKIP TO CONTENT (accessibilité clavier) ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 20px;
  z-index: 9999;
  background: var(--accent);
  color: var(--bg);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-label);
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  font-family: inherit;
  transition: top .15s;
}
.skip-link:focus { top: 20px; }

/* ── RESET ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* offset ancres pour compenser la nav fixe */
  scroll-padding-top: calc(var(--nav-h) + 24px);
  /* Fond sombre pour le overscroll bounce Safari (iOS/macOS) */
  background-color: #0a0a0a;
  /* Site 100% vertical : coupe le geste "swipe 2 doigts = page précédente/
     suivante" du navigateur (et le rebond horizontal), pour ne jamais
     laisser un geste horizontal (trackpad, glisser une pill…) déclencher
     une navigation involontaire hors du site. */
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

body {
  background: #080808;
  color:       var(--text);
  font-family: 'Akkurat', sans-serif;
  font-size:   var(--fs-body);
  font-weight: 300;
  letter-spacing: 0.04em;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

/* PERF MOBILE — variante allégée du fond de page (audit 08/2026, SEO-04).
   hero-bg.jpg fait 2560×1440 / 588 Ko et, comme c'est une image de fond CSS,
   elle n'est découverte qu'après l'analyse du CSS et ne peut être ni
   préchargée ni prioritisée. Sur un mobile qui arrive d'une story, ce sont
   ~0,4 s de téléchargement pour une image ensuite recouverte d'un voile à
   85 % d'opacité.

   ⚠️ hero-bg-mobile.jpg n'est PAS une recompression du gros fichier — le
   design system §10.2 l'interdit, ça réintroduirait le banding. C'est un
   rééchantillonnage Lanczos en 1280×720 suivi d'une réinjection de grain
   (~1,5 LSB) puis d'un encodage qualité 94 en 4:4:4, c'est-à-dire la même
   méthode que gen_bg. Mesure du palier moyen sur dégradé : 1,36 px contre
   1,19 px pour l'original — pas de bande visible en plus. 148 Ko au lieu
   de 588 Ko, soit ~440 Ko économisés au premier chargement mobile. */
@media (max-width: 900px) {
  body {
    background: #080808;
    background-image: none;
  }
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

/* ── ACCESSIBILITÉ : focus visible ──
   Règle générale : tout élément interactif atteint au clavier reçoit un
   liseré accent. :focus-visible ne se déclenche PAS à la souris, donc le
   rendu reste identique pour la navigation au pointeur.
   La spécificité (0,1,1) l'emporte sur les `outline:none` de classe (0,1,0)
   déclarés dans downloads.css, même si ce fichier est chargé après. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
details:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Curseurs du lecteur audio : l'outline colle au rail, on l'écarte un peu */
input[type="range"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}

/* Neutralise le contour uniquement pour le pointeur */
:focus:not(:focus-visible) { outline: none; }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:      0.01ms !important;
    scroll-behavior:          auto   !important;
  }
  /* Force la visibilité des éléments animés */
  .hero-tag, .hero-name, .hero-sub, .hero-photo, .hero-year,
  .nav-logo, .nav-links a, .nav-lang button, .reveal {
    opacity:   1 !important;
    transform: none !important;
  }
  /* Pas de rideau d'ouverture ni de halo animé : ça ne montrerait rien
     qu'un flash sans les transitions qui l'adoucissent. */
  #intro-overlay { display: none !important; }
  #ambient-glow  { display: none !important; }
}

/* ── RIDEAU D'OUVERTURE ──
   Le nom se resserre depuis des lettres écartées (tracking-in, signature
   des reveals de wordmark premium), un trait signature se dessine dessous,
   puis le rideau se SOULÈVE (translateY, pas un fondu) comme un vrai
   rideau de scène — le hero est déjà en train de s'animer dessous.
   Retiré du DOM par js/intro.js une fois le mouvement terminé.

   ⚠️ DEUX GARDE-FOUS, ne pas les retirer (audit 08/2026, UX-01) :

   1. L'affichage est conditionné à la classe .js posée sur <html> par
      le script inline du <head> — même principe que .reveal plus bas.
      Sans ce conditionnement, un visiteur sans JS (ou avec un bloqueur
      agressif) voyait un calque noir opaque plein écran que RIEN ne
      venait jamais lever : le site entier était un écran noir, sur
      index, release, dashboard, tempo et download.

   2. L'animation intro-failsafe lève le rideau toute seule au bout de
      2,4 s. Elle couvre le cas « JS chargé mais js/intro.js n'a pas pu
      s'exécuter » : le CSS seul suffit alors à débloquer la page.
      Quand intro.js fonctionne normalement, il pose .intro-hide bien
      avant et c'est lui qui pilote — le filet ne se voit pas. */
html:not(.js) #intro-overlay { display: none !important; }

#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  will-change: transform;
  transition: transform var(--dur-curtain) var(--ease-curtain);
  animation: intro-failsafe 0s linear 2.4s forwards;   /* filet CSS */
}
#intro-overlay.intro-hide {
  transform: translateY(-100%);
  pointer-events: none;
}
@keyframes intro-failsafe {
  to { transform: translateY(-100%); pointer-events: none; }
}
.intro-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.intro-logo {
  font-family: 'Nersans', serif;
  font-size: clamp(28px, 5vw, 44px);
  color: var(--text);
  opacity: 0;
  letter-spacing: .5em;
  transform: scale(.97);
  animation: introLogoIn .9s cubic-bezier(.16, 1, .3, 1) .1s forwards;
}
/* Variante de nav-logo (Dashboard, Release, Links…) reprise dans le rideau
   des sous-pages — même recette visuelle que .nav-logo-sub, pour rester
   cohérent avec la nav qui apparaît juste après. */
.intro-sub {
  font-family: 'Akkurat', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 400;
  vertical-align: middle;
}
.intro-line {
  width: 64px;
  height: 1px;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(0);
  animation: introLineIn .5s ease .7s forwards;
}
@keyframes introLogoIn {
  to { opacity: 1; letter-spacing: .14em; transform: scale(1); }
}
@keyframes introLineIn {
  to { opacity: 1; transform: scaleX(1); }
}

/* ── HALO D'AMBIANCE ──
   Calé sur le scroll (script.js) : intensité en courbe calme → pic → calme,
   façon montée puis retombée d'un set, plutôt qu'une teinte figée. Purement
   décoratif (aria-hidden, pointer-events:none), z-index négatif pour
   rester systématiquement derrière le contenu — jamais sur le texte. */
#ambient-glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 45% at 50% var(--glow-y, 10%),
              color-mix(in srgb, var(--accent) 16%, transparent) 0%,
              transparent 70%);
  opacity: var(--glow-o, 0);
}




/* ═══════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════ */
#main-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad);
  background: transparent;
  transition: background .3s ease, backdrop-filter .3s ease, box-shadow .3s ease;
}
#main-nav.scrolled {
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 4px 24px rgba(0,0,0,.55);
}

.nav-logo {
  font-family: 'Nersans', serif;
  font-size: 30px;
  letter-spacing: .10em;
  text-decoration: none;
  color: var(--text);
  line-height: 1;
  opacity: 0;
  animation: fadeUp .8s ease .15s forwards;
  transition: color .2s, font-size .3s ease;
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.nav-logo-sub {
  font-family: 'Akkurat', 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--fs-label);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 400;
  transition: color .2s;
}
.nav-logo:hover .nav-logo-sub { color: var(--accent); }
#main-nav.menu-open .nav-logo { font-size: var(--fs-sm); }
.nav-logo:hover { color: var(--accent); }

/* Nav links list */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
}
.nav-links > li > a {
  display: inline-block;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-label);
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  border-radius: var(--r-sm);
  opacity: 0;
  animation: fadeUp .8s ease .35s forwards;
  transition: color .2s, background .2s;
}
.nav-links > li > a:hover {
  color: var(--accent);
  background: rgba(240,237,230,.04);
}

/* CTA nav — bouton plein doré vers les edits/remixes (page /download).
   Se distingue des ancres de section : c'est une action + une autre page. */
.nav-links > li > a.nav-cta {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid transparent;   /* même boîte que le bouton FR/EN (bord 1px) → hauteurs identiques */
  background: var(--accent);
  color: var(--accent-ink);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-links > li > a.nav-cta:hover {
  background: var(--text);        /* crème au survol, même logique que les boutons de download */
  color: var(--accent-ink);
}

/* Variante secondaire « ghost » : contour doré, fond transparent.
   Sert à hiérarchiser quand deux CTA cohabitent (ex. STREAM NOW plein +
   Edits & Remixes en contour). Se remplit en accent au survol. */
.nav-links > li > a.nav-cta.nav-cta--ghost {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}
.nav-links > li > a.nav-cta.nav-cta--ghost:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

/* Toggle langue — volontairement NEUTRE (gris), pas doré : ce n'est pas un
   CTA d'action comme STREAM NOW / EDITS & REMIXES, juste un réglage, donc
   il ne doit pas se battre avec eux pour l'attention. */
.nav-lang button {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text-3);
  font-family: inherit;
  font-size: var(--fs-label);
  letter-spacing: .15em;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  cursor: pointer;
  display: flex;
  gap: var(--sp-1);
  align-items: center;
  transition: border-color .2s, color .2s;
  /* Même entrée fadeUp que les autres liens de nav au chargement */
  opacity: 0;
  animation: fadeUp .8s ease .35s forwards;
}
.nav-lang button:hover { border-color: var(--text-3); color: var(--text); }
.nav-lang .lang-sep    { color: var(--text-mute); }
.nav-lang [data-lang].active { color: var(--text); }

/* Backdrop menu mobile */
#nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .3s ease;
}
#nav-backdrop.active {
  display: block;
  opacity: 1;
}

/* Burger (mobile) */
.nav-burger {
  display: none;
  flex-direction: column;
  gap: var(--sp-1);
  background: transparent;
  border: 0;
  padding: var(--sp-2);
  cursor: pointer;
  z-index: 201;
}
.nav-burger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--text);
  transition: transform .25s, opacity .25s;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }


/* ═══════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════ */
#hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--nav-h) + var(--sp-7)) var(--pad) var(--sp-9);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

#hero::before {
  content: '';
  position: absolute;
  inset: -6px;
  background: inherit;
  filter: blur(2px);
  z-index: 0;
}


#hero > * {
  position: relative;
  z-index: 1;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-7);
  align-items: end;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
}

.hero-text { max-width: 720px; }

.hero-tag {
  font-size: var(--fs-label);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-5);
  opacity: 0;
  animation: fadeUp .9s ease .5s forwards;
}

.hero-name {
  font-family: 'Nersans', serif;
  font-size: clamp(72px, 13vw, 180px);
  line-height: .88;
  letter-spacing: -.01em;
  opacity: 0;
  animation: fadeUp 1s ease .3s forwards;
  position: relative;
}
/* Signature typographique : guillemets courbes encadrant le grand titre.
   Marques décoratives en accent, masquées sur petit écran (place restreinte). */
.hero-name::before,
.hero-name::after {
  color: var(--accent);
  font-size: .34em;
  font-weight: normal;
  line-height: 0;
  vertical-align: .7em;
}
.hero-name::before { content: '\201C'; margin-right: .04em; }
.hero-name::after  { content: '\201D'; margin-left: .04em; }
@media (max-width: 640px) {
  .hero-name::before,
  .hero-name::after { display: none; }
}

.hero-sub {
  margin-top: var(--sp-6);
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--text-3);
  max-width: 380px;
  opacity: 0;
  animation: fadeUp .9s ease .7s forwards;
}

.hero-photo {
  aspect-ratio: 4/5;
  overflow: hidden;
  opacity: 0;
  animation: fadeIn 1.2s ease .4s forwards;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%,  #000 45%,  #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%,  #000 8%,   #000 88%, transparent 100%);
          mask-image:
    linear-gradient(to right,  transparent 0%,  #000 45%,  #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%,  #000 8%,   #000 88%, transparent 100%);
  -webkit-mask-composite: destination-in;
          mask-composite: intersect;
}
.hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: right center;
  filter: contrast(1.05) saturate(.9);
}

.hero-year {
  position: absolute;
  right: calc(var(--pad) - 8px);
  bottom: 80px;
  font-size: var(--fs-label);
  letter-spacing: .2em;
  color: var(--text-mute);
  writing-mode: vertical-rl;
  opacity: 0;
  animation: fadeUp .9s ease 1s forwards;
}


/* Bloque le scroll horizontal de la page sans casser le carousel interne */
#main-content { overflow-x: clip; }

/* ═══════════════════════════════════════════════
   SECTIONS — base commune
═══════════════════════════════════════════════ */
section {
  padding: var(--sp-9) var(--pad);
  border-bottom: 1px solid var(--line);
}

/* Centrage des contenus sur grands écrans */
.section-header,
#refs-container,
.rider-intro,
.rider-grid {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}

.section-header {
  display: flex;
  align-items: baseline;
  gap: var(--sp-5);
  margin-bottom: var(--sp-7);
}
.section-num {
  font-size: var(--fs-label);
  letter-spacing: .2em;
  color: var(--accent);
  flex-shrink: 0;
}
.section-title {
  font-family: 'Nersans', serif;
  font-size: clamp(28px, 4.5vw, 52px);
  letter-spacing: -.01em;
  line-height: 1;
  font-weight: normal;
}
.section-line {
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Toggle vue défilante / vue liste — contour + texte accent dès l'état
   repos (pas juste au hover) pour que ce ne soit pas une option cachée :
   même poids visuel que le CTA de nav, posé après la ligne. */
.refs-view-toggle {
  flex: 0 0 auto;
  background: var(--accent-wash);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: 'Akkurat', sans-serif;
  font-size: var(--fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.refs-view-toggle:hover,
.refs-view-toggle[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}
.refs-view-toggle-label { font-weight: 700; }
.refs-view-toggle-sub {
  font-size: .85em;
  letter-spacing: .05em;
  text-transform: none;
  opacity: .75;
}

/* ═══════════════════════════════════════════════
   BIO
═══════════════════════════════════════════════ */
/* Contre-appel du hero : photo à GAUCHE, texte à DROITE (le hero a la photo
   à droite → rythme alterné en descendant la page). */
.bio-grid {
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;   /* photo | texte (texte plus large) */
  gap: var(--sp-7);
  align-items: center;
}
.bio-photo {
  aspect-ratio: 4/5;
  overflow: hidden;
  /* Même fondu doux que la photo du hero → cohérence visuelle */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, #000 12%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 8%,  #000 90%, transparent 100%);
          mask-image:
    linear-gradient(to right,  transparent 0%, #000 12%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 8%,  #000 90%, transparent 100%);
  -webkit-mask-composite: destination-in;
          mask-composite: intersect;
}
.bio-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(.9);
}
#bio-text { min-width: 0; }
.bio-text p {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--text-2);
  margin-bottom: var(--sp-6);
  /* Mesure de lecture : ~66 caractères max, sinon lignes de 180 car. sur desktop */
  max-width: var(--measure);
}
.bio-text p:last-child { margin-bottom: 0; }
.bio-text p strong       { color: var(--text); font-weight: 700; }
.bio-text p strong.key   { color: var(--text); font-weight: 900; }
.bio-text p em           { color: var(--text); font-style: italic; }
.bio-swoak { font-family: 'Nersans', serif; letter-spacing: 0.08em; }


/* ═══════════════════════════════════════════════
   RÉFÉRENCES
═══════════════════════════════════════════════ */
#refs-container {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}
.refs-section { min-width: 0; }

/* ── SOCLE CARTE — recette glass unique, partagée ──
   refs-pill / rider-card / contact-item posent ici leur fond glass +
   transition. */
.refs-pill,
.rider-card,
.contact-item {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              outline-color var(--dur-fast) var(--ease);
}
.refs-pill:hover,
.rider-card:hover,
.contact-item:hover { background: var(--glass-bg-hover); }

/* ── Bannière de catégorie — le nom répété en continu ──
   Sert de séparateur fort entre catégories (au lieu d'un petit label discret
   qui se perdait). Statique (pas de défilement) : overflow:hidden coupe
   proprement la répétition, quelle que soit la largeur d'écran. */
.refs-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0 var(--sp-4);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.refs-banner-icon { font-size: 18px; flex: 0 0 auto; letter-spacing: 0; }
.refs-banner-track {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  white-space: nowrap;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 88%, transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 88%, transparent 100%);
}
.refs-banner-word {
  font-family: 'Nersans', serif;
  font-size: var(--fs-h2);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--accent);
  flex: 0 0 auto;
}
.refs-banner-dot {
  font-size: var(--fs-h2);
  color: var(--line-strong);
  flex: 0 0 auto;
}

/* ── 2 rangées de pills contre-défilantes (mobile, International/Clubs
   France) ── Construit par script.js (isMobileRefs) à la place d'une seule
   .refs-marquee : ici juste l'espacement entre les 2 rangées empilées,
   chaque rangée réutilise .refs-marquee tel quel. */
.refs-marquee-dual {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* ── Bandeau défilant en continu ──
   Boucle infinie pilotée en JS (voir script.js `setupMarquee`) : le track
   contient le contenu deux fois (copie dupliquée masquée à l'a11y), la
   position translateX est recalculée en px réels à chaque frame — pas de
   saut au survol (pause exacte), pas de trou en fin de cycle (arithmétique
   sur la largeur réelle, pas un pourcentage de keyframes CSS). Pause au
   survol/focus pour laisser cliquer sereinement. prefers-reduced-motion :
   pas de duplication ni d'animation (buildRefs) → scroll horizontal manuel. */
.refs-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.refs-marquee-track {
  display: flex;
  width: max-content;
  gap: var(--sp-3);
}
/* Chaque copie (originale / dupliquée) est un groupe flex à part entière —
   nécessaire pour que setupMarquee() mesure le point de bouclage exact via
   offsetLeft (scrollWidth/2 ignorait le `gap` entre les 2 copies → trou). */
.refs-marquee-group {
  display: flex;
  flex: 0 0 auto;
  gap: var(--sp-3);
}
/* Glisser à la main (souris/tactile, script.js pointerdown/move/up) —
   curseur "grab" en repos pour signaler que la ligne se manipule, "grabbing"
   pendant le geste. touch-action:pan-y laisse le scroll vertical de la page
   passer normalement, seul le geste horizontal est intercepté pour glisser. */
.refs-marquee--drag {
  cursor: grab;
  touch-action: pan-y;
  /* En permanence, pas juste pendant .is-dragging : le navigateur amorce
     la sélection de texte dès le mousedown, avant que le JS n'ait la main
     pour ajouter une classe — trop tard pour bloquer la sélection à ce
     moment-là. Ces pills sont des puces à cliquer/glisser, pas du texte à
     sélectionner, donc autant le désactiver d'entrée. */
  -webkit-user-select: none;
          user-select: none;
}
.refs-marquee--drag.is-dragging {
  cursor: grabbing;
}
/* Icône pause — invisible par défaut, apparaît au survol/focus pour
   signaler clairement que le défilement va se figer (sans dépendre du
   fait qu'on le devine tout seul). */
.refs-marquee-hint {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--glass-solid);
  color: var(--accent);
  font-size: 9px;
  letter-spacing: 1px;
  opacity: 0;
  transform: scale(.85);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.refs-marquee:hover .refs-marquee-hint,
.refs-marquee:focus-within .refs-marquee-hint {
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .refs-marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none;
            mask-image: none;
    padding-bottom: var(--sp-2);
  }
}

/* ── Vue liste — tout voir d'un coup, sans attendre le défilement ──
   Activée via #refs-view-toggle (script.js setRefsView). Même contenu DOM,
   juste débridé : le track passe en wrap statique et les copies dupliquées
   (là pour la boucle infinie, aria-hidden) sont masquées pour ne pas
   doubler chaque item à l'écran. */
.refs-static-view .refs-marquee {
  overflow: visible;
  -webkit-mask-image: none;
          mask-image: none;
}
.refs-static-view .refs-marquee-track {
  width: 100%;
  transform: none !important;
}
/* Le track n'a qu'1 seul enfant visible (les copies dupliquées sont
   masquées juste en dessous) : c'est CE groupe-là qui doit wrapper ses
   pills sur plusieurs lignes, pas le track — sinon "wrap" n'a rien à
   répartir puisqu'il ne voit qu'un item unique, trop large. */
.refs-static-view .refs-marquee-group {
  flex-wrap: wrap;
  width: 100%;
}
.refs-static-view .refs-marquee-group[aria-hidden="true"] { display: none; }
.refs-static-view .refs-marquee-hint { display: none; } /* rien à figer en vue liste */
.refs-static-view .refs-marquee--drag { cursor: default; touch-action: auto; } /* rien à glisser non plus */
/* Largeur uniforme en vue liste : le défilement garde des pills à largeur
   libre (rythme organique), mais une fois tout affiché d'un coup, une
   grille alignée se scanne bien mieux que des blocs de tailles éparses.
   Le texte passe en retour à la ligne (au lieu de nowrap) pour tenir dans
   cette largeur fixe sans être coupé. */
.refs-static-view .refs-pill {
  flex: 0 0 232px;
  white-space: normal;
}

/* ── Ligne "split" (Premières parties | Événements officiels) ──
   Les 2 catégories les moins mises en avant de la hiérarchie partagent une
   seule ligne coupée en deux plutôt que 2 lignes pleine largeur. Le TITRE
   reprend exactement le même traitement que les tiers 1/2 (bannière répétée
   via buildCategoryBanner) — pas de raison qu'il soit différent, la
   cohérence visuelle prime. La hiérarchie se joue plus bas : pills FIXES
   (pas de marquee, ce tier reste discret) + voile doré dégressif. */
.refs-split {
  display: flex;
  align-items: flex-start;
}
/* Chaque moitié se dimensionne sur SON contenu, pas un 50/50 rigide : les 2
   catégories n'ont ni le même nombre de pills ni la même longueur de texte
   (ex. "Fête de la Musique" est bien plus large qu'un nom d'artiste seul).
   grow:0 → aucune des 2 ne gonfle au-delà de son propre contenu (sinon
   Premières parties s'étire pour "remplir" et laisse un vide avant le
   séparateur). shrink:1 SYMÉTRIQUE sur les 2 côtés → si ça déborde quand
   même, les 2 se compressent PROPORTIONNELLEMENT à leur propre taille, donc
   Événements officiels (contenu plus large) absorbe naturellement plus de
   compression que Premières parties, sans que l'un des deux soit rigide à
   100% (ce qui écrasait l'autre à rien dès que ça manquait de place — testé
   et à éviter). Le nombre de répétitions de la bannière est réduit côté JS
   pour cette ligne (buildCategoryBanner(cat, label, 5)) : sans ça, les 14
   répétitions par défaut (masquées mais quand même comptées) donnaient aux
   2 moitiés une taille intrinsèque énorme et faussaient tout ce calcul. */
.refs-split-half {
  flex: 0 1 auto;
  min-width: 0;
}
/* Séparateur — un vrai élément entre les 2 moitiés plutôt qu'un ::before
   planté à 50% fixe, qui se serait retrouvé mal placé dès que les largeurs
   ne sont plus symétriques. */
.refs-split-sep {
  align-self: stretch;
  width: 1px;
  margin: 2px var(--sp-6);
  background: var(--line-strong);
  flex: 0 0 auto;
}

/* Pills statiques, resserrées un cran (padding + gap du variant mobile,
   déjà dans l'échelle) — même esprit que le passage automatique à
   --fs-sm/--fs-body sur mobile, juste appliqué ici dès le desktop.
   Réduire juste la taille ne GARANTIT rien (le nombre d'items peut changer
   avec les données) : sur desktop, la ligne ne wrap plus jamais — chaque
   pill peut se compresser (et si vraiment à l'étroit, tronquer avec une
   ellipse) plutôt que de renvoyer un item sur une 2e ligne. Repasse en wrap
   normal sur mobile (voir RESPONSIVE 640px), où les moitiés passent en
   pleine largeur et ont largement la place. */
.refs-split-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--sp-2);
  min-width: 0;
}
.refs-split-pills .refs-pill {
  padding: var(--sp-2) var(--sp-4);
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}
.refs-split-pills .refs-pill-venue,
.refs-split-pills .refs-pill-meta {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Sélecteur renforcé (3 classes) pour battre .refs-pill--feature
   .refs-pill-venue (2 classes) quel que soit l'ordre des règles dans le
   fichier — cette ligne doit rester plus compacte que les tiers 1/2. */
.refs-split-pills .refs-pill-venue,
.refs-split-pills .refs-pill--feature .refs-pill-venue {
  font-size: var(--fs-sm);
}
/* Titre légèrement réduit lui aussi (un cran dans l'échelle existante,
   --fs-h2 → --fs-lead), pour rester proportionné à des pills plus
   compactes sans rompre la cohérence avec International/Clubs France
   (même famille, juste un cran en dessous). */
.refs-split-half .refs-banner-word,
.refs-split-half .refs-banner-dot {
  font-size: var(--fs-lead);
}

.refs-pill {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}
/* ── Hiérarchie des 4 tiers de références : dégradé doré → normal ──
   International (le plus mis en avant) → France → Premières parties →
   Événements officiels (le plus neutre = le socle carte partagé, sans
   override ici). Chaque cran descend le voile doré et la force du bord ;
   Événements officiels n'a donc AUCUNE règle dédiée, il reste au plancher
   (--glass-bg / --line du socle carte). */
.refs-pill--intl {
  padding-right: calc(var(--sp-5) + 16px);
  border-color: var(--line-strong);
  background: linear-gradient(rgba(200, 184, 154, .09), rgba(200, 184, 154, .09)), var(--glass-bg);
}
.refs-pill--intl .refs-pill-venue { font-weight: 700; }
.refs-pill--fr {
  border-color: rgba(240, 237, 230, .16);
  background: linear-gradient(rgba(200, 184, 154, .045), rgba(200, 184, 154, .045)), var(--glass-bg);
}
/* France (tier 2) : meta un cran plus clair que le défaut (--text-3), pour
   se distinguer du tier 4 (Événements officiels) qui reste au plancher. */
.refs-pill--fr .refs-pill-meta { color: var(--text-2); }
.refs-pill--feature {
  border-color: rgba(240, 237, 230, .13);
  background: linear-gradient(rgba(200, 184, 154, .02), rgba(200, 184, 154, .02)), var(--glass-bg);
}
/* Pill cliquable : même besoin d'air à droite pour la flèche dans le coin
   (voir .refs-pill-link-icon) — priorité naturelle sur .refs-pill--intl
   grâce au sélecteur d'élément, les deux badges se partagent la place. */
a.refs-pill { padding-right: calc(var(--sp-5) + 16px); }
a.refs-pill:hover { border-color: var(--accent); }
a.refs-pill:hover .refs-pill-venue { color: var(--accent); }
/* Chevron discret, coin bas-droit (le drapeau garde le coin haut-droit) —
   même signe que celui du rider (.rider-toggle), seul indice visuel qu'une
   pill est cliquable avant même de la survoler, essentiel au tactile où
   il n'y a pas de :hover. */
.refs-pill-link-icon {
  position: absolute;
  bottom: 6px;
  right: var(--sp-3);
  font-size: 18px;
  line-height: 1;
  color: var(--text-mute);
  transition: color var(--dur-fast) var(--ease);
}
a.refs-pill:hover .refs-pill-link-icon { color: var(--accent); }
.refs-pill-venue {
  font-family: 'Nersans', serif;
  font-size: var(--fs-body);
  transition: color var(--dur-fast) var(--ease);
}
/* Premières parties : nom d'artiste très légèrement au-dessus du corps
   courant, mais volontairement discret — International/France restent les
   catégories mises en avant dans la hiérarchie, celle-ci ne doit pas leur
   faire concurrence à l'œil (ex --fs-h2, bien trop épais). */
.refs-pill--feature .refs-pill-venue { font-size: var(--fs-lead); }
.refs-pill-meta {
  font-family: 'Akkurat', sans-serif;
  font-size: var(--fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}
/* International : le pays ressort (accent) et le drapeau devient un badge
   posé dans le coin de la pill — repère visuel immédiat sans polluer le
   texte, plutôt qu'inséré au fil de la ligne. */
.refs-pill-flag {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0;
}
.refs-pill-country {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: .06em;
}
/* Mot de liaison mis en retrait (ex. « Fête DE LA Musique ») : plus petit,
   pour raccourcir sans casser la lecture. Utilisé via item.venue_html. */
.v-minor { font-size: .72em; letter-spacing: .04em; white-space: nowrap; }

.contact-link {
  font-size: var(--fs-label);
  color: var(--text-3);
  text-decoration: none;
  margin-top: var(--sp-1);
  letter-spacing: .06em;
  transition: color .2s;
}
.contact-link:hover { color: var(--accent); }


/* ═══════════════════════════════════════════════
   AFTERMOVIES
═══════════════════════════════════════════════ */
/* Carousel horizontal — 1 ligne, scroll snap */
.media-grid {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  scrollbar-width: thin;
  scrollbar-color: rgba(200,184,154,.2) transparent;
}
.media-grid::-webkit-scrollbar { height: 4px; }
.media-grid::-webkit-scrollbar-track { background: transparent; }
.media-grid::-webkit-scrollbar-thumb { background: rgba(200,184,154,.2); border-radius: 2px; }

.aftermovie-card {
  flex: 0 0 min(270px, calc(100vw - 56px));
  scroll-snap-align: start;
  background: #0d0d0d;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease);
}
.aftermovie-card:hover { border-color: rgba(200,184,154,.4); }

.aftermovie-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
}
/* YouTube Shorts — ratio portrait 9:16, pleine largeur de la carte (270px) */
.aftermovie-embed--shorts {
  padding-top: 0;
  height: 480px;
  width: 100%;
}
.aftermovie-embed iframe,
.aftermovie-embed .embed-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Les iframes Shorts sont positionnées via la hauteur fixe */
.aftermovie-embed--shorts iframe {
  position: static;
  width: 100%;
  height: 100%;
}
/* Overlay pour empêcher l'iframe de capturer les events souris (curseur custom)
   Supprimé au clic pour laisser l'interaction avec la vidéo */
.iframe-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}

/* Poster-link pour la card Mouv dans le carousel */
.aftermovie-poster-link {
  display: block;
  overflow: hidden;
  text-decoration: none;
}
.aftermovie-poster-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease, opacity .3s;
}
.aftermovie-poster-link:hover img {
  transform: scale(1.03);
  opacity: .85;
}
.embed-poster {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
  cursor: pointer;
  border: 0;
}
.play-triangle {
  width: 52px; height: 52px;
  background: var(--accent);
  border-radius: 50%;
  position: relative;
  transition: transform .2s, background .2s;
}
.embed-poster:hover .play-triangle { transform: scale(1.08); background: var(--text); }
.play-triangle::before {
  content: '';
  position: absolute;
  top: 50%; left: 56%;
  transform: translate(-50%,-50%);
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--bg);
}

.aftermovie-meta { padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-1); }
.aftermovie-platform { font-size: var(--fs-label); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.aftermovie-name { font-family: 'Nersans', serif; font-size: var(--fs-lead); }
.aftermovie-detail { font-size: var(--fs-label); color: var(--text-3); }

/* Façade YouTube : vignette + play, l'iframe n'est injectée qu'au clic */
.aftermovie-facade {
  border: 0;
  padding: 0;
  cursor: pointer;
  display: block;
  width: 100%;
  background: #000;
}
.aftermovie-facade .facade-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .3s;
}
.aftermovie-facade .play-triangle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.aftermovie-facade:hover .facade-poster { opacity: .78; }
.aftermovie-facade:hover .play-triangle { transform: translate(-50%, -50%) scale(1.08); background: var(--text); }
.aftermovie-facade:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Carte mix sans poster : repli texte (au lieu d'un skip silencieux) */
.aftermovie-meta--solo { justify-content: center; min-height: 160px; gap: 8px; }


/* ═══════════════════════════════════════════════
   RIDER
═══════════════════════════════════════════════ */

/* — Accordion — */
.rider-details > summary {
  display: flex;           /* reprend le layout de .section-header */
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
  margin-bottom: 0;        /* géré par padding-top de .rider-body-inner à l'ouverture */
}
.rider-details > summary::-webkit-details-marker,
.rider-details > summary::marker { display: none; }

.rider-toggle {
  font-size: 20px;
  color: var(--accent);
  flex-shrink: 0;
  line-height: 1;
  transition: transform .35s ease;
}
.rider-details[open] .rider-toggle { transform: rotate(90deg); }
.rider-details > summary:hover .rider-toggle { color: var(--text); }

.rider-hint {
  font-size: var(--fs-label);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-3);
  flex-shrink: 0;
  transition: color .2s, opacity .2s;
}
.rider-details > summary:hover .rider-hint { color: var(--accent); }

.rider-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s ease;
}
.rider-details[open] .rider-body { grid-template-rows: 1fr; }

.rider-body-inner {
  overflow: hidden;
  min-height: 0;
  padding-top: 0;
  /* Marge latérale pour que l'outline gauche/droite du tableau ne soit pas
     rognée par overflow:hidden (l'outline est dessiné hors du bloc). */
  padding-left: 2px;
  padding-right: 2px;
  transition: padding-top .4s ease;
}
.rider-details[open] .rider-body-inner { padding-top: 48px; padding-bottom: 1px; }

/* — Contenu — */
.rider-intro {
  max-width: var(--max);
  margin: 0 auto var(--sp-7);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--text-3);
}
.rider-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  /* Renforce le contour extérieur : les traits internes se superposent
     (2× var(--line)) alors que le bord externe n'en a qu'un seul. */
  outline: 1px solid var(--line);
}
/* Fond glass + transition + hover : hérités du SOCLE CARTE partagé.
   Ici on ne garde que le layout et l'outline (grille jointive, gap:0). */
.rider-card {
  outline: 1px solid var(--line);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.rider-card--full { grid-column: 1 / -1; }

.rider-card-title {
  font-family: 'Nersans', serif;
  font-size: 19px;
  font-weight: normal;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.rider-card-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.rider-card-list li {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
  padding-left: var(--sp-4);
  position: relative;
}
.rider-card-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 1px;
  background: var(--accent);
}

/* ═══════════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════════ */
/* ── FOND CONTINU UNIQUE ──
   Les sections sont transparentes : elles laissent voir le SEUL fond du site,
   celui du <body> (hero-bg en cover + voile sombre). Plus d'image répétée par
   section → fond continu et cohérent, desktop comme mobile (fini les halos qui
   « resetaient » d'une catégorie à l'autre). On garde position/overflow pour ne
   rien décaler dans le layout existant. */
#contact,
#bio,
#references,
#media,
#rider {
  position: relative;
  overflow: hidden;
}
#contact > *,
#bio > *,
#references > *,
#media > *,
#rider > * {
  position: relative;
  z-index: 1;
}
.contact-grid {
  display: flex;
  flex-direction: row;
  gap: 0;
}
/* Fond glass + hover : hérités du SOCLE CARTE partagé.
   Ici : layout + outline fort (grille jointive) + accent d'outline au survol. */
.contact-item {
  flex: 1;
  min-width: 0;
  outline: 1px solid var(--line-strong);
  padding: var(--sp-6) var(--sp-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}
.contact-item:hover { outline-color: rgba(200,184,154,.25); }
a.contact-item { text-decoration: none; color: inherit; }
a.contact-item:hover .contact-icon { color: var(--accent); }
.contact-platform-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.contact-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  /* SVG en currentColor → blanc (--fg), doré au survol */
  color: var(--text);
  transition: color var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
/* Icônes PNG (noires) : filtre pour les rendre blanches, doré au survol */
img.contact-icon { filter: brightness(0) invert(1); }
a.contact-item:hover img.contact-icon {
  filter: invert(1) sepia(1) saturate(0.45) hue-rotate(350deg) brightness(0.95);
}
.contact-platform { display: none; }
.contact-val {
  font-size: var(--fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}


/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
footer {
  padding: var(--sp-7) var(--pad);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--line);
}
footer span,
footer a {
  font-size: var(--fs-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);            /* 1.7:1 → 6.3:1 : footer enfin lisible */
  text-decoration: none;
  transition: color .2s;
}
footer a:hover,
footer a:focus-visible { color: var(--accent); }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
}
.footer-sep { color: var(--text-mute); }


/* ═══════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes riderCardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.rider-details[open] .rider-card {
  animation: riderCardIn .35s ease both;
  animation-delay: calc(var(--i, 0) * 55ms);
}

/* Reveal au scroll
   IMPORTANT : l'état masqué est conditionné à la classe .js posée sur <html>
   par le script inline du <head>. Sans JS — ou si le JS plante — le contenu
   reste visible au lieu de disparaître définitivement. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}
.js .reveal.visible {
  opacity: 1;
  transform: none;
}

/* Message affiché si references.json ne se charge pas */
.load-error {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-3);
}
.load-error a {
  color: var(--accent);
  border-bottom: 1px solid rgba(200, 184, 154, .4);
  text-decoration: none;
}
.load-error a:hover { border-bottom-color: var(--accent); }

/* Anti-layout-shift : réserve un minimum d'espace tant que le contenu injecté
   par JS n'est pas là. `:empty` → la réserve disparaît une fois rempli (pas de vide). */
#bio-text:empty      { min-height: 180px; }
#refs-container:empty { min-height: 420px; }
#contact-grid:empty  { min-height: 110px; }


/* ═══════════════════════════════════════════════
   RESPONSIVE — 1100px
═══════════════════════════════════════════════ */
@media (max-width: 1100px) {
  :root { --pad: 32px; }

  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .hero-photo { aspect-ratio: 4/5; max-width: 100%; }

  /* Bio : même passage en colonne unique que le hero (photo puis texte) */
  .bio-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .bio-photo { max-width: 420px; }


  .nav-links > li > a { font-size: var(--fs-label); padding: 9px 10px; }
}


/* ═══════════════════════════════════════════════
   RESPONSIVE — 860px (burger menu)
═══════════════════════════════════════════════ */
@media (max-width: 860px) {
  .nav-burger { display: flex; }

  .nav-links {
    position: fixed;
    /* FIX menu bugué après scroll : quand #main-nav passe en .scrolled, son
       backdrop-filter en fait le bloc conteneur de ses enfants position:fixed.
       `bottom:0` se calculait alors contre la barre (72px) → panneau rabougri,
       fond opaque ne couvrant que le haut. On fixe la hauteur au viewport
       (dvh) : immunisé contre ce piège, quel que soit l'état de la nav. */
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    width: 80vw;
    max-width: 340px;
    z-index: 200;
    /* Même recette glass que la nav bar au scroll (#main-nav.scrolled) :
       fond translucide + blur, pour que le tiroir reste cohérent avec la
       barre au lieu d'un noir plat. Sans risque pour le fix ci-dessus : la
       hauteur reste fixée en dvh, donc immunisée contre le piège du
       containing-block même avec son propre backdrop-filter. */
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: calc(var(--nav-h) + var(--sp-4)) var(--sp-5) var(--sp-6);
    gap: 2px;
    transform: translateX(100%);
    transition: transform .3s ease;
    box-shadow: -8px 0 32px rgba(0,0,0,.6);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links.open { transform: translateX(0); }

  .nav-links > li > a {
    display: block;
    width: 100%;
    font-size: var(--fs-body);
    padding: var(--sp-4) var(--sp-3);
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    animation: none;
    opacity: 1;
  }
  /* CTA en burger : bouton doré centré.
     display/width réaffirmés ici : la règle desktop .nav-cta (inline-flex,
     hors media query) est plus spécifique que .nav-links > li > a seul et
     l'emporterait sinon → bouton en shrink-to-fit, texte long ("Edits &
     Remixes") tronqué au bord du tiroir.
     Pas de "border-bottom: none" ici : .nav-cta a déjà son propre bord
     4 côtés (transparent pour STREAM NOW, doré pour le ghost EDITS &
     REMIXES) — le forcer à none supprimait le bord bas du bouton ghost,
     qui semblait alors coupé/incomplet en bas. */
  .nav-links > li > a.nav-cta {
    display: block;
    width: 100%;
    border-radius: var(--r-sm);
    text-align: center;
    margin-top: var(--sp-3);
  }
  .nav-lang { margin-top: 14px; }
  .nav-lang button {
    width: 100%;
    justify-content: center;
    padding: 14px 12px;
    animation: none;              /* déjà affiché quand on ouvre le burger */
    opacity: 1;
    border-color: var(--line);    /* bord plus léger dans le burger → se fond avec la liste (pas de CTA doré à équilibrer ici) */
  }
}


/* ═══════════════════════════════════════════════
   RESPONSIVE — 640px
═══════════════════════════════════════════════ */
@media (max-width: 640px) {
  :root { --pad: 20px; }

  body { font-size: var(--fs-body); }

  .nav-logo { font-size: 24px; }

  section { padding: 60px var(--pad); }
  /* flex-wrap : le bouton "Tout afficher" (seul header à en avoir un)
     passe sur sa propre ligne au lieu de déborder hors écran — les autres
     headers (num+titre) tiennent déjà sur une ligne, donc ça ne change
     rien pour eux. */
  .section-header { margin-bottom: 36px; gap: 14px; flex-wrap: wrap; }
  .section-line { display: none; }
  .refs-view-toggle {
    flex: 1 0 100%;
    margin-top: var(--sp-1);
    justify-content: center;
    text-align: center;
  }

  .hero-name { font-size: clamp(52px, 17vw, 96px); }
  .hero-sub  { font-size: var(--fs-label); max-width: 100%; margin-top: 20px; }
  .hero-tag  { margin-bottom: 16px; }
  .hero-year { display: none; }

  /* Refs — les bandeaux défilent en pleine largeur à toutes les tailles,
     seul le pill se resserre un peu et la bannière répétée raccourcit. */
  .refs-pill { padding: var(--sp-2) var(--sp-4); }
  .refs-pill--intl { padding-right: calc(var(--sp-4) + 16px); } /* place pour le badge drapeau, le shorthand ci-dessus l'écraserait sinon */
  a.refs-pill { padding-right: calc(var(--sp-4) + 16px); } /* idem pour la flèche */
  .refs-pill-venue { font-size: var(--fs-sm); }
  .refs-pill--feature .refs-pill-venue { font-size: var(--fs-body); }
  /* Vue liste sur mobile : 232px fixes ne laissaient qu'1 pill par ligne
     (effet "liste de courses"). En 2 colonnes égales à la place — même
     esprit grille qu'en desktop, juste avec moins de place. */
  .refs-static-view .refs-pill { flex-basis: calc((100% - var(--sp-3)) / 2); }
  .refs-banner-word,
  .refs-banner-dot { font-size: var(--fs-h2); }

  /* Ligne split (Premières parties | Événements officiels) : la largeur
     adaptée au contenu n'a plus de sens en colonne → on empile les 2
     moitiés en pleine largeur. Le séparateur (pensé pour une jonction
     horizontale) disparaît : empilées, les 2 moitiés sont déjà
     visuellement distinctes. */
  .refs-split { flex-direction: column; gap: var(--sp-6); }
  .refs-split-sep { display: none; }
  .refs-split-half { flex: 1 1 auto; width: 100%; }
  /* Pour tenir VRAIMENT sur 1 ligne (pas juste "plus petit") : même
     technique nowrap + shrink + ellipsis que sur desktop. Réduire la
     police seule ne suffit pas — à une largeur de téléphone, "Fête de la
     Musique" en entier ne rentre à côté d'autres pills à AUCUNE taille
     raisonnable. Les entrées courtes (Kaaris, FC Nantes…) restent lisibles
     en entier ; seules les plus longues tronquent avec une ellipse. */
  .refs-split-pills { flex-wrap: nowrap; gap: var(--sp-1); }
  .refs-split-pills .refs-pill {
    flex: 0 1 auto;
    min-width: 0;
    padding: var(--sp-1) var(--sp-2);
  }
  .refs-split-pills .refs-pill-venue,
  .refs-split-pills .refs-pill--feature .refs-pill-venue {
    font-size: var(--fs-label);
  }
  /* Entrées marquées "hideOnMobile" dans references.json (ex. les dates de
     Fête de la Musique secondaires) : gardées en desktop, masquées ici pour
     ne pas alourdir la place déjà comptée sur mobile. */
  .refs-pill--desktop-only { display: none; }

  .rider-grid { grid-template-columns: 1fr; }
  .rider-card { padding: 22px 18px; }

  .contact-item { padding: 28px 8px; }
  .contact-icon { width: 22px; height: 22px; }
  .contact-val  { font-size: var(--fs-label); letter-spacing: .08em; }

  footer {
    padding: var(--sp-6) var(--pad);
    flex-direction: column;
    text-align: center;
    gap: var(--sp-2);
  }
}


/* ═══════════════════════════════════════════════
   RESPONSIVE — 380px
═══════════════════════════════════════════════ */
@media (max-width: 380px) {
  .hero-name { font-size: 50px; }
  .ref-venue { font-size: var(--fs-sm); }   /* petits écrans : léger cran en dessous, sans redevenir minuscule */

}

/* V7.2 — presskit éditorial, hiérarchie définie par le contenu. */
#hero::before { display: none; }
.hero-release-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--sp-4);
  color: var(--text-3);
  font-size: var(--fs-sm);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.hero-release-link:hover { color: var(--text); border-bottom-color: var(--line-strong); }

/* Les catégories et leur ordre viennent directement de references.json. */
#refs-container { gap: var(--sp-8); }
.ref-category { padding: 0; border: 0; }
.ref-category-head {
  min-height: 64px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  border-top: 1px solid var(--line-strong);
}
.ref-category-head > span,
.ref-category-head > small {
  color: var(--text-mute);
  font-size: var(--fs-label);
  letter-spacing: .12em;
}
.ref-category-head > small { min-width: 2ch; text-align: right; white-space: nowrap; }
.ref-category-head h3 { min-width: 0; }
.ref-category-head h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
}
.ref-category-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-7);
}
.ref-category .ref-editorial-row {
  min-height: 68px;
  grid-template-columns: 32px minmax(0, 1fr) 20px;
}
.ref-category--tier-1 .ref-category-head { min-height: 80px; }
.ref-category--tier-1 .ref-category-head h3 { font-size: clamp(28px, 4vw, 48px); }
.ref-category--tier-1 .ref-editorial-main strong { font-size: var(--fs-h2); }
.ref-category--tier-2 .ref-category-head h3 { font-size: clamp(24px, 3vw, 38px); }
.ref-category--tier-3,
.ref-category--tier-4 { width: calc(50% - var(--sp-4)); }
.ref-category--tier-3 { align-self: flex-start; }
.ref-category--tier-4 { align-self: flex-end; margin-top: calc(-1 * (var(--sp-8) + 1px)); }
.ref-category--tier-3 .ref-category-list,
.ref-category--tier-4 .ref-category-list { grid-template-columns: 1fr; }
.ref-category--tier-3 .ref-editorial-main strong,
.ref-category--tier-4 .ref-editorial-main strong { font-family: var(--font-body); font-size: var(--fs-body); }

/* La biographie est un contenu principal : complète et immédiatement visible. */
.bio-grid { align-items: start; }
.bio-text { max-width: var(--measure); padding-top: var(--sp-3); }
.bio-text p { font-size: var(--fs-lead); line-height: var(--lh-lead); }

/* Contact volontairement discret, en fin de presskit. */
#contact .social-links { padding-top: 0; border-top: 0; }
#contact .social-links a { color: var(--text-3); border-bottom: 1px solid var(--line); }
#contact .social-links a:hover { color: var(--text); border-bottom-color: var(--line-strong); }

@media (max-width: 640px) {
  #refs-container { gap: var(--sp-7); }
  .ref-category-head { min-height: 56px; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--sp-3); }
  .ref-category-head h3 { font-size: var(--fs-lead); }
  .ref-category--tier-1 .ref-category-head { min-height: 64px; }
  .ref-category--tier-1 .ref-category-head h3 { font-size: 28px; }
  .ref-category--tier-2 .ref-category-head h3 { font-size: 21px; }
  .ref-category-list { grid-template-columns: 1fr; }
  .ref-category .ref-editorial-row { min-height: 56px; grid-template-columns: 24px minmax(0, 1fr) 16px; gap: var(--sp-2); }
  .ref-category .ref-editorial-main strong,
  .ref-category--tier-1 .ref-editorial-main strong { font-family: var(--font-body); font-size: var(--fs-sm); }
  .ref-category .ref-editorial-main small { margin-top: 2px; }
  .ref-category--tier-3,
  .ref-category--tier-4 { width: 100%; }
  .ref-category--tier-4 { margin-top: 0; }

  .bio-photo { height: 38svh; }
  .bio-text { padding-top: 0; }
  .bio-text p { font-size: var(--fs-body); line-height: var(--lh-body); }
  #contact .social-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-5); }
}


/* ═══════════════════════════════════════════════
   PERFORMANCE MOBILE
   Le glassmorphism (backdrop-filter blur 24px × ~30 cartes) et les images
   de section en fond sont coûteux au scroll sur mobile / tactile. On les
   remplace par des fonds opaques : même lecture, scroll fluide.
═══════════════════════════════════════════════ */
@media (max-width: 1024px), (hover: none) {
  .refs-pill,
  .rider-card,
  .contact-item {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--glass-solid);
  }
  .refs-pill:hover,
  .rider-card:hover,
  .contact-item:hover { background: var(--glass-solid-hover); }

  /* Le fond opaque ci-dessus écraserait le voile doré de .refs-pill--intl
     (même spécificité, règle plus tardive) : on réaffirme la teinte en
     version opaque, cohérente avec la stratégie perf mobile (pas de blur,
     juste une couleur pleine légèrement teintée). */
  .refs-pill--intl { background: color-mix(in srgb, var(--accent) 9%, var(--glass-solid)); }
  .refs-pill--intl:hover { background: color-mix(in srgb, var(--accent) 11%, var(--glass-solid-hover)); }
  .refs-pill--fr { background: color-mix(in srgb, var(--accent) 4.5%, var(--glass-solid)); }
  .refs-pill--fr:hover { background: color-mix(in srgb, var(--accent) 6%, var(--glass-solid-hover)); }
  .refs-pill--feature { background: color-mix(in srgb, var(--accent) 2%, var(--glass-solid)); }
  .refs-pill--feature:hover { background: color-mix(in srgb, var(--accent) 3%, var(--glass-solid-hover)); }
}

/* ═══════════════════════════════════════════════
   PRINT
═══════════════════════════════════════════════ */
@media print {
  *, *::before, *::after {
    background:  #fff !important;
    color:       #000 !important;
    box-shadow:  none !important;
  }
  #main-nav, .nav-burger, .nav-lang,
  footer, .embed-poster, iframe { display: none !important; }

  body { font-size: var(--fs-label); }
  section { padding: 16px 0; border-bottom: 1px solid #ccc; break-inside: avoid; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-photo { display: none; }
  .hero-name { font-size: 48px; }
  .reveal { opacity: 1 !important; transform: none !important; }
  a { text-decoration: underline; }
}

/* ═══════════════════════════════════════════════
   V7.1 — DIRECTION ÉDITORIALE
   Moins de surfaces et de chrome : l'image, le texte et les preuves
   portent l'identité. Les actions restent franches et tactiles.
═══════════════════════════════════════════════ */
#ambient-glow { display: none; }

#main-nav.scrolled {
  background: rgba(10, 10, 10, .96);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-bottom: 1px solid var(--line);
}

.nav-logo:hover,
.nav-logo:hover .nav-logo-sub { color: var(--text); }

.nav-logo { min-height: 44px; display: inline-flex; align-items: center; }

.nav-booking-link {
  display: none;
  min-height: 44px;
  align-items: center;
  color: var(--text);
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
}

.nav-links > li > a.nav-cta,
.action-primary {
  min-height: 44px;
  border: 1px solid var(--text);
  border-radius: 0;
  background: var(--text);
  color: var(--bg);
}
.nav-links > li > a.nav-cta.nav-cta--ghost {
  border-color: transparent;
  border-bottom-color: var(--line-strong);
  background: transparent;
  color: var(--text-2);
}
.nav-links > li > a.nav-cta.nav-cta--ghost:hover {
  background: transparent;
  border-bottom-color: var(--text);
  color: var(--text);
}
.nav-lang button,
.utility-lang,
.sl-lang {
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.hero-name::before,
.hero-name::after { display: none; }

.hero-proof {
  margin-top: var(--sp-4);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}
.action-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sp-5);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.action-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-2);
  font-size: var(--fs-sm);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}
.action-link:hover { color: var(--text); border-color: var(--text); }

@media (min-width: 861px) {
  #hero {
    height: 100svh;
    min-height: 640px;
    padding-top: calc(var(--nav-h) + var(--sp-5));
    padding-bottom: var(--sp-7);
  }
  .hero-photo { height: min(68svh, 640px); aspect-ratio: auto; }
}

section { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
.section-num { color: var(--text-3); }

/* Références : sélection lisible + archive progressive. */
#refs-container { gap: var(--sp-5); }
.ref-editorial-list,
.ref-archive-list { border-top: 1px solid var(--line-strong); }
.ref-editorial-row {
  min-height: 78px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 28px;
  align-items: center;
  gap: var(--sp-4);
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
a.ref-editorial-row:hover { color: var(--text); background: rgba(240,237,230,.025); }
.aftermovie-card:hover { border-color: var(--line-strong); }
.ref-editorial-index {
  font-size: var(--fs-label);
  color: var(--text-mute);
  letter-spacing: .12em;
}
.ref-editorial-main { min-width: 0; display: flex; align-items: baseline; gap: var(--sp-4); }
.ref-editorial-main strong {
  flex: 0 1 38%;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
}
.ref-editorial-main small {
  flex: 1;
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.ref-editorial-arrow { justify-self: end; color: var(--text-3); }
.ref-archive { margin-top: var(--sp-5); }
.ref-archive > summary,
.bio-details > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  color: var(--text-2);
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--line-strong);
}
.ref-archive > summary::-webkit-details-marker,
.bio-details > summary::-webkit-details-marker { display: none; }
.ref-archive > summary::after,
.bio-details > summary::after { content: '+'; color: var(--text-3); }
.ref-archive[open] > summary::after,
.bio-details[open] > summary::after { content: '−'; }
.ref-archive > summary span { color: var(--text-mute); }
.ref-editorial-row--compact { min-height: 58px; }
.ref-editorial-row--compact .ref-editorial-main strong { font-size: var(--fs-lead); }

/* Médias : une preuve forte, puis une liste compacte. */
.media-grid {
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, .75fr);
  gap: var(--sp-3) var(--sp-6);
  overflow: visible;
  padding: 0;
}
.aftermovie-card {
  min-width: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
}
.aftermovie-card:first-child {
  grid-row: 1 / span 4;
  display: flex;
  border: 0;
}
.aftermovie-card:not(:first-child) .aftermovie-embed--shorts { height: 140px; }
.aftermovie-card:not(:first-child) .aftermovie-meta { padding: var(--sp-3) var(--sp-4); }
.aftermovie-card:not(:first-child) .contact-link { display: none; }
.aftermovie-platform { color: var(--text-3); }
.play-triangle { background: var(--text); }

/* Bio progressive. */
.bio-grid { grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); }
.bio-copy { max-width: var(--measure); }
.bio-summary {
  color: var(--text);
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.45;
}
.bio-summary strong { font-family: var(--font-display); font-weight: 400; }
.bio-details { margin-top: var(--sp-5); }
.bio-details .bio-text { padding-top: var(--sp-5); }
.bio-text p { font-size: var(--fs-body); line-height: var(--lh-body); margin-bottom: var(--sp-5); }

/* Booking : un seul point de conversion, puis des réseaux en texte. */
#contact { overflow: visible; }
.booking-block,
.social-links { max-width: var(--max); margin-inline: auto; }
.booking-block { padding: var(--sp-7) 0; border-top: 1px solid var(--line-strong); }
.booking-kicker {
  margin-top: var(--sp-3);
  color: var(--text-3);
  font-size: var(--fs-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.booking-email {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--sp-5);
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(32px, 7vw, 88px);
  line-height: 1;
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}
.booking-email:hover { border-bottom-color: var(--text); }
.booking-note { margin-top: var(--sp-4); color: var(--text-3); font-size: var(--fs-sm); }
.social-links {
  display: flex;
  gap: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.social-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-2);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.social-links a:hover { color: var(--text); }

.rider-card,
.contact-item { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

.js .reveal,
.js .reveal.visible { opacity: 1; transform: none; transition: none; }

#build-version {
  padding: var(--sp-2);
  color: var(--text-mute);
  font-size: var(--fs-label);
  letter-spacing: .1em;
  text-align: center;
}

.utility-actions { display: flex; align-items: center; gap: var(--sp-4); }
.utility-back,
.utility-lang {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}
.utility-lang { cursor: pointer; gap: var(--sp-1); padding-inline: var(--sp-2); }
.utility-back:hover,
.utility-lang:hover { color: var(--text); }

@media (max-width: 860px) {
  .nav-booking-link { display: inline-flex; margin-left: auto; margin-right: var(--sp-3); }
  .nav-burger { width: 44px; height: 44px; align-items: center; justify-content: center; }
  .nav-links {
    width: min(88vw, 360px);
    max-width: none;
    background: #0a0a0a;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  .nav-links > li > a { min-height: 48px; display: flex; align-items: center; }
  .nav-links > li > a.nav-cta { display: flex; justify-content: center; }
}

@media (max-width: 640px) {
  #hero {
    min-height: 88svh;
    padding-top: calc(var(--nav-h) + var(--sp-4));
    padding-bottom: var(--sp-5);
  }
  .hero-grid { gap: var(--sp-4); }
  .hero-tag { margin-bottom: var(--sp-3); }
  .hero-name { font-size: clamp(50px, 16vw, 68px); }
  .hero-sub { margin-top: var(--sp-3); line-height: 1.6; }
  .hero-proof { margin-top: var(--sp-3); }
  .hero-actions { margin-top: var(--sp-4); gap: var(--sp-4); }
  .hero-photo { height: 39svh; aspect-ratio: auto; }

  section { padding-top: var(--sp-7); padding-bottom: var(--sp-7); }
  .section-header { margin-bottom: var(--sp-5); }

  .ref-editorial-row {
    min-height: 68px;
    grid-template-columns: 28px minmax(0, 1fr) 20px;
    gap: var(--sp-3);
  }
  .ref-editorial-main { display: block; }
  .ref-editorial-main strong { display: block; font-size: var(--fs-lead); }
  .ref-editorial-main small { display: block; margin-top: var(--sp-1); font-size: var(--fs-label); }
  .ref-editorial-row--compact { min-height: 56px; }
  .ref-editorial-row--compact .ref-editorial-main strong { font-family: var(--font-body); font-size: var(--fs-sm); }

  .media-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .aftermovie-card:first-child { grid-row: auto; }
  .aftermovie-card:first-child .aftermovie-embed--shorts { height: auto; aspect-ratio: 16 / 10; }
  .aftermovie-card .contact-link { display: none; }
  .aftermovie-card:not(:first-child) { grid-template-columns: 76px minmax(0, 1fr); }
  .aftermovie-card:not(:first-child) .aftermovie-embed--shorts { height: 88px; }
  .aftermovie-card:not(:first-child) .aftermovie-meta { padding: var(--sp-2) var(--sp-3); }
  .aftermovie-card:first-child .aftermovie-meta { padding: var(--sp-4) 0; }

  .bio-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .bio-photo { width: 100%; max-width: none; height: 44svh; aspect-ratio: auto; }
  .bio-summary { font-size: var(--fs-lead); line-height: var(--lh-lead); }

  .booking-block { padding-top: var(--sp-5); padding-bottom: var(--sp-6); }
  .booking-email { max-width: 100%; font-size: clamp(21px, 7.2vw, 32px); letter-spacing: -.02em; }
  .social-links { gap: var(--sp-4); flex-wrap: wrap; }

  .utility-actions { gap: var(--sp-2); }
  .utility-back { font-size: var(--fs-label); letter-spacing: .08em; }
  .utility-lang { padding-inline: var(--sp-1); }

  footer a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

@media (max-width: 380px) {
  .utility-actions .nav-logo-sub,
  #main-nav:has(.utility-actions) .nav-logo-sub { display: none; }
  .utility-actions { gap: var(--sp-1); }
  .utility-back { letter-spacing: .04em; }
}

/* V7.2 final — placé après les compatibilités V7.1. */
#refs-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-8) var(--sp-7);
}
.ref-category--tier-1,
.ref-category--tier-2 { grid-column: 1 / -1; }
.ref-category--tier-3,
.ref-category--tier-4 {
  width: auto;
  align-self: start;
  margin-top: 0;
}
.bio-text p { font-size: var(--fs-lead); line-height: var(--lh-lead); }

@media (max-width: 640px) {
  #refs-container { grid-template-columns: 1fr; gap: var(--sp-7); }
  .ref-category--tier-1,
  .ref-category--tier-2 { grid-column: auto; }
  .bio-text p { font-size: var(--fs-body); line-height: var(--lh-body); }
}

/* V7.4 — biographie composée et références réellement hiérarchisées. */
.bio-grid {
  grid-template-columns: minmax(280px, .62fr) minmax(0, 1.38fr);
  gap: clamp(var(--sp-7), 6vw, var(--sp-9));
}
.bio-text { max-width: none; padding-top: 0; }
.bio-text .bio-lead {
  max-width: 48ch;
  margin-bottom: var(--sp-7);
  color: var(--text);
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.5;
}
.bio-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-strong);
}
.bio-columns p {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: 1.8;
}
.bio-note-row {
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.bio-note {
  color: var(--text-3);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ref-category .ref-editorial-row { grid-template-columns: minmax(0, 1fr) 20px; }
.ref-category .ref-editorial-main { display: block; }
.ref-category .ref-editorial-main strong,
.ref-category .ref-editorial-main small { display: block; }
.ref-category .ref-editorial-main small { margin-top: var(--sp-1); }

/* International : une seule grande affiche inversée, pas six cartes égales. */
.ref-category--tier-1 {
  padding: var(--sp-6);
  color: var(--bg);
  background: var(--text);
}
.ref-category--tier-1 .ref-category-head { border-top-color: rgba(10,10,10,.35); }
.ref-category--tier-1 .ref-category-head > span,
.ref-category--tier-1 .ref-category-head > small { color: rgba(10,10,10,.55); }
.ref-category--tier-1 .ref-category-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--sp-6);
}
.ref-category--tier-1 .ref-editorial-row {
  min-height: 112px;
  color: var(--bg);
  border-bottom-color: rgba(10,10,10,.18);
}
.ref-category--tier-1 a.ref-editorial-row:hover { color: var(--bg); background: rgba(10,10,10,.04); }
.ref-category--tier-1 .ref-editorial-main strong {
  color: var(--bg);
  font-family: var(--font-display);
  font-size: clamp(21px, 2.2vw, 31px);
  font-weight: 400;
}
.ref-category--tier-1 .ref-editorial-main small,
.ref-category--tier-1 .ref-editorial-arrow { color: rgba(10,10,10,.62); }

/* France conserve du poids, les deux niveaux suivants deviennent secondaires. */
.ref-category--tier-2 .ref-editorial-main strong {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 400;
}
.ref-category--tier-3,
.ref-category--tier-4 { opacity: .82; }

@media (max-width: 640px) {
  .bio-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .bio-photo { height: 30svh; }
  .bio-text .bio-lead { margin-bottom: var(--sp-6); font-size: 19px; line-height: 1.55; }
  .bio-columns { grid-template-columns: 1fr; gap: var(--sp-5); padding-top: var(--sp-5); }
  .bio-columns p { font-size: var(--fs-body); line-height: 1.7; }
  .bio-note-row { margin-top: var(--sp-6); }

  .ref-category--tier-1 { padding: var(--sp-4); }
  .ref-category-head { grid-template-columns: 24px minmax(0, 1fr); }
  .ref-category-head > small { display: none; }
  .ref-category--tier-1 .ref-category-head h3 { font-size: 22px; }
  .ref-category--tier-1 .ref-category-list { grid-template-columns: 1fr; }
  .ref-category--tier-1 .ref-editorial-row { min-height: 76px; }
  .ref-category--tier-1 .ref-editorial-main strong {
    font-family: var(--font-display);
    font-size: 20px;
  }
  .ref-category--tier-2 .ref-editorial-main strong { font-family: var(--font-display); font-size: 16px; }
  .ref-category--tier-3,
  .ref-category--tier-4 { opacity: 1; }
}

/* ═══════════════════════════════════════════════
   V8 — PRESSKIT ÉDITORIAL
   Une sélection claire avant l'index, une seule preuve vidéo dominante,
   et les ressources professionnelles reléguées en fin de parcours.
═══════════════════════════════════════════════ */
body { font-size: 16px; letter-spacing: .025em; }

/* Navigation volontairement courte : trois entrées de contenu + langue. */
.nav-links { gap: var(--sp-3); }
.nav-links > li > a { min-height: 44px; display: inline-flex; align-items: center; }

/* Un seul geste animé, concentré sur l'image d'ouverture. */
.hero-photo {
  clip-path: inset(0 0 100% 0);
  animation: heroFrameIn 1.05s var(--ease) .32s forwards;
}
.hero-photo img { transform: scale(1.035); animation: heroImageSettle 1.4s var(--ease) .32s forwards; }
@keyframes heroFrameIn {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes heroImageSettle { to { transform: scale(1); } }

/* Biographie : texte intégral, structuré par trois chapitres lisibles. */
.bio-text .bio-lead { max-width: 46ch; margin-bottom: var(--sp-7); }
.bio-story { border-top: 1px solid var(--line-strong); }
.bio-chapter {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: var(--sp-6);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--line);
}
.bio-chapter-label {
  padding-top: 3px;
  color: var(--text-3);
  font-size: var(--fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.bio-chapter p {
  max-width: 58ch;
  margin: 0;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.75;
}

/* Références : six preuves choisies, puis l'index complet à la demande. */
#refs-container { display: block; }
.refs-selection-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 var(--sp-3);
  color: var(--text-3);
  font-size: var(--fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-strong);
}
.refs-selection-head small { color: var(--text-mute); font: inherit; }
.refs-featured {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  margin-top: var(--sp-4);
}
.ref-feature {
  position: relative;
  min-width: 0;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-5);
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--line);
  margin: -1px 0 0 -1px;
  transition: background var(--dur-mid) var(--ease), color var(--dur-mid) var(--ease);
}
.ref-feature:first-child {
  grid-column: span 7;
  grid-row: span 2;
  min-height: 336px;
  background: var(--glass-solid);
}
.ref-feature:nth-child(2),
.ref-feature:nth-child(3) { grid-column: span 5; }
.ref-feature:nth-child(n+4) { grid-column: span 4; }
a.ref-feature:hover { background: var(--text); color: var(--bg); }
.ref-feature-index,
.ref-feature-category {
  position: absolute;
  top: var(--sp-4);
  color: var(--text-3);
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ref-feature-index { left: var(--sp-5); }
.ref-feature-category { right: var(--sp-5); text-align: right; }
.ref-feature strong {
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 400;
  line-height: 1.05;
}
.ref-feature:first-child strong { font-size: clamp(42px, 6vw, 78px); }
.ref-feature small {
  display: block;
  margin-top: var(--sp-2);
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.ref-feature-arrow { position: absolute; right: var(--sp-5); bottom: var(--sp-5); color: var(--text-3); }
a.ref-feature:hover .ref-feature-index,
a.ref-feature:hover .ref-feature-category,
a.ref-feature:hover small,
a.ref-feature:hover .ref-feature-arrow { color: rgba(10,10,10,.62); }

.refs-index { margin-top: var(--sp-7); border-top: 1px solid var(--line-strong); }
.refs-index > summary {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  cursor: pointer;
  list-style: none;
  color: var(--text);
}
.refs-index > summary::-webkit-details-marker,
.refs-index > summary::marker { display: none; }
.refs-index > summary > span {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
}
.refs-index > summary small { margin-left: var(--sp-2); color: var(--text-mute); font: 11px var(--font-body); }
.refs-index > summary em {
  color: var(--text-3);
  font-size: var(--fs-label);
  font-style: normal;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.refs-index > summary em::after { content: ' +'; }
.refs-index[open] > summary em::after { content: ' −'; }
.refs-index-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-7);
  padding: var(--sp-5) 0 var(--sp-7);
  border-top: 1px solid var(--line);
}
.ref-index-category > header {
  min-height: 56px;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  border-bottom: 1px solid var(--line-strong);
}
.ref-index-category > header span,
.ref-index-category > header small { color: var(--text-mute); font-size: var(--fs-label); }
.ref-index-category > header h3 { font-family: var(--font-display); font-size: 21px; font-weight: 400; }
.ref-index-category .ref-editorial-row {
  min-height: 54px;
  grid-template-columns: minmax(0, 1fr) 20px;
  border-bottom: 1px solid var(--line);
}
.ref-index-category .ref-editorial-main { display: block; }
.ref-index-category .ref-editorial-main strong { display: block; font: 400 15px var(--font-body); }
.ref-index-category .ref-editorial-main small { display: block; margin-top: 3px; font-size: 11px; }

/* Médias : une performance principale, deux contrepoints, la radio en preuve compacte. */
.media-grid { display: block; max-width: var(--max); margin-inline: auto; padding: 0; overflow: visible; }
.media-kicker {
  padding-bottom: var(--sp-3);
  color: var(--text-3);
  font-size: var(--fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-strong);
}
.media-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr);
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.media-secondary-stack { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.media-video { position: relative; min-width: 0; overflow: hidden; background: #000; }
.media-video .aftermovie-embed--shorts { height: 100%; min-height: 0; }
.media-video--primary { height: 560px; }
.media-video--secondary { height: 274px; }
.media-video .facade-poster { filter: saturate(.75) contrast(1.08); }
.media-video:hover .facade-poster { opacity: .68; }
.media-video-meta {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: var(--sp-3);
  padding: 52px var(--sp-5) var(--sp-5);
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.88), transparent);
}
.media-video-meta > span { color: rgba(240,237,230,.62); font-size: var(--fs-label); letter-spacing: .14em; }
.media-video-meta strong { font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 32px); font-weight: 400; }
.media-video-meta .aftermovie-detail { grid-column: 2; }
.media-video-meta a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--text);
  font-size: var(--fs-label);
  text-decoration: none;
  pointer-events: auto;
}
.media-video--secondary .media-video-meta { grid-template-columns: 1fr auto; padding: 48px var(--sp-4) var(--sp-4); }
.media-video--secondary .media-video-meta > span,
.media-video--secondary .media-video-meta .aftermovie-detail { display: none; }
.media-video--secondary .media-video-meta strong { font-size: 18px; }
.media-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-5); margin-top: var(--sp-4); }
.media-press {
  min-height: 92px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  padding-right: var(--sp-5);
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--line);
}
.media-press-mark {
  align-self: stretch;
  display: grid;
  place-items: center;
  background: var(--press-mouv);
  color: #050505;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0;
}
.media-press > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.media-press small { color: var(--text-3); font-size: var(--fs-label); letter-spacing: .13em; text-transform: uppercase; }
.media-press strong { font-family: var(--font-display); font-size: 18px; font-weight: 400; }
.media-press em { color: var(--text-3); font-size: 12px; font-style: normal; }
.media-more { min-height: 44px; display: inline-flex; align-items: center; color: var(--text-3); font-size: var(--fs-sm); text-decoration: none; border-bottom: 1px solid var(--line); }
.media-more:hover { color: var(--text); border-color: var(--line-strong); }

/* Rider = ressource, pas une étape de la narration. */
#rider.resource-panel { padding: 0 var(--pad); overflow: visible; }
.resource-panel .rider-details { max-width: var(--max); margin-inline: auto; }
.resource-summary {
  min-height: 82px;
  display: grid;
  grid-template-columns: 1fr auto 20px;
  align-items: center;
  gap: var(--sp-4);
}
.resource-summary .section-title { font-size: 20px; }
.resource-summary .rider-toggle { font-size: 20px; transform: none; }
.rider-details[open] .resource-summary .rider-toggle { transform: rotate(45deg); }

/* Contact et pages annexes réunis dans un footer calme. */
.site-footer {
  display: block;
  padding: var(--sp-8) var(--pad) var(--sp-5);
  border-top: 0;
}
.footer-primary,
.footer-utility { max-width: var(--max); margin-inline: auto; }
.footer-primary {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-7);
  padding-bottom: var(--sp-7);
}
.footer-label { display: block; margin-bottom: var(--sp-3); }
.site-footer .footer-email {
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: none;
}
.site-footer .social-links { display: flex; gap: var(--sp-5); padding: 0; border: 0; }
.site-footer .social-links a { border: 0; }
.footer-utility {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav-links { gap: 0; }

  .bio-chapter { grid-template-columns: 1fr; gap: var(--sp-2); padding: var(--sp-5) 0; }
  .bio-chapter p { font-size: 16px; line-height: 1.68; }

  .refs-featured { grid-template-columns: 1fr; }
  .ref-feature,
  .ref-feature:first-child,
  .ref-feature:nth-child(2),
  .ref-feature:nth-child(3),
  .ref-feature:nth-child(n+4) { grid-column: auto; grid-row: auto; min-height: 132px; }
  .ref-feature:first-child { min-height: 232px; }
  .ref-feature:first-child strong { font-size: clamp(38px, 14vw, 58px); }
  .ref-feature strong { padding-right: 24px; font-size: 24px; }
  .refs-index > summary { min-height: 64px; }
  .refs-index > summary > span { font-size: 20px; }
  .refs-index > summary em { font-size: 10px; }
  .refs-index-grid { grid-template-columns: 1fr; gap: var(--sp-6); }

  .media-stage { grid-template-columns: 1fr; }
  .media-video--primary { height: 360px; }
  .media-secondary-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .media-video--secondary { height: 220px; }
  .media-video-meta { grid-template-columns: 1fr auto; padding: 56px var(--sp-4) var(--sp-4); }
  .media-video-meta > span,
  .media-video-meta .aftermovie-detail { display: none; }
  .media-video-meta strong { font-size: 20px; }
  .media-video--secondary .media-video-meta strong { font-family: var(--font-body); font-size: 13px; line-height: 1.35; }
  .media-video--secondary .media-video-meta a { display: none; }
  .media-bottom { grid-template-columns: 1fr; gap: var(--sp-3); }
  .media-more { justify-self: start; }

  #rider.resource-panel { padding-inline: var(--pad); }
  .resource-summary { min-height: 72px; }
  .resource-summary .section-title { font-size: 18px; }

  .site-footer { padding-top: var(--sp-7); }
  .footer-primary { display: block; padding-bottom: var(--sp-6); }
  .site-footer .social-links { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); }
  .footer-utility { align-items: flex-start; flex-direction: column-reverse; }
  .footer-links { gap: var(--sp-2) var(--sp-3); }
}

@media (max-width: 420px) {
  .media-video--primary { height: 320px; }
  .media-video--secondary { height: 190px; }
  .media-press { grid-template-columns: 64px minmax(0, 1fr) 16px; padding-right: var(--sp-3); }
  .media-press strong { font-size: 15px; }
  .site-footer .footer-email { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo { clip-path: none !important; }
  .hero-photo img { animation: none !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════
   V8.1 — ARCHIVE LIVE / EMPLACEMENTS D'ASSETS
   Les blocs noirs sont des emplacements de production explicites. Ils
   réservent le bon ratio et disparaîtront au profit des vrais médias.
═══════════════════════════════════════════════ */
:root {
  --image-saturation: .78;
  --image-contrast: 1.08;
  --asset-slot-bg: #000;
}

.hero-photo img,
.bio-photo img,
.media-video .facade-poster,
.ref-feature-visual img {
  filter: saturate(var(--image-saturation)) contrast(var(--image-contrast));
}

/* Rupture éditoriale entre le récit et le CV de dates. */
.live-method {
  padding: var(--sp-7) var(--pad) var(--sp-8);
  border-bottom: 1px solid var(--line);
}
.live-method-head,
.visual-slot--wide,
.live-method-strip {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
}
.live-method-head {
  display: flex;
  justify-content: space-between;
  padding-bottom: var(--sp-3);
  color: var(--text-3);
  font-size: var(--fs-label);
  letter-spacing: .16em;
  border-bottom: 1px solid var(--line-strong);
}
.visual-slot {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--asset-slot-bg);
  border: 1px solid var(--line-strong);
}
.visual-slot--wide {
  min-height: 300px;
  margin-top: var(--sp-4);
  padding: var(--sp-7);
}
.visual-slot-label {
  margin-bottom: var(--sp-4);
  color: var(--text-3);
  font-size: var(--fs-label);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.visual-slot strong {
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 64px);
  font-weight: 400;
  line-height: 1;
}
.visual-slot p {
  max-width: 58ch;
  margin-top: var(--sp-4);
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.6;
}
.visual-slot small {
  margin-top: var(--sp-5);
  color: var(--text-3);
  font-size: var(--fs-label);
  letter-spacing: .08em;
}
.live-method-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-top: 0;
}
.live-method-strip span {
  min-height: 52px;
  display: grid;
  place-items: center;
  color: var(--text-3);
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-align: center;
  border-right: 1px solid var(--line);
}
.live-method-strip span:last-child { border-right: 0; }

/* Les trois preuves internationales réservent dès maintenant leur image. */
.ref-feature--with-visual { overflow: hidden; padding-top: 132px; }
.ref-feature:first-child { min-height: 420px; }
.ref-feature:nth-child(2),
.ref-feature:nth-child(3) { min-height: 210px; }
.ref-feature-visual {
  position: absolute;
  inset: 54px var(--sp-5) auto;
  height: 82px;
  z-index: 1;
  display: flex;
  overflow: hidden;
  background: var(--asset-slot-bg);
  border: 1px solid var(--line-strong);
}
.ref-feature:first-child .ref-feature-visual { height: 188px; }
.ref-feature-visual img { width: 100%; height: 100%; object-fit: cover; }
.ref-feature-visual--placeholder {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  text-align: center;
}
.ref-feature-visual--placeholder span {
  color: var(--text-mute);
  font-size: 9px;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.ref-feature-visual--placeholder em {
  max-width: 34ch;
  color: var(--text-3);
  font-size: 11px;
  font-style: normal;
  line-height: 1.45;
}
.ref-feature-copy { position: relative; z-index: 2; display: block; }
a.ref-feature:hover { background: var(--bg-elevated); color: var(--text); }
a.ref-feature:hover .ref-feature-index,
a.ref-feature:hover .ref-feature-category,
a.ref-feature:hover small,
a.ref-feature:hover .ref-feature-arrow { color: var(--text-3); }

/* Le film principal est volontairement un brief visible tant que l'asset
   horizontal centré sur l'artiste n'existe pas. */
.media-showreel-slot {
  min-width: 0;
  height: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-7);
  text-align: center;
  background: var(--asset-slot-bg);
  border: 1px solid var(--line-strong);
}
.media-showreel-cue {
  margin-bottom: var(--sp-5);
  color: var(--text-3);
  font-size: var(--fs-label);
  letter-spacing: .17em;
}
.media-showreel-slot strong {
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 78px);
  font-weight: 400;
  line-height: .98;
}
.media-showreel-slot p {
  max-width: 54ch;
  margin-top: var(--sp-5);
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.6;
}
.media-showreel-slot small {
  margin-top: var(--sp-5);
  color: var(--text-3);
  font-size: var(--fs-label);
  letter-spacing: .08em;
}

@media (max-width: 760px) {
  /* Sur téléphone, cette respiration reste un repère visuel sans devenir
     une section entière à faire défiler. Le brief garde son ratio utile,
     tandis que les quatre mots-clés tiennent sur une seule ligne. */
  .live-method { padding: var(--sp-5) var(--pad) var(--sp-6); }
  .visual-slot--wide { min-height: 184px; padding: var(--sp-4); }
  .visual-slot strong { font-size: clamp(27px, 9vw, 38px); }
  .visual-slot p { font-size: 14px; }
  .visual-slot small { margin-top: var(--sp-3); }
  .live-method-strip { grid-template-columns: repeat(4, 1fr); }
  .live-method-strip span {
    min-height: 44px;
    padding-inline: 4px;
    font-size: 8px;
    letter-spacing: .08em;
  }
  .live-method-strip span:nth-child(2) { border-right: 1px solid var(--line); }
  .live-method-strip span:nth-child(-n+2) { border-bottom: 0; }

  .ref-feature--with-visual,
  .ref-feature:nth-child(2).ref-feature--with-visual,
  .ref-feature:nth-child(3).ref-feature--with-visual { min-height: 224px; padding-top: 122px; }
  .ref-feature:first-child.ref-feature--with-visual { min-height: 330px; padding-top: 190px; }
  .ref-feature-visual { height: 86px; }
  .ref-feature:first-child .ref-feature-visual { height: 150px; }
  .ref-feature:nth-child(n+4) { min-height: 112px; padding-block: var(--sp-4); }

  .media-showreel-slot { height: 320px; padding: var(--sp-5); }
  .media-showreel-slot strong { font-size: clamp(36px, 12vw, 52px); }
  .media-showreel-slot p { font-size: 14px; }
}

#build-version {
  padding: var(--sp-2);
  color: var(--text-mute);
  font-size: 10px;
  letter-spacing: .1em;
  text-align: center;
}