/*
 * Gallia – Zone de commentaires publique
 * Chantier B, 2026-08-31.
 *
 * Même registre visuel que la page de visionnage et que l'onglet Contenu du
 * Studio : filet fin, rayon 4px sur les boutons, accent #F8D481, noir
 * #0F0F0F, rouge #DC2626 réservé aux actions destructives.
 */

.gallia-comments {
	--gc-noir: #0f0f0f;
	--gc-jaune: #f8d481;
	--gc-filet: #e0e0e0;
	--gc-gris: #606060;
	--gc-gris-clair: #f2f2f2;
	--gc-rouge: #dc2626;

	margin: 32px 0 0;
	color: var(--gc-noir);
}

/* ---------- en-tête ---------- */

.gallia-comments-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px 24px;
	margin-bottom: 20px;
}

.gallia-comments-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0;
}

.gallia-comments-sort {
	display: flex;
	gap: 16px;
}

.gallia-comments-sort-link {
	font-size: 13px;
	font-weight: 600;
	color: var(--gc-gris);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
}

.gallia-comments-sort-link:hover {
	color: var(--gc-noir);
}

.gallia-comments-sort-link.is-active {
	color: var(--gc-noir);
	border-bottom-color: var(--gc-noir);
}

/* ---------- formulaire ---------- */

.gallia-comments-form,
.gallia-comment-reply-form form {
	display: flex;
	gap: 12px;
	margin-bottom: 24px;
}

.gallia-comments-form-main {
	flex: 1 1 auto;
	min-width: 0;
}

.gallia-comments-input {
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--gc-filet);
	background: transparent;
	padding: 6px 0;
	font: inherit;
	font-size: 14px;
	color: var(--gc-noir);
	resize: none;
	overflow: hidden;
}

/*
 * CORRECTIF (Lot B2, défaut 8, 09/09/2026) — technique déjà documentée
 * sur ce projet le 08/09 pour les barres du lecteur vidéo
 * (gallia-video-player/player.css, .gallia-watch .gallia-player-progress) :
 * cibler l'ÉLÉMENT directement plutôt que ses classes, sur TOUS ses
 * états (:focus, :focus-visible, :active, :hover) dans UN SEUL bloc,
 * avec ::-moz-focus-outer pour Firefox — reprise ici à l'identique.
 * L'ancienne règle ne couvrait QUE :focus, jamais :focus-visible : les
 * navigateurs modernes appliquent leur propre anneau par défaut sur
 * :focus-visible spécifiquement, non couvert par cette règle-là — cause
 * la plus probable du contour resté visible.
 *
 * CORRECTIF 2 (09/09/2026) — [MESURÉ par le fondateur, relevé sur le
 * champ ayant réellement le focus] le pointillé restant n'était PAS
 * `outline` mais `border` : Astra pose `border: 1px dotted
 * rgb(4,107,210)` au focus sur TOUS les côtés. Ma règle d'origine ne
 * fixait que `border-bottom-color`/`-width`, jamais `border-bottom-style` :
 * le style `dotted` d'Astra restait donc actif même sur le bas, et le
 * haut/gauche/droite n'étaient jamais repris du tout. Corrigé en
 * neutralisant explicitement les trois côtés non concernés et en fixant
 * `border-bottom-style: solid` dans le même bloc multi-états.
 *
 * CORRECTIF 3 (09/09/2026, défaut 2 — cadre noir complet mesuré par le
 * fondateur après déploiement) — [NON MESURÉ : provenance exacte
 * inconnue] la règle ci-dessous fixe déjà `outline: 0 none transparent`
 * dans TOUS les états ; le contour intégral `solid 2px rgb(15,15,15)`
 * mesuré par le fondateur ne peut donc PAS venir de cette règle-ci telle
 * qu'elle existait. Je n'ai pas la feuille de style globale du thème
 * dans ce lot, ni d'accès navigateur/serveur pour lire l'onglet
 * "Computed"/"Styles" : je ne peux donc pas établir si une règle plus
 * spécifique, chargée après ce fichier, l'emporte, ou si elle est posée
 * en style inline — je ne l'affirme pas. Ce que le fondateur a tranché
 * est indépendant de la cause : SUPPRIMER CE CONTOUR ENTIÈREMENT. Deux
 * changements en conséquence : (a) sélecteur remonté à 2 classes
 * (`.gallia-comments-form-main .gallia-comments-input`, même technique
 * de spécificité déjà prouvée dans ce lot pour les champs de recherche)
 * pour reprendre la main si la cause est bien une question de
 * spécificité ; (b) l'ANCIEN repère de focus — l'anneau `solid 2px
 * rgb(15,15,15)` que j'avais qualifié à tort de "sain" dans une version
 * précédente de ce commentaire sans l'avoir vérifié — est retiré : il
 * n'a jamais été volontairement posé par ce fichier, voir ci-dessus.
 * Si ce correctif ne suffit pas (le contour vient d'un ordre de
 * chargement, pas d'une spécificité insuffisante), la mesure DevTools
 * "Styles"/"Computed" sur le champ focus sera nécessaire pour aller plus
 * loin — je le dis plutôt que d'empiler une nouvelle règle à l'aveugle.
 *
 * CORRECTIF 4 (09/09/2026) — [MESURÉ par le fondateur, différé] au focus,
 * `border-bottom` passe à `solid 1px rgb(4,107,210)` : PAS un reste de
 * cette règle-ci (qui ne fixait jamais `border-bottom-color`), mais la
 * couleur de focus propre au THÈME Astra pour ce filet, jusque-là
 * masquée sous l'ancien repère noir que j'avais retiré. Même mécanisme,
 * même couleur, que les deux barres de recherche corrigées plus tôt
 * aujourd'hui (HEADER-header.css) : rien à réinventer, même parade —
 * fixer explicitement la couleur au lieu de la laisser à la charge
 * d'Astra. Il ne s'agit PAS d'ajouter un repère : `border-bottom-color`
 * est fixée à `var(--gc-filet)` dans TOUS les états ci-dessous, y compris
 * au repos — c'est la même valeur qu'au repos (ligne 78 plus haut), donc
 * aucun changement visuel entre les deux états, exactement ce qui a été
 * demandé.
 */
