/* Module de quiz montreal-tutor.com — autonome, aucune dépendance.
   Charte : rouge #cc2835, Montserrat (titres) / Roboto (texte), comme le site. */

.mtq {
  --mtq-red: #cc2835;
  --mtq-red-dark: #a51f2a;
  --mtq-red-deep: #87141d;
  --mtq-red-bright: #e8505e;
  --mtq-red-soft: #fdf1f2;
  /* Neutres chauds, accordés à mt-site.css : un gris bleuté à côté d'un rouge
     chaud donne l'impression d'un formulaire d'administration. */
  --mtq-ink: #1f1a1d;
  --mtq-muted: #6b6269;          /* 5,6:1 sur blanc */
  --mtq-line: #e9e3e5;
  --mtq-line-soft: #f2eded;
  --mtq-paper: #faf7f7;
  --mtq-bg: #ffffff;
  --mtq-ok: #14663f;             /* assombri : 6,3:1 sur blanc, AA large marge */
  --mtq-ok-soft: #e7f4ec;
  --mtq-ok-line: #bfe2cd;
  --mtq-no: #a8221b;             /* assombri : 6,6:1 sur blanc */
  --mtq-no-soft: #fdeceb;
  --mtq-no-line: #f3cdc9;

  --mtq-r-xs: 8px;
  --mtq-r-sm: 12px;
  --mtq-radius: 16px;
  --mtq-r-lg: 22px;

  --mtq-shadow: 0 1px 2px rgba(40, 20, 25, .05), 0 6px 16px rgba(40, 20, 25, .06);
  --mtq-shadow-lg: 0 2px 4px rgba(40, 20, 25, .05), 0 16px 40px rgba(40, 20, 25, .11);
  --mtq-ease: cubic-bezier(.22, .9, .3, 1);

  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  color: var(--mtq-ink);
  line-height: 1.68;
  max-width: 780px;
  margin: 0 auto;
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
}

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

.mtq h2,
.mtq h3 {
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
  color: #1a1a1a;
  line-height: 1.3;
  margin: 0 0 .4em;
}
.mtq h2 { font-size: 1.6em; font-weight: 700; }
.mtq h3 { font-size: 1.12em; font-weight: 700; }
.mtq p { margin: 0 0 1em; }
.mtq p:last-child { margin-bottom: 0; }

/* ---------- En-tête : le bandeau d'entrée ----------
   Repris de la prévisualisation video.khalfi.ca (.pv-hero), où il portait tout le
   cachet du module. Les pages de quiz n'en avaient jamais eu : elles s'ouvraient sur
   le bandeau de titre par défaut de Divi, en typographie du thème, qui répétait le
   titre du module juste en dessous. Le bandeau EST maintenant l'en-tête du module,
   il porte le <h1> de la page, et Divi n'imprime plus le sien.
   La halo rouge en ::after reste décoratif : aucun texte ne repose dessus. */
.mtq-head {
  position: relative; overflow: hidden;
  border-radius: 26px; color: #fff;
  background: radial-gradient(130% 150% at 88% -10%, #4a2b33 0%, #241c21 45%, #141215 100%);
  padding: 2.4rem 1.6rem 2rem;
  margin: 0 0 1.4rem;
  box-shadow: 0 20px 50px rgba(30, 14, 18, .3);
  isolation: isolate;
}
/* Deux halos plutôt qu'un — le rouge chaud en haut à droite, un violet plus
   faible en bas à gauche. Un halo seul se lit comme une tache ; deux se lisent
   comme un éclairage. Décoratifs : aucun texte ne repose dessus. */
.mtq-head::after {
  content: ""; position: absolute; right: -130px; top: -140px;
  width: 340px; height: 340px; border-radius: 50%;
  background: var(--mtq-red); opacity: .34; filter: blur(52px);
  pointer-events: none; z-index: -1;
}
.mtq-head::before {
  content: ""; position: absolute; left: -110px; bottom: -150px;
  width: 300px; height: 300px; border-radius: 50%;
  background: #7a3b8c; opacity: .2; filter: blur(60px);
  pointer-events: none; z-index: -1;
}
/* Tout le contenu passe au-dessus des halos. */
.mtq-head > * { position: relative; z-index: 1; }

.mtq-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
  font-size: .7em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #ffb3ba; margin: 0 0 .85rem;
}
.mtq-eyebrow::before {
  content: ""; width: 1.6rem; height: 2px; border-radius: 2px; flex: none;
  background: linear-gradient(90deg, var(--mtq-red), transparent);
}
.mtq .mtq-head .mtq-title {
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
  font-weight: 800; letter-spacing: -.028em; color: #fff;
  font-size: clamp(1.75rem, 6.4vw, 2.6rem); line-height: 1.08;
  margin: 0 0 1rem; padding: 0; text-shadow: none;
  /* Sans ça, « Quiz sur les fonctions quadratiques — Secondaire 5 » laisse
     « — Secondaire 5 » seul sur la dernière ligne à 390 px. Ignoré sans dommage
     par les navigateurs qui ne connaissent pas la propriété. */
  text-wrap: balance;
}
.mtq-head .mtq-tags { margin: 0; gap: .45rem; }

/* L'intro ne tient pas dans le bandeau : ~900 caractères, elle énumère les
   douze questions une par une et c'est voulu (correction d'audit, voir NOTES.md).
   Elle se lit donc juste en dessous. Mais en simple texte gris bordé d'un filet,
   elle formait un mur indifférencié de ~630 px avant la première question.
   Elle devient ici une note posée : fond chaud, coin supérieur gauche rattaché au
   bandeau par le filet rouge, et une lettrine qui donne un point d'entrée à l'œil.
   Pas un mot n'est retiré — c'est de la mise en page, pas de la coupe. */
