/* ===========================================================
   Wallerand Production — feuille de style commune
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* Typographie — une seule famille, hiérarchie par graisse et interlettrage.
     Pour changer la typo du site entier, ne modifier que ces deux lignes
     (et l'@import ci-dessus). Alternative avec plus de caractère :
     'Space Grotesk' en display, Inter en texte courant. */
  --font-display: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  --nav-bg: rgba(20, 8, 40, 0.55);
  --accent-red: #ff4b5c;
  --accent-red-dark: #e23648;
  --text-light: #f2edf8;
  --text-muted: #cfc4e0;
  --glitch-cyan: #35e6ff;
  --glitch-red: #ff3b5c;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-light);
  background: #0a0612;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }

/* ---------- Fond animé WebGL ---------- */
/* Le dégradé sur .shader-stage sert de repli si WebGL est indisponible. */
.shader-stage {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg, #140a2b 0%, #4a1a63 35%, #a63a72 65%, #e8763c 100%);
}

.shader-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Fond eclairci. La luminosite porte sur le canvas et non sur son
     conteneur : sinon le voile ci-dessous serait eclairci avec lui et les
     deux reglages se contrarieraient. */
  filter: brightness(1.4);
}

/* Photo mélangée au shader.
   La photo est en noir et blanc : en mode "luminosity" elle ne garde que ses
   valeurs de gris et emprunte les couleurs du shader — le portrait se retrouve
   teinté par les ondes violet/orange au lieu de les masquer. */
.shader-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 18%;
  mix-blend-mode: luminosity;
  opacity: 0.62;
}

@media (max-width: 640px) {
  .shader-photo { background-position: center 12%; }
}

/* Voile sombre : garantit la lisibilité du texte par-dessus le shader.
   Renforcé en haut, là où se trouvent la navigation et les titres. */
.shader-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.82;               /* voile allege : le fond respire davantage */
  background: linear-gradient(
    180deg,
    rgba(8,4,16,0.78) 0%,
    rgba(8,4,16,0.62) 18%,
    rgba(8,4,16,0.42) 45%,
    rgba(8,4,16,0.52) 75%,
    rgba(8,4,16,0.72) 100%
  );
  pointer-events: none;
}

/* Quand une photo est mélangée au shader, elle assombrit déjà beaucoup :
   le voile est allégé, sinon le mélange vire au noir. */
.shader-stage.with-photo::after {
  background: linear-gradient(
    180deg,
    rgba(8,4,16,0.58) 0%,
    rgba(8,4,16,0.42) 18%,
    rgba(8,4,16,0.20) 45%,
    rgba(8,4,16,0.28) 75%,
    rgba(8,4,16,0.48) 100%
  );
}

/* Pages sur shader : le fond est déjà posé, les sections restent transparentes */
.on-shader .hero,
.on-shader .page-bg {
  background: none;
}
.on-shader .hero::after { display: none; }

/* Sur shader, les titres passent en clair (le fond n'est plus la photo claire) */
.on-shader .glitch-title {
  color: #ffffff;
  text-shadow:
    2px 0 0 var(--glitch-cyan),
    -2px 0 0 var(--glitch-red),
    0 4px 24px rgba(8, 4, 16, 0.55);
}
.on-shader .hero-divider { background: rgba(255, 255, 255, 0.75); }

/* "Production" reste en contraste léger sous le titre en gras :
   spécificité alignée sur .on-shader .glitch-title, sinon elle l'emporterait. */
.on-shader .hero-subtitle {
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 2px 14px rgba(8, 4, 16, 0.5);
}

/* Voile local derrière le contenu du hero : le shader reste vif autour,
   mais le texte garde un fond assez sombre pour rester lisible. */
.on-shader .hero-content { position: relative; }
.on-shader .hero-content::before {
  content: "";
  position: absolute;
  /* Inset négatif seulement en vertical : sur l'axe X il élargirait la zone
     de défilement et provoquerait un scroll horizontal parasite. */
  inset: -10% 0;
  z-index: -1;
  background: radial-gradient(
    ellipse 118% 100% at center,
    rgba(8, 4, 16, 0.66) 0%,
    rgba(8, 4, 16, 0.52) 50%,
    rgba(8, 4, 16, 0.0) 85%
  );
  pointer-events: none;
}
.on-shader .panel {
  background: rgba(10, 6, 20, 0.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ---------- Champ d'etoiles (Musiques) ----------
   Le canvas peint lui-meme son fond opaque ; la couleur ci-dessous ne sert
   que le temps du premier rendu. */
.star-stage {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgb(5, 4, 10);
}
.star-stage canvas { display: block; }

/* ---------- Navigation ----------
   Barre flottante en verre, avec indicateur coulissant, etat compact au
   defilement et panneau plein ecran sur mobile. */

.nav {
  position: fixed;
  top: 0.85rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 1.6rem);
  max-width: 1180px;
  z-index: 200;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(10,6,20,0.5);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: background 0.35s ease, border-color 0.35s ease,
              box-shadow 0.35s ease, top 0.35s ease;
}
/* Etat compact : pose une fois la page defilee */
.nav.is-stuck {
  top: 0.5rem;
  background: rgba(8,5,16,0.78);
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.6rem 0.75rem 0.6rem 1.35rem;
  transition: padding 0.35s ease;
}
.nav.is-stuck .nav-inner { padding-top: 0.45rem; padding-bottom: 0.45rem; }

/* --- Marque --- */
.nav-brand {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  white-space: nowrap;
}
.nav-brand-main {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
}
.nav-brand-sub {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  transition: color 0.25s ease;
}
.nav-brand:hover .nav-brand-sub { color: rgba(255,255,255,0.9); }

/* --- Liens + indicateur coulissant --- */
.nav-links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
.nav-links a {
  position: relative;
  z-index: 1;
  padding: 0.62rem 1.05rem;
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255,255,255,0.72);
  transition: color 0.25s ease;
}
.nav-links a:hover,
.nav-links a.active { color: #fff; }

.nav-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 999px;
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.16);
  opacity: 0;
  /* Anime en transform/width : pas de recalcul de mise en page a chaque image */
  transition: transform 0.42s cubic-bezier(.22,.72,.24,1),
              width 0.42s cubic-bezier(.22,.72,.24,1),
              opacity 0.3s ease;
  pointer-events: none;
}
.nav-indicator.is-ready { opacity: 1; }

