/**
 * citivo-lightbox.css — LE STYLE DE LA COQUE de lightbox, en un seul endroit.
 *
 * Chantier « homogénéiser les lightbox », sous-étape A1a. Jumelle côté style de
 * `Citivo_Lightbox` (balisage) et `assets/js/citivo-lightbox.js` (comportement),
 * qui existaient déjà tous les deux — il manquait la troisième pièce.
 *
 * ⚠️⚠️ POURQUOI CE FICHIER NAÎT MAINTENANT, ALORS QUE LE MODULE EXISTE DEPUIS
 * LA 8a : le style de la coque vivait dans `citivo-carte-publique.css`. Tant
 * qu'il n'y avait que les deux cartes publiques pour l'utiliser, ça tenait.
 * Mais « Mes signalements » et le tableau de bord mairie ne chargent PAS cette
 * feuille : y faire passer leur lightbox les aurait laissées SANS AUCUNE mise
 * en forme.
 *
 * ⚠️ C'EST EXACTEMENT LE PIÈGE DE LA SOUS-ÉTAPE 10c, rencontré une deuxième
 * fois : un module partagé n'est réellement partageable que si SES TROIS
 * PIÈCES le sont — balisage, comportement ET style. Deux sur trois suffisent
 * tant qu'un seul écran s'en sert, et se paient au premier écran suivant.
 *
 * ⚠️ CE QUI EST ICI : la coque seule — voile de fond, boîte, croix de
 * fermeture, cadre photo, photo. Rien d'autre. Tout ce qui EST DANS la boîte
 * (méta, bandeau, votes, actions) appartient à l'écran qui l'affiche et reste
 * chez lui.
 *
 * ⚠️ CE FICHIER NE CONNAÎT NI `is-app` NI `has-sheet`, et ces deux variantes ne
 * vivent PAS au même endroit — c'est le rangement posé en A2b-1 :
 *   · `is-app`    → citivo-lightbox-app.css, le rendu « application » de la
 *                   carte publique, chargé par elle seule ;
 *   · `has-sheet` → citivo-sheet.css, l'habillage du bandeau glissable, chargé
 *                   par Citivo_Sheet avec le script du module.
 * La coque doit rester utilisable sans l'une comme sans l'autre.
 *
 * Mise en file par Citivo_Lightbox::enqueue_assets(), en même temps que le
 * script : les deux vont ensemble, et les séparer laisserait un écran capable
 * d'ouvrir une lightbox invisible.
 *
 * @package Citivo
 */

/* ── Lightbox de détail (sous-étape 5) ────────────────────────────────
   Porté de la lightbox générique de petlovaAddon (structure et
   comportement), sans !important : la spécificité vient uniquement du
   nichage sous .citivo-lightbox / .citivo-lightbox-dialog. */

.citivo-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: stretch;
	justify-content: center;
}

.citivo-lightbox[hidden] {
	display: none;
}

.citivo-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.88 );
}

.citivo-lightbox-dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	background: #1a1a1a;
	color: #eee;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* Desktop : dialog centré et dimensionné, plein écran en dessous (mobile). */
@media ( min-width: 600px ) {
	.citivo-lightbox {
		align-items: center;
	}
	.citivo-lightbox-dialog {
		width: auto;
		max-width: min( 94vw, 720px );
		max-height: 94vh;
		border-radius: 8px;
		overflow: hidden;
	}
}

.citivo-lightbox-close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: rgba( 0, 0, 0, 0.45 );
	color: #fff;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0 4px;
}

.citivo-lightbox-img-wrap {
	position: relative;
	flex: 1;
	/* ⚠️ min-height: 0 — indispensable, ne pas retirer ni dupliquer.
	   Cet élément est À LA FOIS un flex item de .citivo-lightbox-dialog
	   (colonne) ET un conteneur flex pour son <img> (centrage) : sans ce
	   reset, un flex item refuse par défaut de rétrécir sous la taille
	   intrinsèque de son contenu (bug flexbox connu). L'image peut alors
	   déborder de sa boîte et recouvrir .citivo-lightbox-meta juste en
	   dessous. Porté fidèlement de petlovaAddon (souvenirs-liste.css :
	   .petlova-lightbox-img-wrap n'a qu'UNE SEULE déclaration min-height).
	   Une régression a été introduite ici en ajoutant une seconde
	   déclaration min-height (240px, pour éviter un dialog vide pendant le
	   chargement) : elle écrasait silencieusement celle-ci — flex-grow: 1
	   remplit déjà l'espace disponible sans avoir besoin de ce plancher. */
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
}

/* ⚠️ Chantier Mairie, sous-étape 4c — CORRECTIF : sans cette règle, toggler
   l'attribut `hidden` sur .citivo-lightbox-img-wrap (citivo-carte-publique.js,
   citivo_traite/citivo_rejete_mairie sans photo) n'aurait aucun effet — la
   déclaration `display: flex` ci-dessus est une règle D'AUTEUR qui bat le
   comportement par défaut du navigateur pour [hidden], voir le docblock de
   ce fichier. */
