/**
 * La couche « À voir » — chantier W, sous-étape W2.
 *
 * ⚠️⚠️ LE PIN DOIT SE DISTINGUER DE CEUX DES CITOYENS, et c'est une exigence de
 * sens avant d'être une question de goût : personne ne doit croire qu'un
 * habitant a photographié la collégiale, ni s'étonner de ne pas pouvoir voter
 * dessus. D'où une forme DIFFÉRENTE (pastille ronde, pas une goutte), une
 * couleur qui n'appartient à aucun statut de signalement (bleu, vert, rouge,
 * noir) ni à la catégorie des découvertes, et une étoile plutôt qu'un
 * pictogramme d'objet.
 *
 * ⚠️ Vert #489724 depuis 0.99.401 (choix d'Olivier) : ~~l'ambre #b7791f~~ se
 * confondait avec l'orange des signalements de la carte unique (#E04D00).
 *
 * ⚠️⚠️ SÉLECTEUR À DEUX CLASSES, ET PAS DE `!important` — CORRIGÉ EN RECETTE
 * DE W2. Leaflet pose `.leaflet-marker-icon { display: block }` : à égalité de
 * spécificité, sa feuille étant chargée APRÈS la nôtre, elle gagnait. Le
 * `display: flex` de ce pin n'a donc jamais centré quoi que ce soit — l'étoile
 * restait plaquée en haut à gauche, et c'est ce qu'Olivier voyait. ➡️ On
 * qualifie par `.leaflet-marker-icon.citivo-avoir-pin`, deux classes, qui passe
 * devant sans `!important` et rend inutiles les deux exceptions d'origine
 * (fond, bordure). *Face à la feuille d'une bibliothèque, la spécificité suffit
 * presque toujours : `!important` n'est que la version bruyante du même geste.*
 *
 * ⚠️ Retenir surtout la manière dont ça s'est vu : la mesure (`getBoundingClientRect`
 * de l'étoile contre celle du rond, écart de 4 px) a tranché là où l'œil disait
 * seulement « pas centré » et où la capture d'écran cadrait mal.
 *
 * @package Citivo
 */

/* ⚠️ `border-box` : sans lui les 2 px de bordure blanche S'AJOUTENT aux 26 px,
   le pin rend 30 px alors que le script annonce `iconSize: [26, 26]` et ancre au
   point (13, 13) — le rond se décalait de 2 px par rapport à sa coordonnée, et
   l'étoile d'autant dans le disque. *La taille annoncée à Leaflet doit être la
   taille rendue.* (Corrigé avec le centrage de l'étoile, recette de W2.) */
.leaflet-marker-icon.citivo-avoir-pin {
	display:         flex;
	align-items:     center;
	justify-content: center;
	box-sizing:      border-box;
	width:           26px;
	height:          26px;
	border-radius:   999px;
	background:      #489724;
	border:          2px solid #ffffff;
	box-shadow:      0 1px 3px rgba( 0, 0, 0, .35 );
	color:           #ffffff;
	cursor:          pointer;
}

/* ⚠️ Légèrement transparents : la couche est un DÉCOR, les points des citoyens
   restent le sujet de la carte. Au survol, le pin redevient net — on peut le
   viser sans hésiter. */
.citivo-avoir-pin {
	opacity: .6;	/* 0.99.414 : ~~.85~~, plus discret (Olivier). */
}

.citivo-avoir-pin:hover {
	opacity: 1;
}

/* ── La légende, dans l'emplacement libre du panneau de filtres ──────────────
   ⚠️ 0.99.266 : la case « À voir » est partie (le réglage est devenu un bouton
   sur la carte). Reste le filet qui sépare la légende des pastilles, et la
   phrase qui explique l'icône de boussole. */
.citivo-avoir-reglage {
	margin-top:  .75rem;
	padding-top: .75rem;
	border-top:  1px solid rgba( 0, 0, 0, .1 );
}

