/*
 * QCM Machine - styles du parcours étudiant (look « V8 »).
 *
 * Principes :
 *  - Tout est scopé sous .qcmm-app et préfixé "qcmm-" : jamais de débordement
 *    sur le thème du site hôte, jamais de reset global.
 *  - Produit REVENDABLE : l'identité de marque se rebrande en surchargeant les
 *    ~8 variables du bloc « MARQUE » ci-dessous (rien d'autre à toucher). Le
 *    corps de la feuille ne référence QUE des variables, jamais un hex en dur.
 *  - BLINDAGE anti-thème (Divi & co) : les thèmes hôtes stylent input/select/
 *    button/label/h1-h3/ul/li GLOBALEMENT ; on refixe donc explicitement, sur
 *    chaque contrôle, les propriétés qu'ils écrasent (appearance, border,
 *    background, color, font, margin, padding, box-shadow, radius, line-height)
 *    au lieu de se reposer sur l'héritage.
 *
 * Mobile-first. Vocabulaire correction : vrai = vert, faux = rouge, la coche /
 * croix et le mot VRAI/FAUX portent l'info autant que la couleur (daltonisme).
 */

/* =========================================================================
 * 1. TOKENS
 * ====================================================================== */

.qcmm-app {
	/* -------------------------------------------------------------------
	 * MARQUE - A SURCHARGER POUR REBRANDER (et rien d'autre en principe).
	 * Une école redéfinit ces ~8 variables sur .qcmm-app pour s'approprier
	 * l'identité visuelle sans toucher au reste de la feuille.
	 * ---------------------------------------------------------------- */
	--qcmm-primaire: #0b63e5;   /* accent : sélection, progression, focus */
	--qcmm-fond: #f4f5f7;       /* fond de l'application                  */
	--qcmm-surface: #ffffff;    /* cartes, contrôles                      */
	--qcmm-texte: #1a1d23;      /* texte principal                        */
	--qcmm-bordure: #e4e7ec;    /* lignes, contours de cartes             */
	--qcmm-succes: #12a06a;     /* correction : bonne réponse (vert)      */
	--qcmm-erreur: #e34948;     /* correction : mauvaise réponse (rouge)  */
	--qcmm-cta: #14171d;        /* bouton d'action principal (sombre)     */

	/* -------------------------------------------------------------------
	 * INTERNES - derivees / secondaires. Normalement inutile d'y toucher.
	 * ---------------------------------------------------------------- */
	--qcmm-texte-2: #626b7a;         /* texte secondaire                  */
	--qcmm-muted: #8b93a1;           /* texte discret, chevrons           */
	--qcmm-soft: #f0f2f5;            /* fond doux (explications, kbd)      */
	--qcmm-cta-texte: #ffffff;       /* texte du bouton d'action          */
	--qcmm-sur-accent: #ffffff;      /* texte/icône sur aplat coloré      */

	--qcmm-primaire-fond: #e8f0fe;   /* aplat léger d'accent (sélection)  */
	--qcmm-primaire-ligne: #a9c7f7;  /* contour d'accent au survol        */

	--qcmm-succes-fond: #e6f5ee;     /* aplat léger vert                  */
	--qcmm-erreur-fond: #fdecec;     /* aplat léger rouge                 */
	--qcmm-oubli: #9b1c2e;           /* rouge profond : oubli (grave)     */

	--qcmm-avert-texte: #92400e;     /* avertissement (ambre)             */
	--qcmm-avert-fond: #fffbeb;
	--qcmm-avert-bordure: #f6d68a;

	/* Rétro-compat : anciens noms de tokens, au cas où un thème enfant ou
	 * une surcharge externe les référencerait encore. Ne rien casser. */
	--qcmm-couleur-primaire: var(--qcmm-primaire);
	--qcmm-couleur-succes: var(--qcmm-succes);
	--qcmm-couleur-erreur: var(--qcmm-erreur);
	--qcmm-couleur-avertissement: var(--qcmm-avert-texte);
	--qcmm-couleur-texte: var(--qcmm-texte);
	--qcmm-couleur-bordure: var(--qcmm-bordure);

	/* Formes & profondeur */
	--qcmm-rayon: 0.875rem;          /* cartes et contrôles (14px)        */
	--qcmm-rayon-sm: 0.6875rem;      /* petits éléments (11px)            */
	--qcmm-rayon-lg: 1rem;
	--qcmm-rayon-plein: 999px;
	--qcmm-ombre: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 8px rgba(16, 24, 40, 0.05);
	--qcmm-anneau-focus: 3px;

	/* Typographie */
	--qcmm-police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Icône coche (fond des contrôles cochés). La couleur (%23fff = #fff
	 * encodé pour l'URL) vit ici, dans le bloc de tokens, pas dans le corps. */
	--qcmm-icone-coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.6l3 3 6-6'/%3E%3C/svg%3E");

	/* Conteneur */
	max-width: 560px;
	margin: 0 auto;
	padding: 1.25rem 1.25rem 6rem;
	background: var(--qcmm-fond);
	color: var(--qcmm-texte);
	font-family: var(--qcmm-police);
	font-size: 1rem;
	line-height: 1.5;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}

.qcmm-app *,
.qcmm-app *::before,
.qcmm-app *::after {
	box-sizing: inherit;
}

/* =========================================================================
 * 2. BLINDAGE ANTI-THÈME (Divi & co.)
 *    On refixe explicitement ce que les thèmes hôtes écrasent globalement.
 *    Aucun héritage supposé : chaque contrôle repart d'une base connue.
 * ====================================================================== */

.qcmm-app h2,
.qcmm-app h3,
.qcmm-app p,
.qcmm-app ul,
.qcmm-app li,
.qcmm-app label,
.qcmm-app legend,
.qcmm-app fieldset,
.qcmm-app table,
.qcmm-app th,
.qcmm-app td {
	font-family: var(--qcmm-police);
	color: inherit;
	background: transparent;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
}

.qcmm-app button,
.qcmm-app input,
.qcmm-app select {
	font-family: var(--qcmm-police);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--qcmm-texte);
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
}