.citivo-lightbox-img-wrap[hidden] {
	display: none;
}

/* ⚠️⚠️ SOUS-ÉTAPE B4d PASSE 1 — MÊME CORRECTIF QUE CI-DESSUS, UN CRAN PLUS BAS,
   et le fait qu'il ait fallu l'écrire deux fois vaut d'être noté. `display:
   block` juste en dessous est une règle D'AUTEUR : sans celle-ci, poser
   `hidden` sur l'image n'aurait aucun effet.

   ⚠️ Pourquoi masquer l'IMAGE et non le cadre, alors que le cadre sait déjà se
   masquer : depuis A2b, le cadre porte AUSSI le bandeau glissable et la
   pastille d'état (emplacement `photo_controls`). Le masquer emporterait tout
   le détail de la fiche avec la photo absente.

   ⚠️ Corrigé DANS LA COQUE et non chez l'écran qui l'a rencontré : n'importe
   quel hôte affichant une fiche sans photo aurait buté dessus. Leçon d'A2b-2,
   appliquée. */
.citivo-lightbox-img[hidden] {
	display: none;
}

.citivo-lightbox-img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* ════════════════════════════════════════════════════════════════════════
   SURCOUCHES SUR LA PHOTO — sous-étape A3
   ════════════════════════════════════════════════════════════════════════

   Ce qui se pose SUR l'image plutôt qu'à côté : le badge d'état, la pastille
   de catégorie, les boutons de vote. Seul le PLACEMENT est ici ; l'apparence
   de chaque surcouche appartient à l'écran qui l'affiche.

   ⚠️⚠️ CES DEUX RÈGLES ARRIVENT DE citivo-lightbox-app.css, où elles étaient
   sous `.is-app` — donc réservées à la carte publique. **Quatrième occurrence
   du piège des sous-étapes 10c, A1a et A2b-1** : un motif utile à tous, enfermé
   dans la feuille du premier qui s'en est servi. « Mes signalements » et le
   tableau de bord mairie auraient reçu un badge sans placement, donc posé dans
   le flux au lieu d'être sur la photo.

   ⚠️ ELLES SONT DANS LA COQUE et non dans une feuille à part, contrairement au
   bandeau : une surcouche n'a ni mécanique ni script, ce sont deux déclarations
   de placement. Lui fabriquer un module aurait coûté un fichier, une classe PHP
   et une mise en file pour deux règles.

   ⚠️⚠️ LE PARENT DÉCIDE DE L'ANCRAGE, exactement comme pour le bandeau (A2b-2).
   Sur la carte publique la surcouche est enfant du DIALOGUE, qu'`is-app` fait
   coïncider avec la photo en plein écran. Ailleurs elle est enfant du CADRE
   PHOTO (`.citivo-lightbox-img-wrap`, déjà `position: relative` ci-dessus), via
   l'emplacement `photo_controls` de `Citivo_Lightbox`. **Mêmes règles, deux
   montages** — aucune variante à écrire. ─────────────────────────────────── */

.citivo-photo-overlay {
	position: absolute;
	/* ⚠️ Sous le bouton fermer (z-index 4) et sous le bandeau (3) : déplié,
	   celui-ci doit pouvoir les recouvrir — comportement validé par Olivier sur
	   la carte publique, repris tel quel sur les autres écrans. */
	z-index: 2;
	max-width: calc( 100% - 24px );
}

.citivo-photo-overlay--badge {
	top: 12px;
	left: 12px;
	/* ⚠️ Marge à droite pour ne jamais passer sous le bouton fermer, qui est
	   dans le coin opposé mais sur la même ligne. */
	max-width: calc( 100% - 68px );
}

/* ── 0.99.355 — OPÉRATIONS SIGHTENGINE (administrateur, pages de gestion) ──
   En haut à droite, JUSTE À GAUCHE de la croix (32 px à 8 px du bord) : jamais
   par-dessus. Fond sombre des surcouches posées sur une photo. */
.citivo-photo-overlay--ops {
	top: 12px;
	right: 48px;
}

.citivo-ops-badge {
	margin: 0;
	padding: 3px 8px;
	border-radius: 10px;
	background: rgba( 0, 0, 0, .6 );
	color: #fff;
	font-size: var( --citivo-fs-pastille );
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	cursor: help;
}

.citivo-ops-badge[hidden] {
	display: none;
}

/* ── 0.99.617 — « GÉRER » (carte publique, comptes qui gèrent ce point) ──
   Même place que les opérations Sightengine (à gauche de la croix), même
   fond sombre des surcouches, plus marqué : c'est un lien d'action. */
.citivo-lightbox .citivo-gerer-btn,
.citivo-lightbox .citivo-gerer-btn:visited {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	padding:         5px 12px;
	border-radius:   999px;
	background:      rgba( 0, 0, 0, .65 );
	color:           #ffffff;
	font-size:       14px;
	font-weight:     700;
	line-height:     1.4;
	text-decoration: none;
	white-space:     nowrap;
}

