/* ════════════════════════════════════════════════════════════════
   VIDÉOS — section d'accueil, pages /videos, lecteur Video.js
   ════════════════════════════════════════════════════════════════ */
:root {
  --lz-v-bleu: #0C124D;
  --lz-v-nuit: #070a2e;
  --lz-v-youtube: #ff0033;
  --lz-v-violet: #3409B1; /* le second bleu du header (--secondary-blue) */
}

/* ── Section « Nos vidéos » (accueil) ── */
.lz-videos {
  background: radial-gradient(120% 90% at 85% 0%, #1a2275 0%, var(--lz-v-nuit) 60%);
  color: #fff; padding: 3rem 0; margin: 0 0 3rem;
}
.lz-videos__abo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem;
  margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.18);
  font-size: .92rem; color: rgba(255,255,255,.82);
}
.lz-videos__abo .fa-youtube { color: var(--lz-v-youtube); margin-right: .35rem; }

/* ── Carte vidéo ── */
.lz-vcard { display: flex; flex-direction: column; height: 100%; }
.lz-vcard__cadre {
  position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  background: #000; box-shadow: 0 10px 28px rgba(0,0,0,.35); transition: transform .2s ease;
}
.lz-vcard:hover .lz-vcard__cadre, .lz-vcard:focus-within .lz-vcard__cadre { transform: translateY(-3px); }
.lz-vcard__lien { position: absolute; inset: 0; display: block; color: #fff; }
.lz-vcard__media, .lz-vcard__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* hqdefault est en 4:3 avec bandes noires : le recadrage les retire. */
.lz-vcard__img { object-fit: cover; }

/* Badge lecture en verre bleu */
.lz-vcard__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(12,18,77,.55); border: 1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
  box-shadow: 0 8px 24px rgba(5,8,40,.45);
  color: #fff; font-size: 1.15rem; padding-left: 3px;
  display: flex; align-items: center; justify-content: center; transition: opacity .2s, transform .2s;
}
.lz-vcard:hover .lz-vcard__play { transform: translate(-50%, -50%) scale(1.08); }
.lz-vcard--grande .lz-vcard__play { width: 72px; height: 72px; font-size: 1.5rem; }
/* Pendant le démarrage du lecteur YouTube, un anneau tourne autour du badge ;
   il s'efface dès que l'aperçu joue. */
.lz-vcard__play::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: #fff; opacity: 0; transition: opacity .2s;
}
.lz-vcard.is-previewing .lz-vcard__play::after { opacity: 1; animation: lz-tourne .8s linear infinite; }
.lz-vcard.is-playing .lz-vcard__play { opacity: 0; }
@keyframes lz-tourne { to { transform: rotate(360deg); } }

/* Aperçu YouTube injecté au survol : rendu en 1280×720 puis réduit au cadre
   sans recadrage (--lz-echelle calculé en JS) pour garder les bandeaux
   incrustés ; invisible tant que la lecture n'a pas démarré. */
.lz-apercu-iframe.lz-apercu-iframe {
  position: absolute; top: 50%; left: 50%; width: 1280px; height: 720px; border: 0;
  transform: translate(-50%, -50%) scale(var(--lz-echelle, 1));
  pointer-events: none; opacity: 0; transition: opacity .3s ease;
}
.lz-apercu-iframe.lz-apercu-iframe--vertical { width: 720px; height: 1280px; }
.is-playing .lz-apercu-iframe { opacity: 1; }

.lz-apercu-son {
  position: absolute; top: .5rem; right: .5rem; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); cursor: pointer;
  background: rgba(12,18,77,.55); color: #fff; font-size: .85rem;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s, background .2s;
}
.is-playing .lz-apercu-son { opacity: 1; pointer-events: auto; }
.lz-apercu-son:hover { background: var(--lz-v-bleu); }

