/* /home/bacflora/www/style.css
   ---------------------------------------------------------------
   La couleur porte l'identité des matières — maths bleu marine,
   physique-chimie vert, français violet, anglais ocre — et les
   boutons d'action la reprennent. Le verdict garde ses couleurs
   propres, uniquement sur les bordures des réponses.
   Serif pour ce qui se lit, sans pour ce qui se manipule.
   --------------------------------------------------------------- */

:root {
  --fond:   #f6f4ef;
  --carte:  #ffffff;
  --creux:  #efebe3;
  --trait:  #e2ddd3;
  --texte:  #1b1c21;
  --doux:   #5f6473;

  /* Action par défaut : framboise. Choisi pour ne ressembler à aucune
     couleur de matière (marine, vert, violet, ocre) ni aux deux
     couleurs de verdict. Pour en changer, ces deux lignes suffisent.
     Autres teintes possibles : #0f7b8a (bleu canard), #8a5a1f (bronze). */
  --accent:      #a62a62;
  --accent-fonce:#8d2154;

  --juste: #1a8558;  --juste-fond: #e4f3ec;
  --faux:  #c03f2b;  --faux-fond:  #fbe9e6;

  --maths:    #24427c;  --maths-clair:    #e8edf7;
  --physique: #17795a;  --physique-clair: #e3f3ed;
  --francais: #71409f;  --francais-clair: #f0e9f8;
  --anglais:  #9a5518;  --anglais-clair:  #fbeee0;
  --autre:    #555b6b;  --autre-clair:    #eceef2;

  --ombre:   0 1px 2px rgba(27,28,33,.06), 0 4px 16px rgba(27,28,33,.06);
  --ombre-f: 0 2px 8px rgba(27,28,33,.14), 0 12px 28px rgba(27,28,33,.12);
  --r: 18px;
  --lire: ui-serif, Charter, "Iowan Old Style", Georgia, serif;
  --agir: system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #15161b; --carte: #1f2128; --creux: #1a1c22;
    --trait: #333640; --texte: #edeff4; --doux: #99a0b0;
    --accent: #ee89b2; --accent-fonce: #e370a0;
    --juste: #4ecb91; --juste-fond: rgba(78,203,145,.12);
    --faux:  #e8806b; --faux-fond:  rgba(232,128,107,.12);
    --maths: #7ea3e2; --maths-clair: rgba(126,163,226,.14);
    --physique: #56c69a; --physique-clair: rgba(86,198,154,.14);
    --francais: #b48ceb; --francais-clair: rgba(180,140,235,.14);
    --anglais: #e0a469; --anglais-clair: rgba(224,164,105,.14);
    --autre: #a3aab8; --autre-clair: rgba(163,170,184,.12);
    --ombre: none; --ombre-f: none;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 400 16px/1.6 var(--agir);
  padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- Onglets ---- */
.onglets { display: flex; gap: 4px; padding: 7px 10px 0; background: var(--fond);
           border-bottom: 1px solid var(--trait); position: sticky; top: 0; z-index: 5; }
.onglets a { flex: 1; padding: 13px 8px 12px; text-align: center; text-decoration: none;
             color: var(--doux); font-size: 15px; font-weight: 500;
             border-radius: 12px 12px 0 0; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.onglets a.actif { color: var(--accent); background: var(--carte); border-bottom-color: var(--accent); }

/* ---- Jauge ---- */
.jauge { display: flex; gap: 4px; max-width: 620px; margin: 18px auto 0; padding: 0 22px; }
.jauge i { flex: 1; height: 5px; border-radius: 3px; background: var(--trait); transition: background .25s ease; }
.jauge i.fait { background: var(--juste); }
.jauge i.rate { background: var(--faux); opacity: .6; }

main { max-width: 620px; margin: 0 auto; padding: 24px 22px 36px; }
.attente, .vide { color: var(--doux); text-align: center; padding: 60px 0; font-size: 15px; }

/* ---- Énoncé ---- */
.enonce { font-family: var(--lire); font-size: 21px; line-height: 1.5; margin: 6px 0 26px; }
.enonce img { max-width: 100%; height: auto; display: block; margin: 18px 0; border-radius: 12px; }
.consigne { color: var(--doux); font-size: 14.5px; margin: 0 0 12px; }

/* ---- Confiance ---- */
.confiance { display: flex; gap: 10px; }
.confiance button {
  flex: 1; min-height: 58px; padding: 15px 6px; font: 500 15px var(--agir);
  background: var(--carte); color: var(--accent);
  border: 1.5px solid var(--trait); border-radius: var(--r); cursor: pointer;
  box-shadow: var(--ombre); transition: transform .13s ease, border-color .13s ease, background .15s ease;
}
.confiance button:active { transform: translateY(1px) scale(.985); border-color: var(--accent); background: var(--autre-clair); }

/* ---- Options ---- */
.options { display: flex; flex-direction: column; gap: 10px; }
.option {
  width: 100%; min-height: 60px; text-align: left; padding: 17px 19px;
  font: 400 16px/1.45 var(--agir); background: var(--carte); color: var(--texte);
  border: 1.5px solid var(--trait); border-radius: var(--r); cursor: pointer;
  box-shadow: var(--ombre);
  transition: transform .13s ease, border-color .13s ease, background .2s ease;
}
.option:active:not([disabled]) { transform: translateY(1px) scale(.99); border-color: var(--accent); }
.option[disabled] { cursor: default; opacity: .45; box-shadow: none; }
.option.juste { border-color: var(--juste); border-width: 2.5px; background: var(--juste-fond); opacity: 1; font-weight: 500; }
.option.faux  { border-color: var(--faux);  border-width: 2.5px; background: var(--faux-fond);  opacity: 1; }
button:focus-visible, a:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; }

/* ---- Verdict ---- */
.retour { margin-top: 24px; padding: 18px 20px; border-radius: var(--r);
          background: var(--carte); border: 1.5px solid var(--trait);
          border-left: 5px solid var(--faux); box-shadow: var(--ombre);
          animation: monte .24s cubic-bezier(.2,.7,.3,1); }
.retour.ok { border-left-color: var(--juste); }
@keyframes monte { from { opacity: 0; transform: translateY(8px); } }
.retour .verdict { font-weight: 600; font-size: 16px; margin: 0 0 10px; color: var(--faux); }
.retour.ok .verdict { color: var(--juste); }
.retour p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.55; }
.retour .piege { color: var(--doux); font-size: 14.5px; }
.retour .schema { display: block; width: 100%; height: auto; margin: 16px 0 2px; }

/* ---- Indice ---- */
.indice { margin-top: 20px; }
.indice button { font: 500 14.5px var(--agir); background: none; color: var(--accent);
                 border: 1.5px dashed var(--accent); border-radius: var(--r);
                 padding: 14px 16px; cursor: pointer; width: 100%; opacity: .85; }
.indice p { margin: 10px 0 0; padding: 14px 16px; font-size: 15px;
            background: var(--autre-clair); border-radius: 14px; }

