/**
 * Le fil des lieux suivis — page `/feed`.
 *
 * CHANTIER DU FIL, SOUS-ÉTAPE F3.
 *
 * ⚠️ UNE COLONNE, PAS UNE GRILLE : le fil se parcourt au pouce, une publication
 * après l'autre (référence d'Olivier : Instagram). Une grille obligerait à
 * comparer des cartes côte à côte, ce qui n'est pas le geste demandé.
 *
 * ⚠️ AUCUN `!important`, règle absolue du projet : la spécificité vient du
 * conteneur `.citivo-fil`.
 *
 * @package Citivo
 */

/* ── T1/T2 — LES TAILLES DE TEXTE VIENNENT DES JETONS COMMUNS ────────────────
 *
 * Le fil a été l'ÉCRAN TÉMOIN du chantier : les cinq jetons ont d'abord été
 * déclarés ici, le temps de juger l'échelle (`0.99.188`). Validés, ils sont
 * montés dans `citivo-typo.css`, mise en file par chaque écran — voir
 * `Citivo_Typo`, et son docblock pour le piège associé : **une variable CSS
 * absente ne lève aucune erreur**, elle rend seulement la déclaration invalide.
 *
 * ⚠️ Les valeurs et le palier (`max-width: 600px`) n'ont pas changé en montant :
 * ce fichier rend exactement ce qu'Olivier a recetté le 25/09.
 * ────────────────────────────────────────────────────────────────────────── */

.citivo-fil {
	max-width: 620px;
	margin: 0 auto;
}

/* ── 0.99.416 — Page du fil pour un VISITEUR : titre, paragraphe, boîte de
   connexion (citivo-acces.css), puis l'aperçu.
   ⚠️ 0.99.417 : le titre et le paragraphe n'ont plus de classe ni de règle ici
   (~~`.citivo-fil-intro*`~~) — le thème les met en forme (Olivier). Seul le
   titre de l'aperçu garde la colonne du fil. */
.citivo-fil-apercu-titre {
	max-width: 620px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2rem;
	margin-bottom: 1rem;
	color: #646970;
	font-size: var( --citivo-fs-secondaire );
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	text-align: center;
}

.citivo-fil-chargement,
.citivo-fil-erreur {
	text-align: center;
	opacity: .8;
}

/* ── Les trois états vides ────────────────────────────────────────────────
   ⚠️ Ils ne disent PAS la même chose : « vous ne suivez rien » appelle une
   action, « rien de neuf » rassure. Leur donner la même forme serait déjà les
   confondre à moitié — celui qui appelle une action porte donc un bouton. */
.citivo-fil-vide,
.citivo-fil-sans-abonnement {
	padding: 2rem 1rem;
	text-align: center;
	line-height: 1.6;
}

.citivo-fil-sans-abonnement .citivo-btn {
	display: inline-block;
	margin-top: .5rem;
}

/* ── La carte ─────────────────────────────────────────────────────────────
   ⚠️ Pas de bordure ni d'ombre : c'est la PHOTO qui délimite la carte, comme
   sur le modèle demandé. Un cadre de plus ferait du fil une liste de fiches. */
.citivo-fil-carte {
	margin: 0 0 2.5rem;
}

/* ⚠️ 0.99.161 — UN FILET ENTRE LES PUBLICATIONS, demandé en recette : sans
   lui, la fin d'une carte et le début de la suivante se confondaient, surtout
   depuis que les commentaires se déplient dans la carte.
   ⚠️ Le MÊME filet que celui posé au-dessus des commentaires, à dessein : une
   seule façon de séparer dans cette page.
   ⚠️ Sur `:not(:last-child)` et non sur toutes : un trait sous la dernière
   carte promettrait une suite qui n'existe pas — et il se cognerait au bouton
   « Voir plus ». */
/* ⚠️ 0.99.165 — LE FILET TOUCHAIT L'EN-TÊTE SUIVANTE. En posant la bordure
   en `0.99.161`, la marge du bas était passée à `0` — l'espace vivait alors
   ENTIÈREMENT au-dessus du trait (`padding-bottom`), et rien ne le séparait de
   la carte d'après. Le défaut ne s'est vu qu'une fois l'en-tête arrivée en
   `0.99.164` : *un trait sans air après lui appartient visuellement à ce qui
   le suit.* ➡️ 30 px sous le trait, valeur demandée par Olivier. */