.qcmm-app h2,
.qcmm-app h3 {
	margin: 0;
	padding: 0;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
}

.qcmm-app h2 {
	font-size: 1.25rem;
}

.qcmm-app h2:focus-visible,
.qcmm-app h3:focus-visible {
	outline: var(--qcmm-anneau-focus) solid var(--qcmm-primaire);
	outline-offset: 2px;
}

.qcmm-app p {
	margin: 0;
}

.qcmm-app ul {
	list-style: none;
}

.qcmm-app fieldset {
	border: 0;
	min-width: 0;
}

.qcmm-app legend,
.qcmm-app label {
	display: block;
	font-weight: 600;
	line-height: 1.4;
}

/* Focus visible unifié sur tout élément interactif. */
.qcmm-app button:focus-visible,
.qcmm-app select:focus-visible,
.qcmm-app input:focus-visible,
.qcmm-app [tabindex]:focus-visible {
	outline: var(--qcmm-anneau-focus) solid var(--qcmm-primaire);
	outline-offset: 2px;
}

/* =========================================================================
 * 3. STRUCTURE D'ÉCRAN
 * ====================================================================== */

.qcmm-screen {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* =========================================================================
 * 4. BOUTONS
 * ====================================================================== */

.qcmm-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.85rem 1.25rem;
	border: 1.5px solid transparent;
	border-radius: var(--qcmm-rayon);
	margin: 0;
	font-family: var(--qcmm-police);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--qcmm-texte);
	background: var(--qcmm-surface);
	box-shadow: var(--qcmm-ombre);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: opacity 0.13s ease, background 0.13s ease, border-color 0.13s ease;
}

.qcmm-bouton:hover {
	opacity: 0.9;
}

/* Action principale : sombre, pleine largeur, présence forte. */
.qcmm-bouton--primaire {
	width: 100%;
	padding: 1.05rem 1.5rem;
	color: var(--qcmm-cta-texte);
	background: var(--qcmm-cta);
	border-color: var(--qcmm-cta);
	box-shadow: var(--qcmm-ombre);
}

