/* ═══════════════════════════════════════════════════════════════
   🧩 DEVOIRATI — LE COMPOSEUR DE DEVOIR (écran seulement)

   Ce fichier ne redit RIEN de moteur-pdf.css : la page charge les deux.
   · moteur-pdf.css  → le socle (corps, panneaux, boutons) ET la feuille
                       imprimée (.fiche-*), avec ses règles @media print ;
   · CE FICHIER      → ce que le composeur ajoute et que la fiche d'un seul
                       chapitre n'a pas : les cartes de chapitres et leurs
                       paragraphes en pastilles.

   🔴 Tout est en clair. Une page d'outil se lit à côté d'un manuel, sous une
   lampe de salon : pas d'aplat sombre, pas de contraste inversé.
   Les blocs portent .mp-hors-papier — c'est moteur-pdf.css qui les retire à
   l'impression, on ne réécrit pas ses règles.
   ═══════════════════════════════════════════════════════════════ */

/* ── la barre des niveaux ─────────────────────────────────────────────── */
.cp-niveaux{display:flex;gap:8px;flex-wrap:wrap}

/* ── DEUX VOLETS CÔTE À CÔTE ──────────────────────────────────────────────
   🔴 Le chef, 26/08/2026 : « la disposition des chapitres n'est pas facile,
   il faut toujours descendre avec la souris ». Les trois domaines empilés
   faisaient une page de 21 cartes à dérouler. Désormais deux colonnes —
   l'algèbre et la géométrie — chacune défilant POUR ELLE-MÊME, et la page
   ne défile plus. Les statistiques passent en pleine largeur : à une ou deux
   cartes, une colonne à elles serait un trou. */