.citivo-fil-carte:not( :last-child ) {
	padding-bottom: 2.5rem;
	margin-bottom: 30px;
	border-bottom: 1px solid rgba( 0, 0, 0, .12 );
}

/* ⚠️ `position: relative` posé en 0.99.158 pour ancrer la pastille d'état :
   c'est le PARENT qui décide de l'ancrage, même règle que les surcouches de
   la lightbox. */
/* ── 0.99.164 : l'en-tête, AVANT la photo ────────────────────────────────
   Demande d'Olivier, référence Instagram : d'où vient ce point, et combien de
   temps il reste. *Ce qui situe se lit avant ce qu'on regarde.*
   ⚠️ Le lieu à gauche, la durée poussée à droite : même partage que la rangée
   du bas, où la bulle et les votes s'opposent. */
.citivo-fil-entete {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: .5rem;
	font-size: var( --citivo-fs-texte );
}

/* ⚠️ Le lieu est un VRAI lien (il navigue vers la fiche sur la carte), et il
   remplace « Voir sur la carte » : il dit en plus OÙ il mène. */
.citivo-fil-lieu {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: inherit;
	text-decoration: none;
	font-weight: 600;
}

.citivo-fil-lieu:hover .citivo-fil-lieu-nom {
	text-decoration: underline;
}

/* ⚠️ Le pin dans son rond : `flex-shrink: 0` pour qu'un nom long ne l'écrase
   pas, et des dimensions fixes — un rond qui s'ovalise se remarque. */
.citivo-fil-pin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: rgba( 49, 91, 163, .12 );
	color: #315ba3;

	/* ⚠️ R5c — PRÉPARE LA PHOTO DE ZONE (R5d) : une image posée dedans sera
	   découpée en rond sans que cet en-tête ait à changer. */
	overflow: hidden;
}

/* ⚠️ GARDE OBLIGATOIRE : un `display` explicite bat l'attribut `hidden`, et ce
   fichier l'a déjà payé TROIS fois (la bulle des commentaires, le bouton
   « Commenter », le formulaire d'abus en 0.99.169). Posée ici alors que rien ne
   masque ce rond aujourd'hui : c'est le jour où quelqu'un le masquera que la
   garde manquera. */
.citivo-fil-pin[hidden] {
	display: none;
}

/* ⚠️⚠️ R5c — LE ROND D'UNE ZONE SE DISTINGUE, ET C'EST TOUT CE QUI LE
   DISTINGUE AUJOURD'HUI. Olivier a demandé « une icône à gauche du nom de la
   zone » : elle existait depuis 0.99.164 (le pin), l'apport de R5c est de la
   rendre PRÊTE à devenir un avatar. Une commune n'aura jamais de photo — elle
   garde le pin tel quel. */
.citivo-fil-pin[data-lieu-type="zone"] {
	background: rgba( 49, 91, 163, .2 );
}

/* ⚠️⚠️ R5d-2 — LA PHOTO DE ZONE REMPLIT LE ROND. Dimensions explicites ET
   `object-fit: cover` : les thèmes posent `img { height: auto; max-width:
   100% }`, qui laisserait l'image à sa hauteur naturelle — un carré de 128 px
   dans un rond de 26 px. Qualifiée par le rond (0,1,1), elle bat la règle
   nue du thème par spécificité, pas par ordre de chargement.
   ⚠️ `max-width: none` : sans lui, le `max-width: 100%` du thème reste
   inoffensif ici, mais c'est lui qui écrase les images dès qu'un conteneur
   rétrécit — autant ne pas en dépendre. */
.citivo-fil-pin img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* ⚠️ Avec une photo, le fond teinté ne sert plus : il ne se verrait qu'en
   liseré pendant le chargement de l'image. */
.citivo-fil-pin.citivo-fil-pin--photo {
	background: transparent;
}

/* ⚠️⚠️ 0.99.168 — LE CALAGE À DROITE EST PASSÉ AU GROUPE, ET C'EST UNE
   CORRECTION : ~~porté par la durée elle-même~~, il tombait dès qu'il n'y avait
   pas de durée — sur un point « pris en charge », le menu remontait se coller
   au nom du lieu (retour d'Olivier). *Un calage ne dépend pas d'un voisin
   facultatif* : je l'avais écrit en `0.99.151`, et refait ici. Le groupe, lui,
   contient le menu — qui ne manque jamais. */
