/**
 * ANASER — Interaction citoyenne
 *
 * Couleurs, rayons et police empruntés aux design tokens du thème, exposés
 * comme variables CSS globales par src/input.css -> assets/css/app.css
 * (chargé avant ce fichier sur toute page singulière) : var(--color-anaser-blue),
 * var(--radius-md), etc. Rien n'est dupliqué en dur ici — si la charte du
 * thème évolue, ce module suit automatiquement.
 *
 * Rayon : rounded-md partout (comme searchform.php, seule référence de
 * formulaire du thème), sauf le badge « Réponse officielle » en pilule
 * (rounded-full, comme les pills de catégorie du thème) — objets différents,
 * traitements différents.
 *
 * Hiérarchie d'attention voulue, du plus au moins visible : confirmation
 * après envoi > zone de formulaire > blocs de commentaires > note
 * permanente. Chaque section ci-dessous applique ce dosage.
 */

/* ---------------------------------------------------------------
   Champ leurre anti-spam — fonctionnel, inchangé.
   --------------------------------------------------------------- */
.anaser-champ-leurre {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------------
   Zone de formulaire — refonte reprenant la maquette Claude Design
   « Commentaires » (Refonte du site.zip). Palette de neutres propre à
   cette maquette (bordures/fonds bleu-gris, distincte de l'échelle
   grise Tailwind du thème), déclarée en local plutôt qu'en global :
   les couleurs de marque (bleu, bleu foncé, bleu très foncé, orange
   foncé, gris route) restent les tokens du thème, réutilisés tels
   quels ci-dessous.
   --------------------------------------------------------------- */
.comment-respond {
	--anaser-form-border: #e9eef3;
	--anaser-form-field-border: #dce3ea;
	--anaser-form-field-bg: #fbfcfd;
	--anaser-form-text: #1a2530;
	--anaser-form-text-muted: #4a5a68;
	--anaser-form-note-bg: #f4f7fa;
	--anaser-form-icon-bg: #e7f1fa;

	border: 1px solid var(--anaser-form-border);
	border-radius: 20px;
	background: var(--color-white);
	box-shadow: 0 20px 50px -30px rgb(7 63 107 / 0.45);
	padding: 2.125rem;
}

html.dark .comment-respond {
	--anaser-form-border: var(--color-gray-800);
	--anaser-form-field-border: var(--color-gray-700);
	--anaser-form-field-bg: var(--color-gray-900);
	--anaser-form-text: var(--color-gray-100);
	--anaser-form-text-muted: var(--color-gray-400);
	--anaser-form-note-bg: rgb(255 255 255 / 0.04);
	--anaser-form-icon-bg: rgb(10 111 192 / 0.15);

	background: transparent;
	box-shadow: none;
}

/* Icône générée en CSS (SVG encodé en donnée, pas de fichier image) :
   pas de balisage supplémentaire nécessaire pour l'associer au titre. */
.comment-reply-title {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 0.25rem;
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--color-anaser-blue-darker);
}

html.dark .comment-reply-title {
	color: var(--color-white);
}

.comment-reply-title::before {
	content: "";
	flex-shrink: 0;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 14px;
	background-color: var(--anaser-form-icon-bg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.5rem 1.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a6fc0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 9.5 9.5 0 0 1-3.6-.7L3 21l1.9-4.9A8.4 8.4 0 0 1 12 3.1a8.4 8.4 0 0 1 9 8.4z'/%3E%3C/svg%3E");
}

.comment-reply-title small a {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-anaser-blue);
}

/* ---------------------------------------------------------------
   Note permanente — description sous le titre, indentée pour s'aligner
   avec le texte du titre plutôt que l'icône.
   --------------------------------------------------------------- */
.anaser-note {
	margin: 0 0 1.625rem;
	margin-left: 4.25rem;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--anaser-form-text-muted);
}

html.dark .anaser-note {
	color: var(--color-gray-400);
}

.anaser-note a {
	color: var(--color-anaser-blue);
	text-underline-offset: 2px;
}

html.dark .anaser-note a {
	color: var(--color-blue-400);
}

/* ---------------------------------------------------------------
   Confirmation après envoi — reste l'élément le plus marqué de la
   zone (fond bleu franc, bordure assortie), rayon aligné sur le
   nouveau langage plus arrondi de cette refonte.
   --------------------------------------------------------------- */
