/* ══════════════════════════════════════════════════════════════════════════
   LE DIAPORAMA — une photo à la fois, entière, et des flèches pour avancer.

   Thomas, le 1er septembre 2026 : « pour "L'hiver russe, photographié par
   nous" comme pour les autres fois que tu auras à faire un truc comme cela :
   fais un diaporama avec la vraie taille des images et où on peut cliquer sur
   des flèches pour faire défiler comme on le souhaite ».

   TROIS PARTIS PRIS, ET ILS TIENNENT ENSEMBLE :

   1. LA PHOTO ENTIÈRE. Une grille de vignettes rogne (`object-fit: cover`) :
      c'est ce qui coupait le haut des façades et le bas des sapins. Ici le
      cadre a une hauteur fixe et l'image s'y inscrit en `contain` — rien
      n'est jamais coupé, et les formats se mélangent : les photos de Thomas
      sont en portrait, en paysage et en 9:16 (2 septembre 2026, « fais
      afficher toutes les images dans leur taille originale »). Une hauteur
      fixe, et pas un ratio, pour que la page ne saute pas d'une photo
      verticale à une horizontale.

   2. À SA TAILLE, PAS PLUS. Nos photos font 900 px de large. Étirées à 1 200,
      elles deviennent floues et le fichier n'y peut rien. Le diaporama est
      donc borné à 900 px et centré : au-delà, c'est de la marge, pas du flou.

   3. LE DÉFILEMENT EST CELUI DU NAVIGATEUR. La piste est une bande qui défile
      horizontalement, avec des points d'ancrage (`scroll-snap`). Le doigt la
      fait glisser sans une ligne de JavaScript, la molette aussi, le clavier
      aussi — et si le JavaScript ne vient pas, le diaporama marche encore, il
      lui manque seulement ses flèches. C'est ce qui le rend réutilisable : une
      liste d'images, deux boutons, et rien à régler.
   ══════════════════════════════════════════════════════════════════════════ */

.diapo { max-width: 900px; margin: 0 auto; }

/* La scène porte les flèches, qui sont posées PAR-DESSUS la piste. */
.diapo__scene { position: relative; }

/* ── LA PISTE ──
   `scroll-snap-type: x mandatory` fait que le défilement s'arrête toujours sur
   une photo, jamais entre deux. `scrollbar-width: none` retire la barre : elle
   n'apprend rien ici, les points du bas le disent mieux. */
.diapo__piste {
  display: flex; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.diapo__piste::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .diapo__piste { scroll-behavior: auto; } }

.diapo__vue { flex: 0 0 100%; scroll-snap-align: center; margin: 0; }

.diapo__cadre {
  /* 600 px : un portrait 3:4 y tient à 450 de large, un paysage 4:3 à 800.
     Sur téléphone, le cadre prend le ratio des portraits (six photos sur
     neuf) — voir plus bas. */
  height: min(600px, 80vh); border-radius: 18px; overflow: hidden;
  background: #0d1b33; box-shadow: 0 14px 38px rgba(16, 39, 90, .16);
}
.diapo__cadre img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* La légende garde sa place même quand elle est courte : sans cette hauteur
   minimale, passer d'une légende de deux lignes à une d'une seule faisait
   sauter tout le bas de la page sous les yeux du lecteur. */
.diapo__vue figcaption {
  font-size: 14.5px; line-height: 1.55; color: var(--gris-fonce);
  margin: 14px 4px 0; min-height: 3.1em;
}

/* ── LES FLÈCHES ──
   Assez grandes pour le doigt (44 px, le minimum d'Apple comme de Google), et
   posées sur la photo pour ne rien ajouter à la hauteur de la page. Elles
   disparaissent au bout de la bande plutôt que de rester grisées : un bouton
   qui ne fait rien est un bouton qu'on essaie deux fois. */
.diapo__fleche {
  position: absolute; top: calc(50% - 22px); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  background: rgba(255, 255, 255, .94); color: #14285a;
  box-shadow: 0 6px 20px rgba(10, 24, 56, .34);
  transition: opacity .2s ease, transform .15s ease, visibility .2s;
}
.diapo__fleche:hover { transform: scale(1.06); }
.diapo__fleche:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.diapo__fleche svg { width: 20px; height: 20px; }
.diapo__fleche--gauche { left: 12px; }
.diapo__fleche--droite { right: 12px; }
.diapo__fleche[hidden] { display: grid; visibility: hidden; opacity: 0; pointer-events: none; }

/* ── LE BAS : les points, et le compte ──
   Les points disent où l'on en est ; le compte « 3 / 6 » le dit aussi, en
   toutes lettres, pour qui ne distingue pas six pastilles de quatre pixels. */
.diapo__pied {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 16px 0 0;
}
.diapo__points { display: flex; gap: 9px; margin: 0; padding: 0; list-style: none; }
.diapo__point {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(20, 40, 90, .24); transition: background .2s ease, transform .2s ease;
}
.diapo__point:hover { background: rgba(20, 40, 90, .45); }
.diapo__point[aria-current="true"] { background: var(--accent); transform: scale(1.35); }
.diapo__point:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.diapo__compte {
  font-size: 12.5px; letter-spacing: .1em; font-weight: 700;
  color: var(--gris-fonce); font-variant-numeric: tabular-nums;
}

/* Sur une bande sombre, les points et le compte s'inversent. */
.band--bleu .diapo__point, .band--nuit .diapo__point { background: rgba(255, 255, 255, .3); }
.band--bleu .diapo__compte, .band--nuit .diapo__compte { color: rgba(255, 255, 255, .68); }

@media (max-width: 767px) {
  /* Le cadre suit la largeur, au format des portraits : sur un téléphone, une
     hauteur fixe laissait la photo flotter entre deux bandes vides. */
  .diapo__cadre { border-radius: 14px; height: auto; aspect-ratio: 3 / 4; }
  .diapo__fleche { width: 40px; height: 40px; top: calc(50% - 20px); }
  .diapo__fleche--gauche { left: 8px; }
  .diapo__fleche--droite { right: 8px; }
  .diapo__vue figcaption { font-size: 14px; min-height: 4.3em; }
}