.citivo-fil-entete-fin {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-left: auto;
}

.citivo-fil-reste {
	font-size: var( --citivo-fs-secondaire );
	opacity: .7;
	white-space: nowrap;
}

/* ── 0.99.166 : le menu à trois points ────────────────────────────────────
   ⚠️ `position: relative` sur l'enveloppe : la liste se place par rapport au
   bouton, pas par rapport à la carte. ⚠️ Pas de `margin-left: auto` ici — la
   durée qui précède le porte déjà, et deux calages automatiques dans la même
   rangée se partageraient l'espace (défaut mesuré en 0.99.164). */
.citivo-fil-menu {
	position: relative;
	flex-shrink: 0;
}

/* ⚠️ Un bouton, donc tout le style du thème à neutraliser — troisième fois
   dans ce fichier (0.99.158, 0.99.160, ici). */
.citivo-fil-menu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: inherit;
	font: inherit;
	opacity: .65;
	cursor: pointer;
}

/* ⚠️⚠️ 0.99.168 — LE SURVOL EST ÉCRIT ICI, FOND ET TEXTE ENSEMBLE. Sans lui, le
   thème posait SON survol — fond gris, texte blanc —, et un pictogramme blanc
   sur gris se lisait comme un bouton désactivé (retour d'Olivier : bleu et
   blanc). ⚠️ `:focus-visible` suit le même traitement : un geste au clavier doit
   se voir autant qu'un geste à la souris.
   ⚠️ Le bleu est celui du fil (`#315ba3`, déjà porté par le pin et les badges),
   jamais celui du thème — *une couleur d'accent ne se choisit pas deux fois.* */
.citivo-fil-menu-btn:hover,
.citivo-fil-menu-btn:focus-visible {
	background: #315ba3;
	color: #fff;
	opacity: 1;
}

/* ⚠️ `z-index` modeste et assumé : la liste doit passer au-dessus de la photo
   qui la suit, rien de plus. ⚠️ Calée à DROITE (`right: 0`) : le bouton est au
   bord de la carte, une liste alignée à gauche déborderait de l'écran sur
   téléphone. */
.citivo-fil-menu-liste {
	position: absolute;
	top: calc( 100% + 4px );
	right: 0;
	z-index: 3;
	min-width: 160px;
	padding: .25rem;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 4px 16px rgba( 0, 0, 0, .18 );
}

.citivo-fil-menu-liste[hidden] {
	display: none;
}

.citivo-fil-menu-item {
	display: block;
	width: 100%;
	padding: .45rem .6rem;
	border: 0;
	border-radius: 6px;
	background: none;
	color: inherit;
	font: inherit;
	font-size: var( --citivo-fs-action );
	text-align: left;
	cursor: pointer;
}

/* ⚠️ Même correction que pour le bouton : le thème s'emparait du survol des
   entrées (gris + blanc). Fond bleu plein, texte blanc, et la spécificité
   `.citivo-fil-menu-liste button.<classe>` pour l'emporter sans `!important`. */
.citivo-fil-menu-liste button.citivo-fil-menu-item:hover,
.citivo-fil-menu-liste button.citivo-fil-menu-item:focus-visible {
	background: #315ba3;
	color: #fff;
}

/* ⚠️ 0.99.168 — le bloc s'ouvre SOUS L'EN-TÊTE, au-dessus de la photo : en bas
   de carte il passait inaperçu. Un fond léger et un filet le détachent de la
   publication — *ce qui vient de s'ouvrir doit se distinguer de ce qui était
   déjà là.* */
.citivo-fil-abus {
	margin-bottom: .6rem;
	padding: .6rem;
	border-radius: 10px;
	background: rgba( 49, 91, 163, .07 );
}

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

.citivo-fil-abus-form {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	align-items: center;
}

/* ⚠️⚠️ 0.99.169 — LA GARDE QUI MANQUAIT, ET ELLE EXPLIQUE LES DEUX DÉFAUTS
   SIGNALÉS D'UN COUP : `CitivoAbus` masque ce formulaire avec `hidden` — sur
   « Annuler », et sur un envoi réussi avant d'écrire son message. Mais un
   `display` explicite BAT l'attribut : le module faisait son travail, ma
   feuille le défaisait. « Il ne se passe rien » au clic sur Annuler, et le
   formulaire qui reste sous le message après envoi, c'était la même ligne.
   ⚠️ Troisième fois dans ce seul fichier (`.citivo-fil-commentaires`,
   `.citivo-fil-commenter`, ici) : **tout `display` posé sur un élément que
   quelqu'un masque par `hidden` doit être accompagné de sa garde.** */