.gallia-comments-form-main .gallia-comments-input,
.gallia-comments-form-main .gallia-comments-input:focus,
.gallia-comments-form-main .gallia-comments-input:focus-visible,
.gallia-comments-form-main .gallia-comments-input:active,
.gallia-comments-form-main .gallia-comments-input:hover {
	outline: 0 none transparent;
	outline-offset: 0;
	border-top: 0 none transparent;
	border-left: 0 none transparent;
	border-right: 0 none transparent;
	border-bottom-style: solid;
	border-bottom-color: var(--gc-filet);
}

.gallia-comments-input::-moz-focus-outer {
	border: 0;
}

/*
 * PAS DE REPÈRE DE FOCUS ICI, VOLONTAIREMENT — [DÉCISION EN ATTENTE DU
 * FONDATEUR, 09/09/2026] la version précédente de ce fichier posait ici
 * une règle `:focus` (bordure inférieure épaissie/assombrie) présentée
 * comme "une proposition" mais déjà écrite et livrée dans le même
 * correctif — exactement ce que la règle du jour interdit ("un choix
 * signalé mais déjà écrit reste un choix pris seul"). Retirée sans
 * remplacement. Le champ garde donc, au focus, UNIQUEMENT le filet bas
 * statique déjà présent en toute circonstance (`border-bottom: 1px solid
 * var(--gc-filet)`, tout en haut de ce fichier) — aucun changement visuel
 * entre l'état normal et l'état focus tant que le fondateur n'a pas
 * choisi un repère. Ne pas réintroduire de règle ici sans réponse
 * explicite à la question posée dans le rapport de ce correctif.
 */

.gallia-comments-form-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 8px;
}

.gallia-comments-counter {
	margin-right: auto;
	font-size: 12px;
	color: var(--gc-gris);
	font-variant-numeric: tabular-nums;
}

.gallia-comments-counter.is-over .n {
	color: var(--gc-rouge);
	font-weight: 700;
}

.gallia-comments-cancel,
.gallia-comments-submit {
	border: 1px solid var(--gc-filet);
	border-radius: 4px;
	padding: 7px 16px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	background: #fff;
	color: var(--gc-noir);
}