.qcmm-bouton--primaire:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Action secondaire : discrète, surface claire. */
.qcmm-bouton--discret {
	background: var(--qcmm-surface);
	border-color: var(--qcmm-bordure);
	color: var(--qcmm-texte);
}

/* -------------------------------------------------------------------------
 * BLINDAGE COULEUR DES BOUTONS (anti-thème hôte, Divi & co.)
 *
 * Les thèmes hôtes ciblent souvent `body button`, `.et_pb_button`, etc. avec
 * une spécificité qui écrase la `color`/`background` de nos boutons d'action :
 * le libellé (« Valider la question », « Lancer la session », « Question
 * suivante », « Nouvelle session ») ressort alors sombre sur fond sombre.
 *
 * On reforce donc COULEUR + FOND sur nos boutons, scopé sous .qcmm-app, avec
 * `!important` — justifié ici et seulement ici : c'est exactement le cas « le
 * thème injecte une couleur ». On ne blinde QUE color/background (les seules
 * propriétés réellement écrasées), pas le reste.
 * ---------------------------------------------------------------------- */
.qcmm-app .qcmm-bouton--primaire,
.qcmm-app .qcmm-bouton--primaire:hover,
.qcmm-app .qcmm-bouton--primaire:focus,
.qcmm-app .qcmm-bouton--primaire:active,
.qcmm-app .qcmm-bouton--primaire:disabled {
	color: var(--qcmm-cta-texte) !important;
	background-color: var(--qcmm-cta) !important;
}

.qcmm-app .qcmm-bouton--discret,
.qcmm-app .qcmm-bouton--discret:hover,
.qcmm-app .qcmm-bouton--discret:focus,
.qcmm-app .qcmm-bouton--discret:active {
	color: var(--qcmm-texte) !important;
	background-color: var(--qcmm-surface) !important;
}

/* =========================================================================
 * 5. ÉCRAN CONFIG
 * ====================================================================== */

.qcmm-config-form {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.qcmm-champ {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	border: 0;
	padding: 0;
	margin: 0;
}

.qcmm-champ > label,
.qcmm-champ > legend {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--qcmm-texte);
	margin: 0;
	padding: 0;
}

/* Select stylé, chevron dessiné en dégradés (aucune image, tokens purs). */
.qcmm-champ select,
.qcmm-app select {
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	padding: 0.85rem 2.75rem 0.85rem 1rem;
	margin: 0;
	font-size: 1rem;
	font-weight: 500;
	color: var(--qcmm-texte);
	background-color: var(--qcmm-surface);
	border: 1.5px solid var(--qcmm-bordure);
	border-radius: var(--qcmm-rayon);
	box-shadow: var(--qcmm-ombre);
	line-height: 1.4;
	appearance: none;
	-webkit-appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--qcmm-muted) 50%),
		linear-gradient(135deg, var(--qcmm-muted) 50%, transparent 50%);
	background-position: calc(100% - 1.25rem) 53%, calc(100% - 1rem) 53%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.qcmm-champ select:focus-visible,
.qcmm-app select:focus-visible {
	outline: none;
	border-color: var(--qcmm-primaire);
	box-shadow: 0 0 0 3px var(--qcmm-primaire-fond);
}

/* UE verrouillée (autre semestre) dans un <select> résiduel (admin, thème
 * surchargé) : option grisée. Le libellé texte porte l'info dans tous les cas —
 * la couleur n'est jamais le seul vecteur. */
.qcmm-app select option:disabled {
	color: var(--qcmm-muted);
	font-style: italic;
}

/* -------------------------------------------------------------------------
 * 5.b Sélecteur de contenu : liste VISIBLE d'UE et de chapitres
 *
 * Un unique groupe de radios (`qcmm_selection`) rendu en cartes UE + puces
 * chapitre. Les radios natifs restent présents et visibles (Divi peut poser
 * `appearance:none` globalement) : ils sont l'indicateur fiable de l'état
 * sélectionné même sans support de `:has()`.
 * ---------------------------------------------------------------------- */