.citivo-avoir-aide {
	margin:    0;
	font-size: var( --citivo-fs-pastille );
	opacity:   .75;
	line-height: 1.4;
}

/* L'icône dans la phrase : à la taille du texte, posée sur sa ligne. */
.citivo-avoir-aide-icone svg {
	display:        inline-block;
	width:          1.15em;
	height:         1.15em;
	vertical-align: -.2em;
}

/* ── Le bouton de carte « lieux notables » (0.99.266) ────────────────────────
   ⚠️ Il porte `citivo-geoloc-btn`, donc le centrage, le noir au repos et le
   bleu au survol des deux autres boutons (citivo-carte-publique.css). Il ne
   reste ici que l'état AFFICHÉ, bleu en permanence : l'icône dit l'état
   (demande d'Olivier). ⚠️ Quatre classes, pour passer devant la règle de
   repos des boutons (trois) sans `!important`. */
.citivo-carte-publique-container .leaflet-bar .citivo-geoloc-btn.citivo-avoir-btn.is-actif {
	color: #2c7bb6;
}

/* ⚠️ 0.99.419 — ACTIF : le ROND de la boussole plein, au vert des lieux
   « À voir » (#489724), l'aiguille en blanc (demande d'Olivier) ; le carré
   du bouton ne change pas. Survol compris : l'état reste lisible. Désactivé :
   inchangé, contour et aiguille noirs (`citivo-geoloc-btn`). */
.citivo-carte-publique-container .leaflet-bar .citivo-geoloc-btn.citivo-avoir-btn.is-actif svg circle {
	fill: #489724;
	stroke: #489724;
}

.citivo-carte-publique-container .leaflet-bar .citivo-geoloc-btn.citivo-avoir-btn.is-actif svg path {
	fill: #fff;
}

/* La source, dans la bulle d'un point. */
.citivo-avoir-source {
	font-size: var( --citivo-fs-pastille );
	opacity:   .75;
}

/* ── W3 : la fiche d'un point, dans la bulle ─────────────────────────────────
   ⚠️⚠️ AUCUNE RÈGLE SUR `.leaflet-popup-*` : la bulle est partagée avec les
   cartes de signalements et de découvertes, et l'habiller ici la changerait
   partout. Tout est porté par `.citivo-avoir-fiche`, qui n'existe que dans nos
   bulles à nous. */
/* ⚠️⚠️ PAS DE LARGEUR MAXIMALE ICI — c'est LEAFLET qui borne la bulle
   (`maxWidth`, calculé à l'ouverture d'après la vignette et l'écran). Les 260 px
   posés en W3 bridaient la fiche à 221 px de large alors que la photo chargée en
   faisait 500 : *on payait 500 px pour en montrer 221.* Deux bornes concurrentes
   sur la même largeur, c'est la plus petite qui gagne, et ce n'est jamais celle
   qu'on croit. */

/* 0.99.431 — LA CROIX DE LA BULLE, AGRANDIE (demande d'Olivier, valeurs
   données par lui). ⚠️ Sur `.citivo-avoir-bulle` seulement — la classe posée
   par citivo-avoir.js sur NOS bulles —, jamais sur `.leaflet-popup-*` seul
   (voir l'avertissement ci-dessous). Hauteur, largeur et interligne suivent la
   taille du signe, sinon il sortirait de sa zone cliquable. */
.leaflet-container .citivo-avoir-bulle a.leaflet-popup-close-button {
	top:         5px;
	right:       5px;
	width:       30px;
	height:      30px;
	font:        24px Tahoma, Verdana, sans-serif;
	line-height: 30px;
}

.citivo-avoir-fiche-nom {
	/* Le titre ne passe pas sous la croix agrandie (0.99.431). */
	padding-right: 16px;
	margin:      0 0 .4rem;
	font-size:   var( --citivo-fs-texte );
	font-weight: 600;
	line-height: 1.3;
}

.citivo-avoir-figure {
	margin: 0 0 .4rem;
}

