/**
 * citivo-lightbox-app.css
 *
 * Chantier Découverte, sous-étape 7b (retouche graphique) : nouveau rendu des
 * lightbox de la carte publique — photo en haut, zone de contenu bleue en
 * dessous, registre « application mobile » plutôt qu'overlay web.
 *
 * ⚠️⚠️ TOUT EST PORTÉ PAR LA CLASSE MODIFICATRICE `.is-app`, et c'est
 * délibéré — voir l'approche validée avec Olivier. Ce fichier ne modifie
 * AUCUNE règle existante de citivo-carte-publique.css : celles-ci restent en
 * place et font office de repli. Sans `.is-app` sur le conteneur, pas une
 * seule ligne d'ici ne s'applique. **Le retour arrière est donc le retrait
 * d'une classe dans le PHP, pas une chirurgie CSS** — ce qui compte, la
 * lightbox des signalements étant déjà en production.
 *
 * ⚠️ Déploiement en DEUX TEMPS, pour la même raison : la classe est d'abord
 * posée sur la lightbox des DÉCOUVERTES seule (enjeu faible, contenu simple),
 * validée visuellement, et seulement ensuite sur celle des SIGNALEMENTS. Les
 * règles ci-dessous couvrent pourtant déjà les blocs propres aux signalements
 * (vote, signalement d'abus, badges) : le second temps ne demandera aucune
 * ligne de CSS supplémentaire, uniquement l'ajout de la classe.
 *
 * ⚠️ AUCUN `!important` — la règle absolue du projet est tenue : c'est la
 * spécificité ajoutée par `.is-app` qui permet de surcharger les règles de
 * base. C'est même la raison technique de préférer une classe modificatrice à
 * un fichier qui redéfinirait les mêmes sélecteurs.
 *
 * ⚠️ Le SCROLL est assumé (demande d'Olivier) : le contenu peut dépasser, la
 * zone bleue défile. On ne cherche pas à tout faire tenir sans scroll, ce qui
 * aurait imposé de rogner la photo ou de tronquer les descriptions.
 */

/* ── Structure : photo en haut, contenu en dessous ────────────────────────
   Le dialogue reste une colonne flex (comme la base) ; ce qui change, c'est
   la répartition de la hauteur. En base, l'image porte `flex: 1` et occupe
   tout l'espace, ce qui donne la lecture « texte posé sur la photo ». Ici
   l'image ne grandit plus : elle est plafonnée, et c'est la zone de contenu
   qui prend le reste et défile. ─────────────────────────────────────────── */

/* ⚠️ Le conteneur de base est déjà `position: fixed; inset: 0`, donc plein
   viewport. On ajoute `dvh` UNIQUEMENT pour les navigateurs mobiles, dont les
   barres d'adresse escamotables font varier la hauteur réelle : sans ça, le bas
   de la lightbox peut passer sous la barre. Un navigateur qui ne connaît pas
   l'unité ignore simplement la déclaration et conserve le comportement
   `inset: 0` de la règle de base — aucun repli à écrire. */
.citivo-lightbox.is-app {
	height: 100dvh;

	/* ⚠️ Z-INDEX — le bouton flottant de CookieAdmin passait AU-DESSUS de la
	   lightbox. Diagnostic : ce n'était pas une défaite mais une ÉGALITÉ — la
	   règle de base et ce bouton sont tous deux à 99999, et à valeur égale
	   c'est l'ordre du DOM qui tranche ; or le bouton est injecté en fin de
	   <body>, donc après nous.
	   Paysage réel relevé dans les CSS du site avant de choisir :
	     · CookieAdmin bouton flottant ......  99999  (l'égalité en cause)
	     · CookieAdmin modale · thème Astra .. 100000
	     · CookieAdmin infobulle ............. 999999
	     · WPForms ........................... 999999, 1000000, 2147483647
	   D'où 2 000 000 : au-dessus de tout ce qui peut réellement apparaître sur
	   la page carte, avec de la marge, et SANS chercher à battre le 2147483647
	   de WPForms — c'est la valeur maximale d'un entier, revendiquée par un
	   composant qui se veut au-dessus de tout, et aucun formulaire n'est posé
	   sur cette page.
	   ⚠️ La lightbox des SIGNALEMENTS reste à 99999 et souffre donc du même
	   recouvrement aujourd'hui : elle héritera de ce correctif le jour où elle
	   recevra `.is-app`, sans une ligne de plus. */
	z-index: 2000000;
}

.citivo-lightbox.is-app .citivo-lightbox-dialog {
	/* ⚠️ Fond SOMBRE et non plus bleu : le bleu appartient désormais au seul
	   bandeau, qui flotte au-dessus de la photo. Un dialogue bleu se verrait
	   dans les bandes laissées par `object-fit: contain`. */
	background: #1a1a1a;
	width: 100%;
	/* Plafond de largeur relevé (retour d'Olivier « largeur élargie ») —
	   ⚠️ un seul nombre à changer si le rendu te paraît trop étroit ou trop
	   large. Sous le seuil de 768 px il est levé, voir plus bas. */
	max-width: 640px;
	position: relative;

	/* ⚠️⚠️ `margin: 0` — C'EST LA DÉCLARATION CLÉ de cette retouche, et elle
	   remplace un `margin: auto`. Le conteneur parent est un flex avec
	   `align-items: stretch` : le dialogue DEVRAIT donc occuper toute la
	   hauteur de lui-même. Mais une marge automatique sur un flex item
	   l'emporte sur l'alignement du parent — le `margin: auto` centrait donc
	   la boîte et l'empêchait de s'étirer, d'où la « carte flottante » avec du
	   vide au-dessus et en dessous. Ce n'était pas une histoire de hauteur mal
	   calculée, mais d'alignement neutralisé. */
	margin: 0;

	/* ⚠️⚠️ CORRECTIF 0.84.1 — HAUTEUR QUI S'ADAPTE AU CONTENU, plafonnée à
	   l'écran. C'était `height: 100%`, donc TOUJOURS plein écran : sur une photo
	   au format paysage, la boîte gardait la hauteur du viewport et laissait un
	   grand aplat bleu vide sous l'image.
	   ⚠️ `auto` + `max-height: 100%` : la lightbox fait la hauteur de sa photo,
	   sans jamais dépasser l'écran. Le bandeau, lui, est en position absolue —
	   il flotte SUR la photo et n'entre donc pas dans ce calcul, quelle que soit
	   la taille de l'image. */
	height: auto;
	max-height: 100%;

	/* ⚠️⚠️ SANS CECI, `height: auto` NE SERT À RIEN. Le conteneur parent est un
	   flex en `align-items: stretch` : il étire ses enfants sur toute la hauteur,
	   quelle que soit leur hauteur déclarée. C'est exactement le piège inverse de
	   celui documenté plus haut — en 7b, un `margin: auto` NEUTRALISAIT
	   l'étirement qu'on voulait ; ici on veut le neutraliser, et c'est
	   `align-self` qui le dit proprement, sans effet de bord sur les marges.
	   ⚠️ `center` et non `flex-start` : une photo paysage se pose au milieu de
	   l'écran, pas collée en haut. */
	align-self: center;

	border-radius: 0;

	/* Le dialogue lui-même ne défile plus : c'est la zone de contenu qui le
	   fait, pour que la photo reste visible en haut pendant la lecture. */
	overflow: hidden;
}

/* ⚠️ Mobile : plein écran INTÉGRAL, sans marge ni bord. On lève le plafond de
   largeur, qui laisserait sinon des bandes latérales sur les grands téléphones
   et les petites tablettes (au-delà de 560 px de large). */
@media ( max-width: 767px ) {

	.citivo-lightbox.is-app .citivo-lightbox-dialog {
		max-width: none;
	}
}