.qcmm-app .qcmm-selecteur {
	gap: 0.55rem;
}

.qcmm-app .qcmm-selecteur[disabled],
.qcmm-app .qcmm-selecteur--inactif {
	opacity: 0.55;
}

.qcmm-app .qcmm-ue-liste,
.qcmm-app .qcmm-chapitre-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

.qcmm-app .qcmm-ue-liste {
	flex-direction: column;
	gap: 0.55rem;
}

/* -------------------------------------------------------------------------
 * BLINDAGE DES PUCES DE LISTE (anti-thème hôte, Divi & co.)
 *
 * `list-style: none` sur le `<ul>` ne suffit pas : les thèmes réintroduisent
 * les puces de deux façons qu'il ne couvre pas —
 *  1. une règle plus spécifique qui repose `list-style-type` sur `ul` ou `li` ;
 *  2. un pseudo-élément `li::before { content: "•" }` (motif classique de Divi),
 *     sur lequel `list-style` n'a aucune prise.
 * On neutralise donc les trois canaux (list-style, ::marker, ::before) sur les
 * `<li>` DU SÉLECTEUR seulement — jamais globalement : `.qcmm-item::before`
 * porte les glyphes de correction du feedback et doit rester intact.
 * `!important` suit la doctrine déjà posée plus haut (couleur des boutons) :
 * réservé aux propriétés que le thème écrase réellement, et à celles-là seules.
 * ---------------------------------------------------------------------- */
.qcmm-app .qcmm-ue-liste,
.qcmm-app .qcmm-chapitre-liste,
.qcmm-app .qcmm-ue-liste > li,
.qcmm-app .qcmm-chapitre-liste > li {
	list-style: none !important;
	list-style-type: none !important;
	list-style-image: none !important;
}

.qcmm-app .qcmm-ue-liste > li::marker,
.qcmm-app .qcmm-chapitre-liste > li::marker {
	content: none;
	font-size: 0;
}

.qcmm-app .qcmm-ue-liste > li::before,
.qcmm-app .qcmm-chapitre-liste > li::before {
	content: none !important;
	display: none !important;
}

/* Certains thèmes indentent aussi les `li` (retrait gauche, puce en image de
 * fond) et décalent alors les cartes hors de leur colonne : on repart de zéro. */
.qcmm-app .qcmm-ue-liste > li,
.qcmm-app .qcmm-chapitre-liste > li {
	margin: 0;
	padding: 0;
	text-indent: 0;
	background-image: none;
}

.qcmm-app .qcmm-ue-item {
	margin: 0;
	padding: 0;
}

/* Carte d'UE (et carte « Toutes les UE »). */
.qcmm-app .qcmm-carte {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	min-height: 44px;
	padding: 0.8rem 1rem;
	margin: 0;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--qcmm-texte);
	background: var(--qcmm-surface);
	border: 1.5px solid var(--qcmm-bordure);
	border-radius: var(--qcmm-rayon);
	box-shadow: var(--qcmm-ombre);
	cursor: pointer;
	transition: border-color 0.13s ease, background 0.13s ease;
}

.qcmm-app .qcmm-carte:hover {
	border-color: var(--qcmm-primaire-ligne);
}

.qcmm-app .qcmm-carte input[type="radio"],
.qcmm-app .qcmm-puce input[type="radio"] {
	appearance: auto;
	-webkit-appearance: auto;
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	padding: 0;
	accent-color: var(--qcmm-primaire);
	cursor: pointer;
}

.qcmm-app .qcmm-carte__nom {
	flex: 1 1 auto;
	min-width: 0;
}

.qcmm-app .qcmm-carte__meta {
	flex: none;
	font-weight: 500;
	font-size: 0.8rem;
	color: var(--qcmm-texte-2);
}

.qcmm-app .qcmm-carte:has(input:checked) {
	border-color: var(--qcmm-primaire);
	background: var(--qcmm-primaire-fond);
	color: var(--qcmm-primaire);
}

