/* ==========================================================================
   HUNGRY JAZZ — PAGE À PROPOS
   --------------------------------------------------------------------------
   Feuille chargée UNIQUEMENT par /a-propos/. Les pages validées ne peuvent
   pas être atteintes par ce fichier.

   C'est la page de MARQUE, pas la page d'un univers : elle n'a donc pas
   d'attribut `data-universe` et n'utilise pas `--c-univers`. Les trois
   couleurs primaires y cohabitent — bleu, orange, rose — chacune restant
   attachée à son univers là où elle désigne quelque chose (les passerelles
   vers les cours, le panneau de chaque professeur).

   Rythme des fonds, pensé comme une séquence d'affiches :
     hero NOIR → approche BLANC → univers NOIR → Karl BLEU
     → Vivian NOIR → collectif BLANC → appel ROSE
   Deux sections de même fond ne se suivent jamais.
   ========================================================================== */

/* Le header est fixe : une ancre ne doit jamais glisser sous le bandeau. */
[id] { scroll-margin-top: calc(var(--header-h-compact) + var(--sp-s)); }

/* ==========================================================================
   HERO — AFFICHE TYPOGRAPHIQUE
   --------------------------------------------------------------------------
   Ni vidéo ni 100svh : les deux appartiennent à l'accueil. Ici le sujet est
   le nom lui-même, posé comme sur une affiche. Le H1 tient en deux mots,
   chacun sur sa ligne, soulignés d'un filet de couleur ; le second mot est
   décalé vers la droite et vient toucher le bord de la colonne.
   ========================================================================== */
.ahero {
  position: relative;
  background: var(--c-ink-surface);
  color: var(--c-on-ink);
  padding-block: calc(var(--header-h) + var(--sp-l)) var(--sp-xl);
  overflow: hidden;      /* autorise le débord des éléments graphiques */
  isolation: isolate;
}

/* Damier issu du logo, à la limite du perceptible : la même texture que le
   hero d'accueil, donc la même famille visuelle. */
.ahero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: repeating-conic-gradient(#0A0A0A 0% 25%, #000 0% 50%);
  background-size: clamp(64px, 9vw, 128px) clamp(64px, 9vw, 128px);
}

/* Aucune forme de couleur flottante ici : le client n'en voulait pas, et
   elles ne servaient qu'à combler un vide que la typographie devait remplir
   elle-même. Le hero ne tient plus qu'à trois choses — le damier du logo,
   le nom en très grand, et les deux filets de couleur sous les mots. */

.ahero__kicker {
  font-family: var(--f-cond);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-on-ink-muted);
  margin-bottom: var(--sp-m);
}

/* ---- Le nom ------------------------------------------------------------
   Le contenu textuel du H1 reste exactement « Hungry Jazz » : le découpage
   en deux lignes ne sert qu'à la révélation par masque et à la composition.
   `inline-block` sur la ligne intérieure — et non `block` comme ailleurs —
   pour que le filet de couleur épouse la largeur du MOT et non celle de la
   colonne. La révélation par masque continue de fonctionner : c'est le
   parent `.line` qui découpe. */
.ahero__h1 {
  font-family: var(--f-display);
  font-weight: var(--fw-black);
  /* Le nom doit remplir la bande, c'est lui qui fait l'affiche : a 200 px
     il n'occupait que 70 % de la colonne et laissait un vide que des formes
     de couleur venaient boucher. Mesure sur « HUNGRY », le plus long. */
  font-size: clamp(3rem, 17.5vw, 15.5rem);
  line-height: .82;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin-bottom: var(--sp-l);
}

.ahero__h1 .line__in {
  display: inline-block;
  padding-bottom: .09em;
}

/* Filet de couleur sous chaque mot, à la largeur du mot. */
.ahero__h1 .line__in::after {
  content: "";
  display: block;
  height: clamp(6px, 1vw, 14px);
  margin-top: .06em;
  background: var(--c-solo-jazz);
}
.ahero__h1 .ahero__mot--2::after { background: var(--c-afro); }

