/* Espace élève 2.17 — implémentation fidèle du fichier Figma E4jgeFHOTvFGCHLmBgEeTz.
   Géométrie, espacements et couleurs viennent du design context ; aucune valeur hexadécimale ici. */

/* ---------- Coque ---------- */
/* La coque occupe toute la hauteur visible : sans cela la barre de destinations, collée en bas,
   remonterait sous un contenu court. `dvh` suit la barre d'adresse mobile ; `vh` reste le repli. */
.s17{--s17-gutter:var(--sp-4);display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.app-shell.is-student-2-17{padding:0!important;margin:0!important}
.app-shell.is-student-2-17 .pki-footer{padding:var(--sp-5) var(--sp-4)}
.s17-content{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-3) var(--s17-gutter);flex:1 0 auto;min-width:0}
/* `flex:1 0 auto`, jamais `flex:1 0 0` : avec une base nulle sous un parent en `min-height:100vh`,
   la boîte de contenu se figeait à la hauteur du premier écran. Le contenu débordait en restant
   visible, sans faire grandir la page : la barre de navigation opaque et le pied de page
   peignaient par-dessus, et les cartes du bas devenaient inatteignables. Mesuré, pas théorique :
   2 010 px hors boîte sur une leçon pour 143 px de défilement. Base `auto` = hauteur réelle du
   contenu, donc la coque grandit et la page défile ; `flex-grow:1` garde la barre en bas quand
   le contenu est plus court que l'écran. */
@media(max-width:359px){.s17{--s17-gutter:var(--sp-3)}
 /* À 320 px, la barre d'application doit porter un retour, un titre, un état et le compte : le
    titre est ce qui compte le plus, il ne doit pas être le premier tronqué. L'état garde son
    icône et son libellé accessible, mais rend son texte visible seulement quand la place existe. */
 .s17-appbar{gap:var(--sp-1);padding-inline:var(--sp-2)}
 .s17-appbar-state{padding-inline:6px}
 .s17-appbar-state>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .s17-appbar-back{width:36px;margin-inline-start:calc(var(--sp-1) * -1)}
}

/* ---------- StudentAppBar (58:38) ---------- */
.s17-appbar{display:flex;align-items:center;gap:var(--sp-2);height:52px;padding:var(--sp-1) var(--sp-3);background:var(--navy);color:var(--ink-inverse);overflow:hidden}
/* Retour explicite de la barre d'application sur un écran de tâche (§12). Cible tactile pleine,
   libellé porté par l'aria-label et l'infobulle : l'icône seule ne porte jamais le sens. */
.s17-appbar-back{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);
 height:var(--tap);margin-inline-start:calc(var(--sp-2) * -1);flex-shrink:0;border-radius:var(--r-sm);
 color:var(--ink-inverse);text-decoration:none}
.s17-appbar-back svg{width:var(--size-icon);height:var(--size-icon)}
.s17-appbar-back:focus-visible{outline:2px solid var(--paper);outline-offset:-2px}
.s17-appbar-title{flex:1 0 0;min-width:0;font-size:var(--fs-13);font-weight:500;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}
.s17-appbar-state{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-pill);background:rgba(255,255,255,.16);font-size:var(--fs-12);line-height:16px;white-space:nowrap;flex-shrink:0}
.s17-appbar-state svg{width:14px;height:14px;flex-shrink:0}
.s17-appbar-state.is-live{background:var(--live)}
.s17-appbar-state.is-offline{background:var(--network)}

/* ---------- StudentNavigation (58:84) ---------- */
.s17-nav{display:flex;gap:var(--sp-1);height:60px;background:var(--paper);border-top:1px solid var(--line);position:sticky;bottom:0;z-index:20;padding-bottom:env(safe-area-inset-bottom,0)}
.s17-nav a{flex:1 0 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);color:var(--muted);text-decoration:none;font-size:var(--fs-12);line-height:16px;min-height:var(--tap)}
.s17-nav a svg{width:20px;height:20px}
.s17-nav a[aria-current="page"]{color:var(--live-text)}
.s17-nav a[aria-current="page"]::after{content:"";width:24px;height:3px;border-radius:var(--r-pill);background:var(--live)}

/* ---------- StudentTaskHero (58:105) ---------- */
.s17-hero{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4);background:var(--paper);border:2px solid var(--live);border-radius:var(--r-lg);box-shadow:var(--shadow-2)}
.s17-hero-top{display:flex;align-items:center;gap:var(--sp-2)}
.s17-eyebrow{flex:1 0 0;min-width:0;margin:0;font-size:var(--fs-12);font-weight:600;line-height:16px;letter-spacing:.8px;text-transform:uppercase;color:var(--live-text)}
.s17-hero-step{margin:0;font-size:var(--fs-12);line-height:16px;color:var(--muted)}
.s17-hero-title{margin:0;font-size:var(--fs-20);font-weight:600;line-height:26px;color:var(--ink)}
.s17-hero .s17-cta{width:100%}

/* ---------- ActiveTimer (57:29) ---------- */
.s17-timer{display:inline-flex;align-items:center;gap:var(--sp-2);height:32px;padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);background:var(--live-soft);color:var(--live-text);font-size:var(--fs-14);font-weight:600;line-height:22px;white-space:nowrap}
.s17-timer svg{width:16px;height:16px}
.s17-timer.is-question{background:var(--progress-soft);color:var(--progress-text)}
.s17-timer.is-paused{background:var(--bg-sunken);color:var(--muted)}
/* Aucune mesure disponible : le badge le dit au lieu d'afficher un faux 00:00. */
.s17-timer.is-unmeasured{background:var(--bg-sunken);color:var(--muted);font-weight:500}

/* ---------- Progression (jauge) ---------- */
.s17-progress{display:flex;flex-direction:column;gap:var(--sp-1)}
.s17-progress-row{display:flex;align-items:center;gap:var(--sp-2)}
.s17-progress-row b{flex:1 0 0;min-width:0;font-size:var(--fs-14);font-weight:600;line-height:22px;color:var(--ink-2)}
.s17-progress-row span{font-size:var(--fs-12);line-height:16px;color:var(--muted);white-space:nowrap}
.s17-track{height:8px;border-radius:var(--r-pill);background:var(--bg-sunken);overflow:hidden;display:flex}
.s17-track i{display:block;height:8px;border-radius:var(--r-pill);background:var(--live)}
.s17-track i.is-success{background:var(--success);border-radius:var(--r-pill) 0 0 var(--r-pill)}
.s17-track i.is-warning{background:var(--warning);border-radius:0 var(--r-pill) var(--r-pill) 0}
.s17-track i.is-danger{background:var(--danger);border-radius:0 var(--r-pill) var(--r-pill) 0}

/* ---------- Boutons 2.17 ---------- */
.s17-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--tap);padding:0 14px;border:1px solid transparent;border-radius:var(--r-md);font:600 var(--fs-14)/1 var(--font-sans);cursor:pointer;text-decoration:none;background:var(--paper);color:var(--ink);border-color:var(--line)}
.s17-btn svg{width:var(--size-icon);height:var(--size-icon);flex-shrink:0}
.s17-btn.is-primary{background:var(--navy);color:var(--ink-inverse);border-color:var(--navy)}
.s17-btn.is-ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.s17-btn.is-danger{background:var(--danger);color:var(--ink-inverse);border-color:var(--danger)}
.s17-btn.is-live{background:var(--live);color:var(--ink-inverse);border-color:var(--live)}
.s17-btn.is-qlive{background:var(--question-live);color:var(--ink-inverse);border-color:var(--question-live)}
.s17-btn[disabled],.s17-btn[aria-disabled="true"]{background:var(--bg-sunken);color:var(--muted);border-color:var(--line);cursor:not-allowed}
.s17-btn.is-tall{height:52px}
.s17-btn.is-block{width:100%}