.lz-vcard__corps { padding-top: .7rem; }
.lz-vcard__titre {
  font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1rem; line-height: 1.3;
  margin: 0 0 .3rem; background: transparent; color: inherit;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.lz-vcard--grande .lz-vcard__titre { font-size: clamp(1.2rem, 2.2vw, 1.55rem); -webkit-line-clamp: 2; line-clamp: 2; }
.lz-vcard__titre a { color: inherit; text-decoration: none; }
.lz-vcard__titre a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lz-vcard__dek { font-size: .9rem; line-height: 1.5; opacity: .8; margin: 0 0 .35rem; }
.lz-vcard__date { font-size: .75rem; letter-spacing: .04em; opacity: .65; }

/* ── Boutons ── */
.lz-btn-abo, .lz-btn-yt {
  display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px;
  padding: .55rem 1.1rem; font-size: .85rem; font-weight: 700; text-decoration: none;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.lz-btn-abo { background: var(--lz-v-youtube); color: #fff; }
/* Le logo a beaucoup de marge transparente : on le grossit pour compenser. */
.lz-btn-abo__icone { width: 30px; height: 30px; margin: -6px -2px -6px -8px; flex: 0 0 auto; }
.lz-btn-abo:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255,0,51,.35); }
.lz-btn-yt { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.lz-btn-yt:hover { background: rgba(255,255,255,.18); color: #fff; }

/* ── Pages /videos ── */
.lz-vpage { background: var(--lz-v-nuit); color: #fff; padding: 1.5rem 0 4rem; min-height: 70vh; }
.lz-vpage__conteneur { max-width: 1240px; }
.lz-vpage__retour {
  display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1rem;
  color: rgba(255,255,255,.7); font-size: .85rem; text-decoration: none;
}
.lz-vpage__retour:hover { color: #fff; }
.lz-vpage__entete {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem;
  margin: 1rem 0 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(255,255,255,.18);
}
.lz-vpage__titre {
  font-family: 'Playfair Display', serif; font-weight: 700; color: #fff; background: transparent;
  font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.2; margin: 0 0 .5rem; padding: 0;
}
.lz-vpage__intro { color: rgba(255,255,255,.72); margin: 0; }
.lz-vpage__meta { font-size: .85rem; color: rgba(255,255,255,.6); margin-bottom: 1rem; }
.lz-vpage__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.5rem; }
.lz-vpage__desc {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 14px;
  padding: 1.1rem 1.25rem; line-height: 1.65; color: rgba(255,255,255,.88); font-size: .95rem;
  overflow-wrap: anywhere;
}
.lz-vpage__desc p:last-child { margin-bottom: 0; }
.lz-vpage__desc a { color: #9fb3ff; }
.lz-vpage__autres {
  font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.1rem; color: #fff;
  background: transparent; padding: 0 0 .5rem; margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.lz-vpage__liste { display: grid; gap: 1.25rem; }
.lz-vpage__pages { display: flex; justify-content: center; gap: .75rem; margin-top: 2.5rem; }

/* Shorts : vignettes verticales en bande défilante, aperçu au survol */
.lz-shorts { display: flex; gap: 1rem; overflow-x: auto; padding: .25rem 0 .75rem; scroll-snap-type: x mandatory; }
.lz-short {
  position: relative; flex: 0 0 170px; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden;
  background: #000; scroll-snap-align: start; transition: transform .2s ease;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.lz-short:hover, .lz-short:focus-within { transform: translateY(-3px); }
.lz-short__lien { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; }
.lz-short__lien:hover { color: #fff; }
.lz-short__media, .lz-short__media img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lz-short__media img { object-fit: cover; }
.lz-short__play { width: 44px; height: 44px; font-size: .95rem; }
.lz-short__titre {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 2.2rem .65rem .65rem;
  background: linear-gradient(to top, rgba(7,10,46,.95), transparent);
  font-size: .8rem; font-weight: 700; line-height: 1.25; transition: opacity .3s;
}
.lz-short.is-playing .lz-short__titre { opacity: 0; }
.lz-short.is-previewing .lz-short__play::after { opacity: 1; animation: lz-tourne .8s linear infinite; }
.lz-short.is-playing .lz-short__play { opacity: 0; }

/* ── Le fil vidéo (/videos/fil) : plein écran, défilement vertical ── */
html.lz-fil-ouvert, html.lz-fil-ouvert body { overflow: hidden; }
/* Fond : le dégradé du header mobile (bleu foncé vers le second bleu), sans noir. */
.lz-fil {
  position: fixed; inset: 0; z-index: 5000; color: #fff;
  background: linear-gradient(45deg, var(--lz-v-bleu), var(--lz-v-violet));
}
.lz-fil__barre {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem; padding-top: max(.75rem, env(safe-area-inset-top));
  pointer-events: none;
}
.lz-fil__barre > * { pointer-events: auto; }
.lz-fil__retour {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,18,77,.55); border: 1px solid rgba(255,255,255,.25); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.lz-fil__retour:hover { color: #fff; background: var(--lz-v-bleu); }
.lz-fil__marque { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.15rem; flex: 1; }
.lz-fil__abo {
  display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .85rem .35rem .45rem;
  border-radius: 999px; background: var(--lz-v-youtube); color: #fff; font-size: .82rem; font-weight: 700; text-decoration: none;
}
.lz-fil__abo:hover { color: #fff; }

.lz-fil__flux {
  height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; overscroll-behavior: contain;
  scrollbar-width: none;
}
.lz-fil__flux::-webkit-scrollbar { display: none; }
.lz-fil__slide {
  position: relative; height: 100%; width: 100%; overflow: hidden;
  scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
}
/* Cadre : vertical pour un Short, 16:9 pour un reportage, toujours entier à l'écran. */
.lz-fil__cadre { position: relative; overflow: hidden; background: #000; }
.lz-fil__slide--short .lz-fil__cadre { height: 100%; aspect-ratio: 9 / 16; max-width: 100%; }
.lz-fil__slide--paysage .lz-fil__cadre { width: 100%; aspect-ratio: 16 / 9; max-height: 100%; }
/* Sur ordinateur, la vidéo laisse le bas de l'écran aux informations : rien ne
   recouvre l'image ni ses bandeaux incrustés. */
@media (min-width: 768px) {
  .lz-fil__slide { padding: 4.5rem 0 8.5rem; }
  .lz-fil__cadre { border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.6); }
  .lz-fil__slide--short .lz-fil__cadre { height: 100%; }
  .lz-fil__slide--paysage .lz-fil__cadre {
    width: min(100% - 12rem, 1100px, (100dvh - 13rem) * 16 / 9); max-height: none;
  }
  /* Préfixe .lz-fil : ces règles précèdent les règles de base dans le fichier. */
  .lz-fil .lz-fil__infos {
    left: 50%; right: auto; transform: translateX(-50%); width: min(100% - 26rem, 1100px);
    padding: 0 0 1.4rem; background: none; text-align: center;
  }
  .lz-fil .lz-fil__titre, .lz-fil .lz-fil__dek { margin-inline: auto; }
  .lz-fil .lz-fil__dek { display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
}
.lz-fil__poster, .lz-fil__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lz-fil__poster { object-fit: cover; z-index: 1; transition: opacity .3s; }
.lz-fil__slide.is-playing .lz-fil__poster { opacity: 0; pointer-events: none; }

.lz-fil__actions {
  position: absolute; right: .75rem; bottom: 7rem; z-index: 15;
  display: flex; flex-direction: column; gap: 1rem;
}
.lz-fil__action {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  background: none; border: 0; color: #fff; cursor: pointer; text-decoration: none;
  font-size: .7rem; font-weight: 700;
}
.lz-fil__action i {
  width: 46px; height: 46px; border-radius: 50%; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,18,77,.55); border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.lz-fil__action:hover { color: #fff; }
.lz-fil__action:hover i { background: var(--lz-v-bleu); }

.lz-fil__infos {
  position: absolute; left: 0; right: 5rem; bottom: 0; z-index: 10; pointer-events: none;
  padding: 2rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom));
}
.lz-fil__type {
  display: inline-block; margin-bottom: .35rem; padding: .15rem .55rem; border-radius: 4px;
  background: var(--lz-v-bleu); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.lz-fil__titre {
  font-family: 'Playfair Display', serif; font-weight: 700; color: #fff; background: transparent;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem); line-height: 1.25; margin: 0 0 .35rem; padding: 0; max-width: 720px;
}
.lz-fil__dek { font-size: .88rem; color: rgba(255,255,255,.85); margin: 0; max-width: 640px; }
/* Reportage : sur ordinateur, les infos restent sous la vidéo plutôt que dessus. */
/* Sur téléphone, le texte d'un Short passe sur la vidéo : voile bleu foncé
   pour qu'il reste lisible. Un reportage, lui, laisse le texte sur le fond. */
@media (max-width: 767.98px) {
  .lz-fil__slide--short .lz-fil__infos { background: linear-gradient(to top, rgba(12,18,77,.9), transparent); }
}

.lz-fil__nav {
  position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); z-index: 16;
  display: flex; flex-direction: column; gap: .6rem;
}
/* Sur téléphone, les flèches passent en tête de la colonne d'actions (une
   colonne régulière, sous la vidéo) ; sur ordinateur, elles restent au milieu. */
.lz-fil__action--nav { display: none; }
@media (max-width: 767.98px) {
  .lz-fil__nav { display: none; }
  .lz-fil__action--nav { display: flex; }
  .lz-fil__actions { gap: .7rem; right: .6rem; bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  .lz-fil__action i { width: 42px; height: 42px; font-size: 1rem; }
  .lz-fil__infos { right: 4.5rem; }
  /* Reportage : la vidéo se centre dans le haut de l'écran, le bas restant au
     titre et aux boutons. Un Short occupe tout l'écran, boutons par-dessus. */
  .lz-fil__slide--paysage { padding-bottom: calc(17rem + env(safe-area-inset-bottom)); }
}
.lz-fil__navbtn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); cursor: pointer;
  background: rgba(12,18,77,.55); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.lz-fil__navbtn:hover { background: var(--lz-v-bleu); }
/* Bouton son : en bas à droite, hors de la colonne d'actions et des flèches.
   Coupé : pastille blanche pleine, qui attire l'œil ; actif : verre bleu discret. */
.lz-fil__son {
  position: absolute; right: 1rem; bottom: calc(1.2rem + env(safe-area-inset-bottom)); z-index: 25;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.15rem; border-radius: 999px; cursor: pointer;
  font-size: .9rem; font-weight: 700; line-height: 1;
  background: rgba(12,18,77,.6); color: #fff; border: 1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,.45); transition: background .2s, color .2s, transform .15s;
}
.lz-fil__son i { font-size: 1.05rem; }
.lz-fil__son:hover { transform: translateY(-1px); }
.lz-fil__son.is-muted { background: #fff; color: var(--lz-v-bleu); border-color: #fff; animation: lz-appel 2.4s ease-in-out 3; }
@keyframes lz-appel { 0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 0 rgba(255,255,255,.55); }
                      50% { box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 10px rgba(255,255,255,0); } }
/* Les infos et les actions laissent la place au bouton. */
.lz-fil__infos { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
.lz-fil__actions { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
.lz-fil__vide { flex-direction: column; gap: .75rem; }
.lz-fil__vide a { color: #fff; }
.lz-fil__toast {
  position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); z-index: 30;
  padding: .55rem 1rem; border-radius: 999px; background: rgba(12,18,77,.85); font-size: .85rem; font-weight: 700;
}
.lz-fil__toast[hidden] { display: none; }

/* ── Lecteur Video.js 10 : verre bleu, contrôles blancs ──
   Le gros de l'habillage est déposé dans le shadow DOM par lecteur_video_controller ;
   ici, les seules variables que le skin accepte depuis la page. */
.lz-lecteur {
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
}
.lz-vjs {
  display: block; width: 100%; aspect-ratio: 16 / 9; background: #000;
  --media-accent-color: #fff;
  --media-accent-text-color: var(--lz-v-bleu);
  --media-border-radius: 18px;
  --media-border-color: transparent;
  --media-font-family: "Roboto", sans-serif;
}
.lz-vjs img[slot="poster"] { object-fit: cover; }
/* Le skin ne dimensionne que les <video> natives : <youtube-video> resterait
   à sa taille par défaut (300×150), l'image YouTube calée dans un coin. */
.lz-vjs youtube-video { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; }

/* Miniature affichée pendant le chargement de Video.js. */
.lz-lecteur__attente { position: relative; aspect-ratio: 16 / 9; background: #000; }
.lz-lecteur__attente[hidden] { display: none; }
.lz-lecteur__attente img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lz-lecteur__play { width: 76px; height: 76px; font-size: 1.6rem; }
.lz-lecteur__play.is-loading::after { opacity: 1; animation: lz-tourne .8s linear infinite; }

@media (max-width: 575.98px) {
  .lz-videos { padding: 2rem 0; }
  .lz-lecteur, .lz-vjs { border-radius: 0; --media-border-radius: 0; }
  .lz-vpage .lz-vpage__conteneur > .lz-lecteur { margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5); }
  .lz-vcard__titre { font-size: .9rem; }
}