/* citivo-commentaires.css
 *
 * CHANTIER COMMENTAIRES, SOUS-ÉTAPE C2 : la feuille du module partagé des
 * commentaires (Citivo_Commentaires / citivo-commentaires.js).
 *
 * ⚠️⚠️ FEUILLE NEUTRE : elle ne connaît AUCUN contenant. Les couleurs dérivent
 * de `currentColor` (texte, séparateurs, bordures) : sur l'aplat bleu de la
 * lightbox « app » le module est blanc, dans une carte de fil claire il sera
 * sombre, sans une ligne de plus ici.
 * ⚠️ Ce que la lightbox impose à SES boutons (« outline » blancs) se règle
 * dans citivo-lightbox-app.css, à côté de la règle qui l'impose — jamais ici :
 * c'est l'hôte qui connaît sa cascade, pas le module.
 * ⚠️ Seule exception à la neutralité : le CHAMP DE SAISIE, fond blanc et texte
 * sombre partout. Un champ qui prend la couleur de son contenant devient
 * illisible sur un aplat (texte blanc sur blanc au focus des thèmes).
 */

.citivo-commentaires {
	margin-top: 1.25rem;
	padding-top: 1rem;
	/* Repli pour les navigateurs sans color-mix(), puis la teinte dérivée du texte. */
	border-top: 1px solid rgba( 127, 127, 127, .35 );
	border-top: 1px solid color-mix( in srgb, currentColor 30%, transparent );
}

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

.citivo-commentaires-titre {
	margin: 0 0 .6rem;
	font-size: var( --citivo-fs-titre );
	font-weight: 600;
	line-height: 1.3;
	color: inherit;
}

.citivo-commentaires-total {
	font-weight: 400;
	opacity: .75;
}

.citivo-commentaires-etat,
.citivo-commentaires-info {
	margin: .4rem 0;
	font-size: var( --citivo-fs-action );
	opacity: .85;
}

.citivo-commentaires-info a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}

.citivo-commentaires-liste,
.citivo-commentaires-reponses {
	list-style: none;
	margin: 0;
	padding: 0;
}

.citivo-commentaire {
	margin: 0 0 .85rem;
}

.citivo-commentaires-reponses {
	margin-top: .6rem;
	padding-left: .9rem;
	border-left: 2px solid rgba( 127, 127, 127, .35 );
	border-left: 2px solid color-mix( in srgb, currentColor 30%, transparent );
}

.citivo-commentaire.is-reponse {
	margin-bottom: .6rem;
}

.citivo-commentaire-entete {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .15rem .5rem;
	margin: 0 0 .15rem;
	font-size: var( --citivo-fs-texte );
}

.citivo-commentaire-auteur {
	font-weight: 600;
}

/* ⚠️ Un commentaire signé AU NOM D'UNE ZONE se distingue d'un pseudo : c'est
   une institution qui répond, le lecteur doit le voir d'un coup d'œil. */
.citivo-commentaire.is-zone > .citivo-commentaire-entete .citivo-commentaire-auteur::before {
	content: "🏛 ";
}

.citivo-commentaire-date {
	opacity: .7;
}

/* C3 — un commentaire en attente, vu par son seul auteur. ⚠️ Neutre comme le
   reste du module : pointillé et opacité en `currentColor`, aucune couleur
   imposée au contenant. */
/* ⚠️ C4 : le contenu vit désormais dans .citivo-commentaire-corps. */
.citivo-commentaire.is-attente > .citivo-commentaire-corps > .citivo-commentaire-contenu {
	opacity: .65;
}

.citivo-commentaire-attente {
	padding: 0 .4rem;
	border: 1px dashed currentColor;
	border-radius: 999px;
	font-size: var( --citivo-fs-pastille );
	font-style: italic;
	opacity: .8;
}

/* ⚠️ `pre-line` : les retours à la ligne saisis s'affichent, alors que le texte
   est posé en `textContent` — aucune balise ne s'interprète jamais. */
.citivo-commentaire-contenu {
	margin: 0;
	white-space: pre-line;
	overflow-wrap: anywhere;
	/* 0.99.343 — ~~--citivo-fs-action~~ : le texte d'un commentaire se lit à la
	   taille d'un champ, comme la description d'une fiche (demande d'Olivier). */
	font-size: var( --citivo-fs-champ );
	line-height: 1.45;
}

/* 0.99.342 — le TEXTE d'un commentaire de premier niveau porte la même barre
   que la liste des réponses, pour le repérer d'un coup d'œil. ⚠️ Sur le texte
   seul : ni l'en-tête (qui, quand) ni la rangée de boutons. ⚠️ Jamais sur une
   réponse — sa barre est déjà celle de la liste qui la contient. */
.citivo-commentaire:not( .is-reponse ) > .citivo-commentaire-corps > .citivo-commentaire-contenu {
	padding-left: .6rem;
	border-left: 2px solid rgba( 127, 127, 127, .35 );
	border-left: 2px solid color-mix( in srgb, currentColor 30%, transparent );
}

.citivo-commentaires-form {
	margin-top: .6rem;
}

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