.mtq-intro--lead {
  position: relative;
  background: linear-gradient(170deg, #fff8f8, var(--mtq-paper) 70%);
  border: 1px solid var(--mtq-line);
  border-left: 4px solid var(--mtq-red);
  border-radius: 0 var(--mtq-radius) var(--mtq-radius) 0;
  padding: 1.15rem 1.25rem;
  margin: 0 0 1.7rem;
  /* Un cran plus petit et plus serré que le corps des questions : l'intro est
     longue (~900 caractères, l'énumération des douze questions, voulue), et elle
     doit rester une introduction — pas peser plus lourd que la question 1. */
  font-size: .92em;
  line-height: 1.66;
  color: var(--mtq-ink);
  box-shadow: var(--mtq-shadow);
}
/* La lettrine : deux lignes de haut, en Montserrat rouge. Elle transforme un
   pavé en paragraphe de magazine, et ne coûte aucune balise. */
.mtq-intro--lead::first-letter {
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
  font-weight: 800; font-size: 2.6em; line-height: .88;
  float: left; margin: .06em .12em 0 0; color: var(--mtq-red);
}
/* Les pastilles sur fond sombre : le rouge pâle d'origine y serait illisible. */
.mtq-head .mtq-tag {
  background: rgba(255, 255, 255, .10); color: #ffc2c7;
  border-color: rgba(255, 255, 255, .24);
}
.mtq-head .mtq-tag--count {
  background: rgba(255, 255, 255, .06); color: #c9c9d2;
  border-color: rgba(255, 255, 255, .16);
}

@media (max-width: 480px) {
  .mtq-head { border-radius: 16px; padding: 1.6rem 1.15rem 1.4rem; }
}

.mtq-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .8rem; padding: 0; list-style: none; }
.mtq-tag {
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
  font-size: .7em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: .36em .85em; border-radius: 999px; white-space: nowrap;
  background: var(--mtq-red-soft); color: var(--mtq-red-dark);
  border: 1px solid rgba(204, 40, 53, .22);
}
.mtq-tag--count { background: #f4f4f4; color: #4a4a4a; border-color: var(--mtq-line); }
.mtq-intro { color: var(--mtq-muted); }

/* ---------- Barre de progression (collante) ---------- */
/* Elle était une ligne grise de 8 px qu'on ne voyait pas. Elle devient une
   barre posée : fond blanc opaque avec ombre portée quand elle colle en haut,
   piste plus haute, remplissage en dégradé, et le compte dans une pastille
   chiffrée plutôt qu'en gris perdu au bout. */
.mtq-progress {
  position: sticky; top: 0; z-index: 5;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(150%) blur(10px);
  border: 1px solid var(--mtq-line);
  border-radius: 999px;
  padding: .5rem .55rem .5rem 1rem;
  margin: 0 0 1.5rem;
  display: flex; align-items: center; gap: .9rem;
  box-shadow: var(--mtq-shadow);
}
/* Une fois l'écran de résultat construit, la barre n'a plus rien à suivre : elle
   reste collée en haut et recouvre le bilan qu'on fait défiler dessous. Vu à la
   capture en production. Elle redescend donc dans le flux — elle garde son
   « 12 / 12 », qui est le bon dernier mot. Les navigateurs sans `:has()` gardent
   simplement l'ancien comportement : aucune régression possible. */
.mtq:has(.mtq-result) .mtq-progress { position: static; }

.mtq-progress-track {
  flex: 1; height: 10px; border-radius: 999px;
  background: var(--mtq-line-soft);
  box-shadow: inset 0 1px 2px rgba(40, 20, 25, .08);
  overflow: hidden;
}
.mtq-progress-fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--mtq-red-dark), var(--mtq-red) 45%, var(--mtq-red-bright));
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(204, 40, 53, .45);
  transition: width .5s var(--mtq-ease);
}
.mtq-progress-label {
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
  font-size: .8em; font-weight: 800; color: var(--mtq-red-dark);
  white-space: nowrap; font-variant-numeric: tabular-nums;
  background: var(--mtq-red-soft); border: 1px solid rgba(204, 40, 53, .18);
  border-radius: 999px; padding: .28em .8em; letter-spacing: .02em;
}

/* ---------- Question ---------- */
.mtq-q {
  position: relative; overflow: hidden;
  background: var(--mtq-bg);
  border: 1px solid var(--mtq-line);
  border-radius: var(--mtq-radius);
  box-shadow: var(--mtq-shadow);
  padding: 1.5rem 1.5rem 1.4rem;
  margin: 0 0 1.25rem;
  transition: border-color .3s ease, box-shadow .3s ease;
}
/* Un liseré de statut sur le flanc gauche, plutôt qu'une simple teinte de
   bordure : corrigée juste ou fausse, la carte se repère en survolant la page
   du pouce, sans lire. */
.mtq-q::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--mtq-q-accent, transparent);
  transition: background .3s ease;
}
.mtq-q[data-state="ok"] { --mtq-q-accent: var(--mtq-ok); border-color: var(--mtq-ok-line); }
.mtq-q[data-state="no"] { --mtq-q-accent: var(--mtq-no); border-color: var(--mtq-no-line); }
.mtq-q[data-state] { box-shadow: var(--mtq-shadow-lg); }

