/* Police calligraphique Dancing Script Bold (SIL OFL 1.1) — intégrée, fonctionne hors ligne */
@font-face{font-family:"Dancing Script";src:url("../fonts/DancingScript-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/BricolageGrotesque-var.woff2") format("woff2");font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("../fonts/Atkinson-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("../fonts/Atkinson-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
.calli{font-family:"Dancing Script","Bricolage Grotesque",cursive;font-weight:700;letter-spacing:0}
:root{
  --ink:#14213D;
  --ink-soft:#3D4A6B;
  --paper:#F5F7FC;
  --paper-soft:#FFFFFF;
  --pine:#1F3FA8;
  --pine-deep:#172F80;
  --ochre:#C8322B;
  --ochre-bright:#E2483D;
  --rule:#B9C8EA;
  --rule-soft:#DCE4F6;
  --danger:#8A2E2E;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Atkinson Hyperlegible",ui-sans-serif,system-ui,sans-serif;
  line-height:1.55;
}
h1,h2,h3,.display{font-family:"Bricolage Grotesque","Atkinson Hyperlegible",sans-serif}
a{color:inherit}

/* ---------- shell ---------- */
.app-shell{display:grid;grid-template-columns:340px 1fr;min-height:100vh}

/* ---------- atelier (left rail) ---------- */
.atelier{
  background:var(--ink);
  color:var(--paper-soft);
  padding:28px 26px 34px;
  display:flex;flex-direction:column;gap:26px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.mark{display:flex;align-items:center;gap:10px}
.mark-glyph{
  width:34px;height:34px;border-radius:8px;
  background:var(--ochre-bright);color:var(--ink);
  display:grid;place-items:center;font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:18px;
  flex:none;
}
.mark-name{font-size:15px;font-weight:600;letter-spacing:.01em}
.mark-sub{font-size:11.5px;color:#B9C4BE;margin-top:1px}

.atelier h2{font-size:20px;margin:0 0 4px;font-weight:500;color:var(--paper-soft)}
.atelier .lede{font-size:13px;color:#AEB9B3;margin:0 0 4px;line-height:1.5}

.field{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.field label{font-size:12px;font-weight:600;color:#C7D0CA}
.field textarea,.field input,.field select{
  background:#26332F;border:1px solid #3B4B45;color:var(--paper-soft);
  border-radius:9px;padding:10px 11px;font:inherit;font-size:13.5px;outline:none;
}
.field textarea{min-height:110px;resize:vertical;line-height:1.5;font-family:"Atkinson Hyperlegible",sans-serif}
.field textarea:focus,.field input:focus,.field select:focus{border-color:var(--ochre-bright);box-shadow:0 0 0 3px #e3b0272a}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.field{min-width:0}
.field textarea,.field input,.field select{width:100%;min-width:0}
.atelier{overflow-x:hidden}
.worker-row input{min-width:0}

.btn-generate{
  margin-top:20px;width:100%;border:0;border-radius:10px;padding:13px 14px;
  background:var(--ochre-bright);color:var(--ink);font-weight:700;font-size:14.5px;
  cursor:pointer;font-family:"Atkinson Hyperlegible",sans-serif;
  transition:transform .12s ease, background .15s ease;
}
.btn-generate:hover{background:#f0c34c}
.btn-generate:active{transform:scale(.98)}
.btn-generate:disabled{opacity:.55;cursor:wait}

.atelier hr{border:0;border-top:1px solid #37453F;margin:4px 0}

.worker-connect{font-size:12.5px;color:#AEB9B3}
.worker-connect .field input{font-size:12.5px}
.worker-row{display:flex;gap:8px;margin-top:8px}
.worker-row input{flex:1}
.btn-save{
  border:0;border-radius:9px;padding:0 14px;background:#37453F;color:var(--paper-soft);
  font-weight:600;font-size:12.5px;cursor:pointer;
}
.btn-save:hover{background:#425149}
.worker-status{display:block;margin-top:7px;color:#8FCBA8;font-size:11.5px;min-height:14px}
.worker-hint{font-size:11px;color:#8B968F;margin:2px 0 0;line-height:1.5}

/* ---------- canvas (right) ---------- */
.canvas{padding:38px clamp(20px,4vw,58px) 60px;max-width:980px}
.canvas-topline{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:30px;gap:16px;flex-wrap:wrap}
.canvas-topline h1{font-size:26px;font-weight:500;margin:0;letter-spacing:-.01em}
.canvas-topline .status-chip{font-size:12px;color:var(--pine-deep);display:flex;align-items:center;gap:7px}
.status-chip i{width:7px;height:7px;border-radius:50%;background:var(--pine);display:inline-block}

.canvas-state{display:block}
.hidden{display:none!important}

/* empty state: a mocked page, not marketing copy */
.mock-page{
  background:var(--paper-soft);border:1px solid var(--rule);border-radius:3px 3px 10px 10px;
  padding:34px 34px 40px;box-shadow:0 18px 40px -22px rgba(30,42,40,.35);
  max-width:520px;
}
.mock-page .mock-title{height:22px;width:72%;background:var(--rule-soft);border-radius:3px;margin-bottom:14px}
.mock-page .mock-line{height:10px;background:var(--rule-soft);border-radius:2px;margin:9px 0}
.mock-page .mock-line.w1{width:96%}.mock-page .mock-line.w2{width:88%}.mock-page .mock-line.w3{width:64%}
.mock-page .mock-image{height:130px;background:repeating-linear-gradient(135deg,var(--rule-soft),var(--rule-soft) 10px,var(--paper) 10px,var(--paper) 20px);border-radius:6px;margin:18px 0}
.empty-caption{max-width:480px;margin-top:22px}
.empty-caption h3{font-size:19px;margin:0 0 8px;font-weight:500}
.empty-caption p{font-size:14px;color:var(--ink-soft);margin:0;max-width:420px}

/* loading */
.loading-wrap{max-width:420px;padding-top:10px}
.loading-wrap h3{font-size:18px;font-weight:500;margin:0 0 14px}
.stack{position:relative;height:64px;width:64px;margin-bottom:8px}
.stack span{
  position:absolute;inset:0;border:3px solid var(--rule);border-top-color:var(--pine);
  border-radius:50%;animation:turn 1s linear infinite;
}
@keyframes turn{to{transform:rotate(360deg)}}
.progress-label{font-size:13px;color:var(--ink-soft);margin:16px 0 8px}
.progress-track{width:280px;height:6px;background:var(--rule-soft);border-radius:20px;overflow:hidden}
.progress-fill{display:block;height:100%;width:8%;background:var(--pine);transition:width .5s ease}

/* results head + filmstrip */
.results-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.results-head strong{font-size:15px;font-weight:600}
.results-head small{display:block;color:var(--ink-soft);font-size:12.5px;margin-top:2px}
.btn-ghost{border:1px solid var(--rule);background:transparent;color:var(--ink);border-radius:9px;padding:9px 13px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.btn-ghost:hover{background:var(--paper-soft)}

.filmstrip{display:flex;gap:18px;overflow-x:auto;padding:6px 6px 20px}
.page-card{
  flex:0 0 200px;aspect-ratio:3/4;border-radius:4px 4px 12px 12px;cursor:pointer;
  padding:20px;display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:0 14px 26px -16px rgba(20,25,24,.45);
  transition:transform .18s ease, box-shadow .18s ease;
  position:relative;
}
.page-card:nth-child(odd){transform:rotate(-1.1deg)}
.page-card:nth-child(even){transform:rotate(1.1deg)}
.page-card:hover{transform:translateY(-4px) rotate(0deg)}
.page-card.selected{transform:translateY(-6px) rotate(0deg);box-shadow:0 20px 34px -16px rgba(20,25,24,.55);outline:2px solid var(--ink);outline-offset:2px}
.page-card small{font-size:10.5px;letter-spacing:.06em;opacity:.75;font-weight:600}
.page-card h3{font-size:19px;line-height:1.15;margin:8px 0 0;font-weight:500}
.page-card-body{background:var(--paper-soft);margin:0 -20px -20px;padding:13px 16px;border-radius:0 0 12px 12px}
.page-card-body b{font-size:13px;display:block}
.page-card-body p{font-size:11.5px;color:var(--ink-soft);margin:4px 0 0;line-height:1.45}

/* lesson (rendered like an open printed page) */
.lesson-wrap{margin-top:8px}
.lesson-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.lesson-toolbar span{font-size:13px;color:var(--ink-soft)}
.lesson-actions{display:flex;gap:10px}
.btn-pdf{
  border:0;border-radius:9px;padding:11px 16px;background:var(--ink);color:var(--paper-soft);
  font-weight:700;font-size:13.5px;cursor:pointer;
}
.btn-pdf:hover{background:#2b3a37}
.btn-pdf:disabled{opacity:.6;cursor:wait}

#courseView{
  background:var(--paper-soft);border:1px solid var(--rule);border-radius:4px 4px 16px 16px;
  padding:clamp(28px,5vw,56px);box-shadow:0 20px 44px -28px rgba(20,25,24,.4);
}
.running-head{font-size:11px;letter-spacing:.08em;color:var(--pine-deep);font-weight:700;margin:0 0 18px}
.course-head h2{font-size:clamp(26px,4vw,36px);margin:0 0 6px;line-height:1.1;letter-spacing:-.01em;font-weight:500}
.course-subtitle{color:var(--ink-soft);font-size:15px;margin:0 0 22px}
.course-intro{font-size:16px;max-width:64ch}
.course-intro::first-letter{font-family:"Bricolage Grotesque",sans-serif;font-size:3.1em;float:left;line-height:.85;padding:4px 8px 0 0;color:var(--pine-deep)}
.course-view h4{margin:30px 0 10px;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--pine-deep);font-weight:700}
.course-view ul{margin:6px 0;padding-left:20px;max-width:64ch}
.course-view li{margin:5px 0}
.course-section{margin:26px 0;padding-top:22px;border-top:1px solid var(--rule)}
.course-section h3{margin:0 0 10px;font-size:20px;font-weight:500;max-width:64ch}
.course-section p{max-width:64ch}
.course-example{
  background:var(--paper);border-left:3px solid var(--ochre);border-radius:0 8px 8px 0;
  padding:12px 16px;font-size:14px;margin-top:12px;max-width:64ch;
}
.margin-note{
  background:var(--ink);color:var(--paper-soft);border-radius:10px;padding:16px 18px;
  margin:22px 0;max-width:64ch;
}
.margin-note h4{color:var(--ochre-bright);margin:0 0 8px}
.margin-note ul{margin:0}
.course-image{margin:0 0 18px}
.course-image img{width:100%;max-height:260px;object-fit:cover;border-radius:8px;display:block}
.team-line{font-size:12px;color:var(--ink-soft);margin:0 0 14px;padding:10px 12px;border:1px solid var(--rule);border-radius:10px;background:var(--paper-soft)}
.team-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.team-chips .chip{border-radius:999px;padding:4px 10px;font-size:11.5px;border:1px solid var(--rule);background:#fff}
.team-chips .chip.ok{border-color:#7FB29F}
.team-chips .chip.ko{border-color:#C98A8A;color:var(--danger)}
.team-chips .chip.off{opacity:.55}
.subject-box{background:var(--paper-soft);border:1px dashed var(--rule);border-left:4px solid var(--lesson-accent,var(--ochre));border-radius:8px;padding:12px 16px;margin:0 0 20px}
.subject-box h4{margin:0 0 6px!important}
.subject-box p{margin:0 0 6px}
.mode-switch{display:flex;gap:6px;background:#ffffff14;padding:4px;border-radius:11px;margin-bottom:6px}
.mode-switch button{flex:1;border:0;background:transparent;color:#C7D0CA;font:inherit;font-size:13px;font-weight:700;padding:9px 10px;border-radius:8px;cursor:pointer}
.mode-switch button.active{background:var(--ochre-bright);color:var(--ink)}
.field .upload-zone{display:flex;align-items:center;justify-content:center;text-align:center;gap:8px;border:1.5px dashed #ffffff55;border-radius:10px;padding:16px 12px;font-size:13.5px;font-weight:600;color:#fff;cursor:pointer;background:#ffffff0d}
.field .upload-zone:hover{border-color:var(--ochre-bright)}
.hw-preview{display:flex;align-items:center;gap:12px;margin-top:6px}
.hw-preview img{width:84px;height:84px;object-fit:cover;border-radius:8px;border:1px solid #ffffff44}
.hw-preview .btn-ghost{color:#fff;border-color:#ffffff55}
.course-image figcaption{font-size:11.5px;color:var(--ink-soft);margin-top:6px;font-style:italic}
.image-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-top:12px}
.image-gallery .course-image{margin:0}
.image-gallery .course-image img{height:120px;border-radius:8px}
.exercise-box{
  background:var(--pine-deep);color:var(--paper-soft);border-radius:12px;
  padding:18px 20px;margin-top:10px;max-width:64ch;
}
.exercise-box li{margin:6px 0}


/* --- v3 : couverture, exercices, corrigé, barre d'outils --- */
.lesson-toolbar{position:sticky;top:0;z-index:5;background:var(--paper);padding:12px 0;border-bottom:1px solid var(--rule);margin-bottom:18px}
.lesson-toolbar-info{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.switch{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-soft);cursor:pointer}
.switch input{width:16px;height:16px;accent-color:var(--pine)}
.lesson-actions{flex-wrap:wrap}
.btn-pdf.alt{background:var(--pine-deep)}
.btn-pdf.alt:hover{background:var(--pine)}
.demo-banner{background:#FFF3CD;border:1px solid #E3B027;color:#5b4300;border-radius:9px;padding:10px 14px;font-size:13px;margin-bottom:14px}
.print-hint{margin:-10px 0 16px;font-size:12px;color:var(--ink-soft)}

#courseView{--lesson-a:#1F4E42;--lesson-b:#2F6F5E;--lesson-accent:#C89100;--lesson-text:#fff}
.lesson-cover{
  background:linear-gradient(135deg,var(--lesson-a),var(--lesson-b));color:var(--lesson-text);
  border-radius:10px;padding:clamp(24px,4vw,40px);margin:-8px -8px 26px;
}
.cover-school{font-size:13px;font-weight:600;opacity:.85;margin:0 0 26px;min-height:1em}
.lesson-cover h2{font-size:clamp(28px,4.4vw,40px);margin:0 0 8px;line-height:1.1;font-weight:500;color:inherit}
.cover-sub{margin:0;font-size:15.5px;opacity:.9;max-width:52ch}
.cover-foot{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px;padding-top:14px;border-top:1px solid rgba(255,255,255,.35);font-size:13px}
.cover-foot b{font-weight:600}
.lesson-cover.cv-lateral,.lesson-cover.cv-classique,.lesson-cover.cv-geo{background:#fff;color:#1E2A28;box-shadow:inset 0 0 0 1px #0002}
.lesson-cover.cv-lateral{border-left:20px solid var(--lesson-a)}
.lesson-cover.cv-lateral h2,.lesson-cover.cv-geo h2{color:var(--lesson-a);font-weight:700}
.lesson-cover.cv-classique{border:4px double var(--lesson-a);text-align:center}
.lesson-cover.cv-classique h2{color:var(--lesson-a);border-top:3px solid var(--lesson-accent);border-bottom:3px solid var(--lesson-accent);padding:16px 0;margin:10px 0}
.lesson-cover.cv-classique .cover-sub{margin-left:auto;margin-right:auto}
.lesson-cover.cv-plein{background:var(--lesson-a);text-align:center;padding-top:clamp(50px,9vw,90px);padding-bottom:clamp(50px,9vw,90px)}
.lesson-cover.cv-plein h2{font-size:clamp(32px,5.4vw,50px);font-weight:700}
.lesson-cover.cv-plein .cover-sub{margin-left:auto;margin-right:auto}
.lesson-cover.cv-plein .cover-foot{justify-content:center}
.lesson-cover.cv-geo{position:relative;overflow:hidden}
.lesson-cover.cv-geo::after{content:"";position:absolute;right:-60px;top:-60px;width:190px;height:190px;border-radius:50%;background:var(--lesson-accent)}
.lesson-cover.cv-lateral .cover-foot,.lesson-cover.cv-classique .cover-foot,.lesson-cover.cv-geo .cover-foot{border-top-color:var(--lesson-accent)}
.lesson-cover.cv-classique .cover-foot{justify-content:center}
.course-head{margin:0}
#courseView .course-section{border-top-color:var(--lesson-accent)}
#courseView h4{color:var(--lesson-a)}
#courseView .margin-note{background:var(--lesson-a);color:var(--lesson-text)}
#courseView .margin-note h4{color:var(--lesson-text);opacity:.85}
#courseView .course-example{border-left-color:var(--lesson-accent)}
.course-section,.exercise,.ex-correction,.course-image,.margin-note{break-inside:avoid;page-break-inside:avoid}
.course-section p,.exercise p,.ex-correction p,.course-intro{margin:.7em 0}
.exercise{border:1px solid var(--rule);border-radius:10px;margin:14px 0;max-width:68ch;overflow:hidden;background:#fff8}
.ex-head{background:var(--lesson-a);color:var(--lesson-text);padding:9px 14px;font-size:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ex-head .badge{margin-left:auto;font-size:11.5px;background:rgba(255,255,255,.22);border-radius:20px;padding:2px 10px}
.ex-body{padding:4px 16px 10px;font-size:14.5px}
.teacher-only{display:none}
#courseView.teacher-mode .teacher-only{display:block}
.correction-section{page-break-before:always;break-before:page;margin-top:34px}
.ex-correction{border-left:4px solid var(--lesson-accent);background:var(--paper);border-radius:0 10px 10px 0;padding:8px 16px 8px;margin:14px 0;max-width:68ch;font-size:14.5px}
.ex-correction .ex-ct{font-weight:700;margin:6px 0 2px}
.teacher-tag{display:inline-block;font-size:11.5px;font-weight:700;background:var(--lesson-accent);color:#1E2A28;border-radius:20px;padding:2px 10px;margin-left:8px;vertical-align:middle}
@media print{
  .demo-banner{display:none!important}
  .lesson-cover,.ex-head,.margin-note,.exercise-box,.teacher-tag,.subject-box{-webkit-print-color-adjust:exact;print-color-adjust:exact;color-adjust:exact}
}

/* how it works */
.how-section{margin-top:56px}
.how-section h2{font-size:15px;font-weight:600;margin:0 0 18px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
.how{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.how>div{border-top:2px solid var(--pine);padding:14px 2px 0}
.how span{font-family:"Bricolage Grotesque",sans-serif;font-size:20px;color:var(--pine-deep)}
.how h3{margin:8px 0 5px;font-size:14.5px;font-weight:600}
.how p{margin:0;color:var(--ink-soft);font-size:12.5px;line-height:1.5}

footer{text-align:center;color:var(--ink-soft);font-size:12px;padding:26px;border-top:1px solid var(--rule)}

@media(max-width:900px){
  .app-shell{grid-template-columns:1fr}
  .atelier{position:relative;height:auto}
  .how{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .canvas{padding:26px 16px 46px}
  .two-col{grid-template-columns:1fr}
  .how{grid-template-columns:1fr}
  .page-card{flex:0 0 74vw}
}

@media print{
  @page{size:A4;margin:15mm 12mm}
  .atelier,.canvas-topline,.results-head,.filmstrip,.lesson-toolbar,.team-line,.print-hint,.how-section,footer{display:none!important}
  body{background:#fff}
  .app-shell{display:block}
  .canvas{padding:0}
  #courseView{background:transparent;box-shadow:none;border:0;border-radius:0;padding:0}
}
.course-image img{max-height:none!important}
.course-image{margin-left:auto;margin-right:auto}
.ed{outline:1px dashed #C89100aa;outline-offset:2px;border-radius:3px;white-space:pre-wrap;min-width:3ch}
div.ed{min-height:1.4em}
.ed:focus{outline:2px solid var(--pine);background:#fffbe6;color:#1E2A28}
.ed:empty::before{content:"(vide, touche pour écrire)";color:#999;font-style:italic}
.etool{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.xb,.etool button{font:600 12px "Atkinson Hyperlegible",sans-serif;border:1px solid var(--rule);background:#fff;color:#1E2A28;border-radius:8px;padding:5px 9px;cursor:pointer;margin-left:4px}
.dng{color:var(--danger)!important}
.eadd{display:block;width:100%;border-style:dashed;padding:11px;margin:14px 0 0}
.ehint{background:#fff3c4;border:1px solid var(--ochre);border-radius:8px;padding:8px 12px;font-size:13px;margin:0 0 14px}
@media print{.xb,.etool,.ehint{display:none!important}.ed{outline:0!important}}
.course-def{border-left:4px solid var(--lesson-accent,#C89100);background:#F4EFE6;padding:8px 12px;border-radius:0 8px 8px 0;margin:.9em 0;max-width:68ch;font-size:.97em;-webkit-print-color-adjust:exact;print-color-adjust:exact}
h5.sub{font-family:"Bricolage Grotesque","Atkinson Hyperlegible",sans-serif;font-size:16.5px;font-weight:600;margin:1.2em 0 .2em;color:var(--lesson-a,#1F4E42)}

/* ---------- identité « cahier d'écolier » : couverture bleue, papier quadrillé, stylo rouge ---------- */
body{font-size:16px}
h1,h2,h3,.display{font-weight:700;letter-spacing:-.015em}
.atelier{background:#14213D;background-image:linear-gradient(180deg,#14213D,#101B33)}
.mark-glyph{background:#fff;border-radius:4px;padding:2px;box-shadow:0 0 0 2px #E2483D}
.mark-name{letter-spacing:0}
.atelier .lede,.worker-connect{color:#B4BFDA}
.field label{color:#D5DCF0}
.field textarea,.field input,.field select{background:#1B2B52;border:1px solid #33497F;border-radius:4px}
.field textarea:focus,.field input:focus,.field select:focus{border-color:#fff;box-shadow:0 0 0 3px rgba(226,72,61,.45)}
.atelier hr{border-top-color:#2B3D6B}
.btn-generate{background:#E2483D;color:#fff;border-radius:4px;box-shadow:0 3px 0 #9E2A22;transition:transform .1s,box-shadow .1s}
.btn-generate:hover{background:#EA5A4F}
.btn-generate:active{transform:translateY(3px);box-shadow:0 0 0 #9E2A22}
.btn-save{background:#2B3D6B;border-radius:4px}.btn-save:hover{background:#364C82}
.worker-hint{color:#93A1C6}.worker-status{color:#9FD6B5}
.canvas{
  background-color:var(--paper);
  background-image:
    linear-gradient(90deg,transparent 15px,rgba(226,72,61,.5) 15px 17px,transparent 17px),
    repeating-linear-gradient(0deg,transparent 0 31px,var(--rule-soft) 31px 32px),
    repeating-linear-gradient(90deg,transparent 0 31px,#E8EDF9 31px 32px);
  padding-left:clamp(32px,5vw,70px);
}
.canvas-topline h1{font-size:28px}
.mock-page{border-radius:2px;box-shadow:none;border:1px solid var(--rule);background:#fff}
.mock-page .mock-line,.mock-page .mock-title{background:var(--rule-soft)}
.mock-page .mock-image{background:repeating-linear-gradient(135deg,var(--rule-soft),var(--rule-soft) 10px,#fff 10px,#fff 20px)}

.sheet-handle{display:none}
@media(max-width:900px){
  .app-shell{display:block}
  .canvas{min-height:100vh;max-width:none;padding-bottom:120px}
  .atelier{position:fixed;left:0;right:0;bottom:0;top:auto;height:86vh;z-index:50;border-radius:18px 18px 0 0;
    padding-top:0;gap:18px;transform:translateY(0);transition:transform .35s cubic-bezier(.2,.8,.2,1);
    box-shadow:0 -14px 40px rgba(10,18,40,.45);overscroll-behavior:contain}
  .atelier.collapsed{transform:translateY(calc(100% - 62px))}
  .sheet-handle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    position:sticky;top:0;z-index:2;margin:0 -26px;padding:10px 0 12px;border:0;background:#14213D;color:#D5DCF0;
    font:700 13px "Atkinson Hyperlegible",sans-serif;cursor:pointer;touch-action:none;flex:none;min-height:62px}
  .sheet-handle i{width:44px;height:5px;border-radius:3px;background:#E2483D}
  body.sheet-open::after{content:"";position:fixed;inset:0;background:rgba(10,18,40,.4);z-index:40;pointer-events:none}
}
@media(prefers-reduced-motion:reduce){.atelier{transition:none}}

#histBtn{margin-left:auto;cursor:pointer}
.hist{position:fixed;inset:0;z-index:80;background:rgba(10,18,40,.55);display:flex;align-items:flex-end;justify-content:center}
.hist.hidden{display:none}
.hist-card{background:#fff;width:100%;max-width:640px;max-height:86vh;overflow-y:auto;border-radius:18px 18px 0 0;padding:0 20px 24px;border-left:3px solid #E2483D}
.hist-head{position:sticky;top:0;background:#fff;display:flex;justify-content:space-between;align-items:center;padding:18px 0 12px;border-bottom:1px solid var(--rule)}
.hist-head h2{margin:0;font-size:21px}
.hist-row{display:flex;gap:10px;align-items:stretch;border-bottom:1px solid var(--rule-soft)}
.hist-open{flex:1;text-align:left;background:none;border:0;padding:14px 4px;cursor:pointer;font:inherit;color:inherit;min-width:0}
.hist-open b{display:block;font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-open small{color:var(--ink-soft);font-size:12.5px}
.hist-del{background:none;border:0;color:#8A2E2E;font-size:13px;cursor:pointer;padding:0 6px}
.hist-empty{padding:28px 4px;color:var(--ink-soft)}
@media(min-width:901px){.hist{align-items:center}.hist-card{border-radius:10px}}

.notice-bar{margin-top:14px;background:#FFF8E6;border:1px solid #F0DFA8;border-left:3px solid #D9A400;padding:10px 14px;font-size:13.5px;line-height:1.45;color:#5A4500}
.notice-bar p{margin:0 0 6px}.notice-bar p:last-child{margin:0}.notice-bar a{color:#8A5A00;font-weight:600}
.fiche{margin-top:26px;border:1px solid var(--rule);border-left:3px solid var(--ink,#1c3d5a);padding:6px 16px 14px;page-break-inside:auto}
.fiche h4{margin-top:12px}.fiche h5{margin:14px 0 6px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;opacity:.75}
.fiche-tl{list-style:none;margin:0;padding:0 0 0 12px;border-left:2px solid var(--rule)}
.fiche-tl li{display:flex;gap:10px;padding:4px 0;font-size:14px}.fiche-tl b{flex:0 0 88px}
.fiche ul{margin:0;padding-left:18px;font-size:14px}.fiche li{margin:3px 0}
.fiche blockquote{margin:3px 0 0;padding-left:10px;border-left:2px solid var(--rule);font-style:italic;opacity:.85}
.fiche dl{margin:0;font-size:14px}.fiche dt{font-weight:700;margin-top:5px}.fiche dd{margin:0 0 2px}
.fiche-note{font-size:12px;opacity:.7;margin:10px 0 0}
.video-space{margin-top:22px;background:#fff;border:1px solid var(--rule);border-left:3px solid #E2483D;padding:14px 14px 16px}
.video-space.hidden{display:none}
.video-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px}
.video-head strong{font-family:"Bricolage Grotesque",sans-serif;font-size:17px}
.video-head small{color:var(--ink-soft);font-size:12.5px}
.video-player{display:none;margin-bottom:12px}
.video-player.on{display:block}
.video-frame{position:relative;aspect-ratio:16/9;background:#000;border-radius:4px;overflow:hidden}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-now{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:8px;font-size:14px}
.video-now b{min-width:0}
.video-now a{white-space:nowrap;color:var(--pine);font-weight:700;font-size:13px}
.video-strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}
.video-card{flex:0 0 min(230px,70%);scroll-snap-align:start;text-align:left;background:none;border:1px solid var(--rule-soft);padding:0;cursor:pointer;font:inherit;color:inherit}
.video-card.active{border-color:#E2483D;box-shadow:0 0 0 2px rgba(226,72,61,.25)}
.video-thumb{position:relative;aspect-ratio:16/9;background:#14213D}
.video-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.video-thumb i{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(20,33,61,.82)}
.video-thumb i::after{content:"";position:absolute;left:18px;top:13px;border-left:15px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.video-thumb em{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.8);color:#fff;font-style:normal;font-size:11.5px;padding:1px 5px;border-radius:3px}
.video-meta{padding:8px 9px 10px}
.video-meta b{display:block;font-size:13.5px;line-height:1.3;max-height:2.6em;overflow:hidden}
.video-meta small{color:var(--ink-soft);font-size:12px}

/* ---------- mode projection (classe) ---------- */
.pr{--prbg:#FBFAF6;--prink:#1B2438;--prsoft:#5B6785;--prcard:#fff;--prtitle:var(--pa);position:fixed;inset:0;z-index:1000;background:var(--prbg);color:var(--prink);display:flex;flex-direction:column;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.pr.dark{--prbg:#0E1630;--prink:#F2F5FC;--prsoft:#A9B6D6;--prcard:#16224A;--prtitle:#fff}
.pr.hidden{display:none}
.pr.idle{cursor:none}.pr.idle .pr-bar{opacity:0;pointer-events:none}
.pr-prog{height:5px;flex:0 0 auto;background:rgba(127,127,127,.22)}.pr-prog i{display:block;height:100%;width:0;background:var(--pc);transition:width .25s}
.pr-stage{flex:1;min-height:0;display:flex;position:relative}
.pr-slide{flex:1;min-width:0;display:flex;flex-direction:column;padding:4vh 5vw 9vh;gap:2.4vh;animation:prin .28s ease-out}
@keyframes prin{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.pr-head{flex:0 0 auto;border-left:.7vw solid var(--pc);padding-left:1.6vw}
.pr-kick{font-size:max(12px,2.1vh);letter-spacing:.14em;text-transform:uppercase;color:var(--prsoft);font-weight:700}
.pr-head h2{margin:.18em 0 0;color:var(--prtitle);font-size:max(20px,min(6.2vh,4vw));line-height:1.12}
.pr-main{flex:1;min-height:0;display:flex;gap:3vw;align-items:center;overflow:hidden;line-height:1.38}
.pr-body{flex:1.2;min-width:0}
.pr-body p{margin:.55em 0}.pr-body h5{margin:.7em 0 .2em;font-size:1em;color:var(--prtitle);text-transform:uppercase;letter-spacing:.05em}
.pr-body .course-def{margin:.6em 0;padding:.5em .8em;border-left:.25em solid var(--pc);background:var(--prcard);border-radius:8px}
.pr-fig{flex:1;min-width:0;max-height:100%;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em}
.pr-fig img{max-width:100%;max-height:58vh;object-fit:contain;border-radius:12px;box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}
.pr-fig figcaption{font-size:.55em;color:var(--prsoft);text-align:center}
.pr-pts{list-style:none;padding:0;margin:.5em 0 0}
.pr-pts li{position:relative;padding-left:1.1em;margin:.5em 0}
.pr-pts li::before{content:"";position:absolute;left:0;top:.55em;width:.5em;height:.5em;border-radius:50%;background:var(--pc)}
.pr-step{opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}.pr-step.on{opacity:1;transform:none}
.pr-ex{margin-top:.8em;padding:.6em .9em;border-radius:10px;background:var(--prcard);border-left:.3em solid var(--pc)}
.pr-corr{margin-top:.8em;padding:.6em .9em;border-radius:10px;background:rgba(46,160,90,.14);border:2px solid rgba(46,160,90,.55);opacity:0;transform:translateY(6px);transition:.2s}
.pr-slide.corr .pr-corr{opacity:1;transform:none}
.pr-corr b{display:block;font-size:.6em;letter-spacing:.1em;text-transform:uppercase;color:#2E8B57}
.pr-slide.pr-cover{background:linear-gradient(135deg,var(--pa),var(--pb));color:var(--ptext);align-items:center;justify-content:center;text-align:center;padding:5vh 7vw}
.pr-cover .pr-main{flex:0 1 auto;flex-direction:column;justify-content:center;max-height:100%;gap:0}
.pr-cover h1{font-size:2em;line-height:1.1;margin:.2em 0}
.pr-cover .pr-sub{font-size:.8em;opacity:.9;margin:.3em 0}
.pr-cover .pr-meta{margin-top:1em;font-size:.55em;opacity:.9;line-height:1.7}
.pr-cover .pr-kick{color:inherit;opacity:.8}
.pr-bar{position:absolute;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:2px;align-items:center;padding:5px;border-radius:14px;background:rgba(20,33,61,.95);color:#fff;max-width:96vw;overflow-x:auto;z-index:5;transition:opacity .25s;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.pr-bar button{flex:0 0 auto;min-width:38px;height:38px;border:0;border-radius:9px;background:transparent;color:#fff;font-size:15px;padding:0 8px;cursor:pointer;white-space:nowrap}
.pr-bar button:hover,.pr-bar button:focus-visible{background:rgba(255,255,255,.16)}
.pr-bar button.on{background:#E2483D}
.pr-count{flex:0 0 auto;font-size:13px;padding:0 6px;min-width:56px;text-align:center;white-space:nowrap}
.pr-outline{position:absolute;top:5px;bottom:0;left:0;width:min(88vw,380px);background:var(--prcard);color:var(--prink);box-shadow:8px 0 30px rgba(0,0,0,.35);overflow:auto;z-index:6;padding:10px}
.pr-outline button{display:flex;gap:10px;width:100%;text-align:left;border:0;background:transparent;color:inherit;font:inherit;font-size:14px;padding:9px 8px;border-radius:8px;cursor:pointer}
.pr-outline button:hover{background:rgba(127,127,127,.15)}.pr-outline button.cur{background:var(--pc);color:#fff}
.pr-outline b{flex:0 0 28px;opacity:.7}
.pr-vid{position:absolute;inset:5px 0 0 0;background:#000;z-index:7;display:flex;flex-direction:column;color:#fff}
.pr-vid header{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#14213D}
.pr-vid header button{border:0;border-radius:8px;background:rgba(255,255,255,.14);color:#fff;font:inherit;padding:8px 12px;cursor:pointer}
.pr-vid iframe{flex:1;border:0;width:100%}
.pr-vgrid{flex:1;overflow:auto;padding:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;align-content:start}
.pr-vgrid button{border:0;background:#14213D;color:#fff;border-radius:10px;overflow:hidden;text-align:left;font:inherit;font-size:13px;cursor:pointer;padding:0}
.pr-vgrid img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}.pr-vgrid span{display:block;padding:8px 10px}
.pr-toast{position:absolute;left:50%;bottom:78px;transform:translateX(-50%);z-index:8;background:#14213D;color:#fff;padding:9px 12px;border-radius:12px;font-size:14px;display:flex;gap:10px;align-items:center;box-shadow:0 8px 24px rgba(0,0,0,.4);max-width:92vw}
.pr-toast button{border:0;border-radius:8px;background:#E2483D;color:#fff;padding:6px 10px;font:inherit;cursor:pointer}
.pr-black{position:absolute;inset:0;background:#000;z-index:9}
@media(orientation:portrait){.pr-main{flex-direction:column}.pr-fig img{max-height:32vh}.pr-slide{padding:3vh 5vw 11vh}}
@media(prefers-reduced-motion:reduce){.pr-slide{animation:none}.pr-step{transition:none}}
/* mini-lecteur flottant : déplaçable, redimensionnable, réductible en bulle */
.video-slot{position:relative;aspect-ratio:16/9;background:#0b1226;border-radius:4px}
.video-slot .video-frame{position:absolute;inset:0;aspect-ratio:auto}
.video-slot.is-floating::after{content:"▶ Lecture dans le mini-lecteur";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9fb0d8;font-size:13px;letter-spacing:.02em}
.vf-bar,.vf-rz,.vf-mini,.vf-hint{display:none}
.video-slot .video-frame.vf{--vw:240px;position:fixed;inset:auto;z-index:60;width:var(--vw);height:calc(var(--vw)*9/16 + 30px);border-radius:10px;box-shadow:0 14px 34px -8px rgba(8,14,34,.6),0 0 0 1px rgba(255,255,255,.12);animation:vfin .2s ease-out}
.video-slot .video-frame.vf.snap{transition:left .2s ease,top .2s ease}
.video-slot .video-frame.vf.dragging{animation:none;box-shadow:0 18px 40px -6px rgba(8,14,34,.7),0 0 0 2px #E2483D}
.vf.dragging iframe{pointer-events:none}
.vf .vf-bar{display:flex;align-items:center;gap:2px;position:absolute;left:0;right:0;top:0;height:30px;padding:0 3px 0 9px;background:#14213D;color:#D5DCF0;font-size:12px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;z-index:4}
.vf.dragging .vf-bar{cursor:grabbing}
.vf-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vf-bar button{flex:0 0 auto;width:25px;height:26px;border:0;border-radius:6px;background:transparent;color:#fff;font-size:14px;line-height:1;cursor:pointer;padding:0}
.vf-bar button:hover,.vf-bar button:focus-visible{background:rgba(255,255,255,.16)}
.vf-bar:focus-visible{outline:2px solid #E2483D;outline-offset:-2px}
.vf iframe{top:30px;height:calc(100% - 30px)}
.vf .vf-rz{display:block;position:absolute;z-index:3;touch-action:none}
.vf-rz.l,.vf-rz.r{top:30px;bottom:0;width:14px}
.vf-rz.l{left:0;cursor:ew-resize}.vf-rz.r{right:0;cursor:ew-resize}
.vf-rz.b{left:14px;right:14px;bottom:0;height:12px;cursor:ns-resize}
.vf-rz::after{content:"";position:absolute;border-radius:3px;background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(0,0,0,.4);opacity:.7}
.vf-rz.l::after{left:3px;top:50%;width:4px;height:34px;margin-top:-17px}
.vf-rz.r::after{right:3px;top:50%;width:4px;height:34px;margin-top:-17px}
.vf-rz.b::after{bottom:3px;left:50%;height:4px;width:34px;margin-left:-17px}
.vf.dragging .vf-rz::after{opacity:1;background:#E2483D}
/* bulle : la vidéo continue (son), l'image disparaît */
.video-slot .video-frame.vf.mini{width:60px;height:60px;border-radius:50%;background:#14213D;cursor:grab;touch-action:none;box-shadow:0 10px 24px -6px rgba(8,14,34,.6),0 0 0 2px #E2483D}
.vf.mini .vf-bar,.vf.mini .vf-rz,.vf.mini .vf-hint{display:none}
.vf.mini iframe{top:0;left:0;width:160px;height:90px;opacity:.02;pointer-events:none}
.vf.mini .vf-mini{display:flex;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#fff;font-size:20px;line-height:1;z-index:5;user-select:none;-webkit-user-select:none}
.vf-mini small{font-size:9px;color:#9fb0d8;letter-spacing:.03em}
.vf.hint:not(.mini) .vf-hint{display:block;position:absolute;left:6px;right:6px;bottom:20px;z-index:6;padding:5px 8px;border-radius:6px;background:rgba(11,18,38,.88);color:#fff;font-size:11px;line-height:1.35;text-align:center;pointer-events:none}
@keyframes vfin{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.video-slot .video-frame.vf,.video-slot .video-frame.vf.snap{animation:none;transition:none}}


/* sauvegarde / restauration */
.hist-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 12px}
.hist-tools small{flex-basis:100%;opacity:.7;font-size:12px}
.hist-tools small.warn{color:#B45309;opacity:1}

/* ---------- Sources libres ---------- */
.free-src{margin:0 0 16px;padding:12px 14px;border:1px solid var(--rule);border-radius:12px;background:var(--paper-soft)}
.fs-head{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin-bottom:10px}.fs-head small{color:var(--ink-soft);font-size:12px}
.fs-actions{display:flex;flex-wrap:wrap;gap:8px}
.fs-row{display:flex;gap:8px;margin-top:12px}.fs-row input{flex:1;min-width:0;border:1px solid var(--rule);border-radius:9px;padding:9px 11px;font:inherit;font-size:14px;background:#fff;color:var(--ink)}
.fs-h{margin:14px 0 4px;font-size:13px;color:var(--pine-deep)}
.fs-item{display:flex;align-items:flex-start;gap:9px;padding:7px 2px;border-bottom:1px solid var(--rule-soft);font-size:13.5px;line-height:1.35;cursor:pointer}
.fs-item input{margin-top:3px;flex:none}.fs-item span{flex:1;min-width:0}.fs-item small{display:block;color:var(--ink-soft);font-size:12px;margin-top:1px}
.fs-item a{flex:none;color:var(--pine);font-weight:700;text-decoration:none;padding:0 4px}
.fs-none{margin:6px 0;font-size:12.5px;color:var(--ink-soft)}
.fs-add{margin-top:12px}
.fs-status{margin:8px 0 0;min-height:1em;font-size:12.5px;color:var(--ink-soft)}
.fs-checks{margin:6px 0;padding-left:18px;font-size:13.5px;line-height:1.45}
.course-image figcaption{font-size:11.5px}
@media print{.free-src{display:none!important}}
.mark-name.calli{font-size:26px;font-weight:700;line-height:1.05;letter-spacing:0;color:#1F3FA8}

/* ---------- accessibilité : navigation au clavier ---------- */
.skip-link{position:absolute;left:12px;top:-60px;z-index:10000;background:#14213D;color:#fff;padding:10px 16px;border-radius:0 0 10px 10px;font-weight:700;text-decoration:none;transition:top .15s}
.skip-link:focus{top:0;outline:3px solid #F5B301;outline-offset:2px}
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid #F5B301;outline-offset:2px}
.page-card:focus-visible{outline-offset:3px}
#main:focus{outline:none}
@media(prefers-reduced-motion:reduce){.skip-link{transition:none}}

/* ---------- zone vide : photo de classe à la place du motif hachuré ---------- */
.mock-page .mock-image{height:auto;padding:0;overflow:hidden;border-radius:8px;background:var(--rule-soft);box-shadow:0 8px 22px rgba(20,33,61,.18)}
.mock-page .mock-image img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}

/* ---------- tableaux (écrits en Markdown par l'IA, tracés en vrais tableaux) ---------- */
.md-table-wrap{overflow-x:auto;margin:12px 0;-webkit-overflow-scrolling:touch}
.md-table{border-collapse:collapse;width:100%;font-size:.92em;line-height:1.4}
.md-table th,.md-table td{border:1px solid rgba(120,130,150,.5);padding:7px 10px;vertical-align:top;text-align:left}
.md-table th{background:rgba(120,130,150,.18);font-weight:700}
.md-table tbody tr:nth-child(even) td{background:rgba(120,130,150,.07)}
@media print{.md-table-wrap{overflow:visible;break-inside:avoid}.md-table th,.md-table td{border-color:#8a8f98}}