/* ⚠️ La photo occupe désormais TOUTE la hauteur disponible du dialogue : c'est
   le bandeau glissable qui vient la recouvrir, pas une zone de texte qui lui
   prend sa place. `flex: 1` (et non plus `0 0 auto`) et plus aucun plafond de
   hauteur. */
.citivo-lightbox.is-app .citivo-lightbox-img-wrap {
	/* ⚠️ CORRECTIF 0.84.1 — ne GRANDIT plus (`flex: 0 1 auto`) : avec un
	   dialogue à hauteur automatique, un bloc qui s'étire imposerait à nouveau
	   le plein écran et ramènerait l'aplat bleu vide. Il peut encore RÉTRÉCIR,
	   pour qu'une photo très haute reste bornée par `max-height` du dialogue. */
	flex: 0 1 auto;
	min-height: 0;
	background: #1a1a1a;
}

.citivo-lightbox.is-app .citivo-lightbox-img {
	width: 100%;
	/* ⚠️ CORRECTIF 0.84.1 : `height: auto` + plafond, au lieu de `height: 100%`
	   qui forçait l'image à remplir une boîte de hauteur figée. */
	height: auto;
	max-height: 100%;
	/* ⚠️ `contain` et non `cover` (retour d'Olivier) : la photo est montrée
	   ENTIÈRE, jamais recadrée. Contrepartie assumée — des bandes sombres
	   apparaissent sur les côtés ou en haut selon le rapport de l'image ; le
	   fond sombre (#1a1a1a) est justement là pour qu'elles se lisent comme un cadre et
	   non comme un défaut. */
	object-fit: contain;

	/* ⚠️ ALIGNEMENT EN HAUT (retour d'Olivier). `object-fit: contain` centre la
	   photo dans sa boîte par défaut (`object-position: 50% 50%`) : le vide se
	   répartissait donc en DEUX bandes, dont une au-dessus, sous le bouton
	   fermer. En calant la photo en haut, tout le vide est reporté EN BAS —
	   c'est-à-dire précisément là où le bandeau bleu vient le recouvrir. La
	   bande sombre devient invisible en pratique.
	   ⚠️ C'est bien `object-position` qu'il faut régler ici, pas un
	   `align-items` sur le conteneur : l'image remplit déjà toute la boîte
	   (`height: 100%`), c'est le CONTENU de cette boîte qui est centré. */
	object-position: 50% 0;
}

/* ── Zone de contenu bleue ───────────────────────────────────────────────── */

.citivo-lightbox.is-app .citivo-lightbox-meta {
	flex: 1 1 auto;
	min-height: 0; /* même piège flexbox que la règle de base : autorise le scroll interne */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 18px 20px 22px;
	background: #315ba3;
	color: #fff;
}

/* ⚠️⚠️ CORRECTIF 0.84.3 — QUAND LA ZONE DE MÉTA EST AUSSI LE BANDEAU, ses
   propriétés de MISE EN PAGE ne doivent plus s'appliquer.

   C'est LA différence entre les deux lightbox, et elle est structurelle : côté
   découverte le bandeau est un élément à lui seul (`citivo-sheet`) ; côté
   signalement, le MÊME élément porte les deux classes — il est à la fois la zone
   de méta et le bandeau. Il héritait donc de deux déclarations qui n'ont aucun
   sens pour un bandeau :

     · `overflow-y: auto` — le bandeau devenait un second conteneur de
       défilement, en concurrence avec son propre corps. C'est lui qui COUPAIT le
       titre : la poignée, placée avant un corps qui prend toute la place
       restante, se retrouvait rognée par ce défilement parasite.
     · `padding: 18px 20px 22px` — la poignée et le corps ont déjà chacun leur
       propre rembourrage ; celui-ci s'ajoutait par-dessus et décalait tout.

   ⚠️ Le fond bleu et la couleur du texte, eux, sont CONSERVÉS : ils valent dans
   les deux rôles, et ce sont eux qui font que les textes du corps restent
   blancs (voir la liste de sélecteurs plus bas, qui nomme encore
   `.citivo-lightbox-meta`). C'était le point de vigilance annoncé en 8c — il
   fallait reprendre ces sélecteurs, pas tout neutraliser en bloc.

   ⚠️ Le double rôle sur un seul élément reste une simplification assumée : le
   séparer proprement demanderait de reprendre toute la liste des sélecteurs de
   couleur, pour un gain invisible à l'écran. À faire le jour où un troisième
   mode arrivera, pas dans un correctif de recette. */
.citivo-lightbox.is-app .citivo-lightbox-meta.citivo-sheet {
	overflow: visible;
	padding: 0;
}

@media ( max-width: 767px ) {

	.citivo-lightbox.is-app .citivo-lightbox-meta.citivo-sheet {
		padding: 0;
	}
}

/* Tous les textes de la zone héritent du blanc — on liste explicitement les
   blocs qui portaient une couleur propre en base, sinon ils resteraient
   sombres sur fond bleu. */
.citivo-lightbox.is-app .citivo-lightbox-meta,
.citivo-lightbox.is-app .citivo-lightbox-meta p,
.citivo-lightbox.is-app .citivo-lightbox-meta h2,
.citivo-lightbox.is-app .citivo-lightbox-status,
.citivo-lightbox.is-app .citivo-lightbox-classification,
.citivo-lightbox.is-app .citivo-lightbox-vote-question,
.citivo-lightbox.is-app .citivo-lightbox-vote-hint,
.citivo-lightbox.is-app .citivo-lightbox-vote-msg,
.citivo-lightbox.is-app .citivo-dec-lightbox-titre {
	color: #fff;
}

/* Les informations secondaires se distinguent par l'opacité, jamais par une
   seconde couleur — sur un aplat, c'est plus lisible et ça reste accessible.
   (0.99.337 : ~~expiration, pseudo~~ — bloc commun des fiches.) */
.citivo-lightbox.is-app .citivo-lightbox-vote-hint {
	opacity: .78;
}

/* ════════════════════════════════════════════════════════════════════════
   OVERLAYS SUR LA PHOTO — sous-étape 8d
   ════════════════════════════════════════════════════════════════════════

   Le badge (statut ou catégorie) et les boutons de vote quittent le bandeau
   pour se poser SUR la photo : haut-gauche et bas-droite. Ils deviennent
   visibles en permanence, y compris bandeau replié.

   ⚠️⚠️ LEUR STYLE NE POUVAIT PAS ÊTRE REPRIS TEL QUEL, et c'est le point à
   comprendre. Sur l'aplat bleu #315ba3, le contraste était GARANTI : un voile
   blanc à 16 % suffisait pour la pastille, une bordure blanche sur fond
   transparent suffisait pour les boutons. **Une photo ne garantit rien** — sur
   un ciel, une façade claire ou de la neige, ces deux traitements deviennent
   illisibles.

   Arbitrage d'Olivier : la lisibilité l'emporte sur la reprise à l'identique.
   On applique donc à ces éléments le vocabulaire visuel DÉJÀ éprouvé pour ce
   qui se pose sur une image dans cette lightbox — celui du bouton fermer, un
   fond sombre translucide.

   ⚠️ Positionnement par rapport au DIALOGUE, qui est déjà `position: relative`.
   La photo occupe toute sa hauteur (le bandeau flotte par-dessus), « sur la
   photo » et « sur le dialogue » désignent donc la même zone.

   ⚠️⚠️ SOUS-ÉTAPE A3 — LE PLACEMENT DES SURCOUCHES N'EST PLUS ICI. Les deux
   règles génériques (`.citivo-photo-overlay` et sa variante `--badge`) sont
   passées dans la COQUE, citivo-lightbox.css : elles étaient utiles à tous et
   enfermées sous `.is-app`, quatrième occurrence du piège des sous-étapes 10c,
   A1a et A2b-1. Ne reste ici que ce qui est propre au rendu « application » —
   l'APPARENCE des surcouches, et le placement du bloc de vote, qui n'existe que
   sur la carte publique. ────────────────────────────────────────────────── */

