/* ==========================================================================
   Schéma animé — mise en forme du composant js/components/animatedSchema.js
   Zone de dessin fixe : 342 px de large, hauteur déclarée par le schéma.
   ========================================================================== */

.schema{
  display:grid;
  gap:14px 28px;
  padding:clamp(20px,3vw,28px);
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  background:var(--color-surface);
  box-shadow:var(--shadow-card);
  container-type:inline-size;
}
.schema-text{display:grid;align-content:start;gap:12px}

/* Dès qu'il y a la place, le texte tient la colonne de gauche et le dessin
   celle de droite : on lit, on regarde à côté, et les boutons restent sous la
   phrase sans qu'on ait à faire défiler quoi que ce soit.
   `--schema-side` dit au composant que la scène est à côté du texte : sa
   hauteur ne pousse plus rien, elle n'a donc pas à se réduire. */
@container (min-width:620px){
  .schema:not(.is-collapsed){grid-template-columns:minmax(0,1fr) 342px}
  .schema-head,.schema-title{grid-column:1/-1}
  .schema-text{grid-column:1;grid-row:3}
  .schema-stage-wrap{grid-column:2;grid-row:3/span 2;--schema-side:1;margin-inline:0}
  .schema-controls{grid-column:1;grid-row:4;align-self:end}
  .schema-caption{min-height:0}
}
.schema-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.schema-head-actions{display:flex;align-items:center;gap:14px;white-space:nowrap}
.schema-skip{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;min-height:44px}
.schema-body{display:contents}
.schema-body[hidden]{display:none}
.schema.is-collapsed{gap:10px}
.schema-count{font-family:var(--font-mono);font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--color-muted)}
.schema-title{font-size:clamp(1.3rem,2.4vw,1.65rem);font-weight:600;line-height:1.1;letter-spacing:-.03em;text-wrap:balance}

/* --- scène ---------------------------------------------------------------- */
.schema-stage-wrap{position:relative;width:100%;max-width:342px;margin-inline:auto;overflow:hidden}
.schema-stage{position:absolute;top:0;left:50%;transform:translateX(-50%) scale(var(--schema-scale,1));transform-origin:top center}
.schema-stage svg{position:absolute;inset:0;overflow:visible}

.schema-node{
  position:absolute;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:6px 8px;
  border:1px solid var(--color-border);border-radius:12px;
  background:var(--color-surface);
  color:var(--color-text);
  font-size:14px;font-weight:600;line-height:1.25;text-align:center;
  transition:background var(--motion-ui) var(--ease-standard),border-color var(--motion-ui) var(--ease-standard),box-shadow var(--motion-ui) var(--ease-standard);
}
.schema-node small{margin-top:2px;font-family:var(--font-mono);font-size:10.5px;font-weight:400}
.schema-node.is-dashed{border-style:dashed;border-color:var(--color-border-strong);background:var(--color-bg)}
.schema-node.is-dark{border-color:var(--color-text);background:var(--color-text);color:var(--color-on-dark)}
.schema-node.is-data{background:var(--color-cream);font-weight:500}
.schema-node.is-danger{border-color:var(--color-error)}
.schema-node.is-ok{border-color:var(--color-success)}
.schema-node.is-on{border:1.5px solid var(--color-accent);background:var(--color-accent-soft);box-shadow:0 0 0 4px var(--ring-accent)}
.schema-node.is-dark.is-on{background:var(--color-text);color:var(--color-on-dark);border-color:var(--color-accent)}
.schema-node.is-dashed.is-on{border-style:dashed}

.schema-arrow-label{
  position:absolute;z-index:1;
  padding:0 3px;border-radius:3px;
  background:var(--color-surface);
  color:var(--color-muted);
  font-family:var(--font-mono);font-size:10px;line-height:14px;white-space:nowrap;
  transition:color var(--motion-ui) var(--ease-standard);
}
.schema-arrow-label.is-on{color:var(--color-accent-strong)}