.anaser-confirmation {
	margin: 0 0 1.625rem;
	border: 1px solid var(--color-anaser-blue);
	border-radius: 12px;
	background: rgb(10 111 192 / 0.1);
	box-shadow: 0 1px 3px rgb(10 111 192 / 0.15);
	padding: 1rem 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.5rem;
	font-weight: 600;
	color: var(--color-anaser-blue-darker);
}

html.dark .anaser-confirmation {
	background: rgb(10 111 192 / 0.15);
	color: var(--color-white);
}

/* ---------------------------------------------------------------
   Champs du formulaire — labels toujours au-dessus, jamais à côté.
   --------------------------------------------------------------- */
.comment-form p {
	margin: 0 0 1.25rem;
}

.comment-form label {
	display: block;
	margin-bottom: 0.5625rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-anaser-blue-darker);
}

html.dark .comment-form label {
	color: var(--color-gray-100);
}

.comment-form label .required {
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-anaser-orange-dark);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	border: 1px solid var(--anaser-form-field-border);
	border-radius: 10px;
	padding: 0.8125rem 1rem;
	font: inherit;
	font-size: 0.90625rem;
	color: var(--anaser-form-text);
	background: var(--anaser-form-field-bg);
}

.comment-form input[type="text"]::placeholder,
.comment-form input[type="email"]::placeholder,
.comment-form textarea::placeholder {
	color: var(--color-gray-400);
}

.comment-form input[type="text"]:focus-visible,
.comment-form input[type="email"]:focus-visible,
.comment-form textarea:focus-visible {
	outline: none;
	border-color: var(--color-anaser-blue);
	box-shadow: 0 0 0 3px rgb(10 111 192 / 0.15);
}

/* Le textarea est le champ principal : rayon plus prononcé, hauteur
   confortable, et espace réservé en bas pour le compteur de caractères
   qui se superpose sans jamais recouvrir le texte saisi. */
.comment-form textarea {
	resize: vertical;
	min-height: 9.375rem;
	border-radius: 12px;
	padding: 1rem 1.125rem 2.5rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.anaser-champ-compteur {
	position: relative;
}

.anaser-compteur {
	position: absolute;
	right: 1rem;
	bottom: 0.875rem;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--color-gray-500);
	pointer-events: none;
}

html.dark .anaser-compteur {
	color: var(--color-gray-400);
}

/* Seuils absolus (voir majCompteur() dans anaser-interaction.js), pas un
   pourcentage de maxlength : 1200 et 1400 sont pensés pour la limite
   actuelle de 1500 caractères. */
.anaser-compteur.anaser-compteur--attention {
	color: var(--color-anaser-orange-dark);
}

.anaser-compteur.anaser-compteur--critique {
	color: var(--color-anaser-orange-darker);
}

html.dark .anaser-compteur.anaser-compteur--critique {
	color: var(--color-anaser-orange);
}

/* ---------------------------------------------------------------
   Nom / E-mail : deux colonnes à partir de 480px (adjacents dans le
   DOM par défaut, pas de conteneur supplémentaire nécessaire) ; empilés
   en dessous, où deux demi-colonnes seraient trop étroites.
   --------------------------------------------------------------- */
.comment-form-author,
.comment-form-email {
	margin-bottom: 1.25rem;
}

@media (min-width: 480px) {
	.comment-form-author,
	.comment-form-email {
		display: inline-block;
		box-sizing: border-box;
		width: calc(50% - 0.5rem);
		vertical-align: top;
	}

	.comment-form-author {
		margin-right: 1rem;
	}
}

/* ---------------------------------------------------------------
   Case à cocher (consentement cookies) : label à côté du champ, registre
   différent d'un champ texte — pattern standard, hors de la contrainte
   "jamais à côté" qui vise les libellés de champs de saisie.
   --------------------------------------------------------------- */
.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6875rem;
}

.comment-form-cookies-consent input[type="checkbox"] {
	flex-shrink: 0;
	margin-top: 0.0625rem;
	width: 1.0625rem;
	height: 1.0625rem;
	accent-color: var(--color-anaser-blue);
}

.comment-form-cookies-consent label {
	margin-bottom: 0;
	font-weight: 400;
	color: var(--anaser-form-text-muted);
}

html.dark .comment-form-cookies-consent label {
	color: var(--color-gray-400);
}

/* ---------------------------------------------------------------
   Bouton d'envoi — <button> (pas <input>, qui ne peut pas contenir
   d'icône), pleine largeur, avec pictogramme d'envoi.
   --------------------------------------------------------------- */
