/*
 * MLA — Quiz vidéo
 *
 * Porté depuis demo-plugin-quiz-wahou.html, la maquette validée.
 * Deux écarts volontaires avec la maquette :
 *   1. toutes les classes sont préfixées `mla-` et scopées sous `.mla-quiz`,
 *      sinon des noms comme .btn ou .frame entreraient en collision avec le thème ;
 *   2. les variables de couleur sont posées sur `.mla-quiz` et non sur `:root`,
 *      pour que la plaque n'impose rien au reste de la page.
 */

.mla-quiz {
	/*
	 * Or et noir, sans marron.
	 *
	 * `--mla-or` reste #DD9933, la couleur de marque : c'est celle du tableau
	 * de bord élève, et en changer désaccorderait le quiz du reste du site.
	 * L'effet « premium » vient des reflets plus clairs posés par-dessus, pas
	 * d'un or différent.
	 */
	--mla-or: #DD9933;
	--mla-or-f: #a8701e;
	--mla-or-cl: #f5c264;
	--mla-or-lum: #ffe9b8;

	/* Un noir profond et neutre : l'ancien dégradé tirait sur le marron. */
	--mla-noir: #08080a;
	--mla-noir-haut: #1a1a1e;
	--mla-noir-bas: #0b0b0d;

	--mla-texte: #f4ecdd;
	--mla-doux: #b8a985;
	--mla-vert: #57c06a;
	--mla-vert-fond: rgba(87, 192, 106, .15);
	--mla-rouge: #e2605a;
	--mla-rouge-fond: rgba(226, 96, 90, .15);

	/*
	 * Le décalage du haut est en `padding` et non en `margin` : dans une
	 * colonne de blocs, une marge haute se fond avec celle du parent et
	 * disparaît. Mesuré sur la page de Sarah, Quiz Maker démarre 20 px sous
	 * le haut de sa colonne — on s'aligne dessus.
	 */
	/*
	 * Les 8 px latéraux reproduisent la marge que Quiz Maker laisse dans sa
	 * colonne : sans eux, la plaque remplissait toute la largeur et dépassait
	 * de 17 px celle du quiz voisin.
	 */
	/*
	 * Largeur : exactement le modèle de Quiz Maker, `width` plafonné par
	 * `max-width: 100%`.
	 *
	 * Mesuré le 15/08 sur une page large : Quiz Maker s'y affiche à 400 px et
	 * se centre, alors que la plaque remplissait ses 1180 px. La conclusion
	 * inscrite ici auparavant — « le réglage width de Quiz Maker n'est pas une
	 * largeur de rendu » — était fausse : dans une colonne étroite, le
	 * conteneur est simplement plus petit que le réglage, et `max-width: 100%`
	 * le rabote. Sur une page large, le réglage s'applique bel et bien.
	 *
	 * 530 px parce que **36 des 38 quiz de vocabulaire** portent ce réglage
	 * dans Quiz Maker (les deux autres sont à 400).
	 *
	 * Le calage côte à côte est préservé : dans la colonne de « S'exercer »,
	 * large de 422 à 528 px, `max-width: 100%` l'emporte et la plaque se
	 * comporte exactement comme avant.
	 */
	box-sizing: border-box;
	/*
	 * `min()` et non `width` + `max-width` : un thème de blocs impose son propre
	 * `max-width` aux enfants du contenu (645 px mesuré), ce qui annulait la
	 * seule protection contre le débordement et sortait le quiz de l'écran sur
	 * téléphone. Ici la largeur ne peut pas dépasser le conteneur, quoi que le
	 * thème déclare.
	 */
	width: min(530px, 100%);
	max-width: 100%;
	padding: 20px 8px 0;
	margin: 0 auto 30px;
	/* Repère du panneau de la carte de partage, qui se pose par-dessus. */
	position: relative;
	color: var(--mla-texte);
	font-family: 'Roboto', sans-serif;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/*
 * Aucune largeur imposée : la plaque remplit l'espace qu'on lui donne, comme
 * le fait Quiz Maker. Mesuré sur les captures de Sarah, sa carte occupe
 * 623 px lorsqu'elle est seule et 528 px dans un bloc — elle suit son
 * conteneur. Le réglage `width: 530` de Quiz Maker n'est donc pas une largeur
 * de rendu, et en faire un plafond rendait le quiz étroit et, à hauteur
 * égale, bien plus long que son voisin.
 */

.mla-quiz *,
.mla-quiz *::before,
.mla-quiz *::after {
	box-sizing: border-box;
}

.mla-quiz .mla-ar {
	font-family: 'Noto Sans Arabic', 'Roboto', sans-serif;
	direction: rtl;
	unicode-bidi: isolate;
}

/* ===== LA PLAQUE ===== */

.mla-quiz .mla-frame {
	position: relative;
	border-radius: 24px;
	padding: 26px 20px 30px;
	overflow: hidden;
	/*
	 * Aucune hauteur imposée. Chez Quiz Maker non plus : ses cartes mesurent
	 * 643 px sans titre et 711 px avec — les 68 px d'écart sont exactement une
	 * ligne de titre. La hauteur découle du contenu, le bloc ne contraint que
	 * la largeur. Un plancher chiffré ici allongerait à tort les quiz affichés
	 * seuls, qui n'ont pas de titre.
	 */
	/* Noir profond, neutre : aucune trace de brun. */
	background: radial-gradient(130% 100% at 50% -10%, var(--mla-noir-haut) 0%, var(--mla-noir-bas) 48%, var(--mla-noir) 100%);
	border: 1px solid rgba(221, 153, 51, .5);
	box-shadow:
		0 30px 70px rgba(0, 0, 0, .45),
		0 0 0 1px rgba(0, 0, 0, .6),
		/* Le filet clair du haut donne l'effet métal, sans animation. */
		inset 0 1px 0 rgba(255, 233, 184, .16),
		inset 0 0 60px rgba(221, 153, 51, .05);
}

/*
 * Liseré doré fixe. Il « respirait » auparavant : une animation infinie sur
 * `box-shadow`, donc un repaint à chaque image. C'est l'un des effets qui
 * faisaient décrocher la vidéo sur téléphone.
 */
.mla-quiz .mla-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 24px;
	pointer-events: none;
	box-shadow: inset 0 0 42px rgba(221, 153, 51, .14);
}