/* ⚠️⚠️ `width: auto` ET `max-width: 100%`, JAMAIS `width: 100%` : la vignette
   est demandée en 500 px, mais Wikimedia sert l'ORIGINAL quand il est plus
   petit. Avec `width: 100%`, une photo de 380 px se retrouverait étirée à 500 —
   *une image agrandie est plus visiblement dégradée qu'une image petite.* Ici
   elle garde sa taille, et la bulle se referme sur elle.
   ⚠️ `height: auto` explicite : le thème impose une hauteur aux images dans
   certains contextes, et une photo écrasée vaut moins que pas de photo. */
/* ⚠️⚠️ AUCUN `max-width: 100%` ICI, ET C'EST CONTRE-INTUITIF. Leaflet mesure la
   bulle avec une largeur encore indéfinie : le pourcentage se résolvait alors
   contre le vide, la photo se repliait sur la largeur de la ligne de texte
   (236 px mesurés pour une image de 500) et Leaflet figeait cette valeur.
   ➡️ C'est le script qui borne la photo à l'écran, en pixels, sur la balise.
   *Un pourcentage a besoin d'un parent qui connaisse déjà sa largeur ; dans une
   mise en page qui se mesure elle-même, il n'y en a pas.* */
.citivo-avoir-figure img {
	display:       block;
	/* ⚠️⚠️ `max-width: none` NEUTRALISE LA RÈGLE DU THÈME, pas la nôtre : tous
	   les thèmes WordPress posent `img { max-width: 100% }`, et retirer la règle
	   de CETTE feuille ne suffisait donc pas — la photo continuait à se replier
	   sur la largeur du texte. *Une règle qu'on n'a pas écrite s'applique quand
	   même : la supprimer chez soi ne la supprime pas ailleurs.* La photo est
	   déjà bornée à l'écran par le script, en pixels, sur la balise. */
	max-width:     none;
	border-radius: 6px;
}

/* ⚠️⚠️ `>` — ENFANT DIRECT, ET C'EST TOUT LE SUJET. Cette règle vise le lien qui
   ENVELOPPE LA PHOTO (`display: block` pour supprimer la ligne de base sous
   l'image). Écrite sans le `>`, elle attrapait aussi **le lien de licence**, qui
   vit dans le `<figcaption>` à l'intérieur de la même figure : passé en bloc, il
   partait à la ligne tout seul, et le crédit s'affichait « Photo : Chabe01 — »
   puis la licence en dessous — le défaut signalé par Olivier.
   ⚠️ Ce n'était donc PAS un retour à la ligne du texte : aucune largeur, aucune
   césure n'était en cause (le crédit mesurait 197 px dans une bulle de 501).
   *Un sélecteur trop large ne se voit pas là où on l'a écrit — il se voit sur
   l'élément auquel on ne pensait pas.* */
.citivo-avoir-figure > a {
	display:         block;
	text-decoration: none;
}

/* ⚠️⚠️ LE CRÉDIT EST COLLÉ À LA PHOTO, pas posé sous la fiche : c'est une
   obligation de licence, pas une mention de bas de page. */
.citivo-avoir-credit {
	margin:      .3rem 0 0;
	font-size:   var( --citivo-fs-pastille );
	line-height: 1.4;
	opacity:     .8;
}

/* ⚠️ Le nom de licence ne se coupe JAMAIS en deux : « CC BY-SA 4.0 » contient
   des espaces, et « CC BY-SA » suivi de « 4.0 » à la ligne ne désigne plus rien
   de lisible. Le séparateur qui le précède est insécable côté script. */
.citivo-avoir-credit a {
	white-space: nowrap;
}

.citivo-avoir-fiche a {
	color: inherit;
}

/* ⚠️ 0.99.615 — ~~l'attente sur la carte~~ : déplacée dans
   citivo-carte-publique.css (`.citivo-carte-attente`), COMMUNE aux trois calques. */