.qcmm-app .qcmm-carte:has(input:focus-visible) {
	outline: 2px solid var(--qcmm-primaire);
	outline-offset: 2px;
}

/* UE verrouillée par le semestre : VISIBLE (c'est tout l'intérêt de la liste)
 * mais sans aucun `<input>` — rien à cocher, rien à soumettre, y compris au
 * clavier. L'état est porté par le libellé texte « Réservé Xe semestre » et
 * `aria-disabled`, jamais par la seule couleur. */
.qcmm-app .qcmm-carte--verrouillee {
	cursor: not-allowed;
	background: var(--qcmm-soft);
	border-style: dashed;
	box-shadow: none;
	color: var(--qcmm-texte-2);
	font-weight: 500;
}

.qcmm-app .qcmm-carte--verrouillee:hover {
	border-color: var(--qcmm-bordure);
}

.qcmm-app .qcmm-carte__verrou {
	flex: none;
	font-size: 0.78rem;
	font-weight: 600;
	font-style: italic;
	color: var(--qcmm-avert-texte);
	background: var(--qcmm-avert-fond);
	border: 1px solid var(--qcmm-avert-bordure);
	border-radius: var(--qcmm-rayon-plein);
	padding: 0.15rem 0.6rem;
}

/* Chapitres d'une UE : puces sélectionnables, décalées sous leur UE. */
.qcmm-app .qcmm-chapitre-liste {
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.45rem 0 0.2rem 1rem;
	padding: 0 0 0 0.85rem;
	border-left: 2px solid var(--qcmm-bordure);
}

.qcmm-app .qcmm-puce {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 36px;
	margin: 0;
	padding: 0.35rem 0.75rem;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--qcmm-texte-2);
	background: var(--qcmm-surface);
	border: 1.5px solid var(--qcmm-bordure);
	border-radius: var(--qcmm-rayon-plein);
	cursor: pointer;
	transition: border-color 0.13s ease, background 0.13s ease;
}

.qcmm-app .qcmm-puce:hover {
	border-color: var(--qcmm-primaire-ligne);
}

.qcmm-app .qcmm-puce input[type="radio"] {
	width: 0.95rem;
	height: 0.95rem;
}

.qcmm-app .qcmm-puce:has(input:checked) {
	border-color: var(--qcmm-primaire);
	background: var(--qcmm-primaire-fond);
	color: var(--qcmm-primaire);
	font-weight: 600;
}

.qcmm-app .qcmm-puce:has(input:focus-visible) {
	outline: 2px solid var(--qcmm-primaire);
	outline-offset: 2px;
}

/* Modes = cartes sélectionnables (radio natif conservé + carte accentuée). */
.qcmm-config-form fieldset.qcmm-champ {
	gap: 0.55rem;
}

.qcmm-config-form .qcmm-radio {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	min-height: 44px;
	padding: 0.85rem 1rem;
	margin: 0;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--qcmm-texte);
	background: var(--qcmm-surface);
	border: 1.5px solid var(--qcmm-bordure);
	border-radius: var(--qcmm-rayon);
	box-shadow: var(--qcmm-ombre);
	cursor: pointer;
	transition: border-color 0.13s ease, background 0.13s ease;
}

.qcmm-config-form .qcmm-radio:hover {
	border-color: var(--qcmm-primaire-ligne);
}

/* Radio natif forcé visible (Divi peut mettre appearance:none globalement) :
 * il reste l'indicateur fiable même si :has() n'est pas supporté. */
.qcmm-config-form .qcmm-radio input[type="radio"] {
	appearance: auto;
	-webkit-appearance: auto;
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	padding: 0;
	accent-color: var(--qcmm-primaire);
	cursor: pointer;
}

.qcmm-config-form .qcmm-radio:has(input:checked) {
	border-color: var(--qcmm-primaire);
	background: var(--qcmm-primaire-fond);
	color: var(--qcmm-primaire);
}

.qcmm-config-form .qcmm-radio:has(input:focus-visible) {
	outline: 2px solid var(--qcmm-primaire);
	outline-offset: 2px;
}

