/* Écran d'examen blanc, mobile d'abord. Uniquement les variables de site/src/styles/tokens.css : aucune couleur ici.
   Propriétés logiques (inline/block) pour que l'arabe (dir="rtl") se mette en miroir sans règle à part. */

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--c-fond);
  color: var(--c-texte);
  font-family: var(--f-texte);
  font-size: var(--t-corps);
  line-height: 1.5;
}

/* Sans cette règle, un display posé par une classe (.bouton) l'emporte sur l'attribut hidden. */
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--c-action); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.evitement { position: absolute; inset-inline-start: var(--e-4); inset-block-start: calc(-1 * var(--e-8)); }
.evitement:focus { inset-block-start: var(--e-4); background: var(--c-carte); padding: var(--e-3); }

/* En-tête, pied */
.entete, .pied, .principal { width: 100%; max-width: 40rem; margin-inline: auto; padding-inline: var(--e-4); }
.entete {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e-3); padding-block: var(--e-4);
}
.entete__retour {
  flex-basis: 100%; display: inline-flex; align-items: center; min-height: var(--cible-min);
  color: var(--c-action); font-size: var(--t-petit); font-weight: 700;
}
.entete__marque { margin: 0; font-family: var(--f-titre); font-weight: 500; font-size: var(--t-marque); letter-spacing: var(--ls-marque); }
.principal { flex: 1; padding-block-end: var(--e-6); }
.pied { padding-block: var(--e-5); color: var(--c-texte-doux); font-size: var(--t-petit); border-block-start: 1px solid var(--c-trait); }

.langues { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.langues__bouton {
  min-width: var(--cible-min); min-height: var(--cible-min);
  border: 1px solid var(--c-trait-champ); border-radius: var(--rayon); background: var(--c-carte);
  color: var(--c-texte); font: inherit; font-size: var(--t-petit); font-weight: 700; cursor: pointer;
}
.langues__bouton[aria-pressed="true"] { background: var(--c-texte); color: var(--c-fond); border-color: var(--c-texte); }

/* Écrans */
.ecran { display: flex; flex-direction: column; gap: var(--e-4); }
/* Titres serif légers : une seule règle, les tailles à part */
.titre, .enonce, .bloc h2, .achat__titre { margin: 0; font-family: var(--f-titre); font-weight: var(--g-titre); letter-spacing: var(--ls-titre); }
.titre { font-size: var(--t-h2-texte); line-height: 1.05; text-wrap: balance; }
.etiquette, .theme {
  margin: 0; font-size: var(--t-surtitre); font-weight: 700; color: var(--c-action);
  text-transform: uppercase; letter-spacing: var(--ls-surtitre);
}
:root[dir="rtl"] .etiquette, :root[dir="rtl"] .theme { text-transform: none; letter-spacing: 0; }
.note { margin: 0; color: var(--c-texte-doux); font-size: var(--t-petit); }
.alerte {
  margin: 0; padding: var(--e-3) var(--e-4); border-radius: var(--rayon);
  background: var(--c-erreur-doux); color: var(--c-texte); border-inline-start: 4px solid var(--c-erreur);
}
.alerte p { margin: 0; }

/* Boutons */
.actions { display: flex; flex-direction: column; gap: var(--e-3); }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: var(--cible-min); padding: var(--e-3) var(--e-5);
  border: 2px solid var(--c-texte-doux); border-radius: var(--rayon-pilule); background: var(--c-carte);
  color: var(--c-texte); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.bouton:hover { border-color: var(--c-action); }
.bouton--principal { background: var(--c-action); border-color: var(--c-action); color: var(--c-carte); }
.bouton--principal:hover { background: var(--c-action-survol); border-color: var(--c-action-survol); }
.bouton[disabled] { opacity: 0.5; cursor: not-allowed; }
.bouton--choix { justify-content: flex-start; text-align: start; border-radius: var(--rayon); border-color: var(--c-trait-champ); }
.bouton--choix[aria-pressed="true"] { border-color: var(--c-action); background: var(--c-action-doux); }
.lien {
  min-height: var(--cible-min); padding: var(--e-2) 0; border: none; background: none;
  color: var(--c-action); font: inherit; font-size: var(--t-petit); text-decoration: underline; cursor: pointer;
}
.lien:hover { color: var(--c-action-survol); }

.demarches { display: flex; flex-direction: column; gap: var(--e-2); margin: 0; padding: 0; border: none; }
.demarches legend { margin-block-end: var(--e-2); }

/* Question */
.haut { display: flex; }
.progression { display: flex; flex-direction: column; gap: var(--e-2); color: var(--c-texte-doux); font-size: var(--t-petit); }
.progression__ligne { display: flex; justify-content: space-between; gap: var(--e-3); }
.progression__ligne p { margin: 0; }
.chrono { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--c-texte); }
.progression__barre {
  width: 100%; height: var(--e-2); appearance: none; border: none; border-radius: var(--e-1);
  background: var(--c-carte-2); overflow: hidden;
}
.progression__barre::-webkit-progress-bar { background: var(--c-carte-2); }
.progression__barre::-webkit-progress-value { background: var(--c-action); }
.progression__barre::-moz-progress-bar { background: var(--c-action); }
.enonce { font-size: var(--t-h3); line-height: 1.2; max-width: var(--largeur-texte); }