.citivo-lightbox .citivo-gerer-btn:hover,
.citivo-lightbox .citivo-gerer-btn:focus-visible {
	background: #000000;
	color:      #ffffff;
}

.citivo-lightbox .citivo-gerer-btn[hidden] {
	display: none;
}

/* ── 0.99.319 — PAS D'OMBRE DU THÈME SUR LES BOUTONS DE LA FICHE ──────────
   Relevé par Olivier : une fine ligne sombre sous « Commenter », « Partager »…
   C'est l'ombre qu'Astra pose sur TOUS les boutons (`button, .button { box-
   shadow: 0 1px 2px rgba(0,0,0,.05) }`). Spécificité 0-1-1, au-dessus de la
   règle du thème ; les pastilles posées SUR la photo, qui ont une ombre
   VOULUE, la déclarent par des règles plus fortes et la gardent. */
.citivo-lightbox button {
	box-shadow: none;
}

/* ── 0.99.436 — AIDE AUX GESTES À LA PREMIÈRE FICHE (« À faire » 12 ter) ──
   Posée par citivo-lightbox.js, téléphone seulement, pendant 4,5 s : un voile
   qui bloque les gestes et deux mains EN MÊME TEMPS — en haut sur la photo,
   une main qui descend ; en bas sur le titre, une main qui monte.
   ⚠️ Le voile est un enfant de `.citivo-lightbox` (position fixe sur tout
   l'écran), au-dessus du dialogue (z-index 1) : les coordonnées des gestes
   sont celles de l'écran. Chaque geste est centré sur la MAIN (la flèche
   est du côté où elle va). ──────────────────────────────────────────────── */
.citivo-lightbox .citivo-aide-gestes {
	position: absolute;
	inset: 0;
	z-index: 10;
	background: rgba( 0, 0, 0, .45 );
	opacity: 0;
	transition: opacity .2s ease;
	touch-action: none;
}

.citivo-lightbox .citivo-aide-gestes.is-visible {
	opacity: 1;
}

.citivo-lightbox .citivo-aide-geste {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	pointer-events: none;
}

/* 0.99.534 — le mot du geste : pastille sombre, texte blanc, 24 px de haut. */
.citivo-lightbox .citivo-aide-mot {
	display: block;
	height: 24px;
	padding: 0 12px;
	border-radius: 999px;
	background: rgba( 0, 0, 0, .7 );
	color: #fff;
	font-size: .95rem;
	font-weight: 700;
	line-height: 24px;
	white-space: nowrap;
}

.citivo-lightbox .citivo-aide-geste--bas .citivo-aide-mot {
	margin-bottom: 6px;
}

.citivo-lightbox .citivo-aide-geste--haut .citivo-aide-mot {
	margin-top: 6px;
}

/* Main en haut de son bloc (flèche dessous) : centre de la main = 28 px (56 px depuis 0.99.437).
   ⚠️ 0.99.534 : le mot « Fermer » (30 px avec sa marge) passe AU-DESSUS. */
.citivo-lightbox .citivo-aide-geste--bas {
	transform: translate( -50%, -58px );
}

/* Main en bas de son bloc (flèche dessus, 36 px) : centre = 36 + 28 px. */
.citivo-lightbox .citivo-aide-geste--haut {
	transform: translate( -50%, -64px );
}

.citivo-lightbox .citivo-aide-geste-anim {
	display: flex;
	flex-direction: column;
	align-items: center;
	animation: 1.5s ease-in-out 3 both;
}

.citivo-lightbox .citivo-aide-geste--bas .citivo-aide-geste-anim {
	animation-name: citivo-aide-descendre;
}

.citivo-lightbox .citivo-aide-geste--haut .citivo-aide-geste-anim {
	animation-name: citivo-aide-monter;
}

.citivo-lightbox .citivo-aide-geste svg {
	display: block;
	filter: drop-shadow( 0 1px 3px rgba( 0, 0, 0, .6 ) );
}

@keyframes citivo-aide-descendre {
	0%   { transform: translateY( 0 );    opacity: 0; }
	15%  { transform: translateY( 0 );    opacity: 1; }
	75%  { transform: translateY( 56px ); opacity: 1; }
	100% { transform: translateY( 56px ); opacity: 0; }
}

@keyframes citivo-aide-monter {
	0%   { transform: translateY( 0 );     opacity: 0; }
	15%  { transform: translateY( 0 );     opacity: 1; }
	75%  { transform: translateY( -56px ); opacity: 1; }
	100% { transform: translateY( -56px ); opacity: 0; }
}

/* Animations réduites : mains et flèches immobiles (décision d'Olivier). */
@media ( prefers-reduced-motion: reduce ) {
	.citivo-lightbox .citivo-aide-gestes {
		transition: none;
	}
	.citivo-lightbox .citivo-aide-geste-anim {
		animation: none;
	}
}