.mla-quiz .mla-inner {
	position: relative;
	z-index: 2;
}

/*
 * Bouton plein écran, calqué sur Quiz Maker : icône Material « fullscreen »
 * de 24 px — quatre coins formant un carré — posée à 7 px du bord haut-droit
 * de la plaque. Mesuré sur la réplique : chez Quiz Maker l'icône fait 24 × 24
 * et se tient à 7 px du haut et de la droite de son conteneur.
 *
 * D'où le `6px` et non `7px` : le décalage part du bord intérieur, sous le
 * filet doré d'un pixel, que le conteneur de Quiz Maker n'a pas. 6 + 1 = 7,
 * mesuré identique aux deux quiz côte à côte.
 *
 * Le bouton est un enfant direct de `.mla-frame`, jamais de `.mla-inner` :
 * les 26 px et 20 px de retrait de la plaque s'ajoutaient sinon au décalage,
 * et le bouton retombait sur le cadre des pastilles.
 */
.mla-quiz .mla-expand {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 4;
	width: 24px;
	height: 24px;
	display: block;
	color: var(--mla-or);
	opacity: .75;
	border: 0;
	background: none;
	padding: 0;
	line-height: 0;
	cursor: pointer;
	transition: opacity .2s;
}

.mla-quiz .mla-expand:hover,
.mla-quiz .mla-expand:focus-visible {
	opacity: 1;
}

.mla-quiz .mla-expand .mla-ico {
	display: block;
	width: 24px;
	height: 24px;
}

/* Les deux icônes permutent en plein écran, comme chez Quiz Maker. */
.mla-quiz .mla-expand .mla-ico--close { display: none; }

.mla-quiz:fullscreen .mla-expand .mla-ico--open { display: none; }
.mla-quiz:fullscreen .mla-expand .mla-ico--close { display: block; }

/* ===== ÉCRANS ===== */

.mla-quiz .mla-screen { display: none; }

/*
 * Dégagement sous le bouton plein écran. Il descend jusqu'à 31 px du haut de
 * la plaque (7 px de marge + 24 px d'icône), et la plaque a déjà 26 px de
 * retrait : 14 px de plus posent le cadre des pastilles à 40 px, soit 9 px
 * sous le bouton. Descendre en dessous de 14 px les fait se toucher.
 */
.mla-quiz .mla-screen--question { padding-top: 14px; }

.mla-quiz .mla-screen.is-on {
	display: block;
	animation: mla-rise .5s cubic-bezier(.2, .8, .2, 1);
}

