/**
 * cn-rating — Système de notation multi-critères (étoiles 1-5)
 *             + pouces 👍/👎 globaux + popover feedback (libellés admin)
 *
 * Variables CSS partagées avec le thème cn-theme (couleurs Coalition Nationale).
 * Repli automatique sur valeurs par défaut si le thème n'expose pas ces vars.
 */

.cn-rating {
	--cnr-blue-night:   var(--cn-blue-night, #0F2845);
	--cnr-gold:         var(--cn-gold, #C4A052);
	--cnr-paper:        var(--cn-paper, #FAF7F0);
	--cnr-text:         var(--cn-text, #1a1a1a);
	--cnr-text-muted:   var(--cn-text-muted, #5a5a5a);
	--cnr-border:       var(--cn-border, #e2dfd9);
	--cnr-positive:     #2d8a4f;
	--cnr-mixed:        #d18900;
	--cnr-negative:     #c62828;
	--cnr-star-empty:   #d8d3c7;
	--cnr-star-filled:  #f3b418;
	--cnr-star-hover:   #ffc845;

	font-family: var(--cn-font-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	color: var(--cnr-text);
	/* v0.5.3 — Fond ivoire-95 conservé pour le widget en mode STANDALONE
	   (bloc full sur la section "Votre avis sur cette mesure" en bas de
	   page). Le subtil contraste ivoire/blanc avec la section thème
	   .cn-rating-section (qui est en var(--cn-blanc)) marque la zone
	   d'interaction. Le MODE COMPACT en revanche surcharge background
	   et border-radius pour s'aligner sur les autres cartes de l'aside
	   (.cn-aside-context, .cn-mesure-cite). Voir .cn-rating--compact
	   plus bas dans ce fichier. */
	background: var(--cnr-paper);
	border: 1px solid var(--cnr-border);
	border-radius: 10px;
	padding: 20px 22px;
	margin: 32px 0;
	max-width: 720px;
}

.cn-rating__title {
	font-family: var(--cn-font-serif, "Source Serif 4", Georgia, serif);
	font-size: 18px;
	font-weight: 600;
	color: var(--cnr-blue-night);
	margin: 0 0 4px;
}

.cn-rating__intro {
	font-size: 13px;
	color: var(--cnr-text-muted);
	margin: 0 0 16px;
	line-height: 1.45;
}

.cn-rating__login-notice {
	margin: 12px 0 0;
	padding: 10px 12px;
	background: rgba(196, 160, 82, 0.10);
	border-left: 3px solid var(--cnr-gold);
	font-size: 13px;
	color: var(--cnr-text);
	border-radius: 0 4px 4px 0;
}

/* ===== v0.3.0 — Pouces 👍/👎 globaux ===== */

.cn-rating-quick {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 16px 0 14px;
}

.cn-rating-quick-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 14px 12px;
	background: #fff;
	border: 2px solid var(--cnr-border);
	border-radius: 10px;
	cursor: pointer;
	font-family: inherit;
	color: var(--cnr-text);
	transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.cn-rating-quick-btn:hover {
	transform: translateY(-1px);
}

.cn-rating-quick-icon {
	width: 28px;
	height: 28px;
	color: var(--cnr-text-muted);
	transition: color 0.12s ease;
}

.cn-rating-quick-like:hover {
	border-color: var(--cnr-positive);
	background: rgba(45, 138, 79, 0.06);
}
.cn-rating-quick-like:hover .cn-rating-quick-icon,
.cn-rating-quick-like.is-active .cn-rating-quick-icon {
	color: var(--cnr-positive);
}
.cn-rating-quick-like.is-active {
	border-color: var(--cnr-positive);
	background: rgba(45, 138, 79, 0.12);
}

.cn-rating-quick-dislike:hover {
	border-color: var(--cnr-negative);
	background: rgba(198, 40, 40, 0.06);
}
.cn-rating-quick-dislike:hover .cn-rating-quick-icon,
.cn-rating-quick-dislike.is-active .cn-rating-quick-icon {
	color: var(--cnr-negative);
}
.cn-rating-quick-dislike.is-active {
	border-color: var(--cnr-negative);
	background: rgba(198, 40, 40, 0.12);
}

.cn-rating-quick-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--cnr-text);
}

.cn-rating-quick-count {
	font-size: 18px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--cnr-blue-night);
	line-height: 1.1;
}

.cn-rating-quick-btn:focus-visible {
	outline: 2px solid var(--cnr-blue-night);
	outline-offset: 2px;
}

/* ===== v0.3.0 — Toggle "Noter en détail" ===== */

.cn-rating-detail-toggle {
	text-align: center;
	margin: 6px 0 12px;
}

.cn-rating-detail-link {
	background: none;
	border: 0;
	color: var(--cnr-text-muted);
	font-family: inherit;
	font-size: 12px;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 4px;
	text-decoration: underline dotted;
	text-underline-offset: 3px;
	transition: color 0.12s ease;
}
.cn-rating-detail-link:hover { color: var(--cnr-blue-night); }
.cn-rating-detail-link.is-expanded .cn-rating-detail-chevron {
	transform: rotate(180deg);
	display: inline-block;
}
.cn-rating-detail-chevron {
	display: inline-block;
	transition: transform 0.18s ease;
	margin-left: 2px;
}

.cn-rating-detail__intro {
	font-size: 12px;
	color: var(--cnr-text-muted);
	margin: 0 0 12px;
	font-style: italic;
}

/* ===== Lignes critères ===== */

.cn-rating-criteria {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 18px;
}

.cn-rating-criterion {
	display: grid;
	grid-template-columns: 130px 1fr 28px;
	align-items: center;
	gap: 14px;
	padding: 6px 0;
}

.cn-rating-criterion__label {
	font-size: 14px;
	font-weight: 500;
	color: var(--cnr-text);
	display: flex;
	align-items: center;
	gap: 4px;
}

.cn-rating-criterion__label .cn-rating-help {
	color: var(--cnr-text-muted);
	cursor: help;
	font-weight: normal;
	font-size: 13px;
	user-select: none;
	border-bottom: 1px dotted var(--cnr-text-muted);
}

/* ===== Étoiles ===== */

.cn-rating-stars {
	display: flex;
	gap: 4px;
}

.cn-rating-star {
	background: none;
	border: 0;
	padding: 2px;
	cursor: pointer;
	color: var(--cnr-star-empty);
	transition: color 0.12s ease, transform 0.12s ease;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.cn-rating-star svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
	display: block;
}

.cn-rating-star.is-hover    { color: var(--cnr-star-hover); transform: scale(1.08); }
.cn-rating-star.is-selected { color: var(--cnr-star-filled); }

.cn-rating-star:focus-visible {
	outline: 2px solid var(--cnr-blue-night);
	outline-offset: 2px;
	border-radius: 4px;
}

.cn-rating-criterion__score {
	font-size: 13px;
	font-weight: 600;
	color: var(--cnr-text-muted);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.cn-rating-criterion[data-score="1"] .cn-rating-criterion__score,
.cn-rating-criterion[data-score="2"] .cn-rating-criterion__score { color: var(--cnr-negative); }
.cn-rating-criterion[data-score="3"] .cn-rating-criterion__score { color: var(--cnr-mixed); }
.cn-rating-criterion[data-score="4"] .cn-rating-criterion__score,
.cn-rating-criterion[data-score="5"] .cn-rating-criterion__score { color: var(--cnr-positive); }

/* ===== Bloc statistiques publiques ===== */

.cn-rating-stats {
	border-top: 1px solid var(--cnr-border);
	padding-top: 14px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr auto;
	gap: 12px 24px;
	align-items: end;
}

.cn-rating-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cn-rating-stat__label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cnr-text-muted);
}

.cn-rating-stat__value {
	font-size: 18px;
	font-weight: 600;
	color: var(--cnr-blue-night);
	font-variant-numeric: tabular-nums;
}

.cn-rating-stats-global {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
}

.cn-rating-avg-global {
	font-family: var(--cn-font-serif, "Source Serif 4", Georgia, serif);
	font-size: 26px;
	font-weight: 700;
	color: var(--cnr-text-muted);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.cn-rating-avg-global.is-positive { color: var(--cnr-positive); }
.cn-rating-avg-global.is-mixed    { color: var(--cnr-mixed); }
.cn-rating-avg-global.is-negative { color: var(--cnr-negative); }

.cn-rating-stats-total {
	font-size: 12px;
	color: var(--cnr-text-muted);
	font-variant-numeric: tabular-nums;
}

/* ===== États ===== */

.cn-rating.is-submitting {
	opacity: 0.65;
	pointer-events: none;
}

/* ===== Popover near-click (v0.6.0, doctrine C204) =====
 *
 * Remplace l'ancien toast bottom-fixed. Ancré sur le bouton qui a
 * déclenché l'action (pouce, étoile, "Envoyer" du popover feedback).
 *
 * Position calculée en JS (left/top en px absolus). CSS gère uniquement
 * le rendu visuel : fond, padding, ombre, flèche, animation d'entrée.
 *
 * Deux variantes :
 *   - .cn-rating-popover--info  : fond bleu nuit (suspended, info)
 *   - .cn-rating-popover--error : fond rouge sobre (erreur réseau/serveur)
 *
 * Modificateur de position (set par JS si pas de place en haut) :
 *   - .cn-rating-popover--below : flèche au-dessus au lieu d'en-dessous
 */

.cn-rating-popover {
	position: absolute;
	max-width: 260px;
	min-width: 120px;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--cn-paper, #FAF7F0);
	background: var(--cn-blue-night, #0F2845);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.12);
	z-index: 99999;
	pointer-events: auto;
	animation: cnRatingPopoverIn 0.16s ease-out;
}

.cn-rating-popover--error {
	background: #B33A3A;
	color: #FFFFFF;
}

.cn-rating-popover__text {
	display: block;
}

/* Flèche pointant vers le bouton.
   Position par défaut : sous le popover (popover au-dessus du bouton).
   Variante --below : flèche au-dessus du popover (popover sous le bouton). */
.cn-rating-popover__arrow {
	position: absolute;
	width: 10px;
	height: 10px;
	background: inherit;
	transform: translateX(-50%) rotate(45deg);
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.08);
	bottom: -5px;
	top: auto;
	pointer-events: none;
}

.cn-rating-popover--below .cn-rating-popover__arrow {
	top: -5px;
	bottom: auto;
	box-shadow: -2px -2px 3px rgba(0, 0, 0, 0.08);
}

@keyframes cnRatingPopoverIn {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ===== Popover feedback ===== */

.cn-rating-feedback-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 40, 69, 0.55);
	backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99998;
	padding: 16px;
	animation: cnRatingOverlayIn 0.16s ease-out;
}

@keyframes cnRatingOverlayIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.cn-rating-feedback {
	background: var(--cn-paper, #FAF7F0);
	border-radius: 12px;
	padding: 24px 26px;
	max-width: 480px;
	width: 100%;
	box-shadow: 0 16px 48px rgba(15, 40, 69, 0.25);
	font-family: var(--cn-font-sans, "Inter", -apple-system, sans-serif);
	color: var(--cn-text, #1a1a1a);
}

.cn-rating-feedback h3 {
	font-family: var(--cn-font-serif, "Source Serif 4", Georgia, serif);
	font-size: 20px;
	font-weight: 600;
	color: var(--cn-blue-night, #0F2845);
	margin: 0 0 6px;
}

.cn-rating-feedback p {
	font-size: 13px;
	color: var(--cn-text-muted, #5a5a5a);
	margin: 0 0 16px;
	line-height: 1.5;
}

.cn-rating-feedback label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--cn-text, #1a1a1a);
	margin: 12px 0 6px;
}

.cn-rating-feedback textarea {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--cn-border, #e2dfd9);
	border-radius: 6px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	resize: vertical;
	background: #fff;
	color: var(--cn-text, #1a1a1a);
	box-sizing: border-box;
}

.cn-rating-feedback textarea:focus {
	outline: none;
	border-color: var(--cn-blue-night, #0F2845);
	box-shadow: 0 0 0 3px rgba(15, 40, 69, 0.15);
}

/* v0.3.0 — Note de modération (rappel "lu par les modérateurs") */
.cn-rating-feedback-moderation-note {
	font-size: 11px !important;
	color: var(--cn-text-muted, #5a5a5a) !important;
	background: rgba(196, 160, 82, 0.08);
	border-left: 3px solid var(--cn-gold, #C4A052);
	padding: 8px 10px !important;
	margin: 14px 0 0 !important;
	border-radius: 0 4px 4px 0;
	line-height: 1.45 !important;
}

.cn-rating-feedback-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 18px;
}

.cn-rating-feedback-actions button {
	padding: 8px 16px;
	border-radius: 6px;
	border: 1px solid transparent;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.12s ease, border-color 0.12s ease;
}

.cn-rating-feedback-skip {
	background: transparent;
	border-color: var(--cn-border, #e2dfd9);
	color: var(--cn-text-muted, #5a5a5a);
}
.cn-rating-feedback-skip:hover {
	background: rgba(15, 40, 69, 0.04);
	border-color: var(--cn-text-muted, #5a5a5a);
}

.cn-rating-feedback-send {
	background: var(--cn-blue-night, #0F2845);
	color: var(--cn-paper, #FAF7F0);
	border-color: var(--cn-blue-night, #0F2845);
}
.cn-rating-feedback-send:hover  { background: #1a3556; }
.cn-rating-feedback-send:disabled { opacity: 0.6; cursor: wait; }

/* ===== Responsive ===== */

@media (max-width: 560px) {
	.cn-rating { padding: 16px; margin: 24px 0; }
	.cn-rating-quick {
		gap: 8px;
	}
	.cn-rating-quick-btn {
		padding: 12px 8px;
	}
	.cn-rating-quick-icon {
		width: 24px;
		height: 24px;
	}
	.cn-rating-quick-count {
		font-size: 16px;
	}
	.cn-rating-criterion {
		grid-template-columns: 1fr;
		gap: 4px;
	}
	.cn-rating-criterion__label { font-size: 13px; }
	.cn-rating-stars { gap: 2px; }
	.cn-rating-star svg { width: 26px; height: 26px; } /* plus gros au touch */
	.cn-rating-criterion__score { text-align: left; }
	.cn-rating-stats {
		grid-template-columns: 1fr 1fr;
		gap: 14px;
	}
	.cn-rating-stats-global {
		grid-column: 1 / -1;
		align-items: flex-start;
	}
}

/* =====================================================================
   v0.4.0 — Mode COMPACT (insert latéral)
   ---------------------------------------------------------------------
   Variante du widget pour insertion dans une barre latérale étroite
   (typiquement aside d'une mesure, ~280-320px de large). Contient :
   - Titre court
   - Pouces 👍/👎 plus denses (sans label texte, juste icône + compteur)
   - Lien "Noter en détail →" qui ancre vers la section principale
   ================================================================== */

.cn-rating--compact {
	/* v0.5.4 — Symétrie visuelle complète avec les cartes voisines de
	   l'aside thème (.cn-aside-context au-dessus, .cn-mesure-cite en-
	   dessous), telles que définies dans cn-theme v0.11.13. Le widget
	   compact adopte les mêmes conventions (padding var(--cn-space-6),
	   pas de bordure, fond blanc, border-radius var(--cn-radius-md))
	   pour ne plus trancher visuellement avec ses voisins.
	   v0.5.5 — Ajout de box-shadow var(--cn-shadow-md) en symétrie avec
	   l'ombre ajoutée sur .cn-aside-context et .cn-mesure-cite dans
	   cn-theme v0.11.14 : les 3 cartes ressortent uniformément sur le
	   fond global ivoire-95 de la page. */
	padding: var(--cn-space-6, 24px);
	margin: 0;
	max-width: none; /* prend toute la largeur de l'aside */
	background: var(--cn-blanc, #fff);
	border: none;
	border-radius: var(--cn-radius-md, 4px);
	box-shadow: var(--cn-shadow-md, 0 4px 6px -1px rgba(15, 40, 69, 0.08));
}

.cn-rating__title--compact {
	/* v0.5.4 — Calé sur .cn-aside-context__title (cn-theme v0.11.13) :
	   var(--cn-text-xs), letter-spacing 0.08em, couleur bleu-nuit-50,
	   margin-bottom var(--cn-space-4). Avant : 13px / 0.06em /
	   --cnr-text-muted / 12px — proche mais asymétrique à l'œil. */
	font-family: var(--cn-font-sans, "Inter", sans-serif);
	font-size: var(--cn-text-xs, 0.75rem);
	font-weight: var(--cn-weight-semibold, 600);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cn-bleu-nuit-50, #87929E);
	margin: 0 0 var(--cn-space-4, 16px);
}

.cn-rating--compact .cn-rating__compact-login-notice {
	margin: 0 0 12px;
	font-size: 11px;
	color: var(--cnr-text-muted);
	font-style: italic;
	line-height: 1.4;
}

/* Pouces compact : icône + compteur seulement, plus serrés */
.cn-rating-quick--compact {
	gap: 8px;
	margin: 0 0 10px;
}

.cn-rating-quick--compact .cn-rating-quick-btn {
	flex-direction: row;
	gap: 8px;
	padding: 10px 8px;
}

.cn-rating-quick--compact .cn-rating-quick-icon {
	width: 22px;
	height: 22px;
}

.cn-rating-quick--compact .cn-rating-quick-count {
	font-size: 16px;
	font-weight: 700;
}

/* Pas de label texte en compact, juste l'aria-label suffit */
.cn-rating-quick--compact .cn-rating-quick-label {
	display: none;
}

/* Lien "Noter en détail →" */
.cn-rating-compact-detail-link {
	display: block;
	text-align: center;
	font-size: 12px;
	color: var(--cnr-blue-night);
	text-decoration: underline dotted;
	text-underline-offset: 3px;
	padding: 6px 0 2px;
	font-weight: 500;
	transition: color 0.12s ease;
}

.cn-rating-compact-detail-link:hover,
.cn-rating-compact-detail-link:focus {
	color: var(--cnr-gold);
	text-decoration-style: solid;
}