/* Aperçu du nombre de questions disponibles. */
.qcmm-apercu {
	margin: 0;
	font-size: 0.92rem;
	color: var(--qcmm-texte-2);
}

/* Note « mode examen ignore les filtres ». */
.qcmm-note--examen {
	margin: 0;
	padding: 0.7rem 0.9rem;
	font-size: 0.88rem;
	color: var(--qcmm-texte-2);
	background: var(--qcmm-soft);
	border-radius: var(--qcmm-rayon-sm);
}

/* Bannière de reprise de session. */
.qcmm-banniere {
	border: 1.5px solid var(--qcmm-primaire-ligne);
	background: var(--qcmm-primaire-fond);
	border-radius: var(--qcmm-rayon);
	padding: 1rem;
}

.qcmm-banniere p {
	margin: 0 0 0.6rem;
	font-weight: 600;
}

.qcmm-banniere__actions {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.qcmm-banniere__actions .qcmm-bouton--primaire {
	width: auto;
}

/* Message « aucun contenu accessible ». */
.qcmm-message--vide {
	padding: 1rem;
	border: 1.5px solid var(--qcmm-bordure);
	border-radius: var(--qcmm-rayon);
	background: var(--qcmm-surface);
	box-shadow: var(--qcmm-ombre);
}

.qcmm-message--vide p {
	margin: 0;
}

/* =========================================================================
 * 6. ÉCRAN QUIZ
 * ====================================================================== */

.qcmm-progression {
	height: 4px;
	background: var(--qcmm-bordure);
	border-radius: var(--qcmm-rayon-plein);
	overflow: hidden;
	margin: 0;
}

.qcmm-progression__barre {
	height: 100%;
	width: var(--qcmm-progres, 0%);
	background: var(--qcmm-primaire);
	border-radius: var(--qcmm-rayon-plein);
	transition: width 0.3s ease;
}

.qcmm-progression-texte {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--qcmm-primaire);
}

.qcmm-enonce {
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.33;
	letter-spacing: -0.018em;
	text-wrap: balance;
}

.qcmm-quiz-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* --- Carte d'item (base commune quiz + feedback) --- */
.qcmm-items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.qcmm-item {
	display: grid;
	gap: 0.75rem;
	align-items: center;
	min-height: 44px;
	padding: 0.9rem 1rem;
	margin: 0;
	background: var(--qcmm-surface);
	border: 1.5px solid var(--qcmm-bordure);
	border-radius: var(--qcmm-rayon);
	box-shadow: var(--qcmm-ombre);
}

.qcmm-item__lettre {
	flex: none;
	font-weight: 700;
	font-size: 0.8rem;
	color: var(--qcmm-muted);
	min-width: 1.1rem;
	text-align: center;
}

.qcmm-item__texte {
	font-size: 1rem;
	line-height: 1.42;
	font-weight: 500;
	color: var(--qcmm-texte);
}

/* --- Quiz : le <label> enveloppe TOUTE la carte (input enfant caché).
 *     Cliquer n'importe où sur la ligne coche / décoche — zone de clic
 *     fiable, plus de « des fois oui des fois non ». Le padding / la bordure /
 *     le fond de la carte vivent sur le label pour couvrir toute la surface
 *     cliquable ; le <li> n'est qu'un conteneur nu (mais garde la base pour
 *     le feedback, structure différente sans input, scopé ailleurs). --- */