/* ---------- ResourceCard (60:196) ---------- */
.s17-res{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-1);text-decoration:none;color:inherit;min-height:var(--tap)}
.s17-res:hover{border-color:var(--line-strong)}
.s17-res-badge{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;border-radius:var(--r-sm);background:var(--progress-soft);color:var(--progress-text)}
.s17-res-badge svg{width:20px;height:20px}
.s17-res.is-rappel .s17-res-badge{background:var(--live-soft);color:var(--live-text)}
.s17-res.is-exercice .s17-res-badge{background:var(--warning-soft);color:var(--warning-text)}
.s17-res.is-devoir .s17-res-badge{background:var(--danger-soft);color:var(--danger-text)}
.s17-res-text{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:var(--sp-1)}
.s17-res-cat{margin:0;font-size:var(--fs-12);font-weight:600;line-height:16px;letter-spacing:.8px;text-transform:uppercase;color:var(--progress-text)}
.s17-res.is-rappel .s17-res-cat{color:var(--live-text)}
.s17-res.is-exercice .s17-res-cat{color:var(--warning-text)}
.s17-res.is-devoir .s17-res-cat{color:var(--danger-text)}
.s17-res-title{margin:0;font-size:var(--fs-14);font-weight:600;line-height:22px;color:var(--ink);overflow-wrap:anywhere}
.s17-res-detail{margin:0;font-size:var(--fs-12);line-height:16px;color:var(--muted);overflow-wrap:anywhere}
.s17-res-chevron{width:20px;height:20px;flex-shrink:0;color:var(--muted)}

/* ---------- Sections ---------- */
.s17-section{display:flex;flex-direction:column;gap:var(--sp-2)}
.s17-section>h2,.s17-overline{margin:0;font-size:var(--fs-12);font-weight:600;line-height:16px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}

/* ---------- Cartes génériques ---------- */
.s17-card{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md)}
.s17-note{display:flex;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);background:var(--bg-sunken);font-size:var(--fs-12);line-height:16px;color:var(--ink-2)}
.s17-note svg{width:var(--size-icon);height:var(--size-icon);flex-shrink:0;color:var(--muted)}

/* ---------- QuestionHeader (61:109) ---------- */
.s17-qhead{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-2) var(--sp-4);background:var(--paper);border-bottom:1px solid var(--line)}
.s17-qhead-row{display:flex;align-items:center;gap:var(--sp-2);min-height:32px}
.s17-qhead-activity{flex:1 0 0;min-width:0;margin:0;font-size:var(--fs-12);line-height:16px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Cette ligne nomme l'activité et la position dans l'exercice : sur les banques dont le titre
   porte déjà un niveau (« Niveau 1 · Fonctions prédéfinies · Exercice 1 / 8 »), une seule ligne
   ne suffit pas sous 768 px et l'élève perdait la fin. Elle passe à la ligne plutôt que d'être
   coupée ; le chronomètre garde sa place à droite. */
@media(max-width:767px){.s17-qhead-activity{white-space:normal;overflow:visible;text-overflow:clip}}
.s17-qhead-index{margin:0;font-size:var(--fs-14);font-weight:600;line-height:22px;color:var(--ink);white-space:nowrap}
.s17-qhead .s17-track{flex:1 0 0;min-width:40px}

/* ---------- QuestionCard (103:310) ---------- */
.s17-q{display:flex;flex-direction:column;gap:var(--sp-3)}
.s17-q-block{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md)}
.s17-q-statement{margin:0;font-size:var(--fs-16);line-height:24px;color:var(--ink)}
.s17-q-kind{align-self:flex-start;padding:2px var(--sp-2);border-radius:var(--r-pill);background:var(--bg-sunken);font-size:var(--fs-12);line-height:16px;color:var(--muted)}
.s17-q-answer.is-juste{border-color:var(--success)}
.s17-q-answer.is-faux{border-color:var(--danger)}
.s17-q-answer.is-aide{border-color:var(--progress)}
.s17-q-actions{display:flex;gap:var(--sp-2);align-items:stretch}
.s17-q-actions .s17-btn{height:52px}
.s17-q-actions .s17-verify{flex:1 0 0}

/* ---------- AnswerField (61:150) ---------- */
.s17-opt{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:52px;padding:var(--sp-2) var(--sp-3);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);font:400 var(--fs-16)/24px var(--font-sans);color:var(--ink);text-align:start;cursor:pointer}
.s17-opt+.s17-opt{margin-top:var(--sp-2)}
.s17-opt[aria-checked="true"],.s17-opt.is-selected{border-color:var(--progress);background:var(--progress-soft)}
.s17-opt-mark{width:20px;height:20px;flex-shrink:0;border-radius:var(--r-pill);border:2px solid var(--line-strong);display:inline-block}
.s17-opt[aria-checked="true"] .s17-opt-mark{border-color:var(--progress);background:var(--progress);box-shadow:inset 0 0 0 3px var(--paper)}
.s17-opt-key{font-weight:600;color:var(--muted);min-width:1.2em}
.s17-input{width:100%;min-height:52px;padding:var(--sp-2) var(--sp-3);border:1px solid var(--line);border-radius:var(--r-sm);font:400 var(--fs-16)/24px var(--font-sans);color:var(--ink);background:var(--paper)}

/* ---------- FeedbackPanel (59:85) ---------- */
.s17-feedback{display:flex;gap:var(--sp-2);align-items:flex-start;padding:var(--sp-3);border-radius:var(--r-md);border-inline-start:3px solid var(--success);background:var(--success-soft)}
.s17-feedback svg{width:var(--size-icon);height:var(--size-icon);flex-shrink:0;color:var(--success-text)}
.s17-feedback-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.s17-feedback b{font-size:var(--fs-14);font-weight:600;line-height:22px;color:var(--success-text)}
.s17-feedback p{margin:0;font-size:var(--fs-12);line-height:16px;color:var(--ink-2)}
.s17-feedback.is-partiel{background:var(--warning-soft);border-inline-start-color:var(--warning)}
.s17-feedback.is-partiel b,.s17-feedback.is-partiel svg{color:var(--warning-text)}
.s17-feedback.is-incorrect{background:var(--danger-soft);border-inline-start-color:var(--danger)}
.s17-feedback.is-incorrect b,.s17-feedback.is-incorrect svg{color:var(--danger-text)}
.s17-feedback.is-non-verifie{background:var(--bg-sunken);border-inline-start-color:var(--unobserved)}
.s17-feedback.is-non-verifie b,.s17-feedback.is-non-verifie svg{color:var(--muted)}
.s17-feedback.is-apres-aide,.s17-feedback.is-recuperation{background:var(--progress-soft);border-inline-start-color:var(--progress)}
.s17-feedback.is-apres-aide b,.s17-feedback.is-apres-aide svg,
.s17-feedback.is-recuperation b,.s17-feedback.is-recuperation svg{color:var(--progress-text)}
/* Le détail d'origine est conservé À L'INTÉRIEUR du panneau nommé — même texte, mêmes classes
   `ok` / `retry`, que les recettes lisent — mais il perd sa propre boîte colorée : une boîte
   dans une boîte, avec deux fonds différents, brouillerait l'état que le panneau annonce. */
.s17-feedback .answer-feedback{margin:0;padding:0;background:none;border-radius:0;color:inherit;
 font-size:var(--fs-12);line-height:16px}
.s17-feedback .answer-feedback.ok,.s17-feedback .answer-feedback.retry{background:none;color:inherit}
.s17-feedback-note{margin:0;font-size:var(--fs-12);line-height:16px;color:var(--ink-2)}

/* ---------- Aide : tiroir < 768 px, colonne persistante >= 768 px (§3.4) ---------- */
.s17-help{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md)}
.s17-help-head{display:flex;align-items:center;gap:var(--sp-2)}
.s17-help-head h2{flex:1 0 0;min-width:0;margin:0;font-size:var(--fs-18);font-weight:600;line-height:24px;color:var(--ink)}
.s17-help-item{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3);border-radius:var(--r-sm);background:var(--progress-soft)}
.s17-help-item.is-help{background:var(--warning-soft)}
.s17-help-item.is-example{background:var(--bg-sunken)}
.s17-help-item.is-solution{background:var(--paper);border:1px solid var(--line)}
.s17-help-title{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-14);font-weight:600;line-height:22px;color:var(--progress-text)}
.s17-help-item.is-help .s17-help-title{color:var(--warning-text)}
.s17-help-item.is-example .s17-help-title{color:var(--ink-2)}
.s17-help-item.is-solution .s17-help-title{color:var(--muted)}
.s17-help-title svg{width:var(--size-icon);height:var(--size-icon)}
.s17-help-item p{margin:0;font-size:var(--fs-14);line-height:22px;color:var(--ink)}
.s17-help-cost{margin:0;font-size:var(--fs-12);line-height:16px;color:var(--muted)}
.s17-help-item .s17-btn{align-self:flex-start;background:var(--paper)}