/* --- Bouton menu (mobile) --- */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 50%;
  width: 17px;
  height: 1.5px;
  margin-left: -8.5px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.32s cubic-bezier(.22,.72,.24,1), opacity 0.2s ease;
}
.nav-toggle span:nth-child(1) { top: 18px; }
.nav-toggle span:nth-child(2) { top: 24px; }
.nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav.is-open .nav-toggle span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* --- Panneau plein ecran --- */
.nav-panel {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  padding: 6rem 2rem 3rem;
  background: rgba(6,4,12,0.94);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.nav.is-open ~ .nav-panel,
.nav-panel.is-open { opacity: 1; visibility: visible; }

.nav-panel a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: rgba(255,255,255,0.92);
  /* Etat de depart de l'apparition en cascade */
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(.22,.72,.24,1), color 0.2s ease;
}
.nav-panel.is-open a { opacity: 1; transform: none; }
.nav-panel a em {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.45);
  font-variant-numeric: tabular-nums;
}
.nav-panel a.active { color: #fff; }
.nav-panel a.active em { color: var(--accent-red); }

/* Focus visible : sans cela le clavier n'a aucun repere sur ces pastilles */
.nav-links a:focus-visible,
.nav-panel a:focus-visible,
.nav-brand:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid rgba(255,255,255,0.85);
  outline-offset: 3px;
}

@media (max-width: 860px) {
  .nav { border-radius: 22px; }
  .nav-links { display: none; }
  .nav-toggle { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .nav, .nav-inner, .nav-indicator, .nav-toggle span, .nav-panel, .nav-panel a {
    transition: none;
  }
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--accent-red); color: #fff; }
.btn-primary:hover { background: var(--accent-red-dark); }
.btn-ghost {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.32);
  color: #fff;
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.55);
}

/* ===========================================================
   ACCUEIL
   Composition asymetrique et editoriale : grande typo calee a gauche,
   bandeau defilant des emissions, puis le catalogue en lignes numerotees
   plutot qu'en cartes. Les mouvements (defilement continu, survol de ligne)
   sont volontairement differents de ceux de la page Description.
   =========================================================== */

.hx { position: relative; overflow-x: clip; }

/* --- Ouverture --- */
.hx-hero {
  position: relative;
  isolation: isolate;          /* garde la portee derriere le texte, pas derriere la page */
  min-height: 100vh;
  display: grid;
  align-content: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 9rem 1.5rem 7rem;
}
/* --- Portee musicale en filigrane ---
   Le trace est rendu en noir et fondu dans l'arriere-plan : il creuse le
   ciel au lieu de l'eclaircir. Aucun halo : le trait seul.

   portee.png est l'image haute definition fournie (3584 x 2016, trace blanc
   sur fond noir), detouree : la transparence se lit directement dans la
   luminosite, un plancher efface le voile de compression du fond. Recadree au
   pixel sur son encre : 3584 x 721, soit 4.97:1. Toujours reduite a l'affichage,
   donc jamais crenelee. Gris + alpha : la couleur vient du filtre ci-dessous,
   le fichier pese moitie moins qu'un RVBA.

   Reglage retenu apres essai comparatif (voir l'historique) : trace noir a
   0,9. Les valeurs de fondu ci-dessous derivent d'un releve fait sur la
   maquette AHBo6.jpg, alors en trace clair, puis reajuste sur le rendu noir.
   Methode du releve d'origine sur AHBo6.jpg : Methode :
   le residu apres soustraction d'un flou large donne alpha = residu /
   (255 - fond), et on ne le lit QUE sur les pixels ou le trace du fichier est
   plein — sinon les bords adoucis tirent la mesure vers le bas. Profil :
     0 %% 0,48 | 12 %% 0,53 | 56 %% 0,57 | 69 %% 0,56
     75 %% 0,44 | 81 %% 0,34 | 88 %% 0,22 | 94 %% 0,08
   Deux ecarts volontaires par rapport a ce releve, demandes sur le rendu
   reel : le bord gauche s'eteint desormais comme le bord droit, et le
   temperage au-dessus du bloc de texte est elargi et approfondi (0,55 au
   lieu de 0,80) pour degager le titre et le chapeau.
   D'ou deux masques qui se cumulent :
     sur l'enveloppe : leger repli au bord gauche, extinction a droite
     sur l'image     : temperage discret au-dessus du bloc de texte */
.hx-staff {
  position: absolute;
  left: 50%;
  top: 52.2%;               /* centre releve sur la maquette (correlation 2D) */
  width: 100vw;                /* d'un bord a l'autre, quelle que soit la largeur */
  aspect-ratio: 3584 / 721;
  transform: translate(-50%, -50%);
  z-index: -1;                 /* derriere le texte, devant le fond anime */
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg,
      rgba(0,0,0,0.030) 0%,
      rgba(0,0,0,0.100) 1.5%,
      rgba(0,0,0,0.300) 3%,
      rgba(0,0,0,0.520) 4%,
      rgba(0,0,0,0.700) 6%,
      rgba(0,0,0,0.794) 8.1%,
      rgba(0,0,0,0.783) 10%,
      rgba(0,0,0,0.581) 15%,
      rgba(0,0,0,0.375) 19%,
      rgba(0,0,0,0.380) 27.5%,
      rgba(0,0,0,0.456) 30%,
      rgba(0,0,0,0.456) 37.5%,
      rgba(0,0,0,0.646) 40%,
      rgba(0,0,0,0.648) 44%,
      rgba(0,0,0,0.981) 47.5%,
      rgba(0,0,0,1.000) 50%,
      rgba(0,0,0,0.970) 70%,
      rgba(0,0,0,0.760) 75%,
      rgba(0,0,0,0.380) 88%,
      rgba(0,0,0,0.130) 94%,
      rgba(0,0,0,0.050) 100%);
  mask-image: linear-gradient(90deg,
      rgba(0,0,0,0.030) 0%,
      rgba(0,0,0,0.100) 1.5%,
      rgba(0,0,0,0.300) 3%,
      rgba(0,0,0,0.520) 4%,
      rgba(0,0,0,0.700) 6%,
      rgba(0,0,0,0.794) 8.1%,
      rgba(0,0,0,0.783) 10%,
      rgba(0,0,0,0.581) 15%,
      rgba(0,0,0,0.375) 19%,
      rgba(0,0,0,0.380) 27.5%,
      rgba(0,0,0,0.456) 30%,
      rgba(0,0,0,0.456) 37.5%,
      rgba(0,0,0,0.646) 40%,
      rgba(0,0,0,0.648) 44%,
      rgba(0,0,0,0.981) 47.5%,
      rgba(0,0,0,1.000) 50%,
      rgba(0,0,0,0.970) 70%,
      rgba(0,0,0,0.760) 75%,
      rgba(0,0,0,0.380) 88%,
      rgba(0,0,0,0.130) 94%,
      rgba(0,0,0,0.050) 100%);
}
.hx-staff img {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  filter: brightness(0);             /* trace ramene au noir, transparence gardee */
}
/* Sur petit ecran le texte occupe toute la largeur. Le trace est allege, mais
   moins qu'a l'epoque du trace clair : en noir il fonce le fond au lieu de
   l'eclaircir, il ne dispute donc pas la lisibilite au texte. */
