/* Exercices interactifs — composants partagés et variantes par mécanique. */
.interactive-workbench{max-width:980px}.exercise-renderer,.exercise-flow{display:grid;gap:var(--space-6)}.interactive-exercise{min-width:0}.exercise-prompt,.exercise-context{display:grid;gap:var(--space-2);padding:var(--space-5);border-left:3px solid var(--color-blue);border-radius:0 var(--radius-button) var(--radius-button) 0;background:var(--color-surface-high)}.exercise-prompt h2{font-size:clamp(1.15rem,2vw,1.45rem)}
.exercise-card{min-width:0;padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface-raised)}.exercise-card h3{font-size:1rem}.exercise-card.is-correct,.exercise-item-feedback.is-correct{border-color:var(--color-success)}.exercise-card.is-incorrect,.exercise-item-feedback.is-incorrect{border-color:var(--color-error)}
.exercise-chip-fieldset,.access-options{min-width:0;margin:0;padding:0;border:0}.exercise-chip-fieldset legend,.access-options legend{margin-bottom:var(--space-3);font-weight:650}.exercise-chip-list{display:flex;flex-wrap:wrap;gap:var(--space-2)}.exercise-chip{position:relative;display:inline-flex;min-width:0}.exercise-chip input{position:absolute;width:1px;height:1px;opacity:0}.exercise-chip span{display:flex;min-height:44px;align-items:center;padding:8px 13px;border:1px solid var(--color-border-strong);border-radius:999px;background:var(--color-surface);color:var(--color-copy);font-size:.78rem;cursor:pointer}.exercise-chip input:checked+span{border-color:var(--color-orange);background:var(--color-accent-soft);color:var(--color-text)}.exercise-chip input:focus-visible+span{outline:3px solid var(--color-blue);outline-offset:2px}
.exercise-item-feedback{display:grid;gap:6px;padding:14px 16px;border:1px solid var(--color-border);border-left:3px solid var(--color-blue);border-radius:0 var(--radius-button) var(--radius-button) 0;background:var(--color-surface)}.exercise-item-feedback[hidden]{display:none}.exercise-item-feedback p{color:var(--color-secondary);font-size:.85rem}.exercise-feedback-list{display:grid;gap:var(--space-3)}.exercise-feedback-list:empty{display:none}.exercise-validate{width:100%;margin-top:var(--space-2)}
.exercise-score-panel{display:grid;gap:var(--space-3);padding:var(--space-6);border:1px solid var(--color-border-strong);border-left:4px solid var(--color-success);border-radius:0 var(--radius-card) var(--radius-card) 0;background:var(--color-success-soft)}.exercise-score-line{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4)}.exercise-score-line strong{font:600 clamp(1.8rem,5vw,3rem)/1 var(--font-mono);color:var(--color-success)}.exercise-score-line span{font:600 1rem var(--font-mono)}.exercise-score-panel .button{width:max-content}
.spot-response-card{display:grid;gap:var(--space-4)}.spot-response-text{font-size:1rem;line-height:1.65}.exercise-step-counter{color:var(--color-accent-strong);font:600 .72rem var(--font-mono);letter-spacing:.06em;text-transform:uppercase}.myth-card{display:grid;gap:var(--space-5)}.myth-card h2{font-size:clamp(1.25rem,3vw,1.7rem);line-height:1.35}.exercise-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}.exercise-choice-button,.branch-choice{min-height:50px;padding:12px 16px;border:1px solid var(--color-border-strong);border-radius:var(--radius-button);background:var(--color-surface);color:var(--color-text);font-weight:650;text-align:center}.exercise-choice-button:hover,.branch-choice:hover{border-color:var(--color-blue)}.exercise-choice-button.is-selected{border-color:var(--color-orange)}.exercise-choice-button.is-correct{background:var(--color-success-soft)}.exercise-choice-button.is-incorrect{background:var(--color-error-soft)}
.sortable-list{display:grid;gap:var(--space-3)}.sortable-card{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--space-4)}.sortable-card[draggable="true"]{cursor:grab}.sortable-card-copy{display:grid;gap:5px}.exercise-switch{display:grid;justify-items:center;gap:5px;color:var(--color-muted);font-size:.7rem}.exercise-switch input{width:22px;height:22px;accent-color:var(--color-orange)}.sort-controls{display:flex;gap:6px}.sort-controls button,.linked-pair button{display:grid;min-width:44px;min-height:44px;place-items:center;border:1px solid var(--color-border-strong);border-radius:var(--radius-button);background:transparent;color:var(--color-text);font-size:1.1rem}.sort-controls button:hover{border-color:var(--color-orange)}
.review-deliverable{display:grid;gap:var(--space-3);padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface-raised)}.review-deliverable>p:last-child{white-space:pre-wrap;line-height:1.8}.review-highlight{display:inline;padding:2px 4px;border:0;border-bottom:2px solid var(--color-warning);background:var(--color-warning-soft);color:var(--color-text);font:inherit;text-align:left}.review-highlight:hover{background:var(--color-warning)}.review-fix-panel{display:grid;gap:var(--space-3);min-height:86px;padding:var(--space-5);border:1px dashed var(--color-border-strong);border-radius:var(--radius-card)}.review-fix-panel:empty::before{content:"Cliquez sur un passage surligné pour choisir sa correction.";color:var(--color-muted)}
.source-card{display:grid;gap:8px;text-align:left}.source-card.is-selected{border-color:var(--color-orange);background:var(--color-accent-soft)}button.source-card{width:100%;color:var(--color-text)}.source-pair-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.linked-pairs{display:grid;gap:var(--space-2)}.linked-pair{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding:10px 12px;border-left:2px solid var(--color-orange);background:var(--color-accent-soft);font-size:.78rem}
.workspace-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);align-items:start}.workspace-zone{display:grid;gap:var(--space-3);min-height:220px;padding:var(--space-4);border:1px dashed var(--color-border-strong);border-radius:var(--radius-card)}.workspace-zone h2{font-size:1rem}.workspace-zone-items{display:grid;gap:var(--space-3)}.workspace-item{display:grid;gap:var(--space-3);padding:var(--space-4);cursor:grab}.workspace-item-actions{display:grid;gap:6px}.workspace-item-actions button{min-height:44px;padding:7px;border:1px solid var(--color-border);border-radius:var(--radius-button);background:transparent;color:var(--color-copy);font-size:.7rem}
.access-options{display:grid;gap:var(--space-3)}.access-option{display:grid;grid-template-columns:26px minmax(0,1fr);align-items:center;gap:var(--space-3);min-height:64px;padding:12px 16px;border:1px solid var(--color-border);border-radius:var(--radius-button);background:var(--color-surface-raised)}.access-option input{width:22px;height:22px;accent-color:var(--color-orange)}.access-option>span{display:grid;gap:3px}.access-option small{color:var(--color-muted)}.skill-task{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-4)}
.branching-exercise{transition:opacity var(--motion-fast)}.branch-history{display:grid;gap:8px;padding:var(--space-4);border-left:3px solid var(--color-orange);background:var(--color-accent-soft)}.branch-history p:not(.eyebrow){color:var(--color-secondary);font-size:.8rem}.branch-step,.branch-ending{display:grid;gap:var(--space-5);padding:clamp(20px,4vw,34px);border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface-raised);animation:exercise-enter var(--motion-ui) var(--ease-standard)}.branch-step h2,.branch-ending h2{font-size:clamp(1.35rem,3vw,1.9rem);line-height:1.35}.branch-choices{display:grid;gap:var(--space-3)}.branch-choice{width:100%;text-align:left}.branch-feedback{display:grid;gap:var(--space-3);padding:var(--space-5);border-left:3px solid var(--color-blue);background:var(--color-surface-high)}.branch-feedback[hidden]{display:none}@keyframes exercise-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:760px){.workspace-board{grid-template-columns:1fr}.workspace-zone{min-height:120px}.source-pair-grid{grid-template-columns:1fr}.sortable-card{grid-template-columns:minmax(0,1fr) auto}.sortable-card .sort-controls{grid-column:1/-1;justify-content:flex-end}.skill-task{grid-template-columns:1fr}.exercise-choice-grid{grid-template-columns:1fr}.exercise-choice-button{text-align:left}}
@media(max-width:420px){.workbench-surface:has(.exercise-renderer){padding:16px}.exercise-card,.exercise-prompt,.exercise-context,.review-deliverable,.review-fix-panel{padding:16px}.exercise-score-panel{padding:20px}.exercise-score-panel .button{width:100%}.exercise-chip-list{display:grid;grid-template-columns:1fr}.exercise-chip,.exercise-chip span{width:100%}.sortable-card{grid-template-columns:1fr}.exercise-switch{justify-items:start}.sort-controls{justify-content:flex-start!important}}
@media(prefers-reduced-motion:reduce){.branch-step,.branch-ending{animation:none}.exercise-outcome{scroll-behavior:auto}}