.gallia-comments-submit {
	background: var(--gc-jaune);
	border-color: var(--gc-jaune);
}

.gallia-comments-submit[disabled] {
	opacity: .5;
	cursor: default;
}

.gallia-comments-cancel:hover {
	background: var(--gc-gris-clair);
}

.gallia-comments-login a {
	font-size: 14px;
	font-weight: 600;
	color: var(--gc-noir);
}

/* ---------- liste ---------- */

.gallia-comments-list,
.gallia-comment-replies {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gallia-comment {
	display: flex;
	gap: 12px;
	padding: 12px 0;
}

.gallia-comment.is-pinned {
	background: rgba(248, 212, 129, .16);
	border-radius: 6px;
	padding: 12px;
}

.gallia-comment.is-reply {
	padding-left: 0;
}

.gallia-comment-replies {
	margin-left: 4px;
	padding-left: 12px;
	border-left: 2px solid var(--gc-filet);
}

.gallia-comment-avatar img,
.gallia-comment-avatar .avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: block;
}

.gallia-comment.is-reply .gallia-comment-avatar img,
.gallia-comment.is-reply .gallia-comment-avatar .avatar {
	width: 32px;
	height: 32px;
}

.gallia-comment-main {
	flex: 1 1 auto;
	min-width: 0;
}

.gallia-comment-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	font-size: 13px;
}

.gallia-comment-author {
	font-weight: 600;
	color: var(--gc-noir);
}

.gallia-comment-time {
	color: var(--gc-gris);
	font-size: 12px;
}

.gallia-comment-badge {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	background: var(--gc-gris-clair);
	border-radius: 3px;
	padding: 2px 6px;
	color: var(--gc-gris);
}

.gallia-comment-badge.is-pending {
	background: #fdf3dc;
	color: #8a6a12;
}

.gallia-comment-text {
	font-size: 14px;
	line-height: 1.5;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

/* ---------- actions d'un commentaire ---------- */

.gallia-comment-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 6px;
	min-height: 32px;
}

.gallia-comment-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border: 0;
	background: none;
	border-radius: 4px;
	padding: 5px 8px;
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--gc-gris);
	cursor: pointer;
}

.gallia-comment-btn:hover,
.gallia-comment-btn:focus-visible {
	background: var(--gc-gris-clair);
	color: var(--gc-noir);
}

.gallia-comment-btn.is-active {
	color: var(--gc-noir);
	font-weight: 700;
}

.gallia-comment-btn[disabled] {
	opacity: .5;
	cursor: default;
}

/*
 * À zéro, l'icône reste seule et aucun chiffre n'est affiché ; dès 1, le
 * chiffre apparaît. Le nombre est toujours présent dans le DOM : c'est la
 * classe qui décide de sa visibilité, ce qui évite de recomposer le
 * balisage à chaque vote.
 */
.gallia-count.is-zero {
	display: none;
}

/*
 * Le cœur du créateur : pastille ronde SÉPARÉE de l'avatar, avec l'avatar du
 * créateur dedans et un cœur en incrustation. Posée automatiquement quand le
 * créateur répond — ce n'est pas un bouton, aucun état de survol.
 */
.gallia-comment-heart {
	position: relative;
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-left: 4px;
	flex: 0 0 auto;
}

.gallia-comment-heart img {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: block;
	object-fit: cover;
}

.gallia-comment-heart-mark {
	position: absolute;
	right: -3px;
	bottom: -3px;
	font-size: 11px;
	line-height: 1;
	color: var(--gc-rouge);
	text-shadow: 0 0 2px #fff, 0 0 2px #fff;
}

/* ---------- menu contextuel ---------- */

.gallia-comment-menu {
	position: relative;
	margin-left: auto;
}

/*
 * CORRECTIF (Lot B2, défaut 4, 09/09/2026) — [MESURÉ 09/09 sur la
 * référence YouTube] bouton 40×40, dessin 24×24, rempli. Le bouton
 * portait un CARACTÈRE (⋮) remplacé par un SVG (voir
 * gallia-video-comments-ui.php) : un glyphe de police ne se dimensionne
 * pas indépendamment de sa taille de police, d'où la finesse mesurée.
 * `flex-shrink: 0` sur le SVG — même précaution que le bug 65 du 07/09
 * (gallia-creator-homepage/homepage.css) : un enfant flex sans cette
 * propriété peut être comprimé sur l'axe principal par le conteneur.
 */
