/* ==============================================
   Labo SIO, design system (inspiré de SPM)
   1. Police et tokens (clair / sombre)
   2. Base
   3. Shell : sidebar + contenu
   4. Composants
   5. Leçons et exercices
   6. Terminal, topologie, SQL
   7. Pages
   ============================================== */

@font-face {
  font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/fonts/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 1. Tokens ---------- */
:root {
  --bg: #f6f7f9; --surface: #ffffff; --surface-muted: #f9fafb; --surface-sunken: #f2f4f7;
  --border: #e9ebf0; --border-strong: #d8dce3; --border-soft: #f0f2f5;
  --text: #101828; --text-muted: #475467; --text-subtle: #667085; --text-faint: #98a2b3;
  --row-hover: #f9fafb;
  --accent: #eb6d4a; --accent-strong: #d95a37; --accent-soft: rgba(235, 109, 74, .10); --accent-ring: rgba(235, 109, 74, .22);
  --ok: #059669; --ok-soft: rgba(16, 185, 129, .10); --ok-text: #047857;
  --ko: #dc2626; --ko-soft: rgba(239, 68, 68, .09); --ko-text: #b91c1c;
  --warn: #d97706; --warn-soft: rgba(245, 158, 11, .12); --warn-text: #92400e;
  --info: #3b82f6; --info-soft: rgba(59, 130, 246, .09); --info-text: #1d4ed8;
  --prof: #7c3aed; --prof-soft: rgba(124, 58, 237, .08); --prof-text: #6d28d9;
  --radius-sm: 8px; --radius: 10px; --radius-lg: 14px;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 8px 24px -6px rgba(16, 24, 40, .10), 0 2px 6px -2px rgba(16, 24, 40, .05);
  --shadow-lg: 0 24px 48px -12px rgba(16, 24, 40, .18);
  --nav-bg: #ffffff; --nav-border: var(--border); --nav-fg: #475467; --nav-fg-strong: #101828; --nav-subtle: #98a2b3;
  --nav-hover: rgba(16, 24, 40, .04); --nav-active: rgba(16, 24, 40, .06);
  --sidebar-w: 256px;
  --mono: 'SF Mono', ui-monospace, 'JetBrains Mono', 'Cascadia Code', Menlo, Consolas, monospace;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --topo-bg: #fbfcfd; --topo-dot: #e4e7ec; --topo-link: #98a2b3; --topo-node: #ffffff; --topo-label: #101828; --topo-sub: #667085; --topo-if: #2563eb;
  color-scheme: light;
}
html.dark {
  --bg: #0b0d12; --surface: #12151c; --surface-muted: #161a22; --surface-sunken: #0f1218;
  --border: #222733; --border-strong: #2e3442; --border-soft: #1b1f29;
  --text: #eef0f4; --text-muted: #b4bccb; --text-subtle: #8b94a5; --text-faint: #636c7d;
  --row-hover: rgba(255, 255, 255, .025);
  --ok-soft: rgba(16, 185, 129, .14); --ok-text: #6ee7b7;
  --ko-soft: rgba(239, 68, 68, .14); --ko-text: #fca5a5;
  --warn-soft: rgba(245, 158, 11, .14); --warn-text: #fcd34d;
  --info-soft: rgba(59, 130, 246, .14); --info-text: #93c5fd;
  --prof-soft: rgba(139, 92, 246, .14); --prof-text: #c4b5fd;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-md: 0 10px 28px -8px rgba(0, 0, 0, .55); --shadow-lg: 0 24px 56px -12px rgba(0, 0, 0, .7);
  --nav-bg: #0f1117; --nav-border: #1c2029; --nav-fg: #a3acbb; --nav-fg-strong: #f3f4f6; --nav-subtle: #5f6878;
  --nav-hover: rgba(255, 255, 255, .04); --nav-active: rgba(255, 255, 255, .07);
  --topo-bg: #0f1218; --topo-dot: #1f2430; --topo-link: #4b5565; --topo-node: #161a22; --topo-label: #eef0f4; --topo-sub: #8b94a5; --topo-if: #60a5fa;
  color-scheme: dark;
}

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; background: var(--bg); color: var(--text); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 14px/1.55 var(--sans); font-feature-settings: 'cv11', 'ss01'; letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
p { margin: 0; }
code, pre, kbd, .mono { font-family: var(--mono); }
::selection { background: var(--accent-soft); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }
.ico { width: 16px; height: 16px; flex-shrink: 0; vertical-align: -3px; }
.hidden { display: none !important; }
.muted { color: var(--text-subtle); } .faint { color: var(--text-faint); }
.small { font-size: 13px; } .tiny { font-size: 12px; }
.row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.spacer { flex: 1; }
.stack { display: grid; gap: 1rem; }
.grid-2 { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr 1fr; gap: .75rem; } .stat-value { font-size: 1.35rem; } }
.boot { display: grid; place-items: center; min-height: 100vh; color: var(--text-subtle); }

/* ---------- 3. Shell ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar-w); flex-shrink: 0; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--nav-bg); border-right: 1px solid var(--nav-border); color: var(--nav-fg); z-index: 30; }
.sidebar-brand { display: flex; align-items: center; gap: .75rem; padding: 1.25rem 1.25rem 1rem; }
.logo { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; background: #101828; color: #f2f4f7; font: 700 14px/1 var(--mono); letter-spacing: -.04em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.logo b { color: var(--accent); font-weight: 700; }
html.dark .logo { background: #1b1f29; }
.brand-name { font-size: 14px; font-weight: 650; color: var(--nav-fg-strong); letter-spacing: -.01em; line-height: 1.2; }
.brand-sub { font-size: 11.5px; color: var(--nav-subtle); margin-top: 2px; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: .25rem .875rem 1rem; }
.nav-section { margin: 1.4rem 0 .375rem; padding: 0 .625rem; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--nav-subtle); }
.nav-section:first-child { margin-top: .5rem; }
.nav-link { display: flex; align-items: center; gap: .75rem; padding: .5rem .625rem; margin: 1px 0; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500; color: var(--nav-fg); transition: background-color 140ms, color 140ms; }
.nav-link .ico { width: 18px; height: 18px; color: var(--nav-subtle); transition: color 140ms; }
.nav-link:hover { background: var(--nav-hover); color: var(--nav-fg-strong); }
.nav-link:hover .ico { color: var(--nav-fg); }
.nav-link.active { background: var(--nav-active); color: var(--nav-fg-strong); font-weight: 600; }
.nav-link.active .ico { color: var(--accent); }
.nav-pill { margin-left: auto; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: rgba(245, 158, 11, .14); color: #b45309; }
html.dark .nav-pill { color: #fbbf24; }
.sidebar-footer { border-top: 1px solid var(--nav-border); padding: .75rem .875rem .875rem; }
.user-chip { display: flex; align-items: center; gap: .625rem; padding: .375rem .375rem .5rem; }
.user-avatar { width: 32px; height: 32px; border-radius: 999px; flex-shrink: 0; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); }
.user-name { font-size: 13px; font-weight: 600; color: var(--nav-fg-strong); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 11.5px; color: var(--nav-subtle); }
.user-xp { padding: 0 .375rem .5rem; }
.user-xp .meter { margin-top: .35rem; }
.footer-actions { display: flex; gap: 2px; padding: 0 .125rem; }
.icon-btn { width: 32px; height: 32px; border-radius: var(--radius-sm); display: inline-grid; place-items: center; flex-shrink: 0; color: var(--nav-subtle); transition: background-color 140ms, color 140ms; }
.icon-btn .ico { width: 17px; height: 17px; }
.icon-btn:hover { background: var(--nav-hover); color: var(--nav-fg-strong); }
.main { flex: 1; min-width: 0; }
.container { max-width: 1180px; margin: 0 auto; padding: 2.5rem 2.5rem 4rem; }
.topbar { display: none; }
@media (max-width: 1100px) { .container { padding: 2rem 1.5rem 3rem; } }
@media (max-width: 860px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; transform: translateX(-102%); transition: transform 240ms cubic-bezier(.32, .72, 0, 1); box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: none; }
  .scrim { position: fixed; inset: 0; background: rgba(16, 24, 40, .35); backdrop-filter: blur(2px); z-index: 25; }
  .topbar { display: flex; align-items: center; gap: .75rem; position: sticky; top: 0; z-index: 20; padding: .625rem 1rem; background: var(--nav-bg); border-bottom: 1px solid var(--nav-border); }
  .topbar .logo { width: 30px; height: 30px; font-size: 12px; border-radius: 8px; }
  .topbar-title { font-weight: 650; font-size: 14px; }
  .container { padding: 1.25rem 1rem 3rem; }
}

/* ---------- 4. Composants ---------- */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.page-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: .5rem; }
.page-eyebrow .dot, .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); display: inline-block; flex-shrink: 0; }
.page-eyebrow a { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--text-subtle); }
.page-eyebrow a:hover { color: var(--text); }
.page-eyebrow .sep { color: var(--text-faint); font-weight: 400; }
.page-title { font-size: 1.75rem; line-height: 1.2; font-weight: 650; letter-spacing: -.025em; }
.page-subtitle { margin-top: .375rem; font-size: 14.5px; color: var(--text-subtle); max-width: 70ch; }
.page-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 860px) { .page-title { font-size: 1.4rem; } .page-header { margin-bottom: 1.5rem; } }