@keyframes mla-rise {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

/* ===== ÉCRAN DÉPART ===== */

/*
 * L'image démarre à 106 px du haut de la carte, comme chez Quiz Maker :
 * 26 px de marge de la plaque + 72 px ici + 8 px de cadre doré. Sans ce
 * décalage, les deux quiz côte à côte n'auraient pas leur image à la même
 * hauteur.
 */
/*
 * Toutes les valeurs qui suivent viennent des captures de Sarah, divisées par
 * 1,25 : son écran est en 1920 × 1080 physique affiché en 1536 × 864, donc une
 * capture enregistre 1,25 pixel physique pour 1 pixel CSS. Sans cette
 * conversion, tout était reproduit un quart trop grand.
 *
 * 51 px en haut placent l'image à 85 px du bord de la plaque (26 de marge
 * + 51 + 8 de cadre doré), et 86 px en bas reproduisent les 117 px de vide
 * que Quiz Maker laisse sous son bouton.
 */
.mla-quiz .mla-screen--start {
	text-align: center;
	/*
	 * 62 px en bas : mesuré côte à côte avec Quiz Maker dans une vraie colonne
	 * de la page de Sarah, où sa carte fait 564 px de haut. Avec 86 px, la
	 * mienne dépassait de 24.
	 */
	padding: 51px 0 68px;
}

.mla-quiz .mla-imgwrap {
	position: relative;
	/* 300 px d'image + 2 × 8 px de cadre : la taille réelle chez Quiz Maker. */
	width: 316px;
	max-width: 100%;
	margin: 0 auto 6px;
	border-radius: 18px;
	padding: 8px;
	background: linear-gradient(145deg, rgba(221, 153, 51, .5), rgba(221, 153, 51, .08));
	box-shadow: 0 0 40px rgba(221, 153, 51, .25);
}

.mla-quiz .mla-imgwrap img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	/*
	 * Rapport natif de quiz.jpg (940 × 788). Un cadrage en 4/3 rognait
	 * l'image : elle perdait ses bords, alors que Quiz Maker l'affiche entière.
	 */
	aspect-ratio: 940 / 788;
	object-fit: cover;
}

/*
 * Ni balayage de lumière, ni étincelles.
 *
 * Le balayage était devenu une signature visuelle reconnaissable, et les
 * étincelles relevaient du même registre. L'image se suffit à elle-même dans
 * son cadre doré.
 */

.mla-quiz .mla-quiz-title {
	font-family: 'Tenor Sans', serif;
	font-size: 30px;
	line-height: 1.25;
	color: var(--mla-texte);
	margin: 16px 0 22px;
}

/* ===== BOUTON OR ===== */

.mla-quiz .mla-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: 'Tenor Sans', serif;
	font-size: 17px;
	letter-spacing: .5px;
	color: var(--mla-or);
	background: #111114;
	border: 1.5px solid var(--mla-or);
	border-radius: 12px;
	padding: 13px 32px;
	cursor: pointer;
	/* Lueur dorée fixe : elle pulsait en boucle, sans rien apporter. */
	box-shadow: 0 0 18px rgba(221, 153, 51, .3), inset 0 0 14px rgba(221, 153, 51, .14);
	transition: .25s;
}

/* au survol on reste doré, jamais de blanc (brief §10) */
.mla-quiz .mla-btn:hover,
.mla-quiz .mla-btn:focus-visible {
	color: var(--mla-or-cl);
	background: #16161a;
	box-shadow: 0 0 32px rgba(221, 153, 51, .65), inset 0 0 18px rgba(221, 153, 51, .28);
}

.mla-quiz .mla-btn--block { width: 100%; }

/*
 * Le bouton de départ occupe environ 62 % de la largeur de la plaque, comme
 * celui de Quiz Maker : 386 px sur une carte de 623, 336 sur une carte de 528.
 * Un bouton étroit au milieu d'une large carte laissait trop de vide autour
 * de lui et déséquilibrait la comparaison entre les deux quiz.
 */
.mla-quiz .mla-screen--start .mla-btn {
	width: 62%;
	max-width: 310px;
}

/*
 * `is-incomplete` a l'apparence d'un bouton désactivé mais reste cliquable :
 * c'est ce clic qui déclenche l'animation des pastilles sans réponse.
 */
.mla-quiz .mla-btn[disabled],
.mla-quiz .mla-btn.is-incomplete {
	color: #6a6152;
	border-color: #3a352b;
	background: rgba(255, 255, 255, .03);
	box-shadow: none;
	animation: none;
}

