/* =============================================================================
   blocs/galerie.css — LE COMPOSANT GALERIE PARTAGÉ : le carrousel « battage » et la
   visionneuse plein écran. Pilotés par `js/blocs/galerie.js`.
   =============================================================================
   Repris de la maquette (`style.css:2936-2955` pour le carrousel, `:2992-3048` pour la
   visionneuse et ses deux peaux, `mobile.css:483-490`, `:820-823` et `:1872-1875`).

   TROIS CONSOMMATEURS, d'où un fichier de BLOC et non le CSS d'une page :
     · la fiche accompagnateur — « Quelques images », sa galerie STOCKÉE (D70) ;
     · la fiche voyage — « Les dernières images de ce voyage », la galerie RÉCOLTÉE sur
       l'ancien site (D144) ;
     · le corps d'un récit — le tag `[galerie:recits:dossier]` (D133).
   Test de la règle d'or : dupliqué sur une page vierge, le composant s'affiche.

   ⚠️⚠️ CE CSS EST DANGEREUX SANS SON JS, et c'est pourquoi il ne s'est pas porté plus tôt.
   `.gp-gal__card` est en `position:absolute` au centre de la scène : sans `galerie.js`, les
   cartes s'empilent et seule la dernière se voit. Les deux fichiers se chargent ENSEMBLE —
   même règle que `iris.css` / `iris.js` (CLAUDE.md, « les deux listes se lisent de pair »).
   ⚠️ Et la position initiale des cartes (`--rot0`, `--dx0`) est calculée CÔTÉ SERVEUR par
   le partial `galerie_battage.php` : la pile est donc déjà en éventail au premier rendu, le
   JS ne fait qu'animer. La maquette la construisait en JS — même formule, recopiée.
   ============================================================================= */

/* ---- Le carrousel « battage » — photos nues, pile centrée, flèches au clic ---- */
.gp-gal__stage{ position:relative; height:clamp(440px,60vw,720px); perspective:1600px; margin-top:20px; }
.gp-gal__card{ position:absolute; left:50%; top:50%; margin:0;
  width:min(840px, 90vw); aspect-ratio:3/2; border-radius:10px; overflow:hidden;
  box-shadow:0 28px 55px -18px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.18); will-change:transform;
  transform:translate(-50%, -50%)
            translate(var(--tx, var(--dx0, 0px)), var(--ty, 0px))
            rotate(var(--rot, var(--rot0, 0deg))) scale(var(--sc, 1)); }
.gp-gal__card img{ width:100%; height:100%; object-fit:cover; display:block; }
.gp-gal__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:200;
  width:58px; height:58px; border-radius:50%; background:var(--jaune); color:var(--noir);
  display:grid; place-items:center; cursor:pointer; border:0;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.6);
  transition:background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.gp-gal__nav:hover{ background:var(--jaune-d); transform:translateY(-50%) scale(1.08);
  box-shadow:0 18px 40px -10px rgba(244,183,33,.55); }
.gp-gal__nav--prev{ left:clamp(6px, 4vw, 60px); }
.gp-gal__nav--next{ right:clamp(6px, 4vw, 60px); }

/* Une photo d'un diaporama ouvre la visionneuse. */
[data-galerie] img{ cursor:zoom-in; }

/* ---- La visionneuse plein écran ---- */
html.gal-open, html.gal-open body{ overflow:hidden; }
.gal-lb{ position:fixed; inset:0; z-index:99998; display:grid;
  grid-template-rows:minmax(0,1fr) auto auto; align-items:center; justify-items:center;
  background:rgba(8,8,8,.97); padding:clamp(16px,3vw,40px); }
.gal-lb[hidden]{ display:none; }
.gal-lb__scene{ margin:0; width:100%; height:100%; min-height:0; display:grid; place-items:center; }
.gal-lb__img{ max-width:100%; max-height:calc(100vh - 230px); object-fit:contain; border-radius:6px;
  box-shadow:0 30px 90px -30px rgba(0,0,0,.9); }
.gal-lb__compteur{ margin:12px 0 0; font-size:var(--fs-small); color:rgba(255,255,255,.65);
  letter-spacing:.06em; }
.gal-lb__fermer, .gal-lb__nav{ position:absolute; z-index:5; display:grid; place-items:center;
  border:0; border-radius:50%; cursor:pointer; background:rgba(255,255,255,.12); color:var(--blanc);
  transition:background .18s, color .18s, transform .18s; }
