/* Class — styles de l'application (style Campus). Les rôles de couleur viennent de campus.css. */
:root{
  /* compatibilité : les blocs de leçon (alive.css, reader.css) utilisent ces anciens noms */
  --card:var(--surface); --line:var(--border); --muted:var(--ink-muted); --accent:var(--primary); --accent-ink:var(--on-primary);
  --tip-bg:var(--surface-alt); --code-bg:#1D1230; --code-ink:#E6E1F8;
  --ok:var(--success); --bad:var(--danger); --warn:var(--warning);
  --ok-bg:color-mix(in srgb,var(--success) 12%,var(--surface)); --bad-bg:color-mix(in srgb,var(--danger) 12%,var(--surface)); --warn-bg:color-mix(in srgb,var(--warning) 14%,var(--surface));
  --pale:#EEF0FD; /* rond d'illustration : toujours clair, les images ont un fond blanc effacé par multiply */
}
html{scroll-behavior:smooth}
body{min-height:100dvh}
[hidden]{display:none!important}

/* ===== coque ===== */
.shell{display:grid;grid-template-columns:248px minmax(0,1fr);height:100dvh;overflow:hidden}
.shell .au-sidebar{height:100dvh;top:0}
.brand{display:flex;align-items:center;gap:.6rem;padding:.4rem .6rem 1rem;font-weight:800;font-size:1.25rem;letter-spacing:-.02em;color:var(--on-dark);text-decoration:none}
.brand i{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:var(--primary);color:#fff;font-style:normal}
.side-sec{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--on-dark-muted);padding:.9rem .8rem .3rem;opacity:.8}
.side-foot{margin-top:auto;display:grid;gap:.6rem}
.sync-mini{background:rgba(255,255,255,.07);border-radius:var(--r-md);padding:.7rem .8rem;font-size:.85rem;color:var(--on-dark-muted)}
.sync-mini b{color:var(--on-dark);display:flex;align-items:center;gap:.4rem}
.side-btn{background:none;border:0;text-align:left;cursor:pointer;font:inherit;display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;border-radius:var(--r-md);color:var(--on-dark-muted);font-weight:500;width:100%}
.side-btn:hover{background:rgba(255,255,255,.08);color:var(--on-dark)}
main#main{display:flex;flex-direction:column;gap:1.25rem;min-width:0;min-height:0;overflow:auto;padding:1.25rem 1.5rem 1.5rem}
.view{display:flex;flex-direction:column;gap:1.25rem;flex:1 0 auto;min-width:0}
.view>.au-split{flex:1 1 auto}
.view>.au-split>div:not(.au-sticky){align-content:stretch}
.view>.au-split>div:not(.au-sticky)>.au-card{flex:1}
.topbar{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.topbar h1{margin:0;font-size:1.6rem;letter-spacing:-.02em;line-height:1.2}
.topbar>div:first-child{flex:1;min-width:0}
.sub{color:var(--ink-muted);margin:.15rem 0 0;font-size:.95rem}
.crumb{font-size:.85rem;color:var(--ink-muted);text-decoration:none}
.crumb:hover{color:var(--primary-strong)}

/* ===== pièces ===== */
.ill{position:relative;display:grid;place-items:center;border-radius:50%;background:var(--pale);flex:none;overflow:hidden}
.ill img{width:84%;height:84%;object-fit:contain;mix-blend-mode:multiply}
.ill .em{font-size:1.8rem}
.ill.xl{width:170px;height:170px}.ill.lg{width:104px;height:104px}.ill.md{width:60px;height:60px}.ill.sm{width:44px;height:44px}
.bar{height:8px;border-radius:99px;background:var(--surface-alt);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--primary);border-radius:99px;transition:width .6s var(--ease-out,ease)}
.bar.ok>i{background:var(--success)}
.resume{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center}
.resume h2{margin:.2rem 0 .3rem;font-size:1.6rem;letter-spacing:-.02em;line-height:1.2}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem}
.mod-card{padding:0;overflow:hidden;gap:0;text-decoration:none;color:inherit}
.mod-card .top{display:flex;gap:.9rem;align-items:center;padding:1rem 1.2rem;background:var(--hd,var(--head-1))}
.mod-card .top h3{margin:0;font-size:1.1rem;color:var(--on-head)}
.mod-card .top small{color:var(--on-head);opacity:.85}
.mod-card .bd{padding:1rem 1.2rem;display:grid;gap:.6rem}
.hd-orange{--hd:var(--head-4)}.hd-purple{--hd:var(--head-1)}.hd-blue{--hd:var(--head-2)}.hd-green{--hd:var(--head-3)}.hd-pink{--hd:linear-gradient(120deg,#FFB8C9,#FFD3E0)}.hd-teal{--hd:linear-gradient(120deg,#9BE3DA,#C2F0EA)}.hd-red{--hd:linear-gradient(120deg,#FFB3AD,#FFD0CC)}
.row{display:flex;align-items:center;gap:.7rem;padding:.7rem .8rem;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);color:var(--ink);text-decoration:none;min-height:48px;min-width:0}
a.row:hover{border-color:var(--primary)}
.row .t{flex:1;min-width:0;overflow-wrap:anywhere}.row .t b{display:block}.row .t span{font-size:.85rem;color:var(--ink-muted)}
.row.soon{opacity:.62}
.rows{display:grid;gap:.5rem;align-content:start}
.cmd{display:flex;gap:.5rem;align-items:center;background:#1D1230;border-radius:var(--r-md);padding:.5rem .6rem .5rem .9rem;color:#E6E1F8;font:500 .85rem ui-monospace,Menlo,monospace;min-width:0}
.cmd code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;background:none;color:inherit;padding:0;scrollbar-width:thin}
.cmd button{flex:none;border:0;border-radius:var(--r-sm);padding:.4rem .7rem;background:rgba(255,255,255,.14);color:#fff;font:600 .8rem Inter,system-ui;cursor:pointer;min-height:36px}
.ring{--p:35;width:84px;height:84px;border-radius:50%;background:conic-gradient(var(--primary) calc(var(--p)*1%),var(--surface-alt) 0);display:grid;place-items:center;flex:none}
.ring b{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--surface);font-size:1.1rem}
.step-list{display:grid;gap:.6rem;counter-reset:s;padding:0;margin:0}
.step-list li{list-style:none;display:flex;gap:.7rem;align-items:flex-start}
.step-list li::before{counter-increment:s;content:counter(s);flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--tile-2);font-weight:700;font-size:.85rem}
.empty{display:grid;justify-items:center;gap:.5rem;text-align:center;padding:1.2rem;color:var(--ink-muted)}
.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:80;background:#1D1230;color:#fff;border-radius:var(--r-md);padding:.7rem 1rem;box-shadow:var(--shadow-2);max-width:92vw}
.pending{display:inline-flex;gap:.35rem;align-items:center}
textarea.au-input{padding-left:.9rem;resize:vertical;min-height:90px}