@media (max-width: 760px) {
  .hx-staff { width: 165vw; top: 58%; }
  .hx-staff img { opacity: 0.6; }
}

/* Le mot vient en premier, cale sur le bord gauche du titre ; le filet le
   prolonge vers la droite. Place avant, il decalait le mot du titre et
   laissait la ligne bancale une fois la mention SACEM retiree. */
.hx-index {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  max-width: 26rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin: 0 0 1.15rem;
  text-shadow: 0 1px 2px rgba(4,3,10,0.95), 0 2px 14px rgba(4,3,10,0.9);
}
.hx-index i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.45), rgba(255,255,255,0));
}

.hx-name {
  font-family: var(--font-display);
  font-size: clamp(3rem, 12vw, 8.5rem);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.84;
  color: #fff;
  margin: 0;
  text-shadow: 0 1px 3px rgba(4,3,10,0.8),
               0 4px 18px rgba(4,3,10,0.85),
               0 10px 60px rgba(4,3,10,0.8);
}
.hx-name em {
  display: block;
  font-style: normal;
  font-weight: 200;
  font-size: 0.42em;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.68);
  margin-top: 0.5rem;
  /* le mot le plus pale du bloc : c'est lui qui souffrait le plus du
     chevauchement avec la portee */
  text-shadow: 0 1px 3px rgba(4,3,10,0.9),
               0 2px 16px rgba(4,3,10,0.9),
               0 6px 34px rgba(4,3,10,0.75);
}

.hx-lead {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.65;
  color: rgba(255,255,255,0.84);
  text-shadow: 0 1px 3px rgba(4,3,10,0.95),
               0 2px 16px rgba(4,3,10,0.95),
               0 6px 30px rgba(4,3,10,0.7);
  max-width: 38ch;
  margin: 2rem 0 0;
}
.hx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.5rem;
}

/* Reperes en bas d'ouverture */
.hx-hero-foot {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 2.25rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.76);
  text-shadow: 0 2px 14px rgba(4,3,10,0.9);
}
.hx-scroll {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;          /* cible tactile confortable */
  padding: 0.35rem 0;
  color: rgba(255,255,255,0.8);
  transition: color 0.2s ease;
}
.hx-scroll:hover { color: #fff; }
.hx-scroll i {
  display: block;
  width: 42px;
  height: 1px;
  background: rgba(255,255,255,0.6);
  transform-origin: left;
  animation: hxLine 2.4s ease-in-out infinite;
}
@keyframes hxLine {
  0%, 100% { transform: scaleX(0.35); opacity: 0.45; }
  50%      { transform: scaleX(1);    opacity: 1; }
}

/* --- Emissions habillees ---
   Reprend les codes de la page plutot qu'un bandeau plein ecran : meme
   conteneur que les sections, meme filet fin, meme intitule en capitales que
   les en-tetes. L'intitule reste fixe, seuls les titres defilent. */
.hx-shows {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.hx-shows-inner {
  padding: 1.15rem 0;
  border-top: 1px solid rgba(255,255,255,0.16);
  border-bottom: 1px solid rgba(255,255,255,0.16);
}
.hx-shows-view {
  position: relative;
  overflow: hidden;
  /* Fondu des deux cotes : sans l'intitule pour fermer la composition a
     gauche, un titre coupe net au bord se lirait comme un bug. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.hx-shows-track {
  display: flex;
  width: max-content;
  animation: hxShows 42s linear infinite;
}
.hx-shows-view:hover .hx-shows-track { animation-play-state: paused; }
.hx-shows-track span {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  padding-right: 1.6rem;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: rgba(255,255,255,0.82);
  text-shadow: 0 2px 14px rgba(4,3,10,0.9);
}
.hx-shows-track span::after {
  content: "";
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
}
/* Deux copies identiques : la seconde prend le relais sans saut */
@keyframes hxShows {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- Sections --- */
.hx-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 7rem) 1.5rem;
}
.hx-head {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding-bottom: 1.1rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.16);
}
.hx-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 20px rgba(4,3,10,0.85);
}
.hx-head span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  text-shadow: 0 2px 14px rgba(4,3,10,0.9);
}

/* --- Catalogue : trois cartes a tuile ---
   Grande tuile facon icone d'application, titre dessous, action en pied.
   Meme fond, meme filet et meme rayon que les blocs du parcours. */
.hx-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.hx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.75rem 1.5rem 1.75rem;
  border-radius: 16px;
  background: rgba(8, 5, 16, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.3s cubic-bezier(.2,.7,.3,1);
}
.hx-card:hover {
  background: rgba(16, 10, 30, 0.82);
  border-color: rgba(255, 255, 255, 0.34);
  transform: translateY(-5px);
}

/* Tuile.
   Le flottement est porte par la tuile et le survol ne touche qu'a ses
   couleurs : deux transformations sur le meme element se remplaceraient. */
.hx-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  border-radius: 26px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  animation: hxFloat 6.5s ease-in-out infinite;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
/* Les trois tuiles flottent en phase : elles restent ainsi alignees
   sur une meme horizontale a chaque instant. */
@keyframes hxFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.hx-card:hover .hx-tile {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.05);
}

/* Reflet qui balaie la tuile au survol */
.hx-tile::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: linear-gradient(112deg,
    transparent 42%, rgba(255,255,255,0.10) 50%, transparent 58%);
  transform: translateX(-115%);
  transition: transform 0.75s cubic-bezier(.25,.7,.3,1);
  pointer-events: none;
}
.hx-card:hover .hx-tile::after { transform: translateX(115%); }

/* Glyphes traces au filet, comme les autres traits de la page : des formes
   pleines auraient pese bien plus lourd que la note et desequilibre le trio. */
.hx-tile svg {
  position: relative;
  width: 44px; height: 44px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hx-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 1.75rem 0 0;
}