/* --- pastilles, légende, commentaire -------------------------------------- */
.schema-chips{display:flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;gap:6px;min-height:26px}
.schema-chip{padding:5px 9px;border-radius:var(--radius-xs);font-size:12px;font-weight:500}
.schema-chip.is-dark{background:var(--color-text);color:var(--color-on-dark)}
.schema-chip.is-mono{background:var(--color-cream);color:var(--color-text);font-family:var(--font-mono)}
.schema-chip.is-ok{background:var(--color-success);color:var(--color-on-dark)}
.schema-chip.is-danger{background:var(--color-error);color:var(--color-on-dark)}
.schema-caption{min-height:4.4em;font-size:1.0625rem;font-weight:500;line-height:1.45}
/* Le nom du module ne s'affiche qu'au-dessus de 560 px : voir l'en-tête. */
.schema-head-module{display:none}
@media(min-width:561px){.schema-head-module{display:inline}}

/* --- contrôles ------------------------------------------------------------ */
.schema-controls{display:grid;gap:12px}
.schema-dots{display:flex;justify-content:center;gap:6px}
.schema-dots span{width:6px;height:6px;border-radius:3px;background:var(--color-track);transition:width var(--motion-ui) var(--ease-standard),background var(--motion-fast)}
.schema-dots span.is-done{background:var(--color-accent)}
.schema-dots span.is-current{width:22px;background:var(--color-accent)}
.schema-buttons{display:flex;gap:10px}
.schema-step-button{flex:1 1 0;min-height:52px;padding-inline:10px;white-space:nowrap}
.schema-step-button.primary{flex:2 1 0}
.schema-step-button:disabled{cursor:default;opacity:.4;transform:none}

/* --- téléphone ------------------------------------------------------------
   Le bloc doit tenir dans un écran : on lit la phrase et Anatole en haut, on
   regarde le dessin en dessous, et les boutons sont là sans avoir à faire
   défiler. Chaque pixel rendu ici est un pixel de plus pour le dessin, dont
   l'échelle est calculée sur la hauteur restante (animatedSchema.js).
   560 px, la même bascule que le reste de la leçon : un grand téléphone
   (430 px) reste un téléphone. */
@media(max-width:560px){
  /* Le schéma prend toute la largeur de la page : la colonne de repère de la
     leçon coûtait 36 px de dessin pour deux lettres décoratives. */
  .lesson-schema{grid-template-columns:minmax(0,1fr)}
  .lesson-schema>.lesson-section-index{display:none}
  .schema{padding:14px;gap:8px}
  /* Le nom du module ayant disparu, l'en-tête tient sur une seule ligne. */
  .schema-head{gap:10px}
  .schema-head>.eyebrow{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .schema-title{font-size:1.15rem}
  .schema-text{gap:8px}
  .schema .coach-bubble{padding:10px;gap:10px}
  .schema .coach-bubble-text{font-size:.875rem;line-height:1.38}
  .schema-chip{padding:4px 8px;font-size:11.5px}
  /* `--schema-solo` : la barre de leçon s'efface devant le schéma, le calcul
     de hauteur ne doit donc plus la compter (animatedSchema.js). */
  .schema-stage-wrap{margin-inline:-6px;--schema-solo:1}
  .lesson-page.has-schema-in-view .lesson-sticky-header{opacity:0;visibility:hidden;transform:translateY(-8px)}
  .schema-caption{font-size:.975rem;line-height:1.4}
  .schema-chips:empty{display:none}
  /* Le compteur « 3 / 6 » de l'en-tête dit déjà où l'on en est : les pastilles
     reprendraient 16 px au dessin pour la même information. */
  .schema-dots{display:none}
  .schema-step-button{min-height:48px}
}
@media(prefers-reduced-motion:reduce){
  .schema-node,.schema-arrow-label,.schema-dots span{transition:none}
}