/* ============================================================
   BANC — composants d'écran

   Ces quatre familles vivaient dans css/motion.css, qui annonçait une
   bibliothèque de mouvement et portait quatre cents lignes de CSS de
   composants. Le nom mentait, et c'était le premier obstacle à toute
   retouche : on ne cherche pas la fiche du lexique dans un fichier
   d'animations.

   Ce qui est ici : le bloc « Pour aller plus loin », le panneau du
   lexique, les pastilles et les fiches de notion, le guide « comment ça
   marche », et l'écran `trace`. Les @keyframes, elles, sont restées
   dans motion.css — les classes posées ci-dessous les appellent.
   ============================================================ */

/* ============================================================
   3. « POUR ALLER PLUS LOIN »
   ============================================================ */
details.deep{
  position:relative;margin:20px 0;overflow:hidden;
  background:linear-gradient(180deg,rgba(var(--violet-rgb),.07),transparent 70%),var(--panel);
  border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--e1);
  transition:border-color var(--t),box-shadow var(--t)
}
details.deep::before{
  content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--violet),rgba(var(--violet-rgb),.25))
}
details.deep[open]{border-color:rgba(var(--violet-rgb),.4);box-shadow:var(--e2)}
details.deep>summary{
  cursor:pointer;list-style:none;padding:12px 16px 12px 19px;
  font-family:var(--mono);font-size:var(--fs-2);color:var(--violet);
  letter-spacing:.12em;text-transform:uppercase;
  display:flex;align-items:center;gap:10px;
  transition:background var(--t),color var(--t)
}
details.deep>summary::-webkit-details-marker{display:none}
details.deep>summary::marker{content:''}
details.deep>summary::before{
  content:'\25B8';font-size:var(--fs-3);line-height:1;flex:none;
  transition:transform var(--t) var(--ease-spring)
}
details.deep[open]>summary::before{transform:rotate(90deg)}
details.deep>summary:hover{background:rgba(var(--violet-rgb),.08);color:var(--paper)}
details.deep[open]>summary{border-bottom:1px solid var(--line)}
details.deep>:not(summary){padding:0 18px 0 19px;animation:bancUnfold .34s var(--ease-out) backwards}
/* Le premier bloc après le résumé, quel que soit son type : `:first-of-type`
   viserait le premier de CHAQUE type et creuserait des trous partout. */
details.deep>summary+*{padding-top:14px}
details.deep[open]{padding-bottom:14px}

/* ------------------------------------------------------------
   3 bis. LEXIQUE — même mécanique repliable, autre fonction.
   `.deep` est un aparté au fil d'une leçon ; le lexique est un
   inventaire de 44 notions posé sur la carte des mondes. Il lui faut
   de la place, un en-tête qui s'assume, et des intertitres qui se
   lisent comme les rubriques de la carte.
   ------------------------------------------------------------ */
details.lexique{margin:var(--s5) 0 0;border-radius:var(--r-lg)}
details.lexique>summary{
  font-family:var(--display);font-size:var(--fs-4);font-weight:500;
  letter-spacing:.10em;color:var(--paper);
  padding:15px 18px 15px 21px
}
details.lexique>summary b{color:var(--violet);font-weight:500}
details.lexique>summary::before{color:var(--violet);font-size:var(--fs-3)}
/* Les compteurs se replient en blocs entiers : sur un téléphone, un
   résumé qui casse au milieu d'un nombre ne se lit plus. */
details.lexique>summary .lx-t{margin-inline-end:var(--s2)}
details.lexique>summary .lx-n{
  display:inline-block;white-space:nowrap;
  font-family:var(--mono);font-size:var(--fs-2);letter-spacing:.04em;
  color:var(--muted);margin-inline-end:var(--s3)
}
details.lexique>summary .lx-n.mure b{color:var(--green)}
details.lexique>summary .lx-n.due{color:var(--amber)}
details.lexique>summary .lx-n.due b{color:var(--amber)}
/* Le bouton flottant du tuteur passe par-dessus le coin bas droit : on
   lui laisse la place plutôt que de lui faire recouvrir un compteur. */
@media (max-width:620px){
  details.lexique>summary{padding-inline-end:70px}
}
details.lexique[open]>summary{background:rgba(var(--violet-rgb),.06)}
details.lexique>:not(summary){padding-inline:21px 20px}
details.lexique[open]{padding-bottom:18px}