.hx-go {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}
.hx-card:hover .hx-go { color: #fff; }
.hx-go b { display: inline-block; font-weight: 700; transition: transform 0.25s ease; }
.hx-card:hover .hx-go b { transform: translateX(5px); }

@media (max-width: 880px) {
  .hx-cards { grid-template-columns: 1fr; }
  .hx-card { padding: 2.25rem 1.5rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-card:hover { transform: none; }
  .hx-tile { animation: none; }
  .hx-tile::after { display: none; }
}

/* Page centree : le contenu occupe le milieu de l'ecran et la mention de bas
   de page est repoussee tout en bas, sans bandeau derriere elle.
   La regle du pied de page vient apres celle de .on-shader, de meme
   specificite : c'est l'ordre qui la fait gagner. */
.page-centree {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page-centree main {
  flex: 1;
  display: flex;
  align-items: center;
}
/* Haut plus epais que le bas : compense la barre de navigation flottante,
   sinon le bloc parait pose trop haut. */
.page-centree main > .hx-section {
  width: 100%;
  padding-top: 7.5rem;
  padding-bottom: 2rem;
}
.page-centree .site-footer { padding-bottom: 2rem; }

/* Page sans titre visible : le contenu commencerait juste sous la barre de
   navigation, il faut degager le haut. */
.hx-section--haut { padding-top: clamp(8rem, 12vw, 9.5rem); }

/* --- Choix des categories musicales ---
   Vingt-six entrees : la tuile carree de l'accueil, haute et espacee, aurait
   donne une page interminable. Ici chaque entree est une reglette basse —
   pictogramme a gauche, intitule a droite — et la grille se remplit d'elle-meme
   selon la largeur. auto-fill et non auto-fit : sur un grand ecran les colonnes
   gardent leur largeur au lieu de s'etirer sur la derniere rangee incomplete. */
.gen-intro {
  max-width: 46ch;
  margin: 0 0 2rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.7);
  text-shadow: 0 2px 14px rgba(4,3,10,0.9);
}
.gen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.7rem;
}
.gen-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;                    /* sans ca, un intitule long elargit sa colonne */
  min-height: 64px;                /* cible tactile large, meme sur une ligne */
  padding: 0.7rem 0.9rem;
  border-radius: 13px;
  background: rgba(8, 5, 16, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.13);
  transition: background 0.22s ease, border-color 0.22s ease,
              transform 0.28s cubic-bezier(.2,.7,.3,1);
}
.gen-card:hover {
  background: rgba(18, 11, 32, 0.86);
  border-color: rgba(255, 255, 255, 0.34);
  transform: translateY(-3px);
}
.gen-card:focus-visible {
  outline: 2px solid var(--accent-red);
  outline-offset: 3px;
}
.gen-ico {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: linear-gradient(158deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24);
  color: #fff;
  transition: border-color 0.22s ease, background 0.22s ease;
}
.gen-card:hover .gen-ico {
  border-color: rgba(255, 255, 255, 0.42);
  background: linear-gradient(158deg, rgba(255,255,255,0.24), rgba(255,255,255,0.07));
}
.gen-ico svg {
  width: 23px; height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gen-nom {
  flex: 1;
  min-width: 0;                    /* sinon un intitule long deborde de la case */
  overflow-wrap: break-word;       /* dernier recours sur un ecran tres etroit */
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #fff;
}
.gen-fleche {
  flex: 0 0 auto;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  transition: transform 0.22s ease, color 0.22s ease;
}
.gen-card:hover .gen-fleche { color: #fff; transform: translateX(4px); }

@media (max-width: 560px) {
  .gen-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .gen-nom { font-size: 0.88rem; }
  .gen-card { padding: 0.65rem 0.75rem; gap: 0.7rem; }
  .gen-ico { width: 38px; height: 38px; }
  .gen-ico svg { width: 21px; height: 21px; }
}
/* Sous 430 px, deux colonnes ne laissent plus la place a un mot comme
   « Orchestre » : on passe a une seule. */
@media (max-width: 430px) {
  .gen-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .gen-card:hover { transform: none; }
  .gen-card:hover .gen-fleche { transform: none; }
}

/* Contenu reserve aux lecteurs d'ecran */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* En-tete simple de page interne (choix des genres, page d'un genre) */
.sub-head {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.sub-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.74);
  margin: 0 0 0.7rem;
}
.sub-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: #fff;
  margin: 0 0 0.9rem;
}
.sub-lead {
  font-size: 0.98rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.8);
  max-width: 52ch;
  margin: 0;
}