.mtq-num {
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
  font-size: .68em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mtq-red-dark);
  display: inline-block; margin-bottom: .6rem;
  background: var(--mtq-red-soft); border: 1px solid rgba(204, 40, 53, .18);
  border-radius: 999px; padding: .32em .85em;
}
.mtq-q[data-state="ok"] .mtq-num {
  color: var(--mtq-ok); background: var(--mtq-ok-soft); border-color: var(--mtq-ok-line);
}
.mtq-q[data-state="no"] .mtq-num {
  color: var(--mtq-no); background: var(--mtq-no-soft); border-color: var(--mtq-no-line);
}
.mtq .mtq-q h3 { font-size: 1.18em; letter-spacing: -.012em; margin: 0 0 .5rem; text-wrap: pretty; }
/* La compétence : une étiquette discrète, pas une ligne de texte perdue. */
.mtq-skill {
  font-size: .78em; color: var(--mtq-muted); margin: 0 0 1.1rem;
  padding-bottom: .9rem; border-bottom: 1px dashed var(--mtq-line);
}

/* ---------- Visuel SVG ---------- */
.mtq-figure { margin: 0 0 1.1rem; }
.mtq-figure svg { width: 100%; height: auto; max-width: 420px; display: block; }
.mtq-figure figcaption { font-size: .82em; color: var(--mtq-muted); margin-top: .35rem; }

/* ---------- Choix multiples ---------- */
.mtq-choices { border: 0; margin: 0; padding: 0; }
.mtq-choices legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mtq-choice { display: block; margin: 0 0 .6rem; }
.mtq-choice:last-child { margin-bottom: 0; }
.mtq-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mtq-choice label {
  position: relative;
  display: flex; align-items: center; gap: .85rem;
  /* min-height : 52 px de cible tactile. La majorité du trafic est au
     téléphone, et un choix de maths se rate au pouce plus vite qu'un lien. */
  min-height: 52px;
  padding: .75rem 1rem;
  border: 1.5px solid var(--mtq-line); border-radius: var(--mtq-r-sm);
  cursor: pointer; background: #fff;
  transition: background .2s ease, border-color .2s ease,
              transform .16s var(--mtq-ease), box-shadow .2s ease;
}
.mtq-q:not(.is-locked) .mtq-choice label:hover {
  border-color: rgba(204, 40, 53, .45); background: #fffafa;
  transform: translateX(3px); box-shadow: var(--mtq-shadow);
}
.mtq-choice label:active { transform: translateX(1px) scale(.994); }
.mtq-choice input:focus-visible + label { outline: 3px solid var(--mtq-red); outline-offset: 2px; }

.mtq-bullet {
  flex: 0 0 auto; width: 1.85em; height: 1.85em; border-radius: 10px;
  border: 1.5px solid #cfc5c8; background: var(--mtq-paper);
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
  font-size: .82em; font-weight: 800; color: var(--mtq-muted);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--mtq-ease);
}
.mtq-q:not(.is-locked) .mtq-choice label:hover .mtq-bullet { border-color: var(--mtq-red); color: var(--mtq-red-dark); }
.mtq-choice input:checked + label {
  border-color: var(--mtq-red); background: var(--mtq-red-soft);
  box-shadow: 0 0 0 3px rgba(204, 40, 53, .12);
}
.mtq-choice input:checked + label .mtq-bullet {
  background: var(--mtq-red); border-color: var(--mtq-red); color: #fff;
  transform: scale(1.06);
}

/* Après correction. Le sélecteur doit être plus spécifique que
   « input:checked + label » ci-dessus, sinon le bon choix resterait rouge
   au lieu de passer au vert. */
