/* ─────────────────────────────────────────────────────────────────────────────
   public/css/video-facade.css
   Façade « clic pour lire » des vidéos YouTube. Comportement : /js/video-facade.js.

   POURQUOI UNE FAÇADE ET PAS UN <iframe> DIRECT. Une iframe YouTube posée dans
   la page contacte Google AU CHARGEMENT, avant tout geste du visiteur : adresse
   IP, page consultée, identifiants de mesure. `confidentialite.html` promet
   l'inverse — rien n'est transmis à un tiers sans geste explicite. La façade
   n'affiche qu'une image servie depuis nos serveurs ; l'iframe
   youtube-nocookie.com n'apparaît qu'au clic. C'est aussi ce qui permet à la
   politique de sécurité de n'autoriser QUE ce domaine en `frame-src`
   (middleware/security.js).

   Ces règles vivaient dans le <style> de women-actions.html, seule page à
   porter des vidéos. Elles servent depuis le 2026-09-08 aux fiches
   d'événement — c'est-à-dire à toutes les pages qui affichent la frise —,
   d'où leur sortie en feuille partagée.
   ───────────────────────────────────────────────────────────────────────────── */

.video-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #111;
  border: 1px solid var(--rule);
  overflow: hidden;
}
.video-facade iframe,
.video-facade-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-facade-play { display: block; padding: 0; margin: 0; background: none; cursor: pointer; }
.video-facade-play img { width: 100%; height: 100%; object-fit: cover; display: block;
                         transition: transform .35s ease, opacity .35s ease; }
.video-facade-play:hover img,
.video-facade-play:focus-visible img { transform: scale(1.03); opacity: .85; }
.video-facade-play:focus-visible { outline: 2px solid #D25D38; outline-offset: -2px; }
.video-facade-btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: #D25D38; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
  transition: transform .2s ease;
}
.video-facade-play:hover .video-facade-btn { transform: translate(-50%, -50%) scale(1.08); }

/* ── Sans affiche ─────────────────────────────────────────────────────────
   Les stories #WomenInCulture ont une vignette dédiée ; un événement, non.
   Aller la chercher chez `img.youtube.com` reviendrait à faire exactement ce
   que la façade évite — une requête chez Google avant le clic. Quand la fiche
   n'a pas d'image à elle, le bouton reste donc un aplat sombre typographique :
   il annonce ce qu'il y a au bout, sans rien demander à personne. */
.video-facade-play.sans-affiche {
  background: linear-gradient(160deg, #1c1c1c, #2c2320);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
/* Le rond de lecture est en ABSOLU — juste quand il se pose sur une vignette,
   faux ici : la mention, elle, reste dans le flux de la colonne centrée, et
   les deux se superposaient (le titre passait sous le bouton, sur toutes les
   fiches d'événement comme sur ai-academy et museumweek). On le remet dans le
   flux : la colonne les empile d'elle-même avec son `gap`. Remonté ici le
   2026-09-16 ; ai-academy.css le compensait par un décalage de 46 px, retiré. */
.video-facade-play.sans-affiche .video-facade-btn { position: static; transform: none; }
.video-facade-play.sans-affiche:hover .video-facade-btn { transform: scale(1.08); }
.video-facade-play.sans-affiche span.mention {
  font-family: var(--f-mono, var(--f-body));
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  color: rgba(255, 255, 255, .72);
  padding: 0 24px; text-align: center; line-height: 16px;
}

/* Légende sous la vidéo, dans la fiche d'événement : elle dit où mène la
   lecture, puisque le clic déclenche bien un appel à YouTube. */
.video-facade-note {
  font-family: var(--f-mono, var(--f-body));
  font-size: 10px; letter-spacing: .06em;
  color: var(--ink-3);
  margin: 8px 0 0; line-height: 16px;
}