/* 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 0;min-height:0}
@media(max-width:359px){.s17{--s17-gutter:var(--sp-3)}}

/* ---------- 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}
.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)}

/* ---------- 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}
.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)}

/* ---------- 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)}

/* ---------- 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)}
.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 0;min-width:0;display:flex;flex-direction:column}}
@media(max-width:767px){.s17-main{display:flex;flex-direction:column;flex:1 0 0;min-height: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)}
.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;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;min-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)}