/* ── categorize : ranger N éléments dans M catégories ──────────────────────── */
.categorize-legend{display:grid;gap:10px;margin:0;padding-left:1.3em}
.categorize-legend li{color:var(--color-secondary);font-size:.88rem;line-height:1.5}
.categorize-legend strong{display:block;color:var(--color-text)}
.categorize-legend code{display:inline-block;margin-top:2px;font-size:.78rem}
.categorize-legend small{display:block;color:var(--color-muted)}
.categorize-items{display:grid;gap:16px;margin-top:24px}
.categorize-card h3{font-size:1rem;line-height:1.45}
.categorize-detail{margin-top:8px;color:var(--color-secondary);font-size:.9rem;line-height:1.6;white-space:pre-wrap}
.categorize-final{display:grid;gap:12px;margin-top:28px;padding:22px;border:1px solid var(--color-border-strong);border-radius:var(--radius-xs);background:var(--color-surface-muted)}
.exercise-item-feedback.is-partial,.categorize-card.is-partial{border-left:3px solid var(--color-warning)}
.spot-response-text{white-space:pre-wrap}

/* ── root_cause : cause ou symptôme ────────────────────────────────────────── */
.root-cause-exercise .exercise-context p:last-child{max-width:72ch;line-height:1.65}
.root-cause-explanation{border-left-color:var(--color-orange)}
/* Même geste que les jeux : on touche, la destination s'allume, on touche. */
.exercise-how-to{font-family:var(--font-mono);font-size:.72rem;line-height:1.5}
.workspace-zone.is-armed{border-style:solid;border-color:var(--color-accent);background:var(--color-accent-soft)}
.workspace-item{cursor:pointer}
.workspace-item.is-selected{border:2px solid var(--color-accent);background:var(--color-accent-tint)}
.workspace-item:focus-visible,.workspace-zone:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.workspace-zone[aria-disabled="true"] .workspace-item,.workspace-item[aria-disabled="true"]{cursor:default}

