/**
 * @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 ICI. 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.
 */

.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 { 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; }

.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: #fff;
    background: linear-gradient(to top, rgb(0 0 0 / 72%), rgb(0 0 0 / 0%));
    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; }
.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(--bs-body-bg, #fff);
}

/* 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: #fff;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .03em;
}

[data-ext="pdf"] .iris-document__ext { --fam: var(--danger, var(--bs-danger)); }
:is([data-ext="doc"], [data-ext="docx"], [data-ext="odt"], [data-ext="rtf"], [data-ext="txt"]) .iris-document__ext { --fam: var(--primary, var(--bs-primary)); }
: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(--bs-dark, #212529); }

.iris-document__miniature--page {
  place-items: stretch;
  width: 4rem;
  padding: 0;
  overflow: hidden;
  background: #fff;
}

.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: #fff;
}

/* 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; }
}

.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: rgb(0 0 0 / 80%); }

.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;
}

.iris-carte-galerie__titre a { text-decoration: none; }
.iris-carte-galerie__titre a::after { content: ""; position: absolute; inset: 0; }
.iris-carte-galerie__titre a:hover { text-decoration: underline; }
.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 rgb(0 0 0 / 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: #fff;
  background: rgb(0 0 0 / 88%);
}

.iris-visionneuse--classique::backdrop { background: rgb(0 0 0 / 60%); }

.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: #fff; }
.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: #fff;
  background-color: rgb(255 255 255 / 16%);
  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: rgb(255 255 255 / 30%); }
.iris-visionneuse--classique .iris-visionneuse__bouton:focus-visible { outline: 3px solid #fff; 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; }
}