/* ==========================================================================
   Eye Five 2026 — vidéos de la marque (inc/videos.php, videos.js)
   Bande « Les films » de l'accueil et bloc « En mouvement » de la fiche modèle.
   Reels verticaux 9:16, muets, sur aplat charbon le temps du chargement.
   ========================================================================== */

/* ---- Une vidéo ------------------------------------------------------------- */

.film__cadre { position: relative; margin: 0; aspect-ratio: 9 / 16; background: var(--charbon); overflow: hidden; }
.film__video { display: block; width: 100%; height: 100%; object-fit: cover; }
html.js .film__video { cursor: pointer; }

.film__bouton {
  position: absolute; right: 0.75rem; bottom: 0.75rem;
  width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  background: var(--charbon); color: var(--creme);
  transition: background-color var(--duree) var(--courbe);
}
.film__bouton:hover { background: var(--bordeaux); }
.film__bouton:focus-visible { outline: 1px solid var(--creme); outline-offset: -4px; }
/* Triangle « lire » ; deux traits « pause » quand la vidéo joue. */
.film__bouton span { width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.film__bouton.est-en-lecture span { width: 8px; height: 11px; margin-left: 0; border-width: 0 2px; border-color: currentColor; }

/* ---- Accueil : la bande « Les films » ----------------------------------------- */

.films__nav { display: flex; gap: 0.5rem; flex: none; }
.films__nav[hidden] { display: none; }
.films__fleche {
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border: var(--trait); font-size: var(--t-18);
  transition: background-color var(--duree) var(--courbe), color var(--duree) var(--courbe), opacity var(--duree) var(--courbe);
}
.films__fleche:hover:not(:disabled) { background: var(--charbon); color: var(--creme); }
.films__fleche:disabled { opacity: 0.3; cursor: default; }

.films__piste {
  --marge: max(var(--gouttiere), (100% - var(--largeur)) / 2);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(12.5rem, 62vw, 17.5rem);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-inline: var(--marge);
  scroll-padding-inline: var(--marge);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.films__piste::-webkit-scrollbar { display: none; }
.film { scroll-snap-align: start; }

.film__titre {
  font-family: var(--font-titre);
  font-size: var(--t-18);
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0.9rem 0 0.35rem;
}
.film__titre a { text-decoration: none; }
.film__titre a::after { content: '\00a0→'; display: inline-block; transition: transform var(--duree) var(--courbe); }
.film__titre a:hover::after { transform: translateX(0.3em); }
.film__phrase { font-size: var(--t-14); line-height: 1.45; margin: 0; max-width: 32ch; }

/* ---- Fiche modèle : « En mouvement » ------------------------------------------ */

/* Juste après l'histoire, les deux marges s'additionnaient (180 px, « trop important », Maxime 18/10/2026) :
   on garde seulement celle de l'histoire, comme entre les photos et l'histoire. */
.fiche__histoire + .film-fiche { padding-top: 0; }
.film-fiche__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gouttiere); align-items: center; }
.film-fiche__videos { display: grid; gap: clamp(0.75rem, 1.5vw, 1.25rem); width: min(100%, 22rem); }
.film-fiche__grille--deux .film-fiche__videos { grid-template-columns: 1fr 1fr; width: min(100%, 36rem); }
.film-fiche__texte .section__titre { max-width: 22ch; margin-bottom: 1.5rem; }
.film-fiche__texte .prose { font-size: var(--t-18); }

/* Au téléphone, on glisse la piste au doigt : pas de flèches. */
@media (max-width: 599px) {
  .films__nav { display: none; }
}

@media (max-width: 899px) {
  .film-fiche__grille { grid-template-columns: 1fr; }
  .film-fiche__texte { order: -1; }
  .film-fiche__videos { width: min(100%, 24rem); }
  .film-fiche__grille--deux .film-fiche__videos { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .films__piste { scroll-behavior: auto; }
  .film__titre a::after { transition: none; }
}