:root {
      --bleu: #6e33cc;
      --rouge: #ED2939;
      --blanc: #FFFFFF;
      --bleu-clair: #f0ebfa;
      --bleu-moyen: #c9b3e8;
      --texte: #1a1a2e;
      --gris: #6b7280;
      --gris-clair: #f4f5f7;
      --vert: #1a7f4e;
      --vert-clair: #e6f4ed;
      --rouge-clair: #fdecea;
      --or: #c9a227;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Source Serif 4', Georgia, serif;
      background: var(--gris-clair);
      color: var(--texte);
      min-height: 100vh;
    }

    /* BANDE TRICOLORE */
    /* HEADER */
    header {
      background: var(--bleu);
      color: white;
      padding: 0.65rem 2rem;
      display: flex;
      align-items: center;
      gap: 1.5rem;
      box-shadow: 0 2px 12px rgba(110,51,204,0.3);
    }
    .rf-logo {
      font-size: 0.95rem;
      font-weight: 300;
      letter-spacing: 0.02em;
      line-height: 1.3;
    }
    .rf-logo strong {
      font-weight: 600;
      display: block;
      font-size: 1rem;
    }

    /* CONTAINER PRINCIPAL */
    main {
      max-width: 860px;
      margin: 0 auto;
      padding: 1.25rem 1.5rem 3rem;
    }

    /* ÉCRANS */
    .ecran { display: none; }
    .ecran.actif { display: block; animation: fadeIn 0.3s ease; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

    /* ===== ÉCRAN ACCUEIL ===== */
    .titre-accueil {
      text-align: center;
      margin-bottom: 2.5rem;
    }
    .titre-accueil h1 {
      font-family: 'Source Serif 4', serif;
      font-size: 2rem;
      font-weight: 600;
      color: var(--bleu);
      margin-bottom: 0.5rem;
    }
    .titre-accueil p {
      color: var(--gris);
      font-size: 1rem;
      font-weight: 300;
      font-style: italic;
    }

    .cartes-niveau {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
      margin-bottom: 2rem;
    }

    .carte-niveau {
      background: white;
      border: 2px solid var(--bleu-moyen);
      border-radius: 10px;
      padding: 1.75rem 1.25rem;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
      overflow: hidden;
    }
    .carte-niveau::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: var(--bleu);
      transform: scaleX(0);
      transition: transform 0.2s ease;
    }
    .carte-niveau:hover::before,
    .carte-niveau.selectionnee::before {
      transform: scaleX(1);
    }
    .carte-niveau:hover {
      border-color: var(--bleu);
      box-shadow: 0 4px 20px rgba(0,35,149,0.12);
      transform: translateY(-2px);
    }
    .carte-niveau.selectionnee {
      border-color: var(--bleu);
      background: var(--bleu-clair);
      box-shadow: 0 4px 20px rgba(110,51,204,0.15);
    }
    .carte-niveau.indisponible {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }
    .badge-bientot {
      position: absolute;
      top: 10px; right: 10px;
      background: var(--or);
      color: white;
      font-size: 0.6rem;
      font-family: 'Marianne', sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 2px 7px;
      border-radius: 20px;
    }
    .carte-niveau .icone {
      font-size: 2rem;
      margin-bottom: 0.75rem;
      display: block;
    }
    .carte-niveau h2 {
      font-size: 0.9rem;
      font-weight: 600;
      font-family: 'Marianne', sans-serif;
      color: var(--bleu);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 0.5rem;
      line-height: 1.3;
    }
    .carte-niveau p {
      font-size: 0.8rem;
      color: var(--gris);
      font-weight: 300;
      line-height: 1.4;
    }

    .infos-examen {
      background: white;
      border: 1px solid var(--bleu-moyen);
      border-radius: 10px;
      padding: 1.25rem 1.5rem;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      margin-bottom: 2rem;
    }
    .info-item {
      text-align: center;
    }
    .info-item .valeur {
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--bleu);
      display: block;
    }
    .info-item .label {
      font-size: 0.75rem;
      color: var(--gris);
      font-weight: 300;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    /* OPTIONS ENTRAINEMENT */
    .options-section {
      background: white;
      border: 1px solid var(--bleu-moyen);
      border-radius: 10px;
      padding: 1.5rem;
      margin-bottom: 2rem;
    }
    .options-section h3 {
      font-size: 0.85rem;
      font-family: 'Marianne', sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--bleu);
      margin-bottom: 1rem;
      padding-bottom: 0.75rem;
      border-bottom: 1px solid var(--bleu-moyen);
    }
    .options-grille {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
    }
    .option-btn {
      background: var(--gris-clair);
      border: 1.5px solid var(--bleu-moyen);
      border-radius: 8px;
      padding: 0.9rem 1rem;
      cursor: pointer;
      text-align: left;
      transition: all 0.15s ease;
      font-family: 'Source Serif 4', serif;
    }
    .option-btn:hover {
      border-color: var(--bleu);
      background: var(--bleu-clair);
    }
    .option-btn.selectionnee {
      border-color: var(--bleu);
      background: var(--bleu-clair);
    }
    .option-btn .opt-titre {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--bleu);
      display: block;
      margin-bottom: 0.2rem;
    }
    .option-btn .opt-desc {
      font-size: 0.78rem;
      color: var(--gris);
      font-weight: 300;
    }

    .btn-principal {
      display: block;
      width: 100%;
      background: var(--bleu);
      color: white;
      border: none;
      border-radius: 8px;
      padding: 1rem 2rem;
      font-size: 1rem;
      font-family: 'Marianne', sans-serif;
      font-weight: 700;
      letter-spacing: 0.03em;
      cursor: pointer;
      transition: all 0.2s ease;
      text-transform: uppercase;
    }
    .btn-principal:hover {
      background: #001a70;
      transform: translateY(-1px);
      box-shadow: 0 4px 16px rgba(110,51,204,0.3);
    }
    .btn-principal:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    /* ===== ÉCRAN QUIZ ===== */
    .quiz-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.75rem;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    .quiz-thematique {
      font-size: 0.75rem;
      font-family: 'Marianne', sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--bleu);
      background: var(--bleu-clair);
      padding: 0.3rem 0.8rem;
      border-radius: 20px;
    }
    .quiz-timer {
      font-family: 'Marianne', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      color: var(--bleu);
      background: white;
      border: 2px solid var(--bleu-moyen);
      padding: 0.4rem 1rem;
      border-radius: 8px;
      letter-spacing: 0.05em;
    }
    .quiz-timer.urgence {
      color: var(--rouge);
      border-color: var(--rouge);
      animation: pulse 1s infinite;
    }
    @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.6; } }

    .barre-progression-container {
      margin-bottom: 0.5rem;
    }
    .barre-progression-labels {
      display: flex;
      justify-content: space-between;
      font-size: 0.75rem;
      color: var(--gris);
      margin-bottom: 0.4rem;
    }
    .barre-progression {
      height: 6px;
      background: var(--bleu-moyen);
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 0.75rem;
    }
    .barre-remplissage {
      height: 100%;
      background: var(--bleu);
      border-radius: 10px;
      transition: width 0.4s ease;
    }

    .carte-question {
      background: white;
      border: 1px solid var(--bleu-moyen);
      border-radius: 12px;
      padding: 1.25rem 1.5rem;
      margin-bottom: 0.85rem;
      box-shadow: 0 2px 10px rgba(0,35,149,0.06);
    }
    .numero-question {
      font-size: 0.7rem;
      font-family: 'Marianne', sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--gris);
      margin-bottom: 0.4rem;
    }
    .texte-question {
      font-size: 1.05rem;
      font-weight: 400;
      line-height: 1.5;
      color: var(--texte);
      margin-bottom: 1rem;
    }

    .propositions {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    .proposition {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      background: var(--gris-clair);
      border: 1.5px solid #d1d5db;
      border-radius: 8px;
      padding: 0.85rem 1rem;
      cursor: pointer;
      transition: all 0.15s ease;
      text-align: left;
      width: 100%;
      font-family: 'Source Serif 4', serif;
    }
    .proposition:hover:not(.desactivee) {
      border-color: var(--bleu);
      background: var(--bleu-clair);
    }
    .proposition.selectionnee {
      border-color: var(--bleu);
      background: var(--bleu-clair);
    }
    .proposition.correcte {
      border-color: var(--vert);
      background: var(--vert-clair);
    }
    .proposition.incorrecte {
      border-color: var(--rouge);
      background: var(--rouge-clair);
    }
    .proposition.desactivee {
      cursor: default;
    }
    .lettre {
      font-family: 'Marianne', sans-serif;
      font-weight: 700;
      font-size: 0.8rem;
      color: white;
      background: var(--gris);
      border-radius: 50%;
      min-width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .proposition.selectionnee .lettre { background: var(--bleu); }
    .proposition.correcte .lettre { background: var(--vert); }
    .proposition.incorrecte .lettre { background: var(--rouge); }
    .texte-proposition {
      font-size: 0.92rem;
      line-height: 1.5;
      color: var(--texte);
    }

    .explication {
      background: var(--bleu-clair);
      border-left: 3px solid var(--bleu);
      border-radius: 0 8px 8px 0;
      padding: 1rem 1.25rem;
      font-size: 0.88rem;
      color: var(--texte);
      line-height: 1.6;
      margin-top: 0.5rem;
      display: none;
    }
    .explication.visible { display: block; animation: fadeIn 0.2s ease; }
    .explication strong { color: var(--bleu); }

    .nav-questions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      margin-top: 1rem;
    }
    .btn-nav {
      background: white;
      border: 2px solid var(--bleu);
      color: var(--bleu);
      border-radius: 8px;
      padding: 0.65rem 1.5rem;
      font-family: 'Marianne', sans-serif;
      font-weight: 700;
      font-size: 0.85rem;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .btn-nav:hover { background: var(--bleu-clair); }
    .btn-nav:disabled { opacity: 0.3; cursor: not-allowed; }
    .btn-suivant {
      background: var(--bleu);
      color: white;
      border: 2px solid var(--bleu);
      border-radius: 8px;
      padding: 0.65rem 1.5rem;
      font-family: 'Marianne', sans-serif;
      font-weight: 700;
      font-size: 0.85rem;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .btn-suivant:hover { background: #001a70; border-color: #001a70; }
    .btn-suivant:disabled { opacity: 0.3; cursor: not-allowed; }

    /* ===== ÉCRAN RÉSULTATS ===== */
    .resultats-carte {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,35,149,0.1);
      margin-bottom: 1.5rem;
    }
    .resultats-header {
      background: var(--bleu);
      color: white;
      padding: 2rem;
      text-align: center;
    }
    .resultats-header h2 {
      font-size: 1.5rem;
      font-weight: 300;
      margin-bottom: 0.5rem;
    }
    .score-cercle {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 130px;
      height: 130px;
      border: 4px solid rgba(255,255,255,0.4);
      border-radius: 50%;
      margin: 1rem 0;
    }
    .score-nombre {
      font-size: 2.5rem;
      font-weight: 700;
      font-family: 'Marianne', sans-serif;
      line-height: 1;
    }
    .score-total {
      font-size: 0.85rem;
      opacity: 0.8;
    }
    .score-mention {
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 0.4rem 1.2rem;
      border-radius: 20px;
      border: 2px solid rgba(255,255,255,0.6);
    }
    .score-mention.reussi { background: rgba(26,127,78,0.3); border-color: #6ee7b7; }
    .score-mention.echec { background: rgba(237,41,57,0.3); border-color: rgba(255,255,255,0.4); }

    .resultats-stats {
      padding: 1.5rem 2rem;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      border-bottom: 1px solid var(--bleu-moyen);
    }
    .stat-item { text-align: center; }
    .stat-valeur {
      font-size: 1.75rem;
      font-weight: 600;
      font-family: 'Marianne', sans-serif;
      display: block;
    }
    .stat-valeur.vert { color: var(--vert); }
    .stat-valeur.rouge { color: var(--rouge); }
    .stat-valeur.gris { color: var(--gris); }
    .stat-label {
      font-size: 0.75rem;
      color: var(--gris);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .resultats-thematiques {
      padding: 1.5rem 2rem;
    }
    .resultats-thematiques h3 {
      font-size: 0.8rem;
      font-family: 'Marianne', sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--gris);
      margin-bottom: 1rem;
    }
    .thematique-barre {
      margin-bottom: 0.9rem;
    }
    .thematique-labels {
      display: flex;
      justify-content: space-between;
      font-size: 0.8rem;
      margin-bottom: 0.3rem;
      color: var(--texte);
    }
    .barre-th {
      height: 8px;
      background: var(--bleu-moyen);
      border-radius: 10px;
      overflow: hidden;
    }
    .barre-th-remplissage {
      height: 100%;
      border-radius: 10px;
      transition: width 0.8s ease;
    }

    .btn-groupe {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }
    .btn-secondaire {
      background: white;
      border: 2px solid var(--bleu);
      color: var(--bleu);
      border-radius: 8px;
      padding: 0.85rem 1rem;
      font-family: 'Marianne', sans-serif;
      font-weight: 700;
      font-size: 0.85rem;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .btn-secondaire:hover { background: var(--bleu-clair); }

    /* CORRECTION DÉTAILLÉE */
    .correction-item {
      background: white;
      border: 1px solid var(--bleu-moyen);
      border-radius: 10px;
      padding: 1.25rem;
      margin-bottom: 0.75rem;
    }
    .correction-item .question-corr {
      font-size: 0.92rem;
      font-weight: 400;
      color: var(--texte);
      margin-bottom: 0.75rem;
      line-height: 1.5;
    }
    .correction-reponse {
      font-size: 0.82rem;
      padding: 0.5rem 0.75rem;
      border-radius: 6px;
      margin-bottom: 0.3rem;
    }
    .correction-reponse.bonne { background: var(--vert-clair); color: var(--vert); }
    .correction-reponse.mauvaise { background: var(--rouge-clair); color: var(--rouge); }
    .correction-numero {
      font-size: 0.7rem;
      color: var(--gris);
      font-family: 'Marianne', sans-serif;
      margin-bottom: 0.4rem;
    }

    /* PIED DE PAGE */
    footer {
      background: var(--bleu);
      color: rgba(255,255,255,0.7);
      text-align: center;
      padding: 1rem;
      font-size: 0.75rem;
      font-family: 'Marianne', sans-serif;
      letter-spacing: 0.03em;
      margin-top: 3rem;
      display: none;
    }
    footer.visible { display: block; }

    .btn-retour {
      background: transparent;
      border: 1.5px solid rgba(110,51,204,0.3);
      color: var(--bleu);
      border-radius: 6px;
      padding: 0.4rem 0.9rem;
      font-family: 'Marianne', sans-serif;
      font-weight: 700;
      font-size: 0.75rem;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .btn-retour:hover {
      background: var(--bleu-clair);
      border-color: var(--bleu);
    }

    /* Modale de confirmation */
    .modale-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      z-index: 100;
      align-items: center;
      justify-content: center;
    }
    .modale-overlay.visible { display: flex; }
    .modale-boite {
      background: white;
      border-radius: 12px;
      padding: 2rem;
      max-width: 380px;
      width: 90%;
      text-align: center;
      box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    }
    .modale-boite h3 {
      font-family: 'Marianne', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      color: var(--bleu);
      margin-bottom: 0.75rem;
    }
    .modale-boite p {
      font-size: 0.88rem;
      color: var(--gris);
      margin-bottom: 1.5rem;
      line-height: 1.5;
    }
    .modale-boutons {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
    }



    /* ===== ACCESSIBILITÉ ET CLARIFICATION NON OFFICIELLE ===== */
    .skip-link {
      position: absolute;
      left: -999px;
      top: 0.5rem;
      background: #fff;
      color: var(--bleu);
      border: 2px solid var(--bleu);
      border-radius: 6px;
      padding: 0.6rem 0.9rem;
      font-family: 'Marianne', sans-serif;
      font-weight: 700;
      z-index: 2000;
    }
    .skip-link:focus { left: 0.75rem; }
    .sr-only {
      position: absolute !important;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .bandeau-non-officiel {
      background: #fff7ed;
      border: 1px solid #fed7aa;
      border-left: 5px solid #c2410c;
      color: #7c2d12;
      border-radius: 10px;
      padding: 0.9rem 1rem;
      margin-bottom: 1.25rem;
      font-family: 'Marianne', sans-serif;
      font-size: 0.86rem;
      line-height: 1.5;
    }
    .bandeau-non-officiel strong { font-weight: 700; }
    button:focus-visible,
    a:focus-visible,
    .carte-niveau:focus-visible {
      outline: 3px solid #111827;
      outline-offset: 3px;
    }
    .proposition[aria-pressed="true"] {
      border-color: var(--bleu);
    }
    .btn-danger {
      background: #fff;
      border: 2px solid var(--rouge);
      color: var(--rouge);
      border-radius: 8px;
      padding: 0.85rem 1rem;
      font-family: 'Marianne', sans-serif;
      font-weight: 700;
      font-size: 0.85rem;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.15s ease;
      width: 100%;
      margin-top: 0.75rem;
    }
    .btn-danger:hover { background: var(--rouge-clair); }
    .a-propos-liste {
      margin-left: 1.1rem;
      font-size: 0.85rem;
      color: #444;
      line-height: 1.6;
      margin-bottom: 1.2rem;
    }
    .btn-sais-pas {
      background: #fff7ed;
      border-color: #c2410c;
      color: #7c2d12;
    }
    .btn-sais-pas:hover { background: #ffedd5; }

/* ===== BADGE TYPE DE QUESTION ===== */
.badge-question {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Marianne', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  margin-bottom: 0.6rem;
}
.badge-officielle {
  background: #e6f4ed;
  color: #1a7f4e;
  border: 1px solid #a7d9be;
}
.badge-situation {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}
.note-situation {
  font-size: 0.75rem;
  color: #92400e;
  font-family: 'Marianne', sans-serif;
  font-style: italic;
  margin-bottom: 0.6rem;
  padding: 0.4rem 0.7rem;
  background: #fff7ed;
  border-left: 3px solid #c2410c;
  border-radius: 0 6px 6px 0;
}

    @media (max-width: 600px) {
      .cartes-niveau { grid-template-columns: 1fr; }
      .infos-examen { grid-template-columns: repeat(3,1fr); }
      .options-grille { grid-template-columns: 1fr; }
      .btn-groupe { grid-template-columns: 1fr; }
      .resultats-stats { grid-template-columns: repeat(3,1fr); }
      .carte-question { padding: 1.25rem; }
      header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }

      /* CORRECTIF : empêche le btn-retour de s'étirer sur toute la largeur */
      .quiz-header { flex-wrap: nowrap; align-items: center; }
      .btn-retour {
        flex: 0 0 auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 44%;
        font-size: 0.7rem;
        padding: 0.35rem 0.65rem;
      }
      .quiz-thematique {
        flex: 1 1 auto;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.68rem;
      }

      /* Bouton retour sur l'écran résultats : compact sur mobile */
      #btn-retour-menu-resultats {
        font-size: 0.78rem;
        padding: 0.4rem 0.85rem;
      }
    }



    /* ===== SÉLECTEUR DE LANGUE ===== */
    .lang-selector {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      margin-left: auto;
    }
    .lang-btn {
      background: rgba(255,255,255,0.15);
      border: 1.5px solid rgba(255,255,255,0.25);
      border-radius: 6px;
      color: white;
      font-family: 'Marianne', sans-serif;
      font-size: 0.72rem;
      font-weight: 700;
      padding: 0.28rem 0.5rem;
      cursor: pointer;
      transition: background 0.15s;
      letter-spacing: 0.02em;
    }
    .lang-btn:hover { background: rgba(255,255,255,0.28); }
    .lang-btn.actif {
      background: rgba(255,255,255,0.92);
      color: #6e33cc;
      border-color: white;
    }

    /* ===== RTL ARABE — règles complètes ===== */

    /* Layout global */
    body.rtl { font-family: 'Noto Sans Arabic', 'Segoe UI', Arial, sans-serif; }

    /* Header : sélecteur de langue à gauche en RTL */
    body.rtl header { flex-direction: row-reverse; }
    body.rtl .lang-selector { margin-left: 0; margin-right: auto; }

    /* Quiz : inversion du flex dans le header quiz */
    body.rtl .quiz-header {
      direction: rtl;
      flex-direction: row-reverse;
    }
    body.rtl .nav-questions {
      direction: rtl;
      flex-direction: row-reverse;
    }

    /* Flèche du btn-retour : on retire la flèche gauche via CSS pour l'arabe */
    body.rtl .btn-retour { direction: rtl; }

    /* Propositions de réponse */
    body.rtl .proposition {
      flex-direction: row-reverse;
      text-align: right;
    }
    body.rtl .lettre { margin-left: 0.75rem; margin-right: 0; }
    body.rtl .texte-proposition { text-align: right; }

    /* Explication (feedback) */
    body.rtl .explication {
      border-left: none;
      border-right: 3px solid var(--bleu);
      border-radius: 8px 0 0 8px;
      text-align: right;
    }

    /* Bandeau non-officiel */
    body.rtl .bandeau-non-officiel {
      border-left: none;
      border-right: 5px solid #c2410c;
      text-align: right;
    }

    /* Encart révisions (fiches officielles) */
    .encart-revisions {
      background: var(--bleu-clair);
      border: 1px solid var(--bleu-moyen);
      border-left: 5px solid var(--bleu);
      border-radius: 10px;
      padding: 1.1rem 1.25rem;
      margin-bottom: 2rem;
      font-family: 'Marianne', sans-serif;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .encart-revisions .encart-texte { flex: 1; min-width: 240px; }
    .encart-revisions h3 {
      font-size: 0.98rem;
      font-weight: 700;
      color: var(--bleu);
      margin: 0 0 0.25rem;
    }
    .encart-revisions p {
      font-size: 0.84rem;
      color: var(--texte);
      margin: 0;
      line-height: 1.5;
    }
    .encart-revisions .btn-revisions {
      display: inline-block;
      background: var(--bleu);
      color: #fff;
      text-decoration: none;
      font-weight: 700;
      font-size: 0.88rem;
      padding: 0.7rem 1.2rem;
      border-radius: 8px;
      white-space: nowrap;
      transition: all 0.2s ease;
    }
    .encart-revisions .btn-revisions:hover {
      background: #5a27b0;
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(110,51,204,0.3);
    }
    body.rtl .encart-revisions {
      border-left: none;
      border-right: 5px solid var(--bleu);
      text-align: right;
    }

    /* Note mise en situation */
    body.rtl .note-situation {
      border-left: none;
      border-right: 3px solid #c2410c;
      border-radius: 6px 0 0 6px;
      text-align: right;
    }

    /* Barre de progression : labels et progression de droite à gauche */
    body.rtl .barre-progression-labels { flex-direction: row-reverse; }
    body.rtl .barre-remplissage { margin-left: auto; margin-right: 0; }

    /* Résultats */
    body.rtl .resultats-stats { direction: rtl; }
    body.rtl .resultats-thematiques { direction: rtl; text-align: right; }
    body.rtl .thematique-labels { flex-direction: row-reverse; }

    /* Mobile + RTL : le btn-retour reste compact */
    @media (max-width: 600px) {
      body.rtl header { flex-direction: row-reverse; align-items: center; }
      body.rtl .quiz-header { flex-direction: row-reverse; }
    }