/* ============================================================
   OLDSCHOOL WAVES — REFONTE FINALE
   ------------------------------------------------------------
   Fondation : Brutalist Warehouse v2 (mécanique debug) +
   design de référence Claude Design "Accueil.dc.html"
   (monochrome os/noir, filets fins, Old London + IBM Plex Mono).
   L'aberration rouge/cyan VHS est la seule couleur du site.
   ⚠️ Les 5 fixes de debug sont appliqués partout :
   zéro clip-path, reveals scopés html.js à spécificité
   équilibrée, photos révélées par opacité seule + translateZ(0).
   ============================================================ */

/* Old London : la gothique du label. Auto-hébergée en woff pour ne plus
   dépendre de cdnfonts (tiers lent/faillible) : l'identité gothique du site
   ne doit JAMAIS retomber en serif générique sur mobile (iOS/Android n'ont pas
   « Old English Text MT »). local() d'abord = pas de téléchargement pour qui a
   la fonte ; font-display:swap + préchargement (voir head.html) = le titre
   s'affiche tout de suite et bascule dès que la woff est prête (FOUT minimal). */
@font-face{
  font-family:'Old London';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:local('Old London'),
      url('/assets/fonts/old-london.woff2') format('woff2'),
      url('/assets/fonts/old-london.woff') format('woff');
}

/* IBM Plex Mono : la mono du corps de texte. Auto-hébergée (sous-ensemble latin,
   4 graisses) pour supprimer la requête tierce bloquante vers Google Fonts et ne
   plus envoyer l'IP des visiteurs à fonts.gstatic.com (RGPD). unicode-range =
   celui de Google → comportement de rendu identique (mêmes glyphes latins ; les
   flèches → ↗ tombaient déjà en fallback avant). local() d'abord = pas de
   téléchargement pour qui a la fonte installée. font-display:swap partout. */
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:local('IBM Plex Mono'), local('IBMPlexMono-Regular'),
      url('/assets/fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:local('IBM Plex Mono Medium'), local('IBMPlexMono-Medium'),
      url('/assets/fonts/ibm-plex-mono-latin-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'),
      url('/assets/fonts/ibm-plex-mono-latin-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:local('IBM Plex Mono Bold'), local('IBMPlexMono-Bold'),
      url('/assets/fonts/ibm-plex-mono-latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */
:root{
  --noir:       #0a0a0a;   /* fond */
  --noir-2:     #141414;   /* panneaux, cartes */
  --filet:      #262626;   /* bordures et filets */
  --filet-2:    #1c1c1c;   /* filet du colophon, plus discret */
  --filet-fort: #3a3a3a;   /* filet des éléments décoratifs interactifs (tags, liens) : un cran plus clair que --filet */
  --champ-bord: #626260;   /* bordure des champs de formulaire : ≥3:1 sur --noir (WCAG 1.4.11 non-texte) — le champ ne se distingue QUE par sa bordure */
  --os:         #f1f0ed;   /* texte principal : blanc os */
  /* Encres douces sur fond sombre (CORPS de texte), à ne pas confondre avec les
     --gris* qui portent les labels/inscriptions : ici on reste dans le blanc os,
     juste atténué pour le confort de lecture sur le noir. */
  --os-2:       #d9d8d2;   /* secondaire lumineux : chapo, intros, texte sur photo (~13,9:1) */
  --os-3:       #b8b7b1;   /* corps doux : bios, notes, pitches (~9,9:1) */
  --gris:       #8f8f8a;   /* inscriptions, texte secondaire */
  --gris-2:     #9a9a94;   /* prix, survols discrets */
  --gris-3:     #82827b;   /* le gris le plus discret (colophon, placeholders, n° d'artiste) — remonté à 5,1:1 sur --noir pour passer WCAG AA sur du petit texte (l'ancien #6f6f6a était à 3,9:1) */

  /* L'aberration chromatique VHS : couches couleur désalignées,
     réservée aux gros titres gothiques (jamais sur les photos) */
  --aberration:
    -2px 0 0 rgba(255, 59, 48, .55),
     2px 0 0 rgba(0, 229, 255, .55);

  --f-gothique: 'Old London', 'Old English Text MT', serif;
  --f-mono:     'IBM Plex Mono', monospace;

  /* Échelle typo (valeurs du design de référence) */
  --t-colossal:   clamp(64px, 10.5vw, 158px);  /* h1 hero */
  --t-titre-xl:   clamp(52px, 7vw, 104px);     /* h2 bandeau booking */
  --t-titre:      clamp(40px, 4.5vw, 64px);    /* h2 de section */
  --t-corps:      15px;
  --t-petit:      12px;

  --gouttiere: clamp(18px, 5vw, 48px);
  --limite:    1240px;
  --nav-h:     82px;
}

/* ------------------------------------------------------------
   2. RESET + BASE
   ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--noir);
  color:var(--os);
  font-family:var(--f-mono);
  font-size:var(--t-corps);
  line-height:1.8;
  overflow-x:hidden;
}
img{
  max-width:100%; display:block;
  /* Fix compositing GPU (fix 4) : chaque image sur sa propre couche.
     Sans ça, un filter sur l'image + transform d'un parent peut
     empêcher sa peinture sur Chromium/Windows. */
  transform:translateZ(0);
  backface-visibility:hidden;
}
a{ color:var(--os); text-decoration:none; }
a:hover{ color:var(--gris-2); }
::selection{ background:var(--os); color:var(--noir); }
:focus-visible{ outline:2px solid var(--os); outline-offset:3px; }

/* Lien d'évitement (WCAG 2.4.1 « contourner des blocs ») : hors focus, remonté
   hors écran mais toujours focusable ; au 1er Tab il descend en haut à gauche
   pour sauter la nav fixe. Voix du site : mono, encadré, inversé. Pas de clip-path. */
.skip-lien{
  position:fixed;
  top:12px; left:12px;
  z-index:9600;                 /* au-dessus du CRT (9000) et du loader (9500) */
  background:var(--os);
  color:var(--noir);
  font-family:var(--f-mono);
  font-size:var(--t-petit);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:12px 20px;
  border:1px solid var(--os);
  transform:translateY(-160%);  /* caché hors écran, mais focusable */
  transition:transform .2s cubic-bezier(.19, 1, .22, 1);
}
.skip-lien:focus{
  transform:translateY(0);
  outline:2px solid var(--noir);
  outline-offset:-6px;          /* liseré sombre à l'intérieur du chip clair */
}

/* padding-inline = gouttière, mais au moins l'encoche latérale (paysage, viewport-fit=cover) */
.limite{ max-width:var(--limite); margin-inline:auto; padding-inline:max(var(--gouttiere), env(safe-area-inset-left)) max(var(--gouttiere), env(safe-area-inset-right)); }
.section{ padding:100px 0; position:relative; }
.section--filet{ border-top:1px solid var(--filet); }

/* ------------------------------------------------------------
   3. TYPOGRAPHIE
   ------------------------------------------------------------ */
.gothique{
  font-family:var(--f-gothique);
  font-weight:400;
  line-height:1;
  color:var(--os);
  text-wrap:balance; /* titres gothiques : lignes équilibrées, pas d'orphelin isolé */
}
.titre-section{
  font-size:var(--t-titre);
  text-shadow:var(--aberration); /* la bavure VHS sur chaque grand titre */
}
.titre-section--xl{ font-size:var(--t-titre-xl); line-height:.95; }

/* Inscription au-dessus des titres : petites capitales espacées */
.inscription{
  display:block;
  font-size:var(--t-petit);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gris);
}

p{ max-width:64ch; text-wrap:pretty; } /* prose : évite les veuves/orphelins en fin de paragraphe */
p + p{ margin-top:1rem; }

/* ------------------------------------------------------------
   4. TITRES EN MASQUE (animation type Awwwards)
   js/main.js découpe chaque .titre-anime en mots ; chaque mot est
   dans un masque overflow:hidden et monte avec un délai croissant.
   ⚠️ Masque = overflow:hidden + translateY. JAMAIS de clip-path.
   ------------------------------------------------------------ */
.mot{
  display:inline-block;
  overflow:hidden;              /* le masque */
  vertical-align:top;
  /* Les descentes de l'Old London (g, y, p…) dépassent la ligne de
     base : on agrandit le masque vers le bas pour ne rien couper. */
  padding-bottom:.14em;
  margin-bottom:-.14em;
}
.mot-int{ display:inline-block; will-change:transform; }
/* États scopés html.js (fix 3) : caché (0,3,1) < visible (0,4,1)
   → l'état révélé gagne toujours la cascade. */
html.js .titre-anime .mot-int{
  transform:translateY(115%);
  transition:transform .9s cubic-bezier(.19, 1, .22, 1);
  /* le délai par mot est posé en inline par main.js */
}
html.js .titre-anime.visible .mot-int{ transform:translateY(0); }

/* ------------------------------------------------------------
   5. REVEALS AU SCROLL — les 5 fixes appliqués
   ------------------------------------------------------------ */
html.js .reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .85s ease, transform .85s cubic-bezier(.19, 1, .22, 1);
}
html.js .reveal.visible{ opacity:1; transform:translateY(0); }