.qcmm-screen--quiz .qcmm-item {
	display: block;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.qcmm-screen--quiz .qcmm-item__label {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	min-height: 44px;
	padding: 0.9rem 1rem;
	margin: 0;
	background: var(--qcmm-surface);
	border: 1.5px solid var(--qcmm-bordure);
	border-radius: var(--qcmm-rayon);
	box-shadow: var(--qcmm-ombre);
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.13s ease, background 0.13s ease;
}

.qcmm-screen--quiz .qcmm-item__label:hover {
	border-color: var(--qcmm-primaire-ligne);
}

/* La lettre à gauche, le texte prend l'espace, le cercle file à droite. */
.qcmm-screen--quiz .qcmm-item__texte {
	flex: 1;
}

/* Case native masquée VISUELLEMENT mais focusable (pas display:none : le
 * clavier et les lecteurs d'écran doivent la garder). L'état visible est
 * porté par .qcmm-item__marque (frère), sans dépendre de :has(). */
.qcmm-item__case {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

/* Cercle d'état dessiné à droite (décoratif : aria-hidden). */
.qcmm-item__marque {
	flex: none;
	margin-left: auto;
	width: 24px;
	height: 24px;
	border: 1.5px solid var(--qcmm-bordure);
	border-radius: 50%;
	background-color: var(--qcmm-surface);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 15px 15px;
	transition: background 0.13s ease, border-color 0.13s ease;
}

/* Coché : cercle rempli d'accent + coche (piloté par frère, pas de :has). */
.qcmm-item__case:checked ~ .qcmm-item__marque {
	background-color: var(--qcmm-primaire);
	border-color: var(--qcmm-primaire);
	background-image: var(--qcmm-icone-coche);
}

/* État « choisi » (avant correction) : la carte entière prend l'accent. */
.qcmm-screen--quiz .qcmm-item__label:has(.qcmm-item__case:checked) {
	border-color: var(--qcmm-primaire);
	background: var(--qcmm-primaire-fond);
}

.qcmm-screen--quiz .qcmm-item__label:has(.qcmm-item__case:checked) .qcmm-item__lettre {
	color: var(--qcmm-primaire);
}

/* Focus clavier : l'anneau se pose sur la carte entière (l'input est réduit à
 * 1px, un contour dessus serait invisible). On neutralise donc l'anneau sur
 * l'input et on le reporte sur le label via :has(). */
.qcmm-screen--quiz .qcmm-item__case:focus-visible {
	outline: none;
}

.qcmm-screen--quiz .qcmm-item__label:has(.qcmm-item__case:focus-visible) {
	outline: var(--qcmm-anneau-focus) solid var(--qcmm-primaire);
	outline-offset: 2px;
}

/* Avertissement « case non cochée = FAUX » (ambre). */
.qcmm-avertissement {
	margin: 0;
	padding: 0.75rem 1rem;
	border: 1.5px solid var(--qcmm-avert-bordure);
	border-radius: var(--qcmm-rayon-sm);
	background: var(--qcmm-avert-fond);
	color: var(--qcmm-avert-texte);
	font-weight: 600;
	font-size: 0.9rem;
}

/* Zone d'actions : boutons empilés pleine largeur (pouce, mobile). */
.qcmm-actions {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* =========================================================================
 * 7. ÉCRAN FEEDBACK (correction) - point cle
 *    vert = bonne réponse, rouge = mauvaise. Le cercle porte la VÉRITÉ
 *    (✓ vrai / ✗ faux), la couleur porte la PERFORMANCE.
 * ====================================================================== */

.qcmm-enonce-rappel {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--qcmm-texte);
}

.qcmm-items--feedback .qcmm-item {
	grid-template-columns: auto 1fr auto;
	align-items: start;
	row-gap: 0.55rem;
}

.qcmm-items--feedback .qcmm-item__lettre {
	grid-column: 1;
	grid-row: 1;
	line-height: 1.42;
}

.qcmm-items--feedback .qcmm-item__texte {
	grid-column: 2;
	grid-row: 1;
}

/* Cercle de vérité (décoratif : l'info est aussi dans le badge texte). */
.qcmm-items--feedback .qcmm-item::before {
	content: "\2717"; /* ✗ par défaut (item faux) */
	grid-column: 3;
	grid-row: 1;
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--qcmm-sur-accent);
	background: var(--qcmm-erreur);
}

.qcmm-items--feedback .qcmm-item[data-vrai="1"]::before {
	content: "\2713"; /* ✓ (item vrai) */
}

/* Couleur du cercle = performance. */
.qcmm-items--feedback .qcmm-item--correct::before {
	background: var(--qcmm-succes);
}

.qcmm-items--feedback .qcmm-item--incorrect::before {
	background: var(--qcmm-erreur);
}

/* Bon : vert. */
.qcmm-item--correct {
	border-color: var(--qcmm-succes);
	background: var(--qcmm-succes-fond);
}

/* Faux : rouge. */
.qcmm-item--incorrect {
	border-color: var(--qcmm-erreur);
	background: var(--qcmm-erreur-fond);
}

/* Oubli (item vrai non coché) : la faute pédagogiquement grave ressort. */
.qcmm-item--oubli {
	border-color: var(--qcmm-oubli);
	box-shadow: inset 4px 0 0 var(--qcmm-oubli), var(--qcmm-ombre);
}

.qcmm-item--oubli .qcmm-item__texte {
	font-weight: 700;
}

/* Badge de statut « Coché à raison … / bonne réponse : VRAI ». */
.qcmm-item__statut {
	grid-column: 1 / -1;
	margin: 0;
	font-weight: 700;
	font-size: 0.83rem;
	color: var(--qcmm-texte-2);
}

.qcmm-item--correct .qcmm-item__statut {
	color: var(--qcmm-succes);
}

.qcmm-item--incorrect .qcmm-item__statut {
	color: var(--qcmm-erreur);
}

.qcmm-item--oubli .qcmm-item__statut {
	color: var(--qcmm-oubli);
}

/* Explication pédagogique. */
.qcmm-item__explication {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0.7rem 0.9rem;
	background: var(--qcmm-soft);
	border-radius: var(--qcmm-rayon-sm);
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--qcmm-texte-2);
}