/* Le second mot se cale a DROITE : premier mot au fer a gauche, second au
   fer a droite. L'asymetrie tient alors a la difference de longueur des deux
   mots, et non a un decalage en `vw` qu'il faudrait re-regler a chaque
   largeur. La bande est occupee d'un bord a l'autre. */
.ahero__h1 .line:nth-child(2) { text-align: right; }

.ahero__lead {
  max-width: 52ch;
  font-size: var(--fs-lead);
  line-height: 1.4;
  font-weight: var(--fw-medium);
}
.ahero__lead--2 {
  margin-top: var(--sp-s);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--c-on-ink-muted);
}

/* Les deux paragraphes cote a cote : le bas du hero occupe la largeur sans
   qu'aucun element decoratif n'ait a la remplir. */
@media (min-width: 64em) {
  .ahero__textes {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--sp-xl);
    align-items: start;
  }
  .ahero__lead { max-width: none; }
  .ahero__lead--2 { margin-top: 0; }
}

.ahero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-s);
  margin-top: var(--sp-l);
}

/* Fond sombre : le bouton principal s'inverse, comme partout ailleurs. */
.ahero .btn--primary {
  background: var(--c-paper);
  color: var(--c-ink);
  border-color: var(--c-paper);
}
.ahero .btn--primary:hover,
.ahero .btn--primary:focus-visible { background: transparent; color: var(--c-paper); }
.ahero .btn--ghost:hover,
.ahero .btn--ghost:focus-visible { background: var(--c-paper); color: var(--c-ink); }

/* ==========================================================================
   APPROCHE — une phrase en très grand, le reste en contrepoint
   --------------------------------------------------------------------------
   Pas de carte, pas d'encadré : une déclaration typographique, et le texte
   d'explication décalé plus bas à droite. Le surlignage jaune porte la fin
   de la phrase — c'est un vrai <mark>, pas une décoration.
   ========================================================================== */
/* La declaration prend TOUTE la largeur : c'est ce qui lui donne son echelle.
   Le texte d'explication vient ensuite, decale vers la droite et plus etroit
   — l'asymetrie nait du decalage, pas d'une grille exotique. */
.manifeste__phrase {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3.2vw, 2.75rem);
  font-weight: var(--fw-black);
  line-height: 1.06;
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

/* Surlignage : le jaune pâle de la palette, texte noir — 17,19:1 mesuré.
   `box-decoration-break` pour que le fond suive proprement les retours à
   la ligne au lieu de s'arrêter au premier. */
.manifeste__phrase mark {
  background: var(--p-yellow);
  color: var(--c-ink);
  padding: .04em .12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.manifeste__phrase { margin-bottom: var(--sp-l); }

.manifeste__corps { max-width: 46ch; }
.manifeste__corps p + p { margin-top: var(--sp-s); }
/* Un filet court ancre le contrepoint : sans lui, le paragraphe flottait. */
.manifeste__corps { border-top: var(--bd-block) solid var(--c-solo-jazz); padding-top: var(--sp-s); }
@media (min-width: 64em) {
  .manifeste__corps { margin-inline-start: 42%; }
}

/* ==========================================================================
   UNIVERS — quatre passerelles, jamais quatre cartes identiques
   --------------------------------------------------------------------------
   Une liste en escalier : chaque entrée s'enfonce un peu plus vers la
   droite, porte son bloc de couleur, et la couleur envahit la ligne au
   survol comme au focus clavier. Le bloc est toujours visible : rien ne
   dépend du survol seul.
   ========================================================================== */
.familles {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--bd-hair) solid var(--c-rule-soft-inv);
}

.familles__item { border-bottom: var(--bd-hair) solid var(--c-rule-soft-inv); }

/* L'escalier. En dessous de 48em on l'annule : sur un petit écran il
   grignoterait la largeur de lecture sans rien apporter. */
