.r4-page{max-width:1120px;margin:0 auto;color:#17324d}.r4-hero{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:32px;align-items:end;padding:20px 0 32px;border-bottom:1px solid #cbd9df}.r4-hero h1{font-size:clamp(32px,5vw,52px);line-height:1.05;letter-spacing:-.03em;margin:10px 0 18px}.r4-hero p{font-size:18px;line-height:1.65;max-width:780px}.r4-time{display:grid;justify-items:end}.r4-time strong{font-size:64px;line-height:.9}.r4-time span{font-weight:750}.r4-time small{margin-top:4px}.r4-session{padding:34px 0;border-bottom:1px solid #d5e0e5}.r4-session-title{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;margin-bottom:20px}.r4-session-title>span{font-size:13px;font-weight:850;letter-spacing:.12em;color:#087780}.r4-session-title h2{font-size:28px;margin:0}.r4-session-title p{font-size:17px;line-height:1.55;margin:3px 0;max-width:800px}.r4-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.r4-grid.one{grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr)}.r4-level{display:flex;flex-direction:column;gap:12px;border:1px solid #cad8de;border-top:4px solid #087e83;border-radius:14px;padding:20px;background:#fff;box-shadow:0 9px 26px rgba(23,50,77,.05)}.r4-level-2{border-top-color:#5e5bb7}.r4-level-3{border-top-color:#b35f2f}.r4-level-head{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:750}.r4-badge{font-size:12px;letter-spacing:.1em}.r4-level h3{font-size:25px;line-height:1.2;margin:0}.r4-level p{font-size:17px;line-height:1.55;margin:0;min-height:54px}.r4-level small{font-size:14px;line-height:1.5}.r4-progress{margin-top:auto}.r4-progress>div{display:flex;justify-content:space-between;gap:12px;font-size:14px}.r4-progress progress{width:100%;height:8px;accent-color:#087e83}.r4-method{border-radius:14px;padding:22px;background:#eef4f6}.r4-method h3{font-size:22px;margin:0 0 14px}.r4-method ol{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:13px;counter-reset:r4}.r4-method li{display:grid;grid-template-columns:28px 1fr;gap:3px 9px;counter-increment:r4}.r4-method li:before{content:counter(r4);grid-row:1/3;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#17324d;color:white;font-weight:800}.r4-method b{font-size:16px}.r4-method span{font-size:14px;line-height:1.4}.r4-contract{padding:34px 0}.r4-contract h2{font-size:28px}.r4-contract>div{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.r4-contract p{font-size:16px;line-height:1.55;border-left:3px solid #0c8188;padding:12px 14px;background:#f4f8f9;margin:0}.learning-card .r4-algolab{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin:0 0 18px;padding:14px 16px;border:1px solid #b9ccd5;border-radius:10px;background:#f3f8fa}.r4-algolab div{min-width:0;flex:1}.r4-algolab strong{display:block;font-size:17px}.r4-algolab p{margin:3px 0 0;font-size:14px;line-height:1.45}.r4-algolab .btn{white-space:normal}.r4-future{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;background:#fff0df;color:#7a3f14;font-size:12px;font-weight:800;letter-spacing:.04em}@media(max-width:760px){.r4-hero{grid-template-columns:1fr;gap:16px}.r4-time{justify-items:start;grid-template-columns:auto 1fr;align-items:end;gap:0 12px}.r4-time strong{grid-row:1/3}.r4-grid,.r4-grid.one,.r4-contract>div{grid-template-columns:1fr}.r4-level p{min-height:0}.r4-session{padding:26px 0}.r4-hero h1{font-size:34px}.r4-contract{padding-top:26px}}
/* Pedagogy v2 — simpler recall shell. */
.r4-hero{display:block;padding:20px 0 28px}
.r4-hero h1{font-size:clamp(30px,4vw,44px);margin:8px 0 10px}
.r4-hero>p:last-child{font-size:17px;line-height:1.55;margin:0}
.r4-time,.r4-contract{display:none!important}
.r4-session-title{margin-bottom:14px}
.r4-session-title p{display:none}

/* Right panel: instructions + confidence + aids, in this order. */
.qcard-how{padding:0 0 12px;border-bottom:1px solid var(--line)}
.qcard-how p:last-child{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.learning-workspace[data-recall-bank^="4e-"] .qcard-secondary{gap:14px}
.learning-workspace[data-recall-bank^="4e-"] .confidence-box{padding:0;margin:0}
.learning-workspace[data-recall-bank^="4e-"] .confidence-options{grid-template-columns:1fr 1fr}
.learning-workspace[data-recall-bank^="4e-"] .qcard-aids{padding-top:12px;border-top:1px solid var(--line)}

/* Ordering: keep the drag handle and arrows on the same row as the instruction. */
.learning-workspace[data-recall-bank^="4e-"] .ic-order>li{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px}
.learning-workspace[data-recall-bank^="4e-"] .ic-order-line{grid-column:1;grid-row:1;display:flex;align-items:center;gap:10px;min-width:0}
.learning-workspace[data-recall-bank^="4e-"] .ic-row-tools{grid-column:2;grid-row:1;display:flex;align-items:center;gap:6px}
.learning-workspace[data-recall-bank^="4e-"] .ic-row-tools .ic-place:empty{display:none}
.learning-workspace[data-recall-bank^="4e-"] .ic-grip{width:44px;height:44px;display:grid;place-items:center}
.learning-workspace[data-recall-bank^="4e-"] .ic-order-line code{flex:1;min-width:0}

/* Compact question navigation on desktop. */
.learning-workspace[data-recall-bank^="4e-"] .ux-stepper-bar,
.learning-workspace[data-recall-bank^="4e-"] .ux-stepper-all{max-width:760px;margin-left:auto;margin-right:auto}
.learning-workspace[data-recall-bank^="4e-"] .ux-stepper-nav .btn{min-height:46px}

/* AlgoLab is now a real question step, not a banner above the exercise. */
.ic-algolab{display:grid;gap:12px}
.ic-algolab-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;list-style:none;padding:0;margin:4px 0}
.ic-algolab-steps li{padding:9px 6px;text-align:center;border:1px solid var(--line);border-radius:10px;background:#f6f8fb;font-size:13px;font-weight:700}
.ic-algolab .btn{width:100%;min-height:48px}
.ic-algolab-done{min-height:48px;border:1px solid var(--line-strong);border-radius:10px;background:white;color:var(--ink);font:inherit;font-weight:750;cursor:pointer}
.ic-algolab-done[aria-pressed="true"]{background:#e9f7f1;border-color:#3d9077;color:#185f4c}
.ux-drawer[data-algolab-embed]{width:min(1240px,96vw)}
.algolab-embed-shell{height:calc(100dvh - 92px);display:grid;grid-template-rows:auto 1fr;gap:8px}
.algolab-embed-note{margin:0;padding:8px 10px;background:#eef7f7;border-radius:9px;font-size:13px;color:#355765}
.algolab-embed-frame{width:100%;height:100%;border:1px solid var(--line);border-radius:10px;background:white}

/* AlgoLab Focus Workspace — l'atelier devient l'espace principal, jamais un tiroir. */
body.has-algolab-focus{overflow:hidden!important}
.algolab-focus-workspace{
 position:fixed;inset:0;z-index:160;display:grid;
 grid-template-rows:auto minmax(0,1fr) auto;
 width:100vw;height:100dvh;background:var(--paper,#fff);color:var(--ink,#17324d);
 isolation:isolate
}
.algolab-focus-head{
 display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;
 min-height:64px;padding:8px 16px;border-bottom:1px solid var(--line);
 background:var(--paper,#fff);box-shadow:0 1px 0 rgba(23,50,77,.04)
}
.algolab-focus-back{width:auto;min-height:44px;white-space:nowrap}
.algolab-focus-title{min-width:0;display:grid;gap:2px}
.algolab-focus-title small{
 font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-600,#087e83)
}
.algolab-focus-title strong{
 display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 font-size:17px;line-height:1.25;color:var(--navy,#17324d)
}
.algolab-focus-status{
 margin:0;white-space:nowrap;font-size:12px;font-weight:700;color:var(--muted,#66788a)
}
.algolab-focus-main{min-height:0;overflow:hidden;background:#f5f7fa}
.algolab-focus-frame{display:block;width:100%;height:100%;border:0;background:#fff}
.algolab-focus-foot{
 display:flex;align-items:center;justify-content:space-between;gap:16px;
 min-height:64px;padding:8px 16px;border-top:1px solid var(--line);background:var(--paper,#fff)
}
.algolab-focus-foot p{margin:0;font-size:12px;line-height:1.4;color:var(--muted,#66788a)}
.algolab-focus-finish{width:auto;min-height:46px;white-space:nowrap}
.algolab-focus-workspace.is-complete .algolab-focus-status{color:var(--success-600,#237a57)}
.algolab-focus-workspace.is-complete .algolab-focus-finish{background:var(--success-600,#237a57);border-color:var(--success-600,#237a57)}

.r4-future{font-size:11px;padding:3px 7px;background:#fff5e8;color:#7b4a17}

@media(max-width:767px){
 .algolab-focus-head{grid-template-columns:44px minmax(0,1fr);gap:8px;min-height:56px;padding:6px 8px}
 .algolab-focus-back{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;justify-content:center}
 .algolab-focus-back span,.algolab-focus-head .algolab-focus-status,.algolab-focus-title small{display:none}
 .algolab-focus-title strong{font-size:14px}
 .algolab-focus-foot{min-height:58px;padding:6px 8px}
 .algolab-focus-foot p{display:none}
 .algolab-focus-finish{width:100%;min-height:46px}
 .r4-hero h1{font-size:30px}
 .r4-grid.one{grid-template-columns:1fr}
 .r4-method{padding:16px}
 .ic-algolab-steps{grid-template-columns:1fr 1fr}
 .ic-algolab-steps li:last-child{grid-column:1/-1}
 .ux-drawer[data-algolab-embed]{width:100vw}
 .algolab-embed-shell{height:calc(100dvh - 78px)}
 .learning-workspace[data-recall-bank^="4e-"] .ux-stepper-bar,
 .learning-workspace[data-recall-bank^="4e-"] .ux-stepper-all{max-width:none}
 .learning-workspace[data-recall-bank^="4e-"] .ic-order>li{grid-template-columns:1fr}
 .learning-workspace[data-recall-bank^="4e-"] .ic-row-tools{grid-column:1;grid-row:2;justify-content:flex-end}
}

@media(min-width:768px){
 .learning-workspace[data-recall-bank^="4e-"] .ux-stepper-bar,
 .learning-workspace[data-recall-bank^="4e-"] .ux-stepper-all{max-width:620px}
 .learning-workspace[data-recall-bank^="4e-"] .ux-stepper-nav{grid-template-columns:220px auto 220px;justify-content:center}
}


/* Pedagogy V3 — compact, readable and explicit. */
.learning-workspace[data-recall-bank^="4e-"] .qcard-secondary{counter-reset:none}
.learning-workspace[data-recall-bank^="4e-"] .qcard-how{order:1;padding:0 0 12px;border-bottom:1px solid var(--line)}
.learning-workspace[data-recall-bank^="4e-"] .confidence-box{order:2;padding:0 0 12px!important;border-bottom:1px solid var(--line)!important}
.learning-workspace[data-recall-bank^="4e-"] .qcard-aids{order:3;padding-top:0!important;border-top:0!important}
.learning-workspace[data-recall-bank^="4e-"] .confidence-title{font-size:14px;font-weight:800;color:var(--navy)}
.learning-workspace[data-recall-bank^="4e-"] .confidence-hint{display:block;width:100%;margin-top:2px}
.learning-workspace[data-recall-bank^="4e-"] .confidence-wait{margin:6px 0;font-size:12px;line-height:1.4;color:var(--muted)}
.learning-workspace[data-recall-bank^="4e-"] .confidence-options button{font-size:13px;min-height:42px}
.learning-workspace[data-recall-bank^="4e-"] .qcard-relay-label{color:var(--navy);font-weight:800}

/* Ordering: handle, number, instruction and arrows stay on one line. */
.learning-workspace[data-recall-bank^="4e-"] .ic-order>li{display:block!important;padding:9px 10px!important}
.learning-workspace[data-recall-bank^="4e-"] .ic-order-line{display:grid!important;grid-template-columns:44px 30px minmax(0,1fr) auto auto;align-items:center;gap:8px;min-width:0}
.learning-workspace[data-recall-bank^="4e-"] .ic-order-line>.ic-grip{grid-column:1;margin:0}
.learning-workspace[data-recall-bank^="4e-"] .ic-order-line>.ic-position{grid-column:2}
.learning-workspace[data-recall-bank^="4e-"] .ic-order-line>code{grid-column:3;min-width:0}
.learning-workspace[data-recall-bank^="4e-"] .ic-order-line>.ic-place{grid-column:4;min-width:0}
.learning-workspace[data-recall-bank^="4e-"] .ic-order-line>.qc-arrows{grid-column:5}
.learning-workspace[data-recall-bank^="4e-"] .ic-row-tools{display:none!important}

/* AlgoLab: progress is detected from the embedded editor. */
.ic-algolab-help{margin:0;font-size:14px;line-height:1.45;color:var(--ink-2)}
.ic-algolab-steps li.done,.algolab-live-steps span.done{background:#eaf7f1;border-color:#78ad98;color:#155e49}
.algolab-embed-head{display:grid;gap:8px}
.algolab-embed-head>p{margin:0;font-size:13px;color:var(--ink-2)}
.algolab-live-steps{display:flex;flex-wrap:wrap;gap:6px}
.algolab-live-steps span{padding:6px 9px;border:1px solid var(--line);border-radius:999px;background:#f6f8fb;font-size:12px;font-weight:700}
.ic-algolab-done{display:none!important}

@media(max-width:760px){
 .learning-workspace[data-recall-bank^="4e-"] .ic-order-line{grid-template-columns:44px 30px minmax(0,1fr) auto;gap:6px}
 .learning-workspace[data-recall-bank^="4e-"] .ic-order-line>.ic-place{display:none}
 .learning-workspace[data-recall-bank^="4e-"] .ic-order-line>.qc-arrows{grid-column:4}
 .learning-workspace[data-recall-bank^="4e-"] .qc-arrows button{min-width:40px;width:40px}
}


/* V3: the question itself is compact; the answer area gets the visual priority. */
.learning-workspace[data-recall-bank^="4e-"] .qcard-statement{
 background:transparent;border:0;border-left:0;border-radius:0;padding:4px 4px 6px
}
.learning-workspace[data-recall-bank^="4e-"] .qcard.is-current .qcard-statement{border-left:0}
.learning-workspace[data-recall-bank^="4e-"] .qcard-label{margin-bottom:4px}
.learning-workspace[data-recall-bank^="4e-"] .qcard-prompt{font-size:19px!important;line-height:1.35!important}
.learning-workspace[data-recall-bank^="4e-"] .qcard-answer{border-color:var(--navy-100);box-shadow:0 2px 10px rgba(23,50,77,.04)}
@media(min-width:768px){
 .learning-workspace[data-recall-bank^="4e-"] .ux-stepper-nav{
   grid-template-columns:minmax(130px,180px) auto minmax(130px,180px);
   justify-content:center
 }
}
@media(max-width:767px){
 .learning-workspace[data-recall-bank^="4e-"] .ux-stepper-nav{
   grid-template-columns:minmax(44px,1fr) auto minmax(44px,1fr)
 }
}


/* V4 — outils visibles et atelier AlgoLab concret. */
.learning-workspace[data-recall-bank^="4e-"] .confidence-strategy-open{
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line)
}
.learning-workspace[data-recall-bank^="4e-"] .confidence-subtitle{
  margin:0 0 7px;font-size:13px;font-weight:800;color:var(--navy)
}
.learning-workspace[data-recall-bank^="4e-"] .confidence-strategy-open .confidence-options{
  grid-template-columns:1fr 1fr
}
.ic-algolab-task,.ic-algolab-test{
  display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;
  padding:10px 12px;border-radius:10px;font-size:14px;line-height:1.45
}
.ic-algolab-task{background:#eef7f7;border:1px solid #b8d9d7}
.ic-algolab-test{background:#f7f6ef;border:1px solid #ddd7bd}
.ic-algolab-task b,.ic-algolab-test b{color:var(--navy)}
.ic-algolab .ic-live{margin:2px 0 0}
.learning-workspace[data-recall-bank^="4e-"] .qcard-secondary{
  background:#f7f9fb
}
/* La colonne latérale n'existe que sur un vrai écran large.
   Entre 768 et 1049 px, déclarer seulement grid-template-columns provoquait un auto-placement
   involontaire : l'énoncé partait à gauche et la réponse à droite. */
@media(min-width:1050px){
 .learning-workspace[data-recall-bank^="4e-"] .answer-card.qcard:has(>.qcard-secondary){
   grid-template-columns:minmax(0,1fr) 310px;
   grid-template-areas:"main side";
   column-gap:16px;
   align-items:start
 }
 .learning-workspace[data-recall-bank^="4e-"] .answer-card.qcard:has(>.qcard-secondary)>.qcard-main{
   grid-area:main;
   min-width:0
 }
 .learning-workspace[data-recall-bank^="4e-"] .answer-card.qcard:has(>.qcard-secondary)>.qcard-secondary{
   grid-area:side
 }
}
@media(max-width:430px){
 .ic-algolab-task,.ic-algolab-test{grid-template-columns:1fr;gap:2px}
 .learning-workspace[data-recall-bank^="4e-"] .confidence-strategy-open .confidence-options{grid-template-columns:1fr}
}


/* Teacher correction — available on every question, including AlgoLab. */
.learning-workspace .teacher-solution-btn{
 border-color:#7fb99d;background:#edf8f2;color:#155f46;font-weight:800
}
.learning-workspace .teacher-correction{
 margin:12px 0 2px;padding:14px;border:1px solid #7fb99d;border-radius:12px;
 background:#edf8f2;color:#123f32
}
.learning-workspace .teacher-correction-title{
 margin:0 0 10px;font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:#155f46
}
.learning-workspace .teacher-correction section+section{margin-top:12px}
.learning-workspace .teacher-correction h4{margin:0 0 5px;font-size:14px;color:#155f46}
.learning-workspace .teacher-correction pre{
 margin:0;padding:10px 12px;border-radius:9px;background:#fff;border:1px solid #b9d9c8;
 color:#17324d;white-space:pre-wrap;overflow-wrap:anywhere;font:500 14px/1.55 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace
}

/* AlgoLab intégré : état de démarrage explicite (jamais de cadre blanc silencieux). Voile au-dessus du cadre
   pendant le chargement ; en cas d'échec, message et « Réessayer » (le travail est conservé). */
.algolab-stage{position:relative;width:100%;height:100%;min-height:0}
.algolab-embed-shell>.algolab-stage{min-height:0}
[data-algolab-host] .algolab-stage{height:auto}
.algolab-loading{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;background:#f5f7fa;color:#17324d;border-radius:inherit}
.algolab-loading[hidden]{display:none}
.algolab-spin{width:34px;height:34px;border-radius:50%;border:3px solid #cdd8e6;border-top-color:#3a55d4;animation:algolab-spin .9s linear infinite}
@keyframes algolab-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.algolab-spin{animation-duration:2.4s}}
.algolab-load-t{margin:0;font-size:16px;line-height:1.4}
.algolab-load-s{margin:0;font-size:14px;line-height:1.5;color:#4a5d73;max-width:30em}
.algolab-loading .btn{min-height:48px;margin-top:6px}