#lexique .lede{
  font-size:var(--fs-3);color:var(--muted);max-width:64ch;
  margin:0 0 var(--s4);line-height:1.55
}
details.lexique h4{
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:var(--fs-1);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin:var(--s4) 0 10px
}
details.lexique h4::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,var(--line),transparent)
}
details.lexique>summary+*+h4{margin-top:0}

/* Le conteneur est le repère de positionnement des fiches : une pastille
   isolée porte la sienne, une grille de pastilles la fait pendre sous le
   groupe. L'écran peut affiner avec `--nx` / `--ny`. */
.notion-chips{position:relative;display:flex;flex-wrap:wrap;gap:7px;margin:0 0 var(--s3)}

/* ============================================================
   4. NOTIONS — pastille et fiche
   ============================================================ */
/* La pastille nue est atone : sur une grille de quarante notions, ce
   sont les états qui doivent porter l'information, pas le fond commun.
   Chaque état a sa couleur ET son intensité — teinte, contour, pastille
   témoin — pour rester lisible même à qui distingue mal les couleurs. */
.notion-chip{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.06em;
  padding:4px 11px;border-radius:99px;
  border:1px solid var(--line);background:var(--panel2);
  /* Atone, pas éteint : en `--faint` la pastille nue passait pour
     désactivée au milieu d'un écran de leçon. Les états colorés
     ressortent largement assez face à `--muted`. */
  color:var(--muted);cursor:pointer;vertical-align:middle;
  transition:border-color var(--t),color var(--t),background var(--t),
             box-shadow var(--t),transform var(--t-fast) var(--ease-out)
}
.notion-chip::before{
  content:'';width:6px;height:6px;border-radius:50%;flex:none;
  background:transparent;box-shadow:inset 0 0 0 1px var(--faint);
  transition:background var(--t),box-shadow var(--t)
}
.notion-chip:hover{
  border-color:var(--line-hi);color:var(--paper);
  transform:translateY(-1px);box-shadow:var(--e1)
}

/* Consolidée : acquise, donc calme. */
.notion-chip.mure{
  border-color:rgba(var(--green-rgb),.34);background:rgba(var(--green-rgb),.07);
  color:var(--green)
}
.notion-chip.mure::before{background:var(--green);box-shadow:0 0 7px rgba(var(--green-rgb),.85)}
.notion-chip.mure:hover{border-color:rgba(var(--green-rgb),.7);color:var(--green);box-shadow:var(--glow-soft-cyan)}

/* En cours d'ancrage : le violet est la couleur du SRS partout ailleurs. */
.notion-chip.jeune{
  border-color:rgba(var(--violet-rgb),.45);background:rgba(var(--violet-rgb),.10);
  color:var(--violet)
}
.notion-chip.jeune::before{background:var(--violet);box-shadow:0 0 7px rgba(var(--violet-rgb),.9)}
.notion-chip.jeune:hover{border-color:var(--violet);color:var(--violet)}

/* Échue : la seule qui demande quelque chose maintenant. Contour plein,
   fond ambré, témoin qui respire — une pulsation lente, jamais un
   clignotement (0,4 Hz). */
.notion-chip.due{
  border-color:var(--amber);background:rgba(var(--amber-rgb),.16);
  color:var(--amber);font-weight:500;box-shadow:var(--glow-soft-amber)
}
.notion-chip.due::before{
  background:var(--amber);box-shadow:0 0 8px rgba(var(--amber-rgb),.95);
  animation:bancDue 2.6s var(--ease-in-out) infinite
}
.notion-chip.due:hover{background:rgba(var(--amber-rgb),.24);box-shadow:var(--glow-amber)}

/* Fiche ouverte : cyan, quel que soit l'état de révision. */
.notion-chip[aria-expanded="true"],.notion-chip.on{
  border-color:var(--cyan);background:rgba(var(--cyan-rgb),.14);color:var(--cyan);
  box-shadow:var(--glow-cyan)
}
.notion-chip[aria-expanded="true"]::before,.notion-chip.on::before{
  background:var(--cyan);box-shadow:0 0 8px rgba(var(--cyan-rgb),.95);animation:none
}

/* Fiche de notion. `screens/common.js` la place lui-même en `fixed` sur
   <body> — hors de tout conteneur qui la rognerait — et la retourne
   au-dessus de la pastille quand le bas de l'écran manque. D'où l'absence
   de pointe : une flèche fixe mentirait une fois sur deux. Les valeurs
   ci-dessous ne servent que si personne ne positionne la fiche. */