.section-title { display: flex; align-items: center; gap: .625rem; font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin: 2rem 0 .875rem; }
.section-title .hint { font-size: 13px; font-weight: 400; color: var(--text-faint); }
.section-title .ico { color: var(--text-subtle); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.card-pad { padding: 1.5rem; }
.card-pad-sm { padding: 1.125rem 1.25rem; }
.card-head { display: flex; align-items: center; gap: .625rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-soft); }
.card-head h2, .card-head h3 { font-size: 14.5px; font-weight: 600; }
.card-head .ico { color: var(--text-subtle); }
.card-body { padding: 1.125rem 1.25rem; }
a.card-link, .card-link { display: block; transition: border-color 160ms, box-shadow 160ms, transform 160ms; }
.card-link:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 38px; padding: 0 .95rem; border-radius: var(--radius); font-size: 13.5px; font-weight: 550; white-space: nowrap; border: 1px solid transparent; cursor: pointer; transition: background-color 140ms, border-color 140ms, color 140ms, box-shadow 140ms; }
.btn .ico { width: 16px; height: 16px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-sm { height: 32px; padding: 0 .75rem; font-size: 13px; border-radius: var(--radius-sm); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .10), inset 0 1px 0 rgba(255, 255, 255, .14); }
.btn-primary:hover:not(:disabled) { background: var(--accent-strong); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-muted); border-color: var(--text-faint); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-sunken); color: var(--text); }
.btn-danger { background: transparent; color: var(--ko); border-color: var(--border-strong); }
.btn-danger:hover { background: var(--ko-soft); border-color: var(--ko); }
.btn:focus-visible, .nav-link:focus-visible, .icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }

.badge { display: inline-flex; align-items: center; gap: .3rem; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 550; line-height: 18px; background: var(--surface-sunken); color: var(--text-muted); border: 1px solid var(--border); white-space: nowrap; }
.badge .ico { width: 12px; height: 12px; }
.badge.ok { background: var(--ok-soft); color: var(--ok-text); border-color: transparent; }
.badge.ko { background: var(--ko-soft); color: var(--ko-text); border-color: transparent; }
.badge.warn { background: var(--warn-soft); color: var(--warn-text); border-color: transparent; }
.badge.info { background: var(--info-soft); color: var(--info-text); border-color: transparent; }
.badge.accent { background: var(--accent-soft); color: var(--accent-strong); border-color: transparent; }
html.dark .badge.accent { color: #f6a58d; }

.lvl { font-size: 11.5px; font-weight: 550; padding: 1px 8px; border-radius: 999px; white-space: nowrap; background: var(--surface-sunken); color: var(--text-faint); }
.lvl.debutant { background: var(--ko-soft); color: var(--ko-text); }
.lvl.encours { background: var(--warn-soft); color: var(--warn-text); }
.lvl.maitrise { background: var(--ok-soft); color: var(--ok-text); }
.lvl.expert { background: var(--prof-soft); color: var(--prof-text); }

.meter { height: 6px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 300ms cubic-bezier(.4, 0, .2, 1); }
.meter.ok > i { background: var(--ok); }
.meter.thin { height: 4px; }

.stat-label { font-size: 12.5px; font-weight: 500; color: var(--text-subtle); }
.stat-value { font-size: 1.6rem; font-weight: 650; letter-spacing: -.02em; margin-top: .25rem; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: 12px; color: var(--text-faint); margin-top: .125rem; }
.icon-tile { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; background: var(--surface-sunken); border: 1px solid var(--border); color: var(--text-muted); }
.icon-tile .ico { width: 19px; height: 19px; }
.icon-tile.sm { width: 32px; height: 32px; border-radius: 9px; } .icon-tile.sm .ico { width: 16px; height: 16px; }

.field-label { display: block; font-size: 13px; font-weight: 550; color: var(--text-muted); margin-bottom: .375rem; }
.input, input[type=text], input[type=password], input[type=number], select, textarea {
  width: 100%; min-height: 38px; padding: .5rem .75rem; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); outline: none; transition: border-color 140ms, box-shadow 140ms;
}
textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input.mono, textarea.mono { font-family: var(--mono); font-size: 13px; }
input:disabled, textarea[readonly] { background: var(--surface-muted); color: var(--text-muted); }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6rem center; background-size: 16px; padding-right: 2rem; }
html.dark option { background: var(--surface); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; }

.empty-state { text-align: center; padding: 2.5rem 1.5rem; color: var(--text-subtle); font-size: 13.5px; }
.empty-state .ico { width: 32px; height: 32px; color: var(--text-faint); margin: 0 auto .75rem; display: block; }
.empty-state h3 { font-size: 14.5px; color: var(--text); margin-bottom: .25rem; }

table.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.table th { text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; color: var(--text-subtle); background: var(--surface-muted); border-bottom: 1px solid var(--border); padding: .6rem 1rem; white-space: nowrap; }
table.table td { padding: .65rem 1rem; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
table.table tr:last-child td { border-bottom: 0; }
table.table tbody tr:hover td { background: var(--row-hover); }
.table-wrap { overflow-x: auto; }

.list-row { display: flex; align-items: center; gap: .75rem; padding: .7rem 1.25rem; border-bottom: 1px solid var(--border-soft); }
.list-row:last-child { border-bottom: 0; }
a.list-row:hover { background: var(--row-hover); }

#toasts { position: fixed; right: 1.25rem; bottom: 1.25rem; display: grid; gap: .5rem; z-index: 100; }
.toast { display: flex; align-items: flex-start; gap: .625rem; min-width: 260px; max-width: 400px; padding: .75rem .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); font-size: 13.5px; line-height: 1.4; animation: toastIn 220ms cubic-bezier(.32, .72, 0, 1); }
.toast .ico { width: 18px; height: 18px; margin-top: 1px; color: var(--text-subtle); }
.toast.ok .ico { color: var(--ok); } .toast.ko .ico { color: var(--ko); } .toast.badge-t .ico { color: var(--accent); }
.toast b { display: block; font-weight: 600; }
@keyframes toastIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