.comment-form button[type="submit"] {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	width: 100%;
	border: none;
	border-radius: 12px;
	background: var(--color-anaser-blue);
	box-shadow: 0 12px 26px -12px rgb(10 111 192 / 0.8);
	padding: 1.0625rem;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-white);
	cursor: pointer;
	transition: background-color 150ms ease;
}

.comment-form button[type="submit"] svg {
	width: 1.1875rem;
	height: 1.1875rem;
	flex-shrink: 0;
}

.comment-form button[type="submit"]:hover {
	background: var(--color-anaser-blue-dark);
}

/* État "envoi en cours" posé par assets/js/anaser-interaction.js.
   Volontairement sans attribut disabled (voir le JS) : pointer-events
   bloque un second clic sans risquer qu'un navigateur omette la valeur
   du bouton à la soumission. */
.comment-form button[type="submit"].anaser-envoi-en-cours {
	opacity: 0.7;
	cursor: default;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.comment-form button[type="submit"] {
		transition: none;
	}
}

/* ---------------------------------------------------------------
   Rappel de modération en bas de formulaire.
   --------------------------------------------------------------- */
.anaser-note-moderation {
	display: flex;
	align-items: flex-start;
	gap: 0.8125rem;
	margin-top: 1.25rem;
	border-radius: 12px;
	background: var(--anaser-form-note-bg);
	padding: 1rem 1.125rem;
	font-size: 0.84375rem;
	line-height: 1.6;
	color: var(--anaser-form-text-muted);
}

.anaser-note-moderation svg {
	flex-shrink: 0;
	width: 1.375rem;
	height: 1.375rem;
	color: var(--color-anaser-blue);
}

/* ---------------------------------------------------------------
   Mise en page en deux colonnes (commentaires / formulaire). Le
   conteneur de cette section est passé à max-w-6xl dans single.php
   (voir ce fichier, montré séparément) — plus large que max-w-4xl qui
   encadre le reste de l'article, pour que le formulaire ait une vraie
   place plutôt que d'être compressé dans une colonne étroite. Colonne
   du formulaire portée jusqu'à 30rem (480px), la largeur de la maquette
   d'origine. Seuil de 860px : sous cette largeur, deux colonnes
   n'auraient plus la place de rester lisibles, donc empilées.
   --------------------------------------------------------------- */
.anaser-commentaires-grille {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 860px) {
	.anaser-commentaires-grille {
		grid-template-columns: minmax(0, 1fr) minmax(20rem, 30rem);
		align-items: start;
	}

	.anaser-commentaires-colonne-formulaire {
		position: sticky;
		top: 6rem;
	}
}

.anaser-commentaires-entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	flex-wrap: wrap;
	margin-bottom: 1.75rem;
}

.anaser-commentaires-titre {
	position: relative;
	margin: 0;
	padding-bottom: 0.625rem;
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--color-anaser-blue-darker);
}

html.dark .anaser-commentaires-titre {
	color: var(--color-white);
}

.anaser-commentaires-titre::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 3.25rem;
	height: 3px;
	border-radius: 2px;
	background: var(--color-anaser-orange);
}

/* État vide : même famille visuelle que .comment-body (bordure, fond
   légèrement teinté, coins arrondis) — un espace blanc ne dit rien,
   ceci prend la place qu'aurait le premier commentaire. */
.anaser-commentaires-vide {
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-md);
	background: var(--color-gray-50);
	padding: 2rem 1.5rem;
	text-align: center;
}

.anaser-commentaires-vide p {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--color-gray-600);
}

html.dark .anaser-commentaires-vide {
	border-color: var(--color-gray-800);
	background: rgb(255 255 255 / 0.03);
}

html.dark .anaser-commentaires-vide p {
	color: var(--color-gray-400);
}

.anaser-tri {
	display: flex;
	gap: 0.375rem;
	border: 1px solid var(--color-gray-200);
	border-radius: 9999px;
	background: var(--color-white);
	padding: 0.25rem;
}

html.dark .anaser-tri {
	border-color: var(--color-gray-800);
	background: transparent;
}

.anaser-tri__bouton {
	position: relative;
	border: none;
	border-radius: 9999px;
	background: transparent;
	padding: 0.5rem 1rem;
	font: inherit;
	font-size: 0.8125rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--color-gray-600);
	cursor: pointer;
}

/* Cible tactile réelle de 44px (padding vertical + ligne = 36px visibles),
   comme pour .comment-reply-link : le débordement invisible ne grossit
   pas l'apparence de la pilule. */