.notion-card{
  position:absolute;left:var(--nx,0px);top:var(--ny,calc(100% + 10px));z-index:5;
  width:min(360px,calc(100vw - 32px));
  background:linear-gradient(180deg,var(--panel2-hi),var(--panel2));
  border:1px solid var(--line-hi);border-radius:var(--r-lg);
  padding:16px 40px 16px 18px;box-shadow:var(--e3);
  font-family:var(--body);font-size:var(--fs-3);line-height:1.55;
  color:var(--paper);text-align:left;text-transform:none;letter-spacing:normal;
  animation:bancPop .3s var(--ease-spring) backwards
}
.notion-card:focus{outline:none}
.notion-card:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.notion-card h4,.notion-card .notion-title{
  font-family:var(--display);font-size:var(--fs-4);font-weight:500;color:var(--cyan);
  margin:0 0 9px;letter-spacing:normal
}
.notion-card p{margin:0 0 10px;max-width:none}
.notion-card p:last-child{margin-bottom:0}
.notion-card .short{color:var(--paper)}
.notion-card .analogy{
  border-inline-start:2px solid var(--violet);padding:6px 0;padding-inline-start:11px;margin:0 0 10px;
  color:var(--muted);font-style:italic
}
.notion-card .analogy b{color:var(--violet);font-style:normal}
.notion-card .trap{
  border-inline-start:2px solid var(--red);padding:7px 0;padding-inline-start:11px;margin:0 0 10px;
  background:linear-gradient(90deg,rgba(var(--red-rgb),.09),transparent 70%)
}
.notion-card .trap b{color:var(--red)}
/* « Pour aller plus loin » de la fiche : du contenu, pas un bouton. */
.notion-card .more{
  margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
  font-size:var(--fs-2);color:var(--muted)
}
.notion-card .more p{margin:0 0 8px}
.notion-card .more p:last-child{margin-bottom:0}
.notion-card .more pre{margin:9px 0;font-size:var(--fs-2);padding:11px 12px 11px 15px}
.notion-card .notion-close{
  position:absolute;top:9px;inset-inline-end:9px;width:24px;height:24px;border-radius:var(--r);
  display:grid;place-items:center;font-size:var(--fs-2);line-height:1;
  color:var(--faint);border:1px solid transparent;
  transition:color var(--t),border-color var(--t),background var(--t)
}
.notion-card .notion-close:hover{color:var(--paper);border-color:var(--line);background:var(--panel)}

/* ============================================================
   5. GUIDE « comment ça marche »
   Posé en tête d'écran par screens/guide.js : un bouton texte discret
   et sa bulle. Volontairement pauvre en couleur — c'est une aide, pas
   une étape de la leçon.
   ============================================================ */
/* Le guide vit en pied d'écran : sa marge est donc au-dessus, et sa
   bulle s'ouvre vers le haut — sous le bouton, elle sortirait de la
   page. */
.guide{position:relative;display:flex;margin:var(--s4) 0 0}
.guide-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 12px;border-radius:99px;
  border:1px solid var(--line);background:var(--panel2);color:var(--faint);
  font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.10em;
  line-height:1.5;cursor:pointer;
  transition:border-color var(--t),color var(--t),background var(--t),box-shadow var(--t)
}
.guide-btn:hover{border-color:var(--line-hi);color:var(--paper)}
.guide-btn[aria-expanded="true"]{
  border-color:rgba(var(--cyan-rgb),.6);color:var(--cyan);
  background:rgba(var(--cyan-rgb),.09);box-shadow:var(--glow-soft-cyan)
}
.guide-pop{
  position:absolute;z-index:6;bottom:calc(100% + 9px);inset-inline-start:0;
  width:min(420px,calc(100vw - 48px));
  background:linear-gradient(180deg,var(--panel2-hi),var(--panel2));
  border:1px solid var(--line-hi);border-radius:var(--r);
  padding:13px 15px;box-shadow:var(--e3);
  font-size:var(--fs-3);line-height:1.55;color:var(--muted);text-align:left;
  animation:bancPop .28s var(--ease-spring) backwards
}
.guide-pop b{color:var(--paper);font-weight:600}
.guide-pop::before{
  content:'';position:absolute;top:-6px;inset-inline-start:20px;width:10px;height:10px;
  background:var(--panel2-hi);border-left:1px solid var(--line-hi);border-top:1px solid var(--line-hi);
  transform:rotate(45deg)
}
.guide-pop-in{position:relative}
.guide-pop-in h4{
  font-family:var(--display);font-size:var(--fs-4);font-weight:500;color:var(--paper);
  margin:0 0 10px;letter-spacing:normal;text-transform:none
}
.guide-pop-in p{margin:0 0 9px;max-width:none}
.guide-pop-in p:last-child{margin-bottom:0}
/* Trois registres, trois liserés : ce que ça fait, pourquoi, comment s'y prendre. */
.guide-pop-in .how{border-inline-start:2px solid var(--cyan);padding-inline-start:11px}
.guide-pop-in .why{border-inline-start:2px solid var(--violet);padding-inline-start:11px}
.guide-pop-in .tip{border-inline-start:2px solid var(--amber);padding-inline-start:11px}
.guide-pop-in .how b{color:var(--cyan)}
.guide-pop-in .why b{color:var(--violet)}
.guide-pop-in .tip b{color:var(--amber)}