@media (min-width: 48em) {
  .familles__item:nth-child(2) .familles__link { padding-inline-start: clamp(1rem, 5vw, 5rem); }
  .familles__item:nth-child(3) .familles__link { padding-inline-start: clamp(2rem, 10vw, 10rem); }
  .familles__item:nth-child(4) .familles__link { padding-inline-start: clamp(3rem, 15vw, 15rem); }
}

.familles__link {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: var(--sp-s);
  min-height: var(--tap-min);
  padding-block: var(--sp-m);
  color: var(--c-on-ink);
  transition: color var(--t-fast) var(--ease) 0ms;
}

/* L'aplat balaie la ligne, de bord à bord de la page. Même mécanique que le
   planning : le pseudo-élément reste enfermé dans le lien grâce à
   `isolation`, et passe derrière le texte. */
.familles__link::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: calc(var(--gutter) * -1);
  background: var(--c-fam);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease-expo);
  z-index: -1;
}
.familles__link:hover::before,
.familles__link:focus-visible::before { transform: scaleX(1); }

/* Le texte bascule au noir sur l'aplat, avec le retard du balayage : sans ce
   délai il deviendrait noir sur noir pendant ~300 ms. */
.familles__link:hover,
.familles__link:focus-visible {
  color: var(--c-on-color);
  transition-delay: 300ms;
}

/* Le carré de couleur : le seul repère permanent, il ne dépend d'aucun état. */
.familles__bloc {
  flex: none;
  width: clamp(24px, 3.2vw, 44px);
  height: clamp(24px, 3.2vw, 44px);
  background: var(--c-fam);
}
/* Sur l'aplat, le carré passe en noir pour rester lisible. */
.familles__link:hover .familles__bloc,
.familles__link:focus-visible .familles__bloc {
  background: var(--c-ink);
  transition: background-color var(--t-fast) var(--ease) 340ms;
}

.familles__texte { display: grid; gap: 2px; }

.familles__nom {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 4vw, 3.25rem);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.familles__sous {
  font-family: var(--f-cond);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-on-ink-muted);
}
/* Sur l'aplat, le sous-titre passe au noir attenue. La valeur est .88 et non
   .72 : a 72 % sur le bleu #4080C0 la mesure tombe a 3,84:1, sous le seuil AA.
   C'est la meme correction que D-82, appliquee ici des l'ecriture. */
.familles__link:hover .familles__sous,
.familles__link:focus-visible .familles__sous {
  color: rgba(0, 0, 0, .88);
  transition-delay: 340ms;
}

.familles__ico {
  margin-inline-start: auto;
  font-family: var(--f-cond);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  transition: transform var(--t-base) var(--ease);
}
.familles__link:hover .familles__ico,
.familles__link:focus-visible .familles__ico { transform: translateX(.35em); }

/* ==========================================================================
   CHAPITRES KARL & VIVIAN
   --------------------------------------------------------------------------
   Ce n'est pas le bloc professeurs de la homepage : le nom devient un titre
   de chapitre pleine largeur, et le portrait remonte sur sa dernière ligne.
   Le chevauchement est la composition — il est annulé sous 64em, où il
   deviendrait illisible.
   ========================================================================== */
.chapitre {
  padding-block: var(--sp-xl);
  overflow: hidden;
}

.chapitre--karl {
  background: var(--c-solo-jazz);
  color: var(--c-on-color);
}
/* Vivian sur le rose de la charte, comme sur la homepage : le code couleur
   des personnes reste le même d'une page à l'autre. Texte noir — 12,1:1. */
.chapitre--vivian {
  background: var(--c-stardust);
  color: var(--c-on-color);
}

.chapitre__num {
  font-family: var(--f-cond);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  margin-bottom: var(--sp-s);
  opacity: .88;             /* même valeur d'accessibilité que partout (D-82) */
}
.chapitre--vivian .chapitre__num { opacity: .88; }