.mla-quiz .mla-btn[disabled] { cursor: not-allowed; }
.mla-quiz .mla-btn.is-incomplete { cursor: pointer; }

.mla-quiz .mla-btn.is-incomplete:hover,
.mla-quiz .mla-btn.is-incomplete:focus-visible {
	color: #6a6152;
	border-color: #3a352b;
	background: rgba(255, 255, 255, .03);
	box-shadow: none;
}

.mla-quiz .mla-center {
	text-align: center;
	margin-top: 22px;
}

/* ===== PAGINATION ===== */

.mla-quiz .mla-pagi {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	justify-content: center;
	background: rgba(0, 0, 0, .35);
	border: 1px solid rgba(221, 153, 51, .22);
	border-radius: 16px;
	padding: 12px 10px;
	margin-bottom: 6px;
}

.mla-quiz .mla-dot {
	width: 30px;
	height: 30px;
	padding: 0;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 13px;
	font-family: inherit;
	color: var(--mla-or);
	background: #0d0d10;
	border: 1px solid rgba(221, 153, 51, .5);
	box-shadow: inset 0 0 8px rgba(221, 153, 51, .18);
	cursor: pointer;
	transition: .2s;
}

.mla-quiz .mla-dot.is-ok {
	color: var(--mla-vert);
	border-color: var(--mla-vert);
	box-shadow: inset 0 0 9px rgba(87, 192, 106, .3);
}

.mla-quiz .mla-dot.is-ko {
	color: var(--mla-rouge);
	border-color: var(--mla-rouge);
	box-shadow: inset 0 0 9px rgba(226, 96, 90, .3);
}

.mla-quiz .mla-dot.is-current {
	color: #0f0f12;
	background: linear-gradient(180deg, var(--mla-or-cl), var(--mla-or));
	border-color: var(--mla-or-cl);
	box-shadow: 0 0 16px rgba(221, 153, 51, .65);
	animation: mla-pulse 2s ease-in-out infinite;
}

@keyframes mla-pulse {
	0%, 100% { box-shadow: 0 0 12px rgba(221, 153, 51, .5); }
	50%      { box-shadow: 0 0 22px rgba(221, 153, 51, .85); }
}

/* signale les questions sans réponse quand on tente de voir le résultat trop tôt */
.mla-quiz .mla-dot.is-nagging {
	animation: mla-nag .5s ease-in-out 3;
}

@keyframes mla-nag {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-4px); box-shadow: 0 0 14px rgba(221, 153, 51, .8); }
	75%      { transform: translateX(4px); box-shadow: 0 0 14px rgba(221, 153, 51, .8); }
}

.mla-quiz .mla-count {
	text-align: right;
	color: var(--mla-or-cl);
	font-size: 14px;
	margin: 8px 2px 14px;
	font-family: 'Tenor Sans', serif;
}

.mla-quiz .mla-prompt {
	text-align: center;
	font-size: 21px;
	margin: 8px 0 16px;
	color: var(--mla-texte);
}

/* ===== PRIORITÉ ABSOLUE À LA VIDÉO =====
 *
 * La plupart des animations décoratives ont été retirées ; il ne reste que la
 * pastille de la question en cours, qui porte une information. On la fige tout
 * de même pendant la lecture : elle anime `box-shadow`, donc un repaint à
 * chaque image, et c'est ce qui faisait décrocher l'image du son sur mobile.
 */
.mla-quiz.is-playing .mla-dot.is-current {
	animation: none;
	box-shadow: 0 0 16px rgba(221, 153, 51, .65);
}

/* Isole le rendu de la vidéo du reste de la page. */
.mla-quiz .mla-video {
	contain: paint;
}

/* ===== VIDÉO ===== */

.mla-quiz .mla-video {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, #1c1c20, #0a0a0c);
	border: 1px solid rgba(221, 153, 51, .35);
	margin-bottom: 16px;
	box-shadow: inset 0 0 30px rgba(0, 0, 0, .5);
}

/* le lecteur maison apporte son propre cadre : on retire celui du quiz, sinon
   deux bordures dorées se superposent */
.mla-quiz .mla-video--player {
	aspect-ratio: auto;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

/* l'iframe est créée puis détruite par le script : elle n'existe jamais en double */
.mla-quiz .mla-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.mla-quiz .mla-video-missing {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 16px;
	text-align: center;
	color: var(--mla-doux);
	font-size: 14px;
	font-style: italic;
}

/* ===== RÉPONSES ===== */

.mla-quiz .mla-answers {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mla-quiz .mla-ans {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 12px;
	cursor: pointer;
	width: 100%;
	text-align: left;
	background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .25));
	border: 1px solid rgba(221, 153, 51, .35);
	color: var(--mla-texte);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.45;
	transition: .18s;
}