.anaser-tri__bouton::after {
	content: "";
	position: absolute;
	inset: -5px;
}

html.dark .anaser-tri__bouton {
	color: var(--color-gray-400);
}

.anaser-tri__bouton.is-active {
	background: var(--color-anaser-blue-darker);
	color: var(--color-white);
}

/* ---------------------------------------------------------------
   Liste des commentaires.
   --------------------------------------------------------------- */
.comment-list {
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0;
}

/* Espacement entre commentaires de premier niveau posé ici explicitement
   (redondant avec le space-y-6 de comments.php, mais volontaire : le
   rendu du module ne doit pas dépendre silencieusement d'une classe
   Tailwind posée côté thème — si comments.php change, l'écartement
   entre blocs reste garanti). */
.comment-list > li + li {
	margin-top: 1.5rem;
}

.comment-list .children {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0 0 0 1.25rem;
	border-left: 2px solid var(--color-gray-200);
}

html.dark .comment-list .children {
	border-color: var(--color-gray-800);
}

.comment-list .children > li + li {
	margin-top: 1.5rem;
}

/* Posé par initialiserRepli() et initialiserRepliReponses()
   (anaser-interaction.js) — jamais présent sans JS. Hauteur 44px posée
   directement (pas de pseudo-élément ::after) : contrairement aux pilules
   compactes du fil, ce bouton n'a pas de contrainte de taille visuelle
   réduite. margin-top 1.5rem : même rythme que .comment-list > li + li
   ci-dessus, déjà cohérent avec le reste du fil. margin-bottom 2rem,
   volontairement plus large : ce bouton clôt un bloc (fil de commentaires
   ou de réponses), il doit s'en détacher visiblement de ce qui suit,
   pas seulement de ce qui précède. */
.anaser-commentaires-afficher-plus {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 2.75rem;
	margin: 1.5rem 0 2rem;
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-md);
	background: var(--color-white);
	padding: 0.625rem 1rem;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-anaser-blue-darker);
	cursor: pointer;
}

/* Le bouton de repli des réponses porte les deux classes à la fois
   (voir initialiserRepliReponses()) : il hérite donc de tout le style
   ci-dessus par la classe commune, cette règle ne fait que corriger la
   marge inférieure — un fil de réponses est imbriqué dans le commentaire
   parent, 2rem y créerait un vide disproportionné par rapport au bloc
   parent qui suit. */
.anaser-reponses-afficher-plus {
	margin-bottom: 1.5rem;
}

.anaser-commentaires-afficher-plus:hover {
	border-color: var(--color-anaser-blue);
	background: rgb(10 111 192 / 0.06);
}

html.dark .anaser-commentaires-afficher-plus {
	border-color: var(--color-gray-800);
	background: transparent;
	color: var(--color-blue-400);
}

html.dark .anaser-commentaires-afficher-plus:hover {
	border-color: var(--color-blue-400);
	background: rgb(10 111 192 / 0.15);
}

/* Chaque commentaire dans un bloc identifiable : fond légèrement teinté,
   bordure fine, coins arrondis, padding confortable — pour qu'on voie
   clairement où l'un finit et où l'autre commence, y compris dans un
   fil continu de plusieurs messages. */
.comment-body {
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-md);
	background: var(--color-gray-50);
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.03);
	padding: 1.25rem 1.5rem;
}

html.dark .comment-body {
	border-color: var(--color-gray-800);
	background: rgb(255 255 255 / 0.03);
	box-shadow: none;
}

/* Avatar (initiales, pas d'image ni de service externe — voir
   avatar_initiales() dans class-anaser-comments-display.php) et nom sur
   la même ligne ; la date suit en dessous, indentée pour s'aligner sous
   le nom plutôt que sous l'avatar (la date n'est pas un enfant du même
   conteneur que l'avatar dans le gabarit natif de WordPress). */
.comment-author.vcard {
	display: flex;
	align-items: center;
	gap: 0.875rem;
}

.anaser-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 50%;
	background: rgb(10 111 192 / 0.12);
	color: var(--color-anaser-blue-darker);
	font-size: 0.8125rem;
	font-weight: 700;
}

html.dark .anaser-avatar {
	background: rgb(10 111 192 / 0.22);
	color: var(--color-blue-300);
}

.anaser-avatar--officiel {
	background: var(--color-anaser-blue-darker);
	color: var(--color-white);
}

html.dark .anaser-avatar--officiel {
	background: var(--color-anaser-blue);
}