/* ---------- LessonStep (60:198) — 56 px, pastille 32 ---------- */
.s17-lstep{display:flex;align-items:center;gap:var(--sp-3);min-height:56px;padding:var(--sp-2) var(--sp-3);
 background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);text-decoration:none;color:inherit}
.s17-lstep+.s17-lstep{margin-top:var(--sp-2)}
.s17-lstep-dot{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
 flex-shrink:0;border-radius:var(--r-sm);background:var(--bg-sunken);color:var(--muted)}
.s17-lstep-dot svg{width:16px;height:16px}
.s17-lstep-title{flex:1 1 0;min-width:0;font-size:var(--fs-16);line-height:24px;color:var(--ink);
 overflow-wrap:anywhere}
.s17-lstep-state{flex-shrink:0;font-size:var(--fs-12);line-height:16px;color:var(--muted);white-space:nowrap}
.s17-lstep.is-done .s17-lstep-dot{background:var(--success-soft);color:var(--success-text)}
.s17-lstep.is-done .s17-lstep-state{color:var(--success-text)}
.s17-lstep.is-current{border-color:var(--live);box-shadow:var(--shadow-1)}
.s17-lstep.is-current .s17-lstep-dot{background:var(--live-soft);color:var(--live-text)}
.s17-lstep.is-current .s17-lstep-state{color:var(--live-text)}
.s17-lstep.is-locked{opacity:.72}
a.s17-lstep:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- Page chapitre (67:71) ---------- */
.s17-chapter{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3);
 background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-1)}
.s17-chapter h1{margin:0;font-size:var(--fs-20);font-weight:600;line-height:26px;color:var(--ink)}
.s17-chapter-objective{margin:0;font-size:var(--fs-14);line-height:22px;color:var(--ink-2)}
.s17-prereq{display:flex;align-items:flex-start;gap:var(--sp-3);min-height:32px;padding:var(--sp-2) var(--sp-3);
 background:var(--bg-sunken);border-radius:var(--r-md);font-size:var(--fs-12);line-height:16px;color:var(--ink-2)}
.s17-prereq svg{width:16px;height:16px;flex-shrink:0;color:var(--muted)}

/* ---------- Devoir remis (72:161) ---------- */
.s17-remis{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:var(--sp-5) var(--sp-4);
 background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-1);text-align:center}
.s17-remis-dot{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;
 border-radius:var(--r-pill);background:var(--success-soft);color:var(--success-text)}
.s17-remis-dot svg{width:28px;height:28px}
.s17-remis h1{margin:0;font-size:var(--fs-20);font-weight:600;line-height:26px;color:var(--ink)}
.s17-remis p{margin:0;font-size:var(--fs-14);line-height:22px;color:var(--ink-2)}
.s17-remis-note{font-size:var(--fs-18)!important;font-weight:600;color:var(--success-text)!important}
/* Récapitulatif du devoir remis : deux lignes icône + libellé + valeur (Figma 72:179). */
.s17-card-lines{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
 border-radius:var(--r-md);box-shadow:var(--shadow-1);padding:var(--sp-2) var(--sp-3)}
.s17-kv{display:flex;align-items:center;gap:var(--sp-3);min-height:44px;margin:0;
 font-size:var(--fs-14);line-height:22px}
.s17-kv+.s17-kv{border-top:1px solid var(--line)}
.s17-kv svg{width:18px;height:18px;flex-shrink:0;color:var(--muted)}
.s17-kv span{flex:1 1 0;min-width:0;color:var(--ink-2)}
.s17-kv b{flex-shrink:0;font-weight:600;color:var(--ink);white-space:nowrap}

/* ---------- Rappel rapide (69:73) ---------- */
.s17-flash{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);
 background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md)}
.s17-flash>svg{width:18px;height:18px;flex-shrink:0;margin-top:3px;color:var(--muted)}
.s17-flash-txt{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--sp-1)}
.s17-flash-txt b{font-size:var(--fs-14);font-weight:600;line-height:22px;color:var(--ink)}
.s17-flash-txt span{font-size:var(--fs-14);line-height:22px;color:var(--ink-2);overflow-wrap:anywhere}
.s17-flash.is-retenir>svg{color:var(--progress-text)}
.s17-flash.is-exemple>svg{color:var(--live-text)}
.s17-flash.is-erreur>svg{color:var(--warning-text)}

/* ---------- SkillRow (61:183) ---------- */
.s17-skill{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-2) var(--sp-3);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md)}
.s17-skill-top{display:flex;align-items:center;gap:var(--sp-2)}
.s17-skill-name{flex:1 0 0;min-width:0;margin:0;font-size:var(--fs-14);font-weight:600;line-height:22px;color:var(--ink)}
.s17-skill-obs{margin:0;font-size:var(--fs-12);line-height:16px;color:var(--muted)}
.s17-skill-next{display:flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-12);line-height:16px;color:var(--progress-text)}
.s17-tag{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-pill);font-size:var(--fs-12);line-height:16px;white-space:nowrap;background:var(--bg-sunken);color:var(--muted)}
.s17-tag svg{width:14px;height:14px}
.s17-tag.is-success{background:var(--success-soft);color:var(--success-text)}
.s17-tag.is-warning{background:var(--warning-soft);color:var(--warning-text)}
.s17-tag.is-danger{background:var(--danger-soft);color:var(--danger-text)}
.s17-tag.is-progress{background:var(--progress-soft);color:var(--progress-text)}
.s17-tag.is-live{background:var(--live-soft);color:var(--live-text)}
.s17-tag.is-qlive{background:var(--question-live-soft);color:var(--question-live-text)}
.s17-tag.is-network{background:var(--network-soft);color:var(--network-text)}

/* ---------- ProgressTable (92:237) ---------- */
.s17-ptable{display:flex;flex-direction:column;gap:var(--sp-2)}
.s17-ptable-row{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md)}
.s17-ptable-head{display:flex;align-items:center;gap:var(--sp-2)}
.s17-ptable-head b{flex:1 0 0;min-width:0;font-size:var(--fs-14);font-weight:600;line-height:22px;color:var(--ink);overflow-wrap:anywhere}
.s17-ptable-cells{display:flex;gap:var(--sp-2)}
.s17-ptable-cells>div{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:1px}
.s17-ptable-cells small{font-size:var(--fs-12);line-height:16px;color:var(--muted)}
.s17-ptable-cells b{font-size:var(--fs-14);font-weight:600;line-height:22px;color:var(--ink)}
.s17-ptable-cells b.is-success{color:var(--success-text)}
.s17-ptable-cells b.is-progress{color:var(--progress-text)}
.s17-ptable table{width:100%;border-collapse:collapse}
@media(min-width:768px){
  .s17-ptable{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;gap:0}
  .s17-ptable .s17-ptable-row{display:none}
  .s17-ptable table{display:table}
  .s17-ptable thead th{padding:var(--sp-2) var(--sp-3);background:var(--bg-sunken);font-size:var(--fs-12);font-weight:600;line-height:16px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);text-align:center}
  .s17-ptable thead th:first-child{text-align:start}
  .s17-ptable tbody td{padding:var(--sp-2) var(--sp-3);border-top:1px solid var(--line);font-size:var(--fs-14);font-weight:600;line-height:22px;color:var(--ink);text-align:center}
  .s17-ptable tbody td:first-child{text-align:start;font-weight:400}
  .s17-ptable tbody td.is-success{color:var(--success-text)}
  .s17-ptable tbody td:last-child{text-align:end}
}
@media(max-width:767px){.s17-ptable table{display:none}}

/* ---------- États système (60:142) ---------- */
.s17-state{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:var(--sp-6) var(--sp-4);text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md)}
.s17-state-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--r-pill);background:var(--bg-sunken);color:var(--muted)}
.s17-state-icon svg{width:24px;height:24px}
.s17-state h2{margin:0;font-size:var(--fs-18);font-weight:600;line-height:24px;color:var(--ink)}
.s17-state p{margin:0;font-size:var(--fs-14);line-height:22px;color:var(--muted);max-width:44ch}
.s17-state.is-erreur .s17-state-icon,.s17-state.is-blocage .s17-state-icon{background:var(--danger-soft);color:var(--danger-text)}
.s17-state.is-succes .s17-state-icon{background:var(--success-soft);color:var(--success-text)}
.s17-state.is-info .s17-state-icon{background:var(--progress-soft);color:var(--progress-text)}
.s17-skeleton{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5) var(--sp-4)}
.s17-skeleton i{display:block;height:14px;border-radius:var(--r-xs);background:var(--bg-sunken)}
.s17-skeleton .s17-card i+i{margin-top:var(--sp-2)}