/* ⚠️ La pastille RETROUVE UN FOND OPAQUE — c'est celui qu'elle avait avant de
   passer sur l'aplat bleu (`rgba( 41, 128, 185, .85 )`), et il avait justement
   été choisi pour tenir sur une image. On ne réinvente rien : on revient au
   traitement d'origine, qui redevient le bon dès lors que le support redevient
   une photo.
   ⚠️ L'ombre portée fait le reste sur les images très claires, où même un bleu
   à 85 % peut manquer de détachement. */
.citivo-lightbox.is-app .citivo-photo-overlay--badge .citivo-lightbox-badge,
.citivo-lightbox:is( .is-app, .has-photo-votes ) .citivo-photo-overlay--badge .citivo-dec-lightbox-categorie {
	margin: 0;
	padding: 4px 10px;
	border-radius: 10px;
	background: rgba( 41, 128, 185, .85 );
	color: #fff;
	font-size: var( --citivo-fs-pastille );
	font-weight: 700;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, .35 );
}

/* ⚠️ 0.99.332-333 — la pastille de CATÉGORIE gagne les fiches privées
   (`.has-photo-votes` : « Mes découvertes », gestion) : catégorie et état
   CÔTE À CÔTE (demande d'Olivier, 0.99.333 — ~~l'une sous l'autre~~). */
/* ⚠️ 0.99.402 — la rangée vaut pour les SIX fiches (~~`.has-photo-votes`
   seulement~~) : pastille de classe (objet / catégorie) à gauche, état à
   droite, carte publique comprise (demande d'Olivier : homogénéiser). */
.citivo-lightbox .citivo-photo-overlay--badge {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.citivo-lightbox .citivo-photo-overlay--badge > [hidden] {
	display: none;
}

/* ── 0.99.402 — Pastille de CLASSE : icône + nom, fond = couleur de l'objet
   (signalement) ou de la catégorie (découverte), posée en ligne par
   `CitivoCarteCore.remplirPastilleClasse()`, avec un texte sombre sur les
   couleurs claires. ⚠️ Spécificité supérieure aux règles de la pastille de
   catégorie ci-dessus et de citivo-carte-decouverte.css : la forme est la
   même sur les six fiches ; le fond bleu de ces règles ne reste qu'en repli
   (couleur inconnue), le style en ligne l'emporte sinon. */
.citivo-lightbox .citivo-photo-overlay--badge p.citivo-pastille-classe {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 4px 10px;
	border-radius: 10px;
	font-size: var( --citivo-fs-pastille );
	font-weight: 700;
	line-height: 1.4;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, .35 );
}

.citivo-lightbox .citivo-photo-overlay--badge p.citivo-pastille-classe[hidden] {
	display: none;
}

.citivo-lightbox .citivo-pastille-classe-icone {
	flex: 0 0 auto;
	width: 1.3em;
	height: 1.3em;
}

/* ⚠️ 0.99.404 — « Traité » en VERT sur la carte publique, même teinte que
   `.citivo-ms-badge--traite` des écrans privés (retour d'Olivier). Une
   classe de plus que la règle du fond bleu (`.is-app`), pour passer devant. */
.citivo-lightbox .citivo-photo-overlay--badge .citivo-lightbox-badge.citivo-lightbox-badge--traite {
	background: rgba( 39, 174, 96, .9 );
}

/* Les pastilles d'ÉTAT prennent la même hauteur de ligne et le même
   rembourrage, pour que les deux pastilles de la rangée aient la même
   hauteur (~~3px 9px~~ : 2 px de moins, mesuré). ⚠️ L'enveloppe d'une
   pastille d'état de DÉCOUVERTE garde son rembourrage nul (règle `:has()`
   plus haut, plus spécifique) : c'est la pastille intérieure qui le porte. */
.citivo-lightbox .citivo-photo-overlay--badge .citivo-lightbox-badge,
.citivo-lightbox .citivo-photo-overlay--badge p.citivo-ms-lightbox-badge {
	margin: 0;
	padding: 4px 10px;
	line-height: 1.4;
}

/* ⚠️⚠️ LA PASTILLE D'ÉTAT D'UNE DÉCOUVERTE EST CELLE DE LA CARD
   (`.citivo-ms-badge`, posée par le serveur dans le `<p>`) : sur la card elle
   est en `position: absolute` en haut à gauche — dans la fiche, elle passait
   donc PAR-DESSUS la catégorie (vu par Olivier). Ici elle reprend sa place
   dans la rangée, et son enveloppe ne dessine plus une seconde pastille. */
/* ⚠️ 0.99.334 : ~~`display: inline-block`~~ — la pastille d'état restait posée
   sur la ligne de texte de son `<p>` et sortait 3 px plus HAUT que la
   catégorie (vu par Olivier). L'enveloppe devient un `flex` (plus de ligne de
   texte) et les deux pastilles prennent la MÊME hauteur de ligne. */
/* ⚠️ 0.99.335 : `margin: 0` — l'enveloppe gardait une marge basse de 6 px
   (règle `p` d'une autre feuille), qui la remontait de 3 px une fois centrée
   dans la rangée. Mesuré : c'était la cause, pas la hauteur de ligne. */
.citivo-lightbox.has-photo-votes .citivo-photo-overlay--badge .citivo-ms-lightbox-badge:has( > .citivo-ms-badge ) {
	display: flex;
	margin: 0;
	padding: 0;
	box-shadow: none;
	background: none;
}

.citivo-lightbox.has-photo-votes .citivo-photo-overlay--badge .citivo-ms-lightbox-badge > .citivo-ms-badge {
	position: static;
	display: block;
	padding: 4px 10px;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, .35 );
}

.citivo-lightbox.has-photo-votes .citivo-photo-overlay--badge .citivo-dec-lightbox-categorie,
.citivo-lightbox.has-photo-votes .citivo-photo-overlay--badge .citivo-ms-lightbox-badge > .citivo-ms-badge {
	line-height: 1.4;
}

/* 0.99.445 — « À la Une » : pastille GRIS FONCÉ, la couleur de la Une (le
   contour des pins de la carte de zone prendra la même). */
.citivo-lightbox .citivo-photo-overlay--badge .citivo-une-pastille {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 4px 10px;
	border-radius: 999px;
	background: #f5b000; /* 0.99.520 : jaune orangé, texte brun foncé (~~#333 / blanc~~). */
	color: #3b2a00;
	font-size: var( --citivo-fs-pastille );
	font-weight: 700;
	line-height: 1.4;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, .35 );
}

/* ⚠️ 0.99.448 — le `display: inline-flex` ci-dessus écrasait l'attribut
   `hidden` : la pastille restait affichée après « Retirer de la Une ». */
.citivo-lightbox .citivo-photo-overlay--badge .citivo-une-pastille[hidden] {
	display: none;
}

/* ── Vote, en bas à droite ──────────────────────────────────────────────── */