.citivo-fil-abus-form[hidden] {
	display: none;
}

/* ⚠️ 0.99.169 — APRÈS ENVOI, LE CADRE S'EFFACE ET LAISSE LE MESSAGE SEUL
   (demande d'Olivier : « enlever le conteneur et écrire le message à la
   place »). Le message vit DANS le bloc ; plutôt que de le déplacer, c'est le
   bloc qui cesse de se voir — *un déplacement d'élément casserait la référence
   que le module garde sur sa zone de message.* */
.citivo-fil-abus.is-message {
	padding: 0;
	background: none;
}

.citivo-fil-abus-motif,
.citivo-fil-abus-detail {
	flex: 1 1 12rem;
	min-width: 0;
	font-size: var( --citivo-fs-champ );
}

.citivo-fil-abus-actions {
	display: flex;
	gap: .4rem;
}

/* ⚠️ Même partage qu'en 0.99.158-159 : « Envoyer » garde son fond plein (c'est
   l'action), « Annuler » s'efface. */
.citivo-fil-abus-submit {
	padding: .35rem .9rem;
	border-radius: 8px;
	font-size: var( --citivo-fs-action );
	text-transform: none;
}

.citivo-fil-abus-cancel {
	padding: .35rem .6rem;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: var( --citivo-fs-texte );
	opacity: .75;
	cursor: pointer;
	text-transform: none;
}

.citivo-fil-abus-cancel:hover {
	opacity: 1;
	text-decoration: underline;
}

.citivo-fil-abus-msg {
	margin: .3rem 0 0;
	font-size: var( --citivo-fs-texte );
	opacity: .85;
}

/* ⚠️⚠️ 0.99.160 — C'EST UN `<button>` DEPUIS QUE LA PHOTO S'OUVRE EN GRAND
   (avant : un lien vers la carte). Il faut donc lui retirer TOUT ce que le
   thème met sur un bouton — fond, contour, padding, police — sans quoi la
   photo se retrouverait dans un gros cadre bleu. Même exception que pour les
   boutons du module de commentaires, et pour la même raison.
   ⚠️ `width: 100%` : un bouton épouse son contenu, un lien de bloc non — sans
   lui la photo cesserait d'occuper la largeur de la carte.
   ⚠️ Écrit pour les DEUX éléments (`div` sur une image générique, `button`
   sinon) : la mise en page ne doit pas dépendre de la balise choisie. */
.citivo-fil-photo {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: none;
	color: inherit;
	font: inherit;
	line-height: 0;
	text-align: left;
	overflow: hidden;
}

/* ⚠️ Le curseur ne promet un geste que là où il y en a un : sur une image
   générique, le cadre est un `div` et rien ne se passe au clic. */
button.citivo-fil-photo {
	cursor: pointer;
}

/* ── 0.99.158 : la pastille d'état, sur la photo ──────────────────────────
   ⚠️ MÊME TRAITEMENT QUE SUR LA FICHE DE LA CARTE, volontairement recopié à
   l'identique (bleu opaque à 85 %, ombre portée, 12 px du coin haut-gauche) :
   ce fond avait été choisi là-bas précisément parce qu'il tient SUR UNE PHOTO,
   et l'ombre fait le reste sur les images très claires. Le support est le
   même ici, le traitement n'a aucune raison d'être différent.
   ⚠️ 0.99.415 — « Traité » en VERT (~~même pastille que « Pris en charge »~~),
   comme dans les fiches. Et la pastille n'est plus positionnée seule : elle
   vit dans la rangée `.citivo-fil-pastilles`, à droite de celle de l'objet. */
.citivo-fil-pastilles {
	position: absolute;
	top: 12px;
	left: 12px;
	/* ⚠️ Laisse la place du badge de TYPE, en haut à droite. */
	max-width: calc( 100% - 140px );
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

/* ── 0.99.415 — Pastille de l'OBJET / de la CATÉGORIE : icône + nom, fond =
   couleur réglée dans l'administration, posé en ligne par
   `CitivoPastille.remplir()`. Même forme que dans les fiches. */
.citivo-fil-pastilles .citivo-pastille-classe {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: 100%;
	padding: 4px 10px;
	border-radius: 10px;
	background: rgba( 41, 128, 185, .85 );
	color: #fff;
	font-size: var( --citivo-fs-pastille );
	font-weight: 700;
	line-height: 1.4;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, .35 );
}