/* ---------- SyncBadge (57:71) ---------- */
.s17-sync{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-pill);font-size:var(--fs-12);line-height:16px;white-space:nowrap;background:var(--success-soft);color:var(--success-text)}
.s17-sync svg{width:14px;height:14px}
.s17-sync.is-pending{background:var(--progress-soft);color:var(--progress-text)}
.s17-sync.is-local{background:var(--warning-soft);color:var(--warning-text)}
.s17-sync.is-draft{background:var(--bg-sunken);color:var(--muted)}
.s17-sync.is-offline{background:var(--network-soft);color:var(--network-text)}
.s17-sync.is-error{background:var(--danger-soft);color:var(--danger-text)}

/* ---------- UrgentBanner (97:193) ---------- */
.s17-urgent{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);border:1px solid var(--danger);border-radius:var(--r-md);background:var(--danger-soft)}
.s17-urgent::before{content:"";width:4px;align-self:stretch;border-radius:2px;background:var(--danger);flex-shrink:0}
.s17-urgent svg{width:var(--size-icon);height:var(--size-icon);flex-shrink:0;color:var(--danger-text)}
.s17-urgent-body{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:1px}
.s17-urgent-body b{font-size:var(--fs-14);font-weight:600;line-height:22px;color:var(--danger-text)}
.s17-urgent-body span{font-size:var(--fs-12);line-height:16px;color:var(--ink-2)}
.s17-urgent.is-rappel{border-color:var(--warning);background:var(--warning-soft)}
.s17-urgent.is-rappel::before{background:var(--warning)}
.s17-urgent.is-rappel svg,.s17-urgent.is-rappel .s17-urgent-body b{color:var(--warning-text)}

/* ---------- ActivityProgress (102:171) ---------- */
.s17-aprog{display:flex;flex-direction:column;gap:var(--sp-2)}
.s17-aprog-dots{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.s17-aprog-dots span{flex:1 0 34px;min-width:34px;display:flex;align-items:center;justify-content:center;height:28px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--bg-sunken);font-size:var(--fs-12);line-height:16px;color:var(--muted)}
.s17-aprog-dots span.is-ok{border-color:var(--success);background:var(--success-soft);color:var(--success-text)}
.s17-aprog-dots span.is-revoir{border-color:var(--warning);background:var(--warning-soft);color:var(--warning-text)}
.s17-aprog-dots span.is-current{border-color:var(--progress);background:var(--progress-soft);color:var(--progress-text);font-weight:600}

/* ---------- LessonStep (60:218) ---------- */
.s17-steps{display:flex;align-items:center;gap:0}
.s17-steps .s17-step{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1)}
.s17-steps .s17-step-dot{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-pill);border:1.5px solid var(--line);background:var(--paper);font-size:var(--fs-14);font-weight:600;color:var(--muted)}
.s17-steps .s17-step.is-done .s17-step-dot{border-color:var(--progress);background:var(--progress-soft);color:var(--progress-text)}
.s17-steps .s17-step.is-current .s17-step-dot{border-color:var(--progress);background:var(--progress);color:var(--ink-inverse)}
.s17-steps .s17-step small{font-size:var(--fs-12);line-height:16px;color:var(--muted);text-align:center}
.s17-steps .s17-step.is-current small{color:var(--ink)}
.s17-steps .s17-step-link{flex:1 0 0;height:2px;background:var(--line);min-width:8px}
.s17-steps .s17-step-link.is-done{background:var(--progress)}
.s17-step-line{display:flex;align-items:center;gap:var(--sp-2)}
.s17-step-line b{flex:1 0 0;min-width:0;font-size:var(--fs-14);font-weight:600;line-height:22px;color:var(--ink)}
.s17-step-line span{font-size:var(--fs-12);line-height:16px;color:var(--muted)}

/* ---------- AlgoLab (79:270, 79:141) ---------- */
.s17-algo-rail{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);background:var(--paper);border-bottom:1px solid var(--line)}
.s17-code{display:flex;flex-direction:column;padding:var(--sp-2) 6px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);overflow-x:auto}
.s17-code-line{display:flex;align-items:center;padding:5px 6px 5px 0;border-radius:var(--r-xs)}
.s17-code-line.is-selected{background:var(--progress-soft)}
.s17-code-line.is-error{background:var(--danger-soft)}
.s17-code-num{width:30px;padding-inline-end:8px;text-align:end;flex-shrink:0;font:400 var(--fs-12)/18px var(--font-mono);color:var(--muted)}
.s17-code-mark{width:3px;align-self:stretch;flex-shrink:0;background:transparent;border-radius:2px}
.s17-code-line.is-selected .s17-code-mark{background:var(--progress)}
.s17-code-line.is-error .s17-code-mark{background:var(--danger)}
.s17-code-text{flex:1 0 0;min-width:0;padding-inline-start:8px;font:400 var(--fs-13)/20px var(--font-mono);color:var(--ink);white-space:pre}
.s17-code-line.is-error .s17-code-num,.s17-code-line.is-error .s17-code-text{color:var(--danger-text)}
.s17-console{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-3);border-radius:var(--r-md);background:var(--navy);color:var(--ink-inverse)}
.s17-console pre{margin:0;font:400 var(--fs-13)/20px var(--font-mono);white-space:pre-wrap}
.s17-console .s17-console-out{color:var(--green-100)}
.s17-decl{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md)}
.s17-decl-top{display:flex;align-items:center;gap:var(--sp-2)}
.s17-decl-name{flex:1 0 0;min-width:0;font:500 var(--fs-13)/20px var(--font-mono);color:var(--ink)}

/* ---------- Résumé chiffré (bilans) ---------- */
.s17-figures{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md)}
.s17-figures-row{display:flex;gap:var(--sp-2)}
.s17-figures-row>div{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:1px}
.s17-figures small{font-size:var(--fs-12);line-height:16px;color:var(--muted)}
.s17-figures b{font-size:var(--fs-20);font-weight:600;line-height:26px;color:var(--ink)}
.s17-figures b.is-success{color:var(--success-text)}
.s17-figures b.is-progress{color:var(--progress-text)}
.s17-highlight{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);background:var(--progress-soft)}
.s17-highlight svg{width:var(--size-icon);height:var(--size-icon);flex-shrink:0;color:var(--progress-text)}
.s17-highlight b{display:block;font-size:var(--fs-14);font-weight:600;line-height:22px;color:var(--progress-text)}
.s17-highlight span{display:block;font-size:var(--fs-12);line-height:16px;color:var(--ink-2)}

/* ---------- Barre d'actions basse ---------- */
.s17-actionbar{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3) 9px;background:var(--paper);border-top:1px solid var(--line);position:sticky;bottom:0;z-index:15;padding-bottom:calc(9px + env(safe-area-inset-bottom,0))}
.s17-actionbar .s17-btn{height:52px}
.s17-actionbar .is-primary,.s17-actionbar .s17-verify{flex:1 0 0}

/* ---------- Nom d'élève : RTL localisé, interface LTR (§22) ---------- */
.s17-name{unicode-bidi:isolate}

/* ---------- Tablette 768 : navigation haute, deux colonnes ---------- */
.s17-wide-nav{display:none}
@media(min-width:768px){
  .s17-nav{display:none}
  .s17-wide-nav{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-2) var(--sp-4);background:var(--navy);color:var(--ink-inverse)}
  .s17-wide-nav .s17-brand{font-size:var(--fs-14);font-weight:600}
  .s17-wide-nav nav{flex:1 0 0;display:flex;gap:var(--sp-1)}
  .s17-wide-nav nav a{display:inline-flex;align-items:center;gap:var(--sp-2);height:var(--tap);padding:0 14px;border-radius:var(--r-sm);color:var(--ink-inverse);text-decoration:none;font-size:var(--fs-14);font-weight:600}
  .s17-wide-nav nav a svg{width:18px;height:18px}
  .s17-wide-nav nav a[aria-current="page"]{background:var(--progress)}
  /* Deux colonnes seulement quand la page en déclare : sinon les sections d'une page simple
     se mettraient en ligne et déborderaient à droite. */
  .s17-content{padding:var(--sp-5);gap:var(--sp-4);max-width:900px;width:100%;margin:0 auto}
  .s17-content:has(.s17-col-main){flex-direction:row;align-items:flex-start;gap:var(--sp-5);max-width:none}
  .s17-col-main{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:var(--sp-4)}
  .s17-col-side{width:280px;flex-shrink:0;display:flex;flex-direction:column;gap:var(--sp-4)}
  .s17-actionbar{position:static;border-radius:var(--r-md);border:1px solid var(--line)}
}
@media(min-width:1024px){
  .s17{flex-direction:row}
  .s17-wide-nav{flex-direction:column;align-items:stretch;width:240px;flex-shrink:0;padding:var(--sp-4) var(--sp-3);gap:var(--sp-1)}
  .s17-wide-nav .s17-brand{font-size:var(--fs-18);padding:0 10px var(--sp-4)}
  .s17-wide-nav nav{flex-direction:column;flex:0 0 auto}
  .s17-wide-nav .s17-wide-state{margin-top:auto}
  .s17-main{flex:1 0 0;min-width:0;display:flex;flex-direction:column}
  .s17-col-side{width:340px}
}