/* ⚠️⚠️ 0.99.254 — `.has-photo-votes` : LES FICHES DES ÉCRANS PRIVÉS (« Mes
   découvertes », puis « Mes signalements » et les deux écrans de gestion)
   empruntent à la carte publique ses pouces sur la photo, son bouton des
   commentaires et la section de commentaires du bandeau — et RIEN d'autre de
   cette peau (pas de plein écran, pas de couleurs de fiche). Demande
   d'Olivier : homogénéiser votes et commentaires.
   ⚠️ Seules les règles de ces trois sujets portent `:is(.is-app,
   .has-photo-votes)`, tout le reste de la feuille reste réservé à `.is-app`.
   `:is()` prend la force de son argument le plus fort : une classe, comme
   avant — la carte publique ne voit AUCUNE différence de cascade.
   ⚠️ Une règle de plus sur ces sujets ? Lui donner la même forme, sinon elle
   manquera aux fiches privées sans la moindre erreur. */

/* ⚠️ 0.99.254 — LA GARDE `[hidden]` DU BLOC : les fiches privées le masquent
   hors `publish`, et ses `display: flex` (ici et plus bas) battraient
   l'attribut — le piège le plus constant du projet. 0-4-0, au-dessus d'eux. */
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-photo-overlay--vote[hidden] {
	display: none;
}

.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-photo-overlay--vote {
	right: 12px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .4rem;

	/* ⚠️⚠️ LA DÉCLARATION CLÉ. Le bandeau replié occupe le bas du dialogue :
	   posés à `bottom: 12px`, les boutons passeraient DERRIÈRE la poignée. Ils
	   se calent donc au-dessus d'elle, via la hauteur que le module de bandeau
	   PUBLIE (voir citivo-sheet.js). Elle est mesurée, donc juste quelle que
	   soit la hauteur réelle de la poignée — c'est ce que la 8b a rendu
	   possible.
	   ⚠️ Le repli `66px` couvre le court instant avant que le JS n'ait mesuré,
	   et le cas où le module manquerait. */
	bottom: calc( var( --citivo-sheet-visible, 66px ) + 12px );
}

/* Fond sombre translucide — même traitement que le bouton fermer, qui est posé
   sur cette photo depuis la 7b et reste lisible sur toutes les images. */
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-photo-overlay--vote .citivo-lightbox-vote-question {
	margin: 0;
	padding: 3px 9px;
	border-radius: 8px;
	background: rgba( 0, 0, 0, .55 );
	color: #fff;
	font-size: var( --citivo-fs-pastille );
	font-weight: 600;
}

/* ⚠️ Les boutons gardent leur bordure blanche et leur forme compacte — c'est
   la demande. Seul le fond change : `transparent` devient sombre translucide,
   sans quoi bordure blanche et chiffre blanc disparaissent sur une image
   claire. La forme, elle, est bien celle des boutons de découverte. */
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-photo-overlay--vote .citivo-lightbox-vote-pour-btn,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-photo-overlay--vote .citivo-lightbox-vote-contre-btn,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-photo-overlay--vote .citivo-lightbox-vote-comments-btn,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-photo-overlay--vote .citivo-dec-vote-btn {
	padding: .35rem .6rem;
	background: rgba( 0, 0, 0, .55 );
	box-shadow: 0 2px 8px rgba( 0, 0, 0, .3 );
}

/* ⚠️ 0.99.130 → 0.99.131 — LE BOUTON « COMMENTAIRES » SUR LA PHOTO n'a PLUS de
   règles à lui : sa première version imposait bordure et interligne, et il ne
   ressemblait à aucun de ses voisins (retour d'Olivier). Il porte maintenant la
   classe des votes de sa fiche — `citivo-dec-vote-btn` sur les découvertes,
   `citivo-lightbox-vote-comments-btn` ajoutée aux listes du vote signalement.
   ⚠️ Seule reste la garde `hidden`, plus forte que les `display: inline-flex`
   de ces listes : le module le masque quand les commentaires sont fermés. */
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-photo-overlay--vote button.citivo-commentaires-voir[hidden] {
	display: none;
}

/* Vote posé : l'inversion blanche reste, elle est parfaitement lisible sur
   n'importe quel fond. */
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-photo-overlay--vote .citivo-lightbox-vote-pour-btn.is-active,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-photo-overlay--vote .citivo-lightbox-vote-contre-btn.is-active,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-photo-overlay--vote .citivo-dec-vote-btn.is-voted {
	background: #fff;
}

/* Les deux blocs de vote perdent leur mise en page « bloc du bandeau ». */
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-photo-overlay--vote .citivo-lightbox-vote-buttons,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-photo-overlay--vote {
	background: none;
	padding: 0;
}

.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-photo-overlay--vote .citivo-lightbox-vote-buttons {
	display: flex;
	gap: .4rem;
}

/* ⚠️ ~~0.99.150 — le bouton « commentaires » poussé à gauche, la rangée en
   pleine largeur, les boutons figés à leur taille.~~ **CES QUATRE RÈGLES ONT
   ÉTÉ RETIRÉES EN `0.99.151`** : le redesign en fin de fichier les refait toutes,
   et pour les DEUX fiches. *Deux règles qui disent la même chose finissent par
   se contredire* — les laisser « au cas où » aurait été le vrai risque.
   ⚠️ Leur raisonnement, lui, est conservé là-bas : `margin-right: auto` plutôt
   que `space-between`, et le `flex: 0 0 auto` sans lequel une rangée pleine
   largeur ferait enfler les boutons. */

/* ⚠️ CORRECTIF 0.84.1 — LE VOTE DES DÉCOUVERTES REVIENT EN LIGNE. La règle
   d'overlay ci-dessus empile en COLONNE, ce qui est juste pour le signalement
   (le titre « Toujours présent ? » au-dessus, la rangée de boutons en dessous)
   mais faux ici : `.citivo-dec-vote` EST l'overlay, et ses deux boutons en sont
   les enfants directs — ils se retrouvaient donc l'un sous l'autre au lieu
   d'être côte à côte.
   ⚠️ La forme compacte HORIZONTALE de la découverte est justement celle qu'on a
   demandé au signalement d'adopter : la rétablir ici, c'est revenir à la
   référence, pas créer une exception. */
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-photo-overlay--vote.citivo-dec-vote {
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	margin-top: 0;
}

/* ── Blocs teintés PROPRES aux signalements (second temps du redesign) ─────
   ⚠️ Leur bleu d'origine (`rgba(41,128,185,…)` + bordure `#2980b9`) avait été
   choisi sur le fond NOIR de la lightbox de base. Sur le fond bleu #315ba3 il
   devient bleu-sur-bleu : la pastille se fond dans l'aplat, et les deux
   encadrés cessent de se lire comme des encadrés. Même remède que pour la
   pastille de catégorie des découvertes juste au-dessus — un voile blanc
   translucide, qui fonctionne sur n'importe quel aplat.

   ⚠️ La note « les badges sont déjà couverts » (en tête de ce fichier et dans
   CLAUDE.md) était OPTIMISTE : seul leur TEXTE était blanc, et il l'était déjà
   dans le CSS de base — leur teinte n'avait jamais été traitée. Vérifié bloc
   par bloc avant de poser la classe. ─────────────────────────────────────── */

.citivo-lightbox.is-app .citivo-lightbox-badge {
	background: rgba( 255, 255, 255, .16 );
	color: #fff;
}

/* 0.99.337 : ~~message de statut, « votes suspendus »~~ — messages du bloc
   commun des fiches (citivo-fiche-infos.css). */

/* ── Boutons « outline » blancs ──────────────────────────────────────────
   Un seul jeu de règles pour TOUS les boutons de la zone, quels que soient
   leurs styles d'origine (le bouton « Envoyer » du signalement d'abus était
   rouge, les boutons de vote avaient leur propre fond) — c'est le rendu
   uniforme demandé. ──────────────────────────────────────────────────────── */