/* Cascade dans un groupe */
html.js .reveal[data-delai="1"]{ transition-delay:.1s; }
html.js .reveal[data-delai="2"]{ transition-delay:.2s; }
html.js .reveal[data-delai="3"]{ transition-delay:.3s; }

/* Les photos : OPACITÉ SEULE (fix 4), transition limitée à opacity
   pour ne pas entrer en conflit avec la parallax (transform inline). */
html.js .capture.reveal{
  transform:none;
  transition:opacity .95s ease;
}
html.js .capture.reveal.visible{ transform:none; }

/* ------------------------------------------------------------
   6. PHOTOS "CAPTURE" — cadre photo neutre.
   Aucun filtre ni bavure : l'effet VHS est réservé aux titres.
   ------------------------------------------------------------ */
.capture{ position:relative; overflow:hidden; background:var(--noir-2); }
.capture img{ width:100%; object-fit:cover; }

/* ------------------------------------------------------------
   6 bis. ÉCRAN CRT — le site est vu à travers un vieux tube.
   Deux couches, toutes en pointer-events:none :
   - scanlines fixes (fines lignes sombres toutes les 3 px)
   - barre de rafraîchissement fine et striée qui descend en
     continu, frangée rouge/cyan comme l'aberration des titres ;
     un passage sur trois, elle rebondit sur le bord bas avant
     de redescendre.
   Pas de vignette : le fond reste noir pur.
   Le balayage n'anime QUE transform → composité GPU, aucun
   repaint. Jamais de clip-path (fix 2).
   ------------------------------------------------------------ */
.crt{
  position:fixed; inset:0;
  z-index:9000;
  pointer-events:none;
}
/* Scanlines : période de 3 px (2 px de verre, 1 px d'ombre) */
.crt::before{
  content:'';
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0 2px,
    rgba(0, 0, 0, .14) 2px 3px
  );
}
/* La barre de rafraîchissement : fine, striée par le même pas de
   3 px que les scanlines (le faisceau n'éclaire que les lignes),
   franges rouge/cyan aux teintes de --aberration. */
