/* LE DIALOGUE VIDÉO DU SITE — présentation seulement.

   ⚠️ LE COMPORTEMENT EST AILLEURS, ET PARTAGÉ : `/site/dialogue-video.js` porte la
   mécanique — iframe construite au clic, `youtube-nocookie`, vidage à la
   fermeture, focus rendu au bouton qui a ouvert. Deux pages l'emploient ; il ne
   doit exister qu'en un exemplaire, sinon les deux dialogues divergeraient sur
   ce qui compte : ce qui part chez YouTube et quand.

   ⚠️ L'APPARENCE, ELLE, N'EST PAS PARTAGÉE, ET CE N'EST PAS UN OUBLI. Le
   Festival garde la sienne dans `festival.css` — un presque-noir, `#080608`,
   choisi pour sa page. Fondre les deux aurait imposé la charte d'une page à
   l'autre, ce qui est exactement ce que la séparation en feuilles de page
   existe pour empêcher. Cinq règles se ressemblent d'une feuille à l'autre :
   c'est le prix, et il est plus petit que celui d'un dialogue qui prendrait la
   couleur du Festival sur l'accueil.

   Chargée PAR LA VUE, comme `festival.css`. Les jetons viennent de
   `/site/tokens.css`.
   ────────────────────────────────────────────────────────────────────────── */

.video-dialog { width: min(1040px, calc(100% - 30px)); padding: 0; border: 0; background: var(--ink); color: var(--white); box-shadow: 0 30px 100px rgba(0, 0, 0, .55); }
.video-dialog::backdrop { background: rgba(11, 6, 12, .9); backdrop-filter: blur(7px); }

/* ⚠️ BORNÉE À SON DIALOGUE, comme dans `festival.css` et pour la même raison :
   la coque du site emploie `.dialog-close` pour son dialogue de lecture, en
   CLAIR. Posée nue, cette règle repeindrait en sombre le bouton de fermeture du
   SITE sur toute page qui charge cette feuille. */
.video-dialog .dialog-close { position: absolute; z-index: 2; right: 10px; top: 10px; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; background: rgba(8, 6, 8, .72); color: white; font-size: 24px; line-height: 1; cursor: pointer; }
.video-frame { aspect-ratio: 16 / 9; }
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── L'ACTION TERTIAIRE ──────────────────────────────────────────────────────
   ⚠️ TROIS ACTIONS, TROIS POIDS — c'est la demande de Codex, et elle porte
   surtout sur le téléphone, où les trois passent à la ligne et se retrouvent
   l'une sous l'autre. Le plein, puis le contour, puis celle-ci : sans bordure ni
   fond, elle se lit comme un lien qu'on a rendu cliquable en grand. Lui donner
   une bordure l'aurait alignée sur la deuxième et il n'y aurait plus eu que deux
   niveaux pour trois actions. */
.button-video { display: inline-flex; align-items: center; gap: 10px; padding: 12px 4px; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 750; cursor: pointer; text-underline-offset: 4px; }
.button-video:hover { text-decoration: underline; }
.button-video i { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; padding-left: 3px; background: var(--violet); color: var(--white); font-style: normal; font-size: 12px; }
.button-video small { color: var(--muted); font-weight: 600; }