.qcmm-score-question {
	margin: 0;
	font-weight: 700;
	font-size: 1rem;
	color: var(--qcmm-texte);
}

/* =========================================================================
 * 8. ÉCRAN RÉCAP
 * ====================================================================== */

.qcmm-score-global {
	margin: 0;
	font-size: 2.75rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--qcmm-texte);
	font-variant-numeric: tabular-nums;
}

.qcmm-tableau-recap {
	width: 100%;
	border-collapse: collapse;
	background: var(--qcmm-surface);
	border: 1.5px solid var(--qcmm-bordure);
	border-radius: var(--qcmm-rayon);
	overflow: hidden;
	box-shadow: var(--qcmm-ombre);
}

.qcmm-tableau-recap th,
.qcmm-tableau-recap td {
	text-align: left;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--qcmm-bordure);
	font-size: 0.95rem;
}

.qcmm-tableau-recap th {
	font-weight: 700;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--qcmm-muted);
	background: var(--qcmm-soft);
}

.qcmm-tableau-recap td {
	color: var(--qcmm-texte);
}

.qcmm-tableau-recap td:last-child {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.qcmm-tableau-recap tr:last-child td {
	border-bottom: 0;
}

.qcmm-refaire-form .qcmm-actions {
	margin-top: 0.25rem;
}

/* =========================================================================
 * 9. DIVERS (erreurs, accès refusé)
 * ====================================================================== */

.qcmm-erreur {
	margin: 0;
	color: var(--qcmm-erreur);
	font-weight: 600;
	font-size: 0.92rem;
}

.qcmm-acces-refuse {
	padding: 1rem;
	border: 1.5px solid var(--qcmm-bordure);
	border-radius: var(--qcmm-rayon);
	background: var(--qcmm-surface);
	box-shadow: var(--qcmm-ombre);
}

/* =========================================================================
 * 10. RESPONSIVE & ACCESSIBILITÉ
 * ====================================================================== */

@media (max-width: 480px) {
	.qcmm-app {
		padding: 1rem 1rem 5rem;
	}

	.qcmm-enonce {
		font-size: 1.2rem;
	}
}

/* Mouvement réduit : on coupe les transitions. */
@media (prefers-reduced-motion: reduce) {
	.qcmm-app *,
	.qcmm-app *::before,
	.qcmm-app *::after {
		transition: none !important;
		animation: none !important;
	}
}