/* Bouton « demande au tuteur » : une porte de sortie, jamais l'action
   principale de l'écran — d'où le violet plutôt que l'ambre. */
.btn-ghost.ask-btn{
  margin-top:var(--s3);font-size:var(--fs-2);
  border-color:rgba(var(--violet-rgb),.4);color:var(--violet)
}
.btn-ghost.ask-btn:hover:not(:disabled){
  border-color:var(--violet);color:var(--violet);
  background:rgba(var(--violet-rgb),.10);box-shadow:var(--glow-violet)
}

/* ============================================================
   6. ÉCRAN « TRACE » — déroulé pas-à-pas
   Structure produite par js/screens/trace.js :
     .trace > .trace-code (.trace-line > .trace-gut + .trace-src)
            > .trace-panel (.trace-varshd, .trace-vars, .trace-outhd, pre.trace-out)
     puis .trace-note, .trace-ctl (boutons .btn-ghost, .trace-speed,
     .spacer, .trace-progress), .trace-ask, .trace-end.
   ============================================================ */
.trace{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s3);margin:6px 0}

.trace-code{
  position:relative;overflow:auto;max-height:min(58vh,420px);
  background:linear-gradient(180deg,var(--deep-hi),var(--deep) 120px);
  border:1px solid var(--line);border-radius:var(--r);
  padding:14px 0;font-family:var(--mono);font-size:var(--fs-3);line-height:1.65;
  box-shadow:var(--e1)
}
/* Le déplacement du surlignage se fait par fondu croisé : la ligne
   quittée s'éteint pendant que la suivante s'allume, sur la même durée.
   Une bande unique glissant en `top` avait été prévue, elle est retirée —
   elle aurait exigé que l'écran publie l'index de la ligne courante, et
   deux mécanismes concurrents pour un seul surlignage sont un piège. */
.trace-line{
  position:relative;display:flex;gap:12px;padding:0 14px;line-height:1.65;
  white-space:pre;color:var(--muted);
  transition:color .26s var(--ease-out),background .26s var(--ease-out),
             box-shadow .26s var(--ease-out)
}
.trace-line.done{color:var(--faint)}
.trace-line.now{
  color:var(--paper);
  background:linear-gradient(90deg,rgba(var(--amber-rgb),.17),rgba(var(--amber-rgb),.04) 62%,transparent);
  box-shadow:inset 3px 0 0 var(--amber)
}
.trace-src{flex:1;min-width:0}
.trace-gut{
  flex:none;width:2.4em;text-align:right;color:var(--faint);font-size:.92em;
  user-select:none;transition:color var(--t)
}
.trace-line.now .trace-gut{color:var(--amber);font-weight:700}
.trace-line.done .trace-gut{color:rgba(var(--green-rgb),.7)}

.trace-panel{
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--panel2-hi),var(--panel2));
  border:1px solid var(--line);border-radius:var(--r);padding:14px;
  box-shadow:var(--e1);min-width:0
}
.trace-varshd,.trace-outhd{
  font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:9px
}
.trace-outhd{margin-top:var(--s3)}
/* Le cadre d'appel courant. Il n'apparaît que dans un déroulé qui entre
   dans les fonctions : ailleurs il serait un bruit permanent. */