/* Retour vers le choix des genres */
.sub-back {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  margin-bottom: 1.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.76);
  transition: color 0.2s ease;
}
.sub-back:hover { color: #fff; }
.sub-back b { display: inline-block; font-weight: 700; transition: transform 0.2s ease; }
.sub-back:hover b { transform: translateX(-4px); }

/* --- Bandeau deroulant du parcours ---
   Une seule information a la fois, remplacee toutes les 5 s. Les entrees sont
   empilees au meme endroit ; seule l'active est visible. La hauteur est fixee
   pour que la mise en page ne saute pas d'une entree a l'autre. */
.hx-roll {
  position: relative;
  overflow: hidden;
  min-height: 232px;
  border-radius: 16px;
  background: rgba(8, 5, 16, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* Deux cases fixes, separees par un filet ; seuls leurs textes changent. */
.hx-roll-view {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  padding: 0.5rem;
}
/* Volet basculant : le texte pivote autour d'un axe horizontal, comme la
   lamelle d'un tableau d'affichage de gare. Le sortant bascule vers l'avant,
   le suivant se redresse depuis l'arriere. La case, elle, ne bouge pas. */
/* Chaque info renvoie a sa ligne dans la frise de la page Description */
.hx-roll-text, .dsc-roll-text {
  color: inherit;
  text-decoration: none;
  border-radius: 10px;
}
.hx-roll-text:hover span, .dsc-roll-text:hover span { color: #fff; }
.hx-roll-text:hover b, .dsc-roll-text:hover b { color: var(--accent-red); }
.hx-roll-text:focus-visible, .dsc-roll-text:focus-visible {
  outline: 2px solid var(--accent-red);
  outline-offset: 4px;
}
.hx-roll-text {
  grid-area: 1 / 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateX(88deg) translateY(24%);   /* en attente, a plat vers l'arriere */
  opacity: 0;
  transition: transform 0.72s cubic-bezier(.34,.02,.2,1),
              opacity 0.4s ease 0.16s;
  pointer-events: none;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.hx-roll-text.is-active {
  transform: rotateX(0deg) translateY(0);
  opacity: 1;
  pointer-events: auto;
  transition: transform 0.72s cubic-bezier(.2,.68,.24,1),
              opacity 0.34s ease 0.14s;
}
/* Le sortant bascule vers l'avant pendant que le suivant se redresse */
.hx-roll-text.is-leaving {
  transform: rotateX(-88deg) translateY(-24%);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(.5,0,.75,0), opacity 0.3s ease;
}
.hx-roll-cell {
  min-width: 0;                 /* sinon un texte long empeche l'egalite des colonnes */
  padding: 1.1rem 1.25rem;
  display: grid;                /* empile ses textes au meme endroit */
  overflow: hidden;             /* rien ne deborde de la case pendant la bascule */
  perspective: 900px;           /* donne du relief au basculement */
}
.hx-roll-cell + .hx-roll-cell { border-left: 1px solid rgba(255, 255, 255, 0.14); }

.hx-roll-text b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  margin-bottom: 0.5rem;
  overflow-wrap: break-word;
}
.hx-roll-text span {
  display: block;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}


@media (max-width: 640px) {
  .hx-roll-view { grid-template-columns: 1fr; }
  .hx-roll-cell + .hx-roll-cell {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hx-roll-text, .hx-roll-text.is-active, .hx-roll-text.is-leaving { transition: none; }
}

/* --- Parcours : chiffres a gauche, texte a droite --- */
.hx-parcours {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.hx-figures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  overflow: hidden;
}
/* min-width:0 : sans lui, une valeur longue impose sa largeur minimale et
   les deux colonnes 1fr cessent d'etre egales. */
.hx-fig { background: rgba(8,5,16,0.72); padding: 1.5rem 1.25rem; min-width: 0; }
.hx-fig b {
  display: block;
  font-family: var(--font-display);
  /* Plancher abaisse : a 1.3rem le mot "documentaires" depassait sa colonne
     sur mobile, sans possibilite de cesure. */
  font-size: clamp(1.05rem, 2.4vw, 1.8rem);
  overflow-wrap: break-word;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  margin-bottom: 0.35rem;
}
.hx-fig span {
  display: block;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.74);
}
.hx-parcours > p {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: rgba(255,255,255,0.86);
  text-shadow: 0 2px 16px rgba(4,3,10,0.9);
  margin: 0 0 1.75rem;
}

@media (max-width: 820px) {
  .hx-parcours { grid-template-columns: 1fr; }
  .hx-hero-foot { position: static; margin-top: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-scroll i { animation: none; opacity: 0.7; }
}

/* ---------- Facebook floating pill ---------- */
.sociaux {
  position: fixed;
  top: 140px;
  right: 24px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
/* Meme matiere que les panneaux du site : verre sombre, filet clair, flou.
   Le rouge d'accent est reserve au survol, ou il sert de signal. */
.social-lien {
  width: 54px;
  height: 54px;
  border-radius: 27px;   /* moitie du cote : pastille ronde */
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(8, 5, 16, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
  transition: color 0.22s ease, border-color 0.22s ease,
              background 0.22s ease, transform 0.28s cubic-bezier(.2,.7,.3,1);
}
.social-lien:hover {
  color: var(--accent-red);
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(16, 11, 28, 0.85);
  transform: translateY(-2px);
}
.social-lien svg { width: 26px; height: 26px; fill: currentColor; }

/* Le contenu du site est large de 1180 px au plus. Avec un bouton de 54 px
   et 24 px de marge, la colonne ne flotte a droite sans mordre dessus qu'a
   partir de 1368 px de fenetre (1180 + deux fois 94). En dessous, elle se
   range dans le coin bas droit, ou elle ne recouvre rien d'utile. La taille
   ne change pas : 54 px depasse deja le minimum tactile de 44 px. */
@media (max-width: 1367px) {
  .sociaux { top: auto; bottom: 18px; right: 18px; gap: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .social-lien:hover { transform: none; }
}



/* ---------- Generic page section wrapper ---------- */
.page-bg {
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 9rem 1.5rem 4rem;
}

.panel {
  max-width: 1100px;
  margin: 0 auto;
  background: rgba(10, 6, 20, 0.55);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: clamp(1.5rem, 4vw, 3rem);
  backdrop-filter: blur(3px);
}



/* ---------- Page Description ----------
   Fond : ondes à aberration chromatique (shader-waves.js).
   Le shader est très contrasté — bandes lumineuses sur noir — donc le texte
   repose sur des surfaces opaques plutôt que sur le fond nu. */

.dsc-stage {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #05040a;   /* repli si WebGL indisponible */
}
.dsc-stage canvas {
  display: block; width: 100%; height: 100%;
  filter: brightness(1.1);     /* voir la note sur .shader-stage canvas */
}
.dsc-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.9;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(5,4,10,0.35) 0%, rgba(5,4,10,0.72) 100%),
    linear-gradient(180deg, rgba(5,4,10,0.72) 0%, rgba(5,4,10,0.45) 45%, rgba(5,4,10,0.8) 100%);
  pointer-events: none;
}

.dsc-page {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.5rem 5rem;
}

/* --- Ouverture --- */
.dsc-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8rem 0 5rem;
  perspective: 1000px;
}
.dsc-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.8fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  transform-style: preserve-3d;
}
.dsc-hero-text { min-width: 0; }

/* --- Portrait ---
   Trois niveaux imbriques pour que les transformations ne se marchent pas
   dessus : la parallaxe (JS) pilote .dsc-portrait, le flottement continu
   .dsc-portrait-media, et l'apparition .dsc-portrait-inner qui porte le cadre.
   Le flottement doit rester A L'EXTERIEUR du cadre : applique a l'interieur,
   il decalait l'image sous un parent en overflow:hidden et laissait
   apparaitre une bande vide en bas. */
.dsc-portrait {
  position: relative;
  margin: 0;
  perspective: 900px;
}
/* Halo diffus, raccord avec le fond anime */
.dsc-portrait::before {
  content: "";
  position: absolute;
  inset: -14% -10%;
  z-index: -1;
  background: radial-gradient(
    ellipse at center,
    rgba(120, 110, 160, 0.22) 0%,
    rgba(8, 6, 16, 0) 72%
  );
  pointer-events: none;
}

.dsc-portrait-inner {
  position: relative;                /* ancre le voile ::after ci-dessous */
  border-radius: 18px;               /* meme rayon que les surfaces de la page */
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 6, 16, 0.6);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.6);
  transform-origin: center;
  animation: portraitIn 1.05s cubic-bezier(.2,.72,.24,1) 0.25s both;
}

.dsc-portrait-media {
  display: block;
  animation: portraitFloat 8s ease-in-out 1.4s infinite;
}

.dsc-portrait img {
  display: block;
  width: 100%;
  /* Sans height:auto, l'attribut HTML height="3264" s'applique comme style de
     presentation et prend le pas sur aspect-ratio (image affichee en pleine
     hauteur intrinseque). */
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 22%;
  filter: grayscale(1) contrast(1.06);
}

/* Pas d'effet au survol sur le portrait : la parallaxe deplace la figure sous
   le curseur, donc sa zone de survol se derobe. Pres d'un bord, un simple
   mouvement declenchait puis annulait l'effet en boucle, ce qui produisait un
   zoom brutal. Un effet de survol ne peut pas etre stable sur un element
   dont la position suit la souris. */

/* Voile fin sur le bas : raccorde la photo au fond sombre */
.dsc-portrait-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(8,6,16,0) 55%, rgba(8,6,16,0.45) 100%);
  pointer-events: none;
}