.crt__balayage{
  /* course d'un passage : tout l'écran + la hauteur de la barre */
  --crt-course:calc(100vh + 200px);
  position:absolute; left:0; right:0;
  top:-80px;                   /* part au-dessus de l'écran */
  height:60px;
  background:linear-gradient(
    to bottom,
    transparent,
    rgba(241, 240, 237, .06) 35%,
    rgba(255, 59, 48, .07) 55%,
    rgba(0, 229, 255, .07) 68%,
    transparent
  );
  /* La texture CRT du faisceau : le masque ne laisse exister la
     barre que par tranches de 2 px — ses stries voyagent avec
     elle et battent contre les scanlines fixes (interférence). */
  -webkit-mask-image:repeating-linear-gradient(to bottom, #000 0 2px, transparent 2px 3px);
  mask-image:repeating-linear-gradient(to bottom, #000 0 2px, transparent 2px 3px);
  animation:crt-balayage 16s linear infinite;
  will-change:transform;
}
/* 3 passages par cycle : deux descentes simples, puis une
   descente qui REBONDIT sur le bord bas et redescend.
   Les doublons à ±0.1 % = téléportation invisible vers le haut. */
@keyframes crt-balayage{
  0%    { transform:translateY(0); }
  27%   { transform:translateY(var(--crt-course)); }   /* passage 1 */
  27.1% { transform:translateY(0); }
  54%   { transform:translateY(var(--crt-course)); }   /* passage 2 */
  54.1% { transform:translateY(0); }
  72%   { transform:translateY(calc(var(--crt-course) - 180px)); } /* passage 3 : touche le bord bas… */
  82%   { transform:translateY(calc(var(--crt-course) * .42)); }   /* …rebondit un peu au-dessus de la mi-écran… */
  100%  { transform:translateY(var(--crt-course)); }               /* …et redescend */
}

/* ------------------------------------------------------------
   6bis. LOADER D'INTRO — calque plein écran, calage VHS du logo.
   Affiché UNIQUEMENT sous html.loader-actif (posé en <head> :
   1re arrivée de session, hors reduced-motion). Sans JS / revisite /
   reduced-motion → invisible, le contenu reste toujours accessible.
   L'aberration est recréée par 3 couches masquées décalées : on
   n'anime QUE transform (jamais filter) → composité GPU, aucun
   repaint, pas de clip-path (mêmes garde-fous que le CRT).
   ------------------------------------------------------------ */
.loader{
  position:fixed; inset:0;
  z-index:9500;                       /* au-dessus du CRT (9000) */
  background:var(--noir);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:38px;
  opacity:0; visibility:hidden;
  pointer-events:none;                /* purement visuel : ne piège pas le focus */
  transform:translateZ(0);            /* précaution GPU : couche de compositing propre */
  transition:opacity .4s ease, visibility 0s linear .4s;
}
/* Affiché dès le 1er paint (classe posée en <head>, pas de transition d'entrée) */
html.loader-actif .loader{
  opacity:1; visibility:visible;
  transition:opacity .4s ease, visibility 0s linear 0s;
}

.loader__logo{
  position:relative;
  width:min(680px, 82vw);
  aspect-ratio:936.61 / 145.42;       /* viewBox du logo */
}
.loader__couche{
  position:absolute; inset:0;
  -webkit-mask:url('/assets/img/logos/oldschoolwaves_complete_typo.svg') center/contain no-repeat;
          mask:url('/assets/img/logos/oldschoolwaves_complete_typo.svg') center/contain no-repeat;
}
/* Couche nette au-dessus ; fantômes teintés dessous (mêmes teintes que --aberration).
   État de repos = position CALÉE (±2px) : retirer loader-actif ne provoque aucun saut. */
.loader__couche--blanc{ background:var(--os); }
.loader__couche--rouge{ background:rgb(255, 59, 48); mix-blend-mode:screen; transform:translateX(-2px); }
.loader__couche--cyan { background:rgb(0, 229, 255); mix-blend-mode:screen; transform:translateX(2px); }

/* Calage : les fantômes partent écartés (déréglé) et se resserrent (net). */
html.loader-actif .loader__couche--rouge{ will-change:transform; animation:loader-calage-r .7s ease-out both; }
html.loader-actif .loader__couche--cyan { will-change:transform; animation:loader-calage-c .7s ease-out both; }
@keyframes loader-calage-r{ from{ transform:translateX(-10px); } to{ transform:translateX(-2px); } }
@keyframes loader-calage-c{ from{ transform:translateX(10px);  } to{ transform:translateX(2px);  } }

/* Indicateur brut : barre carrée, 0 radius, pas de dégradé. Repos = pleine. */
.loader__piste{
  width:min(680px, 82vw); height:8px;
  background:var(--noir-2); border:1px solid var(--filet);
}
.loader__barre{ display:block; height:100%; width:100%; background:var(--os); }
html.loader-actif .loader__barre{ animation:loader-barre .7s ease-out both; }
@keyframes loader-barre{ from{ width:0; } to{ width:100%; } }

/* Reduced-motion : le <head> évite déjà loader-actif ; par sécurité, si le
   calque s'affichait quand même, aucune animation ni transition. */
@media (prefers-reduced-motion: reduce){
  .loader, .loader *{ animation:none !important; transition:none !important; }
}

/* ------------------------------------------------------------
   7. NAVIGATION — transparente sur le hero, se teinte au scroll,
   se cache au scroll bas et revient au scroll haut (js/main.js)
   ------------------------------------------------------------ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; justify-content:space-between; align-items:center;
  gap:24px;
  padding:22px var(--gouttiere);
  /* Encoches (viewport-fit=cover) : la nav fixe ne passe ni sous la barre d'état
     (haut, portrait) ni sous l'encoche latérale (paysage). env() = 0 ailleurs. */
  padding-top:max(22px, env(safe-area-inset-top));
  padding-inline:max(var(--gouttiere), env(safe-area-inset-left)) max(var(--gouttiere), env(safe-area-inset-right));
  background:transparent;
  border-bottom:1px solid transparent;
  transition:transform .45s cubic-bezier(.19, 1, .22, 1),
             background .35s ease, border-color .35s ease;
}
/* Teintée dès qu'on quitte le haut de page (posée par main.js) */
.nav--fond{
  background:rgba(10, 10, 10, .88);
  backdrop-filter:blur(8px);
  border-bottom-color:var(--filet);
}
.nav--cachee{ transform:translateY(-100%); }

.nav__logo{
  display:inline-flex; align-items:center;
  line-height:0;
}
.nav__logo img{ display:block; height:46px; width:auto; transition:opacity .25s ease; }
.nav__logo:hover img{ opacity:.82; }

/* Pousse liens + sélecteur de langue vers la droite, logo reste à gauche
   (l'auto-margin consomme l'espace libre, space-between du .nav devient no-op).
   C'est le landmark <nav> qui est l'item flex, le <ul> vit dedans. */
.nav__menu{ margin-left:auto; }
.nav__liens{
  display:flex; align-items:center;
  gap:clamp(16px, 2.4vw, 34px);
  list-style:none;
  font-size:var(--t-petit);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.nav__liens a{ padding:6px 0; }
.nav__liens a[aria-current="page"]{ border-bottom:1px solid var(--os); }
.nav__burger{ display:none; }

/* Sélecteur de langue : discret, à la suite des liens de nav (filet vertical
   pour le distinguer sans rompre le rythme de la nav). Liens dérivés en dur
   (root-absolus), voir genLangSwitch() dans generer-site.mjs. */
.langue{
  display:flex; align-items:center;
  gap:10px;
  margin-left:20px;
  padding-left:20px;
  border-left:1px solid var(--filet);
  font-size:var(--t-petit);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.langue a{ color:var(--gris); transition:color .2s ease; position:relative; }
/* Cible tactile : 44px de haut sans toucher au rendu. La largeur ne dépasse
   le lien que de 8px (= le gap mobile) pour que les zones FR/EN/NL ne se
   chevauchent jamais — même principe que .piste__play::after. */
.langue a::after{
  content:'';
  position:absolute; top:50%; left:50%;
  width:calc(100% + 8px); height:44px;
  transform:translate(-50%, -50%);
}
.langue a:hover{ color:var(--os); }
.langue a[aria-current="true"]{
  color:var(--os);
  border-bottom:1px solid var(--os);
  padding-bottom:2px;
}

/* ------------------------------------------------------------
   8. HERO — photo plein écran, contenu ancré en bas à gauche
   ------------------------------------------------------------ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  padding:calc(var(--nav-h) + 40px) var(--gouttiere) 56px;
  padding-inline:max(var(--gouttiere), env(safe-area-inset-left)) max(var(--gouttiere), env(safe-area-inset-right));
}
.hero__fond{ position:absolute; inset:0; z-index:-1; }
.hero__fond img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center; /* cadrage standard (pages intérieures) */
}
/* Décision validée : sur la HOME uniquement, le BAS de la photo est
   aligné au bas du hero — c'est la foule qu'on veut voir. */
.hero--home .hero__fond img{ object-position:center bottom; }
/* Voile de lisibilité (valeurs du design de référence) */
.hero__fond::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(10, 10, 10, .75) 0%,
    rgba(10, 10, 10, .15) 30%,
    rgba(10, 10, 10, .05) 55%,
    rgba(10, 10, 10, .72) 100%);
}
/* Renfort AA scopé (OSW-13) — le voile de base reste tel quel sur about (sain,
   7,7:1). HOME : l'inscription et les genres tombent sur la zone claire de la
   foule (2,2:1 et 3,2:1 mesurés au p95) → le bas du dégradé monte plus tôt et
   plus haut, uniquement sous le bloc de texte (≥ ~46 %). */