/* ---------- Accès au compte dans la barre d'application ---------- */
.s17-appbar-account{display:flex;align-items:center;flex-shrink:0;position:relative}
.s17-account{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink-inverse);cursor:pointer}
.s17-account svg{width:var(--size-icon);height:var(--size-icon)}
/* AccountMenu (§4.3) : une instance, deux hôtes. Sous 768 px l'icône seule ; au-delà, le nom. */
.s17-account-host{position:relative;display:flex;align-items:center}
.s17-account-label{display:none;margin-inline-start:var(--sp-2);font-size:var(--fs-14);font-weight:600;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s17-account-menu{position:absolute;top:calc(100% + var(--sp-1));inset-inline-end:0;z-index:40;min-width:240px;max-width:min(320px,calc(100vw - 2 * var(--sp-4)));padding:var(--sp-3);background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-2);display:flex;flex-direction:column;gap:var(--sp-1)}
.s17-account-menu[hidden]{display:none}
.s17-account-menu p{margin:0}
.s17-account-name{font-weight:700;font-size:var(--fs-16)}
.s17-account-class{color:var(--muted);font-size:var(--fs-14)}
.s17-account-release{color:var(--muted);font-size:var(--fs-13, 13px);margin-bottom:var(--sp-2)!important}
.s17-account-logout{min-height:var(--tap);justify-content:center;gap:var(--sp-2)}
.s17-wide-account{display:flex;align-items:center;flex-shrink:0}
@media(min-width:768px){.s17-account{width:auto;padding:0 var(--sp-3)}.s17-account-label{display:inline}}
@media(min-width:1024px){.s17-wide-account{margin-top:var(--sp-3);border-top:1px solid rgba(255,255,255,.18);padding-top:var(--sp-3)}.s17-wide-account .s17-account{width:100%;justify-content:flex-start}.s17-wide-account .s17-account-menu{top:auto;bottom:calc(100% + var(--sp-1));inset-inline-start:0;inset-inline-end:auto}}
.top-actions.is-student{display:none;position:absolute;top:calc(100% + var(--sp-1));inset-inline-end:0;z-index:40;padding:var(--sp-2);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-2)}
.top-actions.is-student.is-open{display:block}
.top-actions.is-student .btn{min-height:var(--tap);white-space:nowrap}
@media(min-width:768px){.s17-appbar{display:none}.s17-main{flex:1 0 auto;min-width:0;display:flex;flex-direction:column}}
@media(max-width:767px){.s17-main{display:flex;flex-direction:column;flex:1 0 auto;min-width:0}}
/* À partir de 1024 px la coque passe en ligne : `flex` porte alors la LARGEUR, et une base nulle
   est ce qu'il faut pour que la colonne principale occupe la place restante à côté du rail de
   240 px. Réaffirmé ici parce que la règle 768 ci-dessus est écrite après le bloc 1024 et
   gagnerait sinon par ordre de source. La hauteur, elle, vient de l'étirement de la ligne. */
@media(min-width:1024px){.s17-main{flex:1 0 0;min-width:0}}

/* ==================================================================
   Exercices 2.17 — alignement du gabarit `.qcard` existant sur les frames
   Figma « Exercice · … — 390 » (65:2 et suivantes). Le balisage ne change pas :
   l'énoncé et la réponse sont déjà deux blocs, ils deviennent deux cartes.
   ================================================================== */
.answer-card.qcard{margin:0;gap:var(--sp-3)}
.answer-card.qcard>.qcard-main{gap:var(--sp-3);align-content:start;align-self:start}
.qcard-statement{background:var(--paper);border:1px solid var(--line);border-left:1px solid var(--line);
 border-radius:var(--r-md);padding:var(--sp-3);box-shadow:var(--shadow-1)}
.qcard.is-current .qcard-statement{border-left-color:var(--line)}
.qcard-label{margin:0 0 var(--sp-2);font-size:var(--fs-12);font-weight:600;line-height:16px;
 letter-spacing:.8px;text-transform:uppercase;color:var(--muted);gap:var(--sp-2)}
.qcard-name{font-size:var(--fs-12);color:var(--muted);font-weight:600;letter-spacing:.8px}
.qcard-index{font-size:var(--fs-12);color:var(--muted);font-weight:600}
.qcard-kind{color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}
.answer-card.qcard .qcard-prompt{font-size:var(--fs-16);line-height:24px;font-weight:400;color:var(--ink)}
.qcard-data{background:var(--bg-sunken);border-color:var(--line);border-radius:var(--r-sm);
 font:400 var(--fs-13)/20px var(--font-mono)}
.qcard-answer{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
 padding:var(--sp-3);box-shadow:var(--shadow-1)}
.qcard-answer-label{margin:0 0 var(--sp-2);font-size:var(--fs-12);font-weight:600;line-height:16px;
 letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
/* Barre d'actions : Aide et Confiance en 80 px empilés, « Vérifier » seule action primaire. */
.qcard-actions{display:flex;align-items:stretch;align-self:start;gap:var(--sp-2);padding-top:var(--sp-1)}
.qcard-actions .btn.primary,.qcard-actions [data-verify],.qcard-actions [data-check]{flex:1 0 0;height:52px;min-height:52px;max-height:52px;
 border-radius:var(--r-md);background:var(--navy);color:var(--ink-inverse);border-color:var(--navy);
 font-size:var(--fs-14);font-weight:600}
.qcard-actions .qcard-more,.qcard-actions .qcard-help{flex:0 0 80px;width:80px;min-height:52px;display:flex;
 flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);
 border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--paper);
 font-size:var(--fs-12);font-weight:400;color:var(--ink-2)}
.qcard-actions .qcard-more svg,.qcard-actions .qcard-help svg{width:var(--size-icon);height:var(--size-icon)}
/* Le chrono de question vit dans l'en-tête de la carte : en 2.15, posé dans la barre de
   navigation, il la doublait en hauteur et décalait la carte sous le doigt de l'élève. */
.qcard-timer{margin-inline-start:auto}
.qcard-timer .learning-timer{display:inline-flex;align-items:center;gap:var(--sp-2);height:28px;
 padding:0 var(--sp-2);border-radius:var(--r-pill);background:var(--progress-soft);color:var(--progress-text);
 font-size:var(--fs-12);font-weight:600}
.qcard-timer .learning-timer-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* ---------- Tiroir d'aide : trois familles nommées (HelpDrawer 59:134) ---------- */
.s17-help-sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;
 background:rgba(15,23,42,.45)}
.s17-help-sheet>.s17-help{width:min(390px,100%);max-height:80vh;overflow-y:auto;
 border-radius:var(--r-lg) var(--r-lg) 0 0;border:0;box-shadow:var(--shadow-3)}
/* §3.4 — à partir de 768 px l'aide devient une colonne persistante, jamais un voile. */
@media(min-width:768px){
 .s17-help-sheet{position:static;display:block;background:none}
 .s17-help-sheet>.s17-help{width:auto;max-height:none;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:none}
 .s17-exercise{display:flex;align-items:flex-start;gap:var(--sp-5)}
 .s17-exercise>.s17-exercise-main{flex:1 0 0;min-width:0}
 .s17-exercise>.s17-exercise-help{width:296px;flex-shrink:0}
}

