/**
 * @package     Iris
 * @subpackage  com_iris
 * @copyright   (C) 2026 Cyrille Poussin, Joomanji
 * @license     GNU General Public License version 2 or later
 *
 * UNE GALERIE D'IRIS, SUR LE SITE ET DANS L'APERCU DU FORMULAIRE.
 *
 * AUCUNE COULEUR N'EST ECRITE EN DUR, sauf les quatre valeurs neutres des
 * jetons ci-dessous, chacune une fois. Tout vient du site d'accueil : le texte
 * herite, les traits prennent `--border-color` (le jeton de Bootstrap que
 * Cassiopeia, Corpus et Atum declarent sans le prefixe `bs-`, mesure d'Opus
 * dans `sans-corpus.css`), et a defaut `currentColor`. Les boutons sont ceux
 * de Bootstrap, livre par Joomla a tout le site.
 *
 * LES REGLES DE LA GRILLE, DU FORMAT ET DE LA LEGENDE AU SURVOL SONT CELLES
 * D'OPUS, recopiees de `mod_opus/media/css/blocs.css` l. 409 a 510 et 678 a
 * 700, noms changes.
 */

/* ---------------------------------------------------------------------------
   LES JETONS DU SITE (9 octobre 2026, regle de Cyrille : aucune couleur en
   dur). Sur le site, Atum n'est pas la. On fait comme Opus
   (`mod_opus/media/css/sans-corpus.css`) : chaque couleur est declaree ICI,
   UNE fois, sous un nom, en cascade de replis : d'abord le jeton du template
   (Bootstrap sans prefixe, que Cassiopeia, Corpus et Helix declarent), puis
   le nom `bs-`, puis une valeur neutre, la seule ecrite en dur. Partout
   ailleurs dans ce fichier, seulement ces noms. Un site qui veut les siennes
   les redeclare dans « CSS personnalise » (Options d'Iris, onglet Galeries).
   --------------------------------------------------------------------------- */
