/* ============================================
   BANDEAU D'APERÇU — affiches défilant en boucle
   ============================================ */

.bandeau-affiches {
  overflow: hidden;
  padding: 0;
  /* 80 px au-dessus : c'est le rythme du site, celui du padding des titres de
     section. Le bandeau ne doit pas coller au showreel — il lui faut le même
     air qu'un titre de catégorie a sous lui. */
  margin: 80px 0 40px;
  background: #050505;
  /* La hauteur de la bande est la seule dimension imposée : c'est elle qui met
     toutes les affiches à la même échelle, chacune gardant son format.
     Elle inclut --jeu, la réserve verticale dans laquelle les cartes se
     soulèvent au survol ; les affiches gardent donc bien 260 px. */
  --jeu: 12px;
  height: calc(260px + var(--jeu));
  position: relative;
}

/* Fondus latéraux : la bande s'efface sur les bords au lieu d'être tranchée
   net, ce qui laisse croire qu'elle continue au-delà de l'écran. */
.bandeau-affiches::before,
.bandeau-affiches::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  z-index: 2;
  pointer-events: none;
}

.bandeau-affiches::before {
  left: 0;
  background: linear-gradient(to right, #050505, transparent);
}

.bandeau-affiches::after {
  right: 0;
  background: linear-gradient(to left, #050505, transparent);
}

.bandeau-piste {
  display: flex;
  gap: 16px;
  width: max-content;
  height: 100%;
  align-items: center;
  /* La durée est calculée par la build (voir affiches_html) pour que la vitesse
     reste constante quel que soit le nombre de projets : ajouter un film
     allonge la boucle, il ne l'accélère pas. */
  animation: bandeauDefile var(--duree, 200s) linear infinite;
}

/* La piste contient DEUX fois la même bande. L'animation la décale d'un
   exemplaire entier : à l'instant où elle repart de zéro, le second occupe la
   place du premier et le raccord est invisible.

   `-50%` n'est qu'un repli sans JavaScript, et il est approximatif : l'écart
   entre les deux exemplaires appartient à la piste entière, si bien que la
   moitié de sa largeur tombe une demi-gouttière trop court. bandeau.js mesure
   la position réelle de la première carte du second exemplaire et donne la
   distance exacte. */
@keyframes bandeauDefile {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--decalage, -50%), 0, 0); }
}

/* Chaque carte se dimensionne par sa HAUTEUR et laisse sa largeur suivre son
   format propre. Une affiche 2:3 et une affiche 4:5 cohabitent donc dans la
   bande sans que ni l'une ni l'autre ne soit rognée — les titres et les blocs
   de crédits, qui vivent dans les marges, restent entiers. */
.affiche {
  flex: 0 0 auto;
  display: block;
  /* Pas 100% : la carte laisse --jeu sous elle et au-dessus, sans quoi le
     soulèvement au survol viendrait buter contre l'overflow de la bande et se
     ferait trancher net par le haut. */
  height: calc(100% - var(--jeu));
  width: auto;
  border-radius: 10px;
  overflow: hidden;
  background: #111;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.35s ease;
  opacity: 0.78;
}

.affiche img {
  display: block;
  height: 100%;
  width: auto;
}

.affiche:hover,
.affiche:focus-visible {
  transform: translateY(-4px);
  opacity: 1;
}

/* Le défilement s'arrête hors écran : une animation composée coûte peu, mais
   pas rien, et il n'y a aucune raison de faire tourner une bande que personne
   ne regarde. Voir js/bandeau.js. */
.bandeau-affiches.hors-ecran .bandeau-piste {
  animation-play-state: paused;
}

/* Mouvement réduit : la bande devient une simple rangée que l'on fait défiler
   soi-même. On ne supprime pas le contenu, seulement son mouvement propre. */
@media (prefers-reduced-motion: reduce) {
  .bandeau-piste {
    animation: none;
  }
  .bandeau-affiches {
    overflow-x: auto;
  }
}

@media (max-width: 900px) {
  .bandeau-affiches {
    height: calc(180px + var(--jeu));
    margin: 48px 0 28px;
  }

  .bandeau-affiches::before,
  .bandeau-affiches::after {
    width: 48px;
  }

  .affiche {
    border-radius: 8px;
    /* Pas de survol au doigt : l'opacité de repos est remontée pour que les
       affiches ne paraissent pas éteintes. */
    opacity: 0.9;
  }
}