/* ==========================================================================
   MR Polls — rendu public

   RÈGLE : le thème a le dernier mot sur l'apparence.

   Deux couches :

   1. APPARENCE — sélecteurs :where(), spécificité nulle.
      Couleurs, bordures, arrondis, tailles relatives. N'importe quelle règle
      du thème ou du CSS additionnel l'emporte, sans !important.
      Aucune police, couleur de texte ou style de bouton n'est imposé : tout
      est hérité. Les boutons portent .wp-element-button pour recevoir le
      style de bouton du thème ; le lien « Modifier mon vote » est un vrai
      lien, donc stylé comme les liens du thème.

   2. STRUCTURE — sélecteurs .mrp .x (spécificité 0,2,0).
      Uniquement la disposition interne (display, gap, marges et
      retraits des éléments du composant). Elle neutralise les règles
      génériques du thème sur p, legend, fieldset, form… qui casseraient la
      mise en page (ex. p { margin-bottom: 1.5em }). Elle ne touche ni
      police, ni couleur, ni bouton.

   Personnalisation depuis le thème (ex. CSS du thème enfant) :
     .mrp { --mrp-accent: var(--accent); --mrp-radius: var(--arrondi); }
   ========================================================================== */

/* === 1. APPARENCE ======================================================== */

:where(.mrp) {
	--mrp-accent-auto: var(--wp--preset--color--accent, var(--wp--preset--color--primary, var(--accent, currentColor)));
	--mrp-a: var(--mrp-accent, var(--mrp-accent-auto));
	--mrp-line: color-mix(in srgb, currentColor 18%, transparent);
	--mrp-soft: color-mix(in srgb, currentColor 5%, transparent);
	--mrp-muted: color-mix(in srgb, currentColor 68%, transparent);
	--mrp-radius: 0.5em;
	--mrp-pad: clamp(1em, 5cqi, 1.75em);
	--mrp-success: #1a7f37;
	--mrp-error: #b42318;
}

/* Habillage (Réglages > Encadré) */
:where(.mrp--style-card) { background: var(--mrp-soft); border-radius: var(--mrp-radius); }
:where(.mrp--style-outline) { border: 1px solid var(--mrp-line); border-radius: var(--mrp-radius); }

:where(.mrp__eyebrow) {
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mrp-a);
}
:where(.mrp__progress) { font-size: 0.8em; color: var(--mrp-muted); }
/* Paragraphe « question » légèrement mis en avant. Si le réglage choisit
   un vrai titre (h2-h4), c'est le style de titre du thème qui s'applique. */
:where(p.mrp__question) { font-size: 1.15em; font-weight: 700; line-height: 1.35; }
:where(.mrp__question:focus, .mrp__results:focus, .mrp__feedback:focus, .mrp__end:focus) { outline: none; }