:root {
  --iris-blanc: var(--white, var(--bs-white, #fff));
  --iris-noir: var(--black, var(--bs-black, #000));
  --iris-sombre: var(--dark, var(--bs-dark, #212529));
  --iris-fond: var(--body-bg, var(--bs-body-bg, var(--iris-blanc)));
}

.iris-galerie {
  display: grid;
  grid-template-columns: repeat(var(--iris-colonnes, 3), minmax(0, 1fr));
  gap: var(--iris-ecart, 16px);
  min-width: 0;
  margin: 0 0 var(--iris-ecart, 16px);
}

/* LES PETITS ECRANS ont leurs colonnes et leur gouttiere (3.0.055).
   Calculees par le gabarit : deux colonnes au plus et la meme gouttiere si
   rien n'est regle, comme avant. */
@media (max-width: 36rem) {
  .iris-galerie {
    grid-template-columns: repeat(var(--iris-colonnes-p, 2), minmax(0, 1fr));
    gap: var(--iris-ecart-p, var(--iris-ecart, 16px));
  }
}

.iris-vignette {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 0;
  margin: 0;
}

.iris-vignette__image {
  display: block;
  width: 100%;
  height: auto;
  /* L'arrondi choisi (galerie, lien de menu, module) : 0, 4, 8 ou 16 px.
     Sans reglage, le leger d'avant le 7 octobre 2026. */
  border-radius: var(--iris-arrondi, .25rem);
}

/* Des qu'un format est impose, l'image remplit sa boite : sans `object-fit`
   elle serait etiree, ce qui ne se rattrape jamais. */
.iris-format--1-1 .iris-vignette__image,
.iris-format--4-3 .iris-vignette__image,
.iris-format--3-2 .iris-vignette__image,
.iris-format--16-9 .iris-vignette__image,
.iris-format--3-4 .iris-vignette__image,
.iris-format--2-3 .iris-vignette__image { object-fit: cover; }

.iris-format--1-1 .iris-vignette__image  { aspect-ratio: 1 / 1; }
.iris-format--4-3 .iris-vignette__image  { aspect-ratio: 4 / 3; }
.iris-format--3-2 .iris-vignette__image  { aspect-ratio: 3 / 2; }
.iris-format--16-9 .iris-vignette__image { aspect-ratio: 16 / 9; }

/* Les formats en hauteur (21 octobre 2026, demonstration Bellefeuille) : les
   affiches. Sans eux, une galerie d'affiches n'avait que « Format d'origine »,
   juste tant que toutes les affiches ont les memes proportions, et des
   vignettes inegales des qu'une A4 rejoint une affiche carree. 3:4 et 2:3
   encadrent l'A4 (1:1,41) : le recadrage en coupe moins de 6 %, en hauteur pour 3:4, en largeur pour 2:3. */
.iris-format--3-4 .iris-vignette__image  { aspect-ratio: 3 / 4; }
.iris-format--2-3 .iris-vignette__image  { aspect-ratio: 2 / 3; }

.iris-legende {
  font-size: .875rem;
  line-height: 1.4;
}

/* L'agrandissement : un bouton qui n'a que son image pour dessin. */
.iris-galerie button:not(.btn) {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: zoom-in;
}

.iris-galerie button:not(.btn):focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

/* Une image seule d'un article, a agrandir (plg_content_iris) : l'enveloppe
   ne change rien a la mise en page, le bouton n'a que l'image pour dessin. */
/* LA LARGEUR EST POSEE SUR L'ENVELOPPE (plg_content_iris la lit dans
   l'attribut width de l'image, celui que l'editeur ecrit quand on
   redimensionne). Un pourcentage sur l'image dans une boite qui prend la
   taille de son contenu s'annule : l'image tombait a 1 pixel (vu sur le banc,
   28 septembre 2026). */
.iris-image { display: inline-block; max-width: 100%; vertical-align: top; }
.iris-image > button { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: zoom-in; }
.iris-image > button img { display: block; width: 100%; height: auto; }
.iris-image > button:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }

/* La legende au survol, seulement la ou le survol existe. Au clavier, elle
   apparait avec le focus. Sur un ecran tactile, elle reste dessous. */
@media (min-width: 48rem) and (hover: hover) {
  .iris-galerie--survol .iris-vignette {
    overflow: hidden;
    border-radius: var(--iris-arrondi, .25rem);
  }

  .iris-galerie--survol .iris-legende {
    position: absolute;
    inset: auto 0 0 0;
    margin: 0;
    padding: .75rem;
    color: var(--iris-blanc);
    background: linear-gradient(to top, color-mix(in srgb, var(--iris-noir) 72%, transparent), color-mix(in srgb, var(--iris-noir) 0%, transparent));
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
  }

  .iris-galerie--survol .iris-vignette:hover .iris-legende,
  .iris-galerie--survol .iris-vignette:focus-within .iris-legende { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .iris-galerie--survol .iris-legende { transition: none; }
}

/* --- La mosaique ------------------------------------------------------------
   LA MOSAIQUE NATIVE QUAND LE NAVIGATEUR LA CONNAIT, une grille sinon
   (choix A, 28 septembre 2026). `display: grid-lanes` garde l'ordre de
   lecture : le clavier et le lecteur d'ecran suivent l'ordre des images, ce
   que les colonnes CSS ne font pas. */
@supports (display: grid-lanes) {
  .iris-galerie--mosaique { display: grid-lanes; }
}

/* LE REPLI : DES COLONNES CSS (3.0.055). Mesure le 6 octobre 2026 : Chrome et
   Firefox ne connaissent pas encore `grid-lanes`, la mosaique y tombait en
   grille ordinaire. En colonnes, les images se lisent colonne par colonne :
   l'ordre du clavier reste celui de la liste, c'est l'oeil qui le perd un
   peu. La seule disposition ou c'est vrai, et on l'ecrit. */
@supports not (display: grid-lanes) {
  .iris-galerie--mosaique {
    display: block;
    column-count: var(--iris-colonnes, 3);
    column-gap: var(--iris-ecart, 16px);
  }

  .iris-galerie--mosaique > .iris-vignette {
    break-inside: avoid;
    margin-bottom: var(--iris-ecart, 16px);
  }

  @media (max-width: 36rem) {
    .iris-galerie--mosaique { column-count: var(--iris-colonnes-p, 2); column-gap: var(--iris-ecart-p, 16px); }
    .iris-galerie--mosaique > .iris-vignette { margin-bottom: var(--iris-ecart-p, 16px); }
  }
}

/* --- Les rangees (3.0.055) ---------------------------------------------------
   VERTICALES ET HORIZONTALES MELEES, SANS RECADRAGE (demande de Cyrille,
   6 octobre 2026). Chaque vignette grandit selon son rapport largeur /
   hauteur (`--iris-r`, pose par le gabarit) ; toutes celles d'une rangee ont
   donc la meme hauteur, et la rangee remplit la largeur. L'ordre de lecture
   reste celui de la liste. CSS seul, rien a calculer en script.
   Le pseudo-element final absorbe la place de la derniere rangee : sans lui,
   deux images seules s'etireraient sur toute la largeur. */
.iris-galerie--rangees {
  display: flex;
  flex-wrap: wrap;
}

.iris-galerie--rangees::after {
  content: "";
  flex-grow: 999;
}

.iris-galerie--rangees > .iris-vignette {
  flex-grow: var(--iris-r, 1.3333);
  flex-basis: calc(var(--iris-r, 1.3333) * var(--iris-hauteur, 220px));
}

.iris-galerie--rangees .iris-vignette__image {
  aspect-ratio: var(--iris-r, 1.3333);
  object-fit: cover;
}

@media (max-width: 36rem) {
  .iris-galerie--rangees { gap: var(--iris-ecart-p, var(--iris-ecart, 16px)); }
  .iris-galerie--rangees > .iris-vignette { flex-basis: calc(var(--iris-r, 1.3333) * var(--iris-hauteur, 220px) * .55); }
}

/* --- Le damier (3.0.055) -----------------------------------------------------
   DES CARRES, UNE GRANDE VIGNETTE SUR SIX, a la maniere des galeries du site
   des creches (SP Easy Image Gallery, releve le 6 octobre 2026). Les photos y
   sont recadrees en carre : c'est le prix de la regularite, les Rangees ne
   recadrent pas. `dense` comble les trous laisses par les grandes. */
.iris-galerie--damier {
  grid-template-columns: repeat(max(var(--iris-colonnes, 4), 2), minmax(0, 1fr));
  grid-auto-flow: dense;
}

/* Plus precise que la regle des petits ecrans du haut : elle doit la redire. */
@media (max-width: 36rem) {
  .iris-galerie--damier { grid-template-columns: repeat(max(var(--iris-colonnes-p, 2), 2), minmax(0, 1fr)); }
}

.iris-galerie--damier > .iris-vignette:nth-child(6n + 1),
.iris-galerie--damier > .iris-vignette:nth-child(6n + 5) {
  grid-column: span 2;
  grid-row: span 2;
}

.iris-galerie--damier > .iris-vignette > button,
.iris-galerie--damier > .iris-vignette > .iris-vignette__image { height: 100%; }
.iris-galerie--damier > .iris-vignette > button > .iris-vignette__image { height: 100%; }

/* --- Image principale et vignettes ------------------------------------------ */
.iris-galerie--principale {
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
}

.iris-galerie--principale .iris-vignette--principale {
  grid-column: 1 / -1;
}

/* --- Le bandeau ---------------------------------------------------------------
   Une rangee a hauteur fixe, chaque image garde son format. */
.iris-galerie--bandeau {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: .5rem;
}

.iris-galerie--bandeau .iris-vignette {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.iris-galerie--bandeau .iris-vignette__image {
  width: auto;
  height: var(--iris-hauteur, 220px);
}

.iris-galerie--bandeau .iris-legende { max-width: 20rem; }

.iris-galerie--bandeau:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

/* --- La liste -------------------------------------------------------------- */
.iris-galerie--liste {
  grid-template-columns: minmax(0, 1fr);
}

.iris-galerie--liste .iris-vignette {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: center;
  gap: var(--iris-ecart, 16px);
}

.iris-galerie--cote-d .iris-vignette > :first-child,
.iris-galerie--cote-a .iris-vignette:nth-child(even) > :first-child { order: 2; }

@media (max-width: 36rem) {
  .iris-galerie--liste .iris-vignette { grid-template-columns: minmax(0, 1fr); }
  .iris-galerie--liste .iris-vignette > :first-child { order: 0; }
}

/* --- Le carrousel -------------------------------------------------------------
   Le defilement est celui de Bootstrap. Les commandes sont des boutons a mots
   SOUS l'image, pas des fleches posees dessus : un texte sur une photo n'a
   pas de contraste garanti. */
.iris-galerie--carrousel {
  display: block;
}

.iris-galerie--carrousel .iris-vignette__image {
  width: 100%;
}

.iris-carrousel__commandes {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: .5rem;
}

/* --- Voir plus ------------------------------------------------------------- */
.iris-plus {
  grid-column: 1 / -1;
  justify-self: center;
}

/* --- Les documents ------------------------------------------------------------
   QUATRE PRESENTATIONS, UN SEUL BALISAGE (galerie.php). Une grille par
   document : zones « mini », « corps », « actions ». Chaque presentation ne
   fait que les ranger autrement. Couleurs : celles du site (jetons de
   Bootstrap, que Cassiopeia et Corpus declarent), rien d'invente. */
/* `.iris ul.` : Corpus pose `.contenu ul { display: flow-root }`, qui
   l'emportait sur une seule classe et cassait la grille (vu sur le banc,
   28 septembre 2026). */
.iris ul.iris-documents,
.iris-documents {
  display: grid;
  grid-template-columns: repeat(var(--iris-colonnes, 2), minmax(0, 1fr));
  gap: var(--iris-ecart, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 48rem) {
  .iris-documents { grid-template-columns: minmax(0, 1fr); }
}

/* Un document seul dans un article : la moitie de la largeur du texte
   (Cyrille, 28 septembre 2026), toute la largeur sur un petit ecran. */
.iris ul.iris-documents--seul { grid-template-columns: minmax(0, 50%); }

@media (max-width: 48rem) {
  .iris ul.iris-documents--seul { grid-template-columns: minmax(0, 1fr); }
}

.iris-document {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "mini corps actions";
  gap: .75rem 1rem;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: .85rem 1rem;
  border: 1px solid var(--border-color, var(--bs-border-color, currentColor));
  border-radius: .5rem;
}

.iris-document__miniature { grid-area: mini; }
.iris-document__corps { grid-area: corps; min-width: 0; }
/* L'empreinte SHA-256 (24 octobre 2026) : 64 caracteres sans espace, qui
   doivent pouvoir se couper n'importe ou sans deborder de la carte. */
.iris-document__empreinte {
  margin: .25rem 0 0;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--bs-secondary-color, inherit);
}

.iris-document__empreinte code {
  overflow-wrap: anywhere;
  word-break: break-all;
  font-size: inherit;
  color: inherit;
}

.iris-document__actions { grid-area: actions; }

.iris-document__miniature {
  display: grid;
  place-items: end center;
  width: 3.5rem;
  aspect-ratio: 3 / 4;
  padding-bottom: .4rem;
  border: 1px solid var(--border-color, var(--bs-border-color, currentColor));
  border-radius: .25rem;
  background: var(--iris-fond);
}

/* L'etiquette du format : la couleur dit la famille, le texte dit le
   format (jamais la couleur seule). */
.iris-document__ext {
  --fam: var(--secondary, var(--bs-secondary));
  padding: .05rem .3rem;
  border-radius: .2rem;
  background: var(--fam);
  color: var(--iris-blanc);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .03em;
}

[data-ext="pdf"] .iris-document__ext { --fam: var(--danger, var(--bs-danger)); }
/* Le texte en bleu, quelle que soit la teinte du site (Cyrille, 21 octobre
   2026). Avec `--primary`, Word prenait la couleur principale du site : sur
   un Corpus vert, DOCX et XLSX sortaient tous les deux verts (releve sur le
   banc Bellefeuille : rgb(82,114,49) et rgb(31,107,61)). `--bs-blue` est le
   bleu de la palette de Bootstrap, declare par Cassiopeia comme par Corpus
   et que le theme ne change pas. Assombri de 15 % : le blanc dessus passe de
   4,5:1 a 5,8:1 (rgb(11,94,215) mesure). Pas `--info` : cyan sous
   Cassiopeia, le blanc y tombe a 1,9:1. */
:is([data-ext="doc"], [data-ext="docx"], [data-ext="odt"], [data-ext="rtf"], [data-ext="txt"]) .iris-document__ext { --fam: color-mix(in srgb, var(--bs-blue, var(--primary, var(--bs-primary))) 85%, black); }
:is([data-ext="xls"], [data-ext="xlsx"], [data-ext="ods"], [data-ext="csv"]) .iris-document__ext { --fam: var(--success, var(--bs-success)); }
:is([data-ext="ppt"], [data-ext="pptx"], [data-ext="odp"]) .iris-document__ext { --fam: var(--warning, var(--bs-warning)); color: var(--iris-sombre); }

.iris-document__miniature--page {
  place-items: stretch;
  width: 4rem;
  padding: 0;
  overflow: hidden;
  background: var(--iris-blanc);
}

.iris-document__miniature--page img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.iris-document__nom {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  margin: 0;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.iris-document__choix { flex: none; margin: 0; }

.iris-document__resume { margin: .25rem 0 0; }

.iris-document__infos {
  margin: .25rem 0 0;
  font-size: .875rem;
  color: var(--bs-secondary-color, inherit);
}

.iris-document__actions {
  display: grid;
  gap: .4rem;
  margin: 0;
}

.iris-document__actions .btn { white-space: nowrap; }

/* Des boutons un peu plus petits que ceux du texte. `.iris` devant : Corpus
   pose `.contenu .btn` (hauteur mini 40px, marges larges, fond plein). */
.iris .iris-document__actions .btn {
  min-height: 0;
  padding: .3rem .75rem;
  font-size: .875rem;
  line-height: 1.3;
  gap: .35rem;
}

/* « Ouvrir » : un bouton vide, le contour et le texte dans la couleur du
   site ; il se remplit au survol et au focus. */
.iris .iris-document__actions .iris-btn-vide {
  background-color: transparent;
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.iris .iris-document__actions .iris-btn-vide:hover,
.iris .iris-document__actions .iris-btn-vide:focus-visible {
  background-color: var(--bs-primary);
  color: var(--iris-blanc);
}

/* Tuiles : les boutons sous le texte, cote a cote, a parts egales
   (Cyrille, 21 octobre 2026). Avec les boutons a droite, un titre long
   (« Le Bellefeuillois n° 2, automne 2025 ») se repliait sur quatre lignes
   dans une colonne etroite. Mesure sur le banc Bellefeuille, colonne de
   430 px : le titre passait de 4 lignes (108 px) a 1 (25 px), la carte de
   219 a 126 px. Un document sans « Ouvrir » (autre chose qu'un PDF) : le
   seul bouton prend la largeur (auto-fit). Deux classes : l'emporte sur la
   regle des petits ecrans plus bas, qui alignait les boutons au debut. */
.iris-documents--tuiles .iris-document {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "mini corps" "mini actions";
  align-items: start;
}

.iris-documents--tuiles .iris-document__actions {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  align-self: end;
}

/* Carte : les boutons sous le texte. */
.iris-documents--gauche .iris-document {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "mini corps" "mini actions";
  align-items: start;
}

.iris-documents--gauche .iris-document__actions { grid-auto-flow: column; justify-content: start; }

/* Dessus : tout en colonne, centre. */
.iris-documents--dessus .iris-document {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "mini" "corps" "actions";
  justify-items: center;
  text-align: center;
}

.iris-documents--dessus .iris-document__miniature { width: 6rem; }
.iris-documents--dessus .iris-document__nom { justify-content: center; }
.iris-documents--dessus .iris-document__actions { justify-content: center; }

/* Liste : une ligne par document, sans cadre, un filet entre deux. */
.iris-documents--liste { gap: 0; }

.iris-documents--liste .iris-document {
  padding: .6rem 0;
  border: 0;
  border-bottom: 1px solid var(--border-color, var(--bs-border-color, currentColor));
  border-radius: 0;
}

.iris-documents--liste .iris-document__miniature { width: 2.25rem; }
.iris-documents--liste .iris-document__miniature--page { width: 2.25rem; }
.iris-documents--liste .iris-document__ext { font-size: .5625rem; padding: 0 .15rem; }
.iris-documents--liste .iris-document__actions { grid-auto-flow: column; }

@media (max-width: 36rem) {
  .iris-document,
  .iris-documents--liste .iris-document {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "mini corps" "mini actions";
  }

  .iris-document__actions { grid-auto-flow: column; justify-content: start; }
}

/* AFFICHES (3.0.302, demande de Cyrille du 26 octobre 2026, demonstration
   Val de Seille). Une collectivite publie surtout des affiches A4 a imprimer :
   en « Image au-dessus », la premiere page sortait en 75 x 106 px, on ne
   lisait pas l'affiche avant de l'ouvrir. Ici la page occupe toute la largeur
   de la carte, au rapport d'une feuille A4 (210 x 297), titre et boutons
   dessous. La miniature fabriquee par PdfHelper fait 480 px de large : nette
   jusqu'a une carte de 240 px sur un ecran double densite.
   APRES le bloc des petits ecrans : la regle `.iris-document` de ce bloc
   remettait la miniature a gauche, a specificite plus faible mais plus loin.
   Ici deux classes, et plus loin encore. */
.iris-documents--affiches .iris-document {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "mini" "corps" "actions";
  align-items: start;
  padding: .75rem;
}

.iris-documents--affiches .iris-document__miniature,
.iris-documents--affiches .iris-document__miniature--page {
  width: 100%;
  aspect-ratio: 210 / 297;
  place-items: center;
}

.iris-documents--affiches .iris-document__miniature--page img { object-fit: contain; }
.iris-documents--affiches .iris-document__ext { font-size: 1rem; padding: .2rem .5rem; }
.iris-documents--affiches .iris-document__actions { grid-auto-flow: column; justify-content: start; align-self: end; }

/* Une affiche se lit en colonne : deux par ligne sur un petit ecran plutot
   qu'une seule, qui ferait une page de 1 200 px de haut par affiche. */
@media (max-width: 48rem) {
  .iris-documents.iris-documents--affiches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 24rem) {
  .iris-documents.iris-documents--affiches { grid-template-columns: minmax(0, 1fr); }
}

.iris-documents__tout {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 .75rem;
}

/* --- La visionneuse, quand Corpus n'est pas la --------------------------------
   LE DESSIN ET LES MESURES DE CORPUS (template.css, `.visionneuse`, mesurees
   sur le banc le 28 septembre 2026 : 64rem, 16px de marge, 12px entre les
   elements, image a 70vh, fond derriere a 80 %). Les couleurs sont celles du
   site d'accueil, par les jetons de Bootstrap : rien n'est invente, et le
   mode sombre suit. */
.iris-visionneuse {
  width: min(64rem, 92vw);
  max-width: none;
  padding: 0;
  color: var(--body-color, var(--bs-body-color));
  background: var(--body-bg, var(--bs-body-bg));
  border: 1px solid var(--border-color, var(--bs-border-color));
  border-radius: .5rem;
}

.iris-visionneuse::backdrop { background: color-mix(in srgb, var(--iris-noir) 80%, transparent); }

.iris-visionneuse__corps { padding: 16px; }

.iris-visionneuse img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  background: var(--bs-tertiary-bg);
}

.iris-visionneuse__legende {
  margin: 12px 0 0;
  color: var(--bs-secondary-color);
  font-size: 1rem;
  line-height: 1.4;
}

.iris-visionneuse__pied {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

.iris-visionneuse__boutons {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
}

.iris-visionneuse__rang {
  margin: 0;
  color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums;
}

/* --- Les listes de galeries (3.0.055) ------------------------------------------
   Le lien de menu « Liste de galeries » et le module. Une liste a puces de
   cartes ; COLONNES ET GOUTTIERES REGLABLES, petits ecrans compris (Cyrille,
   6 octobre 2026). Aucune couleur : le texte et les liens sont ceux du site.
   LE LIEN DU TITRE COUVRE LA CARTE (pseudo-element) : un seul arret au
   clavier, et son contour de focus entoure toute la carte. */
.iris-liste-galeries {
  display: grid;
  grid-template-columns: repeat(var(--iris-colonnes, 3), minmax(0, 1fr));
  gap: var(--iris-ecart, 24px);
  margin: 0 0 var(--iris-ecart, 24px);
  padding: 0;
  list-style: none;
}

@media (max-width: 36rem) {
  .iris-liste-galeries {
    grid-template-columns: repeat(var(--iris-colonnes-p, 1), minmax(0, 1fr));
    gap: var(--iris-ecart-p, var(--iris-ecart, 24px));
  }
}

.iris-carte-galerie {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.iris-carte-galerie__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--iris-arrondi, .25rem);
}

.iris-carte-galerie__titre {
  margin: .6rem 0 .15rem;
  font-size: 1.125rem;
  line-height: 1.3;
}

/* PAS DE SOULIGNE AU SURVOL (10 octobre 2026, Cyrille) : le template pose
   deja son filet sous les titres ; un second trait au survol faisait double. */
.iris-carte-galerie__titre a { text-decoration: none; }
.iris-carte-galerie__titre a::after { content: ""; position: absolute; inset: 0; }
.iris-carte-galerie__titre a:focus-visible { outline: none; }
.iris-carte-galerie:has(a:focus-visible) { outline: 3px solid currentColor; outline-offset: 4px; border-radius: .25rem; }

.iris-carte-galerie__nombre,
.iris-carte-galerie__extrait {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.45;
}

.iris-carte-galerie__extrait { margin-top: .25rem; }

.iris-liste-galeries__intro { margin-bottom: 1.25rem; }

@media print {
  .iris-visionneuse { display: none; }
}

/* --- La visionneuse classique (3.0.055) ----------------------------------------
   LE DESSIN DES VISIONNEUSES COURANTES, demande de Cyrille le 6 octobre 2026 :
   fond sombre sur toute la fenetre, la croix en haut a droite, une fleche de
   chaque cote, le compteur en bas. Releve sur crechesdemontignylesmetz.com.
   ELLE RESTE ACCESSIBLE : c'est un `<dialog>` (Echap, fond inerte, clavier
   enferme), chaque bouton a un nom lu, une cible de 44 px, et le compteur est
   annonce. Calcule le 6 octobre 2026, sur une page blanche dessous (le pire
   cas) : le texte blanc sur le noir a 88 % donne 16,56:1 ; le picto blanc
   sur son disque (blanc a 16 % par-dessus) 9,97:1. */
/* UNE MARGE TOUT AUTOUR (Cyrille, 7 octobre 2026 : « que la visionneuse ne
   prenne pas 100 % de l'ecran, les boutons de navigation ne se voient pas
   sinon »). Colles au bord de l'ecran, la croix et les fleches se perdaient
   contre le cadre de la fenetre et la barre de defilement. La fenetre garde
   son fond a 88 % (les contrastes calcules plus haut ne bougent pas) ; la
   marge, elle, est assombrie par le fond du dialogue, a 60 %, pour que le
   bord se voie. 3 % du plus petit cote de l'ecran, entre 12 et 40 px. */
.iris-visionneuse--classique {
  --iris-marge: clamp(.75rem, 3vmin, 2.5rem);
  position: fixed;
  inset: var(--iris-marge);
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: .5rem;
  color: var(--iris-blanc);
  background: color-mix(in srgb, var(--iris-noir) 88%, transparent);
}

.iris-visionneuse--classique::backdrop { background: color-mix(in srgb, var(--iris-noir) 60%, transparent); }

.iris-visionneuse--classique .iris-visionneuse__corps {
  position: absolute;
  inset: 3.5rem 4.25rem 3.25rem;
  display: grid;
  place-items: center;
  padding: 0;
}

/* L'IMAGE REMPLIT SA ZONE ET S'Y RANGE ENTIERE (`object-fit: contain`).
   Posee en `max-height: 100 %`, elle debordait : dans une case de grille de
   hauteur automatique, un pourcentage ne se resout pas. Mesure au format
   d'un telephone (375 x 667), le 7 octobre 2026 : une photo verticale
   descendait de 44 px sur les fleches et le compteur. */
.iris-visionneuse--classique img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  background: none;
}

.iris-visionneuse--classique .iris-visionneuse__bas {
  position: absolute;
  inset: auto 4.25rem .75rem;
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  font-size: .9375rem;
  line-height: 1.4;
}

.iris-visionneuse--classique .iris-visionneuse__bas p { margin: 0; color: var(--iris-blanc); }
.iris-visionneuse--classique .iris-visionneuse__bas .iris-visionneuse__rang { margin-left: auto; font-variant-numeric: tabular-nums; }

.iris-visionneuse--classique .iris-visionneuse__bouton {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--iris-blanc);
  background-color: color-mix(in srgb, var(--iris-blanc) 16%, transparent);
  cursor: pointer;
}

/* `hidden` (une seule image : pas de fleches) doit l'emporter sur `display: grid`. */
.iris-visionneuse--classique .iris-visionneuse__bouton[hidden] { display: none; }
.iris-visionneuse--classique .iris-visionneuse__bouton:hover { background-color: color-mix(in srgb, var(--iris-blanc) 30%, transparent); }
.iris-visionneuse--classique .iris-visionneuse__bouton:focus-visible { outline: 3px solid var(--iris-blanc); outline-offset: 2px; }

.iris-visionneuse--classique .iris-visionneuse__bouton svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.iris-visionneuse--classique [data-fermer] { top: .6rem; right: .6rem; }
.iris-visionneuse--classique [data-aller="-1"] { left: .6rem; top: 50%; transform: translateY(-50%); }
.iris-visionneuse--classique [data-aller="1"] { right: .6rem; top: 50%; transform: translateY(-50%); }

@media (max-width: 36rem) {
  .iris-visionneuse--classique .iris-visionneuse__corps { inset: 3.5rem .5rem 4.5rem; }
  .iris-visionneuse--classique [data-aller] { top: auto; bottom: .6rem; transform: none; }
  .iris-visionneuse--classique .iris-visionneuse__bas { inset: auto 4rem 1.1rem; }
}