/*
 * Slider photo plein écran, défilement VERTICAL.
 *
 * Le contenu est la photo, l'interface se limite à trois repères discrets :
 * une flèche qui indique le sens du geste, un compteur, et rien d'autre. Tout
 * le reste de l'écran appartient à l'image.
 *
 * POURQUOI LE DÉFILEMENT EST VERTICAL
 * -----------------------------------
 * Ce n'est pas une préférence : la charte de la scénographie reprend les codes
 * d'un générique de clôture de film, dont la verticalité rappelle le
 * défilement. Le geste du visiteur prolonge donc la direction artistique de
 * l'exposition.
 *
 * LES PHOTOS ARRIVENT DÉJÀ TITRÉES
 * --------------------------------
 * Chaque image porte, incrusté en bas, le titre du film et le nom du
 * réalisateur, composés par la scénographie. L'application ne surimprime aucun
 * texte : elle doit afficher l'image telle quelle, sans rien recouvrir. C'est
 * la raison pour laquelle le compteur est placé en haut et non en bas.
 *
 * object-fit: cover garantit qu'aucune bande noire n'apparaisse quelle que soit
 * la résolution réelle du player, au prix d'un rognage de quelques pour cent.
 * Les photos étant livrées en 1080 x 1920, soit exactement le format d'un écran
 * portrait, ce rognage est nul dans le cas nominal.
 */

.fenetre {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  background: var(--fond);
}

/* Piste empilée verticalement : c'est elle qui porte le translate3d sur Y. */
.piste {
  display: flex;
  flex-direction: column;
  width: 100%;
  will-change: transform;
}

/*
 * La hauteur ci dessous n'est qu'un repli avant que le JavaScript ne prenne la
 * main : imposerHauteurReelle() remplace ces 100vh par la hauteur reellement
 * visible, en pixels. Voir le commentaire de cette fonction : sur un
 * telephone, 100vh depasse la zone visible et laisse apparaitre une tranche de
 * la photo suivante.
 */
.diapo {
  flex: 0 0 100vh;
  width: 100%;
  height: 100vh;
  position: relative;
  background: var(--fond);
}

.diapo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * RÉGLETTE DE POSITION.
 *
 * Elle figurait dans la version validée par le client, en bas de l'écran, sous
 * la forme d'une rangée de traits horizontale. Le passage au défilement
 * vertical et à quatre-vingt-trois photos m'avait conduit à la retirer, au
 * motif qu'une rangée de traits devient illisible à ce nombre. C'était une
 * décision unilatérale sur une fonction déjà validée : elle est rétablie.
 *
 * La transposition correcte n'est pas de la supprimer mais de la tourner. En
 * colonne sur le côté, quatre-vingt-trois traits de 4 pixels espacés de 3
 * occupent 581 pixels sur un écran qui en fait 1920 de haut : largement
 * lisible. Ce qui ne tenait pas en largeur tient en hauteur, et le repère suit
 * désormais le sens du geste, ce qui le rend même plus parlant qu'avant.
 *
 * Elle est à gauche, car la droite porte le compteur.
 */
/*
 * Le conteneur porte le positionnement, la réglette et le compteur se
 * contentent de s'empiler dedans. Le compteur suit donc toujours le bas de la
 * réglette, quel que soit le nombre de photographies : une distance calculée
 * en vh tombait juste à 83 photos et fausse à 30.
 */
.reperes {
  position: fixed;
  left: 5vw;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reglette {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 70vh;
  padding: 14px 10px;
  border-radius: 999px;
  background: rgba(1, 1, 1, 0.42);
}

.trait {
  margin: 1.5px 0;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.34);
  transition: background-color 200ms var(--courbe), height 200ms var(--courbe);
}

.trait.active {
  height: 16px;
  background: var(--blanc);
}

/*
 * Au delà d'une centaine de photos la colonne dépasserait la hauteur utile.
 * Le repère disparaît alors plutôt que de déborder, le compteur chiffré
 * restant exact quel que soit le nombre.
 */
/* Sur un ecran court, la colonne de traits deborderait : seul le compteur
   chiffre reste, exact quel que soit le nombre de photographies. */
@media (max-height: 700px) {
  .reglette { display: none; }
}

/*
 * La flèche de direction a été retirée le 2026-10-08.
 *
 * Elle avait été ajoutée à la demande de la cliente pour indiquer le sens du
 * geste. À l'usage elle n'apportait rien : l'invite écrite dit déjà « faites
 * glisser vers le haut », en toutes lettres et sans ambiguïté, et la réglette
 * montre la progression. Trois repères pour une seule information, c'était un
 * de trop. Ne pas la remettre sans une demande explicite.
 */

/*
 * Compteur chiffré, empilé SOUS la réglette et non dans un coin opposé.
 *
 * Les deux disent la même chose, la position dans la série : les séparer aux
 * deux extrémités de l'écran obligeait le visiteur à regarder à deux endroits.
 * Groupés, ils forment un repère unique, que l'oeil trouve une fois.
 *
 * À gauche, car le bas de chaque photographie porte le titre du film et le nom
 * du réalisateur, incrustés par la scénographie, qu'il ne faut pas couvrir.
 */
.compteur {
  margin-top: 12px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(1, 1, 1, 0.55);
  color: var(--blanc);
  font-size: 17px;
  font-size: clamp(13px, 1.7vh, 19px);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Invite au geste, affichée seulement tant que le visiteur n'a rien touché. */
/* L'invite reste en haut, zone libre sur toutes les photographies : leur bas
   porte le cartouche incrusté par la scénographie. */
.invite {
  position: fixed;
  top: 4vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: rgba(1, 1, 1, 0.55);
  color: var(--blanc);
  font-size: 20px;
  font-size: clamp(15px, 2vh, 22px);
  white-space: nowrap;
  transition: opacity 400ms var(--courbe);
}

.invite.masquee { opacity: 0; }