/* ──────────────────────────────────────
   Exercices pratiques CCAR-F (moteur js/ccaf/)
   ──────────────────────────────────────
   Le moteur injecte sa feuille dans <style id="ap-styles"> et déclare ses
   variables sous :where(.ap-root), de spécificité nulle : cette règle les
   remplace quel que soit l'ordre de chargement. On ne redéfinit ici que les
   couleurs et les polices — la mise en page reste celle du moteur, auditée à
   390 et 1280 px.
   Thème clair uniquement, conformément à la direction artistique. */
.ap-root{
  --ap-bg:var(--color-surface);
  --ap-surface:var(--color-surface);
  --ap-ink:var(--color-text);
  --ap-accent:var(--color-accent);
  --ap-accent-ink:var(--color-on-dark);
  --ap-accent-text:var(--color-accent-deep);
  --ap-line:var(--color-border-strong);
  --ap-soft:var(--color-surface-high);
  --ap-pass:var(--color-success);
  --ap-fail:var(--color-error-strong);
  --ap-focus:var(--color-accent-strong);
  --ap-sans:var(--font-body);
  --ap-serif:var(--font-accent);
  --ap-mono:var(--font-mono);
  max-width:none;padding:0;margin:0;
  /* La barre de symboles du moteur défile dans sa propre boîte
     (overflow-x:auto). Encore faut-il qu'elle ait une largeur : dans une grille
     ou un flex, un enfant garde min-width:auto et pousse la page. */
  min-width:0;
}
.ccaf-item,.ccaf-item-host{min-width:0;max-width:100%}
.ccaf-item .ap-symbar,.ccaf-item .ap-editor{max-width:100%;min-width:0}
/* Les deux seuls endroits où du texte est posé sur l'aplat d'accent : on y met
   le terracotta assombri (crème sur #A8502F = 5,17:1, AA tenu). */