.gal-lb__fermer{ top:clamp(12px,2vw,26px); right:clamp(12px,2vw,26px); width:48px; height:48px; }
.gal-lb__nav{ top:50%; transform:translateY(-50%); width:54px; height:54px; }
.gal-lb__nav--prev{ left:clamp(8px,2.5vw,34px); }
.gal-lb__nav--next{ right:clamp(8px,2.5vw,34px); }
.gal-lb__fermer:hover, .gal-lb__nav:hover{ background:var(--jaune); color:var(--noir); }
.gal-lb__nav:hover{ transform:translateY(-50%) scale(1.08); }
.gal-lb__fermer svg, .gal-lb__nav svg{ width:24px; height:24px; }
.gal-lb__timeline{ display:flex; gap:8px; margin-top:12px; max-width:100%; padding:4px;
  overflow-x:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.gal-lb__vig{ flex:0 0 auto; width:88px; height:60px; padding:0; border:0; border-radius:6px;
  overflow:hidden; cursor:pointer; opacity:.45; outline:2px solid transparent;
  transition:opacity .18s, outline-color .18s; background:none; }
.gal-lb__vig img{ width:100%; height:100%; object-fit:cover; display:block; }
.gal-lb__vig:hover{ opacity:.8; }
.gal-lb__vig.is-active{ opacity:1; outline-color:var(--jaune); }
/* Une seule photo : ni flèches, ni vignettes, ni compteur. */
.gal-lb--solo .gal-lb__nav, .gal-lb--solo .gal-lb__timeline, .gal-lb--solo .gal-lb__compteur{ display:none; }
.gal-lb--solo .gal-lb__img{ max-height:calc(100vh - 80px); }

/* ---- Les deux PEAUX du carrousel : la section du voyage, le diaporama d'un récit ---- */
.voy-images{ background:var(--blanc); }
.voy-images[hidden]{ display:none; }

.rcp-diapo{ margin:clamp(40px,5vw,64px) 0; }
.rcp-diapo__stage{ height:clamp(320px,38vw,520px); margin-top:0; }
.rcp-diapo__stage .gp-gal__card{ width:auto; height:clamp(300px,36vw,480px); aspect-ratio:3/2; }
.rcp-diapo__stage .gp-gal__nav{ width:46px; height:46px; }
.rcp-diapo__stage .gp-gal__nav--prev{ left:clamp(4px,2vw,18px); }
.rcp-diapo__stage .gp-gal__nav--next{ right:clamp(4px,2vw,18px); }
.rcp-diapo__leg{ margin-top:14px; text-align:center; font-size:var(--fs-small); color:var(--noir-50); }

/* ---- RESPONSIVE ---- */
@media (max-width:1024px){
  /* `dvh` et non `vh` : la barre d'adresse mobile ne rogne plus la photo. */
  .gal-lb__img{ max-height:calc(100dvh - 230px); }
  .gal-lb--solo .gal-lb__img{ max-height:calc(100dvh - 80px); }
}
@media (max-width:640px){
  .gal-lb__vig{ width:64px; height:44px; }
  .gal-lb__img{ max-height:calc(100dvh - 190px); }
  .gal-lb__nav{ width:44px; height:44px; }
  /* Le plancher de 300px de hauteur donnait 450px de LARGEUR à 375px d'écran : la maquette
     l'a mesuré (`mobile.css:1856`) et reprend la carte par sa largeur. */
  .rcp-diapo__stage{ height:240px; }
  .rcp-diapo__stage .gp-gal__card{ width:min(280px,82vw); height:auto; }
}
@media (hover:none){
  /* Un tap ne doit pas laisser l'état de survol « collé ». */
  .gp-gal__nav:hover{ background:var(--jaune); transform:translateY(-50%); box-shadow:0 14px 34px -10px rgba(0,0,0,.6); }
  .gal-lb__fermer:hover, .gal-lb__nav:hover{ background:rgba(255,255,255,.12); color:var(--blanc); }
  .gal-lb__nav:hover{ transform:translateY(-50%); }
  .gal-lb__vig:hover{ opacity:.45; }
}
@media (prefers-reduced-motion: reduce){
  .gal-lb__fermer, .gal-lb__nav, .gal-lb__vig{ transition:none; }
}