/* En-tête d'exercice : la navigation du parcours tient sur une ligne d'icônes de 44 px. */
.s17-qhead-icon{width:var(--tap);height:var(--tap);padding:0;flex-shrink:0;border-color:transparent}
.s17-qhead-icon[disabled]{opacity:.4}
.s17-qhead-sync{margin:0;font-size:var(--fs-12);line-height:16px;color:var(--muted)}
.s17-qhead .s17-track{min-width:32px}
.s17-qhead-more{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-2) 0}
.s17-qhead-more .s17-btn{justify-content:flex-start;width:100%}

/* Notices héritées : elles deviennent des états lisibles, avec un contraste conforme. */
.notice{display:flex;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-3);border-radius:var(--r-md);
 background:var(--bg-sunken);color:var(--ink-2);font-size:var(--fs-14);line-height:22px}
.notice.bad{background:var(--danger-soft);color:var(--danger-text);border:1px solid var(--danger)}
.notice.warn{background:var(--warning-soft);color:var(--warning-text);border:1px solid var(--warning)}
.notice.ok{background:var(--success-soft);color:var(--success-text);border:1px solid var(--success)}
/* Un lien de retour est une cible tactile : 44 px, partout. */
.learning-back,.recall-page .learning-back{min-height:var(--tap);display:inline-flex;align-items:center}

/* ---------- Question Live élève (70:2 … 70:360) ---------- */
/* Le panneau se pose sur le voile du dialogue existant : le travail reste visible derrière
   et le piège de focus, Échap et l'événement de fermeture sont ceux du produit. */
.modal-backdrop.is-qlive{align-items:flex-end;padding:0;background:rgba(15,23,42,.45)}
.modal-backdrop.is-qlive>.modal{width:100%;max-width:none;margin:0;padding:0;border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--shadow-3);max-height:78vh;max-height:78dvh;background:var(--paper)}
.modal-backdrop.is-qlive .modal-head{margin:0;padding:var(--sp-3) var(--sp-4);border:0;border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--question-live-soft)}
.modal-backdrop.is-qlive .modal-head h3{font-size:var(--fs-14);font-weight:600;line-height:22px;color:var(--question-live-text)}
.modal-backdrop.is-qlive.is-done .modal-head{background:var(--success-soft)}
.modal-backdrop.is-qlive.is-done .modal-head h3{color:var(--success-text)}
.modal-backdrop.is-qlive.is-closed .modal-head{background:var(--bg-sunken)}
.modal-backdrop.is-qlive.is-closed .modal-head h3{color:var(--muted)}
.modal-backdrop.is-qlive .modal-body{padding:var(--sp-3) var(--sp-4) var(--sp-4)}
@media(min-width:768px){.modal-backdrop.is-qlive{align-items:center;justify-content:flex-end;padding:var(--sp-5)}
 .modal-backdrop.is-qlive>.modal{width:min(460px,100%);border-radius:var(--r-lg)}
 .modal-backdrop.is-qlive .modal-head{border-radius:var(--r-lg) var(--r-lg) 0 0}}
.s17-qlive{display:flex;flex-direction:column;gap:var(--sp-3)}
.s17-qlive-head{display:none}
.s17-qlive-body{display:flex;flex-direction:column;gap:var(--sp-3)}
.s17-qlive-title{margin:0;font-size:var(--fs-16);line-height:24px;color:var(--ink)}
.s17-qlive-actions{display:flex;flex-direction:column;gap:var(--sp-2)}
.s17-qlive-actions .s17-btn{width:100%}
.s17-qlive-foot{margin:0;font-size:var(--fs-12);line-height:16px;color:var(--muted)}
.s17-qlive .collective-question{display:flex;flex-direction:column;gap:var(--sp-2)}
.s17-qlive h4{margin:0;font-size:var(--fs-16);font-weight:400;line-height:24px;color:var(--ink)}
.s17-return{display:flex;align-items:center;gap:var(--sp-2);margin:0;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);background:var(--live-soft);color:var(--live-text);font-size:var(--fs-13);line-height:18px}
.s17-return svg{width:16px;height:16px;flex-shrink:0}

/* ---------- Seuil de devoir officiel (72:2) ---------- */
.s17-threshold{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.s17-rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.s17-rules li{display:flex;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-3);border-radius:var(--r-md);background:var(--bg-sunken)}
.s17-rules li svg{width:20px;height:20px;flex-shrink:0;color:var(--progress)}
.s17-rules li div{display:flex;flex-direction:column;gap:2px;min-width:0}
.s17-rules li b{font-size:var(--fs-14);font-weight:600;line-height:22px;color:var(--ink)}
.s17-rules li span{font-size:var(--fs-12);line-height:16px;color:var(--muted)}
.s17-threshold-actions{display:flex;flex-direction:column;gap:var(--sp-2)}
.s17-threshold-actions .s17-btn{width:100%}
.s17-note-plain{margin:0;font-size:var(--fs-12);line-height:16px;color:var(--muted)}

/* ---------- File d'envoi ---------- */
.s17-queue{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-1)}
.s17-queue li{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);background:var(--bg-sunken)}
.s17-queue li b{flex:1 0 0;min-width:0;font-size:var(--fs-13);font-weight:500;line-height:18px;color:var(--ink)}
.s17-queue li span{font-size:var(--fs-12);line-height:16px;color:var(--muted);white-space:nowrap}

/* ---------- Pages élève rendues hors de la coque (rappels, devoirs, AlgoLab) ---------- */
.s17-page{display:flex;flex-direction:column;gap:var(--sp-3)}
.s17-h1{margin:0;font-size:var(--fs-20);font-weight:600;line-height:26px;color:var(--ink)}
.s17-lead{margin:0;font-size:var(--fs-14);line-height:22px;color:var(--ink-2)}
.s17-page>.learning-back{align-self:flex-start;font-size:var(--fs-13);color:var(--progress-text);text-decoration:none;min-height:var(--tap);display:inline-flex;align-items:center}
.recall-skills{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.recall-skills>li{display:flex;flex-direction:column;gap:var(--sp-2)}
.recall-skill-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:flex-end}
.recall-skill-actions label{display:flex;flex-direction:column;gap:var(--sp-1);font-size:var(--fs-12);color:var(--muted);flex:1 1 180px;min-width:0}
.recall-skill-actions select{min-height:var(--tap);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:0 var(--sp-2);background:var(--paper);color:var(--ink);font-size:var(--fs-14)}
.recall-skill-details>summary{min-height:var(--tap);display:flex;align-items:center;font-size:var(--fs-14);font-weight:600;color:var(--ink-2);cursor:pointer}

/* ---------- Leçon : le fil d'étapes reprend le gabarit AlgoLab ---------- */
.is-student-2-17 .study-tabs{display:flex;flex-wrap:wrap;gap:var(--sp-2);padding:0;border:0;background:none;overflow:visible}
.is-student-2-17 .study-tabs button{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--tap);padding:0 var(--sp-3);border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper);color:var(--muted);font-size:var(--fs-13);font-weight:500;cursor:pointer}
.is-student-2-17 .study-tabs button[aria-selected="true"]{border-color:var(--live);background:var(--live-soft);color:var(--live-text);font-weight:600}
.is-student-2-17 .study-tabs .study-step-num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--r-pill);background:var(--bg-sunken);font-size:var(--fs-12);font-weight:600}
.is-student-2-17 .study-tabs button[aria-selected="true"] .study-step-num{background:var(--live);color:var(--ink-inverse)}

/* ==================================================================
   Correctif responsive des questions — 23/09/2026
   Contrat : sur mobile/tablette, Énoncé → Réponse → Vérifier reste une seule colonne.
   La colonne de droite est réservée aux options/aides sur un écran desktop suffisamment large.
   Le second bloc couvre aussi un téléphone/tablette en « site pour ordinateur » : un pointeur
   tactile ne doit jamais transformer la question en deux demi-colonnes.
   ================================================================== */