/* ===== leçon ===== */
.lesson-grid{display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr) 270px;align-items:start}
.lesson-grid>.reader{min-width:0}
.reader{max-width:84ch}
.reader h1{font-size:2rem;letter-spacing:-.02em}
.lesson-wrap.alive main,.lesson-wrap.alive .reader{min-width:0}
.tocnav{display:grid;gap:.3rem;padding:.8rem}
.tocnav a{display:flex;gap:.6rem;align-items:center;padding:.55rem .6rem;border-radius:var(--r-md);text-decoration:none;color:var(--ink);min-height:44px;font-size:.95rem}
.tocnav a[aria-current]{background:var(--surface-alt);font-weight:700}
.tocnav a:hover{background:var(--surface-alt)}
.dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--ink-muted);flex:none}.dot.ok{background:var(--success);border-color:var(--success)}.dot.flou{background:var(--warning);border-color:var(--warning)}.dot.cur{border-color:var(--primary);background:var(--primary)}
.lprog{height:6px;border-radius:99px;background:var(--surface-alt);overflow:hidden}.lprog>i{display:block;height:100%;background:var(--primary);transition:width .5s}
.actionbar{display:flex;gap:.6rem;padding:.7rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);justify-content:space-between;position:sticky;bottom:0;z-index:20}
.actionbar>*{flex:0 1 auto}
.notebox{border:1px dashed var(--border);border-radius:var(--r-lg);padding:.4rem 1rem;background:var(--surface);margin-top:1.4rem}
.notebox summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}

/* ===== connexion ===== */
.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:1rem;background:var(--dark-band);background-color:var(--dark-solid)}
.login{width:min(420px,100%);gap:1rem}
.err{color:var(--danger);font-weight:600;min-height:1.4em}

/* ===== téléphone / tablette ===== */
.tabbar{display:none}
@media (max-width:1100px){.lesson-grid{grid-template-columns:minmax(0,1fr)}.lesson-grid>.tocnav{display:none}.resume{grid-template-columns:1fr}}
@media (max-width:900px){
  .shell{display:block;height:auto;overflow:visible}
  .shell .au-sidebar{display:none}
  main#main{overflow:visible;padding:1rem 1rem 92px}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface);border-top:1px solid var(--border);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{display:grid;justify-items:center;gap:2px;padding:6px 2px;border-radius:var(--r-md);color:var(--ink-muted);text-decoration:none;font-size:.7rem;font-weight:600;min-height:52px}
  .tabbar a[aria-current]{color:var(--primary-strong);background:var(--surface-alt)}
  .topbar h1{font-size:1.35rem}
  .resume .ill{display:none}
  .actionbar{position:fixed;left:0;right:0;bottom:64px;border-radius:0;border-left:0;border-right:0;padding-bottom:.7rem}
  .actionbar>*{flex:1}
  .view.has-actionbar{padding-bottom:70px}
  .toast{bottom:150px}
}
@media (max-width:600px){.kpis{grid-template-columns:1fr 1fr}.au-stat__value{font-size:1.4rem}.ill.xl{width:120px;height:120px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}