.mtq-choice label.mtq-is-ok,
.mtq-choice input:checked + label.mtq-is-ok {
  border-color: var(--mtq-ok); background: var(--mtq-ok-soft);
  box-shadow: 0 0 0 3px rgba(20, 102, 63, .13);
}
.mtq-choice label.mtq-is-ok .mtq-bullet,
.mtq-choice input:checked + label.mtq-is-ok .mtq-bullet { background: var(--mtq-ok); border-color: var(--mtq-ok); color: #fff; }
.mtq-choice label.mtq-is-no,
.mtq-choice input:checked + label.mtq-is-no {
  border-color: var(--mtq-no); background: var(--mtq-no-soft);
  box-shadow: 0 0 0 3px rgba(168, 34, 27, .12);
}
.mtq-choice label.mtq-is-no .mtq-bullet,
.mtq-choice input:checked + label.mtq-is-no .mtq-bullet { background: var(--mtq-no); border-color: var(--mtq-no); color: #fff; }

/* Le crochet et la croix sont des SVG en ligne, pas des caractères : les polices
   servies ici sont des sous-ensembles latins, et ✓ / ✗ y tombent en carré vide
   sur une partie des appareils (la leçon du cadenas, voir NOTES.md). Un SVG
   s'affiche partout, à la couleur qu'on lui donne.
   La couleur reste doublée par un mot dans le verdict et par la région aria-live :
   rien ici ne repose sur la seule couleur. */
.mtq-choice label.mtq-is-ok::after,
.mtq-choice label.mtq-is-no::after {
  content: ""; flex: 0 0 auto; margin-left: auto;
  width: 1.45em; height: 1.45em; border-radius: 50%;
  background-repeat: no-repeat; background-position: center;
  background-size: .9em .9em;
  animation: mtq-pop .34s var(--mtq-ease) both;
}
.mtq-choice label.mtq-is-ok::after {
  background-color: var(--mtq-ok);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l5 5L19 7'/%3E%3C/svg%3E");
}
.mtq-choice label.mtq-is-no::after {
  background-color: var(--mtq-no);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

/* Un choix corrigé ne doit pas paraître grisé même si la saisie est verrouillée. */
.mtq-q.is-locked .mtq-choice label { cursor: default; }
.mtq-q.is-locked .mtq-choice input:disabled + label { opacity: 1; }
/* Les choix ni bons ni choisis s'effacent un peu : l'œil va droit aux deux qui
   comptent. Ils restent parfaitement lisibles — c'est un retrait, pas un voile. */
.mtq-q.is-locked .mtq-choice label:not(.mtq-is-ok):not(.mtq-is-no) {
  border-color: var(--mtq-line-soft); background: #fdfcfc; color: var(--mtq-muted);
}

/* ---------- Réponse à saisir ---------- */
.mtq-numeric { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.mtq-numeric input[type="text"] {
  font: inherit; width: 9.5rem; padding: .6rem .8rem;
  border: 1.5px solid #c4c4c4; border-radius: 10px; background: #fff; color: inherit;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.mtq-numeric input[type="text"]:focus-visible {
  outline: none; border-color: var(--mtq-red); box-shadow: 0 0 0 3px rgba(204, 40, 53, .18);
}
.mtq-unit { font-weight: 700; color: var(--mtq-muted); }
.mtq-btn {
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
  font-size: .86em; font-weight: 700; letter-spacing: .02em;
  min-height: 44px;
  padding: .68rem 1.45rem; border-radius: 999px; border: 1.5px solid var(--mtq-red);
  background: linear-gradient(135deg, var(--mtq-red-bright), var(--mtq-red) 55%, var(--mtq-red-dark));
  color: #fff; cursor: pointer;
  box-shadow: 0 3px 10px rgba(204, 40, 53, .26);
  transition: background .2s ease, transform .18s var(--mtq-ease), box-shadow .2s ease, filter .18s ease;
}
.mtq-btn:hover { filter: saturate(112%); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(204, 40, 53, .36); }
.mtq-btn:active { transform: translateY(0); }
.mtq-btn:focus-visible { outline: 3px solid var(--mtq-red); outline-offset: 3px; }
.mtq-btn--ghost {
  background: #fff; color: var(--mtq-red);
  box-shadow: none; border-color: rgba(204, 40, 53, .45);
}
.mtq-btn--ghost:hover {
  background: var(--mtq-red-soft); color: var(--mtq-red-dark);
  border-color: var(--mtq-red); box-shadow: var(--mtq-shadow);
}
.mtq-numeric input[readonly] { background: #f6f6f6; color: var(--mtq-muted); }

/* ---------- Verdict ---------- */
.mtq-verdict {
  display: flex; align-items: center; gap: .6rem;
  font-family: 'Montserrat', Helvetica, Arial, sans-serif; font-weight: 700; font-size: .95em;
  margin-top: 1.05rem; padding: .7rem 1rem; border-radius: var(--mtq-r-sm);
  border: 1px solid transparent;
  animation: mtq-pop .32s cubic-bezier(.2, .9, .3, 1.2) both;
}
.mtq-verdict[data-v="ok"] { background: var(--mtq-ok-soft); color: var(--mtq-ok); border-color: var(--mtq-ok-line); }
.mtq-verdict[data-v="no"] { background: var(--mtq-no-soft); color: var(--mtq-no); border-color: var(--mtq-no-line); }
/* Le script pose ✓ / ✗ dans cette pastille. Ces deux caractères sont hors du
   sous-ensemble latin de nos polices et tombent en carré vide sur une partie des
   appareils. On masque donc le caractère et on redessine le signe en SVG, tout en
   gardant l'élément : le balisage du script n'a pas à changer. */
.mtq-verdict-icon {
  flex: 0 0 auto; width: 1.5em; height: 1.5em; border-radius: 50%;
  font-size: 1em; line-height: 1; color: transparent; overflow: hidden;
  background-repeat: no-repeat; background-position: center; background-size: .9em .9em;
}
.mtq-verdict[data-v="ok"] .mtq-verdict-icon {
  background-color: var(--mtq-ok);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l5 5L19 7'/%3E%3C/svg%3E");
}
.mtq-verdict[data-v="no"] .mtq-verdict-icon {
  background-color: var(--mtq-no);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
@keyframes mtq-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- Explication ---------- */
.mtq-explain {
  margin-top: 1.05rem; border: 1px solid var(--mtq-line); border-radius: var(--mtq-r-sm);
  background: var(--mtq-paper); overflow: hidden;
  transition: border-color .25s ease, background .25s ease;
}
.mtq-explain:not(.mtq-explain--locked):hover { border-color: rgba(204, 40, 53, .4); }
.mtq-explain[open] { background: #fff; border-color: rgba(204, 40, 53, .3); }
.mtq-explain > summary {
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
  font-weight: 700; font-size: .87em; cursor: pointer;
  padding: .8rem 1rem; list-style: none; color: var(--mtq-red-dark);
  display: flex; align-items: center; gap: .55rem;
  min-height: 48px;
  transition: background .2s ease;
}
.mtq-explain:not(.mtq-explain--locked) > summary:hover { background: var(--mtq-red-soft); }
.mtq-explain > summary::-webkit-details-marker { display: none; }
.mtq-explain > summary::before {
  content: ""; width: .45em; height: .45em; flex: 0 0 auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .28s ease; margin-left: .15em;
}
.mtq-explain[open] > summary::before { transform: rotate(45deg); }
.mtq-explain > summary:focus-visible { outline: 3px solid var(--mtq-red); outline-offset: -3px; }
.mtq-explain-body { padding: 1rem 1.1rem 1.15rem; border-top: 1px solid var(--mtq-line); }
.mtq-explain[open] .mtq-explain-body { animation: mtq-slide .42s cubic-bezier(.22, .9, .3, 1) both; }
@keyframes mtq-slide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Solution verrouillée tant que l'élève n'a pas répondu. Le cadenas est une indication,
   pas une serrure : la réponse reste dans le code source, c'est le prix du référencement.
   Ce qu'il empêche, c'est de lire la solution par réflexe avant d'avoir cherché. */
.mtq-explain--locked {
  background: repeating-linear-gradient(135deg, var(--mtq-paper), var(--mtq-paper) 9px, #f5f0f1 9px, #f5f0f1 18px);
  border-style: dashed; border-color: #ddd2d5;
}
.mtq-explain--locked > summary { color: var(--mtq-muted); cursor: not-allowed; }
/* Un cadenas, mais DESSINÉ, pas écrit. L'emoji et les caractères de dingbats
   tombent en carré vide dans nos sous-ensembles latins — c'est pour ça qu'il n'y
   avait aucune icône jusqu'ici. Un SVG en ligne n'a pas ce problème : il rend
   partout et prend la couleur qu'on lui donne. Le libellé « Réponds d'abord… »
   reste : l'icône appuie le message, elle ne le porte pas seule. */
.mtq-explain--locked > summary::before {
  display: block; content: ""; width: 1.05em; height: 1.05em;
  border: 0; transform: none; margin: 0; flex: 0 0 auto;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6269' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}
.mtq-shake { animation: mtq-refus .4s ease both; }
@keyframes mtq-refus {
  0%, 100% { transform: none; }
  25% { transform: translateX(-5px); }
  60% { transform: translateX(4px); }
}
.mtq-answer {
  font-weight: 700; margin: 0 0 .9rem; padding: .5rem .85rem;
  background: var(--mtq-ok-soft); color: var(--mtq-ok);
  border: 1px solid var(--mtq-ok-line);
  border-radius: var(--mtq-r-xs); display: inline-block;
}
.mtq-explain-body p:last-of-type { margin-bottom: 0; }

/* ---------- Écran de résultat ---------- */
/* C'est l'écran qui décide : l'élève vient de finir, et c'est là — et nulle part
   ailleurs — que le bouton de réservation a une chance d'être cliqué. Il est donc
   traité comme une pièce à part entière et non comme la suite de la page. */
.mtq-result {
  position: relative; overflow: hidden;
  border: 1px solid var(--mtq-line); border-radius: var(--mtq-r-lg);
  box-shadow: var(--mtq-shadow-lg); background: #fff;
  padding: 0; margin-top: 2rem;
  animation: mtq-slide .5s cubic-bezier(.22, .9, .3, 1) both;
}
/* Le script donne le focus à ce bloc pour y emmener le lecteur d'écran — c'est un
   point d'arrivée, pas une commande : il porte tabindex="-1" et ne s'atteint pas
   au clavier. Lui dessiner un contour de focus encadrerait tout l'écran de
   résultat d'un trait rouge à chaque fin de quiz, ce que fait le rendu si on ne
   le retire pas. Aucun élément réellement actionnable ne perd son contour ici. */
.mtq-result:focus,
.mtq-result:focus-visible { outline: none; }

/* Le bloc du score prend le bandeau sombre du haut de page : la boucle se ferme,
   on est revenu au point de départ avec un résultat. */
.mtq-score {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  margin: 0; padding: 1.8rem 1.6rem;
  background: radial-gradient(130% 160% at 90% -20%, #4a2b33 0%, #241c21 48%, #141215 100%);
  color: #fff;
}
.mtq-score::after {
  content: ""; position: absolute; right: -110px; top: -120px;
  width: 280px; height: 280px; border-radius: 50%;
  background: var(--mtq-red); opacity: .32; filter: blur(48px); z-index: -1; pointer-events: none;
}
.mtq-dial { position: relative; flex: 0 0 auto; width: 132px; height: 132px; }
.mtq-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.mtq-dial circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.mtq-dial .mtq-dial-bg { stroke: rgba(255, 255, 255, .14); }
.mtq-dial .mtq-dial-fg {
  stroke: var(--mtq-red-bright);
  filter: drop-shadow(0 0 6px rgba(232, 80, 94, .65));
  transition: stroke-dashoffset 1.2s cubic-bezier(.22, .9, .3, 1);
}
.mtq-dial-text {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: 'Montserrat', Helvetica, Arial, sans-serif; line-height: 1.05;
}
.mtq-dial-pct {
  font-size: 2.05em; font-weight: 800; letter-spacing: -.03em; color: #fff;
  font-variant-numeric: tabular-nums;
}
.mtq-dial-frac { font-size: .74em; margin-top: .25rem; color: #c0b4b9; font-variant-numeric: tabular-nums; }
.mtq-score-text { flex: 1 1 13rem; min-width: 11rem; }
.mtq .mtq-score-text h3 {
  color: #fff; font-size: 1.32em; font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 .4rem;
}
/* Trois classes, et ce n'est pas du zèle. Le correctif anti-Divi en fin de
   fichier, `.mtq p:not([class])`, pèse exactement le même poids qu'un
   `.mtq .mtq-score-text p` — et comme il vient plus loin, il gagne. Le message du
   score n'a pas de classe : il sortait donc en gris foncé SUR LE BANDEAU SOMBRE,
   c'est-à-dire illisible. Vu à la capture, pas en lisant le CSS. */
.mtq .mtq-score .mtq-score-text p { color: #ded7da; font-size: .95em; margin: 0 0 .5rem; }
.mtq .mtq-score .mtq-score-text .mtq-time {
  font-size: .8em; color: #b3a7ac; margin: 0;
  font-variant-numeric: tabular-nums;
}

/* ---------- Bilan par compétence ---------- */
.mtq-review { padding: 1.6rem 1.6rem 0; }
.mtq .mtq-review h3 {
  margin: 0 0 1.1rem; font-size: .8em; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; color: var(--mtq-muted);
}
.mtq-skills { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.mtq-skills li { margin: 0 0 1rem; }
.mtq-skills li:last-child { margin-bottom: 0; }
.mtq-skill-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .92em; margin-bottom: .4rem; }
.mtq-skill-name { font-weight: 500; line-height: 1.4; }
.mtq-skill-score {
  font-family: 'Montserrat', Helvetica, Arial, sans-serif; font-weight: 700; font-size: .88em;
  font-variant-numeric: tabular-nums; color: var(--mtq-muted); white-space: nowrap;
}
.mtq-skill-track {
  height: 9px; border-radius: 999px; background: var(--mtq-line-soft);
  box-shadow: inset 0 1px 2px rgba(40, 20, 25, .08);
  overflow: hidden;
}
.mtq-skill-fill {
  display: block; height: 100%; width: 0; border-radius: 999px;
  transition: width .9s cubic-bezier(.22, .9, .3, 1);
}
/* Trois paliers, trois couleurs — mais le chiffre « 2 / 3 » est juste au-dessus :
   la couleur double l'information, elle ne la porte jamais seule. */
.mtq-skill-fill[data-tier="high"] { background: linear-gradient(90deg, #14663f, #1d8a55); }
.mtq-skill-fill[data-tier="mid"]  { background: linear-gradient(90deg, #a35e06, #d08c14); }
.mtq-skill-fill[data-tier="low"]  { background: linear-gradient(90deg, var(--mtq-red-dark), var(--mtq-red-bright)); }
.mtq-advice {
  background: var(--mtq-paper); border: 1px solid var(--mtq-line);
  border-left: 4px solid var(--mtq-red);
  padding: .95rem 1.1rem; border-radius: 0 var(--mtq-r-sm) var(--mtq-r-sm) 0;
  font-size: .93em; line-height: 1.7;
}
.mtq-advice strong { color: var(--mtq-red-dark); }

/* ---------- L'appel à réserver ----------
   Le panneau reste CLAIR, et c'est un choix de sécurité autant que de goût : il
   contient deux boutons, le plein (blanc sur rouge) et le fantôme (rouge sur
   blanc). Sur un fond rouge, le bouton plein disparaîtrait — exactement la
   régression du bouton blanc sur blanc déjà rencontrée ici. Le relief vient donc
   du dégradé chaud, du filet rouge en haut et de l'ombre du bouton, pas du fond. */
.mtq-cta {
  position: relative; margin: 1.6rem 0 0; padding: 1.7rem 1.6rem 1.8rem;
  background: linear-gradient(160deg, #fff4f4 0%, #fdf1ec 55%, #fff9f5 100%);
  border-top: 1px solid rgba(204, 40, 53, .18);
}
.mtq-cta::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--mtq-red-dark), var(--mtq-red-bright), var(--mtq-red-dark));
}
.mtq .mtq-cta h3 {
  margin: 0 0 .5rem; font-size: 1.3em; font-weight: 800; letter-spacing: -.02em;
  color: var(--mtq-ink); text-wrap: balance;
}
.mtq .mtq-cta p { font-size: .96em; margin: 0; color: var(--mtq-ink); max-width: 34rem; }
.mtq-cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.2rem; }
.mtq-cta .mtq-btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
/* Le bouton de réservation est le seul élément « surdimensionné » de la page.
   C'est délibéré : c'est la seule action qui rapporte quelque chose à Andrew. */
.mtq-cta .mtq-btn:not(.mtq-btn--ghost) {
  font-size: .95em; padding: .85rem 1.9rem;
  background: linear-gradient(135deg, var(--mtq-red-bright), var(--mtq-red) 55%, var(--mtq-red-dark));
  border-color: var(--mtq-red-dark);
  box-shadow: 0 4px 14px rgba(204, 40, 53, .34);
}
.mtq-cta .mtq-btn:not(.mtq-btn--ghost):hover {
  transform: translateY(-2px); box-shadow: 0 9px 24px rgba(204, 40, 53, .42);
}
.mtq-cta .mtq-btn--ghost {
  font-size: .95em; padding: .85rem 1.6rem;
  background: #fff; border-color: rgba(204, 40, 53, .5);
}

/* ---------- Divers ---------- */
.mtq-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mtq-foot { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.mtq-live { font-size: .9em; color: var(--mtq-muted); }

/* L'état « JS actif » : on masque ce qui n'a de sens qu'avec le script. */
.mtq:not(.mtq-ready) .mtq-progress,
.mtq:not(.mtq-ready) .mtq-foot { display: none; }
.mtq-ready .mtq-nojs { display: none; }

@media (max-width: 600px) {
  .mtq { font-size: 16px; }
  .mtq-q { padding: 1.2rem 1.1rem 1.15rem; }
  .mtq-choice label { padding: .7rem .85rem; gap: .7rem; }
  .mtq-intro--lead { padding: 1rem 1.05rem; }
  .mtq-numeric input[type="text"] { width: 7.5rem; }

  /* À 390 px, le cadran et le texte côte à côte laissent cinq mots par ligne.
     Le cadran passe donc au-dessus, centré : c'est le chiffre qu'on veut voir
     en premier, et il a alors toute la largeur pour respirer. */
  .mtq-score { padding: 1.5rem 1.15rem; gap: 1.1rem; justify-content: center; text-align: center; }
  .mtq-score-text { flex: 1 1 100%; min-width: 0; }
  .mtq-dial { width: 124px; height: 124px; }
  .mtq-review { padding: 1.3rem 1.15rem 0; }
  .mtq-cta { padding: 1.4rem 1.15rem 1.5rem; }
  .mtq-cta-actions .mtq-btn { flex: 1 1 100%; }
}
@media (max-width: 400px) {
  .mtq-progress { padding: .45rem .45rem .45rem .8rem; gap: .6rem; }
  .mtq-progress-label { font-size: .74em; padding: .26em .6em; }
}

@media (prefers-reduced-motion: reduce) {
  .mtq-shake { animation: none; }
  .mtq *, .mtq *::before, .mtq *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .mtq-progress, .mtq-foot, .mtq-cta { display: none; }
  .mtq-explain { border: 0; }
  .mtq-explain-body { display: block !important; }
}

/* ---------- Animations SVG écrites à la main ----------
   Trois règles de conduite. L'animation ne joue QU'UNE fois, pour appuyer une
   explication, pas pour tourner en boucle dans le coin de l'œil. Elle s'arrête sur
   l'image la plus informative, et cette image de fin est aussi l'état par défaut :
   sans animation — prefers-reduced-motion — on voit donc un dessin complet et
   correct, jamais un tracé à moitié fait. Et rien ne démarre avant que l'élève
   n'ouvre la solution, puisque la figure vit à l'intérieur du <details>. */

.mtq-anim { margin: 1.1rem 0 .3rem; }
.mtq-anim svg { width: 100%; height: auto; max-width: 340px; display: block; }
.mtq-anim figcaption {
  font-size: .86em; color: var(--mtq-muted); margin-top: .45rem; max-width: 34rem;
  border-left: 2px solid rgba(204, 40, 53, .3); padding-left: .7rem;
}
.mtq-anim-replay {
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
  font-size: .78em; font-weight: 700; color: var(--mtq-red-dark);
  background: none; border: 0; padding: .35rem 0 0; cursor: pointer; text-decoration: underline;
}
.mtq-anim-replay:hover { color: var(--mtq-red); }
.mtq-anim-replay:focus-visible { outline: 3px solid var(--mtq-red); outline-offset: 2px; }

/* État par défaut = dernière image de l'animation. */
.mtq-anim[data-anim="pente"] .mtq-a-pivot { transform: scaleY(3); transform-box: view-box; }
.mtq-anim[data-anim="pente"] .mtq-a-lab1,
.mtq-anim[data-anim="pente"] .mtq-a-lab2 { opacity: 0; }
.mtq-anim[data-anim="pente"] .mtq-a-lab3 { opacity: 1; }

.mtq-anim[data-anim="parabole"] .mtq-a-slide { transform: translate(60px, 90px); transform-box: view-box; }
.mtq-anim[data-anim="parabole"] .mtq-a-lab1,
.mtq-anim[data-anim="parabole"] .mtq-a-lab2 { opacity: 0; }
.mtq-anim[data-anim="parabole"] .mtq-a-lab3 { opacity: 1; }

/* Le pivot est exactement le point (0, 1) : voir le commentaire dans build.py. */
@keyframes mtq-a-pivote {
  0%, 18%  { transform: scaleY(1); }
  34%, 52% { transform: scaleY(2); }
  68%, 100% { transform: scaleY(3); }
}
@keyframes mtq-a-glisse {
  0%, 18%  { transform: translate(0, 0); }
  34%, 52% { transform: translate(60px, 0); }
  68%, 100% { transform: translate(60px, 90px); }
}
@keyframes mtq-a-lab-a { 0%, 18% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes mtq-a-lab-b { 0%, 26% { opacity: 0; } 34%, 52% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes mtq-a-lab-c { 0%, 60% { opacity: 0; } 68%, 100% { opacity: 1; } }
/* Une chronologie unique par morceau, en pourcentages plutôt qu'en délais : c'est ce qui
   permet de geler l'animation à un instant donné pour la relire image par image. */
@keyframes mtq-a-p1 { 0% { opacity: 0; } 6%, 100% { opacity: 1; } }
@keyframes mtq-a-p2 { 0%, 20% { opacity: 0; } 26%, 100% { opacity: 1; } }
@keyframes mtq-a-p3 { 0%, 40% { opacity: 0; } 46%, 100% { opacity: 1; } }
@keyframes mtq-a-p4 { 0%, 60% { opacity: 0; } 66%, 100% { opacity: 1; } }
@keyframes mtq-a-p5 { 0%, 80% { opacity: 0; } 88%, 100% { opacity: 1; } }

.mtq-anim[data-anim="pente"] .mtq-a-pivot { animation: mtq-a-pivote 7s ease-in-out 1 both; }
.mtq-anim[data-anim="parabole"] .mtq-a-slide { animation: mtq-a-glisse 7s ease-in-out 1 both; }
.mtq-anim[data-anim="pente"] .mtq-a-lab1,
.mtq-anim[data-anim="parabole"] .mtq-a-lab1 { animation: mtq-a-lab-a 7s linear 1 both; }
.mtq-anim[data-anim="pente"] .mtq-a-lab2,
.mtq-anim[data-anim="parabole"] .mtq-a-lab2 { animation: mtq-a-lab-b 7s linear 1 both; }
.mtq-anim[data-anim="pente"] .mtq-a-lab3,
.mtq-anim[data-anim="parabole"] .mtq-a-lab3 { animation: mtq-a-lab-c 7s linear 1 both; }

.mtq-anim[data-anim="aire"] .mtq-a-part1 { animation: mtq-a-p1 6s linear 1 both; }
.mtq-anim[data-anim="aire"] .mtq-a-part2 { animation: mtq-a-p2 6s linear 1 both; }
.mtq-anim[data-anim="aire"] .mtq-a-part3 { animation: mtq-a-p3 6s linear 1 both; }
.mtq-anim[data-anim="aire"] .mtq-a-part4 { animation: mtq-a-p4 6s linear 1 both; }
.mtq-anim[data-anim="aire"] .mtq-a-sum   { animation: mtq-a-p5 6s linear 1 both; }

/* Sans mouvement : pas d'animation du tout, et l'état par défaut ci-dessus fait foi. */
@media (prefers-reduced-motion: reduce) {
  .mtq-anim * { animation: none !important; }
  .mtq-anim[data-anim="aire"] .mtq-a-part1,
  .mtq-anim[data-anim="aire"] .mtq-a-part2,
  .mtq-anim[data-anim="aire"] .mtq-a-part3,
  .mtq-anim[data-anim="aire"] .mtq-a-part4,
  .mtq-anim[data-anim="aire"] .mtq-a-sum { opacity: 1; }
  .mtq-anim-replay { display: none; }
}

@media print {
  .mtq-anim * { animation: none !important; }
  .mtq-anim-replay { display: none; }
}

/* ------------------------------------------------------------------
   Correctifs Divi — ajoutés le 2026-09-18 après la pose sur
   montreal-tutor.com. Le thème applique `.entry-content ul { list-style: disc;
   padding-left: 17px }` et `p { color: #6b6b6b }` avec une spécificité qui bat
   nos règles de base. On les reprend ici, portée limitée à `.mtq`, sans
   toucher au thème : hors du module, Divi garde exactement son rendu.
   ------------------------------------------------------------------ */

.mtq ul,
.mtq ol { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; }
.mtq li { list-style: none !important; list-style-type: none !important; }
.mtq ul > li::before,
.mtq ol > li::before { content: none !important; }

/* Le maillage interne reste une vraie liste à puces, mais la nôtre. */
/* ---- Maillage vers les autres quiz -----------------------------------
   Les titres sont longs (« Résoudre des équations à une et deux étapes ») :
   une liste à puces les cassait sur trois lignes sur téléphone. Chaque quiz
   devient donc une carte — niveau en petites capitales rouges, titre, chevron.
   `!important` : Divi impose ses puces et son retrait sur toute liste. */
.mtq-more ul {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
  margin: 0 0 .9rem;
  display: grid;
  gap: .6rem;
}
.mtq-more li { margin: 0 !important; list-style: none !important; }
.mtq-more-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .8rem;
  padding: .85rem 1rem;
  border: 1px solid var(--mtq-line);
  border-radius: var(--mtq-r-sm);
  background: #fff;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(40, 20, 25, .05);
  transition: border-color .18s var(--mtq-ease), box-shadow .18s var(--mtq-ease),
              transform .18s var(--mtq-ease);
}
.mtq-more-card:hover,
.mtq-more-card:focus-visible {
  border-color: var(--mtq-red);
  box-shadow: 0 2px 4px rgba(40, 20, 25, .05), 0 10px 24px rgba(204, 40, 53, .12);
  transform: translateY(-1px);
}
.mtq-more-txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.mtq-more-level {
  color: var(--mtq-red);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.mtq-more-title { color: var(--mtq-ink); font-size: 1rem; font-weight: 600; line-height: 1.3; }
.mtq-more-go { color: var(--mtq-red); font-size: 1.2rem; line-height: 1; }
.mtq-more-alt { margin: .1rem 0 0; }
.mtq-more-lang {
  display: inline-block;
  padding: .5rem .95rem;
  border: 1px solid var(--mtq-line);
  border-radius: 999px;
  background: #fff;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: border-color .18s var(--mtq-ease);
}
.mtq-more-lang:hover,
.mtq-more-lang:focus-visible { border-color: var(--mtq-red); }
@media (min-width: 720px) { .mtq-more ul { grid-template-columns: 1fr 1fr; } }

/* Divi repeint tous les paragraphes en gris : on rend au module son encre.
   `:not([class])` laisse intacts les paragraphes qui ont VOULU être gris
   (.mtq-skill, .mtq-time...), sinon cette règle les repeindrait à son tour. */
.mtq p:not([class]) { color: var(--mtq-ink); }

/* Couleur de lien du thème (indianred) remplacée par le rouge de la charte. */
.mtq a { color: var(--mtq-red); }
.mtq a:hover,
.mtq a:focus { color: var(--mtq-red-dark); }
.mtq .mtq-btn:not(.mtq-btn--ghost),
.mtq .mtq-btn:not(.mtq-btn--ghost):hover,
.mtq .mtq-btn:not(.mtq-btn--ghost):focus { color: #fff; }
/* Le bouton fantome (« Recommencer ») est sur fond clair : forcer le blanc dessus,
   comme le faisait la premiere version de cette regle, le rendait invisible. */
.mtq .mtq-btn--ghost { color: var(--mtq-red); }
.mtq .mtq-btn--ghost:hover,
.mtq .mtq-btn--ghost:focus { color: var(--mtq-red-dark); }

/* Le bandeau d'entrée est sur fond sombre : la règle de Divi qui repeint les
   paragraphes en #6b6b6b et sa couleur de titre y donneraient du gris sur noir.
   `.mtq p:not([class])` plus haut ne les couvre pas — l'eyebrow et l'intro portent
   justement une classe — d'où ces trois reprises, portée limitée au bandeau. */
.mtq .mtq-head .mtq-eyebrow { color: #ff8d96; }
.mtq .mtq-head h1.mtq-title { color: #fff; }
.mtq p.mtq-intro--lead { color: var(--mtq-ink); }

/* Divi imprime son bandeau de titre dans page.php sans condition ; le mu-plugin en
   vide le texte (mt_quiz_strip_divi_title) et cette règle retire la coquille restante.
   Portée : la classe mtq-page, posée par le greffon sur les seules pages de quiz. */
.mtq-page .entry-title.main_title { display: none; }