.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-meta button,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-vote-pour-btn,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-vote-contre-btn,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-vote-comments-btn,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-report-submit,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-report-cancel {
	border: 1px solid rgba( 255, 255, 255, .75 );
	border-radius: 8px;
	background: transparent;
	color: #fff;
	font: inherit;
	padding: .5rem .9rem;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button:hover:not( :disabled ),
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-meta button:hover:not( :disabled ) {
	border-color: #fff;
	background: rgba( 255, 255, 255, .14 );
}

.citivo-lightbox.is-app .citivo-lightbox-meta button:disabled {
	opacity: .45;
	cursor: default;
}

.citivo-lightbox.is-app .citivo-lightbox-meta button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ── « Signaler » RESTE UN TEXTE-LIEN DISCRET ─────────────────────────────
   ⚠️⚠️ EXIGENCE DE CONCEPTION, PAS UNE PRÉFÉRENCE — reprise telle quelle de
   citivo-carte-publique.css : « un visiteur ne doit jamais confondre "je ne
   suis pas d'accord" (vote, mis en avant) et "ce contenu est un abus" (en
   retrait) ». Le traitement « outline » uniforme ci-dessus aplatissait cette
   hiérarchie au moment de poser `.is-app` sur la lightbox des signalements.
   Arbitrage d'Olivier : on préserve la distinction.

   ⚠️ `.citivo-lightbox-report-btn` a été RETIRÉ de la liste « outline »
   ci-dessus — mais ça ne suffisait pas : le sélecteur générique
   `.citivo-lightbox-meta button` (0-3-1) l'attrape aussi. D'où la forme
   `button.citivo-lightbox-report-btn` (0-4-1), qui l'emporte PAR SPÉCIFICITÉ
   et non par ordre de déclaration — la règle resterait donc correcte même si
   ce fichier était réordonné un jour.

   ⚠️ Seul le DÉCLENCHEUR reste discret. « Envoyer » et « Annuler » du
   formulaire d'abus gardent l'outline : une fois le formulaire ouvert, ce sont
   des actions ordinaires qui doivent se voir. ──────────────────────────────*/

/* ⚠️⚠️ ÉTENDUE AUX DEUX VUES ET AUX DEUX ACTIONS (0.99.42) — RETOUR DE RECETTE
   D'OLIVIER : « le bouton signaler n'est pas un bouton sur les signalements
   alors que c'en est un sur les découvertes ».
   ⚠️ CAUSE : cette exception ne visait que `.citivo-lightbox-meta`, la classe
   que porte la fiche des SIGNALEMENTS. Celle des découvertes est un
   `.citivo-sheet-body`, qui tombait donc dans la règle « outline » ci-dessus.
   **Ce n'était pas un choix, c'était une exception écrite pour un seul des deux
   cas** — et elle a survécu telle quelle à l'arrivée de la seconde vue.
   ⚠️ « Partager » (0.99.39) REJOINT le registre discret : les deux actions de
   cette rangée sont SECONDAIRES, et c'est ce qui préserve la hiérarchie voulue
   — le vote reste la seule action mise en avant.
   ⚠️ Les quatre sélecteurs restent en `button.<classe>` (0-4-1) : ils l'emportent
   PAR SPÉCIFICITÉ sur `.citivo-sheet-body button` (0-3-1), jamais par l'ordre —
   la règle resterait correcte si ce fichier était réordonné un jour. */

.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-meta button.citivo-lightbox-report-btn,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-lightbox-report-btn,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-meta button.citivo-lightbox-share-btn,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-meta button.citivo-lightbox-mairie-btn,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-lightbox-share-btn,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-lightbox-mairie-btn,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-lightbox-comment-btn,
/* ⚠️⚠️ R5e — « SUIVRE » REJOINT L'EXCEPTION, IL NE LA CONCURRENCE PAS. Olivier
   l'a demandé « dans le même style que le lien Partager », et la mesure a
   montré qu'une surcharge écrite ailleurs ne suffisait PAS : la règle
   « outline » `.citivo-sheet-body button` pèse 0-4-1 une fois qualifiée, contre
   0-2-0 pour une règle de feuille d'hôte. Le bouton gardait donc sa bordure
   blanche et son radius. ➡️ *Quand un écran a déjà une liste d'exceptions, on
   s'y inscrit — en ouvrir une seconde, c'est rouvrir l'arbitrage à chaque
   ajout.* */
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-meta button.citivo-lightbox-suivre-btn,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-lightbox-suivre-btn {
	border: none;
	border-radius: 0;
	background: transparent;
	/* Un cran plus lisible qu'en base (.55) : l'aplat bleu est plus clair que
	   le fond noir d'origine, le gris translucide y perd du contraste. */
	color: rgba( 255, 255, 255, .7 );
	padding: 10px 4px;
}

.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-meta button.citivo-lightbox-report-btn:hover:not( :disabled ),
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-lightbox-report-btn:hover:not( :disabled ),
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-meta button.citivo-lightbox-share-btn:hover:not( :disabled ),
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-meta button.citivo-lightbox-mairie-btn:hover:not( :disabled ),
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-lightbox-share-btn:hover:not( :disabled ),
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-lightbox-mairie-btn:hover:not( :disabled ),
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-lightbox-comment-btn:hover:not( :disabled ),
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-meta button.citivo-lightbox-suivre-btn:hover:not( :disabled ),
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-lightbox-suivre-btn:hover:not( :disabled ) {
	border-color: transparent;
	background: transparent;
	color: #fff;
	text-decoration: underline;
}

/* ⚠️⚠️ R5d-3 (0.99.184) — L'ÉTAT « SUIVI » N'A PLUS DE RÈGLE PROPRE, ET C'EST
   LE CORRECTIF. ~~R5e le passait en blanc plein et en gras~~ : or le blanc
   plein est ICI la couleur du SURVOL. Après un clic, « Suivi » restait donc
   figé dans l'apparence d'un lien survolé (retour d'Olivier en recette). Il
   reprend le blanc à .7 de ses voisins ; l'icône (cercle avec un `−`) et le
   libellé portent l'état à eux seuls. *Dans une rangée où une couleur signifie
   déjà quelque chose, un état ne s'y distingue pas en empruntant cette
   couleur.* */

/* Le bouton de vote actif s'inverse — c'est le seul état « plein » conservé,
   parce qu'il doit rester lisible d'un coup d'œil que le vote est posé. */
.citivo-lightbox.is-app .citivo-lightbox-vote-pour-btn.is-active,
.citivo-lightbox.is-app .citivo-lightbox-vote-contre-btn.is-active {
	background: #fff;
	color: #315ba3;
}

/* Les compteurs de vote accompagnent leur bouton, jamais un bloc à part.
   ⚠️ CORRECTIF 0.81.1 — `inherit` ET NON `#fff`. Le blanc en dur était juste,
   sauf dans l'état qui compte : au vote posé, le bouton s'inverse
   (`background: #fff; color: #315ba3`) et le compteur restait BLANC SUR BLANC,
   donc illisible. L'icône, elle, suivait — parce qu'elle est en `currentColor`
   et n'a aucune couleur propre.
   ⚠️ La leçon est là : une couleur fixe sur un enfant NEUTRALISE l'inversion du
   parent. `inherit` fait suivre le compteur dans les DEUX états, et rend
   impossible de les désynchroniser à nouveau.
   ⚠️ Les compteurs de vote des DÉCOUVERTES n'ont jamais eu ce défaut,
   précisément parce qu'on ne leur a jamais donné de couleur propre — ils ne
   déclarent qu'un `font-variant-numeric`. */
.citivo-lightbox.is-app .citivo-lightbox-vote-pour-count,
.citivo-lightbox.is-app .citivo-lightbox-vote-contre-count {
	color: inherit;
}