@keyframes portraitIn {
  from { opacity: 0; transform: translateY(30px) scale(0.94) rotateY(-9deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes portraitFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}

@media (max-width: 860px) {
  .dsc-hero-inner { grid-template-columns: 1fr; }
  .dsc-portrait { max-width: 270px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .dsc-portrait-inner { animation: none; opacity: 1; transform: none; }
  .dsc-portrait-media { animation: none; }
}

.dsc-eyebrow {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin: 0 0 1.5rem;
}
.dsc-name {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 10vw, 7rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.9;
  color: #fff;
  margin: 0 0 1.75rem;
  text-shadow: 0 6px 40px rgba(0,0,0,0.75);
}
.dsc-name em {
  display: block;
  font-style: normal;
  font-weight: 200;
  color: rgba(255,255,255,0.62);
}
.dsc-lead {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.7;
  color: rgba(255,255,255,0.86);
  max-width: 46ch;
  margin: 0 0 2.25rem;
  text-shadow: 0 2px 16px rgba(0,0,0,0.85);
}
.dsc-contacts { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.dsc-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1.05rem;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 999px;
  background: rgba(6,4,12,0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.9);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
a.dsc-chip:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
  transform: translateY(-2px);
}

/* --- Chiffres clés : bandeau déroulant ---
   Les écrans sont empilés dans la même cellule de grille : la hauteur du bloc
   suit automatiquement le plus haut, sans valeur figée à maintenir. */
.dsc-roll {
  display: grid;
  margin: 4rem 0 5rem;
}
.dsc-roll {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}
/* Les textes d'une meme case sont empiles dans la meme cellule de grille :
   la case garde une hauteur fixe, calee sur son texte le plus long, et
   c'est le seul contenu qui bouge. */
.dsc-stat { display: grid; overflow: hidden; perspective: 900px; }
/* Meme volet basculant que sur l'accueil. Les quatre cases tournent
   exactement en meme temps : aucun decalage d'une case a l'autre. */
.dsc-roll-text {
  grid-area: 1 / 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateX(88deg) translateY(24%);
  opacity: 0;
  transition: transform 0.72s cubic-bezier(.34,.02,.2,1),
              opacity 0.4s ease 0.16s;
  pointer-events: none;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.dsc-roll-text.is-active {
  transform: rotateX(0deg) translateY(0);
  opacity: 1;
  pointer-events: auto;
  transition: transform 0.72s cubic-bezier(.2,.68,.24,1),
              opacity 0.34s ease 0.14s;
}
.dsc-roll-text.is-leaving {
  transform: rotateX(-88deg) translateY(-24%);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(.5,0,.75,0), opacity 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .dsc-roll-text, .dsc-roll-text.is-active, .dsc-roll-text.is-leaving { transition: none; }
}
.dsc-stat {
  padding: 1.5rem 1.35rem;
  border-radius: 16px;
  background: rgba(8,6,16,0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.14);
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(.2,.7,.3,1), border-color 0.25s ease;
  will-change: transform;
}
.dsc-stat:hover { border-color: rgba(255,255,255,0.34); }
.dsc-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.43rem, 2.6vw, 1.93rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  margin-bottom: 0.4rem;
}
.dsc-stat span {
  display: block;
  font-size: 0.905rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.76);
}

/* --- Corps : repère d'époques + frise --- */
.dsc-body {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.dsc-rail {
  position: sticky;
  top: 7.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.dsc-rail a {
  display: block;
  padding: 0.6rem 0.75rem;
  border-left: 2px solid rgba(255,255,255,0.14);
  border-radius: 0 8px 8px 0;
  font-size: 1.03rem;
  color: rgba(255,255,255,0.8);
  text-shadow: 0 2px 12px rgba(0,0,0,0.85);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.dsc-rail a:hover { color: #fff; background: rgba(255,255,255,0.06); }
.dsc-rail a.is-current {
  color: #fff;
  border-left-color: var(--accent-red);
  background: rgba(255,255,255,0.07);
}
.dsc-rail b {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.01em;
}
@media (max-width: 900px) {
  .dsc-body { grid-template-columns: 1fr; }
  .dsc-rail { display: none; }
}

.dsc-era { margin-bottom: 3.25rem; scroll-margin-top: 7rem; }
/* La ligne visee par un lien du panneau : degagee de la barre de navigation
   et signalee le temps qu'on la repere, puis rendue a son aspect normal.
   Tout est dans l'animation (fond, liseré, halo) pour que la mise en avant
   s'efface d'elle-meme au lieu de rester accrochee a la ligne. */
.dsc-entry { scroll-margin-top: 7.5rem; }
.dsc-entry.is-cible { animation: cible-cv 5s ease 0.15s both; }
@keyframes cible-cv {
  0%, 73% {
    border-color: var(--accent-red);
    background: rgba(32,10,18,0.82);
    box-shadow: 0 0 0 1px var(--accent-red), 0 0 34px rgba(255,75,92,0.45);
  }
  100% {
    border-color: rgba(255,255,255,0.09);   /* valeurs normales de .dsc-entry */
    background: rgba(8,6,16,0.66);
    box-shadow: 0 0 0 0 rgba(255,75,92,0);
  }
}
@media (prefers-reduced-motion: reduce) {
  /* Sans animation, la mise en avant reste fixe ; le script retire la classe
     au bout de 3 s, ce qui la fait disparaitre au meme moment. */
  .dsc-entry.is-cible {
    animation: none;
    border-color: var(--accent-red);
    background: rgba(32,10,18,0.82);
  }
}
.dsc-era:last-child { margin-bottom: 0; }
.dsc-era-head {
  padding-bottom: 0.9rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.dsc-era-years {
  font-family: var(--font-display);
  font-size: clamp(1.23rem, 2.9vw, 1.83rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,0.8);
}

.dsc-list { perspective: 1200px; }
.dsc-entry {
  display: grid;
  grid-template-columns: 7.25rem 1fr;
  gap: 1.5rem;
  padding: 1.15rem 1.1rem;
  margin-bottom: 0.4rem;
  border-radius: 12px;
  background: rgba(8,6,16,0.66);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.09);
  transform-style: preserve-3d;
  transition: transform 0.3s cubic-bezier(.2,.7,.3,1),
              background 0.25s ease, border-color 0.25s ease;
}
.dsc-entry:hover {
  background: rgba(16,12,30,0.78);
  border-color: rgba(255,255,255,0.26);
  transform: translateZ(16px);
}
.dsc-year {
  font-size: 0.975rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.72);
  padding-top: 0.1rem;
  white-space: nowrap;
}
.dsc-entry h3 {
  margin: 0 0 0.3rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.4;
  color: #fff;
}
.dsc-entry p {
  margin: 0;
  font-size: 1.025rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
}

/* --- Révélation 3D au défilement.
       Masquée seulement si le script s'est exécuté (.js-reveal), pour que la
       page reste entièrement lisible sans JavaScript. --- */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(26px) rotateX(-9deg);
  transform-origin: top center;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2,.7,.3,1);
}
.js-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
  .dsc-entry:hover, .dsc-stat:hover { transform: none; }
}

@media (max-width: 560px) {
  .dsc-entry { grid-template-columns: 1fr; gap: 0.3rem; }
  .dsc-year { font-size: 0.905rem; }
}

/* ---------- Musiques (audio player) ---------- */
.player-card {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.player-card img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
}
.player-meta { flex: 1; min-width: 160px; }
.player-meta .artist { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.player-meta .track-title { font-size: 1.3rem; font-weight: 700; margin: 0.15rem 0; }
.player-meta .track-sub { font-size: 0.85rem; color: var(--text-muted); }
.player-controls { display: flex; align-items: center; gap: 0.8rem; }
.play-btn {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.track-list { margin-top: 1rem; }
.track-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: background 0.15s ease;
}
.track-row:hover { background: rgba(255,255,255,0.05); }
.track-row .num { width: 1.6rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.track-row .name { flex: 1; font-weight: 600; letter-spacing: 0.02em; }
.track-row .dur { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 0.9rem; }

/* ===========================================================
   LECTEUR VIDEO — pages Clips et Generiques TV
   Scene principale puis grille des entrees.
   =========================================================== */

.vid {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(7rem, 12vw, 9rem) 1.5rem 4rem;
}

/* --- Scene --- */
.vid-screen {
  position: relative;
  /* La navigation est fixe : sans cette marge de defilement, un retour au
     lecteur le collerait sous la barre et masquerait son haut. */
  scroll-margin-top: 5.5rem;
  /* La largeur est deduite de la hauteur max : garde le 16/9 exact au lieu
     de laisser max-height ecraser le rapport. */
  width: min(100%, calc(56vh * 16 / 9));
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255,255,255,0.07), rgba(255,255,255,0) 62%),
    rgba(8, 6, 16, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

/* La video occupe tout l'ecran, derriere le bouton et la mention. Le fond de
   l'ecran reste visible tant qu'aucune source n'est posee. */
.vid-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  border-radius: inherit;
}
/* Pendant la lecture, les commandes natives doivent rester atteignables :
   le bouton et la mention s'effacent, plus rien ne les recouvre. */
.vid-screen.is-playing .vid-play,
.vid-screen.is-playing .vid-note { display: none; }

/* Bouton de lecture : l'anneau qui respire est un pseudo-element separe, pour
   ne pas entrer en conflit avec l'agrandissement du bouton au survol. */
.vid-play {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s cubic-bezier(.2,.7,.3,1);
}
.vid-play:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.5); transform: scale(1.06); }
.vid-play svg { width: 26px; height: 26px; fill: currentColor; margin-left: 3px; }
.vid-play::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  animation: vidPulse 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes vidPulse {
  0%   { transform: scale(0.94); opacity: 0.7; }
  70%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

.vid-note {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

/* --- Titre et navigation sous la scene --- */
.vid-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  width: min(100%, calc(56vh * 16 / 9));
  margin: 1.6rem auto 0;
}
.vid-index {
  /* Poses sur le fond nu : l'ombre evite qu'une trainee d'etoile traversant
     une lettre ne la fasse disparaitre. */
  text-shadow: 0 2px 12px rgba(4, 3, 10, 0.95);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 0.4rem;
}
.vid-title {
  text-shadow: 0 2px 16px rgba(4, 3, 10, 0.95);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0;
  overflow-wrap: break-word;
}
.vid-controls { display: flex; gap: 0.6rem; flex: none; }
.vid-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.vid-btn:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.45); color: #fff; }
.vid-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* --- En-tete de la liste --- */
.vid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 1.1rem;
  margin: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.vid-head h2 {
  text-shadow: 0 2px 16px rgba(4, 3, 10, 0.95);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0;
}
.vid-search {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.vid-search:focus-within { border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.08); }
.vid-search svg { width: 15px; height: 15px; flex: none; fill: none; stroke: rgba(255,255,255,0.6); stroke-width: 1.9; }
.vid-search input {
  width: 190px;
  max-width: 42vw;
  border: none;
  outline: none;
  background: none;
  color: #fff;
  font-family: inherit;
  font-size: 0.88rem;
}
.vid-search input::placeholder { color: rgba(255,255,255,0.5); }

/* --- Grille --- */
.vid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
}
/* L'attribut hidden ne l'emporte pas sur un display pose par une regle :
   sans ceci, masquer .vid-search ou .vid-controls reste sans effet. */