.hero--home .hero__fond::after{
  background:linear-gradient(180deg,
    rgba(10, 10, 10, .75) 0%,
    rgba(10, 10, 10, .15) 30%,
    rgba(10, 10, 10, .18) 46%,
    rgba(10, 10, 10, .50) 53%,
    rgba(10, 10, 10, .68) 100%);
}
/* EVENTS : le titre passe au MILIEU de la photo (stand quasi blanc, 1,4:1
   au p95) → bande médiane renforcée, haut et bas proches du voile de base.
   LABEL : même symptôme (vinyle brillant en mi-hauteur — inscription mesurée
   à 1,9:1 et h1 à 3,2:1 sur 1440px avec le voile de base) → même renfort. */
.entete-photo .hero__fond::after,
.hero--label .hero__fond::after{
  background:linear-gradient(180deg,
    rgba(10, 10, 10, .75) 0%,
    rgba(10, 10, 10, .25) 22%,
    rgba(10, 10, 10, .50) 34%,
    rgba(10, 10, 10, .50) 66%,
    rgba(10, 10, 10, .28) 80%,
    rgba(10, 10, 10, .72) 100%);
}
.hero__contenu{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:22px;
}
.hero__contenu .inscription{ color:var(--os-2); letter-spacing:.22em; }
.hero__titre{
  font-size:var(--t-colossal);
  line-height:.9;
  letter-spacing:.01em;
  /* Aberration VHS + halo sombre de lisibilité sur la photo */
  text-shadow:var(--aberration), 0 2px 40px rgba(0, 0, 0, .55);
}
/* Home : le titre est le logo SVG. L'aberration VHS étant un effet de TEXTE,
   elle ne s'applique pas à une image → on la reproduit en drop-shadow
   rouge/cyan décalés (+ le halo sombre de lisibilité). */
.hero__titre--logo{ text-shadow:none; line-height:0; }
.hero__titre--logo img{
  display:block;
  width:min(680px, 82vw);
  height:auto;
  filter:
    drop-shadow(-2px 0 0 rgba(255, 59, 48, .55))
    drop-shadow(2px 0 0 rgba(0, 229, 255, .55))
    drop-shadow(0 2px 40px rgba(0, 0, 0, .55));
}
.hero__genres{
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--os-2);
}
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; }

/* ------------------------------------------------------------
   9. BOUTONS
   ------------------------------------------------------------ */
.btn{
  display:inline-block;
  font-family:var(--f-mono);
  font-size:13px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--noir);
  background:var(--os);
  border:1px solid var(--os);
  padding:16px 32px;
  cursor:pointer;
  transition:background .25s ease, color .25s ease;
}
.btn:hover{ background:transparent; color:var(--os); }
.btn--contour{
  background:rgba(10, 10, 10, .25);
  color:var(--os);
  font-weight:400;
}
.btn--contour:hover{ background:var(--os); color:var(--noir); }

/* ------------------------------------------------------------
   10. SECTIONS ÉDITORIALES DE LA HOME
   ------------------------------------------------------------ */
/* Le concept : déclaration centrée */
.concept{
  max-width:1080px; margin-inline:auto;
  padding:130px var(--gouttiere) 110px;
  text-align:center;
}
.concept .inscription{ margin-bottom:28px; }
.concept p{
  font-size:clamp(22px, 2.6vw, 34px);
  line-height:1.5;
  max-width:none;
}

