/* =================================================================
   RDS — Coque de dialogue modal partagée (lightbox)
   =================================================================

   Pendant du moteur `assets/js/rds-lightbox.js`. Ces règles vivaient dans
   `creations.css` § 10 et n'en ont été sorties que pour être partagées :
   la galerie d'interviews de « Notre Histoire » (2026-09-08) ouvre le même
   type de <dialog> et doit avoir exactement la même coque, le même bouton
   de fermeture et le même verrou de défilement.

   ⚠️ AUCUNE règle ne s'adresse ici à `.lightbox-close` ni à `.lightbox-nav`
   NUS. Cette feuille est consommée par plusieurs pages : un sélecteur de
   classe nu y porterait beaucoup plus loin que la surface qu'il décrit —
   même discipline que `.page-banner`, partagée par cinq écrans. Tout passe
   par `.rds-lightbox`, la classe que porte chaque <dialog> confié au
   moteur.

   ⚠️ La spécificité des deux règles de `.lightbox-close` est SOLIDAIRE :
   `position: fixed` doit continuer à battre le `position: absolute` de la
   règle groupée. Les deux sont donc scopées de la même façon (0-2-0) et
   dans cet ordre. Les séparer — ou n'en scoper qu'une — replacerait le
   bouton de fermeture dans le flux de la boîte de dialogue.

   Dépend des tokens de `style.css` (--rds-dark, --rds-blanc,
   --rds-transition) : à déclarer en dépendance d'enqueue, jamais à
   recopier ici.
   ================================================================= */

.rds-lightbox {
  width: 100%;
  max-width: none;
  max-height: 100dvh;
  height: 100dvh;
  padding: max(5rem, env(safe-area-inset-top)) max(2rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(2rem, env(safe-area-inset-left));
  border: 0;
  background: color-mix(in oklch, var(--rds-dark) 95%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.rds-lightbox::backdrop { background: color-mix(in oklch, var(--rds-dark) 60%, transparent); }
.rds-lightbox[open] { display: flex; align-items: center; justify-content: center; }

/* CRE-A11Y-01 — repli pour les navigateurs sans showModal() (openDialog(),
   rds-lightbox.js) : sans promotion au top layer par le navigateur, un
   simple attribut `open` laisse le <dialog> dans le flux normal du
   document au lieu d'une vraie superposition plein écran.
   `.is-fallback-open` lui redonne un positionnement fixe au-dessus de tout
   (y compris le bandeau cookies, z-index 9000 dans style.css) ; le fond
   assombri déjà déclaré ci-dessus (background quasi-opaque) sert alors
   lui-même d'overlay, sans élément supplémentaire à injecter. */
.rds-lightbox.is-fallback-open {
  position: fixed;
  inset: 0;
  z-index: 9500;
  margin: 0;
}

/* Contrôles ronds de la lightbox (fermeture, et navigation là où elle
   existe). Historique du fond : un fond clair à faible opacité laissait la
   photo transparaître et faisait chuter le contraste de l'icône blanche
   selon la photo affichée (défaut trouvé en audit, invisible au seul
   réglage d'opacité). Remplacé par un fond sombre semi-opaque dominé par
   --rds-dark plutôt que par la photo derrière : à 80% d'opacité, même sur
   un pixel blanc pur, le mélange résultant reste assez sombre pour garder
   un contraste élevé avec l'icône blanche — vérifié par échantillonnage
   sur plusieurs photos réelles (claires et sombres), pas seulement en
   survol. Bordure et ombre portée renforcées pour détacher visuellement le
   contrôle de la photo, y compris quand celle-ci est elle-même sombre. */
.rds-lightbox .lightbox-close,
.rds-lightbox .lightbox-nav {
  position: absolute;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid color-mix(in oklch, var(--rds-blanc) 45%, transparent);
  background: color-mix(in oklch, var(--rds-dark) 80%, transparent);
  box-shadow: 0 2px 10px color-mix(in oklch, var(--rds-dark) 55%, transparent);
  color: var(--rds-blanc);
  cursor: pointer;
  transition: background var(--rds-transition), opacity var(--rds-transition);
}
.rds-lightbox .lightbox-close { position: fixed; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); font-size: 1.15rem; }
.rds-lightbox .lightbox-close:hover,
.rds-lightbox .lightbox-nav:hover { background: color-mix(in oklch, var(--rds-dark) 94%, transparent); }

/* défilement de la page bloqué pendant l'ouverture d'un dialogue
   (sélecteur scopé à la classe — jamais de règle nue sur body) */
body.has-lightbox-open { overflow: hidden; }

/* Le focus clavier réutilise le double anneau global du thème
   (prune + halo blanc, posé en :focus-visible universel dans
   functions.php) : rien à redéclarer ici, y compris dans les
   lightbox sombres — le halo blanc reste visible sur tout fond. */