:where(.mrp__choice) {
	border: 1px solid var(--mrp-line);
	border-radius: var(--mrp-radius);
	cursor: pointer;
	line-height: 1.35;
	font-weight: inherit;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
:where(.mrp__choice:hover) { border-color: var(--mrp-a); }
:where(.mrp__choice:has(input:checked)) { border-color: var(--mrp-a); background: color-mix(in srgb, var(--mrp-a) 8%, transparent); }
:where(.mrp__choice:has(input:focus-visible)) { outline: 2px solid var(--mrp-a); outline-offset: 2px; }
:where(.mrp__choice:has(input:disabled)) { cursor: default; }
:where(.mrp__choice input) { accent-color: var(--mrp-a); }
:where(.mrp__choice-mark) { font-weight: 700; }

/* Correction du quiz : couleur + symbole (jamais la couleur seule). */
:where(.mrp__choice.is-right) { border-color: var(--mrp-success); background: color-mix(in srgb, var(--mrp-success) 10%, transparent); }
:where(.mrp__choice.is-right .mrp__choice-mark) { color: var(--mrp-success); }
:where(.mrp__choice.is-wrong) { border-color: var(--mrp-error); background: color-mix(in srgb, var(--mrp-error) 8%, transparent); }
:where(.mrp__choice.is-wrong .mrp__choice-mark) { color: var(--mrp-error); }
:where(.is-answered .mrp__choice:not(.is-right, .is-wrong)) { opacity: 0.6; }

/* Résultats du sondage */
:where(.mrp__row-pct) { font-weight: 700; font-variant-numeric: tabular-nums; }
:where(.mrp__row.is-mine .mrp__row-label) { font-weight: 700; }
:where(.mrp__tag) {
	padding: 0.1em 0.6em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	vertical-align: 0.15em;
	color: var(--mrp-a);
}
:where(.mrp__bar) { height: 0.6em; border-radius: 999px; background: var(--mrp-line); overflow: hidden; }
:where(.mrp__fill) {
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: color-mix(in srgb, var(--mrp-a) 55%, transparent);
	transition: width 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
:where(.mrp__row.is-mine .mrp__fill) { background: var(--mrp-a); }

/* Retour du quiz et score */
:where(.mrp__verdict) { font-weight: 700; }
:where(.mrp__verdict.is-right) { color: var(--mrp-success); }
:where(.mrp__verdict.is-wrong) { color: var(--mrp-error); }
:where(.mrp__stat) { font-size: 0.9em; color: var(--mrp-muted); }
:where(.mrp__score) { font-size: 1.4em; font-weight: 700; }
:where(.mrp__explanation) { font-size: 0.95em; }

/* Pied : total, messages, lien de modification (style des liens du thème) */
:where(.mrp__meta) { font-size: 0.85em; color: var(--mrp-muted); }
:where(.mrp__link) { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
	:where(.mrp__fill, .mrp__choice) { transition: none; }
}

/* === 2. STRUCTURE ======================================================== */

.mrp { container-type: inline-size; box-sizing: border-box; margin-block: 2em; }
.mrp *, .mrp *::before, .mrp *::after { box-sizing: inherit; }
.mrp.mrp--style-card, .mrp.mrp--style-outline { padding: var(--mrp-pad); }
:is(.widget, .wp-block-widget-area, .sidebar, aside) .mrp { margin-block: 0; }

.mrp .mrp__eyebrow { margin: 0 0 0.5em; }
.mrp .mrp__intro { margin: 0 0 1em; }
.mrp .mrp__step { margin: 0; padding: 0; }
.mrp .mrp__fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.mrp .mrp__legend { display: block; width: 100%; margin: 0; padding: 0; float: none; }
.mrp .mrp__progress { display: block; margin: 0 0 0.35em; }
.mrp .mrp__question { margin: 0 0 0.75em; padding: 0; }

.mrp .mrp__choices { display: grid; gap: 0.5em; margin: 0; padding: 0; }
.mrp .mrp__choice { display: flex; align-items: center; gap: 0.65em; margin: 0; padding: 0.7em 0.9em; width: auto; }
.mrp .mrp__choice input { flex: none; margin: 0; }
.mrp .mrp__choice-label { flex: 1; min-width: 0; }
.mrp .mrp__choice-mark { flex: none; }

.mrp .mrp__actions { display: flex; flex-wrap: wrap; gap: 0.5em; margin: 1em 0 0; padding: 0; }

.mrp .mrp__results { display: grid; gap: 0.75em; margin: 0.25em 0 0; }
.mrp .mrp__row { margin: 0; }
.mrp .mrp__row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75em; margin: 0 0 0.3em; }
.mrp .mrp__row-label { min-width: 0; }
.mrp .mrp__row-pct { flex: none; }
.mrp .mrp__tag { display: inline-block; margin: 0 0 0 0.5em; }
.mrp .mrp__fill { display: block; }

.mrp .mrp__feedback { margin: 1em 0 0; }
.mrp .mrp__feedback p, .mrp .mrp__end p { margin: 0 0 0.5em; }
.mrp .mrp__recap { margin: 1em 0 0; padding: 0 0 0 1.25em; }
.mrp .mrp__recap li { margin: 0 0 0.75em; }
.mrp .mrp__recap li p { margin: 0.2em 0 0; }

.mrp .mrp__meta { margin: 0.9em 0 0; }
.mrp .mrp__meta:empty { display: none; }

/* Colonne étroite : l'étiquette « Votre réponse » passe sous le libellé. */
@container (max-width: 22em) {
	.mrp .mrp__tag { display: table; margin: 0.3em 0 0; }
}

/* Toujours en dernier : l'attribut hidden l'emporte sur les display ci-dessus. */
.mrp [hidden] { display: none; }