.mla-quiz .mla-ans:hover:not([disabled]),
.mla-quiz .mla-ans:focus-visible {
	border-color: var(--mla-or);
	box-shadow: 0 0 14px rgba(221, 153, 51, .28);
	transform: translateY(-1px);
}

.mla-quiz .mla-ans[disabled] { cursor: default; }

/*
 * Question répondue : plus aucune transition sur les trois signaux qui
 * basculent ensemble — la mauvaise réponse, la bonne, et le bouton du bas.
 *
 * Ils avaient des durées différentes, 0,18 s et 0,25 s. L'écart ne se voit pas
 * sur un ordinateur, mais sur un téléphone occupé à peindre une vidéo, chacun
 * tombait dans une image différente : l'élève voyait les trois arriver l'un
 * après l'autre. Sans transition, ils apparaissent dans la même image.
 */
.mla-quiz .mla-screen--question.is-answered .mla-ans,
.mla-quiz .mla-screen--question.is-answered .mla-ans .mla-radio,
.mla-quiz .mla-screen--question.is-answered .mla-btn {
	transition: none;
}

.mla-quiz .mla-radio {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--mla-or);
	flex: none;
}

.mla-quiz .mla-ans.is-right {
	background: var(--mla-vert-fond);
	border-color: var(--mla-vert);
	box-shadow: 0 0 16px rgba(87, 192, 106, .25);
}

.mla-quiz .mla-ans.is-right .mla-radio {
	border-color: var(--mla-vert);
	background: var(--mla-vert);
}

.mla-quiz .mla-ans.is-wrong {
	background: var(--mla-rouge-fond);
	border-color: var(--mla-rouge);
	box-shadow: 0 0 16px rgba(226, 96, 90, .22);
}

.mla-quiz .mla-ans.is-wrong .mla-radio {
	border-color: var(--mla-rouge);
	background: var(--mla-rouge);
}

.mla-quiz .mla-mark {
	margin-left: auto;
	font-size: 18px;
}

.mla-quiz .mla-remark {
	margin: 16px 6px 4px;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 16.5px;
	color: #d8c9a6;
	text-align: center;
	line-height: 1.5;
}

.mla-quiz .mla-remark .mla-ar {
	font-style: normal;
	color: var(--mla-or-cl);
	font-weight: 600;
	font-size: 17px;
}

/* messages facultatifs : rien ne s'affiche si Sarah n'a rien saisi */
.mla-quiz .mla-message {
	margin: 14px 6px 0;
	text-align: center;
	font-size: 15px;
	padding: 10px 14px;
	border-radius: 10px;
}

.mla-quiz .mla-message--correct {
	color: #bfe6c6;
	background: var(--mla-vert-fond);
	border: 1px solid rgba(87, 192, 106, .4);
}

.mla-quiz .mla-message--wrong {
	color: #f0c4c0;
	background: var(--mla-rouge-fond);
	border: 1px solid rgba(226, 96, 90, .4);
}

/* ===== RÉSULTAT ===== */

.mla-quiz .mla-result { text-align: center; }

.mla-quiz .mla-confetti {
	position: relative;
	height: 104px;
	margin: 8px auto 2px;
	max-width: 340px;
	overflow: hidden;
	pointer-events: none;
}

.mla-quiz .mla-confetti i {
	position: absolute;
	top: -16px;
	width: 8px;
	height: 13px;
	border-radius: 2px;
	opacity: 0;
	animation: mla-fall 2.6s linear infinite;
}

@keyframes mla-fall {
	0%   { transform: translateY(-16px) rotate(0); opacity: 0; }
	12%  { opacity: 1; }
	88%  { opacity: 1; }
	100% { transform: translateY(116px) rotate(300deg); opacity: 0; }
}