.citivo-fil-pastilles .citivo-pastille-classe[hidden] {
	display: none;
}

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

.citivo-fil-pastilles .citivo-pastille-classe span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.citivo-fil-statut.citivo-fil-statut--traite {
	background: rgba( 39, 174, 96, .9 );
}

.citivo-fil-statut {
	padding: 4px 10px;
	border-radius: 10px;
	background: rgba( 41, 128, 185, .85 );
	color: #fff;
	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.395 : le TYPE, sur la photo, coin haut-droit ─────────────────────
   Demande d'Olivier du 12/10/2026 : signalements et découvertes se
   confondaient dans le fil. Même gabarit que la pastille d'état (coin
   opposé), mais ICI la couleur porte l'information, doublée du texte :
   orange #E04D00 = signalement, bleu #315BA3 = découverte (teintes
   d'Olivier, 0.99.400 — ~~#C64B18 / vert #007F6E~~ —, reprises par la carte). Chacune garde la moitié
   de la largeur pour ne jamais chevaucher la pastille d'état. */
.citivo-fil-type {
	position: absolute;
	top: 12px;
	right: 12px;
	max-width: calc( 50% - 18px );
	padding: 4px 10px;
	border-radius: 10px;
	color: #fff;
	font-size: var( --citivo-fs-pastille );
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, .35 );
}

.citivo-fil-type--signalement {
	background: #e04d00;
}

.citivo-fil-type--decouverte {
	background: #315ba3;
}

/* ⚠️ `contain` et non `cover` — MÊME ARBITRAGE QUE LA LIGHTBOX (retour
   d'Olivier en 7b) : une photo de signalement se regarde en ENTIER, recadrer
   peut couper précisément ce qui est signalé. Le fond sombre remplit les
   bandes, comme là-bas. */
.citivo-fil-photo img {
	display: block;
	width: 100%;
	max-height: 70vh;
	object-fit: contain;
	background: #1a1a1a;	/* 0.99.414 : gris neutre, comme les fiches. */
}

.citivo-fil-corps {
	padding: .75rem .25rem 0;
}

/* 0.99.415 : ~~`.citivo-fil-badge`~~ (dégradation / catégorie en pastille
   au-dessus du titre) retirée — la classe est sur la photo, la dégradation en
   ligne secondaire (`.citivo-fil-sous-titre`). */

.citivo-fil-titre {
	margin: .4rem 0 .15rem;
	font-size: var( --citivo-fs-titre );
	line-height: 1.3;
}

/* ── 0.99.415 — Signalement : la dégradation en ligne SECONDAIRE, au-dessus
   de la phrase de l'auteur, qui passe en avant (demande d'Olivier). */
.citivo-fil-sous-titre {
	margin: .4rem 0 0;
	color: #646970;
	font-size: var( --citivo-fs-secondaire );
	font-weight: 600;
	line-height: 1.3;
}

.citivo-fil-description.citivo-fil-description--principale {
	margin: .15rem 0 .2rem;
	color: #1d2327;
	font-size: var( --citivo-fs-titre );
	font-weight: 600;
	line-height: 1.35;
}

.citivo-fil-auteur {
	margin: 0;
	font-size: var( --citivo-fs-texte );
	opacity: .75;
}

/* 0.99.357 — liens d'un auteur non modéré : le bleu du site, soulignés. */
.citivo-fil-description a.citivo-lien,
.citivo-fil-description a.citivo-lien:hover,
.citivo-fil-description a.citivo-lien:focus {
	color: #315ba3;
	text-decoration: underline;
}