details.disclosure { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); }
details.disclosure > summary { list-style: none; cursor: pointer; padding: .65rem .9rem; font-size: 13px; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: .5rem; }
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary .chev { margin-left: auto; transition: transform 200ms; }
details.disclosure[open] > summary .chev { transform: rotate(180deg); }
details.disclosure > .disc-body { padding: 0 .9rem .9rem; }

kbd { font-family: var(--mono); font-size: 11.5px; padding: 1px 5px; border-radius: 5px; border: 1px solid var(--border-strong); border-bottom-width: 2px; background: var(--surface); }

/* ---------- Markdown ---------- */
.md { font-size: 14.5px; line-height: 1.65; color: var(--text); }
.md > :first-child { margin-top: 0; } .md > :last-child { margin-bottom: 0; }
.md p { margin: .55em 0; }
.md ul, .md ol { margin: .45em 0; padding-left: 1.3em; }
.md li { margin: .2em 0; }
.md li::marker { color: var(--text-faint); }
.md strong { font-weight: 600; }
.md a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--accent-ring); }
html.dark .md a { color: #f6a58d; }
.md code { font-size: .86em; padding: .12em .38em; border-radius: 5px; background: var(--surface-sunken); border: 1px solid var(--border); }
.md pre { margin: .75em 0; padding: .85rem 1rem; border-radius: var(--radius); background: #0f1218; color: #d4dae4; border: 1px solid #1f2430; overflow-x: auto; font-size: 12.5px; line-height: 1.55; }
.md pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.md table { border-collapse: collapse; margin: .75em 0; font-size: 13.5px; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--border); padding: .4rem .7rem; text-align: left; }
.md th { background: var(--surface-muted); font-weight: 600; color: var(--text-muted); font-size: 12.5px; }
.md blockquote { margin: .7em 0; padding: .55em .95em; border-left: 3px solid var(--border-strong); background: var(--surface-muted); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text-muted); }
.md h3, .md h4, .md h5 { margin: 1em 0 .4em; font-size: 14.5px; }
.md.small { font-size: 13px; }

/* ---------- 5. Leçons et exercices ---------- */
.lesson-meta { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .875rem; }
.brief { display: grid; gap: .5rem; padding: 1.125rem 1.25rem; margin-bottom: 1.5rem; }
.brief-row { display: grid; grid-template-columns: 96px 1fr; gap: .75rem; font-size: 14px; }
.brief-row > span:first-child { font-size: 12px; font-weight: 600; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.brief-row a { color: var(--accent-strong); }
@media (max-width: 560px) { .brief-row { grid-template-columns: 1fr; gap: .1rem; } }
.progress-steps { display: flex; gap: 4px; margin-bottom: 1.5rem; }
.progress-steps i { flex: 1; height: 4px; border-radius: 999px; background: var(--border); }
.progress-steps i.done { background: var(--ok); } .progress-steps i.rev { background: var(--warn); } .progress-steps i.cur { background: var(--accent); }

.flow { display: grid; gap: 1rem; }
.step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); animation: stepIn 260ms cubic-bezier(.32, .72, 0, 1); }
@keyframes stepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.step-head { display: flex; align-items: center; gap: .6rem; padding: .85rem 1.25rem; border-bottom: 1px solid var(--border-soft); }
.step-kind { display: inline-flex; align-items: center; gap: .45rem; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); }
.step-kind .ico { width: 15px; height: 15px; }
.step-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.step-state { margin-left: auto; display: flex; gap: .375rem; align-items: center; }
.step-body { padding: 1.125rem 1.25rem 1.25rem; display: grid; gap: 1rem; }
.step.info { background: var(--surface-muted); box-shadow: none; }
.step.info .step-kind { color: var(--info-text); }
.step.solved { border-color: color-mix(in srgb, var(--ok) 35%, var(--border)); }
.step.revealed { border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); }
.step.inner { border-style: dashed; box-shadow: none; animation: none; }

.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.callout { display: flex; gap: .7rem; padding: .8rem .95rem; border-radius: var(--radius); font-size: 14px; border: 1px solid transparent; }
.callout > .ico { width: 18px; height: 18px; margin-top: 1px; }
.callout .c-body { flex: 1; min-width: 0; display: grid; gap: .2rem; }
.callout .c-title { font-weight: 600; font-size: 13.5px; }
.callout.ok { background: var(--ok-soft); } .callout.ok > .ico, .callout.ok .c-title { color: var(--ok-text); }
.callout.ko { background: var(--ko-soft); } .callout.ko > .ico, .callout.ko .c-title { color: var(--ko-text); }
.callout.hint { background: var(--warn-soft); } .callout.hint > .ico, .callout.hint .c-title { color: var(--warn-text); }
.callout.prof { background: var(--prof-soft); } .callout.prof > .ico, .callout.prof .c-title { color: var(--prof-text); }
.callout.neutral { background: var(--surface-muted); border-color: var(--border); }
.callout .md { font-size: 14px; }

.choices { display: grid; gap: .5rem; }
.choice { display: flex; gap: .75rem; align-items: flex-start; padding: .7rem .9rem; border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer; background: var(--surface); transition: border-color 140ms, background-color 140ms; }
.choice:hover { border-color: var(--text-faint); }
.choice input { margin-top: 3px; }
.choice .md { font-size: 14px; }
.choice.sel { border-color: var(--accent); background: var(--accent-soft); }
.choice.good { border-color: var(--ok); background: var(--ok-soft); }
.choice.bad { border-color: var(--ko); background: var(--ko-soft); }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; }
.fields label { display: grid; gap: .35rem; font-size: 12.5px; font-weight: 550; color: var(--text-muted); }
.fields input.good, input.good { border-color: var(--ok); }
.fields input.bad, input.bad { border-color: var(--ko); }
.order-list { display: grid; gap: .4rem; }
.order-item { display: flex; align-items: center; gap: .65rem; padding: .55rem .5rem .55rem .85rem; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); font-size: 14px; }
.order-item .n { font: 600 12.5px var(--mono); color: var(--text-faint); width: 1.25rem; }
.order-item .mv { margin-left: auto; display: flex; gap: 2px; }
.order-item .mv button { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: var(--text-subtle); }
.order-item .mv button:hover:not(:disabled) { background: var(--surface-sunken); color: var(--text); }
.order-item .mv button:disabled { opacity: .3; cursor: default; }
.match-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; align-items: center; padding: .25rem 0; }
@media (max-width: 600px) { .match-row { grid-template-columns: 1fr; gap: .3rem; } }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: 13.5px; }
.checks li { display: flex; gap: .55rem; align-items: flex-start; color: var(--text-muted); }
.checks li .ico { width: 16px; height: 16px; margin-top: 2px; color: var(--text-faint); }
.checks li.ok { color: var(--ok-text); } .checks li.ok .ico { color: var(--ok); }
.checks li.ko { color: var(--ko-text); } .checks li.ko .ico { color: var(--ko); }
.label-sm { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-subtle); }
.checklist { display: grid; gap: .1rem; }
.checklist label { display: flex; gap: .65rem; align-items: flex-start; padding: .4rem 0; cursor: pointer; font-size: 14px; }
.checklist input { margin-top: 3px; }
.scoreline { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--text-subtle); }
.sticky-actions { position: sticky; bottom: 0; z-index: 5; padding: .9rem 0; margin-top: .5rem; background: linear-gradient(0deg, var(--bg) 65%, transparent); display: flex; align-items: center; gap: .75rem; }
.lesson-end { text-align: center; padding: 2rem 1.5rem; margin-top: 1rem; }
.lesson-end .score { font-size: 2.6rem; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.lesson-end h2 { font-size: 17px; margin-top: .25rem; }
.lesson-end p { margin: .5rem auto 1.25rem; max-width: 52ch; color: var(--text-subtle); }
.lesson-end .actions { justify-content: center; }
.timer { font: 600 13px var(--mono); padding: .35rem .65rem; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); font-variant-numeric: tabular-nums; }
.timer.low { color: var(--ko); border-color: var(--ko); }
.addr-table td, .addr-table th { font-family: var(--mono); font-size: 12.5px; }