.ap-root .ap-btn.is-primary,.ap-root .ap-chip.is-accent{
  background:var(--color-accent-deep);border-color:var(--color-accent-deep);
}
/* Un lab se fait sur ordinateur : sur téléphone, on le dit au lieu de proposer
   des commandes à copier (audit mobile, ENGINE-LABS.md). */
@media (pointer:coarse){
  .ccaf-item.is-desktop-only .ap-cmd button{display:none}
}
.ccaf-item{display:block}
.ccaf-item-pending{margin:0;padding:14px 0;font-size:.87rem}

/* --- La pratique CCAR-F dans un module ------------------------------------ */
.module-ccaf{
  display:grid;gap:12px;
  padding:clamp(18px,3vw,26px);
  border:1px solid var(--color-border);border-radius:var(--radius-card);
  background:var(--color-cream);
}
.module-ccaf-labs{display:grid;gap:8px;margin-top:6px}
.module-ccaf-group{display:grid;gap:8px;margin-top:6px}
.module-ccaf-group h3{
  display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;
  margin:0;font-size:.95rem;line-height:1.3;font-weight:650;
}
.module-ccaf-ref{font-family:var(--font-mono);font-size:.72rem;font-weight:600;color:var(--color-accent-deep)}

/* --- La fiche d'un exercice ----------------------------------------------- */
.ccaf-practice-page,.ccaf-labs-page{max-width:840px;margin-inline:auto}
/* Même raison que pour .ap-root : les enfants d'une grille ne descendent pas
   sous leur contenu sans min-width:0, et l'éditeur pousserait la page. */
.ccaf-practice-page>*{min-width:0}
.ccaf-practice-page .workbench-surface{min-width:0;max-width:100%}
.ccaf-practice-meta{display:flex;flex-wrap:wrap;gap:8px}
.ccaf-practice-statements{display:grid;gap:6px}
.ccaf-practice-statements ul{margin:0;padding-left:1.1rem;display:grid;gap:4px;font-size:.9rem;line-height:1.5}
.ccaf-practice-statements strong{font-family:var(--font-mono);font-size:.8rem}
.ccaf-desktop-note{display:grid;gap:4px}

/* --- L'encart « depuis l'examen de juillet 2026 » ------------------------- */
.ccaf-notes{
  border-block:1px solid var(--color-border);
  padding-block:4px;
}
.ccaf-notes>summary{
  display:flex;gap:16px;align-items:center;justify-content:space-between;
  min-height:72px;cursor:pointer;
}
.ccaf-notes>summary h2{margin:0;font-size:1.05rem;line-height:1.25}
.ccaf-notes>summary:focus-visible{outline:3px solid var(--color-accent-strong);outline-offset:3px;border-radius:var(--radius-xs)}
.ccaf-notes-content{display:grid;gap:18px;padding-bottom:18px}
.ccaf-notes-group{display:grid;gap:10px}
.ccaf-note{
  display:grid;gap:5px;
  padding:14px;border:1px solid var(--color-border);border-radius:14px;
  background:var(--color-surface);
}
.ccaf-note h3{margin:0;font-size:.95rem;line-height:1.3}
.ccaf-note p{margin:0;font-size:.88rem;line-height:1.55}