.citivo-commentaires-cible,
.citivo-commentaires-signature {
	margin: 0 0 .4rem;
	font-size: var( --citivo-fs-texte );
	opacity: .9;
}

.citivo-commentaires .citivo-commentaires-texte {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 4.5rem;
	margin: 0;
	padding: .55rem .65rem;
	border: 1px solid rgba( 0, 0, 0, .2 );
	border-radius: 8px;
	background: #fff;
	color: #1d2327;
	font: inherit;
	font-size: var( --citivo-fs-champ ); /* ⚠️ 16 px minimum : en dessous, iOS zoome la page au focus. */
	line-height: 1.4;
	resize: vertical;
}

.citivo-commentaires-form-bas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: .5rem;
	margin-top: .5rem;
}

.citivo-commentaires-compteur {
	margin-right: auto;
	font-size: var( --citivo-fs-secondaire );
	opacity: .75;
}

.citivo-commentaires-msg {
	margin: .4rem 0 0;
	font-size: var( --citivo-fs-action );
}

/* ── 0.99.125 : l'en-tête — titre et icône « Commenter » sur la même ligne ──
   ⚠️ Retour de recette d'Olivier : le bouton était sous la liste, donc hors de
   vue dès qu'un fil s'allonge. Il passe en tête, en icône (référence :
   Instagram). */

.citivo-commentaires-entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin: 0 0 .6rem;
}

.citivo-commentaires-entete .citivo-commentaires-titre {
	margin: 0;
}

/* ⚠️ 0.99.129 — le bouton « Commenter » a quitté cet en-tête pour la rangée
   d'actions de l'hôte (icône + libellé) : c'est l'HÔTE qui dimensionne l'icône,
   comme celles de ses boutons voisins. L'ancienne taille forcée à 26 px est
   retirée — elle aurait grossi l'icône dans la rangée. */
.citivo-commentaires-icone {
	flex-shrink: 0;
}

/* ── C4 : votes, rangs, replis ───────────────────────────────────────────
   ⚠️ NEUTRE comme le reste du module (`currentColor`, opacités) : c'est l'hôte
   qui décide des couleurs de ses boutons (voir citivo-lightbox-app.css pour la
   fiche de la carte). */

.citivo-commentaire-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .15rem .6rem;
	margin-top: .25rem;
}

.citivo-commentaire-vote {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-variant-numeric: tabular-nums;
}

.citivo-commentaire-vote-icone {
	flex-shrink: 0;
}

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

/* Rang « mis en avant » : une étiquette discrète, jamais une couleur imposée. */
.citivo-commentaire-avant {
	padding: 0 .4rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: var( --citivo-fs-pastille );
	opacity: .85;
}

/* Déclassés et réponses repliées : une ligne atténuée, et « Afficher quand
   même ». Les votes déclassent, ils ne suppriment jamais (décision 4). */
.citivo-commentaires-declasses {
	margin: .4rem 0 .85rem;
}

.citivo-commentaires-declasses-tete,
.citivo-commentaire-repli {
	margin: 0;
	font-size: var( --citivo-fs-texte );
	font-style: italic;
	opacity: .75;
}

.citivo-commentaires-declasses-liste {
	list-style: none;
	margin: .6rem 0 0;
	padding: 0;
}

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

/* ── C5 : signaler un commentaire ────────────────────────────────────────
   ⚠️ Un SEUL bloc pour tout le fil (voir render_section()) : il s'ouvre sous le
   formulaire d'écriture, la cible nommée en tête. */

.citivo-commentaires-abus {
	margin: .6rem 0;
	padding: .6rem .75rem;
	border: 1px solid rgba( 127, 127, 127, .35 );
	border: 1px solid color-mix( in srgb, currentColor 30%, transparent );
	border-radius: 8px;
}

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

.citivo-commentaires-abus-cible {
	margin: 0 0 .4rem;
	font-size: var( --citivo-fs-action );
	font-weight: 600;
}

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

.citivo-commentaires .citivo-commentaires-abus-motif,
.citivo-commentaires .citivo-commentaires-abus-detail {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 .4rem;
	padding: .45rem .55rem;
	border: 1px solid rgba( 0, 0, 0, .2 );
	border-radius: 8px;
	background: #fff;
	color: #1d2327;
	font: inherit;
	font-size: var( --citivo-fs-champ ); /* ⚠️ 16 px minimum : en dessous, iOS zoome la page au focus. */
}

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

.citivo-commentaires-abus-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: .5rem;
}

.citivo-commentaires-abus-msg {
	margin: .4rem 0 0;
	font-size: var( --citivo-fs-action );
}

/* C6 — la coquille d'un commentaire supprimé qui portait des réponses : elle
   garde la conversation lisible, elle n'est la parole de personne. */
.citivo-commentaire.is-supprime > .citivo-commentaire-corps > .citivo-commentaire-contenu {
	font-style: italic;
	opacity: .6;
}

/* « Signalé » : une mention, pas un bouton — le geste a déjà eu lieu. */
.citivo-commentaire-signale {
	font-size: var( --citivo-fs-texte );
	font-style: italic;
	opacity: .75;
}