/* Le nom, en très grand. Deux lignes, révélées par masque. */
.chapitre__nom {
  font-family: var(--f-display);
  /* Un cran plus grand : a 128 px le nom n'occupait que 58 % de la colonne
     et la bande de couleur paraissait vide autour. A 176 px il en occupe
     80 %. Mesure faite sur « BROCHARD », le plus long des deux. */
  font-size: clamp(2.5rem, 10.5vw, 11rem);
  font-weight: var(--fw-black);
  line-height: .84;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin-bottom: var(--sp-l);
}

.chapitre__grille { display: grid; gap: var(--sp-l); }
/* La piste du portrait vaut EXACTEMENT sa largeur (`auto`), et non une
   fraction de la grille : c'est ce qui supprime la colonne a moitie vide.
   Le texte occupe tout le reste. */
@media (min-width: 64em) {
  .chapitre__grille {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-xl);
    align-items: start;
  }
  /* Le portrait remonte sur la derniere ligne du nom, mais d'un cran
     seulement : a -86 px il mangeait 80 % de la hauteur des lettres.
     Ici il n'entame que l'interligne et le bas des jambages. */
  .chapitre--karl .chapitre__media { margin-top: clamp(-2.75rem, -2.4vw, -1rem); }
  /* Son portrait etant a droite et son nom a gauche, rien ne les fait se
     rencontrer : le portrait peut donc remonter franchement et venir occuper
     le vide qui suivait le nom. */
  .chapitre--vivian .chapitre__media { margin-top: clamp(-9rem, -9vw, -3rem); }

  /* Vivian : composition en miroir. La grille est inversee piste par piste
     — et non par une marge automatique. C'etait la cause du defaut signale :
     `margin-inline-start: auto` faisait passer le bloc en « fit-content »,
     l'image en `width: 100%` n'avait plus de reference et tombait a 0 px.
     Les deux portraits mesurent desormais rigoureusement la meme chose. */
  .chapitre--vivian .chapitre__grille { grid-template-columns: minmax(0, 1fr) auto; }
  .chapitre--vivian .chapitre__media { grid-column: 2; grid-row: 1; }
  .chapitre--vivian .chapitre__corps { grid-column: 1; grid-row: 1; }
  /* Le nom reste au fer a gauche, comme celui de Karl. Aligne a droite, il
     laissait un grand vide a sa gauche — signale par le client, et il avait
     raison : rien ne venait l'occuper. Les deux chapitres restent distincts
     par la couleur du fond et par le cote du portrait, ce qui suffit. */
}

/* Au-dela de 80em, le texte se met lui-meme sur deux colonnes : sans cela il
   restait 247 px de vide mesures a droite du dernier paragraphe, et la bande
   de couleur paraissait a moitie remplie. Les colonnes tombent a ~44 signes,
   la longueur de ligne d'un magazine. */
@media (min-width: 80em) {
  .chapitre__corps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-l);
    align-items: start;
  }
  /* La marge basse du filet s'ajoutait au `gap` de la grille : 104 px de
     vide sous les disciplines. Le `gap` suffit. */
  .chapitre__disciplines { grid-column: 1 / -1; margin-bottom: 0; }
}

/* Les portraits fournis mesurent 267 × 273 px. On plafonne donc leur
   affichage : au-delà, l'agrandissement se voit. La composition vise le
   « portrait très grand » demandé, mais la typographie porte l'échelle tant
   que des fichiers plus définis ne sont pas fournis — il suffira de relever
   cette seule valeur. Voir docs/DECISIONS.md D-87.
   `width` et non `max-width` : la piste `auto` de la grille doit connaitre
   la largeur exacte du portrait pour ne pas laisser de vide. */
.chapitre__media { width: clamp(220px, 26vw, 380px); }
.chapitre__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 267 / 273;
  object-fit: cover;
  filter: grayscale(1);
}
/* Plus de marge automatique ici : c'est la grille qui place le portrait.
   Voir le commentaire de `.chapitre--vivian .chapitre__grille`. */