/* ──────────────────────────────────────
   Ateliers d'écriture (branches 1 et 2)
   ──────────────────────────────────────
   Un atelier se fait au téléphone : la zone de saisie est confortable, et le
   bouton « Corriger » reste atteignable quand le clavier est ouvert. */
.atelier-page{max-width:800px;margin-inline:auto}
.atelier-page>*{min-width:0}
.atelier-meta{display:flex;flex-wrap:wrap;gap:8px}
.atelier-item .ap-prose{min-height:220px}
/* Les cibles du moteur dans un atelier : deux pixels de plus que le minimum.
   À 44 pile, la mesure tombe parfois à 43,99 selon l'arrondi sous-pixel — et
   c'est de toute façon plus confortable au pouce. */
.atelier-item{--ap-target:46px}
@media (pointer:coarse){
  /* Le clavier virtuel masque le bas de la page : les actions du moteur
     restent collées au-dessus de lui, sur un fond opaque. */
  .atelier-item .ap-actions{
    position:sticky;bottom:0;z-index:2;
    margin:0;padding:10px 0 calc(10px + env(safe-area-inset-bottom));
    background:var(--color-surface);
    box-shadow:0 -8px 16px -12px rgba(20,20,19,.5);
  }
  .atelier-item .ap-prose{min-height:260px;font-size:16px}
}
.atelier-real{
  display:grid;gap:12px;
  padding:clamp(18px,3vw,26px);
  border:1px solid var(--color-border);border-radius:var(--radius-card);
  background:var(--color-accent-soft);
}
.atelier-real-intro{margin:0;font-size:1.02rem;line-height:1.55}
.atelier-real-actions{display:flex;flex-wrap:wrap;gap:10px}
.atelier-checks{display:grid;gap:10px}
.atelier-check{
  display:grid;gap:8px;
  padding:12px 14px;border:1px solid var(--color-border);border-radius:14px;
  background:var(--color-surface);
}
.atelier-check p{display:flex;gap:10px;margin:0;font-size:.95rem;line-height:1.5}
.atelier-check-index{
  flex:0 0 auto;display:grid;place-items:center;
  width:22px;height:22px;border-radius:50%;
  background:var(--color-accent-deep);color:var(--color-on-dark);
  font:600 .7rem var(--font-mono);
}
.atelier-check-answers{display:flex;gap:8px}
.atelier-check-answers .button{min-width:88px;min-height:46px}
.atelier-check-answers .button[aria-pressed="true"]{
  border-color:var(--color-accent-deep);background:var(--color-accent-deep);color:var(--color-on-dark);
}

/* Les ateliers sur la page d'un module, et le « Passer pour l'instant » de la
   dernière leçon. */
.module-ateliers{
  display:grid;gap:12px;
  padding:clamp(18px,3vw,26px);
  border:1px solid var(--color-border);border-radius:var(--radius-card);
  background:var(--color-cream);
}
.lesson-done-skip{justify-content:center}
@media (max-width:560px){.lesson-done-actions{display:grid;gap:10px}}

/* L'en-tête du moteur répète ce que l'écran annonce déjà : type, niveau, titre
   et décision. Sur un téléphone, cela fait un demi-écran de doublon avant
   d'arriver à l'exercice. On garde la situation et la consigne, qui ne sont
   nulle part ailleurs. (La page de démonstration, elle, n'a pas d'en-tête
   propre : la règle ne la vise pas.) */
.ccaf-practice-page .ap-head>.ap-kicker,
.ccaf-practice-page .ap-head>.ap-title,
.ccaf-practice-page .ap-head>.ap-decision,
.ccaf-lab-page .ap-head>.ap-kicker,
.ccaf-lab-page .ap-head>.ap-title,
.atelier-page .ap-head>.ap-kicker,
.atelier-page .ap-head>.ap-title,
.atelier-page .ap-head>.ap-decision{display:none}

/* La suite d'une leçon : l'expérience, puis le bloc de fin. Les deux
   n'apparaissent qu'une fois les questions rapides validées. */
.lesson-after-checks{display:grid;gap:18px}