.citivo-fil-description {
	margin: .5rem 0 0;
	line-height: 1.5;
	/* ⚠️ 0.99.358 — les retours à la ligne saisis sont gardés, comme dans les
	   fiches (relevé par Olivier : tout s'affichait sur une seule ligne). */
	white-space: pre-line;
	overflow-wrap: anywhere;
	/* ⚠️ La description est TRONQUÉE à trois lignes : dans un fil, une
	   description longue repousse la publication suivante hors de l'écran et
	   casse le parcours. La fiche complète reste à un clic. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ⚠️ 0.99.359 — dépliée par « … Voir plus » : tout le texte. */
.citivo-fil-description.is-deplie {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
}

/* Le lien « … Voir plus » : discret, sous le texte, couleur redite sur tous
   les états (le thème pose fond et couleur sur les boutons). */
.citivo-fil .citivo-fil-description-suite,
.citivo-fil .citivo-fil-description-suite:hover,
.citivo-fil .citivo-fil-description-suite:focus {
	display: inline-block;
	margin: .15rem 0 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: #315ba3;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.citivo-fil .citivo-fil-description-suite:hover {
	text-decoration: underline;
}

.citivo-fil .citivo-fil-description-suite[hidden] {
	display: none;
}

/* ── La rangée d'actions ──────────────────────────────────────────────────
   ⚠️⚠️ F4 — LA RANGÉE PREND LA FORME ARRÊTÉE EN R4 SUR LES DEUX FICHES : la
   bulle des commentaires à GAUCHE, les deux pouces groupés à DROITE, le lien
   vers la carte à leur suite. ~~Les deux votes à gauche, le reste à droite.~~
   *Ce qui se lit ensemble se pose ensemble, et deux gestes de nature
   différente se séparent.* */
.citivo-fil-actions {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-top: .6rem;
	font-size: var( --citivo-fs-action );
}

/* ⚠️ Le calage à droite est porté par le GROUPE, pas par un de ses voisins :
   la bulle qui le précède est facultative (commentaires fermés). Défaut
   trouvé par la mesure en 0.99.151, évité ici d'emblée. */
.citivo-fil-votes {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-left: auto;
}

/* ⚠️⚠️ 0.99.161 — LA QUESTION, À GAUCHE DES POUCES, DANS LEUR GROUPE. Demandée
   en recette, et c'est l'acquis de R4 : sur un signalement les deux boutons
   changent de sens selon le statut, *c'est la question qui porte le sens*.
   ⚠️ SANS FOND, contrairement à la lightbox : la pastille sombre y existe
   parce que le bloc est posé SUR UNE PHOTO. Ici tout est sur fond blanc —
   reprendre la pastille aurait recopié une solution sans son problème. */
.citivo-fil-question {
	font-size: var( --citivo-fs-texte );
	opacity: .8;
	white-space: nowrap;
}

/* ⚠️ Ni fond ni bordure — l'idiome retenu en 0.99.151 pour les deux fiches :
   « uniquement l'icône avec le chiffre ». Le fil s'y aligne d'emblée plutôt
   que d'inventer un troisième rendu du même geste. */
.citivo-fil-vote-btn {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .2rem .3rem;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.citivo-fil-vote-btn:disabled {
	opacity: .45;
	cursor: default;
}

/* ⚠️ Voté = pouce PLEIN, et pleine opacité même désactivé : « j'ai voté »
   n'est pas « je ne peux pas voter » (leçon de 0.99.153). Le tracé est en
   `fill="none" stroke="currentColor"`, une règle CSS bat l'attribut. */
.citivo-fil-vote-btn.is-voted {
	cursor: default;
	opacity: 1;
}

.citivo-fil-vote-btn.is-voted .citivo-fil-vote-icon {
	fill: currentColor;
}

/* ⚠️ F4 — le bouton bulle + nombre, même idiome que les pouces : ni fond ni
   bordure, l'icône et le chiffre. ⚠️ `display` EST ÉCRIT ICI et pas laissé au
   gabarit : le module rend ce bouton `hidden`, et un `display: inline-flex`
   posé sans garde rouvrirait un bouton qu'il vient de masquer — d'où le
   `[hidden]` juste en dessous, qui reprend la main sur la règle de mise en
   page (un `hidden` natif ne pèse rien face à un `display` explicite). */
.citivo-fil-commentaires {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .2rem .3rem;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

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

/* ⚠️ La conversation dépliée : elle appartient au module, qui porte déjà tout
   son style (citivo-commentaires.css est autonome, aucun sélecteur d'hôte).
   Le fil ne fait que lui donner sa place dans la carte — un filet au-dessus
   pour la détacher de la publication, et rien d'autre. */
.citivo-fil-carte .citivo-commentaires {
	margin-top: .9rem;
	padding-top: .9rem;
	border-top: 1px solid rgba( 0, 0, 0, .12 );
}

/* ═══ 0.99.158 — LES BOUTONS DU MODULE PRENNENT LA FORME DU FIL ═══════════
   Retour d'Olivier : dans le fil, les votes des commentaires et « Signaler » /
   « Supprimer » sortaient en GROS BOUTONS BLEUS.

   ⚠️⚠️ CE N'EST PAS UN DÉFAUT DU MODULE, C'EST SA CONCEPTION : sa feuille est
   NEUTRE (`currentColor`, opacités) et laisse à l'HÔTE le soin d'habiller ses
   boutons — c'est écrit noir sur blanc dans citivo-commentaires.css, et la
   lightbox pose son propre jeu de règles pour la même raison. Le fil est le
   deuxième hôte : sans exception de sa part, le thème reprend la main et
   applique son bouton d'action à des gestes qui sont tous SECONDAIRES.
   ⚠️ Forme `.citivo-fil .citivo-commentaires button.<classe>` : l'emporte PAR
   SPÉCIFICITÉ, jamais par l'ordre d'un fichier ni par un `!important` — règle
   absolue du projet. Mesuré à l'écran avant d'être fixé.
   ⚠️ « Publier » et « Envoyer » (signalement d'abus) NE SONT PAS dans la
   liste : ce sont les ACTIONS, elles gardent leur bouton plein. Même partage
   qu'en lightbox — *ce qui agit se voit, ce qui accompagne s'efface.* */

.citivo-fil .citivo-commentaires button.citivo-commentaire-repondre,
.citivo-fil .citivo-commentaires button.citivo-commentaire-afficher,
.citivo-fil .citivo-commentaires button.citivo-commentaire-signaler,
.citivo-fil .citivo-commentaires button.citivo-commentaire-supprimer,
.citivo-fil .citivo-commentaires button.citivo-commentaires-abus-cancel,
.citivo-fil .citivo-commentaires button.citivo-commentaires-annuler,
.citivo-fil .citivo-commentaires button.citivo-commentaires-cible-annuler {
	padding: 4px 2px;
	border: none;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-size: var( --citivo-fs-texte );
	font-weight: 400;
	line-height: 1.4;
	opacity: .75;
	text-transform: none;
}

.citivo-fil .citivo-commentaires button.citivo-commentaire-repondre:hover:not( :disabled ),
.citivo-fil .citivo-commentaires button.citivo-commentaire-afficher:hover:not( :disabled ),
.citivo-fil .citivo-commentaires button.citivo-commentaire-signaler:hover:not( :disabled ),
.citivo-fil .citivo-commentaires button.citivo-commentaire-supprimer:hover:not( :disabled ),
.citivo-fil .citivo-commentaires button.citivo-commentaires-abus-cancel:hover:not( :disabled ),
.citivo-fil .citivo-commentaires button.citivo-commentaires-annuler:hover:not( :disabled ),
.citivo-fil .citivo-commentaires button.citivo-commentaires-cible-annuler:hover:not( :disabled ) {
	background: transparent;
	color: inherit;
	opacity: 1;
	text-decoration: underline;
}

/* ⚠️ Les VOTES d'un commentaire : pouce et nombre, sans contour — chaque
   commentaire en porte deux, en bouton plein le fil deviendrait une grille.
   ⚠️⚠️ VOTÉ = POUCE PLEIN, et non le fond blanc de la lightbox : ici le fond
   est clair, un aplat blanc ne se verrait pas. C'est surtout le signal que le
   fil emploie DÉJÀ deux lignes plus haut pour les votes de la publication
   (0.99.152) — *un seul signal pour « j'ai voté », sur toute la page.* */
.citivo-fil .citivo-commentaires button.citivo-commentaire-vote {
	padding: 3px 8px;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-size: var( --citivo-fs-texte );
	font-weight: 400;
	line-height: 1.4;
	opacity: .75;
	text-transform: none;
}

.citivo-fil .citivo-commentaires button.citivo-commentaire-vote:hover:not( :disabled ) {
	background: rgba( 49, 91, 163, .1 );
	color: inherit;
	opacity: 1;
}

.citivo-fil .citivo-commentaires button.citivo-commentaire-vote.is-active {
	background: transparent;
	opacity: 1;
}

.citivo-fil .citivo-commentaires button.citivo-commentaire-vote.is-active .citivo-commentaire-vote-icone {
	fill: currentColor;
}

/* ⚠️ « J'ai voté » n'est pas « je ne peux pas voter » : l'atténuation du
   désactivé ne doit jamais s'appliquer à un vote posé (leçon de 0.99.153). */
.citivo-fil .citivo-commentaires button.citivo-commentaire-vote:disabled {
	cursor: default;
	opacity: .5;
}

.citivo-fil .citivo-commentaires button.citivo-commentaire-vote.is-active:disabled {
	opacity: 1;
}

/* ⚠️⚠️ 0.99.159 — « PUBLIER » ET « ENVOYER » GARDENT LEUR FOND, PAS LEUR TAILLE.
   Mesuré à l'écran après le premier correctif : 46 px de haut et 16 px de
   police, à côté d'un « Annuler » à 27 px — le gros bouton du thème, posé dans
   une carte de fil. ⚠️ Le FOND reste plein (ce sont les actions, et les
   effacer les perdrait) ; seule l'ÉCHELLE est ramenée à celle de la carte,
   alignée sur « Commenter ». *Homogénéiser, ce n'est pas tout aplatir : c'est
   donner à chaque geste le poids qui lui revient.* */
.citivo-fil .citivo-commentaires button.citivo-commentaires-publier,
.citivo-fil .citivo-commentaires button.citivo-commentaires-abus-submit {
	padding: .35rem .9rem;
	border-radius: 8px;
	font-size: var( --citivo-fs-action );
	line-height: 1.5;
	text-transform: none;
}

/* ⚠️ « Commenter » dans la section, au-dessus du formulaire (voir le gabarit) :
   il ouvre une conversation, il ne répond à aucune question — il ne se range
   donc pas avec les votes. Leçon de 0.99.150, appliquée d'emblée. */
.citivo-fil-commenter {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-bottom: .6rem;
	padding: .35rem .8rem;
	border: 1px solid currentColor;
	border-radius: 8px;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

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

/* ⚠️ 0.99.164 — `.citivo-fil-voir` EST PARTIE AVEC SON LIEN : « Voir sur la
   carte » a quitté la rangée, le lieu de l'en-tête y mène désormais. *On ne
   garde pas une règle sans élément* — même geste que pour les libellés sans
   consommateur. */

.citivo-fil-vote-msg {
	margin: .3rem 0 0;
	font-size: var( --citivo-fs-texte );
	opacity: .8;
}

/* ⚠️ 0.99.162 — « Pris en charge par le gestionnaire — votes suspendus. »
   Discrète : elle explique deux pouces grisés, elle n'annonce rien de neuf.
   ⚠️ Son propre élément, jamais la zone de message ci-dessus : celle-là
   appartient à `CitivoVote`, qui l'efface quand il veut. */
.citivo-fil-vote-suspendu {
	margin: .3rem 0 0;
	font-size: var( --citivo-fs-secondaire );
	opacity: .7;
}

/* ── Bas du fil : CHARGEMENT INFINI (0.99.320) ────────────────────────────
   ⚠️ ~~Un bouton, jamais un défilement infini (décision du cadrage)~~ —
   renversé par Olivier le 05/10 : la zone est observée par le script, un
   loader tourne le temps que les 20 suivantes arrivent. Le bouton ne reste
   qu'en SECOURS (« Réessayer », après un échec).
   ⚠️ `min-height` : une zone de hauteur nulle reste observable, mais la
   hauteur réservée évite que la page saute quand le loader apparaît. */
.citivo-fil-plus-zone {
	text-align: center;
	margin: 1rem 0 2rem;
	min-height: 40px;
}

.citivo-fil-loader {
	display: inline-block;
	width: 32px;
	height: 32px;
	border: 3px solid rgba( 49, 91, 163, .2 );
	border-top-color: #315ba3;
	border-radius: 50%;
	animation: citivo-fil-tourne .8s linear infinite;
}

.citivo-fil-loader[hidden],
.citivo-fil-plus[hidden] {
	display: none;
}

@keyframes citivo-fil-tourne {
	to { transform: rotate( 360deg ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.citivo-fil-loader {
		animation-duration: 2.4s;
	}
}

.citivo-fil-plus {
	padding: .6rem 1.4rem;
	border: 1px solid currentColor;
	border-radius: 8px;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.citivo-fil-plus[disabled] {
	opacity: .5;
	cursor: default;
}