.gallia-comment-menu-toggle {
	width: 40px;
	height: 40px;
	padding: 0;
	box-sizing: border-box;
	justify-content: center;
	border-radius: 50%;
	color: var(--gc-noir);
}

.gallia-comment-menu-toggle svg {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

/*
 * CORRECTIF (Lot B2, 09/09/2026) — le menu apparaissait auparavant SEULEMENT
 * au survol ou au focus, « comme les cartes du chantier A » (commentaire
 * d'origine, retiré ici — ce correctif ne touche NI les cartes du chantier A
 * NI Gallia Studio, uniquement les commentaires, voir le rapport de lot).
 * Écart délibéré avec YouTube, décision du fondateur : sur téléphone il n'y a
 * pas de survol, le menu y était donc probablement inatteignable. Rendu
 * PERMANENT (opacity: 1) — le bouton restait déjà dans le flux normal avant
 * ce correctif (opacity, jamais display), donc aucun décalage de mise en
 * page n'apparaît : [MESURÉ] en relisant la déclaration ci-dessus, `opacity`
 * seule, aucune règle `display`/`visibility` associée sur ce sélecteur.
 */
.gallia-comment-menu-toggle {
	opacity: 1;
}

.gallia-comment-menu-list {
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 20;
	min-width: 200px;
	margin: 4px 0 0;
	padding: 4px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--gc-filet);
	border-radius: 4px;
	box-shadow: 0 6px 24px -12px rgba(0, 0, 0, .4);
}

/*
 * CORRECTIF (09/09/2026, point 3 — icônes du menu ⋮ des commentaires) —
 * `display:block` remplacé par `display:flex` pour aligner icône +
 * libellé, même changement que .gallia-home-card-menu-item
 * (PLATFORM-homepage.css) au 08/09 pour le même besoin.
 */
.gallia-comment-menu-list button {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	text-align: left;
	border: 0;
	background: none;
	padding: 8px 10px;
	font: inherit;
	font-size: 13px;
	color: var(--gc-noir);
	border-radius: 3px;
	cursor: pointer;
}

/*
 * Icône des entrées — MÊME convention que
 * .gallia-home-card-menu-item-icon (PLATFORM-homepage.css, 08/09/2026,
 * point 4) : 24×24, `flex-shrink:0` posé de façon non négociable dès la
 * construction (le conteneur est flex, voir ci-dessus), jamais attendu
 * qu'un défaut de compression se manifeste avant de la poser.
 */
.gallia-comment-menu-list button svg {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	color: var(--gc-noir);
}

.gallia-comment-menu-list button:hover,
.gallia-comment-menu-list button:focus-visible {
	background: var(--gc-gris-clair);
}

.gallia-comment-menu-list button.is-destructive {
	color: var(--gc-rouge);
}

.gallia-comment-menu-list button.is-destructive svg {
	color: var(--gc-rouge);
}

/* ---------- compteur de réponses ---------- */

/* Gras noir, décision de cadrage. Rien n'est rendu quand il n'y a aucune réponse. */
.gallia-comment-replies-toggle {
	display: inline-block;
	margin-top: 6px;
	border: 0;
	background: none;
	padding: 4px 8px 4px 0;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--gc-noir);
	cursor: pointer;
}

.gallia-comment-replies-toggle:hover {
	text-decoration: underline;
}

/* ---------- états ---------- */

.gallia-comments-empty {
	color: var(--gc-gris);
	font-size: 14px;
}

.gallia-comments-more {
	margin-top: 16px;
}

.gallia-comments-more-btn {
	border: 1px solid var(--gc-filet);
	border-radius: 4px;
	background: #fff;
	padding: 8px 16px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--gc-noir);
	cursor: pointer;
}

.gallia-comments-more-btn:hover {
	background: var(--gc-gris-clair);
}

.gallia-comments-error {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--gc-rouge);
}

.gallia-comments .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.gallia-comments :focus-visible {
	outline: 2px solid var(--gc-noir);
	outline-offset: 2px;
}