[hidden] { display: none !important; }

/* Vignette : l'image de la video remplit la case, le texte passe devant,
   un voile degrade garantit sa lisibilite quelle que soit l'image. */
.vid-item-vue {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  opacity: 0.78;
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(.2,.7,.3,1);
}
.vid-item:hover .vid-item-vue,
.vid-item.is-current .vid-item-vue { opacity: 1; }
.vid-item:has(.vid-item-vue)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg,
    rgba(6,4,12,0.55) 0%, rgba(6,4,12,0.12) 40%, rgba(6,4,12,0.88) 100%);
  pointer-events: none;
}
.vid-item-name { position: relative; z-index: 1; }
.vid-item-num  { z-index: 1; }

.vid-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 16 / 10;
  min-height: 118px;      /* laisse respirer les vignettes a sous-titre */
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: rgba(8, 6, 16, 0.66);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.11);
  cursor: pointer;
  text-align: left;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.28s cubic-bezier(.2,.7,.3,1);
}
.vid-item:hover { background: rgba(16,11,28,0.78); border-color: rgba(255,255,255,0.3); transform: translateY(-4px); }
.vid-item.is-current { border-color: rgba(255,255,255,0.55); background: rgba(20,14,34,0.85); }
.vid-item-num {
  position: absolute;
  top: 0.85rem;
  left: 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
}
.vid-item.is-current .vid-item-num { color: var(--accent-red); }
.vid-item-name {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  overflow-wrap: break-word;
}

/* Ligne secondaire des vignettes : chaine et annee, uniquement sur les
   generiques. */