/* L'auteur doit primer sur la date : poids et taille nettement supérieurs. */
.comment-author.vcard .fn {
	font-size: 1rem;
	line-height: 1.375rem;
	font-weight: 700;
	font-style: normal;
	color: var(--color-gray-900);
}

html.dark .comment-author.vcard .fn {
	color: var(--color-gray-100);
}

/* "dit :" est un artefact du gabarit natif WordPress, sans valeur pour
   un lecteur visuel une fois le nom et la date affichés — masqué
   visuellement, pas retiré du DOM (structure vcard intacte, toujours
   lu par un lecteur d'écran). Même technique que .sr-only du thème
   (input.css), reproduite ici à l'identique. */
.comment-author .says {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border-width: 0;
}

.comment-metadata {
	margin: 0.375rem 0 0.875rem;
	margin-left: 3.875rem;
	font-size: 0.75rem;
	color: var(--color-anaser-road);
}

.comment-metadata a {
	color: inherit;
}

.comment-content {
	font-size: 1rem;
	line-height: 1.625;
	color: var(--color-gray-800);
}

html.dark .comment-content {
	color: var(--color-gray-200);
}

.comment-content p {
	margin: 0 0 0.75rem;
}

.comment-content p:last-child {
	margin-bottom: 0;
}

.reply {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: 1rem;
}

/* « Répondre » : puce bordée, comme dans la maquette d'origine (icône +
   libellé, bordure neutre, coins arrondis en pilule). Cible tactile
   réelle de 44px+ via le ::after ci-dessous, qui déborde du padding
   visible sans agrandir l'apparence de la puce. */
.comment-reply-link {
	position: relative;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	height: 2.25rem;
	gap: 0.375rem;
	border: 1px solid var(--color-gray-200);
	border-radius: 9999px;
	padding: 0 0.875rem;
	font-size: 0.8125rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--color-anaser-blue);
	text-decoration: none;
}

.comment-reply-link::after {
	content: "";
	position: absolute;
	inset: -5px;
}

.comment-reply-link svg {
	width: 0.875rem;
	height: 0.875rem;
	flex-shrink: 0;
}

.comment-reply-link:hover {
	border-color: var(--color-anaser-blue);
	background: rgb(10 111 192 / 0.06);
}

html.dark .comment-reply-link {
	border-color: var(--color-gray-700);
	color: var(--color-blue-400);
}

html.dark .comment-reply-link:hover {
	border-color: var(--color-blue-400);
	background: rgb(10 111 192 / 0.15);
}

/* Bouton « Utile » par commentaire (distinct du bouton « utile » par
   publication, .anaser-utile plus bas) — pilule discrète, cible tactile
   de 44px via ::after comme .comment-reply-link et .anaser-tri__bouton. */
.anaser-utile-commentaire {
	position: relative;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	height: 2.25rem;
	gap: 0.5rem;
	border: 1px solid var(--color-gray-200);
	border-radius: 9999px;
	background: transparent;
	padding: 0 0.875rem;
	font: inherit;
	font-size: 0.8125rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--color-gray-600);
	cursor: pointer;
}

.anaser-utile-commentaire::after {
	content: "";
	position: absolute;
	inset: -5px;
}

html.dark .anaser-utile-commentaire {
	border-color: var(--color-gray-700);
	color: var(--color-gray-400);
}

.anaser-utile-commentaire__icone {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

.anaser-utile-commentaire__icone svg {
	width: 1rem;
	height: 1rem;
	transform-origin: 60% 75%;
}

.anaser-utile-commentaire__anneau {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--color-anaser-blue);
	opacity: 0;
	pointer-events: none;
}

.anaser-utile-commentaire.is-vote {
	border-color: rgb(10 111 192 / 0.35);
	background: rgb(10 111 192 / 0.08);
	color: var(--color-anaser-blue-dark);
}

html.dark .anaser-utile-commentaire.is-vote {
	background: rgb(10 111 192 / 0.18);
	color: var(--color-blue-300);
}

.anaser-utile-commentaire.is-vote .anaser-utile-commentaire__icone svg {
	fill: currentColor;
}

/* Retour discret en cas d'échec réseau/serveur de la synchronisation du
   vote "Utile" (voir signalerEchec() dans anaser-interaction.js) : un
   léger halo rouge temporaire sur l'icône, retiré après 2s côté JS. Pas de
   changement de mise en page ni d'insertion/suppression d'élément, pour ne
   pas invalider :hover sur le bouton. */
