/*
 * Gallia – Signalement partagé (Lot B2, 09/09/2026)
 * Fenêtre de choix du motif + menu ⋮ de la page de visionnage.
 * Même registre visuel que gallia-video-comments-ui/comments.css.
 */

.gallia-report-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
 * CORRECTIF (09/09/2026, défauts 1 et 2 remontés par le fondateur) —
 * [MESURÉ, par lecture] `display: flex` ci-dessus est une règle
 * D'AUTEUR ; l'attribut `hidden` ne pose `display: none` que via la
 * feuille du NAVIGATEUR, qui perd TOUJOURS face à une règle d'auteur de
 * spécificité égale ou supérieure — MÊME CAUSE, déjà documentée sur ce
 * projet le 05/09 (bug 56, `.gallia-player-error[hidden]`,
 * gallia-video-player/player.css) et le même jour sur d'autres modules
 * (`.gallia-ca-channel-links[hidden]`, community.css:99). `modal.hidden =
 * true` (reports.js) posait donc bien l'attribut, mais `display: flex`
 * continuait de s'appliquer : la fenêtre restait visible à l'écran quoi
 * que fasse le script — Échap et le clic sur le voile RESSORTAIENT
 * chacun `modal.hidden` correctement à `true` en JS, mais rien ne
 * changeait à l'affichage, d'où « on ne peut pas en sortir » (défaut 1)
 * et la croix perçue comme « ne réagit pas » alors qu'elle agissait
 * réellement (défaut 2, seconde cause — voir plus bas pour la première,
 * le contraste). Même parade que le 05/09, spécificité (0-2-0 contre
 * 0-1-0), jamais !important (aucun échec mesuré ici ne le justifie).
 */
.gallia-report-modal[hidden] {
	display: none;
}

.gallia-report-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .6);
}

.gallia-report-modal-panel {
	position: relative;
	width: min(420px, 92vw);
	max-height: 85vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 8px;
	padding: 24px;
	box-shadow: 0 12px 40px -12px rgba(0, 0, 0, .5);
}

.gallia-report-modal-panel h2 {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
	color: #0f0f0f;
}

/*
 * CORRECTIF (09/09/2026, défaut 2, seconde cause) — [MESURÉ par le
 * fondateur] « gris très pâle sur fond pâle ». Aucune propriété `color`
 * n'était posée ici : le caractère "✕" héritait d'une couleur non
 * maîtrisée (thème/reset du site, non vérifié faute du fichier CSS
 * global). Couleur explicite plutôt que de chercher la cause exacte de
 * l'héritage : `#0f0f0f`, la même que le reste du panneau (h2, motifs).
 *
 * CORRECTIF 2 (09/09/2026, tour suivant) — « le bouton est nul, la croix
 * est toute fine, elle n'est pas centrée ». Même cause que les trois
 * points corrigés précédemment sur /video/ et les commentaires : "✕"
 * (reports.js) est un CARACTÈRE de police, pas un dessin — un glyphe ne
 * se dimensionne ni ne se centre indépendamment de sa police. Remplacé
 * par un SVG (voir reports.js). Dimensions et couleurs TRANCHÉES par le
 * fondateur : bouton 36×36, fond rgb(242,242,242), survol
 * rgb(229,229,229) ; croix 20×20, trait 2px, rgb(15,15,15). Centrage par
 * flexbox — un caractère seul dans un bouton sans `display:flex` se cale
 * sur la ligne de base de la police, jamais garanti centré ; un SVG en
 * enfant flex centré, si.
 */
.gallia-report-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	box-sizing: border-box;
	border: 0;
	border-radius: 50%;
	background: rgb(242, 242, 242);
	color: rgb(15, 15, 15);
	cursor: pointer;
}

.gallia-report-modal-close:hover {
	background: rgb(229, 229, 229);
}

.gallia-report-modal-close svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.gallia-report-modal-reasons {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 12px;
}

.gallia-report-modal-reason {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 6px;
	border-radius: 4px;
	font-size: 14px;
	color: #0f0f0f;
	cursor: pointer;
}

.gallia-report-modal-reason:hover {
	background: #f2f2f2;
}

.gallia-report-modal-details {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	padding: 8px;
	font: inherit;
	font-size: 14px;
	resize: vertical;
	margin-bottom: 8px;
}

.gallia-report-modal-error {
	margin: 0 0 8px;
	font-size: 13px;
	color: #dc2626;
}

.gallia-report-modal-submit {
	width: 100%;
	border: 0;
	border-radius: 4px;
	background: #f8d481;
	padding: 10px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	color: #0f0f0f;
	cursor: pointer;
}

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

/*
 * État "déjà signalé" (défaut 3, 09/09/2026) — affiché à la place du
 * formulaire, à l'OUVERTURE de la fenêtre, jamais après un envoi. Même
 * registre visuel que le reste du panneau.
 */
.gallia-report-modal-already {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #0f0f0f;
}

/* ---------- menu ⋮ de la page de visionnage ---------- */

.gallia-watch-menu {
	position: relative;
}

/*
 * CORRECTIF (09/09/2026, défaut 4) — [MESURÉ 09/09 sur la référence
 * YouTube] bouton 40×40, dessin 24×24, rempli rgb(15,15,15). Le bouton
 * portait auparavant un CARACTÈRE (⋮, glyphe de police) au lieu
 * d'un dessin — un caractère ne se dimensionne pas indépendamment de sa
 * police, d'où la finesse observée. Remplacé par un SVG (voir
 * gallia-video-watch.php), ces règles fixent ses dimensions.
 * `flex-shrink: 0` sur le SVG : même précaution que le correctif du
 * défaut 5 (bug 65 du 07/09) — un enfant flex sans cette propriété peut
 * être comprimé sur l'axe principal par le conteneur.
 */
.gallia-watch-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	box-sizing: border-box;
	border: 0;
	background: none;
	border-radius: 50%;
	cursor: pointer;
	color: #0f0f0f;
}

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

.gallia-watch-menu-toggle:hover,
.gallia-watch-menu-toggle:focus-visible {
	background: #f2f2f2;
}

.gallia-watch-menu-panel {
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 20;
	min-width: 160px;
	margin: 4px 0 0;
	padding: 4px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	box-shadow: 0 6px 24px -12px rgba(0, 0, 0, .4);
}

/*
 * CORRECTIF (09/09/2026, point 3 — icône de ce menu) — `display:block`
 * remplacé par `display:flex`, même changement que
 * .gallia-home-card-menu-item (PLATFORM-homepage.css, 08/09/2026, point 4)
 * pour aligner icône + libellé.
 */
.gallia-watch-menu-panel 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: #0f0f0f;
	border-radius: 3px;
	cursor: pointer;
}

/*
 * Icône — même convention que .gallia-home-card-menu-item-icon
 * (PLATFORM-homepage.css) : 24×24, flex-shrink:0 posé dès la
 * construction, jamais après un défaut de compression mesuré.
 */
.gallia-watch-menu-panel button svg {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	color: #0f0f0f;
}

.gallia-watch-menu-panel button:hover,
.gallia-watch-menu-panel button:focus-visible {
	background: #f2f2f2;
}