/* ⚠️ @import DOIT rester la toute première règle du fichier (corrigé 2026-09).
   La norme CSS ignore silencieusement tout @import placé après une autre
   règle. Il se trouvait auparavant au milieu de la section 2 : la police
   OpenDyslexic n'était donc jamais chargée, et le mode dyslexie affichait
   une police générique à la place. N'ajoute aucune règle au-dessus. */
@import url('https://fonts.cdnfonts.com/css/opendyslexic');

/* ==========================================================================
   1. MODE FOCUS (Lecture de base)
   ========================================================================== */
body.mode-focus-lecture { background-color: #f8fafc; color: #1e293b; font-family: 'Inter', sans-serif; margin: 0; padding: 0; line-height: 1.8; }
.focus-container, .focus-main { max-width: 90%; margin: 0 auto; padding: 0 20px; }
.focus-header { background: #ffffff; border-bottom: 1px solid #e2e8f0; padding: 15px 0; position: sticky; top: 0; z-index: 100; }
.header-flex { display: flex; justify-content: space-between; align-items: center; }
.btn-retour { color: #475569; text-decoration: none; font-weight: 500; font-size: 14px; }
.btn-retour:hover { color: #2563eb; }
.chapitre-actuel { background: #eff6ff; color: #1e3a8a; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 600; }
.header-actions { display: flex; align-items: center; gap: 15px; }
/* align-items:center aligne le menu de voix avec les boutons, et flex-wrap
   évite que la barre déborde sur un écran étroit : sans lui, les éléments
   se compriment jusqu'à devenir illisibles plutôt que de passer à la ligne. */
.outils-accessibilite { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-right: 15px; border-right: 2px solid #e2e8f0; padding-right: 15px; }

/* Le menu de choix de la voix.
   ⚠️ flex-shrink:0 est indispensable : dans un conteneur flexible, un
   <select> se laisse écraser jusqu'à ne plus montrer que sa flèche — c'est
   exactement ce qui se produisait à côté des boutons de vitesse. */
#choix-voix { flex: 0 0 auto; min-width: 120px; max-width: 180px; height: 32px; }
.btn-outil { background: transparent; border: 1px solid #cbd5e1; border-radius: 4px; cursor: pointer; padding: 6px 10px; font-size: 16px; }
.btn-outil:hover { background: #e2e8f0; }
.btn-pdf { background: #2563eb; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; }
.btn-pdf:hover { background: #1d4ed8; }

.focus-article { background: #ffffff; padding: 50px; margin-top: 40px; margin-bottom: 80px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.02); }
.article-titre { font-family: 'Merriweather', serif; font-size: 2.5em; color: #0f172a; margin-top: 0; margin-bottom: 30px; line-height: 1.2; }
.article-contenu h2 { font-family: 'Merriweather', serif; margin-top: 40px; color: #334155; }
.article-contenu p { font-size: 1.1em; margin-bottom: 20px; }
.article-contenu img { max-width: 100%; height: auto; border-radius: 6px; }

/* Encadrés pédagogiques */
.encadre-pedagogique { padding: 25px; margin: 30px 0; border-radius: 8px; border-left: 5px solid; }
.encadre-pedagogique h3 { margin-top: 0; font-size: 1.3em; }
.boite-mots-cles { background-color: #f0f9ff; border-left-color: #0ea5e9; } .boite-mots-cles h3 { color: #0369a1; }
.boite-personnages { background-color: #fffbeb; border-left-color: #f59e0b; } .boite-personnages h3 { color: #b45309; }
.boite-concepts { background-color: #f0fdf4; border-left-color: #10b981; } .boite-concepts h3 { color: #047857; }

/* ==========================================================================
   2. MODE SOMBRE ET DYSLEXIE
   ========================================================================== */
body.mode-sombre { background-color: #0f172a; color: #f8fafc; }
body.mode-sombre .focus-header { background: #1e293b; border-bottom-color: #334155; }
body.mode-sombre .focus-article { background: #1e293b; }
body.mode-sombre .article-titre, body.mode-sombre .article-contenu h2 { color: #f1f5f9; }
body.mode-sombre .outils-accessibilite { border-right-color: #475569; }
body.police-dyslexie * { font-family: 'OpenDyslexic', sans-serif !important; }

/* ==========================================================================
   3. POPUP MODAL (Validation)
   ========================================================================== */
.modal-hidden { display: none; }
#modal-validation { position: fixed; bottom: 20px; right: 20px; width: 320px; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); z-index: 9999; border: 2px solid #2563eb; }
body.mode-sombre #modal-validation { background: #1e293b; border-color: #3b82f6; color: white; }
#modal-validation h3 { margin-top: 0; color: #1e3a8a; }
body.mode-sombre #modal-validation h3 { color: #93c5fd; }
#modal-validation button { display: block; width: 100%; margin-top: 10px; padding: 10px; border-radius: 5px; border: none; cursor: pointer; font-weight: bold; }
#btn-terminer { background: #16a34a; color: white; }
#btn-fermer { background: #f1f5f9; color: #475569; }
body.mode-sombre #btn-fermer { background: #334155; color: #cbd5e1; }

/* ==========================================================================
   4. EXERCICES ET QCM
   ========================================================================== */
.consigne-exercice { color: #64748b; font-style: italic; border-bottom: 2px solid #e2e8f0; padding-bottom: 20px; margin-bottom: 30px; }
.bloc-question { background: #f8fafc; border: 1px solid #e2e8f0; padding: 20px; border-radius: 8px; margin-bottom: 25px; }
body.mode-sombre .bloc-question { background: #334155; border-color: #475569; }
.titre-question { margin-top: 0; font-size: 1.1em; }
.label-choix { display: block; padding: 10px; margin-bottom: 8px; background: white; border: 1px solid #cbd5e1; border-radius: 4px; cursor: pointer; }
body.mode-sombre .label-choix { background: #1e293b; border-color: #475569; }
.label-choix input[type="radio"] { margin-right: 10px; }
.zone-soumission { margin-top: 40px; text-align: center; }
.btn-action-primaire { background: #2563eb; color: white; border: none; padding: 12px 24px; font-size: 1.1em; border-radius: 6px; cursor: pointer; font-weight: bold; }
.resultat-boite { margin-top: 20px; padding: 15px; border-radius: 6px; font-weight: bold; font-size: 1.2em; }
.choix-correct { background: #dcfce7 !important; border-color: #22c55e !important; color: #166534; }
.choix-incorrect { background: #fee2e2 !important; border-color: #ef4444 !important; color: #991b1b; }

/* ==========================================================================
   5. INTERACTIF (Flashcards, Cartes, Lexique, Timeline)
   ========================================================================== */
.flashcards-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin-top: 20px; }
.flashcard { background-color: transparent; height: 150px; perspective: 1000px; cursor: pointer; }
.flashcard-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; border-radius: 8px; }
.flashcard.retournee .flashcard-inner { transform: rotateY(180deg); }
.flashcard-recto, .flashcard-verso { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 15px; box-sizing: border-box; }
.flashcard-recto { background-color: #0ea5e9; color: white; font-weight: bold; font-size: 1.2em; }
.flashcard-verso { background-color: #f0f9ff; color: #0369a1; transform: rotateY(180deg); font-size: 0.9em; border: 2px solid #0ea5e9; overflow-y: auto; }

.carte-histoire { width: 100%; height: 400px; border-radius: 8px; margin: 30px 0; border: 2px solid #cbd5e1; z-index: 1; }

.lexique-alphabet { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; justify-content: center; }
.lexique-alphabet a { display: inline-block; padding: 8px 12px; background: #e2e8f0; color: #1e293b; text-decoration: none; border-radius: 4px; font-weight: bold; }
.lexique-liste li { background: white; padding: 15px; margin-bottom: 10px; border-radius: 6px; border-left: 4px solid #0ea5e9; }
.lexique-mot { font-weight: bold; font-size: 1.1em; display: block; }

.timeline-histoire { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }
.timeline-item { display: flex; align-items: center; background: #f8fafc; padding: 15px; border-radius: 8px; border-left: 4px solid #cbd5e1; }
.timeline-item-complete { border-left-color: #22c55e; background: #f0fdf4; }
.timeline-point { font-size: 24px; margin-right: 15px; }
.bouton-module { display: inline-block; padding: 6px 12px; background: #2563eb; color: white; text-decoration: none; border-radius: 4px; font-size: 13px; margin-top: 5px; }

/* ==========================================================================
   6. TÂCHES COMPLEXES ET GRILLE D'ÉVALUATION
   ========================================================================== */
.boite-grille { background-color: #f8fafc; border-left-color: #6366f1; }
.boite-grille h3 { color: #4f46e5; }
.critere-bloc { margin-bottom: 20px; background: white; padding: 15px; border-radius: 6px; border: 1px solid #e2e8f0; }
.critere-bloc h4 { margin-top: 0; color: #1e293b; border-bottom: 2px solid #e2e8f0; padding-bottom: 5px; }
.critere-bloc ul { list-style-type: none; padding-left: 0; }
.critere-bloc li { padding: 8px 0; border-bottom: 1px dashed #cbd5e1; font-size: 0.95em; }
.critere-bloc li:last-child { border-bottom: none; }

.zone-remise { margin-top: 50px; padding: 30px; background: #eff6ff; border-radius: 8px; border: 2px dashed #93c5fd; }
.zone-remise h3 { margin-top: 0; color: #1e3a8a; text-align: center; }
.formulaire-remise { display: flex; gap: 10px; margin-top: 20px; justify-content: center; flex-wrap: wrap; }
.input-lien { flex: 1; min-width: 250px; padding: 12px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 1em; }
.alerte-succes { background: #dcfce7; color: #166534; padding: 15px; border-radius: 6px; text-align: center; border: 1px solid #22c55e; margin-top: 15px; font-weight: bold; }
.alerte-succes a { color: #15803d; text-decoration: underline; }

/* --- Forcer l'élargissement global de la page de cours --- */
body.mode-focus-lecture .focus-container, 
body.mode-focus-lecture .focus-main,
body.mode-focus-lecture .focus-article {
    max-width: 1100px !important; /* Change 1100px par la largeur souhaitée (ex: 1200px) */
    width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Élargir aussi la zone interne du contenu de l'article */
body.mode-focus-lecture .article-contenu {
    max-width: 100% !important;
}


/* ==========================================================================
   7. DOCUMENTS D'ANALYSE (tâches complexes)
   ==========================================================================
   Produits par l'importateur à partir du champ « documents_texte » du Gem.
   Allure de source d'archive — papier chaud, texte à empattements — pour
   que l'élève distingue d'un coup d'œil ce qu'il ANALYSE (le document) de
   ce qu'on lui DEMANDE (l'encadré vert des consignes).

   La mention de source n'est pas décorative : elle dit à l'élève que le
   document est fictif. Elle doit rester lisible dans tous les modes.
   ========================================================================== */
.document-analyse {
    background: #fdf8ef;
    border: 1px solid #e7dcc6;
    border-left: 5px solid #b08d57;
    border-radius: 8px;
    padding: 22px 26px;
    margin: 24px 0;
    box-shadow: 0 1px 3px rgba(120, 90, 40, 0.06);
    break-inside: avoid;       /* impression et PDF : pas de document coupé en deux */
    page-break-inside: avoid;
}
.document-analyse h3 {
    font-family: 'Merriweather', serif;
    font-size: 1.05em;
    color: #7a5a2e;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e7dcc6;
    letter-spacing: 0.01em;
}
.document-analyse p {
    font-family: 'Merriweather', serif;
    font-size: 1.02em;
    line-height: 1.75;
    color: #3b2f1e;
    margin-bottom: 12px;
}
.document-analyse p:last-child { margin-bottom: 0; }

.document-analyse .document-source {
    font-family: 'Inter', sans-serif;
    font-size: 0.85em;
    color: #7a6a52;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dashed #e0d3b8;
}

/* Mode sombre : un papier clair éblouirait. Brun profond, texte crème. */
body.mode-sombre .document-analyse {
    background: #2a2419;
    border-color: #4a3f2c;
    border-left-color: #b08d57;
    box-shadow: none;
}
body.mode-sombre .document-analyse h3 { color: #d8b77e; border-bottom-color: #4a3f2c; }
body.mode-sombre .document-analyse p { color: #ede3cf; }
body.mode-sombre .document-analyse .document-source { color: #b5a582; border-top-color: #4a3f2c; }

/* Mode dyslexie : la règle globale impose déjà OpenDyslexic partout, ce
   qui est voulu. On aère seulement un peu plus, cette police étant plus
   large que Merriweather. */
body.police-dyslexie .document-analyse p { line-height: 1.9; letter-spacing: 0.02em; }

/* Téléphone : moins de marge intérieure, sinon le texte se tasse */
@media (max-width: 600px) {
    .document-analyse { padding: 16px 16px; margin: 18px 0; }
}


/* ==========================================================================
   8. BOUTONS DE LECTURE AUDIO PAR SECTION (tâches complexes)
   ==========================================================================
   Injectés par le JavaScript : « Écouter ce document », « Écouter les
   consignes », « Relire mon texte ». Discrets par défaut, pour ne pas
   voler l'attention au texte lui-même. Contrastes vérifiés (≥ 4,5:1).
   ========================================================================== */
.btn-lire-section {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    padding: 4px 12px;
    margin: 0 0 12px 0;
    border: 1.5px solid #095496;
    border-radius: 99px;
    background: #ffffff;
    color: #095496;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.btn-lire-section:hover,
.btn-lire-section[aria-pressed="true"] {
    background: #095496;
    color: #ffffff;
}
.btn-lire-section:focus-visible {
    outline: 3px solid #fcb900;
    outline-offset: 2px;
}
/* « Relire mon texte » se trouve sous la zone de rédaction : pas de marge du bas */
.zone-remise-tache .btn-lire-section { margin: 8px 0 0 0; }

body.mode-sombre .btn-lire-section {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #64748b;
}
body.mode-sombre .btn-lire-section:hover,
body.mode-sombre .btn-lire-section[aria-pressed="true"] {
    background: #e2e8f0;
    color: #0f172a;
    border-color: #e2e8f0;
}

@media print {
    .btn-lire-section { display: none; }
}