/* ── Blocs 👍 / 👎 des découvertes (chantier Découverte, sous-étape 8) ─────
   ⚠️ Volontairement MINUSCULE : le bouton lui-même hérite déjà de l'outline
   blanc, du hover et du focus via `.citivo-sheet-body button` plus haut —
   il n'y a donc rien à redéclarer, seulement à disposer. Un jeu de règles
   complet pour ce bouton aurait dupliqué ce style et condamné les deux à
   diverger.
   ⚠️ Classe `.is-voted` distincte de `.is-active` du vote signalement : les deux
   blocs cohabiteront dans la même lightbox le jour où celle des signalements
   recevra `.is-app`, et deux noms évitent qu'un ajustement sur l'un déteigne
   silencieusement sur l'autre.
   ⚠️ Les deux boutons sont MUTUELLEMENT EXCLUSIFS — un seul peut porter
   `.is-voted` à la fois. Ce n'est pas le CSS qui le garantit mais le JS, qui
   dérive les deux états d'une SEULE valeur (`my_vote`) : « les deux allumés »
   n'est pas un état représentable. ───────────────────────────────────────── */

.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-dec-vote {
	display: flex;
	align-items: center;
	gap: .6rem;
	flex-wrap: wrap;
	margin-top: .9rem;
}

.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-dec-vote-btn {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
}

/* Vote posé : même inversion que le bouton de vote signalement actif — c'est
   le vocabulaire visuel « état plein » déjà établi dans cette lightbox.
   ⚠️ Le curseur redevient neutre : le bouton reste lisible (il porte le
   compteur, l'information utile) mais n'invite plus au clic, puisqu'un second
   clic ne ferait rien. Jamais `disabled` : un bouton désactivé sort de l'ordre
   de tabulation et son compteur cesserait d'être annonçable. */
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-dec-vote-btn.is-voted {
	background: #fff;
	color: #315ba3;
	border-color: #fff;
	cursor: default;
}

.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-dec-vote-pour-count,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-dec-vote-contre-count {
	font-variant-numeric: tabular-nums;
}

.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-dec-vote-msg {
	color: #fff;
	opacity: .78;
	margin: 0;
}

/* ── Champs du formulaire de signalement d'abus ───────────────────────────
   Même traitement « outline » que les boutons, pour que le bloc entier soit
   cohérent une fois la classe posée sur la lightbox des signalements. ───── */

.citivo-lightbox.is-app .citivo-lightbox-report-motif,
.citivo-lightbox.is-app .citivo-lightbox-report-detail {
	width: 100%;
	box-sizing: border-box;
	padding: .5rem .6rem;
	border: 1px solid rgba( 255, 255, 255, .6 );
	border-radius: 8px;
	background: rgba( 255, 255, 255, .1 );
	color: #fff;
	font: inherit;
}

/* ⚠️ Les <option> d'un <select> sont rendues par le SYSTÈME, pas par la page :
   sur fond bleu translucide elles deviendraient illisibles (texte blanc sur
   fond blanc natif). On leur impose donc un fond sombre explicite. */
.citivo-lightbox.is-app .citivo-lightbox-report-motif option {
	background: #1d3a68;
	color: #fff;
}

.citivo-lightbox.is-app .citivo-lightbox-report-detail::placeholder {
	color: rgba( 255, 255, 255, .65 );
}

/* ── Bouton fermer ───────────────────────────────────────────────────────
   Repositionné SUR la photo (elle est désormais en haut et pleine largeur),
   avec un fond assombri pour rester visible quelle que soit l'image. ────── */

.citivo-lightbox.is-app .citivo-lightbox-close {
	background: rgba( 0, 0, 0, .55 );
	color: #fff;
	/* ⚠️ Au-dessus du bandeau (z-index 3) : déplié, celui-ci couvre presque
	   tout le dialogue et masquerait sinon la seule sortie. */
	z-index: 4;
}

.citivo-lightbox.is-app .citivo-lightbox-close:hover {
	background: rgba( 0, 0, 0, .75 );
}

/* ════════════════════════════════════════════════════════════════════════
   BANDEAU GLISSABLE — CE N'EST PLUS ICI
   ════════════════════════════════════════════════════════════════════════

   ⚠️⚠️ SOUS-ÉTAPE A2b-1 — TOUTES LES RÈGLES `.has-sheet` SONT PARTIES DANS
   assets/css/citivo-sheet.css, mise en file par Citivo_Sheet::enqueue_assets()
   en même temps que le script du module.

   Raison : elles vivaient ici, dans une feuille que SEULE la carte publique
   charge. « Mes signalements » et le tableau de bord mairie, qui reçoivent un
   bandeau en A2b-2/A2b-3, l'auraient obtenu sans aucune mise en forme. C'est le
   piège des sous-étapes 10c et A1a, rencontré une troisième fois — un module
   partagé n'est partageable que si ses TROIS pièces le sont.

   ⚠️ AUCUNE RÈGLE N'A ÉTÉ MODIFIÉE au passage : déplacement pur, la carte
   publique doit être strictement identique.

   ⚠️ CE QUI RESTE DANS CE FICHIER et concerne quand même le bandeau, parce que
   c'est du rendu `is-app` et non du bandeau : le cas où la zone de méta EST le
   bandeau (correctif 0.84.3, plus haut), le traitement « outline » des boutons
   de son corps, et la position des overlays de vote au-dessus de la poignée.
   ─────────────────────────────────────────────────────────────────────── */

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media ( max-width: 767px ) {

	.citivo-lightbox.is-app .citivo-lightbox-meta {
		padding: 16px 16px 20px;
	}
}

/* ⚠️⚠️⚠️ FICHE SANS PHOTO — LA MOITIÉ CSS D'UN CORRECTIF QUI EN COMPTE DEUX.
   Diagnostiqué au navigateur le 22/08/2026 (`?signalement=527`) : la fiche
   s'ouvrait sur un voile noir VIDE, et la mesure qui a tranché est
   `dialog.height === 0`.

   La cause : `.citivo-lightbox-meta` est en `position: absolute` — le bandeau
   FLOTTE au-dessus de la photo, c'est tout le principe de cette peau. Il ne
   compte donc pas dans la hauteur du dialogue, et **la photo en était le seul
   enfant dans le flux**. Sur un `citivo_rejete_mairie`, dont la photo est
   réellement détruite au rejet, le dialogue tombait à 0 px — et son
   `overflow: hidden` découpait le bandeau en entier. Le contenu existait,
   mesuré à 100 px de haut, entièrement hors cadre.

   ⚠️ Le remède est de REMETTRE LE BANDEAU DANS LE FLUX quand il n'y a pas de
   photo : il cesse d'être une surcouche pour devenir le contenu lui-même, et
   le dialogue reprend sa hauteur. *Le bandeau flotte parce qu'il y a une photo
   à ne pas cacher ; sans photo, il n'y a rien au-dessus de quoi flotter.*

   ⚠️⚠️ NE PAS RETIRER `sheetCtl.open()` DE citivo-carte-publique.js EN CROYANT
   QUE CETTE RÈGLE SUFFIT : un bandeau replié ne montre que sa poignée, même
   dans le flux. **Les deux gestes sont nécessaires, aucun ne se voit seul** —
   c'est ce qui a coûté deux versions avant de mesurer.

   ⚠️ `max-height` levé : il bornait le bandeau à 82 % de la HAUTEUR DE LA
   PHOTO, une contrainte qui n'a plus d'objet quand il n'y a pas de photo. */
.citivo-lightbox.is-app.is-photoless .citivo-lightbox-meta {
	position: relative;
	max-height: none;
}

