/* Polices libres (SIL OFL, voir polices/OFL-*.txt) : Fredoka pour les
   titres, Nunito pour le texte et l'écriture de l'élève. */
@font-face { font-family: "Nunito"; src: url("polices/nunito-latin-wght-normal.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("polices/nunito-latin-wght-italic.woff2") format("woff2"); font-weight: 200 1000; font-style: italic; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("polices/fredoka-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }

/* Page « manuel » : la fiche telle qu'imprimée dans le livret.
   La feuille reste claire dans les deux thèmes, comme du papier ; seuls
   les outils (tuteur) reprennent les couleurs de l'application. */

.feuille, dialog.f-lecon, .manuel-lecture {
  /* Couleur du domaine : bandeau, pastilles, cases. Calcul par défaut. */
  --f-vert: #6cb45f;
  --f-vert-clair: #d3e9cb;
  --f-fonce: #3d7a33;
  --f-vert-texte: #1f9a3d;
  --f-jaune: #f4e600;
  --f-cours: #fdefb3;
  --f-bulle: #e4e000;
  --f-rouge: #e4322b;
  --f-bleu: #0e77bf;
  --f-encre: #231f20;
  --f-stylo: #1d4f9c;
  --f-pointilles: #8f969c;
  --f-police: "Nunito", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --f-titre: "Fredoka", "Nunito", "Arial Rounded MT Bold", Arial, sans-serif;
  /* Écriture de l'élève : même police lisible, à l'encre bleue. */
  --f-main: "Nunito", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --f-violet: #943d87;
  --f-orange: #e76032;
  --f-rose: #e6327f;
  --f-marge: 6.5rem;
  color-scheme: light;
  position: relative;
  background: #fff;
  color: var(--f-encre);
  font-family: var(--f-police);
  font-size: 1.1rem;
  line-height: 1.45;
  padding: 0 0 2.5rem;
  border: 1px solid #dcdcdc;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.08);
  overflow: hidden;
}
.feuille p { margin: 0; }
.f-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.f-var { font-style: italic; }
.f-r { color: var(--f-rouge); }
.f-v { color: var(--f-vert-texte); }
.f-b { color: var(--f-bleu); }
.f-p { color: var(--f-violet); }
.f-o { color: var(--f-orange); }
.f-k { color: var(--f-rose); }
/* Couleurs : sur la feuille entière ou sur un élément (ligne du sommaire, carte…). */
.feuille[data-domaine="calcul"], .feuille [data-domaine="calcul"], dialog.f-lecon[data-domaine="calcul"] { --f-vert: #6cb45f; --f-vert-clair: #d3e9cb; --f-fonce: #3d7a33; }
.feuille[data-domaine="geometrie"], .feuille [data-domaine="geometrie"], dialog.f-lecon[data-domaine="geometrie"] { --f-vert: #f49e25; --f-vert-clair: #fde1bd; --f-fonce: #a55d06; }
.feuille[data-domaine="fonctions"], .feuille [data-domaine="fonctions"], dialog.f-lecon[data-domaine="fonctions"] { --f-vert: #7982bb; --f-vert-clair: #dcdff0; --f-fonce: #46508f; }
.feuille[data-domaine="statistiques"], .feuille [data-domaine="statistiques"], dialog.f-lecon[data-domaine="statistiques"] { --f-vert: #ec5e87; --f-vert-clair: #fad3de; --f-fonce: #b02c55; }
/* Pages du module (accueil, sommaire, bilan, diagnostic) : le bleu-vert du livret ; parcours : violet. */
.feuille[data-domaine="module"], .feuille [data-domaine="module"], dialog.f-lecon[data-domaine="module"] { --f-vert: #26a69a; --f-vert-clair: #c8ebe6; --f-fonce: #17766c; }
.feuille[data-domaine="parcours"], .feuille [data-domaine="parcours"], dialog.f-lecon[data-domaine="parcours"] { --f-vert: #935c9c; --f-vert-clair: #ead9ee; --f-fonce: #6c3a76; }

/* Formules (MathML natif), dans la police du texte */
:is(.feuille, dialog.f-lecon) math.m { font-family: var(--f-police); font-size: 1.04em; math-style: normal; }
:is(.feuille, dialog.f-lecon) .m-it { font-style: italic; }
/* Nunito n'a ni √ ni flèche : ces deux signes viennent d'une police système
   courante ; le contenu de la racine reste en Nunito. */
:is(.feuille, dialog.f-lecon) msqrt, :is(.feuille, dialog.f-lecon) mover > mo { font-family: "Avenir Next", "Segoe UI", Roboto, Arial, sans-serif; }
:is(.feuille, dialog.f-lecon) msqrt > * { font-family: var(--f-police); }
/* π à barre débordante, comme dans le livret (celui d'Avenir ressemble à un п). */
:is(.feuille, dialog.f-lecon) .m-sym { font-family: "Helvetica Neue", Arial, Roboto, "Segoe UI", sans-serif; }
:is(.feuille, dialog.f-lecon) .m-gras { font-weight: 700; }
:is(.feuille, dialog.f-lecon) .m-acc { font-size: 2.3em; font-weight: 300; transform: scaleX(.55); }
:is(.feuille, dialog.f-lecon) mfrac { padding: 0 .1em; }
/* Fractions à la taille du texte, comme dans le livret (le navigateur les réduit par défaut). */
:is(.feuille, dialog.f-lecon) math.m mfrac > * { math-depth: 0; font-size: inherit; }
:is(.feuille, dialog.f-lecon) .m-fleche { font-size: .8em; }

/* ---------- Barre au-dessus de la feuille ---------- */
.manuel { max-width: 880px; margin: 0 auto; }
.manuel-barre { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0 0 1rem; font-size: .92rem; }
.manuel-voisins { display: inline-flex; gap: 1.2rem; }
.manuel-voisins a { font-weight: 600; text-decoration: none; }

/* ---------- En-tête : étiquette FICHE et bandeau ---------- */
.f-tete { position: relative; margin: 2.6rem 0 0; }
.f-tete h1 {
  display: flex; align-items: center; min-height: 72px; margin: 0; width: fit-content; max-width: calc(100% - 1.5rem);
  padding: .5rem 2.2rem .5rem 10.2rem; border-radius: 0 40px 40px 0;
  background: var(--f-vert); color: #fff; font: 700 2.05rem/1.1 var(--f-titre); letter-spacing: -.01em;
}
.f-tag {
  position: absolute; z-index: 1; left: 4.6rem; top: -1.6rem; width: 80px; height: 104px;
  display: flex; flex-direction: column; align-items: center;
  background: var(--f-jaune); color: var(--f-rouge); border-radius: 12px 12px 3px 3px; transform: rotate(-3deg);
}
.f-tag span { margin-top: .55rem; font: 700 .8rem/1 var(--f-titre); letter-spacing: .1em; text-transform: uppercase; }
.f-tag b { font: 700 4rem/1 var(--f-titre); }
.f-tag b.long { margin-top: .5rem; font-size: 2.3rem; }

/* ---------- Encadré de cours ---------- */
.f-cours { position: relative; margin: 0 2.4rem 0 var(--f-marge); padding: 1.4rem 1.8rem 1.4rem 1.6rem; background: var(--f-cours); border-radius: 0 0 22px 22px; }
.f-cours ul { list-style: none; margin: 0; padding: 0; }
.f-cours li + li { margin-top: .55rem; }
.f-cours ul.grille { display: grid; }
.f-cours ul.grille li + li { margin-top: 0; }
.f-cours li { position: relative; padding-left: 1.5rem; }
.f-cours li::before { content: ""; position: absolute; left: 0; top: .32em; width: .5em; height: .78em; border-radius: 0 1em 1em 0; background: var(--f-rouge); transform: none; }
.f-bulle {
  display: flex; align-items: center; gap: .45rem;
  padding: .45rem .9rem; background: var(--f-bulle); font-size: .88rem; transform: rotate(-2.5deg);
  box-shadow: 2px 3px 0 rgba(0,0,0,.12);
}
.f-pouce { width: 1.6rem; height: 1.6rem; fill: var(--f-rouge); flex: none; }

/* ---------- Exercices ---------- */
.f-ex { margin: 2.2rem 2.4rem 0 calc(var(--f-marge) - 1.4rem); }
.f-consigne { display: flex; align-items: flex-start; gap: .65rem; margin: 0 0 1.1rem; font: 600 1.18rem/1.4 var(--f-police); letter-spacing: 0; }
.f-num { display: inline-flex; flex: none; height: 2.15rem; transform: rotate(-2deg); }
.f-dots { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; width: 1.35rem; background: var(--f-vert-clair); border-radius: 6px 0 0 6px; }
.f-dots i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--f-rouge); }
.f-n { padding: 0 .5rem; background: var(--f-vert); color: #fff; border-radius: 0 6px 6px 0; font: 700 1.65rem/2.15rem var(--f-titre); }
.f-consigne > span:last-child { padding-top: .3rem; }

/* Relier */
.f-relier { position: relative; margin-left: 1.4rem; }
.f-traits { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.f-relier { overflow-x: auto; overflow-y: hidden; }
.f-trait { stroke: var(--f-stylo); stroke-width: 2.5; stroke-linecap: round; }
.f-trait.ok { stroke: var(--f-vert-texte); }
.f-trait.ko { stroke: var(--f-rouge); stroke-dasharray: 6 5; }
.f-rangee { display: flex; justify-content: space-around; }
.f-haut { margin-bottom: 3.6rem; }
.f-borne { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.f-val { padding: 0 .2rem; }
.f-borne.ok .f-val { color: var(--f-vert-texte); font-weight: 700; }
.f-borne.ko .f-val { color: var(--f-rouge); font-weight: 700; }
.f-point { position: relative; width: 44px; height: 44px; margin: -6px 0; padding: 0; border: 0; background: none; cursor: pointer; }
.f-point::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px; border-radius: 50%; background: var(--f-vert); transition: transform .12s; }
.f-point:hover::after { transform: scale(1.2); }
.f-point[aria-pressed="true"]::after { background: var(--f-bleu); box-shadow: 0 0 0 5px rgba(14,119,191,.25); transform: scale(1.2); }
.f-point:focus-visible { outline: 3px solid var(--f-bleu); outline-offset: -4px; border-radius: 50%; }
.f-relier.vertical { display: grid; grid-template-columns: auto auto; justify-content: space-between; column-gap: 5rem; }
.f-relier.vertical .f-rangee { flex-direction: column; justify-content: flex-start; gap: .5rem; margin: 0; }
.f-relier.vertical .f-borne { flex-direction: row; justify-content: flex-end; text-align: right; gap: .2rem; }
.f-relier.vertical .f-bas .f-borne { justify-content: flex-start; text-align: left; }
.f-relier.vertical .f-point { margin: 0 -6px; }
@media (max-width: 720px) { .f-relier.vertical { column-gap: 1rem; font-size: .76rem; } }
.f-mini { display: block; max-width: 100%; height: auto; }
.f-bas .f-mini { max-width: min(9rem, 100%); margin-top: .3rem; }
.f-aide { margin: .9rem 0 0 1.4rem !important; font-size: .85rem; color: #6b6f73; }

/* Vrai / faux */
.f-vf { margin-left: 1.4rem; }
.f-vf-tete, .f-vf-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 3.3rem 3.3rem minmax(0, 1.25fr); column-gap: .5rem; }
.f-vf.sans-justif .f-vf-tete, .f-vf.sans-justif .f-vf-ligne { grid-template-columns: minmax(0, 1fr) 3.3rem 3.3rem; }
.f-vf.sans-justif .f-vf-ligne { margin-bottom: .55rem; }
.f-vf-tete { font-weight: 600; text-align: center; margin-bottom: .2rem; }
.f-vf-ligne { margin-bottom: 1.1rem; align-items: start; }
.f-vf-texte b { font-weight: 700; }
.f-case { position: relative; display: flex; justify-content: center; padding-top: .2rem; cursor: pointer; }
.f-case input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.f-boite { display: block; width: 1.4rem; height: 1.4rem; border: 2.5px solid var(--f-vert); background: #fff; }
.f-case input:checked + .f-boite { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 11l4.5 4.5L17 4' fill='none' stroke='%231d4f9c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/85% no-repeat; }
.f-case input:focus-visible + .f-boite { outline: 3px solid var(--f-bleu); outline-offset: 2px; }
.f-vf-ligne.ok .f-case input:checked + .f-boite { border-color: var(--f-vert-texte); background-color: #e4f4e6; }
.f-vf-ligne.ko .f-case input:checked + .f-boite { border-color: var(--f-rouge); background-color: #fde6e4; }
.f-vf-ligne.ok .f-vf-texte b { color: var(--f-vert-texte); }
.f-vf-ligne.ko .f-vf-texte b { color: var(--f-rouge); }

/* Lignes pointillées : on écrit dessus, à l'encre bleue. */
.f-lignes {
  --lh: 2rem;
  display: block; width: 100%; height: calc(var(--n) * var(--lh)); min-height: var(--lh); margin: 0; padding: 0 .2rem; border: 0; resize: none;
  font: 1.05rem/var(--lh) var(--f-main); color: var(--f-stylo);
  background-color: transparent;
  background-image: radial-gradient(circle at 1px 1px, var(--f-pointilles) .9px, transparent 1.3px);
  background-size: 5px var(--lh); background-position: 0 calc(var(--lh) - 7px); background-attachment: local;
}
.f-lignes:focus { outline: none; background-color: #f4f8ff; }
.f-lignes:focus-visible { outline: 2px solid var(--f-bleu); outline-offset: 2px; }

/* Champ sur la ligne */
.f-champ-ligne { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .3rem 1.4rem !important; }
.f-champ { flex: 1; min-width: 0; padding: .1rem .3rem; border: 0; border-bottom: 2px dotted var(--f-pointilles); background: transparent; font: 1.15rem var(--f-main); color: var(--f-stylo); }
.f-champ:focus { outline: none; background: #f4f8ff; }
.f-champ-ligne.ok .f-champ { border-bottom: 2px solid var(--f-vert-texte); }
.f-champ-ligne.ko .f-champ { border-bottom: 2px solid var(--f-rouge); }
.f-ex > .f-lignes { margin-left: 1.4rem; width: calc(100% - 1.4rem); }

/* ---------- Outils de l'application, discrets ---------- */
.f-outils { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .9rem 0 0 1.4rem; }
.f-btn { white-space: nowrap; min-height: 38px; padding: .3rem .9rem; border: 1px solid var(--f-vert-clair); border-radius: 999px; background: #fff; color: var(--f-fonce); font: 600 .85rem/1 system-ui, sans-serif; cursor: pointer; }
.f-btn:hover { border-color: var(--f-vert); }
.f-btn:focus-visible { outline: 3px solid var(--f-bleu); outline-offset: 2px; }
.f-principal { background: var(--f-fonce); border-color: var(--f-fonce); color: #fff; }
.f-btn.actif, .f-btn[aria-pressed="true"] { background: var(--f-vert-clair); border-color: var(--f-vert); }
.f-resume { margin: .55rem 0 0 1.4rem !important; font: 600 .9rem/1.4 system-ui, sans-serif; color: #b42318; }
.f-resume:empty { display: none; }
.f-resume.ok { color: #157347; }
.f-indice, .f-corrige, .f-tuteur { margin-left: 1.4rem; }
.f-note { margin-top: .7rem !important; padding: .6rem .9rem; background: #fff9d9; border-left: 4px solid var(--f-jaune); font-size: .95rem; }
.f-correction { margin-top: .7rem; padding: .8rem 1rem; border: 2px dashed var(--f-vert); border-radius: 10px; background: #fafaf7; font-size: .98rem; }
.f-correction p { margin: 0 0 .4rem; }
.f-correction small, .f-correction .discret { color: #6b6f73; }
.f-point-bilan { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .6rem; font: 600 .88rem system-ui, sans-serif; }
/* Le tuteur, sur la page claire : mêmes couleurs que la feuille, quel que soit le thème. */
.f-tuteur:not(:empty) {
  --carte: #fff; --carte-2: #eef6f4; --fond: #fff; --encre: #231f20; --encre-2: #4f5459; --encre-3: #8a9096; --trait: #d6dde1;
  --m-accent: var(--f-fonce); --m-sur-accent: #fff;
  margin-top: .8rem; padding: 1rem; border: 2px dashed var(--f-vert); border-radius: 14px; background: #fbfcfc; color: var(--encre);
  font: 1rem/1.5 var(--f-police); color-scheme: light;
}
.f-tuteur .avatar { background: var(--f-vert-clair); color: var(--f-fonce); }
.f-tuteur .tuteur-tete strong { font: 600 1.1rem var(--f-titre); color: var(--f-fonce); }
.f-tuteur .bulle.tuteur { background: #fff9d9; border: 1px solid #f0e3a0; }
.f-tuteur .bulle.eleve { background: var(--f-vert-clair); color: var(--f-encre); }
.f-tuteur .btn { font-family: var(--f-police); }

/* ---------- Blocs ---------- */
.f-corps { margin-left: 1.4rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; }
.f-corps > *, .f-cote > div > * { min-width: 0; }
.f-consigne.normale { font-weight: 400; }
.f-suite { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.2rem; align-items: center; }
.f-corps > .f-relier, .f-corps > .f-vf, .f-corps > .f-aide, .f-corps .f-champ-ligne { margin-left: 0 !important; }
.f-corps > .f-lignes, .f-ex .f-corps .f-lignes { margin-left: 0; width: 100%; }
.f-corps .f-bulle { position: static; width: fit-content; margin-left: auto; }
.f-texte { margin: 0; }
.f-enonce p { margin: 0 0 .4rem; }
.f-enonce ol.questions { margin: .2rem 0; padding-left: 0; list-style: none; display: grid; gap: .3rem; }
.f-enonce .q-label { display: inline; min-width: 0; height: auto; margin-right: .35rem; padding: 0; background: none; border-radius: 0; color: var(--f-fonce); font: 700 1em var(--f-police); }
.f-enonce ol.questions li { display: block; }
.f-enonce .q-puce { display: inline-block; width: .45em; height: .7em; margin-right: .55rem; border-radius: 0 1em 1em 0; background: var(--f-rouge); transform: none; }
.f-enonce .q-label::after { content: "."; }
.f-enonce .code, .f-correction .code { margin: .4rem 0; padding: .6rem .8rem; background: #f4f6f8; border-left: 4px solid var(--f-vert); font: .9rem/1.45 ui-monospace, Menlo, monospace; white-space: pre-wrap; }

/* Champs alignés en colonnes */
.f-champs { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: .45rem 1.6rem; }
.f-champ-ligne .f-q { flex: none; max-width: 70%; }
.f-auto-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .45rem 1.6rem; }
.f-vf-ligne.compact { display: flex; align-items: center; gap: 1rem; margin: 0; }
.f-case-texte { gap: .4rem; align-items: center; font-size: .95rem; padding: 0; }

/* QCM : énoncé puis options en colonnes ; ou séries en boîtes (intrus) */
.f-qcm { display: grid; gap: .8rem; }
.f-qcm-enonce { margin: 0 0 .3rem !important; }
.f-options { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: .35rem 1rem; }
.f-option-texte { min-width: 0; }
.f-option { justify-content: flex-start; align-items: flex-start; gap: .45rem; padding: 0; }
.f-option .f-boite { flex: none; margin-top: .12rem; width: 1.2rem; height: 1.2rem; border-width: 2px; }
.f-qcm.boites { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.f-qcm.boites .f-qcm-q { border: 1.5px solid #b9bcc0; border-radius: 8px; padding: .7rem .8rem; }
.f-qcm.boites .f-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem .6rem; }
.f-qcm-q.ok .f-option input:checked + .f-boite { border-color: var(--f-vert-texte); background-color: #e4f4e6; }
.f-qcm-q.ko .f-option input:checked + .f-boite { border-color: var(--f-rouge); background-color: #fde6e4; }
.f-qcm-q.ok > .f-qcm-enonce { color: var(--f-vert-texte); }
.f-qcm-q.ko > .f-qcm-enonce { color: var(--f-rouge); }

/* Tableaux du livret : en-têtes bleu-gris, cellules à compléter en pointillés */
.f-tab-zone { overflow-x: auto; }
.f-tab { border-collapse: collapse; min-width: 60%; font-size: .98rem; }
.f-tab th, .f-tab td { border: 1.5px solid #bcd3e0; padding: .45rem .7rem; text-align: center; vertical-align: middle; }
.f-tab thead th, .f-tab.tetes-lignes tbody th { background: #c5dce8; font-weight: 600; }
.f-tab .f-td-champ { padding: .3rem .5rem; min-width: 5rem; }
.f-tab td:not(.f-td-champ):not(.f-td-fig) { min-width: 3.6rem; }
.f-tab .f-champ { width: 100%; text-align: center; }
.f-tab .f-td-champ.ok { background: #eef8ef; }
.f-tab .f-td-champ.ko { background: #fdecea; }

/* Deux colonnes : exercice à gauche, figure à droite */
.f-cote { display: grid; grid-template-columns: var(--g) 1fr; gap: 1.2rem; align-items: start; }
.f-cote > div { display: grid; gap: .7rem; min-width: 0; }
.f-fig { margin: 0; width: 100%; max-width: var(--larg, 100%); }
.f-fig img { display: block; width: 100%; height: auto; }

/* Figure à tracer */
.f-dessin { width: 100%; max-width: var(--larg); }
.f-dessin-zone { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; }
.f-dessin-zone img { display: block; width: 100%; height: auto; pointer-events: none; }
.f-dessin-svg { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.f-dessin-svg polyline { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-width: 3; }
.f-dessin-outils { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .4rem; }
.f-encre { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; background: var(--c); box-shadow: 0 0 0 1.5px #b9bcc0; cursor: pointer; }
.f-encre[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--c); }
.f-encre:focus-visible { outline: 3px solid var(--f-bleu); outline-offset: 3px; }
.f-td-fig { padding: .3rem .4rem !important; }
.f-td-fig img { display: block; max-width: 9rem; margin: 0 auto; }
.f-td-fig .f-dessin { min-width: 12rem; }
.f-td-fig .f-dessin-outils .f-btn { min-height: 30px; padding: .2rem .6rem; font-size: .78rem; }

/* Trous, cadre, souligner, QCM en ligne */
.f-trous { flex-wrap: wrap; row-gap: .3rem; }
.f-trous .f-champ { flex: 1 1 4rem; min-width: 3.5rem; max-width: 12rem; }
.f-trous .f-champ:last-child { max-width: none; }
.f-trous.ok .f-champ { border-bottom: 2px solid var(--f-vert-texte); }
.f-trous.ko .f-champ { border-bottom: 2px solid var(--f-rouge); }
.f-cadre { position: relative; border: 1.5px solid #9aa0a6; border-radius: 10px; padding: 1.8rem .8rem .6rem; }
.f-cadre .f-lignes { background-image: none; }
.f-crayon { position: absolute; left: .5rem; top: .35rem; width: 1.3rem; height: 1.3rem; fill: var(--f-vert); }
.f-souligner-liste { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: .5rem 0 0 !important; }
.f-souligne { border: 0; background: none; padding: .2rem .15rem; font: inherit; color: inherit; cursor: pointer; border-bottom: 4px solid var(--c, transparent); box-shadow: inset 0 -1px 0 #d0d3d6; }
.f-souligne:focus-visible { outline: 3px solid var(--f-bleu); outline-offset: 2px; }
.f-souligner.ok .f-souligner-liste { background: #eef8ef; }
.f-souligner.ko .f-souligner-liste { background: #fdecea; }
.f-qcm.en-ligne .f-qcm-q { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); align-items: center; gap: 1rem; }
.f-qcm.en-ligne .f-options { display: flex; flex-wrap: wrap; gap: .35rem 1.3rem; }
.f-qcm.en-ligne .f-option-texte { white-space: nowrap; }
@media (max-width: 900px) { .f-qcm.en-ligne .f-qcm-q { grid-template-columns: minmax(0, 1fr); gap: .3rem; } }
.f-qcm.en-ligne .f-qcm-enonce { margin: 0 !important; }
.f-cours .f-fig { margin-left: auto; }
.f-cours .f-tab-zone { margin: .6rem 0; }
.f-cours .f-tab { background: #fff; }
.f-cours .f-tab td:first-child { text-align: left; }
.f-tab .f-code { white-space: pre; }

/* Puces dans un bloc, colonnes, code Python du livret */
.f-puces { list-style: none; margin: 0; padding: 0; }
.f-puces li { position: relative; padding-left: 1.5rem; }
.f-puces li::before { content: ""; position: absolute; left: 0; top: .32em; width: .5em; height: .78em; border-radius: 0 1em 1em 0; background: var(--f-rouge); transform: none; }
.f-colonnes { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 1rem; }
.f-colonnes > div { display: grid; gap: .6rem; align-content: start; min-width: 0; }
.f-code { font: 600 .92em ui-monospace, Menlo, monospace; }
.f-script { width: fit-content; max-width: 100%; border: 1.5px solid #555; background: #fff; font: .92rem/1.6 ui-monospace, Menlo, monospace; overflow-x: auto; }
.f-script ol { margin: 0; padding: 0; list-style: none; counter-reset: l; }
.f-script li { display: flex; counter-increment: l; }
.f-script li::before { content: counter(l); flex: none; width: 1.8rem; padding-right: .4rem; text-align: right; background: #c5dce8; color: #333; }
.f-script code { padding: 0 .6rem; white-space: pre; font: inherit; display: block; }
.f-script .f-champ { font: inherit; color: var(--f-stylo); min-width: 5rem; width: 7rem; flex: none; padding: 0 .2rem; }
.f-script.ok { border-color: var(--f-vert-texte); }
.f-script.ko { border-color: var(--f-rouge); }
.py-mot { color: var(--f-orange); font-weight: 700; }
.py-print { color: var(--f-violet); font-weight: 700; }
@media (max-width: 720px) { .f-colonnes { grid-template-columns: minmax(0, 1fr); } }

/* Système : accolade à gauche */
.f-accolade { display: flex; align-items: stretch; gap: .5rem; }
.f-accolade-signe { width: .7rem; flex: none; border: 2px solid currentColor; border-right: 0; border-radius: 12px 0 0 12px; }
.f-accolade p { margin: .1rem 0; }

/* Encadré Python du livret */
.f-python { display: flex; border: 1.5px solid #555; max-width: 30rem; margin: 0 auto; }
.f-python-marge { width: 1.6rem; flex: none; background: #3e6d9c; }
.f-python .f-lignes { padding: .2rem .6rem; font-family: ui-monospace, Menlo, monospace; font-size: .92rem; }

/* Cours : formules en grille, figure à droite */
.f-cours ul.grille { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .8rem 1.4rem; }
.f-cours.avec-fig { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.2rem; align-items: start; }
.f-cours-fig { width: 11rem; }
/* Dans le cours, la bulle flotte à droite et le texte l'habille. */
.f-cours-texte > .f-bulle { float: right; max-width: 42%; margin: .6rem -.4rem .8rem 1.2rem; }
.f-cours-texte::after { content: ""; display: block; clear: both; }

/* ---------- Pages du module ---------- */
.f-tete.sans-tag h1 { padding-left: 2.4rem; }
.f-tete h1 sup { font-size: .55em; }
.feuille .m-bloc, .feuille .m-voie, .feuille .s-aide, .feuille #listeFiches, .feuille .m-mention, .feuille .m-texte, .feuille .m-vide, .feuille .m-actions { margin-left: var(--f-marge); margin-right: 2.4rem; }
.m-bloc, .m-voie { margin-top: 2.2rem; }
.m-titre { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0 0 1rem !important; font: 600 1.4rem/1.2 var(--f-titre); color: var(--f-fonce); }
.m-titre a { font: 600 .9rem var(--f-police); color: var(--f-fonce); }
.m-pilule { display: inline-block; margin: 0; padding: .3rem 1.1rem; background: var(--f-vert); color: #fff; border-radius: 4px 22px 22px 4px; font: 600 1.05rem/1.2 var(--f-titre); }
.feuille .m-texte { margin-top: 1rem; }
.feuille .m-vide { margin-top: .4rem; padding: .8rem 1rem; border: 1.5px dashed #c9d0d4; border-radius: 10px; color: #4f5459; }
.feuille .m-mention { margin-top: 2.4rem; font-size: .85rem; color: #6b6f73; }
.m-mention a, .m-texte a, .m-vide a { color: var(--f-fonce); font-weight: 600; }

/* Reprendre */
.m-reprise { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.1rem; border: 2px dashed var(--f-vert); border-radius: 14px; }
.m-reprise strong, .m-reprise small { display: block; }
.m-reprise small { color: #6b6f73; }
.m-sur { font: 600 .8rem var(--f-titre); text-transform: uppercase; letter-spacing: .08em; color: var(--f-fonce); }

/* Cartes « Avant de commencer » */
.m-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.m-carte { position: relative; display: flex; flex-direction: column; gap: .6rem; padding: 2.6rem 1.1rem 1rem; border: 1.5px solid #dfe3e6; border-radius: 16px; background: #fff; color: inherit; text-decoration: none; transition: border-color .15s; }
.m-carte:hover { border-color: var(--f-vert); }
.m-onglet { position: absolute; left: 0; top: 0; padding: .35rem .9rem; background: var(--f-vert); color: #fff; border-radius: 15px 0 14px 0; font: 600 .85rem/1.2 var(--f-titre); }
.m-go { margin-top: auto; text-align: right; font: 600 1rem var(--f-titre); color: var(--f-fonce); }

/* Étapes d'un exercice */
.m-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .9rem 1.6rem; }
.m-etapes li { display: flex; gap: .7rem; align-items: flex-start; }
.m-etapes strong { display: block; }

/* Progression par domaine */
.m-domaines { display: grid; gap: .7rem; }
.m-barre { display: grid; grid-template-columns: 14rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; color: inherit; text-decoration: none; }
.m-barre .m-pilule { font-size: .92rem; }
.m-jauge { height: .75rem; border-radius: 999px; background: var(--f-vert-clair); overflow: hidden; }
.m-jauge > span { display: block; height: 100%; background: var(--f-vert); border-radius: 999px; }
.m-barre small { color: #4f5459; font-variant-numeric: tabular-nums; }

/* Sommaire : numéro, titre, pointillés, page, cases à colorier */
.s-aide { margin-top: 1.6rem; }
.s-aide .f-bulle { float: right; max-width: 22rem; margin: -.4rem -.4rem .8rem 1rem; }
.m-recherche { width: 100%; max-width: 26rem; padding: .55rem 1rem; border: 1.5px solid #c9d0d4; border-radius: 999px; background: #fff; font: 1rem var(--f-police); color: var(--f-encre); }
.m-recherche:focus { outline: 3px solid var(--f-bleu); outline-offset: 2px; }
.s-groupe { clear: both; margin-top: 1.6rem; }
.s-groupe-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; }
.s-cases-tete { gap: .35rem; }
.s-cases-tete .f-num { height: 1.5rem; transform: none; }
.s-cases-tete .f-dots { width: 1rem; }
.s-cases-tete .f-dots i { width: .3rem; height: .3rem; }
.s-cases-tete .f-n { font-size: 1.05rem; line-height: 1.5rem; padding: 0 .3rem; }
.s-ligne { display: flex; align-items: center; gap: .5rem; padding: .32rem .2rem; border-radius: 6px; color: var(--f-encre); text-decoration: none; }
.s-ligne:hover { background: #f6f7f8; }
.s-ligne:focus-visible { outline: 3px solid var(--f-bleu); outline-offset: 1px; }
.s-num { flex: none; min-width: 1.9rem; font: 700 1.15rem var(--f-titre); color: var(--f-vert); }
.s-titre { flex: 0 1 auto; min-width: 0; max-width: 70%; }
.s-titre small { display: block; color: #6b6f73; font-size: .82rem; }
.s-pointilles { flex: 1; min-width: 1rem; align-self: flex-end; margin-bottom: .45rem; border-bottom: 2px dotted #b9bcc0; }
.s-page { flex: none; font-variant-numeric: tabular-nums; color: #4f5459; }
.s-cases { flex: none; display: inline-flex; gap: .85rem; margin-left: .8rem; }
.s-case { width: 1.15rem; height: 1.15rem; border: 2px solid var(--f-vert); background: #fff; }
.s-case.vert { background: #3fa34d; border-color: #2f8a3c; }
.s-case.rouge { background: #e4322b; border-color: #c12620; }
.m-statut, .s-ligne .statut { flex: none; padding: .15rem .6rem; border-radius: 999px; font: 600 .78rem var(--f-police); background: var(--f-vert-clair); color: var(--f-fonce); }
.m-statut.rouge, .s-ligne .statut.revoir { background: #fde6e4; color: #b42318; }

/* Parcours : étiquette violette et numéro jaune, comme dans le livret */
.m-parcours { margin: 0 0 1.4rem; padding: 0 0 1.2rem; border-bottom: 1.5px solid #eceff1; }
.m-parcours h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .5rem; font: 600 1.2rem/1.3 var(--f-titre); }
.m-parcours h3 a { color: var(--f-fonce); text-decoration: none; }
.m-tag-parcours { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .2rem .15rem .7rem; background: var(--f-vert); color: #fff; border-radius: 6px; font-size: .95rem; }
.m-tag-parcours b { padding: 0 .45rem; background: var(--f-jaune); color: var(--f-rouge); border-radius: 4px; font-size: 1.15rem; }
.m-parcours p { margin: 0 0 .3rem !important; }

/* Bilan et verrou */
.m-tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; text-align: center; }
.m-tuiles strong { display: block; font: 600 2.4rem/1.1 var(--f-titre); }
.m-tuiles small { font-size: .5em; color: #6b6f73; }
.m-prix { margin-top: .6rem !important; font: 600 1.6rem var(--f-titre); color: var(--f-fonce); }
.m-actions { margin-top: 1.2rem; }
.f-bareme { font: 600 .85rem var(--f-police); color: var(--f-fonce); background: var(--f-vert-clair); padding: .05rem .5rem; border-radius: 999px; white-space: nowrap; }
.f-pts { width: 5rem; padding: .25rem .4rem; border: 1.5px solid #c9d0d4; border-radius: 8px; font: inherit; }

/* ---------- Petits écrans ---------- */
@media (max-width: 720px) {
  .manuel { margin: 0 -1rem; }
  .manuel-barre { margin: 0 1rem 1rem; }
  .feuille { --f-marge: 1rem; font-size: 1rem; border-left: 0; border-right: 0; }
  .f-tete { margin-top: 2rem; }
  .f-tete h1 { min-height: 58px; padding: .5rem 1.4rem .5rem 5.4rem; font-size: 1.3rem; }
  .f-tag { left: .9rem; top: -1.2rem; width: 60px; height: 80px; }
  .f-tag span { font-size: .62rem; }
  .f-tag b { font-size: 3rem; }
  .f-cours { margin: 0 1rem; padding: 1.1rem 1rem; }
  .f-cours-texte > .f-bulle { float: none; max-width: none; width: fit-content; margin: .3rem 0 1.1rem auto; }
  .f-ex { margin: 2rem 1rem 0; }
  .f-relier, .f-vf, .f-aide, .f-outils, .f-resume, .f-indice, .f-corrige, .f-tuteur, .f-champ-ligne { margin-left: 0 !important; }
  .f-ex > .f-lignes { margin-left: 0; width: 100%; }
  .f-bas .f-val { font-size: .85rem; }
  .f-vf-tete, .f-vf-ligne { grid-template-columns: minmax(0, 1fr) 2.6rem 2.6rem; }
  .f-vf:not(.sans-justif) .f-vf-tete span:last-child { display: none; }
  .f-vf-ligne .f-lignes { grid-column: 1 / -1; margin-top: .3rem; }
  .f-corps { margin-left: 0; }
  .feuille .m-bloc, .feuille .m-voie, .feuille .s-aide, .feuille #listeFiches, .feuille .m-mention, .feuille .m-texte, .feuille .m-vide, .feuille .m-actions { margin-left: 1rem; margin-right: 1rem; }
  .f-tete.sans-tag h1 { padding-left: 1rem; }
  .m-barre { grid-template-columns: minmax(0, 1fr) auto; }
  .m-barre .m-jauge { grid-column: 1 / -1; grid-row: 2; }
  .m-tuiles { grid-template-columns: minmax(0, 1fr); }
  .s-aide .f-bulle { float: none; margin: 0 0 .8rem auto; }
  .s-page { display: none; }
  .s-cases { gap: .4rem; margin-left: .3rem; }
  .s-cases-tete { gap: .1rem; }
  .s-titre { max-width: 62%; }
  /* Une formule trop large défile dans sa ligne plutôt que d'élargir la page. */
  .f-cours li, .f-texte, .f-qcm-enonce, .f-vf-texte { overflow-x: auto; overflow-y: hidden; }
  .f-champs, .f-cote, .f-cours.avec-fig { grid-template-columns: minmax(0, 1fr); }
  .f-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-qcm.en-ligne .f-qcm-q { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .f-cours-fig { width: 60%; margin: 0 auto; }
}

/* ---------- Essai gratuit et lecture seule (15/10/2026) ---------- */
.s-gratuit { flex: none; padding: .1rem .55rem; border-radius: 999px; font: 600 .72rem var(--f-police); background: var(--f-vert-clair); color: var(--f-fonce); white-space: nowrap; }
.feuille .m-essai { padding: .7rem 1rem; border-radius: 10px; background: #fff7e0; border: 1px solid #f2d27a; }
.f-corps.lecture .f-aide { display: none; }
.manuel-lecture { font-family: var(--f-police); margin: 0 0 1rem; padding: .7rem 1rem; border-radius: 10px; background: #fff7e0; border: 1px solid #f2d27a; color: var(--f-encre); font-size: .95rem; line-height: 1.45; }
.manuel-lecture a, .f-ferme a { color: var(--f-fonce); font-weight: 600; }
.f-corps.lecture { opacity: .85; }
.f-ferme { margin: .9rem 0 0 1.4rem; font-size: .9rem; color: #6b6f73; }
.essai-info { margin-top: .3rem; font-size: .85rem; color: #6b6f73; }
.essai-info a { font-weight: 600; }
@media (max-width: 720px) { .f-ferme { margin-left: 0; } .manuel-lecture { margin: 0 1rem 1rem; } }

.m-essai p { margin: 0; }
.m-avantages { margin-top: .5rem; }
.m-avantages summary { cursor: pointer; color: var(--f-fonce); font-weight: 600; }
.m-avantages-liste { margin: .5rem 0; padding-left: 1.2rem; }
.m-avantages-liste li { margin: .25rem 0; }
.m-avantages .f-btn { margin-top: .4rem; }
.m-avantages a.f-btn, .m-actions a.f-btn { display: inline-flex; align-items: center; text-decoration: none; }
.m-avantages a.f-btn.f-principal { color: #fff; }

/* ---------- Boutons de navigation de page (15/10/2026) ----------
   « ← Sommaire » en contour, « Fiche suivante → » en pastille pleine, à la
   couleur du domaine de la page. */
.manuel-barre[data-domaine="calcul"]       { --c: #6cb45f; --c-fonce: #3d7a33; }
.manuel-barre[data-domaine="geometrie"]    { --c: #f49e25; --c-fonce: #a55d06; }
.manuel-barre[data-domaine="fonctions"]    { --c: #7982bb; --c-fonce: #46508f; }
.manuel-barre[data-domaine="statistiques"] { --c: #ec5e87; --c-fonce: #b02c55; }
.manuel-barre[data-domaine="module"]       { --c: #26a69a; --c-fonce: #17766c; }
.manuel-barre[data-domaine="parcours"]     { --c: #b07cba; --c-fonce: #6c3a76; }
.manuel-barre a { display: inline-flex; align-items: center; gap: .35rem; min-height: 38px; padding: 0 1rem; border-radius: 999px; font-weight: 650; text-decoration: none; border: 2px solid var(--c, #4357d0); transition: transform .18s, box-shadow .18s, background-color .18s; }
.manuel-barre > a { color: var(--c-fonce, #4357d0); background: transparent; }
.manuel-barre > a:hover { background: color-mix(in srgb, var(--c, #4357d0) 14%, transparent); transform: translateX(-2px); }
.manuel-voisins a { color: #fff; background: var(--c-fonce, #4357d0); border-color: var(--c-fonce, #4357d0); }
.manuel-voisins a:hover { transform: translateY(-1px); box-shadow: 0 4px 12px color-mix(in srgb, var(--c, #4357d0) 45%, transparent); }
:root[data-theme="dark"] .manuel-barre > a { color: var(--c, #9aa8ff); }
:root[data-theme="dark"] .manuel-voisins a { color: #0b1220; background: var(--c, #9aa8ff); border-color: var(--c, #9aa8ff); }
@media (prefers-reduced-motion: reduce) { .manuel-barre a { transition: none; } .manuel-barre a:hover { transform: none; } }

/* ---------- Placer des nombres sur une droite graduée (15/10/2026) ---------- */
.f-placer { margin: .6rem 0 0 1.4rem; }
.f-placer-nombres, .f-placer-familles, .f-placer-outils { display: flex; flex-wrap: wrap; gap: .45rem; margin: .5rem 0; }
.f-jeton { min-width: 3.2rem; min-height: 42px; padding: .2rem .7rem; border: 2px solid #c9ced3; border-radius: 10px; background: #fff; color: var(--f-encre); font: 1.05rem var(--f-police); cursor: pointer; box-shadow: inset 0 -4px 0 var(--c, transparent); transition: transform .15s, border-color .15s; }
.f-jeton.a-famille { border-color: var(--c); }
.f-jeton.place { background: color-mix(in srgb, var(--c, #888) 10%, #fff); }
.f-jeton[aria-pressed="true"] { outline: 3px solid var(--f-bleu, #1d4f9c); outline-offset: 2px; transform: translateY(-2px); }
.f-jeton.ok { border-color: var(--f-vert-texte, #1f7a35); box-shadow: inset 0 -4px 0 var(--c), 0 0 0 3px #cdeccf; }
.f-jeton.ko { border-color: var(--f-rouge, #e4322b); border-style: dashed; }
.f-famille { display: inline-flex; align-items: center; gap: .45rem; min-height: 38px; padding: .2rem .8rem; border: 2px solid var(--c); border-radius: 999px; background: #fff; color: var(--f-encre); font: 600 .85rem var(--f-police); cursor: pointer; }
.f-famille span { width: .9rem; height: .9rem; border-radius: 50%; background: var(--c); }
.f-famille[aria-pressed="true"] { background: var(--c); color: #fff; }
.f-famille[aria-pressed="true"] span { background: #fff; }
.f-famille:disabled { opacity: .45; cursor: default; }
.f-placer-zone { overflow-x: auto; overflow-y: hidden; padding-top: .3rem; }
.f-placer-droite { position: relative; min-width: 620px; padding-top: 4.6rem; cursor: pointer; border-radius: 10px; }
.f-placer-droite.attend { background: color-mix(in srgb, var(--f-bleu, #1d4f9c) 6%, transparent); }
.f-placer-droite svg { display: block; overflow: visible; }
.f-placer-droite .g-axe { stroke: var(--f-encre); stroke-width: 2; }
.f-placer-droite .g-entier { stroke: var(--f-encre); stroke-width: 2; }
.f-placer-droite .g-fine { stroke: #9aa1a8; stroke-width: 1; }
.f-placer-droite text { font: 600 14px var(--f-police); fill: var(--f-encre); }
.f-placer-marques { position: absolute; inset: 0; pointer-events: none; }
.f-marque { position: absolute; top: calc(4.6rem + 28px); width: 4px; height: 36px; margin-left: -2px; border-radius: 2px; background: var(--c); }
.f-marque-txt { position: absolute; bottom: calc(100% + 2px + var(--rang) * 1.45rem); left: 50%; transform: translateX(-50%); padding: .05rem .35rem; border-radius: 6px; background: #fff; border: 2px solid var(--c); color: var(--f-encre); font: .85rem var(--f-police); white-space: nowrap; line-height: 1.15; }
.f-marque.choisie .f-marque-txt { outline: 2px solid var(--f-bleu, #1d4f9c); }
.f-placer-aide { margin-left: 0; }
@media (max-width: 720px) { .f-placer { margin-left: 0; } }

/* ---------- Cours détaillé de la fiche (15/10/2026) ---------- */
.f-tete:has(.f-voir-cours) { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; }
.f-tete:has(.f-voir-cours) h1 { flex: 0 1 auto; }
.f-voir-cours { flex: none; min-height: 44px; margin-right: 1.5rem; padding: .45rem 1.1rem; border: 2px solid var(--f-vert); border-radius: 999px; background: #fff; color: var(--f-fonce); font: 700 .95rem var(--f-police); cursor: pointer; box-shadow: 0 3px 0 var(--f-vert-clair); transition: transform .15s, box-shadow .15s; }
.f-voir-cours:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--f-vert-clair); }
.f-voir-cours:focus-visible { outline: 3px solid var(--f-bleu); outline-offset: 2px; }
dialog.f-lecon { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(620px, 100%); max-width: 100%; height: 100vh; height: 100dvh; max-height: none; overflow-y: auto; outline: none; padding: 0; border: 0; background: #fff; color: var(--f-encre); font-family: var(--f-police); box-shadow: -10px 0 30px rgba(0,0,0,.25); }
dialog.f-lecon::backdrop { background: rgba(7, 17, 31, .55); }
dialog.f-lecon[open] { animation: lecon-entree .22s ease-out; }
@keyframes lecon-entree { from { transform: translateX(40px); opacity: 0; } }
.f-lecon-tete { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.2rem; background: var(--f-vert); color: #fff; }
.f-lecon-tete h2 { margin: 0; font: 700 1.35rem/1.15 var(--f-titre); }
.f-lecon-tete h2 span { display: block; font: 700 .75rem var(--f-police); letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.f-lecon-fermer { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.f-lecon-corps { padding: 1rem 1.3rem 2rem; line-height: 1.55; }
.f-lecon-corps h3 { margin: 1.6rem 0 .6rem; color: var(--f-fonce); font: 700 1.1rem var(--f-titre); }
.f-lecon-accroche { margin: 0; padding: 1rem 1.1rem; border-radius: 12px; background: var(--f-vert-clair); font-size: 1.05rem; }
.f-lecon-accroche p { margin: 0; }
.f-lecon-astuce { margin: 1.4rem 0 0; padding: .9rem 1.1rem; border-radius: 12px; background: #fff7d6; border: 2px dashed #e8c33a; }
.f-lecon-astuce h3 { margin: 0 0 .4rem; }
.f-lecon-astuce p { margin: 0; }
.f-defi { margin: 0 0 .8rem; padding: .8rem 1rem; border: 1px solid #dfe3e6; border-radius: 12px; }
.f-defi-q { margin: 0 0 .5rem; font-weight: 600; }
.f-defi-choix { display: flex; flex-wrap: wrap; gap: .5rem; }
.f-defi-choix button { min-height: 40px; min-width: 4rem; padding: .3rem 1rem; border: 2px solid var(--f-vert); border-radius: 999px; background: #fff; color: var(--f-encre); font: 600 .95rem var(--f-police); cursor: pointer; }
.f-defi-choix button:hover { background: var(--f-vert-clair); }
.f-defi.repondu .f-defi-choix button { cursor: default; opacity: .55; }
.f-defi-choix button.juste { opacity: 1 !important; background: #1f9a3d; border-color: #1f9a3d; color: #fff; }
.f-defi-choix button.faux { opacity: 1 !important; background: #e4322b; border-color: #e4322b; color: #fff; }
.f-defi-pourquoi { margin: .6rem 0 0; }
.f-defi.juste .f-defi-pourquoi b { color: #1f7a35; }
.f-defi.faux .f-defi-pourquoi b { color: #c42a22; }
.f-lecon-etapes { margin: 0; padding: 0; list-style: none; counter-reset: etape; }
.f-lecon-etapes li { position: relative; margin: 0 0 1rem; padding-left: 2.6rem; counter-increment: etape; }
.f-lecon-etapes li::before { content: counter(etape); position: absolute; left: 0; top: .05rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--f-vert); color: #fff; font: 700 1rem/1.9rem var(--f-titre); text-align: center; }
.f-lecon-etapes h4 { margin: 0 0 .2rem; font-size: 1rem; }
.f-lecon-etapes p { margin: 0; }
.f-lecon-conseil { color: #6b6f73; font-size: .9rem; margin: 0 0 .5rem; }
.f-lecon-exemple { margin: 0 0 .6rem; padding: .7rem .9rem; border: 1px solid #dfe3e6; border-radius: 10px; }
.f-lecon-exemple summary { cursor: pointer; list-style: none; }
.f-lecon-exemple summary::-webkit-details-marker { display: none; }
.f-lecon-voir { display: inline-block; margin-left: .3rem; color: var(--f-fonce); font-weight: 700; font-size: .88rem; text-decoration: underline; }
.f-lecon-exemple[open] .f-lecon-voir { display: none; }
.f-lecon-exemple p { margin: .6rem 0 0; padding-top: .6rem; border-top: 1px dashed #cfd5d9; }
.f-lecon-pieges { padding-left: 1.2rem; }
.f-lecon-pieges li::marker { content: "⚠ "; color: #e4322b; }
.f-lecon-retenir { margin: 1.6rem 0 1.2rem; padding: 1rem 1.2rem; border-radius: 12px; background: #fdecb1; box-shadow: 4px 4px 0 #e8c33a; }
.f-lecon-retenir strong { display: block; margin-bottom: .3rem; color: #a55d06; font: 700 .8rem var(--f-police); letter-spacing: .06em; text-transform: uppercase; }
.f-lecon-retenir p { margin: 0; font-size: 1.08rem; font-weight: 600; }
dialog.f-lecon-verrou { inset: 0; margin: auto; max-height: calc(100dvh - 2rem); width: min(460px, calc(100% - 2rem)); height: auto; padding: 1.4rem 1.5rem; border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
dialog.f-lecon-verrou h2 { margin: 0 0 .6rem; color: var(--f-fonce); font: 700 1.3rem/1.2 var(--f-titre); }
dialog.f-lecon-verrou .m-actions { margin: 1rem 0 0; display: flex; gap: .5rem; flex-wrap: wrap; }
dialog.f-lecon-verrou a.f-btn { display: inline-flex; align-items: center; text-decoration: none; color: #fff; }
@media (max-width: 720px) { .f-voir-cours { margin-left: 1rem; } }
@media (prefers-reduced-motion: reduce) { dialog.f-lecon[open] { animation: none; } .f-voir-cours { transition: none; } }

/* ---------- Boutons du titre et assistant (15/10/2026) ---------- */
.f-tete:has(.f-tete-boutons) { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; }
.f-tete:has(.f-tete-boutons) h1 { flex: 0 1 auto; }
.f-tete-boutons { display: inline-flex; flex-wrap: wrap; gap: .5rem; margin-right: 1.5rem; }
.f-tete-boutons .f-voir-cours { margin: 0; }
dialog.f-assistant:not(.f-lecon-verrou) { display: none; }
dialog.f-assistant[open]:not(.f-lecon-verrou) { display: flex; flex-direction: column; }
.f-assistant-chat { flex: 1; margin: 0; }
@media (max-width: 720px) { .f-tete-boutons { margin-left: 1rem; } }
.f-assistant-chat.f-tuteur { border: 0; border-radius: 0; }

/* Boutons toujours à droite du titre, sur la même ligne (15/10/2026). */
.f-tete:has(.f-tete-boutons) { flex-wrap: nowrap; }
.f-tete:has(.f-tete-boutons) h1 { min-width: 0; max-width: none; }
.f-tete-boutons { flex: none; flex-wrap: nowrap; gap: .4rem; margin: 0 1rem 0 0; }
.f-tete-boutons .f-voir-cours { min-height: 32px; padding: .2rem .8rem; border-width: 2px; font-size: .8rem; box-shadow: 0 2px 0 var(--f-vert-clair); white-space: nowrap; }
@media (max-width: 1000px) { .f-tete-boutons { flex-direction: column; } }
@media (max-width: 720px) { .f-tete-boutons { margin: 0 .5rem 0 0; } .f-tete-boutons .f-voir-cours { min-height: 30px; padding: .15rem .6rem; font-size: .75rem; } }

/* Assistant : une messagerie. Recherche figée en haut, discussion qui défile,
   zone de saisie en bas (15/10/2026). */
dialog.f-assistant[open]:not(.f-lecon-verrou) { overflow: hidden; }
.f-assistant-chat.mode-assistant { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 1.2rem .8rem; }
.assistant-recherche { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: .6rem; margin: 0 -1.2rem .6rem; padding: .6rem 1.2rem; background: #f6f8f7; border-bottom: 1px solid #e3e7e5; }
.assistant-recherche input { flex: 1; min-height: 40px; padding: .4rem .9rem; border: 1px solid #cfd6d2; border-radius: 999px; background: #fff; color: var(--f-encre); font: 1rem var(--f-police); }
.recherche-compte { flex: none; font-size: .8rem; color: #6b6f73; max-width: 45%; }
.mode-assistant .tuteur-tete { margin-bottom: .4rem; }
.mode-assistant .conversation { flex: 1; min-height: 6rem; max-height: none; }
.mode-assistant .conversation:empty { display: block; }
.mode-assistant .bulle mark { background: #ffe58a; color: inherit; border-radius: 3px; padding: 0 .1em; }
.mode-assistant .form-tuteur { flex: none; }
.mode-assistant .conversation { align-content: start; }

/* ---------- Fiche marquée (15/10/2026) : une seule, en cliquant sur son numéro ---------- */
.s-ligne-zone { display: flex; align-items: center; gap: .3rem; border-radius: 6px; }
.s-ligne-zone .s-ligne { flex: 1; min-width: 0; }
.s-marquer { display: inline-flex; align-items: center; justify-content: center; min-width: 2.1rem; height: 2.1rem; padding: 0 .3rem; border: 2px dashed transparent; border-radius: 999px; background: none; cursor: pointer; transition: border-color .15s, background-color .15s; }
.s-marquer:hover { border-color: var(--f-vert); }
.s-marquer:focus-visible { outline: 3px solid var(--f-bleu); outline-offset: 1px; }
.s-ligne-zone.marquee { background: color-mix(in srgb, var(--f-vert) 12%, transparent); }
.s-ligne-zone.marquee .s-marquer { border: 2px solid var(--f-vert); background: var(--f-vert); color: #fff; box-shadow: 0 2px 6px color-mix(in srgb, var(--f-vert) 45%, transparent); }
.s-ligne-zone.marquee .s-titre { font-weight: 700; }
.s-ligne-zone.marquee .s-titre::after { content: "Marquée"; margin-left: .5rem; padding: .05rem .5rem; border-radius: 999px; background: var(--f-vert); color: #fff; font: 700 .7rem var(--f-police); vertical-align: middle; }

/* Explication du correcteur sous un champ refusé, et réponses vérifiables
   restées vides (25/10/2026). */
.f-explication { display: block; flex-basis: 100%; margin: .25rem 0 0; font: 500 .82rem/1.35 system-ui, sans-serif; color: #b42318; }
.f-explication.ecriture { color: #9a5b00; }
.f-td-champ .f-explication { font-size: .75rem; }
.a-remplir .f-champ, .f-champ-ligne.a-remplir .f-champ { border-bottom: 2px dashed #e08a00 !important; }
.f-vf-ligne.a-remplir .f-boite, .f-qcm-q.a-remplir .f-boite { border-color: #e08a00; }
.f-borne.a-remplir .f-point, .f-jeton.a-remplir { outline: 2px dashed #e08a00; outline-offset: 2px; }
.f-tab .f-td-champ.a-remplir { background: #fff4e0; }
.f-champ-ligne:has(.f-explication), .f-trous:has(.f-explication) { flex-wrap: wrap; }

/* Petit écran : les boutons de navigation restent sur une ligne (25/10/2026). */
.manuel-barre a { white-space: nowrap; }
@media (max-width: 480px) {
  .manuel-barre { gap: .5rem; font-size: .86rem; }
  .manuel-voisins { gap: .4rem; }
  .manuel-barre a { padding: 0 .7rem; }
}
.f-placer-droite:focus-visible { outline: 3px solid var(--f-bleu, #1d4f9c); outline-offset: 3px; border-radius: 6px; }