.cp-plan{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.cp-volet{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--mp-carte);border:1.5px solid var(--mp-trait);
  border-radius:var(--mp-r-sm);max-height:min(52vh,520px);
}
.cp-volet[data-d="alg"]{--cp-t:#667eea;--cp-doux:rgba(102,126,234,.10)}
.cp-volet[data-d="geo"]{--cp-t:#2a9d8f;--cp-doux:rgba(42,157,143,.11)}
.cp-volet[data-d="stat"]{--cp-t:#d1734f;--cp-doux:rgba(209,115,79,.11)}
.cp-volet[data-d="stat"]{grid-column:1/-1;max-height:none}
.cp-volet-tete{
  display:flex;align-items:center;gap:9px;padding:10px 13px;
  font-weight:800;font-size:.92rem;color:var(--cp-t);
  background:var(--cp-doux);border-bottom:1.5px solid var(--cp-t);
}
.cp-volet-tete .cp-cnt{margin-inline-start:auto;font-size:.74rem;font-weight:700;color:var(--mp-doux)}
.cp-liste{overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px}

/* ── la carte d'un chapitre : un bouton, plus un accordéon ────────────────
   Ses paragraphes ne vivent plus dedans — ils sont dans le tiroir du bas,
   avec les réglages qui concernent ce chapitre-là. */
.cp-chap{
  display:flex;align-items:center;gap:10px;width:100%;text-align:start;
  font-family:inherit;color:inherit;cursor:pointer;
  background:var(--mp-bg);border:1.5px solid var(--mp-trait);
  border-inline-start:5px solid var(--mp-trait);
  border-radius:var(--mp-r-sm);padding:9px 12px;
  transition:border-color .16s,box-shadow .16s,background .16s;
}
.cp-chap:hover{border-color:var(--cp-t)}
.cp-chap.cp-on{background:var(--mp-carte);border-inline-start-color:var(--cp-t);box-shadow:var(--mp-o-sm)}
/* Le chapitre EN COURS DE RÉGLAGE se distingue de ceux qui sont seulement
   cochés : avec vingt cartes, on perd sinon celui qu'on est en train de régler. */
.cp-chap.cp-ouvert{box-shadow:0 0 0 2px var(--cp-t) inset}
.cp-coche{
  flex:none;width:21px;height:21px;border-radius:6px;
  border:2px solid #c9d0e2;background:var(--mp-carte);
  display:grid;place-items:center;color:#fff;font-size:.78rem;font-weight:800;
  transition:background .16s,border-color .16s;
}
.cp-chap.cp-on .cp-coche{background:var(--cp-t);border-color:var(--cp-t)}
.cp-chap.cp-on .cp-coche::after{content:"✓"}
.cp-chap-icone{flex:none;font-size:1.15rem;line-height:1}
.cp-chap-txt{flex:1;min-width:0}
.cp-chap-nom{display:block;font-weight:800;font-size:.94rem}
.cp-chap-meta{display:flex;gap:8px;align-items:center;font-size:.73rem;color:var(--mp-doux)}
.cp-genre{
  border-radius:999px;padding:1px 8px;font-size:.7rem;font-weight:800;
  background:var(--mp-carte);border:1px solid var(--mp-trait);
}
.cp-chap.cp-on .cp-genre{background:var(--cp-doux);border-color:var(--cp-t);color:var(--cp-t)}

/* ── LE TIROIR : les paragraphes d'un côté, les réglages de l'autre ───────
   Collé en bas et non en fenêtre : on voit son chapitre coché DANS la liste
   pendant qu'on le règle. */
.cp-tiroir{
  position:sticky;bottom:0;z-index:6;margin-top:14px;
  background:var(--mp-carte);border:1.5px solid var(--mp-trait);
  border-radius:var(--mp-r-sm);box-shadow:0 -6px 22px rgba(20,20,40,.10);
  padding:11px 13px 13px;
}
.cp-tiroir[hidden]{display:none}
.cp-tiroir[data-d="alg"]{--cp-t:#667eea;--cp-doux:rgba(102,126,234,.10)}
.cp-tiroir[data-d="geo"]{--cp-t:#2a9d8f;--cp-doux:rgba(42,157,143,.11)}
.cp-tiroir[data-d="stat"]{--cp-t:#d1734f;--cp-doux:rgba(209,115,79,.11)}
.cp-tiroir-tete{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cp-tiroir-nom{font-weight:800;font-size:1rem;color:var(--cp-t)}
.cp-tiroir-etiq{
  font-size:.7rem;font-weight:800;border-radius:999px;padding:2px 9px;
  background:var(--cp-doux);border:1px solid var(--cp-t);color:var(--cp-t);
}
.cp-tiroir-fermer{
  margin-inline-start:auto;font-family:inherit;font-size:1.1rem;line-height:1;
  background:none;border:0;color:var(--mp-doux);cursor:pointer;padding:4px 8px;
}
.cp-cadres{display:grid;grid-template-columns:1.35fr 1fr;gap:12px;align-items:start}
.cp-cadre{
  background:var(--mp-bg);border:1.5px solid var(--mp-trait);
  border-radius:var(--mp-r-sm);padding:10px 12px;
}
.cp-cadre-ttl{
  font-size:.72rem;font-weight:800;letter-spacing:.04em;
  color:var(--mp-doux);margin-bottom:9px;
}
.cp-paras-barre{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 0 8px;font-size:.76rem;color:var(--mp-doux);font-weight:700;
}
.cp-tout{
  font-family:inherit;font-size:.78rem;font-weight:800;cursor:pointer;
  border:1.5px solid var(--mp-trait);background:var(--mp-carte);color:var(--cp-t);
  border-radius:999px;padding:4px 12px;
}
.cp-tout:hover{border-color:var(--cp-t)}
.cp-puces{display:flex;flex-wrap:wrap;gap:6px}
.cp-para{
  font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;
  border:1.5px solid var(--mp-trait);background:var(--mp-carte);color:var(--mp-doux);
  border-radius:999px;padding:6px 12px;transition:all .14s;
}
.cp-para:hover{border-color:var(--cp-t);color:var(--cp-t)}
.cp-para[aria-pressed="true"]{
  background:var(--cp-doux);border-color:var(--cp-t);color:var(--cp-t);font-weight:800;
}

/* ── l'encart d'un domaine vide (7ᵉ géométrie) ────────────────────────── */
.cp-vide{
  display:flex;gap:10px;align-items:flex-start;
  background:#fffaf0;border:1.5px solid #f0dfb5;color:#8a6516;
  border-radius:var(--mp-r-sm);padding:11px 13px;font-size:.86rem;
}
.cp-vide b{display:block;font-weight:800;margin-bottom:2px}

/* ── sur un téléphone, les volets s'empilent et le tiroir prend la largeur ── */
/* 🔴 29/08/2026 — LE COMPOSEUR SUR TELEPHONE.
   Le chef : « si j'ouvre l'algebre et je choisis un ou des exercices, la
   geometrie se bloque, la page ne peut plus monter ou descendre ».
   Trois causes, mesurees sur un ecran de 375x812 :
    · deux volets de 40vh a DEFILEMENT INTERNE : le doigt pose dessus fait
      defiler la liste, jamais la page — sur un ecran etroit ils occupent
      presque tout, donc on ne peut plus rien atteindre ;
    · le tiroir `position:sticky;bottom:0` mesurait 764 px sur 812 : ouvert, il
      recouvrait la geometrie ;
    · les deux ensemble : trois zones de defilement empilees sur un pouce.
   Sur telephone, la page redevient UNE seule colonne qui defile d'un bloc. */
@media (max-width:760px){
  .cp-plan{grid-template-columns:1fr}
  .cp-cadres{grid-template-columns:1fr}
  /* plus aucune boite a defilement interne : le doigt fait defiler LA PAGE */
  .cp-volet{max-height:none}
  .cp-liste{overflow-y:visible;max-height:none}
  /* le tiroir prend sa place dans le flux au lieu de recouvrir l'ecran */
  .cp-tiroir{position:static;box-shadow:none;margin-top:12px}
}

/* ── les réglages du devoir ───────────────────────────────────────────── */
.cp-reglages{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.cp-reglage{
  background:var(--mp-bg);border:1.5px solid var(--mp-trait);
  border-radius:var(--mp-r-sm);padding:11px 13px;
}
.cp-reglage-ttl{font-weight:800;font-size:.88rem;margin-bottom:2px}
.cp-reglage-aide{font-size:.74rem;color:var(--mp-doux);margin-bottom:9px}
.cp-nombre{display:flex;align-items:center;gap:0;border:1.5px solid var(--mp-trait);border-radius:999px;overflow:hidden;background:var(--mp-carte);width:max-content}
.cp-nombre button{
  width:34px;height:34px;border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:1.15rem;font-weight:800;color:var(--mp-violet);line-height:1;
}
.cp-nombre button:hover:not(:disabled){background:rgba(102,126,234,.12)}
.cp-nombre button:disabled{opacity:.3;cursor:default}
.cp-nombre input{
  width:52px;height:34px;border:0;border-inline:1.5px solid var(--mp-trait);
  text-align:center;font-family:inherit;font-weight:800;font-size:.98rem;
  color:var(--mp-txt);background:none;-moz-appearance:textfield;
}
.cp-nombre input::-webkit-outer-spin-button,
.cp-nombre input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Une règle arrêtée, pas un réglage : on l'affiche pour qu'elle se sache,
   sans faire croire qu'elle se change. */
.cp-fixe{
  display:inline-block;background:var(--mp-carte);border:1.5px solid var(--mp-trait);
  border-radius:999px;padding:7px 15px;font-size:.86rem;font-weight:800;color:var(--mp-violet);
}

/* ── les actions collées au devoir rendu ──────────────────────────────── */
/* Une fois la feuille créée on est en bas de page : imprimer ou télécharger
   ne doit pas obliger à remonter chercher la barre. */
.cp-resultat-actions{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  background:var(--mp-carte);border:1.5px solid var(--mp-trait);
  border-radius:var(--mp-r);padding:11px 14px;margin-bottom:14px;
  box-shadow:var(--mp-o-sm);
}
.cp-resultat-titre{font-weight:800;font-size:.92rem;margin-inline-end:auto}
@media (max-width:640px){
  .cp-resultat-titre{flex:1 1 100%}
  .cp-resultat-actions .mp-btn{flex:1;padding:11px 8px;font-size:.88rem}
}

/* Dire OÙ est le PDF : il est dans la fenêtre d'impression, et personne ne le
   devine tout seul. */
.cp-aide-print{
  margin:10px 2px 0;font-size:.82rem;color:var(--mp-doux);line-height:1.9;
}
.cp-aide-print b{color:var(--mp-violet)}

/* ── l'avancement pendant la fabrication ──────────────────────────────── */
.cp-etat{
  display:none;align-items:center;gap:10px;margin-top:12px;
  background:var(--mp-carte);border:1.5px solid var(--mp-trait);
  border-radius:var(--mp-r-sm);padding:10px 14px;font-size:.88rem;font-weight:700;
}
.cp-etat.cp-visible{display:flex}
.cp-jauge{flex:1;height:7px;border-radius:99px;background:var(--mp-trait);overflow:hidden}
.cp-jauge i{display:block;height:100%;width:0;background:var(--mp-grad);transition:width .25s}
.cp-alerte{
  margin-top:10px;background:#fff5f5;border:1.5px solid #f3c6c6;color:#a03434;
  border-radius:var(--mp-r-sm);padding:10px 13px;font-size:.85rem;font-weight:600;
}

/* ── ce que le composeur ajoute À LA FEUILLE ──────────────────────────── */
/* Un exercice d'algèbre n'est pas une question isolée : c'est une consigne et
   plusieurs questions numérotées, comme dans un vrai devoir. */
/* 🔴 La consigne ne se cache QUE si elle a vraiment été remise en tête —
   d'où la classe posée par composeur.js sur la liste. Sans cette condition,
   la règle masquait la seule consigne existante et l'exercice devenait une
   suite d'expressions nues : « تمرين 3 القوى » puis 8^4, 4^2, 6^5, 2^4.
   ⛔ Un sélecteur qui cache quelque chose doit prouver que la chose est
   ailleurs, pas le supposer. */
.fiche-qs-commune>li>.fiche-consigne{display:none}
.fiche-exo-consigne{font-weight:700;font-size:.9rem;margin:0 0 6px}
/* Quand les consignes diffèrent d'une question à l'autre, chacune garde la
   sienne : elle se serre contre sa question au lieu de flotter. */
.fiche-qs>li>.fiche-consigne{margin:0 0 2px;font-size:.86rem}

@media (max-width:640px){
  .cp-reglages{grid-template-columns:1fr}
  .cp-chap-tete{padding:10px 11px}
}

/* ── le QCM sur la feuille ────────────────────────────────────────────── */
/* Les choix en ligne, serrés : quatre réponses courtes ne méritent pas
   quatre lignes de papier. */

/* ═══════════════════════════════════════════════════════════════
   LA MOITIÉ SOMBRE DU COMPOSEUR
   ---------------------------------------------------------------
   Les jetons --mp-* du socle (sol, carte, encre, trait) basculent tout seuls :
   c'est moteur-pdf.css qui les redéfinit. Ne restent ici que les couleurs
   écrites en clair dans CE fichier — et il n'y en a que quatre.
   ⛔ Les couleurs de domaine (indigo, vert, terracotta) ne bougent pas :
   elles distinguent l'algèbre de la géométrie, c'est leur seul travail, et
   elles tiennent sur les deux fonds.
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cp-coche{border-color:#3a4553}
  :root:not([data-theme="light"]) .cp-tiroir{box-shadow:0 -6px 22px rgba(0,0,0,.5)}
  :root:not([data-theme="light"]) .cp-vide{background:#2a2214;border-color:#4a3a1c;color:#e6c886}
  :root:not([data-theme="light"]) .cp-alerte{background:#33181a;border-color:#5a2a2e;color:#f0b6bb}
}
:root[data-theme="dark"] .cp-coche{border-color:#3a4553}
:root[data-theme="dark"] .cp-tiroir{box-shadow:0 -6px 22px rgba(0,0,0,.5)}
:root[data-theme="dark"] .cp-vide{background:#2a2214;border-color:#4a3a1c;color:#e6c886}
:root[data-theme="dark"] .cp-alerte{background:#33181a;border-color:#5a2a2e;color:#f0b6bb}

/* ── LE BAREME ────────────────────────────────────────────────────────────
   🔴 Regle du chef, 29/08/2026 : « si l'exercice doit avoir 4 points et il
   contient 6 questions, tu changes le bareme de facon que les 6 questions
   valent 4 pts ». Sa feuille l'ecrit partout : « 8 نقاط : 1 × 8 ».
   Le total sur la tete de l'exercice, la part sur chaque question. */
.fiche-exo-pts{
  margin-inline-start:auto;font-size:.78rem;font-weight:800;white-space:nowrap;
  color:var(--mp-t,#4c51bf);
}
.fiche-bareme{
  font-size:.74rem;font-weight:700;color:var(--mp-doux,#667);white-space:nowrap;
  margin-inline-start:6px;
}
@media print{
  .fiche-exo-pts,.fiche-bareme{color:#000}
}

/* ═══ Le bouton « pilote نموذجي » — ordre du chef, 30/08/2026 ═══
   Il ne choisit pas un niveau de plus : il change de VIVIER. Le chef l'a
   voulu ROUGE VIF (30/08) — il doit se voir d'un coup d'oeil au milieu des
   pastilles d'annee et de difficulte, sans devenir pour autant un bouton
   d'action : ce n'est pas lui qui cree la feuille. */
#cp-pilote .mp-puce{
  --cp-rouge:#e60023;              /* rouge vif */
  --cp-rouge-fonce:#b3001b;
  border-style:solid;
  border-color:var(--cp-rouge);
  color:var(--cp-rouge);
  background:transparent;
}
#cp-pilote .mp-puce:hover:not(:disabled){
  background:var(--cp-rouge);
  border-color:var(--cp-rouge);
  color:#fff;
}
/* Allume : le rouge devient plein — on ne peut pas le manquer. */
#cp-pilote .mp-puce-on,
#cp-pilote .mp-puce-on:hover{
  background:linear-gradient(135deg,var(--cp-rouge),var(--cp-rouge-fonce));
  border-color:transparent;
  color:#fff;
  box-shadow:0 2px 10px rgba(230,0,35,.38);
}
/* ⛔ Pas de bouton mort : une annee sans banque pilote le montre. */
#cp-pilote .mp-puce:disabled{
  opacity:.4;
  cursor:not-allowed;
  border-style:dotted;
}
#cp-pilote-aide{line-height:1.7}
/* 🔑 En sombre, un rouge sature sur fond noir « vibre » et fatigue : on
   l'eclaircit juste assez pour garder le contraste sans l'agressivite. */
@media (prefers-color-scheme:dark){
  #cp-pilote .mp-puce{--cp-rouge:#ff4d5e;--cp-rouge-fonce:#d11a34}
}
:root[data-theme="dark"] #cp-pilote .mp-puce{--cp-rouge:#ff4d5e;--cp-rouge-fonce:#d11a34}
:root[data-theme="light"] #cp-pilote .mp-puce{--cp-rouge:#e60023;--cp-rouge-fonce:#b3001b}