/* ── Commentaires (chantier commentaires, C2) : trois boutons DISCRETS ──────
   ⚠️ Le module (citivo-commentaires.css) est NEUTRE et ne connaît pas cette
   lightbox ; c'est donc ICI, à côté de la règle « outline » qui attrape tous
   les boutons du bandeau, que se règle son exception — exactement comme
   « Signaler » et « Partager » au-dessus.
   ⚠️ « Répondre » et les deux « Annuler » sont des gestes SECONDAIRES : en
   outline, chaque commentaire porterait un bouton aussi visible que « Publier ».
   « Commenter » et « Publier » gardent l'outline — ce sont les actions.
   ⚠️ Même forme `button.<classe>` (0-4-1) : l'emporte PAR SPÉCIFICITÉ sur
   `.citivo-sheet-body button` (0-3-1), jamais par l'ordre du fichier. */

.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-commentaire-repondre,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-commentaire-afficher,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-commentaire-signaler,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-commentaire-supprimer,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-commentaires-abus-cancel,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-commentaires-annuler,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-commentaires-cible-annuler {
	border: none;
	border-radius: 0;
	background: transparent;
	color: rgba( 255, 255, 255, .75 );
	padding: 4px 2px;
	font-size: var( --citivo-fs-texte );
}

.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-commentaire-repondre:hover:not( :disabled ),
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-commentaire-afficher:hover:not( :disabled ),
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-commentaire-signaler:hover:not( :disabled ),
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-commentaire-supprimer:hover:not( :disabled ),
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-commentaires-abus-cancel:hover:not( :disabled ),
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-commentaires-annuler:hover:not( :disabled ),
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-commentaires-cible-annuler:hover:not( :disabled ) {
	border-color: transparent;
	background: transparent;
	color: #fff;
	text-decoration: underline;
}

/* ⚠️ C4 — LES VOTES D'UN COMMENTAIRE : pouce + nombre, SANS contour (chaque
   commentaire en porte deux ; en outline, le fil deviendrait une grille de
   boutons). Même forme `button.<classe>` (0-4-1) que les exceptions ci-dessus.
   Voté : blanc plein ; inactif (lecture seule, son propre commentaire,
   gestionnaire dans sa zone) : atténué, compteur toujours lisible.
   ⚠️ « Afficher quand même » a rejoint la liste de « Répondre » ci-dessus. */
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-commentaire-vote {
	border: none;
	border-radius: 999px;
	background: transparent;
	color: rgba( 255, 255, 255, .75 );
	padding: 3px 8px;
	font-size: var( --citivo-fs-texte );
}

.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-commentaire-vote:hover:not( :disabled ) {
	border-color: transparent;
	background: rgba( 255, 255, 255, .14 );
	color: #fff;
}

.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-commentaire-vote.is-active {
	background: #fff;
	color: #315ba3;
}

.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-commentaire-vote:disabled {
	opacity: .55;
	cursor: default;
}

/* ⚠️ 0.99.125 — l'icône « Commenter » ronde, en tête de la section, était stylée
   ici. ⚠️ 0.99.129 : le bouton a rejoint la rangée d'actions (icône + libellé,
   classe `citivo-lightbox-comment-btn`, règles de « Partager » ci-dessus) ; ses
   règles d'icône ronde sont retirées. Seule reste la garde `hidden`, pour la même
   raison qu'alors : un `display` de la rangée ne doit jamais l'emporter sur
   l'attribut. */

/* ⚠️ 0.99.254 — SUR LES FICHES PRIVÉES, la base de ce bouton (icône et libellé
   alignés, zone tactile de 44 px) manquait : elle vit dans
   citivo-carte-publique.css, que ces écrans ne chargent pas — l'icône flottait
   au-dessus du texte. Reprise ici pour `.has-photo-votes` SEULEMENT (la carte
   publique a déjà la sienne), avec la rangée qui le porte : à droite, sous un
   filet, comme « Partager / Signaler / Commenter » en public. */
.citivo-lightbox.has-photo-votes .citivo-sheet-body button.citivo-lightbox-comment-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
}

/* ⚠️ 0.99.255 — MÊME CAS POUR LES POUCES DES SIGNALEMENTS : leur base (icône et
   chiffre alignés, chiffres de largeur fixe, graisse) vit dans
   citivo-carte-publique.css. Le reste (taille, couleur, fond, bordure) vient du
   groupe, plus bas dans ce fichier. */
