/* ==========================================================================
   Galerie photos/vidéos d'un article et sa visionneuse.

   CE FICHIER EXISTE PARCE QUE L'INLINE NE SURVIT PAS AU CONTENU (2.31.1)
   Jusqu'ici ce CSS et le script de la visionneuse étaient imprimés dans le
   corps de l'article, par le shortcode lui-même. Trois filtres se
   partagent « the_content » sur ZayActu, et deux d'entre eux rechargent le
   contenu dans DOMDocument pour le réécrire. L'analyseur HTML de libxml ne
   met pas en œuvre l'état « script data » de HTML5 : chaque chaîne du genre
   '<div class="…">' écrite DANS le script y est lue comme une vraie
   balise. Le script ressortait tronqué, l'arbre faussé, et la galerie
   disparaissait purement et simplement de l'article.
   Des fichiers chargés normalement ne traversent pas ces filtres. Ils sont
   en prime mis en cache par le navigateur, et ne sont plus répétés dans
   chaque page.
   ========================================================================== */

/* ── Grille ────────────────────────────────────────────────────────────────
   Vignettes de 240 px minimum (elles en faisaient 180, soit 199 px rendus
   sur la colonne d'un article : à cette taille une capture d'écran ne se
   lit pas, et on ne devine même pas ce qu'elle montre). Le cadre suit
   l'orientation dominante de la galerie — voir le rendu PHP. */
.zeo-article-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:24px 0}
/* Sous 600 px, « minmax(240px) » ne laisse plus qu'une colonne : sept photos
   feraient alors trois écrans de haut. Deux colonnes fixes, et le doigt va
   chercher le grand format dans la visionneuse. */
@media (max-width:600px){.zeo-article-gallery{grid-template-columns:repeat(2,1fr);gap:8px}}
.zeo-article-gallery__item{position:relative;display:block;overflow:hidden;border-radius:10px;background:#0b1030;aspect-ratio:4/3}
.zeo-article-gallery--portrait .zeo-article-gallery__item{aspect-ratio:3/4}
.zeo-article-gallery--mixte .zeo-article-gallery__item{aspect-ratio:1/1}
.zeo-article-gallery__item--video{aspect-ratio:16/9!important}
.zeo-article-gallery__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.zeo-article-gallery__item:hover img{transform:scale(1.06)}
.zeo-article-gallery__item--video{grid-column:1/-1;background:#000}
.zeo-article-gallery__item--video video{width:100%;height:100%;max-height:none;object-fit:contain;display:block;background:#000;border:0;margin:0}
/* La loupe dit que l'image s'ouvre en grand : sans elle, rien n'indiquait
   qu'il y avait autre chose à voir derrière la vignette. */
.zeo-article-gallery__loupe{position:absolute;right:8px;bottom:8px;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(10,14,32,.55);
  backdrop-filter:blur(2px);opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;pointer-events:none}
.zeo-article-gallery__item:hover .zeo-article-gallery__loupe,
.zeo-article-gallery__item:focus-visible .zeo-article-gallery__loupe{opacity:1;transform:none}
@media (hover:none){.zeo-article-gallery__loupe{opacity:1;transform:none}}

/* ── Visionneuse ───────────────────────────────────────────────────────── */
.zeo-vis{position:fixed;inset:0;background:rgba(9,12,30,.94);z-index:99999;display:flex;flex-direction:column;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.zeo-vis__barre{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;color:#fff;flex:0 0 auto}
.zeo-vis__compte{font:600 14px/1 system-ui,sans-serif;letter-spacing:.02em;opacity:.85;font-variant-numeric:tabular-nums}
.zeo-vis__outils{display:flex;align-items:center;gap:6px}
.zeo-vis__btn{appearance:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;
  width:38px;height:38px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font:400 20px/1 system-ui,sans-serif;transition:background .15s}
.zeo-vis__btn:hover,.zeo-vis__btn:focus-visible{background:rgba(255,255,255,.2)}
.zeo-vis__btn[aria-pressed=true]{background:#fff;color:#0b1030}
.zeo-vis__scene{flex:1 1 auto;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:auto;padding:0 16px}
.zeo-vis__scene img{max-width:100%;max-height:100%;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.5);
  cursor:zoom-in;display:block;background:#0b1030}
/* Au zoom, l'image reprend sa taille réelle et la scène devient défilante :
   c'est ce qui permet de lire un tableau, ligne par ligne. */
.zeo-vis.est-zoomee .zeo-vis__scene{align-items:flex-start;justify-content:flex-start;cursor:grab}
.zeo-vis.est-zoomee .zeo-vis__scene img{max-width:none;max-height:none;width:auto;cursor:grab}
.zeo-vis.est-zoomee .zeo-vis__scene.est-tiree{cursor:grabbing}
.zeo-vis__fleche{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px;border-radius:50%;
  background:rgba(10,14,32,.6);border:1px solid rgba(255,255,255,.16);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1}
.zeo-vis__fleche:hover{background:rgba(10,14,32,.9)}
.zeo-vis__fleche--prec{left:10px}
.zeo-vis__fleche--suiv{right:10px}
.zeo-vis__pied{flex:0 0 auto;padding:10px 16px 16px;color:#cfd4e6;font:400 13px/1.45 system-ui,sans-serif;text-align:center;
  max-width:860px;margin:0 auto}
.zeo-vis__aide{display:block;margin-top:4px;opacity:.55;font-size:12px}
@media (max-width:600px){
  .zeo-vis__fleche{width:40px;height:40px}
  .zeo-vis__aide{display:none}
}