.mla-quiz .mla-bravo {
	font-family: 'Tenor Sans', serif;
	font-size: 34px;
	margin: 2px 0 8px;
	background: linear-gradient(100deg, #DD9933 0%, #DD9933 38%, #ffe3a0 50%, #DD9933 62%, #DD9933 100%);
	background-size: 220% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: mla-bravo-shine 3.8s ease-in-out infinite;
}

@keyframes mla-bravo-shine {
	0%        { background-position: 130% 0; }
	55%, 100% { background-position: -30% 0; }
}

.mla-quiz .mla-score {
	font-size: 15px;
	color: var(--mla-doux);
	margin-bottom: 18px;
}

.mla-quiz .mla-score b {
	font-family: 'Tenor Sans', serif;
	font-size: 26px;
}

.mla-quiz .mla-share {
	color: var(--mla-doux);
	font-size: 13px;
	margin: 8px 0 10px;
}

.mla-quiz .mla-share-row {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.mla-quiz .mla-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-family: inherit;
	color: var(--mla-texte);
	border: 1px solid rgba(221, 153, 51, .4);
	background: rgba(0, 0, 0, .4);
	border-radius: 10px;
	padding: 8px 14px;
	cursor: pointer;
	text-decoration: none;
	transition: .15s;
}

.mla-quiz .mla-chip:hover,
.mla-quiz .mla-chip:focus-visible {
	border-color: var(--mla-or);
	box-shadow: 0 0 12px rgba(221, 153, 51, .35);
	transform: translateY(-1px);
	color: var(--mla-texte);
}

.mla-quiz .mla-chip .mla-ic {
	width: 21px;
	height: 21px;
	border-radius: 5px;
	display: grid;
	place-items: center;
	color: #fff;
	line-height: 1;
	flex: none;
}

/*
 * Le logo occupe 14 px des 21 px de la pastille : le reste fait la marge qui
 * l'empêche de toucher les bords arrondis. `currentColor` lui donne la couleur
 * du carré — blanche partout, sombre sur le jaune de Snapchat.
 */
.mla-quiz .mla-chip .mla-ic svg {
	display: block;
	width: 14px;
	height: 14px;
}

/*
 * Les quatre dernières pastilles attendent derrière « Plus ». Elles sont déjà
 * dans le document : « Plus » ne fait que les dévoiler, rien n'est reconstruit.
 */
.mla-quiz .mla-share-box .mla-share-row { margin-bottom: 8px; }

.mla-quiz .mla-chip--plus { display: none; }

.mla-quiz .mla-share-row.is-open .mla-chip--plus { display: inline-flex; }

.mla-quiz .mla-plus {
	display: block;
	margin: 0 auto 20px;
	font-family: inherit;
	font-size: 12px;
	color: var(--mla-doux);
	background: none;
	border: 0;
	padding: 4px 10px;
	cursor: pointer;
	text-decoration: underline;
	transition: color .15s;
}

.mla-quiz .mla-plus:hover,
.mla-quiz .mla-plus:focus-visible { color: var(--mla-or); }

/* ===== PANNEAU DE LA CARTE DE PARTAGE ===== */

/*
 * `fixed` et non `absolute` : le panneau se centre sur **l'écran**, pas sur la
 * plaque.
 *
 * Défaut relevé par Sarah le 15/08 sur téléphone : la plaque y fait plus d'un
 * écran de haut, si bien que son centre tombait loin sous le regard. L'élève
 * voyait l'écran s'assombrir, croyait à un chargement, et devait descendre pour
 * découvrir sa carte — quand elle y pensait.
 *
 * `fixed` reste juste en plein écran : l'élément passé en plein écran devient
 * le repère des positions fixes, le panneau le suit donc toujours.
 *
 * `overflow: auto` pour les très petits écrans, où la carte et les boutons
 * peuvent dépasser en hauteur.
 */
.mla-quiz .mla-card-fond {
	position: fixed;
	inset: 0;
	/* Au-dessus des en-têtes collants du thème, qui montent haut. */
	z-index: 99999;
	display: grid;
	place-items: center;
	padding: 16px;
	/* Assombri à 88 % : ce qui reste autour de la plaque ne doit plus attirer l'œil. */
	background: rgba(0, 0, 0, .88);
	overflow: auto;
}

/*
 * Le panneau était transparent : le voile noir à 80 % laissait passer le
 * récapitulatif des erreurs, et le message se lisait par-dessus un autre texte.
 * Lisible de justesse pour Sarah, pénible pour une élève qui voit mal.
 *
 * Il devient donc une plaque **opaque**, reprenant le noir et le filet doré du
 * quiz : plus rien ne transparaît, et l'œil n'a qu'une chose à lire.
 */
.mla-quiz .mla-card {
	/*
	 * Largeur ferme, et non `100%` : dans une grille centrée, un `100%` se
	 * réduit au contenu, si bien que les marges intérieures rognaient l'aperçu.
	 *
	 * 320 px, parce que c'est ce qu'il faut à « Télécharger la carte » pour
	 * tenir sur une seule ligne : le bouton se dimensionne sur son texte, et
	 * 17 px de Tenor Sans plus 64 px de marges intérieures demandent environ
	 * 255 px. À 260, la phrase se coupait en deux — signe que tout le contenu
	 * y était comprimé.
	 *
	 * `max-width: 100%` protège les écrans étroits : 320 plus les 32 px de
	 * marge du voile tiennent dans 375 px, la largeur d'un téléphone courant.
	 */
	width: 320px;
	max-width: 100%;
	text-align: center;
	background: var(--mla-noir-haut);
	border: 1px solid rgba(221, 153, 51, .5);
	border-radius: 20px;
	padding: 20px 16px 16px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}

.mla-quiz .mla-card-vue {
	font-size: 12px;
	color: var(--mla-doux);
	min-height: 70px;
	margin-bottom: 14px;
}

/*
 * L'aperçu reste petit volontairement : au format 9:16, occuper toute la
 * largeur de la plaque donnerait 615 px de haut et enterrerait le
 * récapitulatif des erreurs, qui est la partie qui fait progresser.
 */
.mla-quiz .mla-card-img {
	display: block;
	width: 100%;
	max-width: 190px;
	height: auto;
	margin: 0 auto;
	border-radius: 10px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}

.mla-quiz .mla-card-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.mla-quiz .mla-card-envoyer[disabled] {
	opacity: .45;
	cursor: default;
}

/*
 * Sur un appareil qui ne sait pas transmettre de fichier, la carte ne peut pas
 * accompagner le message : on l'écrit, plutôt que de laisser l'élève croire
 * qu'elle est partie.
 */
.mla-quiz .mla-card-note {
	font-size: 11px;
	line-height: 1.45;
	color: var(--mla-doux);
	margin: 0 0 12px;
	/* Les retours à la ligne écrits dans le texte sont respectés. */
	white-space: pre-line;
}

.mla-quiz .mla-card-annuler {
	font-family: inherit;
	font-size: 12px;
	color: var(--mla-doux);
	background: none;
	border: 0;
	padding: 4px 10px;
	cursor: pointer;
	text-decoration: underline;
}

.mla-quiz .mla-card-annuler:hover,
.mla-quiz .mla-card-annuler:focus-visible { color: var(--mla-or); }

.mla-quiz .mla-bar {
	height: 30px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(221, 153, 51, .35);
	overflow: hidden;
	position: relative;
	margin: 6px 0 24px;
}

/*
 * Le remplissage est piloté par une transition sur `width`, déclenchée depuis
 * le script. Une animation @keyframes ne convenait pas : la largeur d'arrivée
 * dépend du score, donc du contenu, et `!important` est ignoré à l'intérieur
 * d'un @keyframes — c'est ce qui empêchait la barre de se remplir.
 */
.mla-quiz .mla-bar-fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	border-radius: 999px;
	/* Dégradé métallique : c'est le reflet qui fait l'or, pas la teinte seule. */
	background: linear-gradient(180deg, var(--mla-or-lum) 0%, var(--mla-or-cl) 26%, var(--mla-or) 60%, var(--mla-or-f) 100%);
	transition: width 1.5s cubic-bezier(.2, .8, .2, 1);
}