.chapitre__disciplines {
  font-family: var(--f-cond);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  border-top: var(--bd-rule) solid currentColor;
  border-bottom: var(--bd-hair) solid currentColor;
  padding-block: var(--sp-2xs);
  margin-bottom: var(--sp-m);
}
/* Sur le rose, le filet et le texte restent noirs : c'est la meme
   composition que chez Karl, seule la couleur du fond change. */

.chapitre__col > * + * { margin-top: var(--sp-s); }

/* Le palmarès est une ligne parmi d'autres, pas un tableau d'honneur :
   corps réduit, filet discret, aucune mise en avant. */
.chapitre__palmares {
  margin-top: var(--sp-m);
  padding-left: var(--sp-s);
  border-left: var(--bd-rule) solid currentColor;
  font-size: var(--fs-label);
  line-height: 1.5;
}

.chapitre__lien { margin-top: var(--sp-m); }

/* ==========================================================================
   COLLECTIF + TEASER STARDUST
   ========================================================================== */
.collectif { display: grid; gap: var(--sp-l); }
@media (min-width: 64em) {
  .collectif { grid-template-columns: 7fr 5fr; gap: var(--sp-xl); align-items: start; }
}

.collectif__corps { max-width: 52ch; }
.collectif__corps p + p { margin-top: var(--sp-s); }

/* Le teaser reste secondaire : un filet de couleur, pas un encadré. */
.teaser {
  border-top: var(--bd-block) solid var(--c-stardust);
  padding-top: var(--sp-s);
}

.teaser__titre {
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: var(--ls-display);
  margin-bottom: var(--sp-2xs);
}

.teaser__texte { color: var(--c-on-paper-muted); margin-bottom: var(--sp-s); }

/* ==========================================================================
   APPEL FINAL — encre, et les trois primaires en bandeau
   --------------------------------------------------------------------------
   Le rose appartient desormais au chapitre de Vivian : le reprendre ici
   ferait doublon. La page se referme donc sur la marque elle-meme — noir, et
   les trois couleurs cote a cote — plutot que sur un univers en particulier.
   ========================================================================== */
.cta-band--marque {
  background: var(--c-ink-surface);
  color: var(--c-on-ink);
}

.cta-band__barres {
  display: flex;
  gap: var(--sp-3xs);
  margin-bottom: var(--sp-m);
}
.cta-band__barres span {
  display: block;
  height: var(--bd-block);
  width: clamp(48px, 8vw, 120px);
}
.cta-band__barres span:nth-child(1) { background: var(--c-solo-jazz); }
.cta-band__barres span:nth-child(2) { background: var(--c-afro); }
.cta-band__barres span:nth-child(3) { background: var(--c-stardust); }

/* Sur fond sombre, le bouton principal s'inverse — comme partout ailleurs.
   Sans cela il heriterait de l'aplat noir de `.cta-band` et disparaitrait. */
.cta-band--marque .btn--primary {
  background: var(--c-paper);
  color: var(--c-ink);
  border-color: var(--c-paper);
}
.cta-band--marque .btn--primary:hover,
.cta-band--marque .btn--primary:focus-visible { background: transparent; color: var(--c-paper); }
.cta-band--marque .btn--ghost:hover,
.cta-band--marque .btn--ghost:focus-visible { background: var(--c-paper); color: var(--c-ink); }

/* Le titre se resserre pour laisser le texte le suivre de pres. */
.cta-band--marque .cta-band__title { margin-bottom: var(--sp-s); }

.cta-band__texte {
  max-width: 44ch;
  font-size: var(--fs-lead);
  line-height: 1.4;
  margin-bottom: var(--sp-m);
}