/* Image + texte en vis-à-vis */
.deux-colonnes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem, 5.5vw, 72px);
  align-items:center;
}
.deux-colonnes .capture{ aspect-ratio:1 / 1; }
.deux-colonnes .capture img{ height:100%; }
.bloc-texte{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:20px;
}
.bloc-texte p{ color:var(--os-2); max-width:46ch; }
.bloc-texte .btn{ margin-top:8px; }

/* En-tête de section avec action à droite */
.entete-section{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:32px; flex-wrap:wrap;
  margin-bottom:44px;
}
.entete-section .inscription{ margin-bottom:18px; }

/* Lien souligné sobre ("Voir tous nos produits ↗") */
.lien-trait{
  font-size:var(--t-petit);
  letter-spacing:.16em;
  text-transform:uppercase;
  border-bottom:1px solid var(--os);
  padding-bottom:4px;
}

/* ------------------------------------------------------------
   11. BANDEAU BOOKING — grille de cellules texte (6 artistes)
   ------------------------------------------------------------ */
.booking-grille{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  border-top:1px solid var(--filet);
  border-left:1px solid var(--filet);
}
.booking-grille a{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:12px;
  padding:26px 24px;
  border-right:1px solid var(--filet);
  border-bottom:1px solid var(--filet);
  font-size:17px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:background .25s ease, color .25s ease;
}
.booking-grille a:hover{ background:var(--os); color:var(--noir); }
.booking-grille .role{
  font-size:11px;
  font-weight:400;
  letter-spacing:.18em;
  opacity:.55;
}
/* Au survol le fond passe en os : noir à 55 % = 4,27:1, sous le 4,5:1 AA
   du petit texte. .62 remonte à ≈5,1:1 sans changer l'état repos. */
.booking-grille a:hover .role{ opacity:.62; }

/* ------------------------------------------------------------
   12. PRODUITS — cartes sobres, prix apparent
   ------------------------------------------------------------ */