.anaser-utile-commentaire--erreur .anaser-utile-commentaire__icone {
	box-shadow: 0 0 0 2px var(--color-red-500);
	border-radius: 999px;
	transition: box-shadow 0.2s ease-out;
}

@media (prefers-reduced-motion: no-preference) {
	.anaser-utile-commentaire--anime .anaser-utile-commentaire__icone svg {
		animation: anaser-pouce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	.anaser-utile-commentaire--anime .anaser-utile-commentaire__anneau {
		animation: anaser-anneau 0.55s ease-out;
	}

	.anaser-utile-commentaire--anime .anaser-utile-commentaire__total {
		display: inline-block;
		animation: anaser-compte 0.3s ease-out;
	}

	.anaser-utile-commentaire--anime {
		animation: anaser-halo 0.5s ease-out;
	}
}

@keyframes anaser-pouce {
	0% { transform: scale(1) rotate(0); }
	30% { transform: scale(0.82) rotate(-14deg); }
	60% { transform: scale(1.28) rotate(9deg); }
	100% { transform: scale(1) rotate(0); }
}

@keyframes anaser-anneau {
	0% { transform: scale(0.4); opacity: 0.55; }
	100% { transform: scale(2.1); opacity: 0; }
}

@keyframes anaser-compte {
	0% { transform: translateY(9px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}

@keyframes anaser-halo {
	0% { box-shadow: 0 0 0 0 rgb(10 111 192 / 0.35); }
	100% { box-shadow: 0 0 0 10px rgb(10 111 192 / 0); }
}

/* Mention native WordPress, visible uniquement par l'auteur de son propre
   commentaire en attente. Ton neutre — ce n'est pas une alerte. */
.comment-awaiting-moderation {
	display: block;
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	font-style: italic;
	color: var(--color-gray-600);
}

html.dark .comment-awaiting-moderation {
	color: var(--color-gray-400);
}

/* ---------------------------------------------------------------
   Réponses officielles — surcharge le bloc de commentaire standard
   ci-dessus : bordure gauche bleue plus épaisse et fond teinté de bleu
   plutôt que le gris neutre, même motif que .entry-content blockquote
   du thème. La classe est posée sur le <li> entier par comment_class.
   --------------------------------------------------------------- */
li.anaser-reponse-officielle .comment-body {
	border-color: var(--color-anaser-blue-darker);
	border-left-width: 4px;
	background: rgb(7 63 107 / 0.06);
}

html.dark li.anaser-reponse-officielle .comment-body {
	background: rgb(10 111 192 / 0.1);
}

.anaser-badge {
	display: inline-block;
	margin-bottom: 0.5rem;
	border-radius: 9999px;
	background: rgb(7 63 107 / 0.08); /* anaser-blue-darker à 8% */
	padding: 0.25rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-anaser-blue-darker);
}

html.dark .anaser-badge {
	background: rgb(255 255 255 / 0.1);
	color: var(--color-blue-300);
}

/* ---------------------------------------------------------------
   Bouton « utile » — même hauteur cible (48px) que le bouton d'envoi.
   --------------------------------------------------------------- */
.anaser-utile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 2rem 0;
}

.anaser-utile__bouton {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--color-anaser-blue);
	border-radius: var(--radius-md);
	background: var(--color-white);
	padding: 0.8125rem 1.25rem;
	font: inherit;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--color-anaser-blue);
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
}

html.dark .anaser-utile__bouton {
	background: transparent;
	border-color: var(--color-blue-400);
	color: var(--color-blue-400);
}

.anaser-utile__bouton:hover {
	background: var(--color-anaser-blue);
	color: var(--color-white);
}

html.dark .anaser-utile__bouton:hover {
	background: var(--color-blue-400);
	color: var(--color-gray-950);
}

.anaser-utile__bouton[disabled] {
	border-color: var(--color-gray-300);
	color: var(--color-gray-400);
	cursor: default;
}

.anaser-utile__bouton[disabled]:hover {
	background: var(--color-white);
	color: var(--color-gray-400);
}

html.dark .anaser-utile__bouton[disabled] {
	border-color: var(--color-gray-700);
	color: var(--color-gray-600);
}

html.dark .anaser-utile__bouton[disabled]:hover {
	background: transparent;
	color: var(--color-gray-600);
}

.anaser-utile__total {
	font-size: 0.875rem;
	color: var(--color-anaser-road);
}

@media (prefers-reduced-motion: reduce) {
	.anaser-utile__bouton {
		transition: none;
	}
}