/* ==========================================================================
   MOUVEMENT RÉDUIT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .familles__link::before { transition: none; }
  .familles__ico { transition: none; }
}

/* ==========================================================================
   VIDÉOS — quatre vignettes, lecture en grand
   --------------------------------------------------------------------------
   Quatre emplacements 16/9 alignés. Le clic n'agrandit pas la vignette : il
   ouvre la vidéo dans une fenêtre posée par-dessus la page. À quatre par
   ligne un lecteur en place ne ferait que 311 px de large — illisible. Dans
   la fenêtre il monte à 1100 px.

   Quatre colonnes seulement au-delà de 64em ; deux en tablette, une en
   mobile.
   ========================================================================== */
.videos {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 40em) { .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .videos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* La vignette est un LIEN : sans JavaScript, elle mène à YouTube. Le rapport
   16/9 est posé ici, donc la place est réservée avant tout chargement. */
.video__lien {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  color: var(--c-on-ink);
  background: var(--c-ink-surface);
  overflow: hidden;
}

/* La miniature YouTube, servie depuis le projet. En niveaux de gris comme
   toutes les photographies du site (brief §3.6) : portraits, vidéo du hero.
   Quatre images en couleur seraient les seules de tout le site.
   → Pour les repasser en couleur : supprimer cette ligne `filter`. */
.video__vignette {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: transform var(--t-slow) var(--ease-out);
}
.video__lien:hover .video__vignette,
.video__lien:focus-visible .video__vignette { transform: scale(1.04); }

/* Bandeau plein, pas un voile dégradé : le titre est garanti lisible quelle
   que soit l'image dessous — 21:1, sans avoir à mesurer image par image.
   C'est aussi la forme qui convient à la DA : arête franche, pas de fondu. */
.video__barre {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  padding: var(--sp-2xs) var(--sp-s);
  background: var(--c-ink-surface);
}

/* Triangle de lecture, dessiné en CSS : aucune icône à charger. */
.video__glyphe {
  flex: none;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent var(--c-solo-jazz);
  transition: transform var(--t-base) var(--ease);
}
.video__lien:hover .video__glyphe,
.video__lien:focus-visible .video__glyphe { transform: scale(1.2); }

.video__titre {
  font-family: var(--f-cond);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.25;
}

.videos__note { margin-top: var(--sp-l); }

/* ==========================================================================
   FENÊTRE DE LECTURE
   --------------------------------------------------------------------------
   Le lecteur occupe jusqu'à 1100 px de large, sur un voile noir. Fermeture
   au bouton, à Échap, ou par un clic sur le voile ; le focus est enfermé
   dedans tant qu'elle est ouverte et revient sur la vignette à la sortie.
   L'iframe est détruite à la fermeture — la lecture s'arrête réellement.
   ========================================================================== */
.vbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: grid;
  place-items: center;
  padding: var(--gutter);
}
.vbox[hidden] { display: none; }

/* Voile : assez dense pour isoler le lecteur du contenu de la page. */
.vbox__voile {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .92);
}

.vbox__inner {
  position: relative;
  width: min(1100px, 100%);
}

.vbox__barre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-s);
  margin-bottom: var(--sp-2xs);
  color: var(--c-on-ink);
}

.vbox__titre {
  font-family: var(--f-cond);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  margin: 0;
}

.vbox__fermer {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3xs);
  min-height: var(--tap-min);
  padding-inline: var(--sp-2xs);
  font-family: var(--f-cond);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-on-ink);
  white-space: nowrap;
}
.vbox__fermer:hover,
.vbox__fermer:focus-visible { color: var(--c-solo-jazz); }
.vbox__croix { font-size: 1.5em; line-height: 1; }

/* Le rapport est posé sur le CADRE : la place du lecteur est réservée avant
   qu'il ne charge, donc aucun décalage à l'ouverture. */
.vbox__cadre {
  aspect-ratio: 16 / 9;
  background: #000;
}
.vbox__iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .video__glyphe,
  .video__vignette { transition: none; }
}