/*
 * Le score est posé au centre de la barre entière, pas à l'intérieur du
 * remplissage : sous un score faible, la partie dorée est trop étroite pour
 * contenir le texte, qui se retrouvait rogné.
 */
.mla-quiz .mla-bar-label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: var(--mla-texte);
	text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
	pointer-events: none;
}

/* ===== RÉCAP DES ERREURS ===== */

.mla-quiz .mla-recap {
	margin-top: 28px;
	text-align: left;
}

.mla-quiz .mla-recap h3 {
	font-family: 'Tenor Sans', serif;
	font-size: 14px;
	color: var(--mla-or-cl);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	border-bottom: 1px solid rgba(221, 153, 51, .3);
	padding-bottom: 8px;
	margin: 0 0 14px;
}

.mla-quiz .mla-err {
	background: rgba(0, 0, 0, .3);
	border: 1px solid rgba(221, 153, 51, .18);
	border-left: 3px solid var(--mla-rouge);
	border-radius: 10px;
	padding: 13px 15px;
	margin-bottom: 12px;
}

.mla-quiz .mla-err .mla-q {
	font-family: 'Tenor Sans', serif;
	color: var(--mla-doux);
	font-size: 13px;
	margin-bottom: 8px;
}

.mla-quiz .mla-err .mla-line {
	font-size: 14px;
	margin: 3px 0;
}