@media(max-width:1049px){
 .answer-card.qcard:has(>.qcard-secondary){
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"main";
  width:100%;max-width:100%
 }
 .answer-card.qcard:has(>.qcard-secondary) .qcard-statement{grid-area:statement}
 .answer-card.qcard:has(>.qcard-secondary) .qcard-answer{grid-area:answer}
 .answer-card.qcard:has(>.qcard-secondary) .qcard-actions{grid-area:actions}
 .answer-card.qcard>.qcard-secondary{display:none}
 .answer-card.qcard .qcard-more{display:flex}
 .qcard-statement,.qcard-answer,.qcard-actions{min-width:0;max-width:100%}
 .qcard-answer .pki-interaction,.qcard-answer .qc{min-width:0;max-width:100%}
 .qcard-answer .study-table-wrap,.qcard-answer .ic-grid-wrap,.qcard-answer .recall-scroll{
  max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain
 }
}
@media(hover:none) and (pointer:coarse) and (max-width:1366px){
 .answer-card.qcard:has(>.qcard-secondary){
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"main";
  width:100%;max-width:100%
 }
 .answer-card.qcard:has(>.qcard-secondary) .qcard-statement{grid-area:statement}
 .answer-card.qcard:has(>.qcard-secondary) .qcard-answer{grid-area:answer}
 .answer-card.qcard:has(>.qcard-secondary) .qcard-actions{grid-area:actions}
 .answer-card.qcard>.qcard-secondary{display:none}
 .answer-card.qcard .qcard-more{display:flex}
}


/* ==================================================================
   P0 2.21 — l'écran de tâche rend le travail, pas son cadre (Figma 65:2)
   Une seule navigation contextuelle : la barre d'application porte le retour, le QuestionHeader
   porte le contexte, et plus rien ne les double. Mesuré sur la vraie route à 390 px : la
   première question passe de y=737 à y≈420.
   ================================================================== */
/* QuestionHeader 61:109 — deux lignes, 89 px, les chronos gardent leur largeur naturelle et
   c'est la piste de progression qui absorbe l'espace. Sans cela le chrono de question s'étirait
   sur la moitié de la ligne et écrasait « Question j / n ». */
.s17-qhead{position:sticky;top:0;z-index:15}
.s17-qhead-row{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.s17-qhead-row .s17-timer{flex:0 0 auto}
.s17-qhead-row .s17-track{flex:1 1 auto;min-width:40px;height:6px}
.s17-qhead-index{flex:0 0 auto;margin:0;font-size:var(--fs-14);font-weight:600;line-height:22px;color:var(--ink);white-space:nowrap}
/* Le menu secondaire est UNE affordance repliée, posée dans la ligne 1 : il ne prend pas de
   ligne à lui seul au-dessus du travail de l'élève. */
.s17-qhead-tools{position:relative;flex:0 0 auto}
.s17-qhead-more{position:absolute;inset-inline-end:0;top:36px;min-width:220px;display:flex;
 flex-direction:column;gap:var(--sp-1);padding:var(--sp-2);background:var(--paper);
 border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-2)}
.s17-qhead-more[hidden]{display:none}
.s17-qhead-more .s17-btn{justify-content:flex-start;width:100%}
/* L'état de synchronisation tient sur une ligne : la pastille dit tout, la phrase n'arrive
   qu'en cas de conflit ou d'envoi différé. */
.s17-qhead-sync{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin:0;
 padding:var(--sp-1) var(--s17-gutter)}
.s17-sync-note{font-size:var(--fs-12);line-height:16px;color:var(--muted)}
/* ActivityProgress 102:171 — une pastille par question, l'état lisible sans la couleur seule. */
.s17-actprog-host{margin-top:var(--sp-2)}
.s17-aprog-dots{display:flex;gap:6px;margin:6px 0 0;padding:0;list-style:none}
.s17-aprog-dots li{flex:1 1 0;min-width:0;height:28px;display:flex;align-items:center;
 justify-content:center;border:1px solid var(--line);border-radius:var(--r-sm);
 background:var(--bg-sunken);color:var(--muted);font-size:var(--fs-12)}
.s17-aprog-dots li.is-ok{background:var(--success-soft);border-color:var(--success);color:var(--success-text)}
.s17-aprog-dots li.is-revoir{background:var(--warning-soft);border-color:var(--warning);color:var(--warning-text)}
.s17-aprog-dots li.is-current{background:var(--progress-soft);border-color:var(--progress);color:var(--progress-text);font-weight:600}
/* Le contexte de séance descend sous le travail : il ne repousse plus la première question. */
.learning-context{margin-top:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2)}
.learning-context .learning-identity{margin:0;font-size:var(--fs-12);color:var(--muted)}
/* « Observer / manipuler » : une aide repliée, pas un bloc qui occupe le premier écran. */
.ex-aid-row>summary{min-height:var(--tap);display:flex;align-items:center;gap:var(--sp-2);
 cursor:pointer;font-size:var(--fs-14);font-weight:500;color:var(--ink-2)}

/* L'énoncé de l'exercice est la « Carte · Énoncé » de la maquette : une carte neutre sur le
   fond de page, pas un bloc teinté de plus dans une pile de blocs teintés. */
@media(max-width:1023px){
 .is-student-2-17 .learning-card{background:var(--paper);border:1px solid var(--line);box-shadow:none}
 .is-student-2-17 .ex-aid-row{background:none;border:1px dashed var(--line-strong);padding:0 var(--sp-3)}
}

/* Bloc Diagnostic du catalogue de rappels (Figma 69:13) : bordure 2 px, fond bleu doux, il
   porte l'emphase parce qu'il répond à « je ne sais pas par où commencer ». */
.s17-diagnostic{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3);
 background:var(--progress-soft);border:2px solid var(--progress);border-radius:var(--r-md);
 text-decoration:none;color:inherit;min-height:var(--tap)}
.s17-diagnostic svg{width:20px;height:20px;flex-shrink:0;color:var(--progress-text)}
.s17-diagnostic-icon{display:inline-flex;flex-shrink:0}
.s17-diagnostic-icon svg{width:24px;height:24px}
.s17-diagnostic-txt{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:var(--sp-1)}
.s17-diagnostic-txt .s17-eyebrow{color:var(--progress-text);margin:0}
.s17-diagnostic-txt b{font-size:var(--fs-14);font-weight:600;line-height:22px;color:var(--ink)}
.s17-diagnostic-txt>span:last-child{font-size:var(--fs-12);line-height:16px;color:var(--muted)}

/* Les hôtes de retour (séance en cours, Question Live) sont vides la plupart du temps. Dans une
   colonne flex à `gap`, un enfant vide consomme quand même un intervalle : deux hôtes vides
   poussaient le titre de 24 px vers le bas sans rien afficher. */
.s17-content>div:empty,.recall-page>div:empty{display:none}

/* Le bouton « Autres actions » est une VRAIE cible de 44 px — un doigt ne vise pas 32 px, et
   une cible qu'on ne peut pas mesurer n'est pas une cible. Les marges négatives absorbent les
   12 px excédentaires : la ligne 1 garde la hauteur de la maquette. */
.s17-qhead-tools .s17-qhead-icon{width:var(--tap);height:var(--tap);min-height:var(--tap);
 padding:0;margin-block:calc((var(--tap) - 32px) / -2);margin-inline-end:calc(var(--sp-2) * -1)}
/* « Observer / manipuler » : le bouton tient dans la largeur du dépliant, quelle qu'elle soit. */
.ex-aid-row{min-width:0}
.ex-aid-row>.btn{max-width:100%;white-space:normal;text-align:start}

/* Barre d'actions de tâche (Figma 65:57) : 69 px, deux secondaires de 80 px, l'action primaire
   prend le reste. Elle REMPLACE la barre des trois destinations sur un écran de tâche — jamais
   les deux à la fois, c'est tout l'objet de la navigation contextuelle du §12. */
.s17-actionbar{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:var(--sp-2);
 padding:var(--sp-2) var(--sp-3);background:var(--paper);border-top:1px solid var(--line);
 padding-bottom:calc(var(--sp-2) + env(safe-area-inset-bottom,0px))}
.s17-actionbar-sec{flex:0 0 80px;height:52px;min-height:52px;max-height:52px;display:flex;
 flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:var(--sp-1) 4px;
 border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--paper);
 color:var(--ink-2);font-size:var(--fs-12);line-height:16px;cursor:pointer}
.s17-actionbar-sec svg{width:18px;height:18px;flex-shrink:0}
/* Le libellé tient sur une ligne : « Confiance » réparti sur trois lignes faisait passer le
   bouton de 52 à 95 px et déséquilibrait toute la barre. */
.s17-actionbar-sec>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.s17-actionbar-sec[disabled]{opacity:.45;cursor:not-allowed}
.s17-actionbar-primary{flex:1 0 0;min-width:0;height:52px;min-height:52px;justify-content:center}
/* Sous 360 px, les secondaires se resserrent plutôt que de rogner l'action principale. */
@media(max-width:359px){.s17-actionbar-sec{flex:0 0 66px}}