.citivo-lightbox.has-photo-votes .citivo-lightbox-vote-pour-btn,
.citivo-lightbox.has-photo-votes .citivo-lightbox-vote-contre-btn {
	display: inline-flex;
	align-items: center;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.citivo-lightbox.has-photo-votes .citivo-lightbox-vote-pour-btn:disabled,
.citivo-lightbox.has-photo-votes .citivo-lightbox-vote-contre-btn:disabled {
	cursor: default;
}

/* ⚠️ 0.99.257 — `.votes-lecture-seule` : LES DEUX ÉCRANS DE GESTION montrent
   les pouces sans permettre de voter (décision R3). Ils y sont TOUJOURS
   désactivés, et le grisé prévu pour « pas maintenant » (non connecté, votes
   suspendus) les aurait rendus pâles en permanence : ici c'est une information,
   elle reste pleinement lisible. 0-5-1, au-dessus des règles `:disabled` du
   groupe (0-4-0). */
.citivo-lightbox.has-photo-votes.votes-lecture-seule .citivo-photo-overlay--vote button:disabled {
	opacity: 1;
	cursor: default;
}

.citivo-lightbox.has-photo-votes .citivo-lightbox-commenter {
	display: flex;
	justify-content: flex-end;
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid rgba( 255, 255, 255, .1 );
}

.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-sheet-body button.citivo-lightbox-comment-btn[hidden] {
	display: none;
}

/* ═══ 0.99.151 — LES DEUX BLOCS DE VOTE PRENNENT LA MÊME FORME ════════════
   Demande d'Olivier, en trois points : la question passe À GAUCHE des pouces,
   un SEUL fond sombre englobe la question et les deux boutons, et les boutons
   eux-mêmes perdent fond et bordure — « comme sur Instagram : uniquement
   l'icône avec le chiffre ». Plus l'homogénéisation de la fiche des
   DÉCOUVERTES : commentaires à gauche, votes à droite.

   ⚠️⚠️ CE QUE ÇA RÉPARE : chaque élément portait sa propre pastille sombre —
   une sous la question, une sous chaque bouton. Trois pastilles pour une seule
   question, et c'est à l'œil de les regrouper. Le fond passe donc sur le
   GROUPE : *ce qui se lit ensemble doit être posé ensemble.*

   ⚠️ CES RÈGLES SONT EN FIN DE FICHIER, DÉLIBÉRÉMENT : elles annulent des
   déclarations écrites plus haut (fond, bordure, ombre des boutons) à
   spécificité comparable. C'est l'ORDRE qui tranche, et le regroupement ici
   rend visible d'un coup d'œil tout ce que ce redesign remplace — plutôt que
   d'aller éteindre une propriété dans chacune des règles d'origine.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Les deux overlays occupent toute la largeur : c'est ce qui permet un
      bord gauche ET un bord droit. Sans cela le bloc épouse son contenu. ── */
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-photo-overlay--vote {
	left: 12px;
}

/* ── Commentaires à gauche, votes à droite. ─────────────────────────────────
   ⚠️ Jamais `justify-content: space-between` : avec trois enfants, il
   écarterait aussi les deux votes l'un de l'autre, alors qu'ils forment une
   paire — c'est le groupe qu'on pousse, pas chaque bouton.

   ⚠️⚠️ ET C'EST LE GROUPE QUI PORTE `margin-left: auto`, PAS LE BOUTON
   COMMENTAIRES QUI PORTERAIT `margin-right: auto` — DÉFAUT MESURÉ, PAS DEVINÉ.
   Le bouton commentaires est MASQUÉ partout où les commentaires sont fermés
   (une zone sans case cochée, un point traité...) : caler les votes sur lui
   les faisait retomber à GAUCHE dès qu'il disparaissait. *Un calage ne doit
   pas dépendre de la présence d'un voisin facultatif.* */
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-vote .citivo-lightbox-vote-buttons {
	width: 100%;
	align-items: center;
}

.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-vote-groupe,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-dec-vote-groupe {
	margin-left: auto;
}

/* ⚠️ La fiche des découvertes autorise le retour à la ligne, et son message
   d'erreur occupe une ligne à lui : sans cela il se glisserait entre les votes
   et le bord droit, dans une rangée déjà calée. */
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-photo-overlay--vote.citivo-dec-vote {
	flex-wrap: wrap;
}

.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-dec-vote-msg {
	flex: 0 0 100%;
	text-align: right;
}

/* ⚠️ Il reste SEUL sur la gauche : il garde donc sa pastille à lui, sans quoi
   il deviendrait illisible sur une photo claire. C'est la même pastille que
   celle du groupe — un seul vocabulaire pour « posé sur une image ». */
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-photo-overlay--vote button.citivo-commentaires-voir {
	flex: 0 0 auto;
	min-height: 0;
	padding: .3rem .6rem;
	border: 0;
	border-radius: 999px;
	background: rgba( 0, 0, 0, .55 );
	box-shadow: 0 2px 8px rgba( 0, 0, 0, .3 );
	color: #fff;
}

/* ── LE GROUPE : un seul fond pour la question et les deux votes. ────────── */
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-vote-groupe,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-dec-vote-groupe {
	display: inline-flex;
	align-items: center;
	gap: .1rem;
	padding: .3rem .6rem;
	border-radius: 999px;
	background: rgba( 0, 0, 0, .55 );
	box-shadow: 0 2px 8px rgba( 0, 0, 0, .3 );
}

/* La question perd son fond — il est désormais porté par le groupe. */
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-vote-groupe .citivo-lightbox-vote-question {
	margin: 0 .3rem 0 .1rem;
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: #fff;
	font-size: var( --citivo-fs-pastille );
	font-weight: 600;
	opacity: 1;
	white-space: nowrap;
}

/* ── Les boutons : rien que l'icône et le chiffre. ──────────────────────────
   ⚠️ `flex: 0 0 auto` obligatoire : la feuille de base leur donne `flex: 1 1 0`
   (partage à parts égales, pensé pour le bloc du bandeau). Tant que la rangée
   épousait son contenu, la règle dormait ; dans un groupe elle les ferait
   s'étirer. *Une déclaration inoffensive ne l'est que dans le contexte où on
   l'a mesurée* — vingt-et-unième variante du piège de cascade de ce projet. */
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-vote-groupe .citivo-lightbox-vote-pour-btn,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-vote-groupe .citivo-lightbox-vote-contre-btn,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-dec-vote-groupe .citivo-dec-vote-pour-btn,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-dec-vote-groupe .citivo-dec-vote-contre-btn {
	flex: 0 0 auto;
	min-height: 0;
	padding: .15rem .4rem;
	gap: .3rem;
	border: 0;
	border-radius: 999px;
	background: none;
	box-shadow: none;
	color: #fff;
	font-size: var( --citivo-fs-secondaire );
}

/* ⚠️⚠️ L'ÉTAT « VOTÉ » NE PEUT PLUS ÊTRE UN FOND BLANC — il n'y a plus de fond.
   Il devient un POUCE PLEIN : le tracé est en `fill="none" stroke="currentColor"`
   (voir Citivo_Pouces), et une règle CSS bat un attribut de présentation. Le
   geste se lit donc comme sur n'importe quel réseau : le pictogramme se
   remplit.

   ⚠️⚠️ **BLANC PLEIN SUR LES DEUX FICHES — `0.99.152`, arbitrage d'Olivier après
   avoir comparé les deux à l'écran.** ~~Les deux teintes du signalement (vert
   « toujours là », ambre « résolu ») étaient conservées parce qu'elles
   « voulaient dire quelque chose ».~~ **Renversé** : la couleur prétendait
   redire ce que la QUESTION dit déjà en toutes lettres, et elle faisait
   diverger deux fiches qui doivent se ressembler. *Le remplissage dit « j'ai
   voté » ; c'est la question qui dit sur quoi.* Un seul état visuel, partout. */
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-vote-groupe .citivo-lightbox-vote-pour-btn.is-active,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-vote-groupe .citivo-lightbox-vote-contre-btn.is-active,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-dec-vote-groupe .citivo-dec-vote-btn.is-voted {
	background: none;
	border-color: transparent;
}

.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-vote-groupe .is-active .citivo-lightbox-vote-icon,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-dec-vote-groupe .is-voted .citivo-dec-vote-icon {
	fill: currentColor;
}

/* ⚠️ `color: #fff` est ÉCRIT, jamais laissé à l'héritage : la feuille de base
   pose encore un vert et un ambre sur `.is-active` (règles du bloc du bandeau,
   antérieures à l'overlay). Les supprimer là-bas toucherait un rendu de repli
   déjà recetté — on les neutralise ici, où le redesign vit. */
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-vote-groupe .citivo-lightbox-vote-pour-btn.is-active,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-vote-groupe .citivo-lightbox-vote-contre-btn.is-active,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-dec-vote-groupe .citivo-dec-vote-btn.is-voted {
	color: #fff;
}

/* ⚠️ Un bouton désactivé (👎 non connecté, votes suspendus) doit rester
   DISCERNABLE sans fond pour le porter : on baisse l'opacité du bouton seul,
   jamais du groupe, sinon la question pâlirait avec lui. */
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-vote-groupe .citivo-lightbox-vote-pour-btn:disabled,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-vote-groupe .citivo-lightbox-vote-contre-btn:disabled {
	opacity: .45;
}

/* ⚠️⚠️ `0.99.153` — « J'AI VOTÉ » N'EST PAS « JE NE PEUX PAS VOTER », et les
   deux arrivaient au même rendu. Depuis que le 👍 se verrouille pendant les
   24 h du renouvellement, un bouton DÉJÀ VOTÉ est aussi `disabled` : il
   héritait donc du grisé prévu pour l'indisponibilité (non connecté, votes
   suspendus), et un pouce blanc à demi effacé se lit comme une panne.
   ➡️ Voté = pleine opacité, curseur neutre — **exactement le rendu des
   découvertes**, dont l'argument vaut ici mot pour mot : *le bouton reste
   lisible (il porte le compteur) mais n'invite plus au clic.*
   ⚠️ Le grisé reste pour tous les autres cas : eux disent bien « pas
   maintenant, et pas par vous ». */
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-vote-groupe .citivo-lightbox-vote-pour-btn.is-active:disabled,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-vote-groupe .citivo-lightbox-vote-contre-btn.is-active:disabled {
	opacity: 1;
	cursor: default;
}

/* ⚠️ Même geste que sur les découvertes (`.is-voted { cursor: default }`) :
   une position posée n'invite plus au clic, même quand le bouton reste
   actionnable — le 👍 d'un anonyme, par exemple. */
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-vote-groupe .citivo-lightbox-vote-pour-btn.is-active,
.citivo-lightbox:is(.is-app, .has-photo-votes) .citivo-lightbox-vote-groupe .citivo-lightbox-vote-contre-btn.is-active {
	cursor: default;
}

/* ── ~~R5d-3 — LA LIGNE « LIEU - AUTEUR »~~ — 0.99.337 : déménagée dans le bloc
   commun des fiches (citivo-fiche-infos.css), qui la sert aux six fiches. ── */