/* ==========================================================================
   VIDÉOS VIMEO — aperçu muet en boucle + overlay avec le son
   --------------------------------------------------------------------------
   Deux morceaux :
     .nl-video    la vignette cliquable. Le JS y injecte un lecteur Vimeo en
                  mode « background » (muet, en boucle, sans aucun contrôle).
     .nl-lightbox l'overlay plein écran ouvert au clic, avec le son et les
                  contrôles Vimeo, fermé par la croix, par la touche Échap
                  ou par un clic sur le fond.
   Dépend de style.css pour les tokens de charte.
   ========================================================================== */

/* ---------------- Vignette ---------------- */
.nl-video {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--grey);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  color: var(--white);
  font-family: var(--font-base);
  transition: border-color 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.nl-video:hover,
.nl-video:focus-visible {
  border-color: var(--white);
  transform: translateY(-4px);
}

.nl-video:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

/* Cadre qui accueille l'iframe d'aperçu.
   Ratio piloté par --nl-ar (largeur / hauteur), posé sur le <button> :
     16 / 9  paysage (valeur par défaut)   9 / 16  portrait (réseaux sociaux)
   c'est un <span> : sans display:block, width/aspect-ratio sont ignorés (cadre à 0 px). */
.nl-video__frame {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: var(--nl-ar, 16 / 9);
  background: var(--grey);
  overflow: hidden;
}

/* Le cadre a désormais le ratio de la vidéo : le lecteur « background »
   la remplit sans bandes noires. Le léger agrandissement masque le liseré
   d'un pixel que Vimeo laisse parfois sur les bords. */
.nl-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.02);
  border: 0;
  pointer-events: none;  /* le clic doit atteindre le bouton, pas le lecteur */
}

/* Voile de lisibilité au-dessus de l'aperçu */
.nl-video__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}

/* Pastille de lecture */
.nl-video__play {
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-sm);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition: background 0.4s ease, transform 0.4s ease;
}

.nl-video__play svg {
  width: 18px;
  height: 18px;
  margin-left: 3px; /* recentre optiquement le triangle */
  fill: var(--white);
}

.nl-video:hover .nl-video__play,
.nl-video:focus-visible .nl-video__play {
  background: var(--white);
  transform: scale(1.08);
}

.nl-video:hover .nl-video__play svg,
.nl-video:focus-visible .nl-video__play svg {
  fill: var(--black);
}

/* Intitulé posé sur l'aperçu */
.nl-video__label {
  position: absolute;
  left: var(--space-sm);
  right: 74px;
  bottom: var(--space-sm);
  z-index: 2;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

.nl-video__hint {
  display: block;
  font-weight: 200;
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-top: 0.15rem;
}

/* État avant injection du lecteur : dégradé de marque très assourdi */
.nl-video__frame:empty {
  background-image: linear-gradient(140deg, #170047, #060014 65%);
}

/* ---------------- Grille de vidéos ---------------- */
.nl-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nl-video-grid > li {
  margin: 0;
}

/* ---------------- Variante « galerie » ----------------
   Vidéos de ratios différents (portrait + paysage) alignées comme une
   galerie : hauteur commune, largeur dictée par le ratio de chaque vidéo. */
.nl-video-grid--gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

.nl-video-grid--gallery > li {
  display: flex;
  height: clamp(300px, 32vw, 460px);
}

.nl-video-grid--gallery .nl-video {
  display: flex;
  width: auto;
  height: 100%;
  max-width: 100%;
}

.nl-video-grid--gallery .nl-video__frame {
  width: auto;
  height: 100%;
}

@media (max-width: 600px) {
  /* Sur mobile la hauteur commune rendrait les portraits minuscules :
     on repasse à deux colonnes, chaque vidéo garde son ratio. */
  .nl-video-grid--gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .nl-video-grid--gallery > li {
    display: block;
    height: auto;
  }
  .nl-video-grid--gallery .nl-video {
    display: block;
    width: 100%;
    height: auto;
  }
  .nl-video-grid--gallery .nl-video__frame {
    width: 100%;
    height: auto;
  }
  /* Une vidéo paysage occupe toute la largeur (classe posée dans le HTML). */
  .nl-video-grid--gallery > li.is-wide {
    grid-column: 1 / -1;
  }
}

/* ---------------- Overlay ---------------- */
.nl-lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 5vw, 3rem);
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.nl-lightbox[hidden] {
  display: none !important;
}

.nl-lightbox.is-open {
  opacity: 1;
}

.nl-lightbox__inner {
  position: relative;
  /* Ratio de la vidéo ouverte (posé par le JS depuis la vignette).
     La largeur est bornée pour qu'une vidéo portrait tienne en hauteur. */
  aspect-ratio: var(--nl-ar, 16 / 9);
  width: min(100%, 1200px, calc(86vh * var(--nl-ar, 16 / 9)));
  max-height: 86vh;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--black);
  border: 1px solid var(--glass-border);
  transform: scale(0.97);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.nl-lightbox.is-open .nl-lightbox__inner {
  transform: scale(1);
}

.nl-lightbox__inner iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Croix de fermeture */
.nl-lightbox__close {
  position: absolute;
  top: clamp(0.6rem, 3vw, 1.5rem);
  right: clamp(0.6rem, 3vw, 1.5rem);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--white);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, color 0.3s ease;
}

.nl-lightbox__close svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.nl-lightbox__close:hover,
.nl-lightbox__close:focus-visible {
  background: var(--white);
  color: var(--black);
  transform: rotate(90deg);
}

.nl-lightbox__close:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

/* Titre lu par les lecteurs d'écran uniquement */
.nl-lightbox__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Cible tactile un peu plus compacte sur petit écran */
@media (max-width: 768px) {
  .nl-lightbox__close {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nl-video,
  .nl-lightbox,
  .nl-lightbox__inner,
  .nl-lightbox__close,
  .nl-video__play {
    transition: none;
  }
  .nl-video:hover,
  .nl-video:focus-visible {
    transform: none;
  }
  .nl-lightbox__close:hover,
  .nl-lightbox__close:focus-visible {
    transform: none;
  }
}