/* ============================================================
   VIDÉO — la façade d'une vidéo hébergée (YouTube, Vimeo)
   NOUVEAU COMPOSANT (bloc 5a, vague A2, 10/08). Relevé sur les articles
   d'événement : chaque étape montre une AFFICHE (la photo de l'article) barrée
   d'un bouton de lecture ; le lecteur n'arrive qu'au clic.

   RELEVÉ (live 1440, article MIPIM 2026) :
     affiche     l'image mise en avant de l'article, plein cadre
     filet       2 px blanc à 80 %
     bouton      rond blanc translucide, triangle de lecture centré
     ratio       16/9

   FAÇADE, ET C'EST UN GAIN, PAS UN ÉCART : le live charge le lecteur (et donc
   les traceurs de la plateforme) au chargement de la page, avant tout clic et
   avant tout consentement. Ici, la façade n'est qu'une image ; l'iframe n'est
   posée qu'au clic. La page pèse moins, et aucune requête ne part chez un tiers
   tant que le visiteur n'a rien demandé.
   ============================================================ */

/* La façade est rendue par un `<button>` (plateforme reconnue) ou par un `<a>`
   (plateforme inconnue) : les deux passent ici, donc le gabarit remet à plat ce
   qu'un bouton apporte de série. */
.lcdi-video {
  appearance: none;
  position: relative;
  display: block;
  padding: 0;
  text-align: inherit;
  font: inherit;
  color: inherit;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 2px solid var(--border-glass);      /* 2 px blanc à 80 %, relevé */
  border-radius: var(--radius-m);
  background: var(--surface-night);
  cursor: pointer;
}
.lcdi-video:focus-visible { box-shadow: var(--focus-ring); }

.lcdi-video__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-soft) var(--ease-brand);
}
.lcdi-video:hover .lcdi-video__poster { transform: scale(var(--zoom-media)); }

.lcdi-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;                                /* la cible tactile du système */
  height: 44px;
  border-radius: var(--radius-arc);
  background: var(--surface-night-raised);
  border: 1px solid var(--border-glass);
  color: var(--text-on-night);
  pointer-events: none;                       /* c'est la façade entière qui est cliquable */
  transition: background-color var(--t-quick) var(--ease-brand);
}
.lcdi-video:hover .lcdi-video__play { background: var(--veil-accent-night); }
.lcdi-video__play svg { width: 20px; height: 20px; fill: currentColor; }

/* Le lecteur, une fois posé : il remplace l'affiche dans le même cadre. */
.lcdi-video__lecteur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}