/* ---- Contrat vertical de l'écran de tâche (Figma 65:2) ----
   AppBar 0–52, QuestionHeader 52–141, contenu à 141, Carte Énoncé à 153, Carte Ta réponse à 295.
   Rien ne s'intercale entre l'en-tête et l'énoncé : ni hero d'exercice, ni ligne d'état, ni
   bloc d'aide. Ces trois-là ont été déplacés ; il reste à tenir la géométrie. */
.s17-appbar{height:52px;min-height:52px;max-height:52px;box-sizing:border-box}
/* La coque d'exercice n'ajoute plus de cadre à l'intérieur du contenu : les cartes Énoncé et
   Ta réponse sont les cartes, et une carte dans une carte fabrique la hiérarchie confuse que
   l'enseignant a signalée. */
.is-student-2-17 #current-exercise{background:none;border:0;box-shadow:none;padding:0;margin:0}
/* L'en-tête d'exercice ne porte plus que du contenu réel (programme à étudier). Vide, il ne
   prend aucune place — un conteneur vide ne doit jamais repousser le travail de l'élève. */
.is-student-2-17 .ex-head:not(:has(.ex-problem)):not(:has(.exercise-program)){display:none}
.is-student-2-17 .ex-body{display:flex;flex-direction:column;gap:var(--sp-3)}
/* Le QuestionHeader est collé sous la barre d'application (Figma : y=52, sans intervalle). Il est
   rendu dans le contenu, qui porte une gouttière : on l'annule pour lui seul, sinon la maquette
   commence 12 px trop bas et tout le contrat vertical glisse d'autant. */
.s17-content>.learning-workspace>.s17-qhead{
 margin:calc(var(--sp-3) * -1) calc(var(--s17-gutter) * -1) 0;
 border-radius:0}

/* Diagnostic (Figma 69:117) : sur-titre, compteur, piste, UNE carte, puis la note. Rien
   au-dessus du travail que ces trois lignes — ni retour (la barre d'application le porte),
   ni titre de situation, ni chronomètre : le diagnostic place l'élève, il ne le chronomètre pas. */
.s17-eyebrow.is-progress{color:var(--progress-text);margin:0}
.s17-diag-count{margin:0;font-size:var(--fs-14);font-weight:600;line-height:22px;color:var(--ink)}
.recall-diagnostic .s17-track{height:6px}
.recall-diagnostic .qcard-timer{display:none}
/* Dans le diagnostic, la maquette ne fait qu'UNE carte : l'énoncé et les options y vivent
   ensemble. Le gabarit partagé les sépare visuellement — utile dans un exercice, où l'élève
   revient à l'énoncé, inutile ici où la question tient en une phrase. La structure HTML est
   déjà la bonne (un seul <article>) : seule la peinture change. */
.recall-diagnostic .answer-card.qcard{background:var(--paper);border:1px solid var(--line);
 border-radius:var(--r-md);box-shadow:var(--shadow-1);padding:var(--sp-3);gap:var(--sp-2)}
.recall-diagnostic .qcard-statement{background:none;border:0;border-radius:0;padding:0}
.recall-diagnostic .qcard-answer{background:none;border:0;border-radius:0;padding:0}
.recall-diagnostic .qcard-label{margin:0}

/* Résultat du diagnostic (Figma 69:147) : un résumé teinté, puis ce que le diagnostic a vu,
   puis le parcours de remédiation. Aucun score global, aucun classement — le résumé nomme ce
   qui a été observé et rien d'autre. */
.s17-diag-resume{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3);
 background:var(--live-soft);border-radius:var(--r-md)}
.s17-diag-resume .s17-eyebrow{color:var(--live-text);margin:0}
.s17-diag-phrase{margin:0;font-size:var(--fs-16,16px);line-height:24px;color:var(--ink)}
.s17-diag-meta{margin:0;font-size:var(--fs-12);line-height:16px;color:var(--muted)}
/* Rappel rapide (Figma 69:73) : la zone de retour ne prend de la place que lorsqu'elle dit
   quelque chose. Vide, elle laissait une barre grise sous les options. */
.s17-note[data-quick-feedback]:empty{display:none}
/* Les choix de « Vérifie-toi » sont des colonnes égales (maquette : trois options de 108 px),
   pas des boutons dimensionnés par la longueur de leur mot : « Oui » et « Non » donnaient deux
   cibles de 54 et 59 px, inégales et sous la cible tactile en largeur utile. */
.s17-q-actions:has(.s17-quick-opt){display:flex;gap:var(--sp-2);flex-wrap:wrap}
.s17-quick-opt{flex:1 1 0;min-width:96px;min-height:48px;justify-content:center}

/* ---------- En-tête de tâche (UX 2.22 lot 11, §5.1) : retour visible à partir de 768 px ---------- */
.s17-task-header{display:none}
@media(min-width:768px){
  .s17-task-header{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-2) var(--sp-5);background:var(--paper);border-bottom:1px solid var(--line)}
  .s17-task-back{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--tap);padding:0 var(--sp-3);border-radius:var(--r-sm);color:var(--navy);font-weight:600;text-decoration:none;flex-shrink:0}
  .s17-task-back:hover,.s17-task-back:focus-visible{background:var(--bg-sunken)}
  .s17-task-back svg{width:18px;height:18px}
  .s17-task-title{display:flex;flex-direction:column;min-width:0}
  .s17-task-title strong{font-size:var(--fs-16);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .s17-task-title span{font-size:var(--fs-14);color:var(--muted)}
}

/* ---------- AlgoLab dans la coque (lot 15) ---------- */
[data-algolab-host] .algolab-embed-shell{display:flex;flex-direction:column;gap:var(--sp-3)}
[data-algolab-host] .algolab-embed-frame{width:100%;height:min(78vh,900px);min-height:480px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper)}

/* ---------- Bureau (UX 2.22, checkpoint UX) : les tâches occupent toute la largeur à côté du rail ----------
   Mesuré avant : à 1366 px le contenu était plafonné à 900 px sur 1126 disponibles, la carte de question
   à ~420 px, avec deux bandes vides. Maquette : Figma « 2.22 · M », frame « Exercice · pleine largeur —
   1366 ». Plafond 1480 px pour les très grands écrans ; la colonne latérale des questions passe à 320 px. */
@media(min-width:1024px){
  .s17-content{max-width:1480px;padding:var(--sp-6) var(--sp-8)}
  /* width:100% : centrés par margin:auto dans une colonne flex, ces conteneurs se réduisaient à leur contenu. */
  .s17 .learning-workspace,.s17 .recall-page,.s17 .r4-page,.s17 .exam-shell,.s17 .recall-diagnostic{max-width:none;width:100%}
}
@media(min-width:1050px){
  .s17 .answer-card.qcard:has(>.qcard-secondary){grid-template-columns:minmax(0,1fr) 320px}
}
/* Compte à 768–1023 px : l'icône seule. Le nom comprimait la barre large et tronquait « Explorer »
   (constaté au checkpoint UX 2.22, maquette corrigée : AccountButton « Icône (< 1024) »). */
@media(min-width:768px) and (max-width:1023px){
  .s17-account{width:var(--tap);padding:0}
  .s17-account-label{display:none}
}


/* EXERCISE-WIDTH-UNIFIED-2026-09-27
   Une seule largeur desktop pour TOUTES les banques d'exercices : rappels 3e, rappel 4e,
   séries et activités de séance. L'exercice courant ne choisit jamais sa propre largeur. */
@media(min-width:1024px){
  .app-shell .container:has(> .learning-workspace),
  .s17-content:has(> .learning-workspace){
    width:100%;
    max-width:1400px;
    margin-inline:auto;
    padding-inline:32px;
  }
  .learning-workspace,
  .s17 .learning-workspace{
    width:100%;
    max-width:1320px;
    margin-inline:auto;
  }
}
@media(min-width:1050px){
  .learning-workspace .answer-card.qcard:has(>.qcard-secondary){
    grid-template-columns:minmax(0,1fr) 300px;
    column-gap:20px;
  }
}


/* QCARD-DESKTOP-OPTIONS-DEDUP-2026-09-27 */
@media(min-width:1050px){
  .answer-card.qcard:has(>.qcard-secondary)>.qcard-main>.qcard-actions .qcard-more{display:none!important}
  .answer-card.qcard:has(>.qcard-secondary)>.qcard-main>.qcard-actions:has(.qcard-more:only-child){display:none}
}