/* ---- Boutons ---- */
.barre { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.barre button, .bouton {
  flex: 1 1 132px; min-height: 56px; padding: 15px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font: 600 16px var(--agir); text-decoration: none; border-radius: var(--r); cursor: pointer;
  border: 1.5px solid var(--trait); background: var(--carte); color: var(--accent);
  box-shadow: var(--ombre); transition: transform .13s ease, box-shadow .13s ease, filter .13s ease;
}
.barre button:active, .bouton:active { transform: translateY(2px); box-shadow: none; }
.barre .principal, .bouton.principal {
  background: var(--accent); border-color: var(--accent); color: var(--sur-plein); box-shadow: var(--ombre-f);
}
.barre .principal:active, .bouton.principal:active { filter: brightness(.94); }

/* Boutons teintés par matière */
.m-maths    .principal { background: var(--maths);    border-color: var(--maths); }
.m-physique .principal { background: var(--physique); border-color: var(--physique); }
.m-francais .principal { background: var(--francais); border-color: var(--francais); }
.m-anglais  .principal { background: var(--anglais);  border-color: var(--anglais); }
.m-maths    .bouton:not(.principal) { color: var(--maths); }
.m-physique .bouton:not(.principal) { color: var(--physique); }
.m-francais .bouton:not(.principal) { color: var(--francais); }
.m-anglais  .bouton:not(.principal) { color: var(--anglais); }

.pied { margin-top: 28px; text-align: center; }
.pied button { font: 500 15px var(--agir); background: none; color: var(--doux);
               border: none; padding: 13px 20px; cursor: pointer;
               text-decoration: underline; text-underline-offset: 4px; }
.sortir { display: flex; gap: 10px; justify-content: center; margin: 36px 0 20px; flex-wrap: wrap; }
.sortir a { color: var(--doux); font-size: 14px; font-weight: 500; text-decoration: none;
            padding: 11px 18px; border-radius: 12px; border: 1.5px solid var(--trait); background: var(--carte); }

/* ---- Connexion ---- */
.connexion { max-width: 370px; margin: 12vh auto 0; padding: 0 22px; }
.qui { display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; }
.qui label { padding: 17px 19px; border: 1.5px solid var(--trait); border-radius: var(--r);
             background: var(--carte); cursor: pointer; font-size: 16px; box-shadow: var(--ombre); }
.qui input { margin-right: 12px; accent-color: var(--accent); }
.code { width: 100%; padding: 17px; font: 600 23px var(--agir); letter-spacing: .34em;
        text-align: center; border: 1.5px solid var(--trait); border-radius: var(--r);
        background: var(--carte); color: var(--texte); margin-bottom: 14px; box-shadow: var(--ombre); }
.connexion .principal { width: 100%; min-height: 56px; padding: 16px; font: 600 16px var(--agir);
                        border-radius: var(--r); background: var(--accent); border: none;
                        color: var(--sur-plein); cursor: pointer; box-shadow: var(--ombre-f); }
.erreur { color: var(--faux); margin: 0 0 14px; font-size: 15px; }

/* ---- Bandeaux et pastilles de matière ---- */
.matiere { display: flex; align-items: center; gap: 10px; margin: 32px 0 10px; }
.matiere .pastille { width: 12px; height: 12px; border-radius: 4px; background: var(--autre); flex: none; }
.matiere h3 { font: 600 16px var(--agir); margin: 0; }
.m-maths    .pastille { background: var(--maths); }
.m-physique .pastille { background: var(--physique); }
.m-francais .pastille { background: var(--francais); }
.m-anglais  .pastille { background: var(--anglais); }
.m-maths    .matiere h3, .matiere.m-maths h3    { color: var(--maths); }
.m-physique .matiere h3, .matiere.m-physique h3 { color: var(--physique); }
.m-francais .matiere h3, .matiere.m-francais h3 { color: var(--francais); }
.m-anglais  .matiere h3, .matiere.m-anglais h3  { color: var(--anglais); }

/* ---- Cartes ---- */
.carte { background: var(--carte); border: 1.5px solid var(--trait); border-radius: var(--r);
         padding: 18px; margin: 12px 0; box-shadow: var(--ombre); }
.carte.m-maths    { border-left: 5px solid var(--maths);    background: linear-gradient(var(--maths-clair), var(--carte) 60px); }
.carte.m-physique { border-left: 5px solid var(--physique); background: linear-gradient(var(--physique-clair), var(--carte) 60px); }
.carte.m-francais { border-left: 5px solid var(--francais); background: linear-gradient(var(--francais-clair), var(--carte) 60px); }
.carte.m-anglais  { border-left: 5px solid var(--anglais);  background: linear-gradient(var(--anglais-clair), var(--carte) 60px); }
.carte .titre { font: 600 17.5px/1.35 var(--agir); margin: 0 0 6px; }
.carte .meta  { color: var(--doux); font-size: 13.5px; margin: 0 0 14px; }
.carte.risque-maximal { border-left: 5px solid var(--faux); }
.carte.risque-eleve   { border-left: 5px solid #c08010; }
.carte.risque-nul     { border-left: 5px solid var(--juste); }
.carte .enonce { font-size: 17px; margin: 0 0 12px; }

/* Étiquette d'état */
.etat { display: inline-block; padding: 4px 11px; border-radius: 999px;
        font-size: 12.5px; font-weight: 600; background: var(--autre-clair); color: var(--doux); }
.etat.presenter { background: var(--francais-clair); color: var(--francais); }
.etat.solide    { background: var(--juste-fond); color: var(--juste); }

.texte-oral { font-family: var(--lire); font-size: 17.5px; line-height: 1.8;
              border-left: 5px solid var(--francais); }

/* ---- Vue parent ---- */
.parent h2 { font: 600 20px var(--agir); margin: 36px 0 8px; }
.parent h2 small { color: var(--doux); font-weight: 400; font-size: 15px; }
.parent h3 { font: 600 16px var(--agir); margin: 24px 0 4px; color: var(--doux); }
.opts { padding-left: 20px; margin: 0 0 10px; font-size: 15px; }
.opts li { margin: 4px 0; }
.opts li.ok { color: var(--juste); font-weight: 600; }
.opts .piege { color: var(--doux); font-weight: 400; }
.explication { font-size: 15px; margin: 10px 0; }
.source { color: var(--doux); font-size: 13px; margin: 5px 0; }
.ligne { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
.ligne span { flex: 1; font-size: 15px; }
.ligne select, .ligne input[type=text] { font: inherit; font-size: 15px; padding: 10px 12px;
  border: 1.5px solid var(--trait); border-radius: 12px; background: var(--carte); color: var(--texte); }
.ligne input[type=text] { flex: 1; }
.ligne .principal { padding: 11px 17px; font: 600 15px var(--agir); border-radius: 12px;
                    background: var(--accent); border: none; color: var(--sur-plein); cursor: pointer; }
.diag { background: var(--creux); border: 1.5px solid var(--trait); border-radius: var(--r);
        padding: 16px; font-size: 12.5px; line-height: 1.65; overflow-x: auto; white-space: pre; }
.journal { width: 100%; border-collapse: collapse; font-size: 14.5px; margin-top: 10px; }
.journal th { text-align: left; font-weight: 600; color: var(--doux); font-size: 13px;
              padding: 9px 10px; border-bottom: 1.5px solid var(--trait); }
.journal td { padding: 12px 10px; border-bottom: 1px solid var(--trait); }
.journal td:last-child, .journal th:last-child { text-align: right; }
.journal .taux { font-variant-numeric: tabular-nums; }
.journal .cible { color: var(--juste); font-weight: 600; }
.journal .bas   { color: var(--faux); font-weight: 600; }

/* ---- Fiche de notion : un texte long, à lire ---- */
.fiche {
  font-family: var(--lire); font-size: 17px; line-height: 1.85;
  border-left: 5px solid var(--francais); padding: 22px 24px;
}

/* ---- Parent : ligne de choix de l'enfant, au-dessus des onglets ---- */
.onglets-eleves { position: static; background: var(--creux); padding-top: 4px; }
.onglets-eleves a { padding: 9px 8px; font-size: 13.5px; }
.onglets-eleves a.actif { background: var(--fond); }
.onglets-eleves + .onglets { top: 0; }

/* ---- Réponse par étapes ---- */
.enonce-court { font-size: 17px; margin: 4px 0 16px; }
.progression-etapes { display: flex; gap: 8px; margin: 0 0 16px; }
.progression-etapes span {
  width: 30px; height: 30px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font: 600 14px var(--agir);
  background: var(--creux); color: var(--doux); border: 1.5px solid var(--trait);
}
.progression-etapes span.fait    { background: var(--juste-fond); color: var(--juste); border-color: var(--juste); }
.progression-etapes span.courant { background: var(--accent); color: var(--sur-plein); border-color: var(--accent); }
.etape-titre { font: 600 16.5px/1.4 var(--agir); margin: 0 0 8px; color: var(--accent); }
.champ-etape {
  width: 100%; min-height: 120px; padding: 14px 16px; resize: vertical;
  font: 400 16px/1.55 var(--agir);           /* 16 px : évite le zoom d'iOS */
  background: var(--carte); color: var(--texte);
  border: 1.5px solid var(--trait); border-radius: var(--r); box-shadow: var(--ombre);
}
.champ-etape:focus { outline: none; border-color: var(--accent); }
.comparaison { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
@media (max-width: 520px) { .comparaison { grid-template-columns: 1fr; } }
.cote-eleve, .cote-attendu {
  padding: 13px 15px; border-radius: 14px; font-size: 15px; line-height: 1.5;
  border: 1.5px solid var(--trait); background: var(--carte);
}
.cote-attendu { border-color: var(--juste); background: var(--juste-fond); }
.cote-eleve p, .cote-attendu p { margin: 4px 0 0; white-space: pre-wrap; }
.cote-titre { font: 600 12.5px var(--agir); text-transform: uppercase; letter-spacing: .04em; color: var(--doux); margin: 0 !important; }
.criteres { margin: 16px 0 4px; }
.critere {
  display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; margin: 8px 0;
  border: 1.5px solid var(--trait); border-radius: 14px; background: var(--carte);
  font-size: 15px; line-height: 1.45; cursor: pointer;
}
.critere input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--juste); }
.recap-etape { margin: 14px 0; }

/* ---- Partage vers le parent ---- */
.partage { margin: 18px 0 4px; }
.lien-partage {
  width: 100%; min-height: 50px; padding: 13px 16px; cursor: pointer;
  font: 500 15px var(--agir); color: var(--accent); background: var(--carte);
  border: 1.5px dashed var(--accent); border-radius: var(--r);
}
.lien-partage.principal-doux { border-style: solid; background: var(--autre-clair); }
.partage .verdict { margin: 6px 0; }
/* Page des partages, côté parent */
.carte.non-lu { border-left: 5px solid var(--accent); }
.partage-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 10px; }
.mot-eleve {
  font-family: var(--lire); font-size: 16.5px; line-height: 1.55; margin: 10px 0;
  padding: 12px 15px; border-radius: 14px; background: var(--autre-clair);
}
.texte-a-copier { width: 100%; min-height: 140px; font: 13px/1.5 ui-monospace, monospace;
  padding: 12px; border-radius: 12px; border: 1.5px solid var(--trait);
  background: var(--creux); color: var(--texte); }

/* ---- Avancement dans un chapitre ---- */
.avancement { margin: 10px 0 14px; }
.avancement-ligne { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
                    font-size: 13.5px; color: var(--doux); margin-bottom: 6px; }
.avancement-ligne > span:first-child { font-weight: 600; color: var(--texte); }
.piste { position: relative; height: 8px; border-radius: 5px; background: var(--trait); overflow: hidden; }
.piste i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.piste i.vu     { background: var(--accent); opacity: .35; }
.piste i.reussi { background: var(--juste); }
.progression-chapitre {
  font-size: 13.5px; color: var(--doux); margin: 0 0 12px; padding: 9px 13px;
  border-radius: 12px; background: var(--creux);
}
.progression-chapitre.complet { color: var(--juste); background: var(--juste-fond); font-weight: 600; }

/* ---- Réponse tapée ---- */
.champ-saisie {
  width: 100%; min-height: 56px; padding: 14px 16px;
  font: 500 18px var(--agir);               /* 18 px : lisible, sans zoom iOS */
  background: var(--carte); color: var(--texte);
  border: 1.5px solid var(--trait); border-radius: var(--r); box-shadow: var(--ombre);
}
.champ-saisie:focus { outline: none; border-color: var(--accent); }
.champ-saisie:disabled { opacity: .7; }

/* ---- Brouillon écrit avant les propositions ----
   C'est l'élément à confronter à la correction : il doit se voir. */
.brouillon-rappel {
  margin: 0 0 18px; padding: 14px 17px; border-radius: 14px;
  background: var(--carte); border: 1.5px solid var(--accent);
  border-left: 5px solid var(--accent); box-shadow: var(--ombre);
}
.brouillon-rappel .cote-titre { color: var(--accent) !important; }
.brouillon-rappel .brouillon-texte {
  margin: 6px 0 0; font-family: var(--lire); font-size: 17px; line-height: 1.55;
  color: var(--texte); white-space: pre-wrap;
}

/* ---- Bascule « écrire avant » ---- */
.bascule-ecrire { max-width: 620px; margin: 12px auto 0; padding: 0 22px; }
.bascule-ecrire label {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: 14px; color: var(--doux); padding: 9px 13px;
  border: 1.5px solid var(--trait); border-radius: 12px; background: var(--carte);
}
.bascule-ecrire input { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.bascule-ecrire input:checked + span { color: var(--accent); font-weight: 600; }

/* Comparaison après correction : la colonne de l'élève se distingue */
.retour + .comparaison { margin-top: 12px; }
.retour + .comparaison .cote-eleve { border-color: var(--accent); border-left-width: 5px; }
.retour + .comparaison .cote-eleve .cote-titre { color: var(--accent); }
.retour + .comparaison p:not(.cote-titre) { font-family: var(--lire); font-size: 16.5px; }

/* ---- Bilan d'une rédaction : les deux paragraphes assemblés ---- */
.reponse-modele, .reponse-mienne {
  font-family: var(--lire); font-size: 17px; line-height: 1.7; padding: 18px 20px;
}
.reponse-modele { border-left: 5px solid var(--juste); background: var(--juste-fond); }
.reponse-mienne { border-left: 5px solid var(--accent); }
.reponse-modele p, .reponse-mienne p { margin: 0; white-space: pre-wrap; }

/* ---- Oral blanc : le minuteur ---- */
.chrono {
  font: 700 46px/1.1 var(--agir); font-variant-numeric: tabular-nums;
  text-align: center; padding: 22px 0 18px; color: var(--francais);
}
.chrono.depasse { color: var(--faux); }

/* ---- Rappel de la méthode, en gris clair ---- */
:root { --gris-clair: #a9adb8; }
@media (prefers-color-scheme: dark) { :root { --gris-clair: #6b7080; } }
.rappel-etapes {
  margin: 4px 0 16px; padding: 10px 14px 10px 34px;
  border-left: 3px solid var(--trait); border-radius: 0 10px 10px 0;
  font-size: 13.5px; line-height: 1.6; color: var(--gris-clair);
}
.rappel-etapes li { margin: 1px 0; }
.rappel-etapes li.courant { color: var(--texte); font-weight: 600; }
.rappel-etapes li.fait    { color: var(--gris-clair); }

/* ---- Lien de retour, sur les pages de second niveau ---- */
.retour-nav { max-width: 620px; margin: 12px auto 0; padding: 0 22px; }
.retour-nav a {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px;
  font: 600 14.5px var(--agir); color: var(--accent); text-decoration: none;
  border: 1.5px solid var(--trait); border-radius: 12px; background: var(--carte);
}

/* ---- Document à étudier, visible à chaque étape ---- */
.document-etape { margin: 14px 0 4px; cursor: zoom-in; }
.document-etape img {
  display: block; width: 100%; height: auto; border-radius: 12px;
  border: 1.5px solid var(--trait); box-shadow: var(--ombre);
}
.document-etape figcaption {
  font: 500 12.5px var(--agir); color: var(--gris-clair); text-align: center; margin-top: 6px;
}
.document-etape.plein-ecran {
  position: fixed; inset: 0; z-index: 50; margin: 0; padding: 16px;
  background: rgba(10, 10, 14, .94); cursor: zoom-out;
  display: flex; flex-direction: column; justify-content: center;
}
.document-etape.plein-ecran img {
  max-height: 88vh; object-fit: contain; border: none; box-shadow: none; border-radius: 4px;
}
.document-etape.plein-ecran figcaption { color: #ccc; }

/* Les énoncés longs — un document à étudier — gardent leurs paragraphes. */
.enonce { white-space: pre-line; }

/* ---- Texte de l'oral, numéroté comme dans l'édition ---- */
.texte-numerote { font-family: var(--lire); font-size: 17px; line-height: 1.75; }
.ligne-texte { display: grid; grid-template-columns: 2.2em 1fr; }
.ligne-texte .num {
  color: var(--gris-clair); font: 600 12.5px var(--agir);
  text-align: right; padding-right: .9em; padding-top: .3em;
}

/* ---- Onglet Oral : avancement de chaque texte ---- */
.jauge-texte {
  position: relative; height: 8px; margin: 8px 0 4px; border-radius: 4px;
  background: var(--trait); overflow: hidden;
}
.jauge-texte span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--francais); opacity: .35; }
.jauge-texte span.ok { opacity: 1; }

/* ---- Relevé du professeur : lecture verticale, sans défilement ---- */
.analyse { padding: 16px 18px; overflow-wrap: anywhere; }
.analyse-titre {
  margin: 18px 0 8px; font: 700 13px var(--agir); letter-spacing: .04em;
  color: var(--francais); text-transform: uppercase;
}
.analyse-titre:first-child { margin-top: 0; }
.analyse-ligne { padding: 9px 0; border-bottom: 1px solid var(--trait); }
.analyse-ligne:last-child { border-bottom: none; }
.analyse-ligne .cit {
  display: block; font-family: var(--lire); font-size: 16.5px; font-weight: 600; color: var(--texte);
}
.analyse-ligne .proc {
  display: inline-block; margin: 5px 8px 0 0; padding: 2px 9px; border-radius: 10px;
  font: 600 12.5px var(--agir); color: var(--francais); background: var(--francais-clair);
}
.analyse-ligne .eff { display: inline; font-size: 15px; color: var(--doux); line-height: 1.5; }
.analyse-ligne .proc + .eff::before { content: "→ "; color: var(--francais); }
.analyse-texte { margin: 6px 0; font-size: 15.5px; line-height: 1.6; }
.analyse-espace { height: 6px; }

/* ---- Entraînement à l'oral ---- */
.texte-oral-plie { margin: 10px 0 16px; }
.texte-oral-plie summary { cursor: pointer; font: 600 14px var(--agir); color: var(--francais); padding: 6px 0; }
.texte-oral-plie .texte-numerote { margin-top: 8px; padding: 14px 16px; background: var(--carte); border: 1.5px solid var(--trait); border-radius: 12px; }
.ligne-texte.surligne { background: var(--francais-clair); border-radius: 4px; }
.ligne-texte.surligne .num { color: var(--francais); }

/* ---- Fiche de révision ---- */
.fiche-oral .deroule { margin: 12px 0 18px; }
.fiche-oral .deroule img { width: 100%; height: auto; display: block; }
.fiche-etape { margin: 22px 0 0; }
.fiche-etape .etape-titre small { font-weight: 500; color: var(--doux); margin-left: 6px; }
.ligne-texte.mvt0 { box-shadow: inset 4px 0 0 #71409f; }
.ligne-texte.mvt1 { box-shadow: inset 4px 0 0 #a62a62; }
.ligne-texte.mvt2 { box-shadow: inset 4px 0 0 #17795a; }
.ligne-texte.mvt3 { box-shadow: inset 4px 0 0 #b0601a; }
@media print {
  .ne-pas-imprimer, .onglets, .retour-nav { display: none !important; }
  body { background: #fff; }
  .carte { box-shadow: none; break-inside: avoid; }
  .fiche-etape { break-inside: avoid; }
}

/* ---- Questions et réponses ---- */
.qr { padding: 0; }
.qr summary { cursor: pointer; padding: 14px 16px; font-family: var(--lire); font-size: 16px; line-height: 1.5; list-style: none; }
.qr summary::-webkit-details-marker { display: none; }
.qr[open] summary { border-bottom: 1px solid var(--trait); }
.qr-num { display: inline-block; min-width: 1.8em; font: 700 13px var(--agir); color: var(--accent); }
.qr-reponse, .qr-explication, .qr-etape { margin: 0; padding: 10px 16px; }
.qr-reponse { font-size: 15.5px; line-height: 1.55; background: var(--juste-fond); }
.qr-explication { font-size: 14.5px; line-height: 1.55; color: var(--doux); }
.qr-etape { border-bottom: 1px solid var(--trait); }
.qr-etape .qr-question { margin: 0 0 6px; font-weight: 600; font-size: 15px; }
.qr-etape .qr-reponse { padding: 8px 12px; border-radius: 8px; }

/* ---- Couleurs des étapes de l'oral : les mêmes partout ---- */
.analyse-section { border-left: 4px solid var(--c); background: var(--cf); border-radius: 0 10px 10px 0; padding: 4px 12px 6px; margin: 10px 0; }
.analyse-section .analyse-titre { color: var(--c); }
.analyse-section .proc { color: var(--c); }
.fiche-etape { border-left: 5px solid var(--c, transparent); padding-left: 12px; }
.fiche-etape .etape-titre { color: var(--c, inherit); }
.legende-oral { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.legende-oral span { font: 600 12.5px var(--agir); padding: 4px 10px; border-radius: 12px; border: 1.5px solid; }
.ligne-texte { border-radius: 3px; }

/* =================================================================
   FONDS COLORÉS : texte toujours foncé, dans les deux modes.
   Règle : sur un fond coloré, on écrit en noir ou en gris foncé.
   1. Le fond reste pastel, même en mode sombre.
   2. À l'intérieur, toutes les couleurs de texte sont redéfinies en
      version foncée : texte principal, texte secondaire, titres de
      couleur. Ce qui est écrit dessus devient lisible d'office.
   ================================================================= */
:root {
  --p-juste: #e4f3ec; --p-faux: #fbe9e6; --p-francais: #f0e9f8; --p-autre: #eceef2;
}
.option.juste, .option.faux, .indice p, .etat, .progression-etapes span.fait,
.cote-attendu, .reponse-modele, .progression-chapitre.complet, .qr-reponse,
.mot-eleve, .lien-partage.principal-doux, .confiance button:active,
.analyse-section, .analyse-ligne .proc, .ligne-texte.surligne,
.ligne-texte[style*="background"], .legende-oral span {
  --texte: #1b1c21; --doux: #3d4250; --gris-clair: #555b6b;
  --maths: #24427c; --physique: #17795a; --francais: #71409f; --anglais: #9a5518;
  --juste: #1a8558; --faux: #c03f2b; --autre: #555b6b; --accent: #a62a62;
  color: #1b1c21;
}
.option.juste                 { background: var(--p-juste) !important; }
.option.faux                  { background: var(--p-faux) !important; }
.indice p, .etat, .mot-eleve,
.lien-partage.principal-doux,
.confiance button:active      { background: var(--p-autre) !important; }
.etat.presenter,
.analyse-ligne .proc,
.ligne-texte.surligne         { background: var(--p-francais) !important; }
.etat.solide, .progression-etapes span.fait, .cote-attendu, .reponse-modele,
.progression-chapitre.complet, .qr-reponse { background: var(--p-juste) !important; }

/* Le texte secondaire et les numéros de ligne, en gris foncé */
.analyse-section .eff, .analyse-section .analyse-texte { color: #3d4250; }
.ligne-texte[style*="background"] .num, .ligne-texte.surligne .num { color: #555b6b; }
.analyse-section .cit, .ligne-texte[style*="background"] span:last-child { color: #1b1c21; }

/* En mode clair, les cartes de matière ont un dégradé pastel :
   leur texte secondaire passe lui aussi en gris foncé. */
@media (prefers-color-scheme: light) {
  .carte.m-maths, .carte.m-physique, .carte.m-francais, .carte.m-anglais { --doux: #4a4f5c; }
}

/* ---- Fiche de révision d'un chapitre ---- */
.fiche-chapitre { padding: 18px 18px 8px; }
.fiche-chapitre .fiche-nom { margin: 0 0 8px; font-size: 18px; }
.fiche-titre {
  margin: 20px 0 8px; padding: 6px 10px; border-radius: 8px;
  font: 700 13.5px var(--agir); letter-spacing: .03em;
  background: var(--p-autre, #eceef2); color: #1b1c21;
}
.m-maths .fiche-titre    { background: #e8edf7; color: #24427c; }
.m-physique .fiche-titre { background: #e3f3ed; color: #17795a; }
.m-francais .fiche-titre { background: #f0e9f8; color: #71409f; }
.fiche-texte { margin: 8px 0; font-size: 15.5px; line-height: 1.6; }
.fiche-liste { margin: 6px 0 10px; padding-left: 22px; font-size: 15.5px; line-height: 1.55; }
.fiche-liste li { margin: 4px 0; }
.fiche-piege { margin: 10px 0; padding: 9px 12px; border-radius: 8px; background: #fbe9e6; color: #1b1c21; font-size: 15px; line-height: 1.5; border-left: 4px solid #c03f2b; }
.fiche-schema { margin: 12px 0 14px; }

/* ---- Entraînement à l'oral : temps et chronomètre ---- */
.oral-accueil { padding: 18px; }
.oral-temps-total { font: 700 22px var(--agir); color: var(--francais); margin: 0 0 10px; }
.oral-objectif { font: 700 17px var(--agir); margin: 6px 0 4px; }
.oral-objectif.depasse { color: var(--faux); }
.oral-temps { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15px; }
.oral-temps th, .oral-temps td { padding: 8px 10px; border-bottom: 1px solid var(--trait); text-align: left; }
.oral-temps td:nth-child(2), .oral-temps td:nth-child(3), .oral-temps th:nth-child(2), .oral-temps th:nth-child(3) { text-align: right; white-space: nowrap; }
.oral-temps td.depasse { color: var(--faux); font-weight: 700; }
.oral-temps tr.total td { font-weight: 700; border-bottom: none; }

/* =================================================================
   IMPRESSION — toutes les pages imprimables (fiches, textes de l'oral)
   1. Un texte de document imprimé : 11 points environ, lisible.
   2. Chaque bloc (texte numéroté, section de relevé, étape, partie de
      fiche, schéma) reste sur une seule page quand il y tient ; un bloc
      plus long qu'une page est coupé, faute de mieux.
   3. Toujours en clair, sans boutons ni navigation, couleurs gardées.
   ================================================================= */
@media print {
  :root {
    --fond: #ffffff; --carte: #ffffff; --creux: #efebe3; --trait: #e2ddd3;
    --texte: #1b1c21; --doux: #4a4f5c; --accent: #a62a62;
    --juste: #1a8558; --juste-fond: #e4f3ec; --faux: #c03f2b; --faux-fond: #fbe9e6;
    --maths: #24427c; --maths-clair: #e8edf7; --physique: #17795a; --physique-clair: #e3f3ed;
    --francais: #71409f; --francais-clair: #f0e9f8; --anglais: #9a5518; --anglais-clair: #fbeee0;
    --autre: #555b6b; --autre-clair: #eceef2;
  }
  @page { margin: 12mm 12mm 14mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { background: #ffffff !important; color: #1b1c21; font-size: 10pt; }
  .ne-pas-imprimer, .onglets, .retour-nav, .barre, figcaption,
  .bascule-ecrire, .progression-etapes { display: none !important; }
  main.parent { max-width: none; padding: 0; }
  .carte { box-shadow: none !important; border: 0.5pt solid #d8d3c8; background: #ffffff; color: #1b1c21; padding: 8pt 10pt; margin: 6pt 0; }

  /* Tailles de texte : un document, pas un écran de téléphone */
  h2 { font-size: 15pt; margin: 0 0 6pt; }
  h2 small { font-size: 10pt; }
  .fiche-titre { font-size: 10pt; margin: 9pt 0 3pt; padding: 2.5pt 7pt; }
  .etape-titre { font-size: 11.5pt; margin: 9pt 0 3pt; }
  .etape-titre small { font-size: 9pt; }
  .analyse-titre { font-size: 9pt; margin: 6pt 0 3pt; }
  .consigne, .source { font-size: 9.5pt; line-height: 1.4; margin: 4pt 0; }
  .fiche-texte, .analyse-texte, .fiche-liste, .fiche .fiche-texte { font-size: 10pt; line-height: 1.42; margin: 3pt 0; }
  .carte.fiche { font-size: 10pt; line-height: 1.42; }
  .fiche-liste { padding-left: 14pt; }
  .fiche-liste li { margin: 1.5pt 0; }
  .fiche-piege { font-size: 9.5pt; padding: 3pt 7pt; margin: 4pt 0; }
  .analyse-ligne { padding: 2pt 0; }
  .analyse-ligne .cit { font-size: 10pt; display: inline; margin-right: 4pt; }
  .analyse-ligne .proc { font-size: 8pt; padding: 0.5pt 5pt; margin-top: 1pt; }
  .analyse-ligne .eff { font-size: 9pt; }
  .analyse-section { padding: 2pt 8pt 4pt; margin: 5pt 0; }
  .ligne-texte { font-size: 10pt; line-height: 1.35; }
  .ligne-texte .num { font-size: 8pt; }
  .legende-oral span { font-size: 8pt; padding: 1.5pt 6pt; }

  /* Une carte ou une étape longue peut s'étendre sur plusieurs pages
     (sinon elle saute à la page suivante et laisse un grand blanc)… */
  .carte, .fiche-etape, .fiche-chapitre { break-inside: auto; page-break-inside: auto; }
  /* …mais chaque bloc qui tient sur une page reste entier */
  .bloc-texte, .texte-numerote, .analyse-section.court, .fiche-etape.court, .fiche-bloc.court,
  .fiche-schema, .document-etape, .analyse-ligne, .fiche-piege,
  .fiche-liste li, .ligne-texte, .legende-oral { break-inside: avoid; page-break-inside: avoid; }
  .fiche-titre, .etape-titre, .analyse-titre, h2, h3 { break-after: avoid; page-break-after: avoid; }
  p { orphans: 3; widows: 3; }

  /* Les schémas : assez grands pour être lus, sans occuper une demi-page */
  .document-etape img, .fiche-schema img { max-width: 100%; max-height: 75mm; width: auto; margin: 0 auto; display: block; }
  .document-etape, .fiche-schema { margin: 6pt 0; }
  .document-etape.plein-ecran { position: static; background: none; padding: 0; }
  a[href]::after { content: none !important; }
}

/* ---- Mes procédés : choisir ce qu'on présentera à l'oral ---- */
.procedes-mvt { border-left: 5px solid var(--c); padding-left: 12px; margin: 18px 0; }
.procedes-mvt .etape-titre { color: var(--c); }
.procedes-mvt .compteur { float: right; font: 600 13px var(--agir); color: var(--c); }
.procede-choix {
  display: grid; grid-template-columns: 26px 1fr; column-gap: 8px; align-items: start;
  padding: 10px 12px; margin: 6px 0; border-radius: 10px; cursor: pointer;
  background: var(--carte); border: 1.5px solid var(--trait);
}
.procede-choix input { width: 20px; height: 20px; margin-top: 2px; grid-row: span 3; }
.procede-choix .cit { font-family: var(--lire); font-weight: 600; font-size: 16px; }
.procede-choix .proc { justify-self: start; margin-top: 4px; padding: 2px 9px; border-radius: 10px; font: 600 12.5px var(--agir); background: #f0e9f8; color: #71409f; }
.procede-choix .eff { margin-top: 3px; font-size: 14.5px; color: var(--doux); }
.procede-choix:has(input:checked) { background: var(--cf); border-color: var(--c); color: #1b1c21; }
.procede-choix:has(input:checked) .eff { color: #3d4250; }
/* Les procédés choisis, marqués dans la fiche et pendant l'entraînement */
.analyse-ligne.choisi { background: #fff7d6; border-radius: 8px; padding-left: 8px; padding-right: 8px; color: #1b1c21; }
.analyse-ligne.choisi .cit { color: #1b1c21; }
.mes-procedes { margin: 8px 0 12px; padding: 10px 14px; border-radius: 10px; background: #fff7d6; color: #1b1c21; border-left: 4px solid #c9a227; }
.mes-procedes .mes-titre { margin: 0 0 4px; font: 700 13.5px var(--agir); }
.mes-procedes ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.5; }

/* ---- Exercices : message si la réponse est vide, résultat expliqué au bilan ---- */
.avis-vide { color: var(--faux); font-weight: 600; min-height: 0; }
.avis-vide:empty { display: none; }
.resultat-explique { border-left: 5px solid var(--maths, #24427c); }
.resultat-explique p { font-size: 16px; line-height: 1.55; margin: 0 0 10px; }
.resultat-explique img.schema { display: block; max-width: 100%; height: auto; margin-top: 6px; }

/* =================================================================
   FICHES DE RÉVISION EN COULEURS — une couleur par matière
   Texte toujours foncé sur les fonds colorés ; mots-clés éclaircis
   en mode sombre pour rester lisibles sur fond foncé.
   ================================================================= */
.fiche-chapitre { --fc: #a62a62; --fcl: #fbe3ee; --fcs: #f2a3c4; }          /* philosophie, HGGSP… */
.m-maths .fiche-chapitre,    .fiche-chapitre.m-maths    { --fc: #24427c; --fcl: #e8edf7; --fcs: #9db8ec; }
.m-physique .fiche-chapitre, .fiche-chapitre.m-physique { --fc: #17795a; --fcl: #e3f3ed; --fcs: #7fd3b4; }
.m-francais .fiche-chapitre, .fiche-chapitre.m-francais { --fc: #71409f; --fcl: #f0e9f8; --fcs: #c9a6ee; }
.m-anglais .fiche-chapitre,  .fiche-chapitre.m-anglais  { --fc: #9a5518; --fcl: #fbeee0; --fcs: #f0b47a; }

.fiche-bloc {
  border: 1px solid var(--trait); border-left: 5px solid var(--fc); border-radius: 12px;
  padding: 10px 14px 12px; margin: 14px 0; background: var(--carte);
}
.fiche-bloc .fiche-titre { margin: 0 0 8px; background: var(--fcl); color: var(--fc); }
.fiche-cle { color: var(--fc); font-weight: 700; }
.fiche-liste li::marker { color: var(--fc); }

.fiche-etapes { list-style: none; padding-left: 0; margin: 6px 0 8px; }
.fiche-etapes li { display: flex; gap: 10px; align-items: flex-start; margin: 7px 0; font-size: 15.5px; line-height: 1.5; }
.fiche-num {
  flex: 0 0 26px; height: 26px; border-radius: 50%; text-align: center;
  background: var(--fcl); border: 2px solid var(--fc); color: var(--fc);
  font: 700 13px/22px var(--agir); box-sizing: border-box;
}
.fiche-exemple {
  margin: 8px 0; padding: 8px 12px; border-radius: 8px; line-height: 1.5;
  background: #fff7d6; border-left: 4px solid #c9a227; color: #1b1c21 !important;
}
.fiche-etiquette { display: inline-block; margin-right: 8px; font: 700 11.5px var(--agir); letter-spacing: .04em; text-transform: uppercase; color: #8a6d00; }
.fiche-note {
  margin: 8px 0; padding: 6px 10px; border-radius: 8px; font-size: 14.5px; font-style: italic;
  background: #f2f3f5; color: #3d4250 !important;
}
@media (prefers-color-scheme: dark) {
  .fiche-cle { color: var(--fcs); }
  .fiche-liste li::marker { color: var(--fcs); }
}
@media print {
  .fiche-bloc { padding: 5pt 8pt 6pt; margin: 6pt 0; border-left-width: 3pt; }
  .fiche-etapes li { font-size: 10pt; margin: 3pt 0; }
  .fiche-num { flex-basis: 15pt; height: 15pt; font-size: 8pt; line-height: 12pt; border-width: 1pt; }
  .fiche-exemple, .fiche-note { font-size: 9.5pt; padding: 4pt 8pt; margin: 4pt 0; }
  .fiche-cle { color: var(--fc) !important; }
}

/* ---- « Lire la fiche » (rubrique Comprendre) : même rendu que la Fiche de révision ---- */
.fiche.fiche-chapitre {
  font-family: var(--agir); font-size: 16px; line-height: 1.55;
  border-left: 5px solid var(--fc); padding: 18px 18px 8px;
}
/* La couleur de la fiche elle-même l'emporte toujours sur celle de la page. */
.fiche-chapitre.m-maths    { --fc: #24427c; --fcl: #e8edf7; --fcs: #9db8ec; }
.fiche-chapitre.m-physique { --fc: #17795a; --fcl: #e3f3ed; --fcs: #7fd3b4; }
.fiche-chapitre.m-francais { --fc: #71409f; --fcl: #f0e9f8; --fcs: #c9a6ee; }
.fiche-chapitre.m-anglais  { --fc: #9a5518; --fcl: #fbeee0; --fcs: #f0b47a; }
.fiche-chapitre.m-philo    { --fc: #71409f; --fcl: #f0e9f8; --fcs: #c9a6ee; }
@media print {
  .fiche.fiche-chapitre { font-size: 10pt; line-height: 1.42; padding: 8pt 10pt; }
}

/* =================================================================
   NAVIGATION ET ZONES
   1. Le texte posé sur un aplat de couleur reste lisible dans les deux
      modes : blanc sur une couleur foncée, foncé sur une couleur claire.
   2. Une matière = une couleur, partout (--m, sa teinte claire --mc).
   3. Page Réviser, deux zones qui ne se ressemblent pas :
        Comprendre = la page du cahier. Une feuille blanche, la marge à
        la couleur de la matière, des titres à lire, des gestes légers.
        Se tester  = le bloc plein. Teinté à la couleur de la matière,
        ses jauges, ses boutons pleins.
   4. On revient toujours à l'endroit d'où l'on vient : la page s'arrête
      sous les barres collantes, et l'endroit retrouvé est marqué.
   ================================================================= */
:root {
  --sur-plein: #ffffff;
  --hggsp: #a62a62;  --hggsp-clair: #fbe3ee;
  --piste: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sur-plein: #15161b;
    --hggsp: #ee89b2;  --hggsp-clair: rgba(238,137,178,.14);
    --piste: rgba(255,255,255,.14);
  }
}

/* --m : la couleur de la matière ; --mc : sa teinte claire.
   --mf et --mp : la couleur toujours foncée et sa teinte toujours pastel,
   pour une étiquette qui reste claire, écrite en foncé, dans les deux modes. */
.m-maths, .m-dnl      { --m: var(--maths);    --mc: var(--maths-clair);    --mf: #24427c; --mp: #e8edf7; }
.m-physique           { --m: var(--physique); --mc: var(--physique-clair); --mf: #17795a; --mp: #e3f3ed; }
.m-francais, .m-philo { --m: var(--francais); --mc: var(--francais-clair); --mf: #71409f; --mp: #f0e9f8; }
.m-anglais            { --m: var(--anglais);  --mc: var(--anglais-clair);  --mf: #9a5518; --mp: #fbeee0; }
.m-hggsp              { --m: var(--hggsp);    --mc: var(--hggsp-clair);    --mf: #a62a62; --mp: #fbe3ee; }

/* Philosophie, HGGSP, DNL : mêmes règles que les quatre matières d'origine. */
.m-philo .principal, .m-hggsp .principal, .m-dnl .principal { background: var(--m); border-color: var(--m); }
.m-philo .bouton:not(.principal), .m-hggsp .bouton:not(.principal), .m-dnl .bouton:not(.principal) { color: var(--m); }
.m-philo .pastille, .m-hggsp .pastille, .m-dnl .pastille { background: var(--m); }
.matiere.m-philo h3, .matiere.m-hggsp h3, .matiere.m-dnl h3 { color: var(--m); }
.carte.m-philo, .carte.m-hggsp, .carte.m-dnl { border-left: 5px solid var(--m); background: linear-gradient(var(--mc), var(--carte) 60px); }
.m-philo .fiche-chapitre, .fiche-chapitre.m-philo { --fc: #71409f; --fcl: #f0e9f8; --fcs: #c9a6ee; }
.m-hggsp .fiche-chapitre, .fiche-chapitre.m-hggsp { --fc: #a62a62; --fcl: #fbe3ee; --fcs: #f2a3c4; }
.m-dnl .fiche-chapitre,   .fiche-chapitre.m-dnl   { --fc: #24427c; --fcl: #e8edf7; --fcs: #9db8ec; }

/* Le vert d'une étiquette (« Réussi », « Tout vu ») : plus foncé sur son fond pastel. */
.etat.solide { color: #146c47; }
/* La légende d'un schéma (« Toucher pour agrandir ») et les numéros de ligne
   d'un texte de l'oral se lisent. */
.document-etape figcaption { color: var(--doux); }
.ligne-texte .num { color: var(--doux); }
/* Les titres d'étape de l'oral portent la couleur de leur étape, toujours
   foncée : en mode sombre, ils se posent sur leur fond pastel. */
@media (prefers-color-scheme: dark) {
  .fiche-etape .etape-titre, .procedes-mvt .etape-titre, #oral .etape-titre {
    --doux: #3d4250;
    background: var(--cf, transparent); padding: 6px 10px; border-radius: 8px;
  }
  .procedes-mvt .etape-titre { overflow: hidden; }
}

/* Dans une page de matière, l'étiquette « jamais fait » prend sa couleur. */
.m-maths .etat.presenter, .m-physique .etat.presenter, .m-anglais .etat.presenter,
.m-philo .etat.presenter, .m-hggsp .etat.presenter, .m-dnl .etat.presenter {
  background: var(--mp) !important; color: var(--mf);
}

/* ---- Le lien de retour et la ligne « où suis-je » ---- */
.retour-nav a span { font-size: 16px; line-height: 1; }
.contexte {
  max-width: 620px; margin: 10px auto 0; padding: 0 22px;
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13.5px; line-height: 1.45; color: var(--doux);
}
.contexte .pastille { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--m, var(--autre)); transform: translateY(1px); }
.contexte strong { font-weight: 600; color: var(--m, var(--texte)); }
/* Sous le lien de retour, le titre de la page remonte : inutile de laisser un
   grand blanc. À l'écran seulement : la mise en page imprimée ne bouge pas. */
@media screen {
  .retour-nav ~ main.parent { padding-top: 16px; }
  .retour-nav ~ main.parent > h2:first-child { margin-top: 10px; }
}

/* Une ligne de formulaire (espace parent) passe à la ligne plutôt que de
   pousser son bouton hors de l'écran. */
.ligne { flex-wrap: wrap; }
.ligne select { max-width: 100%; min-width: 0; }
.ligne input[type=text] { flex: 1 1 150px; min-width: 0; }
/* Le journal a six colonnes : sur un téléphone, il défile dans son cadre
   au lieu de faire défiler toute la page de côté. */
@media (max-width: 520px) {
  .journal { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 13px; }
  .journal th { font-size: 12px; padding: 8px 4px; }
  .journal td { padding: 10px 4px; }
  .journal th:first-child, .journal td:first-child { padding-left: 0; }
  .journal th:last-child, .journal td:last-child { padding-right: 0; }
}

/* ---- Un menu d'actions : le bouton principal sur toute la largeur,
        les autres deux par deux. Un libellé trop long pour une demi-
        largeur prend sa propre ligne : rien n'est jamais coupé. ---- */
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.actions > .bouton, .actions > button {
  flex: 1 1 calc(50% - 4px); min-height: 50px; padding: 11px 6px;
  font-size: 15px; line-height: 1.25;
}
.actions > .principal { flex-basis: 100%; min-height: 54px; font-size: 16.5px; }

/* ---- Un geste de lecture : une pastille légère, jamais un aplat ---- */
.gestes { display: flex; flex-wrap: wrap; gap: 8px; }
.geste {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 7px 14px;
  border-radius: 999px; border: 1.5px solid var(--trait); background: var(--carte);
  font: 600 14px/1.2 var(--agir); text-decoration: none; color: var(--m, var(--accent));
}
.geste.lire { background: var(--mc, var(--autre-clair)); border-color: transparent; }
.geste:active { transform: translateY(1px); }
.geste .nb {
  min-width: 22px; padding: 2px 6px; border-radius: 999px; text-align: center;
  font: 700 12px/1.4 var(--agir); background: var(--mc, var(--autre-clair));
}

/* ---- Onglet Oral : « Le texte et sa fiche » et « Mes procédés » doivent se
        voir autant que les boutons. Deux grandes cases côte à côte, fond
        pastel de la matière cerné de sa couleur, texte foncé dans les deux
        modes. ---- */
.carte > .gestes { gap: 8px; margin: 14px 0 0; }
.carte > .gestes .geste, .carte > .gestes .geste.lire {
  flex: 1 1 calc(50% - 4px); justify-content: center; text-align: center;
  min-height: 52px; padding: 10px 8px; border-radius: var(--r);
  font-size: 15.5px; line-height: 1.25;
  background: var(--mp, #eceef2); border: 2px solid var(--mf, #555b6b); color: var(--mf, #1b1c21);
}
.carte > .gestes + .actions { margin-top: 8px; }

/* ---- Page Réviser : la page occupe toute la largeur, chaque zone
        recentre son contenu ---- */
main.reviser { max-width: none; padding: 0; }
.zone-in { max-width: 620px; margin: 0 auto; padding: 0 18px; }
.reviser > .zone-in > .consigne { margin: 18px 0 0; }
.reviser > .zone-in > .vide { padding: 48px 0; }
.reviser .sortir { margin: 26px 0 12px; }

/* Le sélecteur des deux zones, collé sous les onglets */
.zones {
  position: sticky; top: var(--h-onglets, 57px); z-index: 4;
  padding: 8px 18px; background: var(--fond); border-bottom: 1px solid var(--trait);
}
.zones-in {
  max-width: 584px; margin: 0 auto; display: flex; gap: 3px; padding: 3px;
  border-radius: 999px; background: var(--creux);
}
.zone-lien {
  flex: 1; min-height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; text-decoration: none; color: var(--doux);
}
.zone-lien.lire { font: 500 16px/1 var(--lire); }
.zone-lien.agir { font: 700 15px/1 var(--agir); }
.zone-lien.actif { background: var(--carte); color: var(--texte); box-shadow: 0 0 0 1px var(--trait); }
/* Téléphone tenu en largeur : l'écran est bas, le sélecteur ne reste pas collé. */
@media (max-height: 520px) { .zones { position: static; } }

.zone { padding: 26px 0 30px; scroll-margin-top: var(--h-collant, 112px); }
.zone-tete h2 { margin: 0 0 5px; color: var(--texte); }
.zone-tete p { margin: 0; max-width: 34em; font-size: 14.5px; line-height: 1.5; color: var(--doux); }
.zone .matiere { margin: 26px 0 10px; }
.zone .matiere h3 { font: 600 14.5px/1.3 var(--agir); color: var(--m, var(--texte)); }
.zone .matiere .pastille { width: 11px; height: 11px; background: var(--m, var(--autre)); }

/* ---- Comprendre : la page du cahier ---- */
.zone-lire .zone-tete h2 { font: 600 28px/1.15 var(--lire); letter-spacing: -.01em; }
.cahier {
  --marge: 40px;
  position: relative; margin: 0 0 14px; padding: 15px 16px 14px calc(var(--marge) + 14px);
  background: var(--carte); border: 1px solid var(--trait); border-radius: 5px;
  box-shadow: 0 1px 0 var(--trait), 0 8px 16px -10px rgba(27,28,33,.22);
}
/* la marge, tracée à la couleur de la matière */
.cahier::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--marge);
  width: 2px; background: var(--m, var(--accent)); opacity: .5;
}
.cahier-titre {
  margin: 0 0 13px; font: 600 19px/1.4 var(--lire); color: var(--texte);
  text-decoration: underline; text-decoration-color: var(--m, var(--accent));
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.parties { list-style: none; margin: 0; padding: 0; }
.partie {
  position: relative; padding: 13px 0 14px; border-top: 1px dashed var(--trait);
  scroll-margin-top: calc(var(--h-collant, 112px) + 14px);
}
.partie:first-child { border-top: 0; padding-top: 0; }
.partie:last-child { padding-bottom: 2px; }
.parties + .cahier-pied { margin-top: 12px; }
.cahier { scroll-margin-top: calc(var(--h-collant, 112px) + 12px); }
.cahier-titre + .parties .partie:first-child { padding-top: 2px; }
/* le numéro de la partie, écrit dans la marge */
.partie-num {
  position: absolute; top: 12px; left: calc(-1 * (var(--marge) + 14px)); width: var(--marge);
  text-align: center; font: italic 600 17px/1.4 var(--lire); color: var(--m, var(--accent));
}
.partie:first-child .partie-num { top: -1px; }
.cahier-titre + .parties .partie:first-child .partie-num { top: 1px; }
.partie-titre { margin: 0 0 9px; font: 500 16.5px/1.4 var(--lire); color: var(--texte); }
.cahier-pied { margin: 0; padding-top: 12px; border-top: 1px dashed var(--trait); }
.cahier-pied-nom { margin: 0 0 8px; font: 600 13.5px/1.3 var(--agir); color: var(--doux); }
/* l'endroit d'où l'on revient : un trait de surligneur sur le titre */
.partie:target .partie-titre {
  display: inline; padding: 1px 2px; font-weight: 600;
  background: linear-gradient(transparent 48%, var(--mc, var(--autre-clair)) 48%);
}
.partie:target .gestes { margin-top: 9px; }
.cahier:target .cahier-titre { background: linear-gradient(transparent 48%, var(--mc, var(--autre-clair)) 48%); }

/* ---- Se tester : le bloc plein, sur une bande plus sombre ---- */
.zone-agir { background: var(--creux); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.zone-agir .zone-tete h2 { font: 800 24px/1.15 var(--agir); letter-spacing: -.015em; }
.bloc {
  margin: 0 0 14px; padding: 15px 16px 16px;
  background: var(--mc, var(--autre-clair)); border-left: 5px solid var(--m, var(--autre));
  border-radius: 6px 16px 16px 6px;
  scroll-margin-top: calc(var(--h-collant, 112px) + 12px);
}
.bloc-titre { margin: 0 0 3px; font: 700 17.5px/1.3 var(--agir); color: var(--texte); }
.bloc .meta { margin: 0 0 4px; font-size: 13px; color: var(--doux); }
.bloc .avancement { margin: 12px 0 0; }
.avancement-nom { margin: 0 0 7px; font: 600 14px/1.3 var(--agir); color: var(--texte); }
.avancement-nom .etat { margin-left: 5px; padding: 3px 10px; font-size: 12.5px; }
.avancement-detail { margin: 5px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--doux); }
.bloc .piste { background: var(--piste); }
.bloc .piste i.vu { background: var(--m, var(--accent)); opacity: .4; }
.bloc .bouton { box-shadow: none; border-color: transparent; background: var(--carte); color: var(--m, var(--accent)); }
.bloc .bouton.principal { background: var(--m, var(--accent)); border-color: var(--m, var(--accent)); color: var(--sur-plein); }
/* Les étiquettes d'état : claires, écrites en foncé, à la couleur de la matière. */
.bloc .etat, .bloc .etat.presenter { background: #ffffff !important; }
.bloc .etat.presenter { color: var(--mf, #a62a62); }
.bloc .etat.solide { background: var(--p-juste) !important; }
/* l'endroit d'où l'on revient */
.bloc:target, .carte:target { outline: 2.5px solid var(--m, var(--accent)); outline-offset: 3px; }
.carte[id] { scroll-margin-top: calc(var(--h-onglets, 57px) + 14px); }

@media (prefers-color-scheme: light) {
  /* Sur la teinte claire de la matière, le texte secondaire fonce. */
  .bloc { --doux: #4a4f5c; }
}

/* ---- Partie précédente, partie suivante (au bas d'une fiche) ---- */
.voisins { display: flex; gap: 10px; margin: 16px 0 0; }
.voisins a {
  flex: 1 1 0; min-width: 0; padding: 11px 14px; border-radius: 12px;
  border: 1.5px solid var(--trait); background: var(--carte);
  text-decoration: none; color: var(--texte); font: 500 14.5px/1.35 var(--lire);
}
.voisins a small { display: block; margin-bottom: 2px; font: 600 12.5px/1.3 var(--agir); color: var(--m, var(--accent)); }
.voisins .suivante { text-align: right; }
.voisins .seule { flex: 0 1 50%; margin-left: auto; }

/* ---- Liste d'exercices : le numéro de l'exercice ---- */
.sujet-num {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px;
  padding: 0 7px; border-radius: 999px; font: 700 13px/1 var(--agir);
  color: var(--m, var(--accent)); border: 1.5px solid currentColor;
}

@media print {
  .zones, .contexte, .actions, .voisins, .sortir, .gestes { display: none !important; }
}

/* =================================================================
   ANALYSE LINÉAIRE ÉCRITE (un texte à rendre, pas un texte de l'oral)
   Trois temps : comprendre le texte, cocher ses procédés, rédiger.
   Fonds pastel, texte toujours foncé, dans les deux modes.
   ================================================================= */
.chemin ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 10px 0 14px; }
.chemin li { flex: 1 1 30%; min-width: 0; }
.chemin a {
  display: flex; align-items: center; gap: 7px; height: 100%; min-height: 48px; padding: 7px 9px;
  border-radius: 14px; border: 1.5px solid var(--trait); background: var(--carte);
  color: var(--texte); text-decoration: none; font: 600 13.5px/1.25 var(--agir);
}
.chemin li.ici a { background: #f0e9f8; border: 2px solid #71409f; color: #1b1c21; }
.chemin li.fait a { color: var(--doux); }
.chemin-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: #e6dcf3; border: 1.5px solid #71409f; color: #1b1c21; font: 700 13px/1 var(--agir);
}
/* Dans Réviser, les trois temps en grandes cases, comme dans l'onglet Oral */
.bloc > .gestes-ecrit { margin: 12px 0 0; gap: 8px; }
.bloc > .gestes-ecrit .geste, .bloc > .gestes-ecrit .geste.lire {
  flex: 1 1 100%; justify-content: flex-start; min-height: 50px; padding: 9px 12px;
  border-radius: var(--r); font-size: 15.5px; line-height: 1.25;
  background: var(--mp, #f0e9f8); border: 2px solid var(--mf, #71409f); color: #1b1c21;
}
.bloc > .gestes-ecrit + .actions { margin-top: 8px; }
/* La page « Rédiger mon analyse » */
.sommaire-analyse a { font: 600 12.5px var(--agir); padding: 4px 10px; border-radius: 12px; border: 1.5px solid; text-decoration: none; }
.partie-analyse { margin-top: 26px; }
.mes-choix-titre { font: 700 14px/1.3 var(--agir); margin: 12px 0 4px; color: var(--texte); }
.mes-choix { padding-top: 4px; padding-bottom: 4px; }
.mes-choix .analyse-ligne.choisi { margin: 4px 0; }
.brouillon-titre { display: block; margin: 14px 0 6px; font: 700 14px/1.3 var(--agir); color: var(--texte); }
.champ-brouillon { min-height: 150px; }
.champ-brouillon[readonly] { background: var(--creux); }
.etat-brouillon { margin: 5px 2px 0; font-size: 13px; color: var(--doux); }
.texte-assemble .morceau + .morceau { margin-top: 10px; }
.texte-assemble p { margin: 0 0 8px; font: 400 16.5px/1.65 var(--lire); text-indent: 1.5em; }
.texte-assemble p.vide { text-indent: 0; font-family: var(--agir); }
@media print {
  .page-analyse .champ-brouillon, .page-analyse .chemin, .page-analyse .sommaire-analyse { display: none !important; }
  .texte-assemble p { font-size: 11pt; line-height: 1.5; margin: 0 0 4pt; }
  /* « Imprimer mon analyse » : le texte rédigé seul */
  body.imprimer-analyse main.parent > *:not(.analyse-entiere) { display: none !important; }
  body.imprimer-analyse .analyse-entiere > .fiche-titre,
  body.imprimer-analyse .analyse-entiere > .consigne { display: none !important; }
  body.imprimer-analyse .texte-assemble { border: none; padding: 0; }
}
/* Sur un téléphone, les trois temps l'un sous l'autre : rien n'est coupé. */
@media (max-width: 520px) {
  .chemin ol { flex-direction: column; gap: 5px; }
  .chemin li { flex: none; }
  .chemin a { min-height: 42px; font-size: 14.5px; }
}
/* Un procédé choisi (★) est sur fond jaune pâle : son effet en gris foncé, aussi en mode sombre. */
.analyse-ligne.choisi .eff { color: #3d4250; }
.partie-analyse .vide a { font-weight: 600; text-decoration: underline; color: inherit; }
/* ---- « Rédiger mon analyse » : un guide, une étape à la fois ---- */
.guide-actif .pas { display: none; }
.guide-actif .pas.ici { display: block; }
.guide-actif .analyse-entiere { display: none; }
.guide-actif.voir-final .analyse-entiere { display: block; }
.avance-analyse { margin: 4px 0 10px; font-size: 14px; color: var(--doux); }
.pas { margin-top: 18px; }
.pas-partie { margin: 0 0 4px; font: 600 12.5px/1.35 var(--agir); color: var(--doux); }
.pas .etape-titre { font-size: 18px; }
.pas-num { display: block; margin-bottom: 2px; font: 600 12.5px var(--agir); color: var(--doux); }
.pas-aide { margin: 4px 0 12px; font: 400 16.5px/1.55 var(--lire); color: var(--texte); }
.pas-rappel, .pas-autres, .methode-analyse { margin: 10px 0; }
.pas-rappel > summary, .pas-autres > summary, .methode-analyse > summary {
  cursor: pointer; padding: 10px 12px; border-radius: 12px; list-style-position: inside;
  font: 600 14px/1.35 var(--agir); background: var(--carte); border: 1.5px solid var(--trait); color: var(--texte);
}
.pas-verifs { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: #e4f3ec; border-left: 4px solid #1a8558; color: #1b1c21; --texte: #1b1c21; --doux: #3d4250; }
.pas-verifs-titre { margin: 0 0 4px; font: 700 13.5px var(--agir); color: #1b1c21; }
.pas-verifs .critere { margin: 5px 0; background: #ffffff; font-size: 14.5px; line-height: 1.4; color: #1b1c21; }
.pas-nav { display: flex; gap: 8px; margin-top: 16px; }
.pas-nav .bouton { flex: 1 1 0; min-height: 52px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 15px; }
.pas-nav .bouton.principal { flex: 1.6 1 0; }
.texte-assemble.relecture { margin-top: 12px; }
@media print {
  .guide-actif .pas, .guide-actif .analyse-entiere { display: block !important; }
  .pas-verifs, .pas-nav, .avance-analyse { display: none !important; }
  .pas { break-inside: auto; }
  .pas-aide { font-size: 10.5pt; margin: 2pt 0 4pt; }
  .pas .etape-titre { font-size: 11.5pt; }
}
@media print {
  /* Le guide imprimé : le rappel de chaque partie une seule fois, sans répétition */
  .pas-rappel:not(.premier), .pas-autres, .page-analyse .vide { display: none !important; }
}
/* Les procédés cochés, cités ou pas encore dans le texte de l'étape */
.pastille-cite { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 10px; font: 600 12px/1.6 var(--agir); background: #eceef2; color: #3d4250; border: 1px solid #c9ccd4; white-space: nowrap; }
.analyse-ligne.choisi.cite .pastille-cite { background: #e4f3ec; color: #14663f; border-color: #1a8558; }
.analyse-ligne.choisi.cite { box-shadow: inset 4px 0 0 #1a8558; }
.compte-utilises { font-weight: 600; color: var(--doux); }
.consigne-utiliser { margin: 2px 0 6px; font-size: 14px; }
.non-cites { margin: 12px 0; padding: 10px 14px; border-radius: 12px; background: #fff7d6; border-left: 4px solid #c9a227; color: #1b1c21; }
.non-cites a { display: block; margin: 5px 0; color: #1b1c21; text-decoration: underline; font-size: 14.5px; line-height: 1.4; }
/* Analyse écrite : la chasse aux procédés, avant de cocher */
.chasse { margin: 12px 0 16px; padding: 12px 14px; border-radius: 14px; background: #f0e9f8; border-left: 5px solid #71409f; color: #1b1c21; }
.chasse p { margin: 4px 0 10px; font-size: 14.5px; line-height: 1.45; color: #1b1c21; }
.chasse .chasse-titre { font: 700 15.5px var(--agir); margin-top: 0; }
.chasse-lien { display: flex; align-items: center; gap: 10px; margin: 6px 0; padding: 11px 12px; border-radius: 12px; background: #ffffff; border: 1.5px solid #71409f; color: #1b1c21; text-decoration: none; font: 600 14.5px/1.35 var(--agir); }
.chasse-etat { flex: none; padding: 2px 9px; border-radius: 10px; font-size: 12.5px; background: #fff7d6; color: #6b5300; border: 1px solid #c9a227; }
.chasse-lien.fait .chasse-etat { background: #e4f3ec; color: #14663f; border-color: #1a8558; }
.verrou { margin: 6px 0 10px; padding: 10px 12px; border-radius: 10px; background: #eceef2; color: #1b1c21; font-size: 14.5px; }
/* Commentaire : le texte final mis en page (ligne sautée entre les grandes parties, alinéas) */
.texte-assemble .bloc-final + .bloc-final { margin-top: 1.1em; }
.texte-assemble .bloc-final p { margin: 0; }
.compte-citations { margin: 4px 2px 0; font-size: 13.5px; color: var(--doux); }
.compte-citations.assez { color: var(--juste); font-weight: 600; }
@media print { .texte-assemble .bloc-final + .bloc-final { margin-top: 10pt; } }

/* ===== Atelier « Construire mon plan » (plan.php) — fonds pastel, texte toujours foncé ===== */
.methode-plan { padding: 14px 16px; }
.methode-plan p { margin: 0 0 8px; }
.plan-etapes { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 0; padding-left: 20px; font-size: 14.5px; }
.atelier-bloc { margin: 22px 0 0; scroll-margin-top: 70px; }
.atelier-titre { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 18px var(--agir); }
.atelier-titre small { font-weight: 600; color: var(--doux); font-size: 13.5px; }
.atelier-sous-titre { margin: 16px 0 6px; font: 700 15px var(--agir); }
.atelier-aide { margin: 6px 0 12px; }
.atelier-aide p { margin: 4px 0; font-size: 14.5px; line-height: 1.45; color: #1b1c21; }
.releves-liste { display: grid; gap: 8px; }
.releve { --fond: var(--carte); --bord: var(--trait); padding: 9px 12px; border-radius: 10px; background: var(--fond); border: 1px solid var(--trait); border-left: 5px solid var(--bord); }
.releve[style] { color: #1b1c21; --texte: #1b1c21; --doux: #3d4250; }
.releve .cit { display: block; font-weight: 700; }
.releve .proc { display: inline-block; margin: 4px 6px 0 0; padding: 1px 8px; border-radius: 99px; background: #efe4fb; color: #1b1c21; font-size: 12.5px; font-weight: 600; }
.releve .eff { font-size: 14px; color: var(--doux); }
.releve-idee { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; color: #1b1c21; }
.releve-suppr { display: inline; }
.lien-discret { background: none; border: 0; padding: 4px 0; color: var(--doux); text-decoration: underline; font-size: 13px; cursor: pointer; }
.ajout-releve { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--creux); }
.ajout-releve summary { font-weight: 700; cursor: pointer; }
.form-atelier { display: grid; gap: 10px; margin-top: 10px; }
.form-atelier label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.form-atelier input[type=text], .form-atelier textarea, .form-atelier select { max-width: 100%; font: inherit; font-size: 16px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--trait); background: var(--carte); color: var(--texte); width: 100%; box-sizing: border-box; }
.form-atelier.en-ligne { grid-template-columns: 1fr auto; align-items: end; }
.sr label, label.sr { font-size: 0; }
.idee-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--fond); border-left: 6px solid var(--bord); color: #1b1c21; }
.idee-ligne .lien-discret { color: #3d4250; }
.idee-renommer { display: flex; gap: 8px; flex: 1 1 100%; min-width: 0; align-items: center; }
.idee-renommer input { flex: 1 1 0; width: 0; min-width: 0; font: inherit; font-size: 16px; padding: 7px 9px; border-radius: 8px; border: 1px solid rgba(0,0,0,.18); background: #ffffff; color: #1b1c21; }
.idee-nom { font-weight: 700; color: #1b1c21; }
.etiquettes .etiquette { padding: 8px 10px; border-radius: 10px; background: var(--carte); border: 1px solid var(--trait); }
.etiquettes .cit { font-weight: 600; font-size: 14.5px; }
.groupe { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--fond); border-left: 6px solid var(--bord); color: #1b1c21; --texte: #1b1c21; --doux: #3d4250; }
.groupe-sans { --fond: #eceef2; --bord: #8a8f9c; }
.groupe-nom { margin: 0 0 6px; font: 700 15.5px var(--agir); }
.groupe-compte { margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: #ffffff; font-size: 12.5px; }
.groupe-cit { margin: 3px 0; font-size: 14px; }
.groupe-avis { margin: 8px 0 0; font-size: 13.5px; font-weight: 600; color: #3d4250; }
.plan-idee { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 10px; border-radius: 10px; background: var(--fond); border-left: 6px solid var(--bord); color: #1b1c21; }
.plan-idee .idee-nom { flex: 1 1 100%; }
.plan-idee label { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: #1b1c21; }
.plan-idee select { width: auto; padding: 6px 8px; font-size: 15px; background: #ffffff; color: #1b1c21; }
.plan-titre { margin-top: 4px; }
.plan-obtenu { margin-top: 14px; padding: 14px 16px; font-family: Georgia, 'Times New Roman', serif; }
.plan-obtenu-titre { margin: 0 0 8px; font: 700 13px var(--agir); text-transform: uppercase; letter-spacing: .04em; color: var(--doux); }
.plan-pb { margin: 0 0 10px; font-style: italic; }
.plan-partie { margin: 10px 0 2px; font-weight: 700; }
.plan-sous { margin: 2px 0 2px 18px; padding-left: 8px; border-left: 4px solid var(--bord); }
.plan-sous small, .mon-plan-partie small { font-family: var(--agir); color: var(--doux); }
.plan-verifs { list-style: none; margin: 10px 0 0; padding: 0; font-size: 14px; }
.plan-verifs li { margin: 3px 0; }
.plan-verifs .ok { color: var(--juste); font-weight: 600; }
.plan-verifs .manque { color: var(--doux); }
.plan-corrige { margin-top: 14px; }
.mon-plan-partie { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: #fff6d6; border-left: 4px solid #c9a227; color: #1b1c21; }
.mon-plan-partie p { margin: 3px 0; font-size: 14.5px; }
.mon-plan-titre { font-weight: 700; }
.mon-plan-partie a { color: #1b1c21; }
.lien-atelier { margin: 8px 0; }
@media print {
  body.atelier-plan .atelier-bloc, body.atelier-plan .methode-plan, body.atelier-plan form, body.atelier-plan .plan-verifs { display: none; }
  body.atelier-plan #monplan { display: block; }
  body.atelier-plan .plan-obtenu { border: 0; }
}

/* ---- Atelier du plan : comparaison avec le corrigé, copie du travail (lot 044) ---- */
.copie-source { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.copie-aide { font-size: 13px; color: var(--gris, #4a4f5c); margin: 4px 0 18px; }
.cmp-bilan { background: #fff6d6; border: 1.5px solid #c9a227; border-radius: 12px; padding: 10px 14px; margin: 10px 0 14px; color: #1b1c21; }
.cmp-bilan p { margin: 4px 0; color: #1b1c21; }
.cmp-lecture { font-size: 14.5px; }
.cmp-idee { background: var(--fond, #f3f4f7); border-left: 5px solid var(--bord, #9aa0ad); border-radius: 10px; padding: 8px 12px; margin: 8px 0; color: #1b1c21; }
.cmp-idee p, .cmp-idee li, .cmp-idee small { color: #1b1c21; }
.cmp-idee-nom { font-weight: 700; margin: 2px 0 4px; }
.cmp-chez-moi { display: inline-block; min-width: 3.2em; font-weight: 800; }
.cmp-detail { margin: 6px 0 2px; font-size: 14.5px; }
.cmp-repart { margin: 2px 0 4px 1.1em; padding: 0; font-size: 14.5px; }
.cmp-liste { margin: 4px 0 12px 1.1em; padding: 0; font-size: 14.5px; }
.cmp-liste li { margin: 4px 0; overflow-wrap: anywhere; }
.cmp-liste .cit { font-style: italic; }
.cmp-cote { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; }
.cmp-col { background: #f3f4f7; border-radius: 10px; padding: 8px 12px; color: #1b1c21; min-width: 0; overflow-wrap: anywhere; }
.cmp-col p { margin: 4px 0; color: #1b1c21; font-size: 14.5px; }
.cmp-col-titre { font-weight: 800; text-transform: uppercase; font-size: 12.5px !important; letter-spacing: .04em; }
.cmp-pb { font-style: italic; border-top: 1px solid #d5d8df; padding-top: 4px; }
.cmp-questions { margin: 8px 0 4px 1.1em; padding: 0; font-size: 14.5px; }
@media (max-width: 420px) { .cmp-cote { grid-template-columns: 1fr; } }
@media print { .cmp-bilan, .cmp-idee, .cmp-col { break-inside: avoid; } }

/* ---- Coller le texte d'un extrait (parent, lot 044) ---- */
.saisie-texte { width: 100%; max-width: 100%; box-sizing: border-box; font-size: 15px; line-height: 1.5; font-family: Georgia, 'Times New Roman', serif; }
.lien-discret-p { font-size: 13.5px; margin: 4px 0 12px; }

/* Ligne partagée entre deux mouvements : chaque morceau dans sa couleur. */
.ligne-partagee .fin-mvt, .ligne-partagee .debut-mvt { border-radius: 3px; padding: 1px 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; color: #1b1c21; }
.ligne-partagee .debut-mvt { padding-left: 6px; }

/* Onglet Dissertation : le nom de l'œuvre au-dessus de ses sujets. */
.dissert-oeuvre { font-weight: 600; font-size: 15px; color: var(--doux); margin: 22px 0 8px; letter-spacing: .01em; }
/* Une chose à apprendre sur l'œuvre : la lire, puis s'interroger ou la réciter. */
.dissert-ligne { border-top: 1px solid var(--trait); margin-top: 14px; padding-top: 14px; }
.dissert-ligne .gestes .geste { flex: 1 1 100%; justify-content: center; text-align: center; min-height: 48px; border-radius: var(--r); }
.dissert-ligne .actions { margin-top: 8px; }
/* Atelier du plan : le sommaire des cinq temps, numéros lisibles (ils
   chevauchaient le lien précédent), liens à la couleur de la matière. */
.plan-etapes { list-style-position: inside; padding-left: 0; }
.plan-etapes a { color: var(--francais); font-weight: 600; text-decoration: none; }
/* « Relever mes procédés » : les deux temps, chercher puis garder. */
.chasse-temps { margin: 6px 0 10px; padding-left: 22px; }
.chasse-temps li { margin: 4px 0; }

/* ================================================================
   « Mon devoir » (devoir.php) : un écran à la fois, un bouton pour avancer.
   Texte foncé sur les pastels, dans les deux modes.
   ================================================================ */
.devoir h2 { margin: 6px 0 14px; }
.devoir-num { font: 600 13.5px/1.3 var(--agir); color: var(--doux); margin: 14px 0 0; text-transform: uppercase; letter-spacing: .04em; }
.devoir-barre { display: flex; gap: 6px; margin: 8px 0 0; }
.devoir-barre span { flex: 1; height: 6px; border-radius: 3px; background: var(--trait); }
.devoir-barre span.fait { background: var(--francais); opacity: .45; }
.devoir-barre span.ici { background: var(--francais); }
.devoir-but { font-size: 16.5px; line-height: 1.5; margin: 10px 0 16px; }
.devoir-aide { color: var(--doux); font-size: 14.5px; margin: 6px 0; }
.devoir-sommaire { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.devoir-sommaire a { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r);
  background: var(--carte); border: 1.5px solid var(--trait); color: var(--texte); text-decoration: none; }
.devoir-sommaire strong { display: block; font-size: 16.5px; }
.devoir-sommaire small { display: block; color: var(--doux); font-size: 14px; line-height: 1.4; margin-top: 2px; }
.devoir-pastille { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font: 700 15px/1 var(--agir); background: #efe4fb; color: #4b2470; }
.devoir-sommaire li.fait .devoir-pastille { background: #e4f3ec; color: #14663f; }
.devoir-bloc h3 { font: 700 15px/1.3 var(--agir); color: var(--francais); margin: 0 0 8px; }
.devoir-bloc p { margin: 0 0 8px; line-height: 1.55; }
.devoir-bloc ul { margin: 0; padding-left: 20px; } .devoir-bloc li { margin: 4px 0; line-height: 1.5; }
.devoir-sens { border-left: 5px solid var(--francais); }
.devoir-texte, .devoir-piste { background: var(--cf); border-left: 5px solid var(--c); border-radius: 14px; padding: 14px 16px; margin: 0 0 14px; color: #1b1c21; }
.devoir-mvt { font: 700 14.5px/1.35 var(--agir); color: var(--c); margin: 0 0 10px; }
.devoir-mvt small { font-weight: 500; color: #4a4f5c; margin-left: 6px; }
.devoir-texte .vers { font-family: var(--lire); font-size: 17px; line-height: 1.5; margin: 0; display: flex; gap: 10px; }
.devoir-texte .vers-num { flex: none; width: 22px; text-align: right; font: 500 12px/1.9 var(--agir); color: #5f6473; }
.devoir-cit { font-family: var(--lire); font-size: 20px; line-height: 1.45; margin: 0 0 12px; }
.devoir-question { font-size: 16px; line-height: 1.5; margin: 0; font-weight: 600; }
.devoir-label { display: block; font-weight: 600; margin: 14px 0 6px; }
.devoir-label input, .devoir textarea, .devoir-ajout input { width: 100%; box-sizing: border-box; margin-top: 6px; padding: 11px 12px;
  border: 1.5px solid var(--trait); border-radius: 12px; font: 400 16px/1.4 var(--agir); background: var(--carte); color: var(--texte); }
.devoir-choix { margin-top: 10px; }
.devoir-choix button { flex: 1 1 140px; }
.devoir-precedent { margin: 18px 0 0; } .devoir-precedent a { color: var(--doux); }
.devoir-gardees { margin: 12px 0; } .devoir-gardees summary { font-weight: 600; cursor: pointer; padding: 6px 0; }
.devoir-gardees p, .devoir-ranger p { margin: 6px 0; font-family: var(--lire); font-size: 16px; }
.devoir-gardees small, .devoir-ranger small { font-family: var(--agir); color: var(--doux); font-size: 13.5px; }
.devoir-sous { font: 700 16px/1.3 var(--agir); margin: 22px 0 8px; }
.devoir-idee, .devoir-groupe { background: var(--fi); border: 1.5px solid var(--bi); border-radius: 12px; padding: 10px 14px; margin: 8px 0; color: #1b1c21; }
.devoir-idee { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 600; }
.devoir-idee .lien-discret { color: #4a4f5c; }
.devoir-groupe .devoir-aide { color: #3c404b; }
.devoir-groupe-nom { font-weight: 700; margin: 0; } .devoir-groupe-nom span { font-weight: 500; font-size: 14px; margin-left: 6px; }
.devoir-ajout { display: flex; gap: 8px; margin: 10px 0; } .devoir-ajout input { margin: 0; flex: 1; } .devoir-ajout button { flex: none; }
.devoir-ranger { border-top: 1px solid var(--trait); padding: 10px 0; }
.devoir-ranger select, .devoir-deux select { width: 100%; padding: 10px; border-radius: 12px; border: 1.5px solid var(--trait); font-size: 15.5px; background: var(--carte); color: var(--texte); }
.devoir-deux { display: flex; gap: 8px; } .devoir-deux select:first-child { flex: 2; } .devoir-deux select:last-child { flex: 1; }
.devoir-plan .devoir-pb { font-style: italic; margin: 6px 0 12px; }
.devoir-partie { font-weight: 700; font-size: 17px; margin: 14px 0 4px; }
.devoir-souspartie { font-weight: 600; margin: 6px 0 2px 14px; }
.devoir-preuve { margin: 2px 0 2px 30px; font-size: 14.5px; color: var(--doux); }
.devoir-verifs { list-style: none; padding: 0; margin: 14px 0; } .devoir-verifs li { margin: 4px 0; color: var(--doux); } .devoir-verifs li.ok { color: var(--juste); font-weight: 600; }
.devoir-carte { width: 100%; height: auto; border-radius: 14px; margin: 6px 0 0; }
.devoir-corrige summary { font-weight: 700; cursor: pointer; }
.imprimer-seul { display: none; }
@media print {
  .imprimer-seul { display: block; }
  .devoir .devoir-etape, .devoir .devoir-num, .onglets, .retour-nav { display: none !important; }
  .devoir-preuve { color: #333; }
}
/* « Mon devoir » : la barre du bas — revenir d'un écran, le menu, se déconnecter. */
.devoir-pied { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 24px; padding-top: 16px; border-top: 1px solid var(--trait); }
.devoir-pied a { flex: 1 1 auto; text-align: center; padding: 12px 14px; border-radius: 999px; border: 1.5px solid var(--trait);
  background: var(--carte); color: var(--texte); font: 600 15px/1.2 var(--agir); text-decoration: none; }
.devoir-pied a.devoir-sortir { flex-basis: 100%; border: none; background: none; color: var(--doux); font-weight: 500; padding: 6px; }

/* ================================================================
   DISSERTATION — deux couleurs : par cœur (bleu) / à adapter (orange).
   Fonds pastel, texte foncé, dans les deux modes.
   ================================================================ */
.puce-dissert { display: inline-block; padding: 2px 9px; border-radius: 999px; font: 700 12.5px/1.5 var(--agir); letter-spacing: .02em; vertical-align: 1px; white-space: nowrap; }
.puce-dissert.coeur { background: #e2ecfb; color: #1f3f7a; border: 1.5px solid #2f5aa8; }
.puce-dissert.adapter { background: #ffe8cf; color: #8a4200; border: 1.5px solid #c25e00; }
.dissert-intro { font-size: 16.5px; line-height: 1.5; margin: 6px 0 10px; }
.dissert-legende p { margin: 6px 0; font-size: 15px; }
.dissert-schema { margin: 14px 0 6px; } .dissert-schema img { width: 100%; height: auto; border-radius: 14px; display: block; }
.dissert-schema figcaption { color: var(--doux); font-size: 13.5px; text-align: center; margin-top: 6px; }
.zone-dissert { border-radius: 20px; padding: 16px 14px 6px; margin: 22px -6px 10px; }
.zone-dissert.coeur { background: #eef4fd; border: 2px solid #2f5aa8; }
.zone-dissert.adapter { background: #fff4e8; border: 2px solid #c25e00; }
.zone-dissert h2 { margin: 2px 0 8px; color: #1b1c21; }
.zone-dissert-num { font: 700 13px/1.3 var(--agir); text-transform: uppercase; letter-spacing: .05em; margin: 0; }
.zone-dissert.coeur .zone-dissert-num { color: #1f3f7a; } .zone-dissert.adapter .zone-dissert-num { color: #8a4200; }
.zone-dissert-quoi { color: #1b1c21; font-size: 15.5px; line-height: 1.5; margin: 0 0 12px; }
.zone-dissert .dissert-oeuvre { color: #4a4f5c; }
.dissert-fiches { margin: 0 0 12px; }
.carte.carte-coeur { border-left: 6px solid #2f5aa8; }
.carte.carte-adapter { border-left: 6px solid #c25e00; }
.dissert-ligne-nom { font-weight: 700; margin: 0 0 4px; }
.dissert-ligne-detail { color: var(--doux); font-size: 14px; margin: 0 0 4px; }
.dissert-gestes { margin: 6px 0 4px; padding-left: 22px; } .dissert-gestes li { margin: 8px 0; line-height: 1.5; }
.dissert-gestes em { color: #8a4200; font-style: normal; font-weight: 600; }
@media (prefers-color-scheme: dark) { .dissert-gestes em { color: #f0a35e; } }
.carte-coeur .dissert-ligne .actions > .bouton { flex: 1 1 calc(33% - 6px); }
/* Dans un exercice : le bandeau qui dit ce qu'on y fait */
.bandeau-dissert { border-radius: 14px; padding: 10px 14px; margin: 10px 0 12px; color: #1b1c21; }
.bandeau-dissert p { margin: 4px 0; font-size: 14.5px; line-height: 1.45; }
.bandeau-dissert .bandeau-titre { font: 800 13px/1.3 var(--agir); letter-spacing: .05em; }
.bandeau-dissert.coeur { background: #e2ecfb; border: 2px solid #2f5aa8; } .bandeau-dissert.coeur .bandeau-titre { color: #1f3f7a; }
.bandeau-dissert.adapter { background: #ffe8cf; border: 2px solid #c25e00; } .bandeau-dissert.adapter .bandeau-titre { color: #8a4200; }
.rappel-etapes .puce-dissert { font-size: 11px; padding: 0 7px; }
/* Dissertation : une œuvre, ou ses sujets, se déplie d'un toucher. */
.dissert-pli > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.dissert-pli > summary::-webkit-details-marker { display: none; }
.dissert-pli > summary .titre { font: 600 17px/1.35 var(--agir); }
.dissert-pli > summary::after { content: '▾'; font-size: 18px; color: var(--doux); margin-left: auto; }
.dissert-pli[open] > summary::after { content: '▴'; }
.dissert-pli-etat { color: var(--doux); font-size: 13.5px; }
.dissert-pli[open] > summary { margin-bottom: 8px; }
.dissert-pli-sujets { background: var(--carte); border: 1.5px solid #c25e00; border-radius: var(--r); padding: 14px 16px; margin: 10px 0; }
.dissert-pli-sujets > .carte { margin: 10px 0 0; }