.choix-liste { display: flex; flex-direction: column; gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.choix {
  display: flex; align-items: center; gap: var(--e-3); width: 100%; min-height: var(--cible-min);
  padding: var(--e-3) var(--e-4); border: 2px solid var(--c-trait-champ); border-radius: var(--rayon);
  background: var(--c-carte); color: var(--c-texte); font: inherit; text-align: start; cursor: pointer;
}
.choix:hover:not([aria-disabled="true"]) { border-color: var(--c-action); }
.choix[aria-disabled="true"] { cursor: default; }
.choix__lettre {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: var(--e-6); height: var(--e-6); border-radius: 50%; background: var(--c-carte-2);
  font-size: var(--t-petit); font-weight: 700;
}
.choix--bonne { border-color: var(--c-succes); background: var(--c-action-doux); font-weight: 700; }
.choix--bonne .choix__lettre { background: var(--c-succes); color: var(--c-carte); }
.choix--mauvaise { border-color: var(--c-erreur); background: var(--c-erreur-doux); }
.choix--mauvaise .choix__lettre { background: var(--c-erreur); color: var(--c-carte); }
.choix--bonne::after { content: "✓"; margin-inline-start: auto; color: var(--c-succes); }
.choix--mauvaise::after { content: "✗"; margin-inline-start: auto; color: var(--c-erreur); }

.correction {
  display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-3) var(--e-4);
  border-radius: var(--rayon); font-size: var(--t-petit);
}
.correction p { margin: 0; }
.correction--bonne { background: var(--c-action-doux); border-inline-start: 4px solid var(--c-succes); }
.correction--mauvaise { background: var(--c-erreur-doux); border-inline-start: 4px solid var(--c-erreur); }
.correction__titre { font-weight: 700; }
.actions--bas { margin-block-start: var(--e-2); }

/* Résultat */
.verdict { margin: 0; font-weight: 700; }
.verdict--reussi { color: var(--c-succes); }
.verdict--echoue { color: var(--c-erreur); }
.bloc { display: flex; flex-direction: column; gap: var(--e-3); }
.bloc h2 { font-size: var(--t-h3); }
.themes { margin: 0; padding: 0; list-style: none; }
.themes__ligne {
  display: flex; justify-content: space-between; gap: var(--e-3);
  padding-block: var(--e-2); border-block-end: 1px solid var(--c-trait);
}
.themes__score { font-variant-numeric: tabular-nums; font-weight: 700; }
.erreurs { display: flex; flex-direction: column; gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.erreur {
  display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-4);
  background: var(--c-carte); border: 1px solid var(--c-trait); border-radius: var(--rayon-carte);
}
.erreur p, .erreur h3 { margin: 0; }
.erreur__enonce { font-size: var(--t-corps); }
.erreur__donnee { color: var(--c-erreur); }
.erreur__bonne { color: var(--c-succes); font-weight: 700; }
.erreur__explication { color: var(--c-texte-doux); font-size: var(--t-petit); }

.achat {
  display: flex; flex-direction: column; gap: var(--e-3); margin-block-start: var(--e-5); padding: var(--e-5);
  background: var(--c-premium); color: var(--c-sur-premium); border-radius: var(--rayon-carte); box-shadow: var(--ombre);
}
.achat .bouton--principal { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-sur-accent); }
.achat :focus-visible { outline-color: var(--c-accent); }
.achat p { margin: 0; }
.achat__titre { font-size: var(--t-h3); }
.achat__tableau { width: 100%; border-collapse: collapse; font-size: var(--t-petit); }
.achat__tableau th, .achat__tableau td { padding: var(--e-2); text-align: start; vertical-align: top; border-block-end: 1px solid currentColor; }

@media (min-width: 40rem) {
  .actions { flex-direction: row; flex-wrap: wrap; }
  .titre { font-size: var(--t-h2); }
}

@media (prefers-reduced-motion: no-preference) {
  .choix, .bouton { transition: border-color 0.15s ease, background-color 0.15s ease; }
}

/* Cartes mémo : le rappel de l'énoncé au verso est plus discret que la bonne réponse. */
.enonce--rappel { font-size: 1rem; font-weight: 400; color: var(--c-texte-doux); }
.carte__reponse { margin-block: var(--e-3); }