.trace-frame{
  color:var(--violet);text-transform:none;letter-spacing:.04em;font-weight:600;
  animation:bancPop .32s var(--ease-spring) 1
}
@media (prefers-reduced-motion:reduce){.trace-frame{animation:none}}
.trace-vars{display:flex;flex-direction:column;gap:6px;min-width:0}
.tvar{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-family:var(--mono);font-size:var(--fs-2);
  background:var(--deep);border:1px solid var(--line);border-radius:var(--r);
  padding:7px 10px;min-width:0;
  transition:border-color var(--t),box-shadow var(--t),background var(--t),color var(--t)
}
/* Une variable pas encore définie existe à l'écran mais ne prétend rien. */
.tvar.pending{opacity:.5;border-style:dashed}
.tvar .name{color:var(--muted);flex:none}
.tvar .val{color:var(--paper);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tvar.pending .val{color:var(--faint)}
.tvar.changed{
  border-color:rgba(var(--cyan-rgb),.7);
  background:rgba(var(--cyan-rgb),.10);
  animation:bancGlowInfo .8s var(--ease-out) 1
}
.tvar.changed .val{color:var(--cyan);animation:bancCount .5s var(--ease-spring) 1}

/* `.trace-out` est un <pre> : on annule la gouttière et les marges du
   bloc de code générique, ce n'est pas du code mais une sortie. */
.trace-out{
  font-family:var(--mono);font-size:var(--fs-2);color:var(--green);
  background:var(--deep);border:1px solid var(--line);border-radius:var(--r);
  padding:10px 12px;margin:0;min-height:60px;max-height:180px;overflow:auto;
  white-space:pre-wrap;line-height:1.5;box-shadow:none
}
.trace-out::before{display:none}
.trace-out.dim{color:var(--faint)}
.trace-out:empty::after{content:'(aucune sortie)';color:var(--faint)}

.trace-note{
  display:none;margin-top:var(--s3);padding:11px 15px;
  border-inline-start:3px solid var(--cyan);
  border-start-start-radius:0;border-end-start-radius:0;
  border-start-end-radius:var(--r);border-end-end-radius:var(--r);
  background:linear-gradient(90deg,rgba(var(--cyan-rgb),.10),transparent 70%);
  font-size:var(--fs-3);line-height:1.55
}
.trace-note.on{display:block}
.trace-note b{color:var(--cyan)}

.trace-ctl{display:flex;align-items:center;gap:8px;margin-top:var(--s3);flex-wrap:wrap}
.trace-ctl .spacer{flex:1}
.trace-ctl .btn-ghost{font-family:var(--mono);font-size:var(--fs-2);padding:7px 12px}
/* Lecture en cours : c'est le seul bouton ambre de la barre. */
.trace-ctl .btn-ghost.on{
  border-color:rgba(var(--amber-rgb),.65);color:var(--amber);
  background:rgba(var(--amber-rgb),.10);box-shadow:var(--glow-soft-amber)
}
.trace-speed{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:var(--fs-2);color:var(--muted)
}
.trace-speed select{
  background:var(--deep);border:1px solid var(--line);color:var(--paper);
  font-family:var(--mono);font-size:var(--fs-2);padding:6px 8px;border-radius:var(--r);
  transition:border-color var(--t),box-shadow var(--t)
}
.trace-speed select:focus{border-color:var(--cyan);box-shadow:var(--glow-soft-cyan);outline:none}
/* Compteur de pas : un afficheur, pas une barre. */
.trace-progress{
  font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
  padding:5px 11px;border-radius:99px;
  border:1px solid var(--line);background:var(--deep)
}

.trace-ask:not(:empty){margin-top:var(--s3)}
.trace-end:not(:empty){margin-top:var(--s4)}
.trace-explain{
  padding:14px 16px;border-radius:var(--r);
  background:linear-gradient(90deg,rgba(var(--cyan-rgb),.08),transparent 70%);
  border-inline-start:3px solid var(--cyan)
}
.trace-explain p:last-child{margin-bottom:0}
/* La question finale n'appartient plus au déroulé : elle mérite sa
   césure, sinon on la lit comme un dernier pas. */
.trace-quiz{
  margin-top:var(--s5);padding-top:var(--s4);
  border-top:1px solid rgba(var(--line-rgb),.7)
}
.trace-quiz .q{margin-bottom:var(--s4)}

@media (max-width:620px){
  .trace{grid-template-columns:1fr}
  .trace-code{max-height:46vh}
  .trace-ctl{gap:6px}
  .trace-ctl .btn-ghost{padding:6px 10px;font-size:var(--fs-2)}
}