.produits-grille{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.produit{
  display:flex; flex-direction:column;
  border:1px solid var(--filet);
  transition:border-color .25s ease;
}
.produit:hover{ border-color:var(--os); }
.produit img{ width:100%; height:auto; aspect-ratio:1 / 1; object-fit:cover; }
.produit__ligne{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:12px;
  padding:18px 20px;
  border-top:1px solid var(--filet);
}
.produit__nom{
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.produit__prix{ font-size:14px; color:var(--gris-2); }

/* ------------------------------------------------------------
   13. FOOTER
   ------------------------------------------------------------ */
/* Direction « Cartouche » (Lot C3, remplace Monumental/Lot B) : grille
   tabulaire filetée à 4 colonnes indexées (00–04), esthétique terminal.
   Filet blanc épais = début franc du footer, plein bord (posé sur <footer>
   lui-même, jamais contraint par --limite). Aucun reveal JS (comme l'ancien
   footer) → aucun risque de cascade caché/révélé. */
.footer{ border-top:12px solid var(--os); margin-top:0; }
/* Grille pleine largeur (comme .nav : pas de .limite/max-width interne — le
   padding de respiration vit directement sur les cellules, pas sur ce
   conteneur). Le padding horizontal vit sur les cellules (pas ici) : le fond
   gris de la grille (var(--filet), qui sert de filet 1px entre colonnes via
   le gap) ne doit JAMAIS être visible sous un padding de conteneur — sinon
   il forme un cadre gris plus étroit que le viewport (régression constatée).
   Le fond de cellule (= fond de page) doit couvrir la grille jusqu'à ses
   bords, filets de 1px mis à part. */
.footer__grille{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.15fr; gap:1px;
  background:var(--filet); border-bottom:1px solid var(--filet);
}
/* padding-inline uniforme (var(--gouttiere), même respiration qu'ailleurs
   sur le site) : évite que le texte des colonnes 2/3/4 touche le filet
   vertical de séparation à leur gauche, et donne à la grille pleine largeur
   le même bord que le header. */
.footer__cellule{ background:var(--noir); padding:36px var(--gouttiere) 32px; }
/* Sur-titres numérotés (00 / LABEL…) : l'index ne se traduit pas ; le
   libellé, si (Suivre → Follow → Volgen). */
.footer__idx{
  font-size:var(--t-petit); color:var(--gris);
  letter-spacing:.16em; text-transform:uppercase;
  padding-bottom:10px; margin:0 0 14px;
  border-bottom:1px solid var(--filet);
}
.footer__logo{ display:block; line-height:0; }
.footer__logo img{
  display:block; width:clamp(150px, 14vw, 220px); height:auto;
  transform:translateZ(0); /* couche GPU propre */
}
.footer__logo:hover img{ opacity:.9; }
.footer__tagline{
  display:block; color:var(--gris);
  font-size:var(--t-petit); letter-spacing:.14em; text-transform:uppercase;
  margin-top:16px;
}
/* Colonnes de liens (pages + sociaux) : une entrée par ligne, cibles ≥ 44px. */
.footer__liens{ list-style:none; display:flex; flex-direction:column; }
.footer__liens a{
  display:flex; align-items:center; min-height:44px;
  text-transform:uppercase; letter-spacing:.06em;
  font-size:13px; color:var(--os);
}
.footer__liens a:hover{ color:var(--gris-2); }
/* Rangée sociale : contraste remonté (AA), flèche sortante par lien. */
.footer__liens--social a{ color:var(--os-2); }
.footer__liens--social a::after{ content:"\00a0\2197"; color:var(--gris); }
.footer__liens--social a:hover{ color:var(--os); }
.footer__liens--social a:hover::after{ color:var(--os); }
/* Boutique : lien simple + flèche sortante (pas d'encadré — cohérent A3). */
.footer__shop{
  display:inline-flex; align-items:center; min-height:44px;
  text-transform:uppercase; letter-spacing:.06em; font-size:13px; color:var(--os);
}
.footer__shop:hover{ color:var(--gris-2); }
.footer__shop::after{ content:"\00a0\2197"; }
/* Espacement net entre le bloc Boutique et le bloc Langue (colonne 4) :
   au moins l'équivalent du rythme des autres colonnes. */
.footer__bloc + .footer__bloc{ margin-top:36px; }
/* Sélecteur de langue du footer : mêmes vrais <a> que le header (généré par
   genLangSwitch), rendu en pastilles filetées façon terminal. Langue
   courante identifiée (fond plein + aria-current), cibles 44px. Jamais
   de <select> ni de redirection JS. */
.footer__langue{
  display:flex; gap:1px; background:var(--filet); border:1px solid var(--filet);
  width:max-content;
}
.footer__langue a{
  display:flex; align-items:center; justify-content:center;
  min-width:48px; min-height:44px; background:var(--noir);
  color:var(--gris); font-size:12px; letter-spacing:.12em;
}
.footer__langue a:hover{ color:var(--os); }
.footer__langue a[aria-current="true"]{ background:var(--os); color:var(--noir); }
.footer__colophon{
  border-top:1px solid var(--filet-2);
  /* Pleine largeur, pas de max-width centré (régression : le max-width:
     var(--limite) + margin-inline:auto décalait le copyright vers le
     centre au lieu de l'aligner sur le même bord que les cellules
     au-dessus, qui n'ont pas de conteneur limité). */
  padding:22px var(--gouttiere);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gris-3);
}
.footer__copy{ color:var(--gris-3); }

/* ------------------------------------------------------------
   14. EN-TÊTES DES PAGES INTÉRIEURES
   La nav est fixe : les pages sans photo d'en-tête réservent
   sa hauteur en haut du <main>.
   ------------------------------------------------------------ */
/* réserve la hauteur de la nav fixe + l'encoche du haut (sinon le contenu passe dessous) */
.interieure main{ padding-top:calc(var(--nav-h) + env(safe-area-inset-top)); }

.titre-page{
  font-size:clamp(64px, 10vw, 160px);
  line-height:.85;
  text-shadow:var(--aberration);
}
.entete{ border-bottom:1px solid var(--filet); }
.entete__grille{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:clamp(2.5rem, 5.5vw, 72px);
  align-items:center;
  padding-block:100px;
}
.entete__texte{ display:flex; flex-direction:column; align-items:flex-start; gap:26px; }
.chapo{ font-size:clamp(17px, 1.8vw, 22px); line-height:1.65; color:var(--os-2); max-width:62ch; }

/* En-tête photo (events) : image de fond + contenu ancré en bas */
.entete-photo{
  position:relative;
  min-height:100svh;                 /* hero plein écran, même logique que home/about */
  display:flex; flex-direction:column; justify-content:center;  /* titre centré vertical */
  overflow:hidden;
  border-bottom:1px solid var(--filet);
  padding:calc(var(--nav-h) + 60px) 0 60px;
}
/* Titre hero events : très grand, centré, aberration VHS + halo de lisibilité
   (il passe au milieu de la photo, zone plus claire → halo indispensable). */
.entete-photo__titre{
  font-size:clamp(80px, 15vw, 260px);
  line-height:.85;
  /* Halo resserré (OSW-13) : une couche 18px dense en plus du halo large,
     pour détacher les contours du fond clair sans assombrir la photo. */
  text-shadow:var(--aberration), 0 2px 18px rgba(0, 0, 0, .75), 0 2px 40px rgba(0, 0, 0, .6);
}

/* ------------------------------------------------------------
   15. VINYLES + LECTEUR AUDIO CUSTOM [PROTO]
   Numéro de catalogue fantôme, tracklist jouable : si le MP3
   est absent, js/main.js remplace le play par un lien SoundCloud.
   ------------------------------------------------------------ */
.vinyle{
  display:grid;
  grid-template-columns:minmax(240px, 420px) 1fr;
  gap:clamp(2rem, 5vw, 80px);
  align-items:center;
  padding-block:100px;
}
.vinyle--inverse{ direction:rtl; }
.vinyle--inverse > *{ direction:ltr; }
.vinyle .capture{ aspect-ratio:1 / 1; }
.vinyle .capture img{ height:100%; }

/* Le grand numéro de catalogue : contour seul, mat */
.fantome{
  font-family:var(--f-gothique);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px var(--filet-fort);
  user-select:none;
}
.vinyle__catalogue{ font-size:clamp(64px, 8vw, 120px); display:block; }
.vinyle__titre{ font-size:42px; margin:18px 0 26px; text-shadow:var(--aberration); }
.vinyle__note{ font-size:14px; line-height:1.85; color:var(--os-3); max-width:68ch; margin:26px 0 30px; }

.tracklist{ list-style:none; border-top:1px solid var(--os); }
.piste{
  display:grid;
  /* play | position | titre | durée */
  grid-template-columns:38px 44px 1fr auto;
  align-items:center;
  gap:16px;
  padding:10px 0;
  border-bottom:1px solid var(--filet);
  font-size:14px;
  transition:background .2s ease;
}
.piste:hover{ background:var(--noir-2); }
.piste .pos{ font-weight:700; }
.piste .duree{ color:var(--gris); font-variant-numeric:tabular-nums; }
.piste__play{
  width:34px; height:34px;
  display:grid; place-items:center;
  background:transparent;
  border:1px solid var(--filet);
  color:var(--os);
  font-size:.7rem;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.piste__play:hover{ border-color:var(--os); }
.piste--joue .piste__play{ background:var(--os); color:var(--noir); border-color:var(--os); }
/* Lien SoundCloud posé par main.js quand le MP3 est absent [PROTO] */
.piste__sc{
  width:34px; height:34px;
  display:grid; place-items:center;
  border:1px solid var(--filet);
  font-size:.62rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--gris);
}
.piste__sc:hover{ color:var(--os); border-color:var(--os); }
/* Cible tactile portée à 44px sans agrandir le bouton visible (34px) : pseudo
   transparent centré. Bénéfique au tactile, inoffensif à la souris/au clavier. */
.piste__play, .piste__sc{ position:relative; }
.piste__play::after, .piste__sc::after{
  content:'';
  position:absolute; top:50%; left:50%;
  width:44px; height:44px;
  transform:translate(-50%, -50%);
}
.piste__barre{
  grid-column:1 / -1;
  height:2px;
  background:var(--filet);
  display:none;
  margin-bottom:.4rem;
}
.piste--joue .piste__barre{ display:block; }
.piste__prog{ display:block; height:100%; width:0%; background:var(--os); }

/* Bandeau EP03 en préparation — plus discret qu'une release sortie
   (vinyle__catalogue clamp 64-120px) mais assez grand pour ne pas se
   perdre dans la page ; ratio gothique/mono conservé (~4:1, cf. avant). */
.bandeau-annonce{
  border-bottom:1px solid var(--filet);
  padding:72px var(--gouttiere);
  /* centré, pas baseline : le gothique Old London n'expose pas une baseline
     fiable à cette taille (grossie au tour précédent) — le mono retombait
     visiblement trop bas contre le numéro. */
  display:flex; align-items:center; justify-content:center;
  gap:32px; flex-wrap:wrap;
}
.bandeau-annonce .fantome{ font-size:clamp(56px, 7vw, 96px); }
.bandeau-annonce .inscription{ font-size:clamp(14px, 1.6vw, 18px); }

/* Podcasts : players SoundCloud encadrés */
.podcasts{ display:flex; flex-direction:column; gap:16px; }
.podcasts iframe{ display:block; width:100%; height:120px; border:1px solid var(--filet); }

/* Passerelle : bandeau titre + action vers une autre page */
.passerelle{
  padding-block:90px;
  display:flex; justify-content:space-between; align-items:center;
  gap:40px; flex-wrap:wrap;
}
.passerelle .titre-section{ font-size:clamp(36px, 4vw, 56px); }

/* ------------------------------------------------------------
   16. BOOKING — marquee, fiches artistes, formulaire double colonne
   ------------------------------------------------------------ */
.marquee{
  border-top:1px solid var(--filet);
  overflow:hidden;
  padding:18px 0;
  white-space:nowrap;
}
.marquee__piste{ display:inline-flex; animation:defile 30s linear infinite; will-change:transform; }
.marquee__piste span{
  font-size:15px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gris);
  padding-right:24px;
}
/* Contenu dupliqué 2× dans le HTML = boucle parfaite à -50 % */
@keyframes defile{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.artiste{
  border-top:1px solid var(--filet);
  padding:44px 0;
  display:grid;
  /* Photo fluide + gouttière qui se resserre : évite l'écrasement de la colonne
     texte (nom en 46px) dans la bande ~900-1100px, avant le passage 1 colonne. */
  grid-template-columns:56px minmax(220px, 320px) 1fr auto;
  gap:clamp(20px, 2.6vw, 36px);
  align-items:center;
}
.artiste:last-of-type{ border-bottom:1px solid var(--filet); }
.artiste__num{ font-size:13px; color:var(--gris-3); }
.artiste .capture{ aspect-ratio:4 / 3; }
.artiste .capture img{ height:100%; }
.artiste__texte{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; min-width:0; /* laisse la colonne rétrécir/replier le nom au lieu de pousser la grille */ }
.artiste__entete{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.artiste__nom{ font-size:46px; line-height:1; }
/* Opt-out du gothique (OSW-27) : « UOST » est indéchiffrable en Old London
   (U/O/S/T gothiques trop proches). Glyphes inchangés, seule la police
   passe en mono lisible — réservé à ce libellé, les autres noms restent gothiques. */
.artiste__nom--lisible{
  font-family:var(--f-mono);
  font-size:36px;
  font-weight:600;
  letter-spacing:.06em;
}
.tag{
  border:1px solid var(--filet-fort);
  padding:5px 12px;
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--os-3);
}
.artiste__bio{ font-size:14px; line-height:1.75; color:var(--os-3); max-width:60ch; }
.artiste__liens{ display:flex; gap:24px; font-size:var(--t-petit); letter-spacing:.14em; text-transform:uppercase; }
.artiste__liens a{ border-bottom:1px solid var(--filet-fort); padding-bottom:3px; position:relative; }
/* Cible tactile 44px (cf. .piste__play::after) ; +16px en largeur = moins que
   le gap de 24px, pas de chevauchement entre SoundCloud et Instagram. */
.artiste__liens a::after{
  content:'';
  position:absolute; top:50%; left:50%;
  width:calc(100% + 16px); height:44px;
  transform:translate(-50%, -50%);
}
.artiste__liens a:hover{ border-color:var(--os); }
.btn--petit{ padding:14px 26px; font-size:var(--t-petit); font-weight:400; white-space:nowrap; }

/* Ancre #demande (booking.html) : ciblée depuis contact.html "Page Booking →",
   les boutons "Booker" et le CTA du hero. Nav fixe mesurée à 91px réels (22px
   de padding haut/bas + 46px de logo + 1px de filet — supérieur aux 82px de
   --nav-h) : sans ce scroll-margin, le haut de la section arrive sous la nav. */
#demande{ scroll-margin-top:110px; }

/* Formulaire booking : pitch collant à gauche, champs à droite */
.duo-formulaire{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:72px;
  align-items:start;
  padding-block:70px 120px;
}
/* Pitch aligné au formulaire, dans le flux normal (pas de sticky : le titre
   et le texte restent en place, alignés avec la 1re ligne du form). */
.colonne-collante{
  display:flex; flex-direction:column; align-items:flex-start; gap:20px;
}

/* ------------------------------------------------------------
   17. FORMULAIRES [PROTO] — démo, envoi réel à brancher
   ------------------------------------------------------------ */
.formulaire{ display:flex; flex-direction:column; gap:22px; }
.form-ligne{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.champ{
  display:flex; flex-direction:column; gap:8px;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gris);
}
.champ input, .champ select, .champ textarea{
  appearance:none;
  background:var(--noir);
  border:1px solid var(--champ-bord);
  border-radius:0;
  color:var(--os);
  font-family:var(--f-mono);
  font-size:14px;
  padding:13px 16px;
  color-scheme:dark; /* calendrier natif sombre sur input date */
}
.champ input:focus, .champ select:focus, .champ textarea:focus{
  border-color:var(--os);
  outline:none;
}
.champ textarea{ resize:vertical; }
input::placeholder, textarea::placeholder{ color:var(--gris-3); }
.form-actions{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.form-note{ font-size:13px; line-height:1.7; color:var(--gris); }

/* Encart d'aiguillage (contact → booking) */
.encart{
  border:1px solid var(--filet);
  padding:22px 24px;
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
}

/* ------------------------------------------------------------
   18. EVENTS — cartes d'archives
   ------------------------------------------------------------ */
.cartes{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  align-items:stretch; /* cartes d'une même rangée à hauteur égale (bas alignés) */
}
/* Découplage image / texte : le cadre image a un ratio fixe (réserve l'espace
   avant chargement → aucun saut de layout), la zone texte prend le reste et
   varie librement selon la longueur du titre, sans décaler l'affiche. */
.carte{ display:flex; flex-direction:column; height:100%; border:1px solid var(--filet); }
.carte .capture{ aspect-ratio:3 / 4; }
.carte .capture img{ height:100%; object-fit:cover; }
.carte__meta{
  display:flex; flex-direction:column; gap:10px;
  flex:1 1 auto; /* absorbe la hauteur restante quand la carte est étirée */
  padding:20px;
  border-top:1px solid var(--filet);
}
.carte__date{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gris); }
.carte__nom{ font-size:14px; line-height:1.6; letter-spacing:.04em; }

/* Carte "à venir" mise en avant : même mise en page que les archives (infos SOUS
   l'affiche, séparateur border-top), mais l'affiche est montrée BIEN plus grande,
   dans son ratio natif (aucun crop → pas d'aspect-ratio imposé comme .carte). */
.carte-avenir{
  display:flex; flex-direction:column;
  max-width:520px;                 /* affiche grande (le contraste = le message) */
  margin-inline:auto;              /* carte centrée dans la page */
  border:1px solid var(--filet);
}
.carte-avenir .capture img{
  width:100%; height:auto;         /* ratio natif de l'affiche, jamais rogné */
  transform:translateZ(0);         /* reveal opacity seule : couche GPU propre (fix) */
}
.carte-avenir__meta{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:26px 28px;
  text-align:center;                   /* infos centrées sous l'affiche */
  border-top:1px solid var(--filet);   /* même séparateur que .carte__meta */
}
.carte-avenir__nom{
  font-size:18px; font-weight:500;     /* titre en police normale (mono), pas gothique */
  letter-spacing:.04em; line-height:1.6;
  color:var(--os);
}

/* ------------------------------------------------------------
   19. ABOUT — chapitres d'histoire en vis-à-vis
   ------------------------------------------------------------ */
.chapitre{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem, 5.5vw, 72px);
  align-items:center;
  padding-block:60px;
}
.chapitre .capture{ aspect-ratio:1 / 1; }
.chapitre .capture img{ height:100%; }
.chapitre__texte{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.chapitre__texte p{ font-size:14px; line-height:1.85; color:var(--os-3); max-width:56ch; }
.titre-chapitre{ font-size:clamp(34px, 3.6vw, 52px); text-shadow:var(--aberration); }

/* ------------------------------------------------------------
   20. CONTACT — pitch + formulaire
   ------------------------------------------------------------ */
.contact-grille{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:80px;
  align-items:start;
  padding-block:100px 120px;
}

/* ------------------------------------------------------------
   21. RESPONSIVE
   ------------------------------------------------------------ */
/* ⚠ 900px est dupliqué dans js/main.js (coupure du parallax, innerWidth > 900) :
   changer l'un = changer l'autre. */
@media (max-width:900px){
  .deux-colonnes{ grid-template-columns:1fr; }
  .booking-grille{ grid-template-columns:repeat(2, 1fr); }
  .produits-grille{ grid-template-columns:1fr; }
  .footer__grille{ grid-template-columns:1fr; }
  .footer__cellule{ padding:24px var(--gouttiere); }
  .entete__grille, .vinyle, .chapitre, .duo-formulaire, .contact-grille{ grid-template-columns:1fr; }
  .vinyle--inverse{ direction:ltr; }
  .cartes{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
  .colonne-collante{ position:static; }
  .form-ligne{ grid-template-columns:1fr; }
  .artiste{ grid-template-columns:1fr; gap:20px; padding:36px 0; }
  .artiste__num{ display:none; }
  .artiste .capture{ max-width:420px; }

  /* Menu burger : simple bascule d'affichage — pas de clip-path (fix 2) */
  .nav__burger{
    display:block;
    background:none;
    border:1px solid var(--os);
    color:var(--os);
    font-family:var(--f-mono);
    font-size:var(--t-petit);
    letter-spacing:.2em;
    text-transform:uppercase;
    /* 14px (au lieu de 9) : porte le bouton à ≥44px de haut (cible tactile) */
    padding:14px 16px;
    cursor:pointer;
    /* .nav__liens quitte le flux (position:fixed) sur mobile : c'est le
       burger qui pousse désormais le reste (langue) vers la droite. */
    margin-left:auto;
  }
  /* Le landmark <nav> quitte le flux (position:fixed) : pas d'item flex
     fantôme dans la barre, et le <ul> panneau garde son toggle display. */
  .nav__menu{
    position:fixed;
    top:calc(var(--nav-h) + env(safe-area-inset-top)); right:0; left:0;
    margin-left:0;
  }
  .nav__liens{
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    background:var(--noir);
    border-bottom:1px solid var(--filet);
    padding:14px var(--gouttiere) 22px;
    display:none;
  }
  .nav__liens.ouvert{ display:flex; }
  .nav__liens li{ width:100%; }
  .nav__liens a{ display:block; padding:12px 0; font-size:15px; }
  .langue{ margin-left:14px; padding-left:14px; gap:8px; }
}
@media (max-width:520px){
  .booking-grille{ grid-template-columns:1fr; }
}

/* ------------------------------------------------------------
   15. ACCESSIBILITÉ — réduction des animations : tout est visible
   d'office, aucun mouvement.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
  html.js .reveal{ opacity:1; transform:none; }
  html.js .titre-anime .mot-int{ transform:none; }
  /* CRT : les scanlines statiques restent, le balayage disparaît */
  .crt__balayage{ display:none; }
}