/* Layout : appli mobile à onglets, posée sur une copie à petits carreaux. Encre bleue pour l'action, surligneur jaune pour l'essentiel, stylo rouge pour la correction. */
:root{
  --paper:#F4F6FB; --surface:#FFFFFF; --surface-2:#ECEFF8; --ink:#141830; --muted:#566080; --line:#D7DCEB;
  --grid:rgba(33,64,200,.07); --encre:#2140C8; --on-encre:#FFFFFF; --encre-soft:#E2E7FB;
  --fluo:#F2DE45; --fluo-ink:#1B1A05; --rouge:#CF3A31; --vert:#1B8253; --marge:rgba(207,58,49,.45);
  --shadow:0 1px 2px rgba(20,24,48,.06),0 6px 20px rgba(20,24,48,.06);
  --f-display:"Bricolage Grotesque Variable","Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-hand:"Caveat","Bradley Hand","Segoe Print",cursive;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0D1121; --surface:#161B30; --surface-2:#1E2440; --ink:#E8EBF8; --muted:#9AA2C4; --line:#2A3152;
    --grid:rgba(142,162,255,.06); --encre:#8FA3FF; --on-encre:#0D1121; --encre-soft:#1E2852;
    --fluo:#E4D24B; --fluo-ink:#1B1A05; --rouge:#FF7C72; --vert:#58D199; --marge:rgba(255,124,114,.35);
    --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0D1121; --surface:#161B30; --surface-2:#1E2440; --ink:#E8EBF8; --muted:#9AA2C4; --line:#2A3152;
  --grid:rgba(142,162,255,.06); --encre:#8FA3FF; --on-encre:#0D1121; --encre-soft:#1E2852;
  --fluo:#E4D24B; --fluo-ink:#1B1A05; --rouge:#FF7C72; --vert:#58D199; --marge:rgba(255,124,114,.35);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
  color-scheme:dark;
}
html{height:100%;box-sizing:border-box}
*,*::before,*::after{box-sizing:border-box}
body{height:100%;margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--encre);outline-offset:2px;border-radius:6px}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;letter-spacing:-.01em}
p{margin:0}
.app{height:100%;display:flex;flex-direction:column;max-width:100%}
/* En-tête */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:20px;letter-spacing:-.02em}
.logo{width:28px;height:28px;border-radius:7px;background:var(--encre);position:relative;overflow:hidden;flex:none}
.logo::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px);background-size:7px 7px}
.logo::after{content:"";position:absolute;left:5px;top:0;bottom:0;width:2px;background:var(--fluo)}
.stats-mini{display:flex;gap:8px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:var(--surface-2);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pill svg{width:15px;height:15px}
.pill.flame{color:var(--rouge)}
/* Zone principale */
main{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:22px 22px}
main.fill{overflow:hidden}
.view{max-width:720px;margin:0 auto;padding-block:18px 32px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:22px}
.eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.h1{font-size:clamp(26px,7vw,34px);line-height:1.08;font-weight:800}
.h2{font-size:19px;font-weight:800}
.hand{font-family:var(--f-hand);font-weight:600}
.fluo{background:linear-gradient(transparent 52%,var(--fluo) 52%,var(--fluo) 92%,transparent 92%);color:inherit;padding:0 .08em}
.muted{color:var(--muted)}
.small{font-size:14px}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:12px;background:var(--encre);color:var(--on-encre);font-weight:700;min-height:44px;transition:transform .12s}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px;flex:none}
.btn.ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--line)}
.btn.soft{background:var(--encre-soft);color:var(--encre)}
.btn.sm{padding:7px 12px;min-height:36px;font-size:14px;border-radius:10px}
.btn.wide{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.icon-btn{width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
.icon-btn svg{width:20px;height:20px}
.icon-btn:hover{background:var(--surface-2)}
/* Grande action photo */
.cta{display:flex;align-items:center;gap:14px;text-align:left;padding:16px;border-radius:18px;background:var(--encre);color:var(--on-encre);box-shadow:var(--shadow);width:100%}
.cta .ic{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}
.cta .ic svg{width:28px;height:28px}
.cta b{display:block;font-family:var(--f-display);font-size:19px;line-height:1.15}
.cta small{display:block;opacity:.85;font-size:14px;margin-top:3px}
.cta.alt{background:var(--surface);color:var(--ink);border:1.5px dashed var(--line);box-shadow:none;padding:12px 16px}
.cta.alt .ic{background:var(--encre-soft);color:var(--encre);width:40px;height:40px;border-radius:11px}
.cta.alt .ic svg{width:22px;height:22px}
.cta.alt b{font-size:16px}
/* Tâches */
.tasks{display:flex;flex-direction:column;background:var(--surface);border-radius:16px;border:1px solid var(--line);overflow:hidden}
.task{display:flex;align-items:stretch;border-top:1px solid var(--line)}
.task:first-child{border-top:0}
.tick{width:52px;flex:none;display:grid;place-items:center}
.tick span{width:24px;height:24px;border-radius:7px;border:2px solid var(--line);display:grid;place-items:center;color:transparent;transition:background .15s}
.tick svg{width:16px;height:16px}
.task.done .tick span{background:var(--vert);border-color:var(--vert);color:#fff}
.task-main{flex:1;min-width:0;text-align:left;padding:12px 14px 12px 0;display:flex;gap:10px;align-items:center}
.task-main .tx{min-width:0}
.task-main b{font-weight:700}
.task-main small{display:block;color:var(--muted);font-size:13px}
.task.done .task-main b{text-decoration:line-through;text-decoration-color:var(--rouge);text-decoration-thickness:2px;color:var(--muted)}
.kind{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 7px;border-radius:6px;background:var(--surface-2);color:var(--muted);flex:none}
.empty{padding:18px;border-radius:16px;border:1.5px dashed var(--line);background:var(--surface);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
/* Matières */
.subj{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:999px;background:var(--s);color:#fff;white-space:nowrap}
.dot{width:10px;height:10px;border-radius:50%;background:var(--s);flex:none}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;margin-right:calc(-1 * max(16px,env(safe-area-inset-right,0px)))}
.chips::-webkit-scrollbar{display:none}
.chip{padding:7px 13px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);font-size:14px;font-weight:700;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* Cartes de cours */
.courses{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.ccard{display:flex;gap:12px;align-items:center;text-align:left;padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line);min-width:0}
.ccard .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.ccard h3{font-size:17px;line-height:1.2;font-weight:800}
.ccard small{color:var(--muted);font-size:13px}
.ring{width:44px;height:44px;flex:none}
.ring text{font:700 11px var(--f-body);fill:var(--ink)}
.hscroll{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin-right:calc(-1 * max(16px,env(safe-area-inset-right,0px)));scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.hscroll .ccard{flex:0 0 min(78%,300px);scroll-snap-align:start}
.tag-ex{font-family:var(--f-hand);font-size:17px;color:var(--rouge);line-height:1}
/* Stats */
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.stat b{font-family:var(--f-display);font-size:24px;font-variant-numeric:tabular-nums;line-height:1.1}
.stat span{font-size:12px;color:var(--muted)}
/* Vue cours */
.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:700;font-size:14px;align-self:flex-start;padding:6px 0}
.back svg{width:18px;height:18px}
.course-head{display:flex;flex-direction:column;gap:8px}
.seg{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface-2);border-radius:12px;padding:4px;gap:4px;position:sticky;top:0;z-index:5}
.seg button{padding:9px 4px;border-radius:9px;font-weight:700;font-size:14px;color:var(--muted)}
.seg button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
/* Fiche : copie double avec marge rouge */
.fiche{position:relative;background:var(--surface);border-radius:6px 16px 16px 6px;padding-block:20px 24px;padding-left:44px;padding-right:18px;box-shadow:var(--shadow);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:22px 22px;display:flex;flex-direction:column;gap:18px}
.fiche::before{content:"";position:absolute;left:30px;top:0;bottom:0;width:2px;background:var(--marge)}
.fiche .intro{font-size:16px}
.fiche h3{font-size:18px;font-weight:800;display:flex;gap:10px;align-items:baseline}
.fiche h3 .num{font-family:var(--f-hand);font-size:24px;color:var(--rouge);flex:none;min-width:24px}
.fiche ul{margin:8px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:5px}
.fiche li{max-width:62ch}
.defs{border:1.5px solid var(--ink);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.defs dt{font-weight:700}
.defs dd{margin:0 0 4px;color:var(--muted)}
.retenir{display:flex;flex-direction:column;gap:6px}
.retenir .lbl{font-family:var(--f-hand);font-size:24px;color:var(--rouge);transform:rotate(-2deg);align-self:flex-start}
.retenir p{font-weight:700}
.retenir p mark{background:var(--fluo);color:var(--fluo-ink);padding:1px 4px;border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* Flashcards */
.fc-wrap{display:flex;flex-direction:column;gap:14px;align-items:stretch}
.fc{perspective:1200px;height:260px;width:100%}
.fc-in{position:relative;width:100%;height:100%;transition:transform .45s;transform-style:preserve-3d}
.fc.flip .fc-in{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:18px;padding:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:10px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);overflow:auto}
.fc-face.back{transform:rotateY(180deg);background:var(--encre);color:var(--on-encre);border-color:transparent}
.fc-face .q{font-family:var(--f-display);font-size:22px;font-weight:800;line-height:1.2}
.fc-face .a{font-size:19px;font-weight:700;line-height:1.35}
.fc-face .hint{font-size:13px;color:var(--muted)}
.fc-face.back .hint{color:inherit;opacity:.75}
.boxes{display:flex;gap:6px;justify-content:center}
.boxes span{flex:1;max-width:70px;text-align:center;font-size:12px;padding:6px 4px;border-radius:8px;background:var(--surface);border:1px solid var(--line);font-variant-numeric:tabular-nums}
.boxes span b{display:block;font-size:16px}
.fc-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn.no{background:var(--surface);color:var(--rouge);border:1.5px solid var(--rouge)}
.btn.yes{background:var(--vert);color:#fff}
/* Quiz */
.quiz{display:flex;flex-direction:column;gap:14px}
.qprog{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.qprog i{display:block;height:100%;background:var(--encre);transition:width .3s}
.qtext{font-family:var(--f-display);font-size:21px;font-weight:800;line-height:1.25}
.choices{display:flex;flex-direction:column;gap:10px}
.choice{text-align:left;padding:14px 16px;border-radius:14px;background:var(--surface);border:1.5px solid var(--line);font-weight:700;display:flex;gap:12px;align-items:center}
.choice .l{width:28px;height:28px;border-radius:8px;background:var(--surface-2);display:grid;place-items:center;font-size:13px;flex:none}
.choice.ok{border-color:var(--vert);background:color-mix(in srgb,var(--vert) 12%,var(--surface))}
.choice.ok .l{background:var(--vert);color:#fff}
.choice.ko{border-color:var(--rouge);background:color-mix(in srgb,var(--rouge) 10%,var(--surface))}
.choice.ko .l{background:var(--rouge);color:#fff}
.why{padding:12px 14px;border-radius:12px;background:var(--surface);border-left:3px solid var(--rouge);font-size:15px}
.why .hand{color:var(--rouge);font-size:21px;display:block;line-height:1}
.note{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 16px;background:var(--surface);border-radius:18px;border:1px solid var(--line);text-align:center}
.note .score{font-family:var(--f-hand);font-size:72px;line-height:.9;color:var(--rouge);transform:rotate(-4deg)}
.note .score small{font-size:34px}
.note .mention{font-family:var(--f-display);font-weight:800;font-size:20px}
/* Podcast */
.pod-card{display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:18px;background:var(--ink);color:var(--paper)}
.pod-card .meta{display:flex;align-items:center;gap:12px}
.hosts{display:flex}
.hosts span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;border:2px solid var(--ink)}
.hosts span:first-child{background:var(--fluo);color:var(--fluo-ink)}
.hosts span:last-child{background:var(--encre);color:var(--on-encre);margin-left:-10px}
.pod-ctrl{display:flex;align-items:center;gap:12px}
.play{width:56px;height:56px;border-radius:50%;background:var(--paper);color:var(--ink);display:grid;place-items:center;flex:none}
.play svg{width:24px;height:24px}
.wave{flex:1;display:flex;gap:3px;align-items:center;height:32px;min-width:0;overflow:hidden}
.wave i{flex:1;min-width:2px;background:currentColor;opacity:.35;border-radius:2px;height:30%}
.pod-card.on .wave i{animation:wv 1s ease-in-out infinite;opacity:.8}
@keyframes wv{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1.6)}}
.speed{padding:6px 10px;border-radius:8px;border:1.5px solid currentColor;font-weight:700;font-size:13px;opacity:.85}
.lines{display:flex;flex-direction:column;gap:8px}
.line{text-align:left;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);display:flex;gap:10px}
.line .who{font-weight:700;font-size:13px;flex:none;width:42px;color:var(--muted)}
.line.cur{border-color:var(--encre);box-shadow:0 0 0 2px var(--encre-soft)}
.line.cur .who{color:var(--encre)}
/* Planning */
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.day{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-variant-numeric:tabular-nums;position:relative;min-width:0}
.day small{font-size:11px;color:var(--muted);text-transform:uppercase;font-weight:700}
.day b{font-family:var(--f-display);font-size:20px;line-height:1.1}
.day .n{font-size:11px;color:var(--muted)}
.day[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.day[aria-pressed="true"] small,.day[aria-pressed="true"] .n{color:inherit;opacity:.75}
.day .exam{position:absolute;top:-6px;right:-3px;background:var(--rouge);color:#fff;font-size:10px;font-weight:700;padding:1px 5px;border-radius:6px}
.exams{display:flex;flex-direction:column;gap:8px}
.exam-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.exam-row .tx{flex:1;min-width:0}
.exam-row small{color:var(--muted);font-size:13px}
.jn{font-family:var(--f-hand);font-size:28px;color:var(--rouge);line-height:1;flex:none;font-variant-numeric:tabular-nums}
/* Formulaires */
.field{display:flex;flex-direction:column;gap:6px}
.field label,.lbl-s{font-size:13px;font-weight:700;color:var(--muted)}
.input,select.input,textarea.input{width:100%;padding:11px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);min-height:44px}
textarea.input{resize:vertical;min-height:90px}
.check{display:flex;gap:10px;align-items:center;padding:8px 0}
.check input{width:20px;height:20px;accent-color:var(--encre)}
/* Feuille modale */
.scrim{position:fixed;inset:0;background:rgba(8,10,22,.5);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--surface);width:100%;max-width:560px;max-height:90%;overflow-y:auto;border-radius:22px 22px 0 0;padding-block:12px calc(20px + env(safe-area-inset-bottom,0px));padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:16px;animation:up .22s ease-out}
.grab{width:40px;height:5px;border-radius:3px;background:var(--line);align-self:center}
@keyframes up{from{transform:translateY(30px);opacity:.4}to{transform:none;opacity:1}}
.tabs2{display:grid;grid-template-columns:1fr 1fr;background:var(--surface-2);border-radius:12px;padding:4px;gap:4px}
.tabs2 button{padding:9px;border-radius:9px;font-weight:700;color:var(--muted)}
.tabs2 button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.thumb{position:relative;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:var(--surface-2);max-width:100%}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb button{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center}
.thumb button svg{width:14px;height:14px}
.photo-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.photo-btns label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:18px 10px;border-radius:14px;border:1.5px dashed var(--line);font-weight:700;text-align:center;cursor:pointer;background:var(--paper)}
.photo-btns label svg{width:26px;height:26px;color:var(--encre)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.steps{display:flex;flex-direction:column;gap:10px;padding:6px 0}
.step{display:flex;gap:12px;align-items:center;color:var(--muted)}
.step i{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center}
.step.cur{color:var(--ink);font-weight:700}
.step.cur i{border-color:var(--encre);border-top-color:transparent;animation:spin .8s linear infinite}
.step.ok i{background:var(--vert);border-color:var(--vert)}
@keyframes spin{to{transform:rotate(360deg)}}
.err{padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--rouge) 10%,var(--surface));color:var(--ink);border:1.5px solid var(--rouge);font-size:15px}
.info{padding:12px 14px;border-radius:12px;background:var(--encre-soft);font-size:14px}
/* Onglets du bas */
.tabs{display:flex;justify-content:space-around;background:var(--surface);border-top:1px solid var(--line);padding-block:6px 4px;padding-left:max(6px,env(safe-area-inset-left,0px));padding-right:max(6px,env(safe-area-inset-right,0px))}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;font-size:11px;font-weight:700;color:var(--muted);border-radius:12px;max-width:96px}
.tab svg{width:24px;height:24px}
.tab[aria-current="page"]{color:var(--encre)}
.tab[aria-current="page"] svg{transform:translateY(-1px)}
/* Fil de vidéos */
.feed{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;background:#0A0C18}
.slide{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;color:#fff;background:var(--s);user-select:none;-webkit-user-select:none}
.slide-bg{position:absolute;inset:-60px;background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:30px 30px}
.slide.playing .slide-bg{animation:drift 22s linear infinite}
@keyframes drift{to{transform:translate(30px,60px)}}
.slide-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.55) 100%)}
.slide-mark{position:absolute;top:56px;left:max(18px,env(safe-area-inset-left,0px));font-family:var(--f-display);font-weight:800;font-size:clamp(70px,24vw,150px);line-height:.85;opacity:.12;letter-spacing:-.04em;white-space:nowrap;pointer-events:none}
.slide-prog{position:absolute;top:14px;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));height:3px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.slide-prog i{display:block;height:100%;width:0;background:#fff}
.slide-body{position:absolute;left:0;right:70px;bottom:0;padding-block:0 30px;padding-left:max(18px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.slide-body .subj{background:rgba(255,255,255,.18);backdrop-filter:blur(6px)}
.hook{font-family:var(--f-display);font-weight:800;font-size:clamp(28px,8.5vw,46px);line-height:1.02;text-wrap:balance;letter-spacing:-.02em}
.hook mark{background:var(--fluo-c,#F2DE45);color:#1B1A05;padding:0 .12em;border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.cap-text{font-size:19px;line-height:1.4;font-weight:700;max-width:34ch;text-shadow:0 1px 8px rgba(0,0,0,.25)}
.cap-text span{opacity:.22;transition:opacity .18s}
.cap-text span.on{opacity:1}
.slide-from{font-size:13px;opacity:.85}
.rail{position:absolute;right:max(12px,env(safe-area-inset-right,0px));bottom:30px;display:flex;flex-direction:column;gap:16px;align-items:center}
.rail button{display:flex;flex-direction:column;align-items:center;gap:3px;color:#fff;font-size:11px;font-weight:700}
.rail button span{width:48px;height:48px;border-radius:50%;background:rgba(0,0,0,.3);backdrop-filter:blur(6px);display:grid;place-items:center}
.rail button svg{width:24px;height:24px}
.rail button[aria-pressed="true"] span{background:#fff;color:#E0314B}
.paused{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.paused span{width:76px;height:76px;border-radius:50%;background:rgba(0,0,0,.35);display:grid;place-items:center}
.paused svg{width:34px;height:34px}
.slide.end{background:#141830;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.slide.end .btn{background:#F2DE45;color:#1B1A05}
.slide.end p{max-width:30ch;opacity:.8}
.feed-top{position:absolute;top:24px;right:max(14px,env(safe-area-inset-right,0px));z-index:4;display:flex;gap:8px}
.feed-top button{width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;display:grid;place-items:center}
.feed-top button svg{width:20px;height:20px}
/* Prof IA */
.prof{height:100%;display:flex;flex-direction:column}
.chat{flex:1;min-height:0;overflow-y:auto;padding-block:16px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.chat-in{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.msg{max-width:88%;padding:11px 14px;border-radius:16px;font-size:16px;line-height:1.5;overflow-wrap:anywhere}
.msg.me{align-self:flex-end;background:var(--encre);color:var(--on-encre);border-bottom-right-radius:5px;white-space:pre-wrap}
.msg.ai{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:5px}
.msg.ai .by{font-family:var(--f-hand);font-size:19px;color:var(--rouge);display:block;line-height:1;margin-bottom:4px}
.msg.ai p+p,.msg.ai p+ul,.msg.ai ul+p,.msg.ai p+ol,.msg.ai ol+p{margin-top:8px}
.msg.ai ul,.msg.ai ol{margin:6px 0 0;padding-left:20px}
.msg.ai .mh{font-weight:700;font-family:var(--f-display)}
.msg.ai code{background:var(--surface-2);padding:1px 5px;border-radius:5px;font-size:.92em}
.msg img{max-width:160px;border-radius:10px;display:block;margin-bottom:6px}
.msg .think{color:var(--muted);font-style:italic}
.prof-intro{display:flex;flex-direction:column;gap:14px;padding:6px 0}
.sugs{display:flex;flex-direction:column;gap:8px}
.sug{text-align:left;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-weight:700;font-size:15px}
.composer{border-top:1px solid var(--line);background:var(--surface);padding-block:10px;padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
.composer-in{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.comp-row{display:flex;gap:8px;align-items:flex-end}
.comp-row textarea{flex:1;min-width:0;resize:none;min-height:44px;max-height:140px;padding:10px 12px;border-radius:14px;border:1.5px solid var(--line);background:var(--paper)}
.send{width:44px;height:44px;border-radius:12px;background:var(--encre);color:var(--on-encre);display:grid;place-items:center;flex:none}
.send svg{width:20px;height:20px}
.attach-prev{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.attach-prev img{width:38px;height:38px;object-fit:cover;border-radius:8px}
.comp-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.comp-top select{padding:5px 8px;border-radius:9px;border:1.5px solid var(--line);background:var(--paper);font-size:13px;font-weight:700}
/* Toast */
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:12px;font-weight:700;font-size:14px;z-index:60;box-shadow:var(--shadow);max-width:calc(100% - 32px);text-align:center}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media (min-width:700px){
  .fc{height:300px}
}

/* Compte et connexion */
.avatar{width:32px;height:32px;border-radius:50%;background:var(--encre);color:var(--on-encre);font-family:var(--f-display);font-weight:800;font-size:15px;display:inline-grid;place-items:center;flex:none}
.avatar.big{width:52px;height:52px;font-size:22px}
.acc-head{display:flex;gap:12px;align-items:center}
#auth{position:fixed;inset:0;overflow-y:auto;background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:22px 22px;z-index:40}
.auth-in{max-width:440px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;justify-content:center;gap:14px;padding-block:calc(28px + env(safe-area-inset-top,0px)) calc(28px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.auth-brand{font-size:30px;gap:12px}
.auth-brand .logo{width:38px;height:38px;border-radius:9px}
.auth-tag{font-size:23px;color:var(--rouge);transform:rotate(-1.5deg);transform-origin:left;line-height:1.1}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow)}
.input[aria-invalid="true"]{border-color:var(--rouge)}
/* Administration */
.adm-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px}
.adm-list{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.adm-row{display:flex;gap:12px;align-items:center;padding:12px 14px;border-top:1px solid var(--line);flex-wrap:wrap}
.adm-row:first-child{border-top:0}
.adm-row .tx{flex:1;min-width:180px}
.adm-row small{display:block;color:var(--muted);font-size:13px}
.adm-row.off{opacity:.6}
.adm-row.new{background:var(--encre-soft)}
.code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-weight:700;letter-spacing:.06em;font-size:16px}
.big-code{font-size:26px;text-align:center;padding:14px;border-radius:12px;background:var(--surface-2);user-select:all;-webkit-user-select:all}

/* Devoirs Pronote */
.hw-list{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.hw{display:flex;align-items:flex-start;border-top:1px solid var(--line)}
.hw:first-child{border-top:0}
.hw .tick{padding-top:14px;align-self:stretch;place-items:start center}
.hw.done .tick span{background:var(--vert);border-color:var(--vert);color:#fff}
.hw-main{flex:1;min-width:0;padding:12px 14px 12px 0;display:flex;flex-direction:column;gap:7px}
.hw-text{white-space:pre-line;overflow-wrap:anywhere;font-size:15px}
.hw-text.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hw.done .hw-text{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--rouge)}
.link-btn{color:var(--encre);font-weight:700;font-size:14px;align-self:flex-start;text-decoration:underline;text-underline-offset:2px}
.hw-dot{width:6px;height:6px;border-radius:50%;background:var(--rouge);margin-top:2px}
.day[aria-pressed="true"] .hw-dot{background:var(--fluo)}
.pn-steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px;font-size:15px}
.pn-box{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--paper)}
.ok-line{display:flex;gap:8px;align-items:center;color:var(--vert);font-weight:700}
.ok-line svg{width:18px;height:18px}
.input.pin{font-size:24px;letter-spacing:.4em;text-align:center;font-variant-numeric:tabular-nums;max-width:200px}