.mla-quiz .mla-err .mla-you { color: #f0c4c0; }
.mla-quiz .mla-err .mla-good { color: #bfe6c6; }

.mla-quiz .mla-err .mla-rk {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	color: var(--mla-doux);
	font-size: 14.5px;
	margin-top: 8px;
}

.mla-quiz .mla-notice {
	margin-top: 16px;
	font-size: 13px;
	color: var(--mla-doux);
	font-style: italic;
	text-align: center;
}

/* ===== PLEIN ÉCRAN ===== */

/*
 * ⚠️ **Pas de centrage vertical ici.** La plaque était centrée dans une grille ;
 * dès qu'elle dépasse la hauteur de l'écran, elle déborde des deux côtés à la
 * fois, et le débordement du haut est **inatteignable au défilement**. Le quiz
 * apparaissait coupé en haut et en bas, et le bouton de sortie, posé en haut de
 * la plaque, devenait hors de portée — on ne pouvait plus quitter le plein
 * écran. Relevé par Sarah le 16/08.
 *
 * On empile donc depuis le haut, et on défile.
 */
.mla-quiz:fullscreen,
.mla-quiz:-webkit-full-screen {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 20px;
	overflow-y: auto;
	background: #000;
	display: block;
}

.mla-quiz:fullscreen .mla-frame {
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
}

/*
 * Le bouton de sortie **ne bouge pas** : il reste au coin haut-droit de la
 * plaque, là où il était avant le plein écran.
 *
 * Il avait été collé au coin de l'écran, ce qui garantissait qu'on le trouve
 * toujours — mais Sarah ne l'a pas vu : le regard le cherche à l'endroit qu'il
 * occupait, pas ailleurs. Un bouton qui déménage se cherche. Depuis que la
 * plaque s'empile par le haut, il est de toute façon visible dès qu'on remonte,
 * et la touche Échap ferme le plein écran à tout moment.
 */

/* ===== MOBILE (prioritaire : la majorité des élèves) ===== */

@media (max-width: 600px) {
	/* Les 8 px latéraux servaient à s'aligner sur Quiz Maker côte à côte : il
	   n'y a pas de côte à côte sur téléphone. */
	.mla-quiz {
		margin: 18px auto;
		padding-left: 0;
		padding-right: 0;
	}

	.mla-quiz .mla-frame {
		border-radius: 18px;
		padding: 20px 14px 24px;
	}

	/*
	 * La vidéo va d'un bord à l'autre de la plaque. Sur un petit écran chaque
	 * pixel compte : le bandeau de titre que YouTube pose par-dessus occupe une
	 * part d'autant plus grande que la vidéo est petite.
	 */
	.mla-quiz .mla-video {
		width: auto;
		margin-left: -14px;
		margin-right: -14px;
		border-left: 0;
		border-right: 0;
		border-radius: 0;
	}

	/*
	 * Sur téléphone, plus de quiz côte à côte : le vide du bas n'a plus de
	 * raison d'être et ne ferait que du défilement en trop.
	 */
	.mla-quiz .mla-screen--start { padding: 16px 0 8px; }

	.mla-quiz .mla-imgwrap { width: 88%; }
	.mla-quiz .mla-quiz-title { font-size: 24px; }
	.mla-quiz .mla-prompt { font-size: 18px; }
	.mla-quiz .mla-bravo { font-size: 28px; }

	.mla-quiz .mla-dot {
		width: 27px;
		height: 27px;
		font-size: 12px;
	}

	.mla-quiz .mla-pagi { gap: 6px; padding: 10px 8px; }

	.mla-quiz .mla-ans {
		padding: 13px 14px;
		font-size: 15px;
	}

	/* la cible tactile reste confortable */
	.mla-quiz .mla-btn {
		padding: 14px 26px;
		width: 100%;
	}
}

/* ===== ANIMATIONS RÉDUITES ===== */

@media (prefers-reduced-motion: reduce) {
	.mla-quiz *,
	.mla-quiz *::before,
	.mla-quiz *::after {
		animation: none !important;
		transition: none !important;
	}

	/*
	 * La transition étant coupée ci-dessus, la barre saute directement à sa
	 * largeur finale : le score reste affiché, simplement sans remplissage animé.
	 */

	.mla-quiz .mla-confetti { display: none; }
}