/* ---------- 6. Terminal, topologie, SQL ---------- */
.term { background: #0c0e13; border: 1px solid #1f232d; border-radius: var(--radius); overflow: hidden; color: #d7dce5; font: 13px/1.45 var(--mono); }
.term-bar { display: flex; align-items: center; gap: .5rem; padding: .5rem .85rem; border-bottom: 1px solid #1c2029; color: #8b94a5; font: 500 12px var(--sans); }
.term-bar .ico { width: 14px; height: 14px; color: var(--accent); }
.term-bar .hint { margin-left: auto; color: #5f6878; }
.term-out { padding: .7rem .9rem 0; max-height: 400px; min-height: 170px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; }
.term-out .cmd { color: #ffffff; }
.term-out .err { color: #f8a5a5; }
.term-out .sys { color: #8b94a5; font-style: italic; }
.term-in { display: flex; padding: .1rem .9rem .8rem; }
.term-in .pr { white-space: pre; color: #fff; }
.term-in input { flex: 1; min-width: 0; min-height: 0; border: 0; padding: 0; background: transparent; color: #fff; font: inherit; box-shadow: none; border-radius: 0; }
.term-in input:focus { box-shadow: none; }
.term-in input:disabled { background: transparent; color: #5f6878; }
.term-keys { display: none; gap: .3rem; padding: 0 .75rem .7rem; flex-wrap: wrap; }
@media (pointer: coarse) { .term-keys { display: flex; } }
.term-keys button { padding: .25rem .6rem; border-radius: 6px; border: 1px solid #2a2f3b; color: #a3acbb; font: 12px var(--mono); }

.topo { border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; background: radial-gradient(circle at 1px 1px, var(--topo-dot) 1px, transparent 0) 0 0 / 20px 20px, var(--topo-bg); }
.topo svg { display: block; min-width: 540px; width: 100%; height: auto; margin: 0 auto; }
.topo .tp-link { stroke: var(--topo-link); stroke-width: 2; }
.topo .tp-link.serial { stroke: #ef4444; stroke-dasharray: 6 4; }
.topo .tp-link.trunk { stroke: #8b5cf6; stroke-width: 3; }
.topo .tp-node { fill: var(--topo-node); }
.topo .tp-lbl { font: 600 12.5px var(--sans); fill: var(--topo-label); }
.topo .tp-sub { font: 11px var(--mono); fill: var(--topo-sub); }
.topo .tp-if { font: 500 10.5px var(--mono); fill: var(--topo-if); }
.topo .tp-zone { fill: var(--accent-soft); stroke: var(--accent-ring); stroke-dasharray: 4 4; }
.topo .tp-zone-l { font: 600 11px var(--sans); fill: var(--accent-strong); }

.result-table { max-height: 280px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.result-table table.table th, .result-table table.table td { font-family: var(--mono); font-size: 12px; padding: .4rem .75rem; }

/* ---------- 7. Pages ---------- */
/* Connexion */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.auth-card { width: min(400px, 100%); padding: 2rem; }
.auth-brand { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.75rem; }
.auth-brand .logo { width: 42px; height: 42px; font-size: 16px; border-radius: 12px; }
.auth form { display: grid; gap: 1rem; }
.form-error { font-size: 13px; color: var(--ko-text); background: var(--ko-soft); padding: .55rem .75rem; border-radius: var(--radius-sm); }

/* Tableau de bord */
.mission-item { display: flex; align-items: center; gap: .875rem; padding: .85rem 1.25rem; border-bottom: 1px solid var(--border-soft); transition: background-color 140ms; }
.mission-item:last-child { border-bottom: 0; }
.mission-item:hover { background: var(--row-hover); }
.mission-item .check { width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid var(--border-strong); display: grid; place-items: center; flex-shrink: 0; color: #fff; }
.mission-item .check .ico { width: 12px; height: 12px; }
.mission-item.done .check { background: var(--ok); border-color: var(--ok); }
.mission-item.done .m-title { color: var(--text-subtle); text-decoration: line-through; text-decoration-color: var(--text-faint); }
.m-title { font-size: 14px; font-weight: 550; }
.m-sub { font-size: 12.5px; color: var(--text-subtle); margin-top: 1px; }
.m-min { margin-left: auto; font-size: 12.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.track-row { display: grid; grid-template-columns: 1fr auto; gap: .35rem .75rem; align-items: center; padding: .75rem 1.25rem; border-bottom: 1px solid var(--border-soft); }
.track-row:last-child { border-bottom: 0; }
.track-row:hover { background: var(--row-hover); }
.track-row .t-name { display: flex; align-items: center; gap: .55rem; font-size: 13.5px; font-weight: 550; }
.track-row .t-meta { font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.track-row .meter { grid-column: 1 / -1; }
.spark { display: flex; align-items: flex-end; gap: 4px; height: 64px; }
.spark i { flex: 1; border-radius: 3px 3px 0 0; background: var(--accent); opacity: .85; min-height: 2px; }
.spark i.z { background: var(--border); opacity: 1; }
.badge-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.badge-item { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .65rem .35rem .4rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-muted); font-size: 12.5px; font-weight: 550; }
.badge-item .icon-tile { width: 24px; height: 24px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); border: 0; }
.badge-item .icon-tile .ico { width: 13px; height: 13px; }
.skill-line { display: grid; grid-template-columns: 1fr 110px 92px; gap: .875rem; align-items: center; padding: .6rem 1.25rem; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }
.skill-line:last-child { border-bottom: 0; }
.skill-line .lvl { justify-self: end; }
@media (max-width: 560px) { .skill-line { grid-template-columns: 1fr 70px; } .skill-line .lvl { display: none; } }

/* Parcours */
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; overflow-x: auto; }
.tab { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem .85rem; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 13.5px; font-weight: 550; color: var(--text-subtle); white-space: nowrap; }
.tab .ico { width: 16px; height: 16px; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
.chapter { margin-bottom: 1.75rem; }
.chapter-head { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.chapter-head h2 { font-size: 16px; }
.chapter-level { font: 600 11px var(--mono); color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; }
.chapter-sum { font-size: 13.5px; color: var(--text-subtle); margin: -.35rem 0 .875rem; max-width: 80ch; }
.lesson-line { display: grid; grid-template-columns: 28px 1fr auto; gap: .875rem; align-items: center; padding: .8rem 1.25rem; border-bottom: 1px solid var(--border-soft); transition: background-color 140ms; }
.lesson-line:last-child { border-bottom: 0; }
.lesson-line:hover { background: var(--row-hover); }
.lesson-line .st { width: 24px; height: 24px; border-radius: 999px; border: 1.5px solid var(--border-strong); display: grid; place-items: center; font: 600 11px var(--sans); color: var(--text-faint); }
.lesson-line .st .ico { width: 13px; height: 13px; }
.lesson-line.done .st { background: var(--ok); border-color: var(--ok); color: #fff; }
.lesson-line.started .st { border-color: var(--accent); color: var(--accent); }
.lesson-line .l-title { font-size: 14px; font-weight: 550; display: flex; align-items: center; gap: .5rem; }
.lesson-line .l-title .ico { color: var(--text-faint); }
.lesson-line .l-meta { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .2rem; font-size: 12.5px; color: var(--text-subtle); }
.lesson-line .l-score { font-size: 13px; font-weight: 550; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.lesson-line.exam .st { border-style: dashed; color: var(--accent); border-color: var(--accent); }
.diff { display: inline-flex; gap: 2px; vertical-align: 1px; }
.diff i { width: 5px; height: 5px; border-radius: 999px; background: var(--border-strong); }
.diff i.on { background: var(--text-subtle); }

/* Divers */
.kv { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; font-size: 13.5px; }
.kv dt { color: var(--text-subtle); } .kv dd { margin: 0; }
.ok-text { color: var(--ok-text); } .ko-text { color: var(--ko-text); }

/* ---------- 8. Vrais cours ---------- */
.course-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.course-card { padding: 1.25rem 1.25rem 1.1rem; display: flex; flex-direction: column; gap: .55rem; }
.course-card h2 { font-size: 16px; }
.course-card p { font-size: 13.5px; color: var(--text-subtle); flex: 1; }
.cc-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cc-n { font: 700 12px var(--mono); color: var(--accent-strong); background: var(--accent-soft); padding: 2px 8px; border-radius: 6px; }
.cc-n.sm { font-size: 11px; }
html.dark .cc-n { color: #f6a58d; }
.cc-meta { font-size: 12px; color: var(--text-faint); }
.cc-stats { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: 12.5px; color: var(--text-subtle); }
.cc-stats span { display: inline-flex; align-items: center; gap: .3rem; }
.cc-stats .ico { width: 14px; height: 14px; color: var(--text-faint); }

.course-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.course-toc { position: sticky; top: 1.25rem; padding: .9rem .6rem; max-height: calc(100vh - 2.5rem); overflow-y: auto; }
.toc-title { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); padding: 0 .6rem .5rem; }
.course-toc a { display: flex; gap: .55rem; align-items: flex-start; padding: .4rem .6rem; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-subtle); line-height: 1.35; }
.course-toc a:hover { background: var(--row-hover); color: var(--text); }
.course-toc a.cur { background: var(--surface-sunken); color: var(--text); font-weight: 550; }
.toc-st { width: 8px; height: 8px; margin-top: 5px; flex-shrink: 0; border-radius: 999px; border: 1.5px solid var(--border-strong); }
.toc-st.plain { border-style: dashed; }
.course-toc a.done .toc-st { background: var(--ok); border-color: var(--ok); }
.course-main { display: grid; gap: 1.25rem; min-width: 0; }
.course-sec { scroll-margin-top: 1rem; }
.cs-head { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-soft); }
.cs-head h2 { font-size: 16px; }
.cs-head > .ico { color: var(--accent); width: 18px; height: 18px; }
.cs-n { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font: 650 12.5px var(--mono); background: var(--surface-sunken); color: var(--text-muted); border: 1px solid var(--border); flex-shrink: 0; }
.course-sec.is-read .cs-n { background: var(--ok-soft); color: var(--ok-text); border-color: transparent; }
.cs-body { padding: 1.1rem 1.35rem .4rem; display: grid; gap: 1rem; }
.cs-body .md { font-size: 15px; line-height: 1.7; }
.cs-body .md h5 { font-size: 14.5px; margin-top: 1.3em; }
.cs-foot { padding: .5rem 1.35rem 1.1rem; display: flex; justify-content: flex-end; }
.retenir-list { list-style: none; margin: 0; padding: 1rem 1.25rem 1.25rem; display: grid; gap: .55rem; }
.retenir-list li { display: flex; gap: .6rem; font-size: 14.5px; }
.retenir-list .ico { color: var(--ok); margin-top: 3px; }
.course-sec.retenir { background: linear-gradient(180deg, var(--ok-soft), transparent 60%), var(--surface); }
.course-nav { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.quiz { padding: 1.1rem 1.25rem; display: grid; gap: 1.25rem; }
.qz-q { font-size: 14.5px; margin-bottom: .55rem; font-weight: 500; }
.qz-exp:empty { display: none; }
.qz-exp { margin-top: .5rem; padding: .55rem .8rem; border-radius: var(--radius-sm); background: var(--surface-muted); }
.qz.ok .qz-exp { background: var(--ok-soft); } .qz.ko .qz-exp { background: var(--ko-soft); }
.quiz-score { font-size: 14px; }
.lab-list { display: grid; }
.lab-row { display: flex; align-items: center; gap: .8rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--border-soft); transition: background-color 140ms; }
.lab-row:last-child { border-bottom: 0; }
.lab-row:hover { background: var(--row-hover); }
.lab-row > .ico { color: var(--text-faint); }
.lr-main { flex: 1; min-width: 0; display: grid; }
.lr-title { font-size: 14px; font-weight: 550; }
.lr-meta { font-size: 12.5px; color: var(--text-subtle); }
@media (max-width: 960px) { .course-layout { grid-template-columns: 1fr; } .course-toc { position: static; max-height: none; } }

/* Figures des cours */
.figure { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); padding: 1rem; overflow-x: auto; }
.fig-osi { display: grid; gap: 4px; min-width: 460px; }
.fo-row { display: grid; grid-template-columns: 34px 1.2fr 1fr 1.6fr; align-items: center; gap: .75rem; padding: .5rem .75rem; border-radius: 8px; font-size: 13.5px; background: var(--surface); border: 1px solid var(--border); border-left-width: 4px; }
.fo-row.l7, .fo-row.l6, .fo-row.l5, .fo-legend i.l7 { border-left-color: #8b5cf6; }
.fo-row.l4 { border-left-color: #0ea5e9; }
.fo-row.l3 { border-left-color: #3b82f6; }
.fo-row.l2, .fo-row.l1, .fo-legend i.l2 { border-left-color: var(--accent); }
.fo-n { font: 700 13px var(--mono); color: var(--text-faint); }
.fo-name { font-weight: 600; }
.fo-pdu { font: 600 12.5px var(--mono); color: var(--accent-strong); }
html.dark .fo-pdu { color: #f6a58d; }
.fo-ex { color: var(--text-subtle); font-size: 12.5px; }
.fo-legend { display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: 12px; color: var(--text-subtle); margin-top: .4rem; }
.fo-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border); border-left-width: 4px; margin-right: .35rem; vertical-align: -2px; }
.fig-encap { display: grid; gap: .5rem; min-width: 560px; }
.fe-row { display: grid; grid-template-columns: 110px 1fr 70px; gap: .75rem; align-items: center; }
.fe-layer { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.fe-pdu { font: 600 12px var(--mono); color: var(--accent-strong); }
html.dark .fe-pdu { color: #f6a58d; }
.fe-boxes { display: flex; justify-content: flex-end; }
.fe-b { padding: .4rem .6rem; font-size: 12px; font-weight: 550; border: 1px solid var(--border-strong); margin-left: -1px; white-space: nowrap; }
.fe-b.d { background: var(--surface); flex: 0 0 150px; text-align: center; }
.fe-b.t { background: rgba(14, 165, 233, .14); }
.fe-b.n { background: rgba(59, 130, 246, .16); }
.fe-b.l { background: var(--accent-soft); }
.fe-arrows { display: flex; justify-content: space-between; gap: 1rem; font-size: 12px; color: var(--text-faint); margin-top: .25rem; }
.fig-ipv4 { min-width: 560px; }
.fi-scale { display: flex; justify-content: space-between; font: 11px var(--mono); color: var(--text-faint); padding: 0 2px .25rem; }
.fi-grid { display: grid; grid-template-columns: repeat(32, 1fr); border-top: 1px solid var(--border-strong); border-left: 1px solid var(--border-strong); }
.fi { padding: .45rem .3rem; text-align: center; font-size: 12px; border-right: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); background: var(--surface); }
.fi.hl { background: rgba(59, 130, 246, .14); font-weight: 600; }
.fi.opt { color: var(--text-subtle); font-style: italic; }
.fi.data { background: var(--surface-sunken); color: var(--text-subtle); }
.fig-dot1q { display: grid; gap: .4rem; min-width: 560px; }
.fq-label { font-size: 12px; font-weight: 600; color: var(--text-subtle); margin-top: .3rem; }
.fq-row, .fq-zoom { display: flex; }
.fq { padding: .45rem .3rem; text-align: center; font-size: 12px; border: 1px solid var(--border-strong); margin-left: -1px; background: var(--surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fq.tag { background: rgba(139, 92, 246, .16); font-weight: 600; }
.fq.fcs { background: var(--accent-soft); }
.fq-zoom { margin-left: 25%; width: 56%; }
.fig-hs { width: 100%; max-width: 620px; display: block; margin: 0 auto; }
.fig-hs .hs-t { font: 650 14px var(--sans); fill: var(--text); }
.fig-hs .hs-l { font: 500 12.5px var(--mono); fill: var(--text-muted); }
.fig-hs .hs-life { stroke: var(--border-strong); stroke-width: 2; stroke-dasharray: 4 4; }
.fig-hs .hs-arrow { stroke: var(--info); stroke-width: 2; }
.fig-hs .hs-arrow.b { stroke: var(--accent); }
.fig-hs .hs-head { fill: var(--text-muted); }

/* ---------- 9. Simulateur réseau ---------- */
body.sim-wide .container { max-width: 1680px; }
.sim-home { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; align-items: start; }
@media (max-width: 1050px) { .sim-home { grid-template-columns: 1fr; } }
.sim-help h3 { font-size: 14.5px; margin-bottom: .6rem; }
.sim-help ul { list-style: none; padding: 0; margin: 0 0 .75rem; display: grid; gap: .6rem; font-size: 13.5px; }
.sim-help li { display: flex; gap: .6rem; }
.sim-help li .ico { color: var(--accent); margin-top: 2px; }

.ws { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-xs); }
.ws-toolbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .5rem .65rem; border-bottom: 1px solid var(--border); background: var(--surface-muted); }
.ws-group { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.ws-tool { display: inline-flex; align-items: center; gap: .4rem; height: 32px; padding: 0 .65rem; border-radius: var(--radius-sm); font-size: 13px; font-weight: 550; color: var(--text-muted); border: 1px solid transparent; }
.ws-tool:hover { background: var(--surface); border-color: var(--border); color: var(--text); }
.ws-tool.on { background: var(--surface); border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 3px var(--accent-ring); }
.ws-tool.on .ico { color: var(--accent); }
.ws-cable { width: auto; min-height: 32px; height: 32px; padding: 0 2rem 0 .6rem; font-size: 13px; }
.ws-check { display: inline-flex; align-items: center; gap: .35rem; font-size: 12.5px; color: var(--text-subtle); cursor: pointer; white-space: nowrap; }
.ws-title { font-size: 12.5px; color: var(--text-faint); }
.ws-stage { position: relative; background: var(--topo-bg); overflow: hidden; }
.ws-scroll { position: absolute; inset: 0; overflow: auto; }
.ws-svg { display: block; touch-action: none; user-select: none; -webkit-user-select: none; }
.ws-dot { fill: var(--topo-dot); }
.ws-bg { fill-opacity: 1; }
.ws-stage[data-tool="place"] .ws-svg, .ws-stage[data-tool="cable"] .ws-svg, .ws-stage[data-tool="pdu"] .ws-svg { cursor: crosshair; }
.ws-stage[data-tool="delete"] .ws-node, .ws-stage[data-tool="delete"] .ws-link { cursor: not-allowed; }
.ws-node { cursor: pointer; }
.ws-stage[data-tool="select"] .ws-node { cursor: grab; }
.ws-node .hit { fill: transparent; }
.ws-node:hover .hit { fill: var(--accent-soft); }
.ws-node.sel .hit { fill: var(--accent-soft); stroke: var(--accent); stroke-dasharray: 4 3; }
.ws-node .tp-node { fill: var(--topo-node); }
.ws-lbl { font: 600 12.5px var(--sans); fill: var(--topo-label); }
.ws-sub { font: 11px var(--mono); fill: var(--topo-sub); }
.ws-empty { font: 500 14px var(--sans); fill: var(--text-faint); }
.ws-link .hit { stroke: transparent; stroke-width: 14; }
.ws-link .ln { stroke: var(--topo-link); stroke-width: 2.2; }
.ws-link.cross .ln { stroke-dasharray: 7 4; }
.ws-link.serial .ln { stroke: #ef4444; stroke-dasharray: 10 3 2 3; }
.ws-link.down .ln { opacity: .55; }
.ws-link:hover .ln { stroke-width: 3.5; }
.ws-light { stroke: var(--topo-node); stroke-width: 1.5; }
.ws-light.green { fill: #22c55e; } .ws-light.orange { fill: #f59e0b; } .ws-light.red { fill: #ef4444; }
.ws-port { font: 500 10.5px var(--mono); fill: var(--topo-if); pointer-events: none; }
.ws-rubber { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; pointer-events: none; }
.ws-pdu rect { fill: #fde68a; stroke: #b45309; stroke-width: 1.4; }
.ws-pdu path { fill: none; stroke: #b45309; stroke-width: 1.4; }
.ws-pdu.ko rect { fill: #fecaca; stroke: #b91c1c; } .ws-pdu.ko path { stroke: #b91c1c; }
.ws-pdu.dead { opacity: .4; transition: opacity .4s; }
.ws-hint { position: absolute; left: .75rem; bottom: .6rem; max-width: calc(100% - 1.5rem); font-size: 12.5px; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .25rem .75rem; box-shadow: var(--shadow-xs); pointer-events: none; }
.ws-portmenu { position: absolute; z-index: 6; width: 220px; max-height: 270px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: .3rem; }
.pm-head { font-size: 12px; font-weight: 600; color: var(--text-subtle); padding: .35rem .5rem; }
.ws-portmenu button { display: flex; width: 100%; justify-content: space-between; gap: .5rem; padding: .35rem .5rem; border-radius: 6px; font: 12.5px var(--mono); text-align: left; }
.ws-portmenu button:hover:not(:disabled) { background: var(--accent-soft); }
.ws-portmenu button:disabled { color: var(--text-faint); cursor: not-allowed; }
.ws-portmenu small { font-family: var(--sans); color: var(--text-faint); }
.ws-palette { display: flex; gap: .35rem; padding: .5rem .65rem; border-top: 1px solid var(--border); background: var(--surface-muted); overflow-x: auto; }
.ws-pal { display: grid; justify-items: center; gap: 1px; padding: .35rem .6rem .4rem; min-width: 86px; border-radius: var(--radius-sm); border: 1px solid transparent; }
.ws-pal svg { width: 44px; height: 34px; }
.ws-pal svg .tp-node { fill: var(--topo-node); }
.ws-pal span { font-size: 12px; font-weight: 600; }
.ws-pal small { font: 10.5px var(--mono); color: var(--text-faint); }
.ws-pal:hover { background: var(--surface); border-color: var(--border); }
.ws-pal.on { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.ws-events { border-top: 1px solid var(--border); }
.ws-ev-head { display: flex; align-items: center; gap: .5rem; padding: .45rem .75rem; font-size: 13px; }
.ws-ev-head .ico { color: var(--text-subtle); }
.ws-ev-list { max-height: 170px; overflow-y: auto; }
.ws-ev-empty { padding: .2rem .9rem .8rem; font-size: 12.5px; color: var(--text-faint); }
.ws-ev { display: grid; grid-template-columns: 90px minmax(140px, 220px) 1fr auto; gap: .75rem; align-items: baseline; padding: .4rem .9rem; border-top: 1px solid var(--border-soft); font-size: 12.5px; }
.ws-ev-st { display: inline-flex; gap: .3rem; align-items: center; font-weight: 600; }
.ws-ev-st .ico { width: 13px; height: 13px; }
.ws-ev.ok .ws-ev-st { color: var(--ok-text); } .ws-ev.ko .ws-ev-st { color: var(--ko-text); }
.ws-ev-why { color: var(--text-subtle); }
.ws-ev-t { font: 11px var(--mono); color: var(--text-faint); }
@media (max-width: 700px) { .ws-ev { grid-template-columns: 80px 1fr; } .ws-ev-why { grid-column: 1 / -1; } .ws-ev-t { display: none; } .ws-tool span { display: none; } }

/* Fenêtre d'un équipement */
.devwin { position: absolute; top: 10px; right: 10px; z-index: 8; width: min(640px, calc(100% - 20px)); height: calc(100% - 20px); max-height: 640px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.dw-head { display: flex; align-items: center; gap: .5rem; padding: .45rem .5rem .45rem .75rem; border-bottom: 1px solid var(--border); background: var(--surface-muted); cursor: move; }
.dw-grip .ico { color: var(--accent); }
.dw-name { width: 170px; min-height: 30px; height: 30px; padding: 0 .5rem; font-weight: 600; }
.dw-model { font: 11.5px var(--mono); color: var(--text-faint); }
.dw-head .icon-btn { color: var(--text-subtle); }
.dw-tabs { display: flex; gap: .2rem; padding: .35rem .5rem 0; border-bottom: 1px solid var(--border); }
.dw-tabs button { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .7rem; font-size: 13px; font-weight: 550; color: var(--text-subtle); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.dw-tabs button .ico { width: 14px; height: 14px; }
.dw-tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.dw-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.dw-pad { padding: .9rem 1rem; display: grid; gap: .8rem; align-content: start; }
.dw-term { flex: 1; display: flex; flex-direction: column; border-radius: 0; border: 0; min-height: 0; }
.dw-term .term-out { flex: 1; max-height: none; min-height: 0; }
.dw-pre { margin: 0; padding: .75rem .9rem; border-radius: var(--radius-sm); background: #0f1218; color: #d4dae4; border: 1px solid #1f2430; font: 12px/1.5 var(--mono); white-space: pre; overflow: auto; max-height: 460px; }
.dw-table td, .dw-table th { padding: .4rem .6rem; font-size: 12.5px; }
.dw-st { font-size: 12px; font-weight: 600; }
.dw-st.ok { color: var(--ok-text); } .dw-st.ko { color: var(--ko-text); } .dw-st.off { color: var(--text-faint); }
.dw-radio { display: flex; gap: 1rem; align-items: center; font-size: 13.5px; flex-wrap: wrap; }
.dw-radio label { display: inline-flex; gap: .35rem; align-items: center; cursor: pointer; }
.dw-srv section { display: grid; gap: .5rem; padding-bottom: .9rem; border-bottom: 1px solid var(--border-soft); }
.dw-srv section:last-child { border-bottom: 0; }
.dw-add input { flex: 1; min-width: 120px; }

/* Page d'un lab */
.lab-layout { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.lab-side { display: grid; gap: 1rem; }
.lab-ws { position: sticky; top: 1rem; }
.lab-card .cs-head { padding: .75rem 1.1rem; }
.lab-card .cs-head h2 { font-size: 14.5px; }
.lab-intro { padding: .8rem 1.1rem 1rem; }
.lab-intro .md, .lab-tasks .md { font-size: 14px; }
.lab-tasks { margin: 0; padding: .7rem 1.1rem 1rem 2.4rem; display: grid; gap: .55rem; }
.lab-tasks li { position: relative; }
.lab-tasks li input { position: absolute; left: -1.75rem; top: 3px; }
.lab-tasks li::marker { color: var(--text-faint); font-weight: 600; }
.lab-tasks li.done .md { color: var(--text-subtle); }
.lab-checks { padding: .8rem 1.1rem; }
.lab-hints { padding: .8rem 1.1rem 0; display: grid; gap: .5rem; }
.lab-hints:empty { padding: 0; }
.lab-sol { margin: .8rem 1.1rem 0; display: grid; gap: .6rem; padding: .8rem; border: 1px dashed var(--warn); border-radius: var(--radius); background: var(--warn-soft); }
.sol-step b { display: block; font-size: 13px; margin-bottom: .3rem; }
.sol-step ul { margin: 0; padding-left: 1.2rem; font-size: 13px; }
.lab-result { font-size: 13.5px; }
@media (max-width: 1180px) { .lab-layout { grid-template-columns: 1fr; } .lab-ws { position: static; order: -1; } }

.ws-save { position: absolute; top: .5rem; right: .75rem; z-index: 2; pointer-events: none; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .1rem .6rem; }
.ws-save:empty { display: none; }

.ws-pal { cursor: grab; touch-action: none; }
.ws-ghost { position: fixed; z-index: 200; width: 64px; height: 52px; margin: -26px 0 0 -32px; pointer-events: none; opacity: .55; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.ws-ghost.ok { opacity: .95; }
.ws-ghost svg { width: 100%; height: 100%; }
.ws-ghost .tp-node { fill: var(--topo-node); }
body:has(.ws-ghost) { cursor: grabbing; user-select: none; }

/* ---------- 10. Défis ---------- */
.defi-banner { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.25rem; border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: linear-gradient(90deg, var(--accent-soft), transparent 70%), var(--surface); }
.defi-banner .icon-tile { color: var(--accent); }
.defi-levels { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.defi-level { display: flex; flex-direction: column; gap: .55rem; padding: 1.1rem 1.2rem; text-align: left; cursor: pointer; transition: border-color 160ms, box-shadow 160ms, transform 160ms; border-top: 3px solid var(--lv); }
.defi-level:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--lv); }
.defi-level:disabled { opacity: .6; cursor: wait; }
.lv1 { --lv: #22c55e; } .lv2 { --lv: #3b82f6; } .lv3 { --lv: #f59e0b; } .lv4 { --lv: #ef4444; }
.dl-top { display: flex; align-items: center; gap: .6rem; }
.dl-top .icon-tile { color: var(--lv); }
.dl-n { font: 600 11.5px var(--mono); color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; flex: 1; }
.dl-name { font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
.dl-desc { font-size: 13.5px; color: var(--text-subtle); flex: 1; }
.dl-foot { display: flex; align-items: center; gap: .6rem; margin-top: .3rem; }
.dl-foot .diff i.on { background: var(--lv); }
.dl-go { display: inline-flex; align-items: center; gap: .3rem; font-size: 13px; font-weight: 600; color: var(--lv); }
.lvl-chip { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 650; padding: 2px 9px; border-radius: 999px; color: var(--lv); background: color-mix(in srgb, var(--lv) 14%, transparent); white-space: nowrap; }
.chk-tip { display: block; font-size: 12.5px; color: var(--text-subtle); margin-top: .15rem; }
.chk-tip:empty { display: none; }
.defi-tips { margin: 0; padding: .8rem 1.1rem .4rem 2.2rem; display: grid; gap: .4rem; font-size: 13.5px; }
.dl-foot { flex-wrap: wrap; } .dl-foot .tiny, .dl-go { white-space: nowrap; }

/* Présence en ligne (page Utilisateurs) */
.presence { display: inline-flex; align-items: center; gap: .4rem; font-size: 12.5px; font-weight: 550; color: var(--text-faint); white-space: nowrap; }
.presence i { width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; }
.presence.on { color: var(--ok-text); }
.presence.on i { background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .18); }

/* ---------- 11. Apparence (comme SPM) ---------- */
html.has-bg, html.has-bg body { background: transparent !important; }
html.has-bg body { isolation: isolate; }
#body-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--bg); overflow: hidden; }
html:not(.has-bg) #body-bg { display: none; }
#body-bg i { position: absolute; inset: -40px; background-size: cover; background-position: center; transition: opacity 250ms, filter 250ms; }
#body-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(246, 247, 249, .55), rgba(246, 247, 249, .25)); }
html.dark #body-bg::after { background: linear-gradient(180deg, rgba(11, 13, 18, .60), rgba(11, 13, 18, .30)); }
html.has-bg .sidebar, html.has-bg .topbar { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.drawer-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(16, 24, 40, .35); backdrop-filter: blur(3px); opacity: 0; transition: opacity 200ms ease; }
.drawer-backdrop.open { opacity: 1; }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 260ms cubic-bezier(.32, .72, 0, 1); }
.drawer-backdrop.open .drawer { transform: none; }
.drawer-head { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.drawer-head h3 { font-size: 16px; }
.drawer-head .icon-btn { color: var(--text-subtle); }
.drawer-body { flex: 1; overflow-y: auto; padding: .5rem 1.5rem 1.5rem; }
.drawer-foot { padding: 1rem 1.5rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.drawer-section { padding: 1.25rem 0; border-bottom: 1px solid var(--border-soft); }
.drawer-section:last-child { border-bottom: 0; }
.drawer-section-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: .875rem; }
.ds-head { display: flex; align-items: baseline; justify-content: space-between; }
.drawer-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text-muted); margin: .875rem 0 .4rem; }
.drawer-row .val { font-variant-numeric: tabular-nums; color: var(--text-subtle); font-size: 12.5px; }
.link-btn { font-size: 12.5px; color: var(--text-subtle); }
.link-btn:hover { color: var(--text); text-decoration: underline; }
.link-btn.danger { color: var(--ko); }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--surface-sunken); border-radius: var(--radius); border: 1px solid var(--border); }
.segmented button { display: flex; align-items: center; justify-content: center; gap: .5rem; height: 34px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--text-subtle); transition: background-color 140ms, color 140ms, box-shadow 140ms; }
.segmented button .ico { width: 15px; height: 15px; }
.segmented button.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin-bottom: .625rem; }
.color-preset { aspect-ratio: 1; width: 100%; border-radius: 999px; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border-strong); cursor: pointer; transition: transform 140ms, box-shadow 140ms; }
.color-preset:hover { transform: scale(1.08); }
.color-preset.selected { box-shadow: 0 0 0 2px var(--text); }
input[type="color"] { -webkit-appearance: none; appearance: none; width: 100%; height: 36px; padding: 3px; cursor: pointer; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 5px; }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.upload-tile { display: flex; align-items: center; justify-content: center; gap: .5rem; flex: 1; height: 38px; padding: 0 .75rem; border-radius: var(--radius); border: 1px dashed var(--border-strong); color: var(--text-muted); font-size: 13px; cursor: pointer; transition: border-color 140ms, background-color 140ms; }
.upload-tile:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ---------- Devoirs notés : carte urgente (sidebar), pastille mobile, page du TD ---------- */
.urgent-slot { padding: 0 .875rem; display: grid; gap: .5rem; }
.urgent-slot:empty { display: none; }
.urgent-card { display: grid; gap: .15rem; padding: .65rem .75rem; border-radius: var(--radius); background: rgba(239, 68, 68, .14); border: 1px solid color-mix(in srgb, var(--ko) 45%, transparent); color: var(--nav-fg-strong); transition: border-color 140ms, background-color 140ms; }
.urgent-card:hover { border-color: var(--ko); background: color-mix(in srgb, var(--ko) 16%, transparent); }
.urgent-head { display: flex; align-items: center; gap: .45rem; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: color-mix(in srgb, #ef4444 65%, var(--nav-fg-strong)); }
.urgent-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ko); flex-shrink: 0; animation: urgent-pulse 1.6s ease-in-out infinite; }
.urgent-left { margin-left: auto; font: 700 11px var(--mono); letter-spacing: 0; text-transform: none; padding: 1px 6px; border-radius: 999px; background: var(--ko); color: #fff; }
.urgent-title { font-size: 13.5px; font-weight: 650; line-height: 1.3; }
.urgent-due { font-size: 11.5px; color: var(--nav-subtle); }
@keyframes urgent-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ko) 55%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }
@media (prefers-reduced-motion: reduce) { .urgent-dot { animation: none; } }
.urgent-top { margin-left: auto; }
.urgent-pill { display: inline-flex; align-items: center; gap: .3rem; padding: 3px 9px; border-radius: 999px; background: var(--ko); color: #fff; font-size: 12px; font-weight: 650; white-space: nowrap; }
.urgent-pill .ico { width: 13px; height: 13px; }
.urgent-tag { display: inline-flex; align-items: center; gap: .35rem; color: var(--ko-text); }
.urgent-tag .ico { width: 14px; height: 14px; }
.due-banner { display: flex; gap: .75rem; align-items: flex-start; padding: .85rem 1rem; margin-bottom: 1.25rem; border-radius: var(--radius); background: var(--ko-soft); border: 1px solid color-mix(in srgb, var(--ko) 40%, transparent); }
.due-banner > .ico { color: var(--ko); width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; }
.due-banner b { display: block; color: var(--ko-text); font-size: 15px; }
.due-banner span { font-size: 13.5px; color: var(--text-muted); }
.due-banner.past { background: var(--surface-muted); border-color: var(--border); }
.due-banner.past > .ico, .due-banner.past b { color: var(--text-muted); }
.devoir-main { display: grid; gap: 1.1rem; min-width: 0; }
.devoir-part { font-size: 13px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-subtle); margin: .75rem 0 -.25rem; }
.q-card .cs-head { align-items: flex-start; }
.q-card .q-text { font-size: 15px; font-weight: 600; line-height: 1.45; }
.q-card .cs-body { padding-bottom: 1.2rem; }
.q-card.is-read .cs-n { background: var(--ok-soft); color: var(--ok-text); border-color: transparent; }
.q-label { display: flex; align-items: center; gap: .4rem; font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: .35rem; }
.q-label .ico { width: 14px; height: 14px; color: var(--accent); }
.q-block .md { font-size: 14.5px !important; }
.q-pistes { display: grid; gap: .5rem; }
.q-pistes:empty { display: none; }
.q-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.q-draft textarea { width: 100%; min-height: 110px; resize: vertical; font: inherit; font-size: 14.5px; line-height: 1.55; padding: .65rem .8rem; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); }
.q-draft textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.q-draft-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .4rem; }
.q-done { display: inline-flex; align-items: center; gap: .45rem; font-size: 13.5px; font-weight: 550; cursor: pointer; }
.q-done input { accent-color: var(--ok); width: 16px; height: 16px; }
.cas-card > summary { list-style: none; cursor: pointer; border-bottom: 0; }
.cas-card > summary::-webkit-details-marker { display: none; }
.cas-card[open] > summary { border-bottom: 1px solid var(--border-soft); }
.cas-card > summary .chev { transition: transform 200ms; color: var(--text-faint); }
.cas-card[open] > summary .chev { transform: rotate(180deg); }
.cas-card .cs-body { padding-bottom: 1.1rem; }
.devoir-export { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.devoir-export h2 { font-size: 16px; }