/* Université · tokens, composants et mise en page. Repris de la maquette v3 validée. */

/* Concept : fenêtres Mac/Windows en grand (barre latérale de l'app de gestion, palette et cartes de EXIT), puis deux écrans iPhone. */
:root{
  --bg:#f2f2f7; --elev:#fff; --side:#fbfbfd; --label:#1c1c1e; --label2:rgba(60,60,67,.62); --label3:rgba(60,60,67,.32);
  --sep:rgba(60,60,67,.18); --fill:rgba(120,120,128,.12); --fillq:rgba(120,120,128,.08);
  --accent:#0d9aab; --accent2:#0a7b89; --etudes:#2f9e5c; --etudes2:#1f7a45; --etudesbg:rgba(47,158,92,.13);
  --danger:#d9534a;--or:#ffc21a;--or2:#e6a700;--or3:#ffe27a;--orbg:rgba(255,194,26,.22); --warn:#cf9422; --good:#0f7a4c; --gold:#b8860b; --on:#fff;
  --stage:#dcdce2; --win:#f2f2f7; --shadow:0 1px 8px rgba(0,0,0,.05); --winshadow:0 20px 60px rgba(0,0,0,.22);
  --font:-apple-system,"SF Pro Text",BlinkMacSystemFont,"Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#000; --elev:#1c1c1e; --side:#141416; --label:#fff; --label2:rgba(235,235,245,.6); --label3:rgba(235,235,245,.3);
  --sep:rgba(84,84,88,.45); --fill:rgba(118,118,128,.24); --fillq:rgba(118,118,128,.16);
  --accent:#3fbdcd; --accent2:#2a9aa9; --etudes:#4cc47a; --etudes2:#2f8f56; --etudesbg:rgba(76,196,122,.17);
  --danger:#ff6157;--or:#ffd23f;--or2:#f2b705;--or3:#ffe68a;--orbg:rgba(255,210,63,.18); --warn:#e8b43c; --good:#5fe0a5; --gold:#e0b84a; --on:#10100f;
  --stage:#0a0a0c; --win:#000; --shadow:none; --winshadow:0 20px 60px rgba(0,0,0,.6);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#000; --elev:#1c1c1e; --side:#141416; --label:#fff; --label2:rgba(235,235,245,.6); --label3:rgba(235,235,245,.3);
  --sep:rgba(84,84,88,.45); --fill:rgba(118,118,128,.24); --fillq:rgba(118,118,128,.16);
  --accent:#3fbdcd; --accent2:#2a9aa9; --etudes:#4cc47a; --etudes2:#2f8f56; --etudesbg:rgba(76,196,122,.17);
  --danger:#ff6157;--or:#ffd23f;--or2:#f2b705;--or3:#ffe68a;--orbg:rgba(255,210,63,.18); --warn:#e8b43c; --good:#5fe0a5; --gold:#e0b84a; --on:#10100f;
  --stage:#0a0a0c; --win:#000; --shadow:none; --winshadow:0 20px 60px rgba(0,0,0,.6);color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--stage);color:var(--label);font-family:var(--font);padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));padding-block:28px 48px;-webkit-font-smoothing:antialiased}
.wrap{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:40px}
h1{font-size:24px;letter-spacing:-.02em;margin:0 0 6px}
.lead{margin:0;color:var(--label2);font-size:14px;max-width:70ch;line-height:1.5}
.cap{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--label2);margin:0 0 10px}
.scrollx{overflow-x:auto;padding-bottom:6px}
/* fenêtre */
.win{position:relative;width:1180px;height:760px;background:var(--win);border-radius:12px;box-shadow:var(--winshadow);overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--sep)}
.chrome{height:38px;flex:none;background:var(--side);border-bottom:1px solid var(--sep);display:flex;align-items:center;gap:8px;padding:0 14px}
.chrome i{width:12px;height:12px;border-radius:50%;display:block}
.chrome .u{margin-left:18px;font-size:12px;color:var(--label2);background:var(--fill);border-radius:7px;padding:3px 40px}
.body{flex:1;display:flex;min-height:0}
.side{width:248px;flex:none;background:var(--side);border-right:1px solid var(--sep);padding:18px 14px 14px;display:flex;flex-direction:column;gap:2px}
.brand{display:flex;align-items:center;gap:10px;padding:2px 10px 16px;font-weight:700;font-size:17px;letter-spacing:-.02em}
.brand b{width:28px;height:28px;border-radius:8px;background:var(--etudes);display:grid;place-items:center;color:var(--on)}
.stitle{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--label2);padding:12px 12px 4px}
.lk{display:flex;align-items:center;gap:12px;height:38px;border-radius:12px;padding:0 12px;font-size:15px;font-weight:600;color:var(--label)}
.lk svg{width:19px;height:19px;flex:none;color:var(--label2)}
.lk.on{background:var(--etudesbg);color:var(--etudes2)}.lk.on svg{color:var(--etudes)}
.lk em{margin-left:auto;font-style:normal;font-size:12px;font-weight:600;color:var(--label2);background:var(--fill);border-radius:999px;padding:1px 8px}
.me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:9px;border-radius:12px;background:var(--fill)}
.me b{width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--on);display:grid;place-items:center;font-size:13px}
.me span{font-size:14px;font-weight:700;display:block}.me small{font-size:12px;color:var(--label2);font-weight:600}
.main{flex:1;min-width:0;padding:26px 30px;display:flex;flex-direction:column;gap:16px;overflow:hidden}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.head .over{font-size:13px;font-weight:600;color:var(--label2);margin-bottom:3px}
.head h2{margin:0;font-size:32px;font-weight:700;letter-spacing:-.035em;line-height:1.05}
.seg{display:flex;background:var(--fill);border-radius:9px;padding:2px}
.seg span{padding:6px 16px;font-size:13px;font-weight:600;border-radius:7px;color:var(--label2)}
.seg .on{background:var(--elev);color:var(--label);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.card{background:var(--elev);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;min-width:0}
.lab{font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--label2);margin:4px 4px 7px}
.row{display:flex;align-items:center;gap:12px;padding:12px 16px;position:relative;min-width:0}
.row+.row:before{content:"";position:absolute;left:16px;right:16px;top:0;height:1px;background:var(--sep)}
.dot{width:10px;height:10px;border-radius:50%;flex:none}
.g{flex:1;min-width:0}
.t{font-size:16px;letter-spacing:-.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s{font-size:13px;color:var(--label2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{font-size:12px;font-weight:600;color:var(--label2);background:var(--fill);padding:3px 9px;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums}
.pill.go{background:var(--etudes);color:var(--on)}
.cnt{font-size:13px;font-weight:600;color:var(--label2);font-variant-numeric:tabular-nums;white-space:nowrap}
.cnt.near{color:var(--warn)}.cnt.soon{color:var(--danger)}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;min-height:0;flex:1}
.stack{display:flex;flex-direction:column;gap:12px;min-width:0}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.subj{background:var(--elev);border-radius:12px;box-shadow:var(--shadow);padding:13px 14px 12px;display:flex;flex-direction:column;gap:9px;min-width:0}
.subj .top{display:flex;align-items:baseline;gap:8px}
.subj .n{flex:1;min-width:0;font-size:16px;font-weight:600;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gauge{display:flex;gap:3px;height:12px}.gauge i{flex:1;border-radius:2px;background:var(--fill)}
.c1 i.on{background:var(--danger)}.c2 i.on{background:var(--accent)}.c3 i.on{background:var(--etudes)}
.foot{font-size:12.5px;color:var(--label2);border-top:1px solid var(--sep);padding-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* leçon */
.lesson{display:grid;grid-template-columns:210px minmax(0,1fr) 290px;gap:16px;flex:1;min-height:0}
.outline .row{padding:9px 14px;gap:10px}
.chk{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--label3);flex:none;display:grid;place-items:center}
.chk.d{background:var(--etudes);border-color:var(--etudes)}.chk.c{border-color:var(--accent);box-shadow:inset 0 0 0 4px var(--elev),inset 0 0 0 9px var(--accent)}
.steps{display:flex;gap:4px}.steps i{flex:1;height:4px;border-radius:2px;background:var(--fill)}.steps i.d{background:var(--etudes)}.steps i.c{background:var(--accent)}
p.b{margin:0;font-size:15.5px;line-height:1.55}
.formula{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:13.5px;background:var(--fillq);border-radius:8px;padding:10px 12px;line-height:1.6}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:13px;font-weight:600;padding:7px 13px;border-radius:999px;background:var(--fill)}
.chip.a{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent2)}
.opt{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;font-size:15px;line-height:1.4;position:relative}
.opt+.opt:before{content:"";position:absolute;left:16px;right:16px;top:0;height:1px;background:var(--sep)}
.k{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--label3);flex:none;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--label2)}
.opt.ok{background:var(--etudesbg)}.opt.ok .k{background:var(--etudes);border-color:var(--etudes);color:var(--on)}
.opt.no{background:color-mix(in srgb,var(--danger) 12%,transparent)}.opt.no .k{background:var(--danger);border-color:var(--danger);color:var(--on)}
.fb{font-size:14px;line-height:1.45;color:var(--label2);padding:12px 16px;border-top:1px solid var(--sep)}.fb b{color:var(--label)}
.src{font-size:13px;line-height:1.5;background:var(--fillq);border-left:3px solid var(--accent);border-radius:4px 8px 8px 4px;padding:9px 11px;color:var(--label2)}
.src b{display:block;color:var(--label);font-size:12px;letter-spacing:.03em;text-transform:uppercase;margin-bottom:3px}
.bub{font-size:13.5px;line-height:1.45;padding:9px 12px;border-radius:14px;max-width:92%}
.bub.me2{align-self:flex-end;background:var(--accent);color:var(--on);border-bottom-right-radius:4px}
.bub.ai{background:var(--fill);border-bottom-left-radius:4px}
.input{display:flex;align-items:center;gap:8px;background:var(--fill);border-radius:999px;padding:9px 14px;font-size:14px;color:var(--label2);margin-top:auto}
.btn{display:inline-block;font-weight:600;font-size:15px;padding:11px 20px;border-radius:12px;background:var(--etudes);color:var(--on)}
.btn.q{background:var(--fill);color:var(--label)}
/* frise */
.tlwrap{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}
.axis{position:relative;height:420px}
.lane{position:absolute;left:150px;right:0;height:1px;background:var(--sep)}
.ln{position:absolute;left:0;width:140px;font-size:13px;font-weight:700;color:var(--label2);transform:translateY(-50%);line-height:1.2}
.ev{position:absolute;width:158px;transform:translate(-50%,-50%);background:var(--elev);border-radius:12px;box-shadow:var(--shadow);padding:9px 11px;border-top:3px solid var(--c)}
.ev .y{font-size:12px;font-weight:700;color:var(--c);font-variant-numeric:tabular-nums}
.ev .n{font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.2;margin-top:1px}
.ev .d{font-size:12px;color:var(--label2);line-height:1.3;margin-top:2px}
.ev.gap{background:transparent;box-shadow:none;border:1.5px dashed var(--accent);border-top-width:1.5px;color:var(--accent2);font-size:13px;font-weight:600;text-align:center;padding:16px 8px}
.ticks{position:absolute;left:150px;right:0;bottom:0;height:22px;border-top:1px solid var(--sep);display:flex;justify-content:space-between;font-size:12px;color:var(--label2);font-variant-numeric:tabular-nums;padding-top:4px}
.bank{display:flex;gap:10px;align-items:center}
/* iphone */
.phones{display:flex;gap:28px;flex-wrap:wrap;justify-content:center}
.phone{width:310px;height:640px;background:var(--bg);border:7px solid #1c1c1e;border-radius:40px;overflow:hidden;display:flex;flex-direction:column;position:relative}
.phone .st{display:flex;justify-content:space-between;padding:12px 24px 4px;font-size:13px;font-weight:600}
.phone .sc{flex:1;padding:6px 14px;display:flex;flex-direction:column;gap:11px;overflow:hidden}
.phone h3{margin:2px 2px 0;font-size:30px;letter-spacing:-.035em}
.tabbar{margin:0 14px 14px;background:var(--elev);border-radius:999px;box-shadow:0 2px 14px rgba(0,0,0,.14);display:flex;justify-content:space-around;padding:9px 6px}
.tabbar b{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:var(--label3);font-weight:600}
.tabbar b.on{color:var(--etudes)}.tabbar svg{width:22px;height:22px}
.note{font-size:13px;color:var(--label2);line-height:1.55;max-width:80ch}
@media (max-width:640px){.cap{margin-bottom:6px}}
/* ---------- v3 : Jeanne, feuille de route, étapes ---------- */
[data-jorb]{display:block;flex:none;line-height:0}
.jfab{position:absolute;right:30px;bottom:26px;width:64px;height:64px;display:grid;place-items:center;z-index:5}
.jfab canvas{filter:drop-shadow(0 6px 10px rgba(11,12,16,.35));pointer-events:none}
.jfab.pfab{right:14px;bottom:84px;z-index:4}
.jbul{position:absolute;right:68px;bottom:16px;background:#0b0c10;color:#fff;font-size:13px;font-weight:600;padding:7px 11px;border-radius:10px;white-space:nowrap;line-height:1.2}
.jsombre{position:relative;overflow:hidden;background:#20242b;color:#fff;isolation:isolate}
.jsombre:before{content:"";position:absolute;inset:-40%;z-index:-2;pointer-events:none;background:radial-gradient(35% 40% at 25% 25%,rgba(255,205,60,.17),transparent 70%),radial-gradient(30% 35% at 80% 75%,rgba(255,222,100,.12),transparent 70%),radial-gradient(25% 30% at 70% 20%,rgba(95,205,125,.15),transparent 70%);animation:jderive 18s ease-in-out infinite alternate}
.jsombre:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E")}
@keyframes jderive{to{transform:translate(4%,3%) rotate(8deg) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.jsombre:before{animation:none}}
.jpan{position:absolute;right:16px;top:54px;bottom:16px;width:430px;background:var(--bg);border-radius:22px;box-shadow:0 18px 50px rgba(11,12,16,.3),0 0 0 1px var(--sep);display:flex;flex-direction:column;overflow:hidden;z-index:6}
.jtete{display:flex;align-items:center;gap:12px;padding:12px 10px 12px 16px}
.jtete [data-jorb]{margin:-4px -4px -4px -8px}
.jtete .t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.jtete b{font-size:17px;font-weight:700}
.jtete small{font-size:12px;color:#aeaeb2;display:flex;align-items:center;gap:6px}
.jpt{width:7px;height:7px;border-radius:50%;background:#5fd39b;box-shadow:0 0 0 3px rgba(95,211,155,.18)}
.jx{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;color:#aeaeb2;font-size:20px}
.jfil{flex:1;min-height:0;padding:14px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.jmoi{align-self:flex-end;max-width:85%;background:#0b0c10;color:#fff;padding:11px 14px;border-radius:14px 14px 4px 14px;font-size:15px;line-height:1.5}
.jrep{background:var(--elev);border:1px solid var(--sep);border-radius:14px 14px 14px 4px;padding:15px;display:flex;flex-direction:column;gap:10px}
.jrep p{margin:0;font-size:15px;line-height:1.55}
.jnot{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--sep);font-size:14.5px}
.jnot .n{width:22px;height:22px;border-radius:50%;background:var(--etudesbg);color:var(--etudes2);font-size:12px;font-weight:700;display:grid;place-items:center;flex:none}
.jnot span:last-child{margin-left:auto;font-size:12.5px;color:var(--label2);white-space:nowrap}
.jacts,.jsugg{display:flex;gap:6px;flex-wrap:wrap}
.jpil{display:inline-flex;align-items:center;height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--sep);background:var(--elev);font-size:13px;font-weight:500}
.jpil.g{background:var(--etudesbg);color:var(--etudes2);font-weight:600;border-color:transparent}
.jlab{font-size:12px;color:var(--label2);margin:0 2px -4px}
.jform{display:flex;gap:8px;align-items:flex-end;padding:12px 14px 14px;background:var(--elev);border-top:1px solid var(--sep)}
.jform .f{flex:1;border:1.5px solid var(--sep);border-radius:14px;padding:12px 14px;font-size:15px;color:var(--label2);min-height:48px}
.jform .snd{width:48px;height:48px;border-radius:14px;background:var(--etudes);color:var(--on);display:grid;place-items:center}
.jform .snd svg{width:18px;height:18px}
.dim{opacity:.5}
.st{font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--fill);color:var(--label2);white-space:nowrap}
.st.c{background:var(--etudesbg);color:var(--etudes2)}.st.d{background:var(--etudes);color:var(--on)}
.lk.soon{opacity:.55}.lk .v2{margin-left:auto;font-size:11px;font-weight:700;color:var(--label2);background:var(--fill);border-radius:999px;padding:1px 7px}
.road{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rc{background:var(--elev);border-radius:12px;box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:11px;min-width:0}
.rc h4{margin:0;font-size:18px;letter-spacing:-.02em}
.rc .tag{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;align-self:flex-start;background:var(--etudesbg);color:var(--etudes2)}
.rc .tag.n{background:var(--fill);color:var(--label2)}
.rc ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;font-size:14px;line-height:1.4}
.rc li{display:flex;gap:9px;align-items:flex-start}
.rc li svg{width:16px;height:16px;flex:none;color:var(--etudes);margin-top:2px}
.rc.lat li svg{color:var(--label3)}
.rc small{font-size:12.5px;color:var(--label2);line-height:1.45}
.arch{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px;font-size:13.5px;color:var(--label2);line-height:1.5}
.arch b{color:var(--label)}
@media (max-width:900px){.road{grid-template-columns:1fr}}
/* ---------- v3.1 : charte 3 couleurs, import, frise droite, dock iPhone ---------- */
.pal{display:flex;flex-direction:column;gap:10px}
.fam{display:grid;grid-template-columns:210px repeat(5,minmax(0,1fr));gap:8px}
.fn{display:flex;flex-direction:column;justify-content:center;gap:2px;padding-right:8px}
.fn b{font-size:17px}.fn span{font-size:12.5px;color:var(--label2);line-height:1.35}
.sw{border-radius:12px;padding:10px;min-height:86px;display:flex;flex-direction:column;justify-content:flex-end;font-size:12px;font-weight:700}
.sw small{font-size:11px;font-weight:500;opacity:.85;font-variant-numeric:tabular-nums}
.rules{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px;margin-top:12px}
.demo{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.stp{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent2)}
.orp{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--or);color:#1c1c1e}
.orp svg{width:12px;height:14px}
.gg{display:inline-flex;gap:3px;width:90px;height:12px}.gg i{flex:1;border-radius:2px;background:var(--fill)}.gg i.on{background:var(--etudes)}
.er{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}
.rl{margin:0;padding-left:18px;font-size:13.5px;line-height:1.5;color:var(--label2);display:flex;flex-direction:column;gap:5px}
.gauge.c1 i.on{background:var(--or)}.gauge.c2 i.on{background:var(--accent)}.gauge.c3 i.on{background:var(--etudes)}.main>*{flex-shrink:0}.lk .v2{display:none}.lk.m{font-weight:500;font-size:14px;height:34px;white-space:nowrap}.lk.m .dot{margin:0 4.5px}.hero{padding:20px 22px;border-radius:12px;display:flex;align-items:center;gap:24px}.hero h2{color:#fff}.hero .over{color:#c9ccd2}.hero .big{font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1}.hero .big small{font-size:18px;color:#c9ccd2;font-weight:600}.hero .gg{width:150px;height:10px;margin-top:8px}.hero .gg i{background:rgba(255,255,255,.2)}.hero .gg i.on{background:var(--accent)}.hero .kv{display:flex;gap:22px;margin-top:10px;font-size:13px;color:#c9ccd2}.hero .kv b{display:block;color:#fff;font-size:16px}.chips{display:flex;gap:8px;flex-wrap:wrap}.chip{height:34px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;font-size:14px;font-weight:600;border:1px solid var(--sep);background:var(--elev)}.chip.on{background:var(--accent);color:#fff;border-color:transparent}
.cnt.near{color:var(--label)}
.src{border-left-color:var(--or)}
.pill.ok{background:var(--etudesbg);color:var(--etudes2)}
.pill.gold{background:var(--or);color:#1c1c1e}
/* import */
.drop{border:1.5px dashed var(--label3);border-radius:12px;padding:16px 20px;text-align:center;font-size:15px;line-height:1.5}
.imp{display:flex;align-items:center;gap:10px;padding:12px 16px;position:relative;min-width:0}
.imp+.imp:before{content:"";position:absolute;left:16px;right:16px;top:0;height:1px;background:var(--sep)}
.imp .th{width:34px;height:34px;border-radius:9px;background:var(--fill);display:grid;place-items:center;color:var(--label2);flex:none}
.imp .th svg{width:17px;height:17px}
.imp.done .th{background:var(--etudesbg);color:var(--etudes)}
.imp.think{background:var(--orbg)}
.bt{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;border:1px solid var(--sep);background:var(--elev);white-space:nowrap;flex:none}
.bt.go{background:var(--etudes);color:var(--on);border-color:transparent}
.bt.x{width:32px;padding:0;justify-content:center;color:var(--label2);font-size:16px}
.alt{display:flex;align-items:center;gap:8px;font-size:13px;margin-top:6px}
.alt em{margin-left:auto;font-style:normal;color:var(--label2);font-variant-numeric:tabular-nums}
.rd{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--label3);flex:none}
.rd.on{border-color:var(--etudes);box-shadow:inset 0 0 0 3px var(--elev),inset 0 0 0 8px var(--etudes)}
.barfoot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding:4px 2px}
.impbtn{display:flex;align-items:center;gap:10px;height:40px;margin:0 2px 8px;padding:0 14px;border-radius:12px;background:var(--etudes);color:var(--on);font-size:15px;font-weight:700}
.impbtn svg{width:15px;height:15px}.impbtn.on{box-shadow:0 0 0 3px var(--etudesbg)}
/* frise : une ligne */
.mm{position:relative;height:40px}
.mm:before{content:"";position:absolute;left:40px;right:0;top:15px;height:2px;background:var(--label3)}
.mm b{position:absolute;top:11px;width:9px;height:9px;margin-left:-4px;border-radius:50%;background:var(--etudes)}
.mm span{position:absolute;top:26px;font-size:10px;color:var(--label2);transform:translateX(-50%);font-variant-numeric:tabular-nums}
.mmv{position:absolute;left:722px;width:100px;top:3px;height:24px;border:2px solid var(--or);background:var(--orbg);border-radius:6px}
.fr{position:relative;height:350px;--c:var(--etudes)}
.fr .line{position:absolute;left:0;right:0;top:180px;height:2px;background:var(--label3)}
.fr .tk{position:absolute;top:180px;width:1px;height:8px;background:var(--label3)}
.fr .tk u{position:absolute;top:12px;left:-14px;font-size:11px;color:var(--label2);text-decoration:none;font-variant-numeric:tabular-nums}
.fr .pt{position:absolute;top:174px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--etudes);box-shadow:0 0 0 3px var(--elev)}
.fr .cn{position:absolute;width:1px;background:var(--label3)}
.fr .edge{position:absolute;top:12px;font-size:12px;color:var(--label2)}.fr .edge.l{left:14px}.fr .edge.r{right:14px}
.fr .ev .sc{font-size:11px;font-weight:600;color:var(--label2);margin-top:5px}
/* dock iPhone : même barre que l'app de gestion */
.dock2{position:absolute;left:0;right:0;bottom:0;padding:38px 10px 14px;display:flex;align-items:flex-end;justify-content:space-between;background:linear-gradient(180deg,transparent,var(--bg) 42%);z-index:3}
.dock2 b{flex:1;height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:600;color:#8e8e93}
.dock2 b.on{color:var(--etudes)}
.dock2 svg{width:24px;height:24px}
.dock2 .pl{flex:none;width:50px;height:50px;margin:0 6px 8px;border-radius:16px;background:var(--label);color:var(--bg);display:grid;place-items:center}
.dock2 .pl svg{width:20px;height:20px}
.road{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
@media (max-width:700px){.fam{grid-template-columns:repeat(5,minmax(0,1fr))}.fn{grid-column:1/-1}.rules{grid-template-columns:1fr}}

/* ---------- App réelle : mise en page ---------- */
html,body{height:100%;margin:0}body{background:var(--bg);color:var(--label);font-family:var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.app{display:flex;height:100vh;height:100dvh}
.app .side{overflow-y:auto}.app .main{overflow-y:auto;padding:26px 30px 90px}
.subjgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.subj .foot{font-size:13px;color:var(--label2)}.subj .foot b{color:var(--label)}
.subj .gauge{gap:3px}
.champ{display:block;width:100%;box-sizing:border-box;margin-top:5px;border:1.5px solid var(--sep);background:var(--elev);color:var(--label);border-radius:12px;padding:11px 13px;font-size:15px;font-family:inherit}
.pill.er{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}
.chip,.bt,.btn,[data-act]{cursor:pointer}
.drop.over{border-color:var(--etudes);background:var(--etudesbg)}
a.lk{text-decoration:none}.lk.m span:last-child{min-width:0;white-space:nowrap}
.jfab{position:fixed;cursor:pointer}.jfab .jbul{display:none}
.jpan{position:fixed;display:none}.jpan.open{display:flex}
.jpan .jfil{overflow-y:auto}
.jmoi,.jrep{white-space:pre-wrap}
.dock2{display:none;position:fixed}
.dock2 a{flex:1;height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:600;color:#8e8e93}
.dock2 a.on{color:var(--etudes)}.dock2 a.pl{flex:none;width:50px;height:50px;margin:0 6px 8px;border-radius:16px;background:var(--label);color:var(--bg);display:grid;place-items:center}
.dock2 a.pl svg{width:20px;height:20px}
.dock2 a svg{width:24px;height:24px}
@media (max-width:999px){
  .app .side{display:none}.dock2{display:flex}
  .app .main{padding:18px 16px 130px}
  .jfab{right:14px;bottom:92px}
  .jpan{left:8px;right:8px;top:calc(env(safe-area-inset-top) + 10px);bottom:calc(env(safe-area-inset-bottom) + 10px);width:auto}
  .head h2{font-size:30px}
  .imp{flex-wrap:wrap}
}

/* ---------- Charte Apple (docs/CHARTE.md) : surcharges v0.3 ---------- */
html,body{background:var(--bg)}
body{padding:0;margin:0}
.app{background:var(--bg)}
.app .side{background:var(--side);border-right:1px solid var(--sep);padding-top:max(18px,env(safe-area-inset-top))}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Boutons : états appuyé / survol / désactivé, cibles tactiles */
.btn,.impbtn,.bt,.chip,.lk{transition:background-color .15s ease-out,filter .15s ease-out,transform .15s ease-out;-webkit-tap-highlight-color:transparent;user-select:none}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:12px;font-size:15px;font-weight:600;letter-spacing:0}
.impbtn{height:44px}
.btn:hover,.impbtn:hover,.bt.go:hover{filter:brightness(1.06)}
.btn:active,.impbtn:active,.bt.go:active{filter:brightness(.92);transform:scale(.985)}
.btn.q:hover,.bt:not(.go):hover,.chip:hover{background:color-mix(in srgb,var(--fill) 100%,var(--label) 4%)}
.bt:not(.go):active,.chip:active,.btn.q:active{background:var(--fill);transform:scale(.985)}
.lk:not(.soon):hover{background:var(--fill)}.lk.on:hover{background:var(--etudesbg)}.lk:active{background:var(--fill)}
.btn[disabled],.bt[disabled],.btn.off,.bt.off{opacity:.4;pointer-events:none}
.bt.danger{color:var(--danger)}
@media (max-width:999px){.bt{height:36px}.bt.x{width:36px}.chip{height:40px}.lk{height:44px}}
/* Barre du bas iPhone : flou progressif sans bande de séparation (comme l'app de gestion) */
.dock2{position:fixed;left:0;right:0;bottom:0;padding:34px 10px calc(10px + env(safe-area-inset-bottom));background:none;isolation:isolate;z-index:6;align-items:flex-end}
.dock2:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--bg) 78%,transparent) 55%);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 52%);mask-image:linear-gradient(180deg,transparent,#000 52%)}
.dock2 a{height:50px;min-width:44px;gap:2px;color:#8e8e93;transition:color .15s}
.dock2 a:active{opacity:.6}
.dock2 a.on{color:var(--etudes)}
.dock2 a.pl{margin:0 4px 4px;width:52px;height:52px;border-radius:16px;color:var(--bg)}
@media (max-width:999px){.jfab{bottom:calc(96px + env(safe-area-inset-bottom))}.app .main{padding-bottom:calc(120px + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.two{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start}
.two>div>.lab{margin-bottom:7px!important}
a.row{color:inherit}a.row:hover{background:var(--fillq)}
@media (max-width:999px){.two{grid-template-columns:minmax(0,1fr)}}

.btn.t,.bt.t{background:var(--etudesbg);color:var(--etudes2);border-color:transparent}
.btn.t:active,.bt.t:active{background:color-mix(in srgb,var(--etudes) 22%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.t,:root:not([data-theme="light"]) .bt.t{color:var(--etudes)}}

/* ---------- v0.6 · Style Apple 27 (relevé sur les kits iOS 27 et macOS 27) ---------- */
:root{--glass:rgba(255,255,255,.72);--glassb:rgba(255,255,255,.55);--glasssh:0 8px 30px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.08);--sel:rgba(120,120,128,.16);--r:18px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--glass:rgba(44,44,46,.66);--glassb:rgba(255,255,255,.12);--glasssh:0 8px 30px rgba(0,0,0,.5);--sel:rgba(118,118,128,.30)}}
/* Titres et sections : casse normale, comme les kits */
.lab{text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;margin:6px 6px 8px;color:var(--label2)}
.stitle{text-transform:none;letter-spacing:0;font-size:12px;font-weight:600;padding:14px 12px 5px;color:var(--label2)}
.head h2{font-size:34px;letter-spacing:-.03em}.head .over{font-size:15px;font-weight:400}
.card{border-radius:var(--r);box-shadow:none}
.row{padding:13px 16px}
/* Boutons en capsule (iOS 26 / macOS 26) */
.btn,.impbtn{border-radius:999px}.bt.go{border-radius:999px}
.seg{border-radius:999px}.seg span{border-radius:999px}
.pill{border-radius:999px}
/* Bureau : barre latérale flottante, sélection arrondie neutre */
@media (min-width:1000px){
  .app{padding:0}
  .app .side{margin:10px 0 10px 10px;height:calc(100% - 20px);border:0;border-radius:20px;background:color-mix(in srgb,var(--side) 82%,transparent);-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);box-shadow:0 0 0 1px var(--sep),0 10px 30px rgba(0,0,0,.06);padding:16px 10px 10px;width:244px}
  .app .main{padding:28px 34px 90px}
}
.lk{height:34px;border-radius:10px;font-size:14px;font-weight:500;gap:10px}
.lk svg{width:18px;height:18px}
.lk.on,.lk.on:hover{background:var(--sel);color:var(--label);font-weight:600}.lk.on svg{color:var(--etudes)}
.impbtn{height:38px;border-radius:999px;margin:0 2px 6px;font-size:14px}
.brand{padding:2px 8px 12px}
.me{border-radius:14px;background:transparent;box-shadow:0 0 0 1px var(--sep)}
/* iPhone : barre flottante en verre, bouton Importer séparé (iOS 27) */
.dock2:before{content:none!important}
.dock2{display:none;position:fixed;left:0;right:0;bottom:0;padding:0 14px calc(8px + env(safe-area-inset-bottom));gap:10px;align-items:center;justify-content:center;background:none;pointer-events:none;z-index:6}
.dock2>*{pointer-events:auto}
.dock2 .tabs{flex:1;display:flex;height:62px;padding:5px;border-radius:31px;background:var(--glass);box-shadow:var(--glasssh),inset 0 0 0 1px var(--glassb);-webkit-backdrop-filter:blur(26px) saturate(1.8);backdrop-filter:blur(26px) saturate(1.8)}
.dock2 .tabs a{flex:1;height:auto;min-width:0;border-radius:26px;gap:2px;font-size:10px;font-weight:600;color:var(--label);display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0}
.dock2 .tabs a svg{width:24px;height:24px;color:var(--label)}
.dock2 .tabs a.on{background:var(--sel);color:var(--etudes)}.dock2 .tabs a.on svg{color:var(--etudes)}
.dock2 a.pl{flex:none;width:62px;height:62px;margin:0;border-radius:50%;background:var(--glass);color:var(--etudes);box-shadow:var(--glasssh),inset 0 0 0 1px var(--glassb);-webkit-backdrop-filter:blur(26px) saturate(1.8);backdrop-filter:blur(26px) saturate(1.8);display:grid;place-items:center}
.dock2 a.pl svg{width:26px;height:26px}.dock2 a.pl.on{background:var(--etudes);color:var(--on)}
@media (max-width:999px){
  .dock2{display:flex}
  .app .main{padding:20px 16px calc(120px + env(safe-area-inset-bottom))}
  .head h2{font-size:34px}
  .card{--r:20px}
  .jfab{bottom:calc(88px + env(safe-area-inset-bottom))}
}
.main{min-width:0}.main>*{max-width:100%}.row .g{min-width:0}.row .t,.row .s{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:999px){.hero{flex-direction:column;align-items:stretch;gap:14px}.hero>div:last-child{text-align:left!important}.hero .kv{flex-wrap:wrap}}

/* ---------- v0.7 · méthodes d'étude ---------- */
.lecon{white-space:pre-wrap;line-height:1.6;font-size:16px}
.qbox{margin-top:16px;padding:14px 16px;border-radius:14px;background:var(--fillq)}
.rep{margin-top:10px;padding:12px 14px;border-radius:12px;background:var(--etudesbg);white-space:pre-wrap;line-height:1.5}
.choix{display:flex;flex-direction:column;gap:8px}
.ch{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--sep);cursor:pointer;font-size:15px;line-height:1.4;transition:background .15s}
.ch:hover{background:var(--fillq)}.ch.ok{border-color:var(--etudes);background:var(--etudesbg)}.ch.ko{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent)}
.ch .let{flex:none;width:28px;height:28px;border-radius:50%;background:var(--fill);display:grid;place-items:center;font-size:13px;font-weight:700}
.ch.ok .let{background:var(--etudes);color:#fff}.ch.ko .let{background:var(--danger);color:#fff}
.carte{min-height:200px;padding:18px 20px;border-radius:18px;background:var(--elev);box-shadow:0 0 0 1px var(--sep),0 10px 30px rgba(0,0,0,.08);display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform .15s}
.carte:active{transform:scale(.985)}.carte.flip{background:var(--etudesbg)}
.carte .face{font-size:19px;font-weight:600;line-height:1.4;white-space:pre-wrap;margin:16px 0}
.fsec{margin-top:14px}.fsec ul{margin:6px 0 0;padding-left:20px;line-height:1.55}.fsec li{margin:3px 0}
.fev .fdate{flex:none;width:92px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent2)}
.etapes{margin:0;padding-left:22px;line-height:1.6}.etapes li{margin:4px 0;white-space:pre-wrap}
.kv2{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;font-size:13px;color:var(--label2)}.kv2 b{display:block;font-size:22px;color:var(--label);font-weight:700;letter-spacing:-.02em}
.lk em{background:var(--or);color:#1c1c1e}
/* Jeanne : panneau en verre, champ et suggestions en capsule */
.jpan{border-radius:24px;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5)}
.jmoi{border-radius:18px 18px 6px 18px;background:var(--etudes);color:#fff}
.jrep{border-radius:18px 18px 18px 6px;border:0;box-shadow:0 0 0 1px var(--sep)}
.jsug{display:flex;flex-wrap:wrap;gap:6px}.jsug span{font-size:13px;font-weight:600;padding:7px 12px;border-radius:999px;border:1px solid var(--sep);cursor:pointer;color:var(--etudes2)}
.jform{border-top:0;background:transparent}.jform .champ{border-radius:22px;padding:12px 16px}.jform .snd{border-radius:50%;width:44px;height:44px}

/* ---------- v0.9 · finitions iOS 27 ---------- */
/* Chips de chapitres : une ligne qui défile, pas une pile */
.chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;margin:0 -2px;padding-left:2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:32px;font-size:13px;padding:0 13px}
@media (min-width:1000px){.chips{flex-wrap:wrap;overflow:visible}.chip{height:34px;font-size:14px}}
/* Jeanne : orbe plus discrète, alignée sur la barre */
.jfab{width:56px;height:56px;right:18px;bottom:22px}
.jfab canvas{filter:drop-shadow(0 4px 10px rgba(11,12,16,.28))}
.jfab:active{transform:scale(.95)}
@media (max-width:999px){.jfab{width:52px;height:52px;right:18px;bottom:calc(96px + env(safe-area-inset-bottom))}}
/* Panneau Jeanne : verre, coins 22 px, en-tête plus bas */
.jpan{border-radius:22px;box-shadow:var(--glasssh);background:var(--elev)}
.jsug span{border-radius:999px;font-size:13px}
/* Boutons côte à côte qui débordent sur iPhone : on les empile en pleine largeur */
@media (max-width:999px){.btnrow{flex-direction:column!important;align-items:stretch!important}.btnrow .btn{width:100%;box-sizing:border-box}}
/* Lignes cliquables : chevron à droite comme dans les listes iOS */
a.row:after{content:"";width:8px;height:8px;border-right:1.5px solid var(--label3);border-top:1.5px solid var(--label3);transform:rotate(45deg);flex:none;margin-left:4px}
/* Zone de dépôt : plus courte, bordure fine */
.drop{border:1.5px dashed var(--sep);border-radius:var(--r);padding:26px 20px;text-align:center}
/* Cartes de méthode : titre + texte plus compacts */
.card .t{white-space:normal}

/* ---------- v0.10 · barre du bas iPhone : style app de gestion, flou progressif, charte Université ---------- */
@media (max-width:999px){
  .dock2{display:flex;position:fixed;left:0;right:0;bottom:0;gap:0;align-items:flex-end;justify-content:space-between;padding:34px 10px calc(8px + env(safe-area-inset-bottom));pointer-events:none;isolation:isolate;z-index:6;background:none}
  .dock2>*{pointer-events:auto}
  .dock2:before{content:""!important;position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--bg) 82%,transparent) 55%);
    -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 55%);mask-image:linear-gradient(180deg,transparent,#000 55%)}
  .dock2 a{flex:1;height:54px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:600;color:#8e8e93;border-radius:12px;margin:0;background:none;box-shadow:none}
  .dock2 a svg{width:24px;height:24px;color:inherit}
  .dock2 a:active{opacity:.55}
  .dock2 a.on{background:none;color:var(--etudes)}.dock2 a.on svg{color:var(--etudes)}
  .dock2 a.pl{flex:none;width:52px;height:52px;margin:0 6px 7px;border-radius:17px;background:var(--label);color:var(--bg);box-shadow:0 4px 14px rgba(0,0,0,.22);-webkit-backdrop-filter:none;backdrop-filter:none;display:grid;place-items:center}
  .dock2 a.pl svg{width:22px;height:22px;color:var(--bg)}
  .dock2 a.pl.on{background:var(--etudes);color:var(--on)}.dock2 a.pl.on svg{color:var(--on)}
  .jfab{bottom:calc(88px + env(safe-area-inset-bottom))}
}

/* ===== v0.12 · Maquette validée : Cartes, QCM, Frise (iOS / macOS 27) ===== */
.card:has(.carte),.card:has(.choix){background:transparent;box-shadow:none;border:0;padding:4px 0!important}
.carte{min-height:300px;border-radius:32px;background:var(--fill);box-shadow:none;align-items:center;text-align:center;justify-content:center;gap:10px;padding:28px 24px}
.carte .face{font-size:38px;font-weight:700;letter-spacing:-.8px;line-height:1.15;margin:8px 0}
.carte.flip{background:var(--etudesbg)}.carte.flip .face{font-size:26px;letter-spacing:-.4px}
.notes4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px}
.nt{height:50px;border-radius:25px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;cursor:pointer}
.nt.n0{background:rgba(255,59,48,.12);color:#c0261c}.nt.n1{background:rgba(255,149,0,.14);color:#a85f00}.nt.n2{background:rgba(184,134,11,.16);color:#8a650f}.nt.n3{background:var(--etudes);color:#fff}
.choix{gap:10px}.ch{border:0;border-radius:20px;background:var(--fill);padding:16px 18px;font-size:16px}
.ch .let{background:var(--elev)}
.ch.ok{background:var(--etudesbg);box-shadow:inset 0 0 0 1.5px var(--etudes);font-weight:600}.ch.ko{background:rgba(255,59,48,.1);box-shadow:inset 0 0 0 1.5px var(--danger)}
.qbox{border-radius:22px;background:var(--orbg);padding:16px 18px}
.rep{border-radius:18px}
.gauge{height:5px;gap:4px}.gauge i{border-radius:3px}
.fev{position:relative;border:0!important;padding-left:8px}
.fev .fdate{width:64px;text-align:right;color:var(--gold)}
.fev:before{content:"";position:absolute;left:84px;top:0;bottom:0;width:2px;background:var(--sep)}
.fev:after{content:"";position:absolute;left:79px;top:20px;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--elev)}
.fev .g{margin-left:30px;border-radius:20px;background:var(--fill);padding:12px 14px}
@media (min-width:1000px){
  .carte{min-height:380px}.carte .face{font-size:56px}.carte.flip .face{font-size:34px}
  .notes4{max-width:560px;margin-left:auto;margin-right:auto}
  .choix{max-width:760px}
}

/* ===== v0.12b · Mac : panneau blanc flottant, carte réduite, comme la maquette ===== */
@media (min-width:1000px){
  :root:not([data-theme="dark"]) .app{background:#E4E1DA}
  .app .main{margin:10px 10px 10px 12px;height:calc(100% - 20px);border-radius:22px;background:var(--elev);padding:30px 44px 90px}
  .carte{max-width:760px;margin:0 auto;min-height:340px;background:#F7F5F0}
  .carte.flip{background:rgba(47,158,92,.12)}
  .carte .face{font-size:48px}.carte.flip .face{font-size:30px}
  .card:has(.carte)>.s:first-child{text-align:center}
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .carte{background:var(--fill)}}
:root[data-theme="dark"] .carte{background:var(--fill)}
/* v0.12c · iPhone : blocs blancs sur fond gris (lisibles), question en titre */
@media (max-width:999px){
  .ch{background:var(--elev)}.ch .let{background:var(--fill)}
  .carte{background:var(--elev);box-shadow:0 10px 30px rgba(60,40,0,.08)}
  .carte.flip{background:var(--etudesbg)}
  .carte .face{font-size:32px}.carte.flip .face{font-size:22px}
}
.card:has(.choix)>.t{font-size:22px!important;font-weight:700!important;letter-spacing:-.4px;line-height:1.25}

/* ===== v0.13 · Mise en page unifiée (remplace les réglages 0.12b/0.12c de largeur et de fond) ===== */
@media (min-width:1000px){
  :root:not([data-theme="dark"]) .app{background:var(--bg)}
  .app .main{margin:0;height:100%;border-radius:0;background:transparent;padding:30px 40px 90px}
  .app .main>*{width:100%;max-width:1040px;margin-left:auto;margin-right:auto;box-sizing:border-box}
  .carte{max-width:none;margin:0;min-height:320px;background:var(--elev);box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(60,40,0,.06)}
  .carte.flip{background:var(--etudesbg)}
  .carte .face{font-size:44px}.carte.flip .face{font-size:28px}
  .notes4{max-width:none;margin:14px 0 0}
  .choix{max-width:none}
  .card:has(.carte)>.s:first-child{text-align:left}
}
.carte .face{overflow-wrap:anywhere}
.carte.flip .face{font-size:min(26px,6vw)}
.card:has(.carte),.card:has(.choix){padding:0!important}
.carte.flip{background:color-mix(in srgb,var(--etudes) 14%,var(--elev))!important}
.nt.n2{background:color-mix(in srgb,var(--gold) 16%,var(--elev))}
.nt.n0{background:color-mix(in srgb,var(--danger) 13%,var(--elev))}.nt.n1{background:color-mix(in srgb,#ff9500 15%,var(--elev))}

/* ===== v0.14 · Conformité charte iOS 27 (audit) ===== */
@media (max-width:999px){
  /* Zones cliquables ≥ 44 px */
  .chip,.bt,.btn,.pill.go,.impbtn{min-height:44px;box-sizing:border-box}
  .bt,.btn{display:inline-flex;align-items:center;justify-content:center}
  .main a:not(.row):not(.pl){display:inline-block;padding:14px 4px;margin:-14px -4px}
  /* Onglet actif : capsule grise derrière icône et libellé (Style 27) */
  .dock2 a.on{background:rgba(120,120,128,.14);border-radius:26px}
  .dock2 a.pl.on{background:var(--etudes);color:#fff}
}
:root[data-theme="dark"] .dock2 a.on{background:rgba(120,120,128,.28)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dock2 a.on{background:rgba(120,120,128,.28)}}
/* Focus visible : anneau turquoise 2 px (accessibilité, §10) */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
[data-act]:focus-visible,.chip:focus-visible,.lk:focus-visible{outline:2px solid var(--accent);outline-offset:2px}