.vid-item-sub {
  margin-top: 0.2rem;
  font-size: 0.76rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.66);
  overflow-wrap: break-word;
}
.vid-item.is-current .vid-item-sub { color: rgba(255, 255, 255, 0.8); }

.vid-more {
  margin: 1.75rem 0 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
  text-shadow: 0 2px 12px rgba(4, 3, 10, 0.95);
  max-width: 60ch;
}

.vid-empty {
  grid-column: 1 / -1;
  padding: 2rem 0;
  text-align: center;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 560px) {
  .vid-meta { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .vid-play::after { animation: none; }
  .vid-play:hover, .vid-item:hover { transform: none; }
}

/* ---------- Footer ---------- */
/* Pied de page sans bandeau : il se fond dans le fond anime de chaque page. */
.site-footer {
  text-align: center;
  padding: 2.5rem 1.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-shadow: 0 2px 12px rgba(4, 3, 10, 0.95);
  background: transparent;
}

/* Variante contact (accueil) : Facebook et coordonnées y sont regroupés,
   plutôt qu'un bouton flottant qui recouvre le contenu. */
.footer-contact {
  text-align: left;
  padding: clamp(2.5rem, 5vw, 3.5rem) 1.5rem 2.25rem;
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.75rem;
}
.footer-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 0.85rem;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;          /* cible tactile confortable */
  padding: 0.55rem 1.05rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.footer-link:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.footer-link svg { width: 16px; height: 16px; fill: currentColor; }
.footer-legal {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .fb-fab { top: auto; bottom: 20px; right: 16px; }
  .page-bg { background-attachment: scroll; }
}


/* ===== Mentions legales =====================================
   Page de texte : une seule colonne etroite, mesure de lecture
   limitee a 68 caracteres environ. */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(7rem, 12vw, 9rem) 1.5rem 4rem;
}
.legal h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.9rem);
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
}
.legal-maj {
  font-size: 0.78rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 2.4rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.legal section {
  padding: 1.5rem 1.6rem;
  margin-bottom: 1rem;
  border-radius: 16px;
  background: rgba(8, 5, 16, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.legal h2 {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 0.9rem;
}
.legal p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 0.9rem;
}
.legal p:last-child { margin-bottom: 0; }
.legal a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--accent-red); }

/* Lien vers les mentions legales. Cible la seule classe posee sur ce lien :
   viser .site-footer a soulignait aussi les boutons de contact. */
.lien-legal {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lien-legal:hover { color: #fff; }
.footer-sep { opacity: 0.45; margin: 0 0.55rem; }

/* --- Choix des categories musicales : ronds en quinconce ---
   Remplace les reglettes de .gen-grid sur la page Musiques. Les 26 genres sont
   ranges en rangees centrees qui alternent une case de plus, une case de moins :
   7-6-7-6 sur grand ecran, 6-5-6-5-4 sur tablette, 3-4-3-4-3-4-3-2 sur telephone.
   Aucune rangee ne laisse de trou. Les coupures de ligne sont des .gr-coupe
   placees dans le HTML ; chaque classe c-d / c-m / c-p ne s'active qu'a sa largeur.
   Reglages retenus : ronds 70 px, logos 34 px, opacite du fond 125 %. */
.gr-section { padding-top: clamp(7rem, 11vw, 8.5rem); }
.gen-intro.gr-intro { margin: 0 0 2.2rem; max-width: none; }
.gr-intro strong { color: #fff; font-weight: 700; }

.gen-grid.gr-grille {
  --rond: 70px;
  --logo: 34px;
  --op: 1.25;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 0.5rem;
  column-gap: 0;
}
.gr-coupe { display: none; flex-basis: 100%; height: 0; }
@media (min-width: 860px) { .gr-coupe.c-d { display: block; } }

.gr-grille .gen-card {
  flex: 0 0 12.5%;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.7rem;
  min-height: 0;
  padding: 0.2rem 0.3rem 0.8rem;
  background: none;
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.gr-grille .gen-card:hover { background: none; transform: none; }
.gr-grille .gen-card:focus-visible { outline: none; }

.gr-grille .gen-ico {
  width: var(--rond);
  height: var(--rond);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,calc(0.14 * var(--op))), rgba(255,255,255,calc(0.03 * var(--op))) 70%);
  border: 1px solid rgba(255,255,255,calc(0.22 * var(--op)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease,
              transform .3s cubic-bezier(.2,.7,.3,1);
}
.gr-grille .gen-ico svg { width: var(--logo); height: var(--logo); }
.gr-grille .gen-nom {
  flex: 0 0 auto;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.25;
  color: rgba(255,255,255,0.86);
  text-shadow: 0 2px 12px rgba(4,3,10,0.9);
  transition: color .2s ease;
}
.gr-grille .gen-fleche { display: none; }

/* trait lumineux sous l'intitule au survol */
.gr-grille .gen-card::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #9fd4ff, transparent);
  transform: translateX(-50%) scaleX(0);
  transition: transform .28s ease;
}
.gr-grille .gen-card:hover .gen-ico,
.gr-grille .gen-card:focus-visible .gen-ico {
  border-color: rgba(190,225,255,0.95);
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,calc(0.2 * var(--op))), rgba(255,255,255,calc(0.05 * var(--op))) 70%);
  box-shadow: 0 0 0 3px rgba(150,205,255,0.16), 0 0 22px rgba(140,200,255,0.45),
              inset 0 1px 0 rgba(255,255,255,0.3);
  transform: translateY(-3px);
}
.gr-grille .gen-card:hover .gen-nom,
.gr-grille .gen-card:focus-visible .gen-nom { color: #fff; }
.gr-grille .gen-card:hover::after,
.gr-grille .gen-card:focus-visible::after { transform: translateX(-50%) scaleX(1); }

@media (min-width: 561px) and (max-width: 859px) {
  .gr-grille .gen-card { flex-basis: 16%; }
  .gr-coupe.c-m { display: block; }
}
@media (max-width: 560px) {
  .gen-grid.gr-grille { row-gap: 0.4rem; }
  .gr-grille .gen-card { flex-basis: 25%; padding-left: 0.1rem; padding-right: 0.1rem; }
  .gr-coupe.c-p { display: block; }
  .gr-grille .gen-ico { width: calc(var(--rond) * 0.87); height: calc(var(--rond) * 0.87); }
  .gr-grille .gen-ico svg { width: calc(var(--logo) * 0.87); height: calc(var(--logo) * 0.87); }
  .gr-grille .gen-nom { font-size: 0.74rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gr-grille .gen-ico, .gr-grille .gen-card::after { transition: none; }
  .gr-grille .gen-card:hover .gen-ico { transform: none; }
}