/* ============================================================================
 * ManuscritLive — Design System 2026 · finition « Linear »
 * Dark-first · CSS vanilla (zéro build) · éco-conçu
 *
 * Sombre raffiné neutre + accent doré · sans-serif resserré · bordures subtiles
 * (alpha) · coins arrondis · profondeur douce (halo/dégradés) · micro-inter.
 * <150ms · reveal scroll-driven natif · WCAG AA.
 *
 * Thème : [data-theme="dark"] (défaut) / [data-theme="light"].
 * ========================================================================== */

:root {
    /* ── Couleurs — thème CLAIR (défaut) ─────────────────────────────── */
    --ml-bg:          #FCFBF9;
    --ml-bg-2:        #F5F3EE;
    --ml-elev:        #FFFFFF;
    --ml-surface:     #FFFFFF;
    --ml-surface-2:   #F4F1EA;
    --ml-border:      rgba(20,16,10,.10);
    --ml-border-2:    rgba(20,16,10,.16);
    --ml-ink:         #16130E;
    --ml-ink-2:       #5C554A;
    --ml-ink-3:       #8A8172;
    --ml-gold:        #9A6D16;
    --ml-gold-2:      #B98A24;
    --ml-gold-ink:    #FFFFFF;
    --ml-gold-soft:   #F3E7CF;
    --ml-glow:        rgba(154,109,22,.12);
    --ml-ok:          #3B6D11;
    --ml-err:         #A3331F;
    --ml-hi:          inset 0 1px 0 rgba(255,255,255,.7);
    --ml-shadow:      0 10px 30px rgba(60,48,20,.10);
    --ml-shadow-lg:   0 30px 70px rgba(60,48,20,.14);
    --ml-ring:        rgba(154,109,22,.5);
    --ml-grain:       .022;
    color-scheme: light;

    /* Typo — sans-serif net (Linear) ; serif réservée au manuscrit */
    --ml-sans:  system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --ml-mono:  ui-monospace, SFMono-Regular, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
    --ml-serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;

    --fs-display: clamp(2.4rem, 1.5rem + 3.4vw, 4rem);
    --fs-h1:      clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
    --fs-h2:      clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
    --fs-h3:      clamp(1.1rem, 1rem + .45vw, 1.3rem);
    --fs-body:    clamp(.95rem, .92rem + .16vw, 1.05rem);
    --fs-sm:      .875rem;
    --fs-xs:      .75rem;

    --r-sm: 8px; --r: 12px; --r-lg: 18px; --pill: 999px;
    --sp-sec: clamp(3.5rem, 2.5rem + 4vw, 7rem);
    --ml-maxw: 1140px;
    --ml-t: 140ms cubic-bezier(.3,.2,.2,1);

    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);

    /* Espacements */
    --ml-sp-xs: 4px; --ml-sp-sm: 8px; --ml-sp-md: 16px; --ml-sp-lg: 24px; --ml-sp-xl: 32px;

    /* Alias rétro-compatibles (variables héritées référencées par les pages app) */
    --ml-color-bg: var(--ml-bg);
    --ml-color-surface: var(--ml-elev);
    --ml-color-surface-2: var(--ml-bg-2);
    --ml-color-surface-alt: var(--ml-bg-2);
    --ml-color-border: var(--ml-border);
    --ml-color-text: var(--ml-ink);
    --ml-color-text-muted: var(--ml-ink-2);
    --ml-color-text-secondary: var(--ml-ink-2);
    --ml-color-muted: var(--ml-ink-2);
    --ml-color-primary: var(--ml-gold);
    --ml-color-primary-h: var(--ml-gold-2);
    --ml-color-error: var(--ml-err);
    --ml-color-danger: var(--ml-err);
    --ml-color-success: var(--ml-ok);
    --ml-color-warning: var(--ml-gold);
    --ml-font-ui: var(--ml-sans);
    --ml-font-serif: var(--ml-serif);
    --ml-reading-font: var(--ml-serif);
    --ml-radius: var(--r);

    /* Alias palette héritée (ancien layout : --sand/--ink/--gold/--bdr…) — theme-aware */
    --sand: var(--ml-bg); --sand-d: var(--ml-surface-2); --sand-dp: var(--ml-bg-2);
    --ink: var(--ml-ink); --ink-s: var(--ml-ink); --ink-m: var(--ml-ink-2);
    --gold: var(--ml-gold); --gold-l: var(--ml-gold-2); --gold-p: var(--ml-gold-soft);
    --bdr: var(--ml-border); --bdr-s: var(--ml-border-2);
    --grn: var(--ml-ok); --red: var(--ml-err);
    --hdr: var(--ml-bg-2); --hdr-t: var(--ml-ink); --hdr-m: var(--ml-ink-2); --hdr-a: var(--ml-gold);
}

/* ── Thème SOMBRE (opt-in via bascule) ───────────────────────────────── */
:root[data-theme="dark"] {
    --ml-bg:          #0B0C0E;
    --ml-bg-2:        #101114;
    --ml-elev:        #16171B;
    --ml-surface:     rgba(255,255,255,.024);
    --ml-surface-2:   rgba(255,255,255,.05);
    --ml-border:      rgba(255,255,255,.09);
    --ml-border-2:    rgba(255,255,255,.15);
    --ml-ink:         #F5F6F7;
    --ml-ink-2:       #9CA1AB;
    --ml-ink-3:       #6A6F79;
    --ml-gold:        #E2AB43;
    --ml-gold-2:      #F1C572;
    --ml-gold-ink:    #14100A;
    --ml-gold-soft:   #2B2213;
    --ml-glow:        rgba(226,171,67,.16);
    --ml-ok:          #4FB477;
    --ml-err:         #E5715A;
    --ml-hi:          inset 0 1px 0 rgba(255,255,255,.06);
    --ml-shadow:      0 10px 34px rgba(0,0,0,.4);
    --ml-shadow-lg:   0 30px 80px rgba(0,0,0,.55);
    --ml-ring:        rgba(226,171,67,.55);
    --ml-grain:       .028;
    color-scheme: dark;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ml-bg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: var(--ml-sans);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--ml-ink);
    background: var(--ml-bg);
    min-height: 100vh; min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    position: relative;
}
/* Halo doux en haut + grain (signature « produit ») */
body::before {
    content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(60% 40% at 50% -8%, var(--ml-glow), transparent 70%),
        radial-gradient(40% 30% at 85% 0%, rgba(226,171,67,.06), transparent 70%);
}
body::after {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    opacity: var(--ml-grain);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
::selection { background: var(--ml-gold); color: var(--ml-gold-ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ml-border-2); border: 3px solid var(--ml-bg); border-radius: 999px; }

/* ── Typographie ────────────────────────────────────────────────────────── */
.ml-display, .ml-h1, .ml-h2, .ml-h3 {
    font-family: var(--ml-sans);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--ml-ink);
    text-wrap: balance;
}
.ml-display { font-size: var(--fs-display); font-weight: 650; }
.ml-h1 { font-size: var(--fs-h1); }
.ml-h2 { font-size: var(--fs-h2); }
.ml-h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.015em; }
.ml-grad { background: linear-gradient(180deg, var(--ml-ink), color-mix(in srgb, var(--ml-ink) 55%, var(--ml-bg))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ml-accent { color: var(--ml-gold); }

.ml-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ml-ink-2);
}
.ml-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ml-gold); box-shadow: 0 0 10px var(--ml-gold); }
.ml-lede { font-size: clamp(1rem, .95rem + .5vw, 1.2rem); line-height: 1.6; color: var(--ml-ink-2); text-wrap: pretty; }
.ml-muted { color: var(--ml-ink-2); }
.ml-mono { font-family: var(--ml-mono); }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.ml-container {
    width: 100%; max-width: var(--ml-maxw); margin-inline: auto;
    padding-inline: clamp(1.1rem, .6rem + 2vw, 2rem);
    padding-left:  max(clamp(1.1rem, .6rem + 2vw, 2rem), var(--safe-l));
    padding-right: max(clamp(1.1rem, .6rem + 2vw, 2rem), var(--safe-r));
}
.ml-section { padding-block: var(--sp-sec); }
.ml-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 760px) {
    .ml-grid { grid-template-columns: repeat(12, 1fr); }
    .ml-col-3 { grid-column: span 3; } .ml-col-4 { grid-column: span 4; }
    .ml-col-5 { grid-column: span 5; } .ml-col-6 { grid-column: span 6; }
    .ml-col-7 { grid-column: span 7; } .ml-col-8 { grid-column: span 8; }
    .ml-col-12 { grid-column: span 12; }
}

/* ── Cartes / panneaux (arrondis, bordure subtile, éclairé du haut) ─────── */
.ml-card {
    background: var(--ml-surface);
    border: 1px solid var(--ml-border);
    border-radius: var(--r);
    box-shadow: var(--ml-hi);
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    transition: border-color var(--ml-t), transform var(--ml-t), background var(--ml-t), box-shadow var(--ml-t);
}
.ml-card--hover:hover {
    border-color: var(--ml-border-2);
    background: var(--ml-surface-2);
    transform: translateY(-3px);
    box-shadow: var(--ml-hi), var(--ml-shadow);
}
.ml-panel {
    background: var(--ml-surface); border: 1px solid var(--ml-border);
    border-radius: var(--r-lg); box-shadow: var(--ml-hi);
    padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

/* ── Icônes filaires ────────────────────────────────────────────────────── */
.ml-ico {
    width: 42px; height: 42px; flex-shrink: 0;
    display: grid; place-items: center;
    border: 1px solid var(--ml-border-2); border-radius: 10px;
    background: var(--ml-surface-2); color: var(--ml-gold);
    box-shadow: var(--ml-hi);
}
.ml-ico svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ── Boutons ────────────────────────────────────────────────────────────── */
.ml-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: var(--ml-sans); font-size: .9rem; font-weight: 600; letter-spacing: -.01em;
    padding: .72rem 1.25rem; min-height: 44px;
    border: 1px solid transparent; border-radius: var(--r-sm);
    transition: background var(--ml-t), color var(--ml-t), border-color var(--ml-t), transform var(--ml-t), box-shadow var(--ml-t);
    -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.ml-btn:active { transform: translateY(1px); }
.ml-btn--primary {
    background: linear-gradient(180deg, var(--ml-gold-2), var(--ml-gold));
    color: var(--ml-gold-ink); border-color: color-mix(in srgb, var(--ml-gold) 70%, #000);
    box-shadow: var(--ml-hi), 0 6px 20px var(--ml-glow);
}
.ml-btn--primary:hover { filter: brightness(1.06); box-shadow: var(--ml-hi), 0 10px 28px var(--ml-glow); }
.ml-btn--ghost { background: var(--ml-surface-2); color: var(--ml-ink); border-color: var(--ml-border-2); box-shadow: var(--ml-hi); }
.ml-btn--ghost:hover { border-color: var(--ml-ink-2); background: var(--ml-surface); }
.ml-btn--sm { min-height: 38px; padding: .5rem .95rem; font-size: .82rem; }
.ml-btn--lg { min-height: 50px; padding: .9rem 1.6rem; font-size: .98rem; }
.ml-btn--block { width: 100%; }

/* ── Tags / pastilles ───────────────────────────────────────────────────── */
.ml-tag {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: var(--fs-xs); font-weight: 600; letter-spacing: .01em;
    padding: .34rem .7rem; border: 1px solid var(--ml-border-2); border-radius: var(--pill);
    background: var(--ml-surface-2); color: var(--ml-ink-2); box-shadow: var(--ml-hi);
}
.ml-tag__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ml-gold); box-shadow: 0 0 8px var(--ml-gold); }
.ml-tag--gold { color: var(--ml-gold); border-color: color-mix(in srgb, var(--ml-gold) 40%, transparent); }

.ml-link { color: var(--ml-gold); border-bottom: 1px solid transparent; transition: border-color var(--ml-t); }
.ml-link:hover { border-color: currentColor; }
.ml-hr { height: 1px; background: var(--ml-border); border: 0; }

/* ── Utilitaires ────────────────────────────────────────────────────────── */
.u-safe-b { padding-bottom: max(1.25rem, var(--safe-b)); }
.u-dvh { min-height: 100vh; min-height: 100dvh; }
.u-center { text-align: center; }

/* ══ Boutons — variantes app ════════════════════════════════════════════ */
.ml-btn--secondary { background: var(--ml-surface-2); color: var(--ml-ink); border-color: var(--ml-border-2); box-shadow: var(--ml-hi); }
.ml-btn--secondary:hover { border-color: var(--ml-ink-2); }
.ml-btn--danger { background: transparent; color: var(--ml-err); border-color: color-mix(in srgb, var(--ml-err) 45%, transparent); }
.ml-btn--danger:hover { background: color-mix(in srgb, var(--ml-err) 12%, transparent); border-color: var(--ml-err); }
.ml-btn-row { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ══ En-tête de page ════════════════════════════════════════════════════ */
.ml-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.ml-page-title { font-family: var(--ml-sans); font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.1rem); font-weight: 600; letter-spacing: -.01em; color: var(--ml-ink); line-height: 1.12; }
.ml-page-subtitle { margin-top: .4rem; color: var(--ml-ink-2); font-size: var(--fs-sm); }
.ml-page-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ══ Formulaires ════════════════════════════════════════════════════════ */
.ml-form-group { margin-bottom: 1.1rem; }
.ml-form-group > label, .ml-field-label { display: block; margin-bottom: .4rem; font-size: .82rem; font-weight: 600; color: var(--ml-ink-2); }
.ml-field,
.ml-form-group input:not([type=checkbox]):not([type=radio]),
.ml-form-group select, .ml-form-group textarea {
    width: 100%; padding: .7rem .85rem; font: inherit; font-size: .92rem; color: var(--ml-ink);
    background: var(--ml-surface); border: 1px solid var(--ml-border-2); border-radius: var(--r-sm);
    transition: border-color var(--ml-t), box-shadow var(--ml-t);
}
.ml-field:focus, .ml-form-group input:focus, .ml-form-group select:focus, .ml-form-group textarea:focus {
    outline: none; border-color: var(--ml-gold); box-shadow: 0 0 0 3px var(--ml-glow);
}
.ml-form-group textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.ml-field-hint { margin-top: .35rem; font-size: var(--fs-xs); color: var(--ml-ink-3); }
.ml-field-error, .ml-error { margin-top: .35rem; font-size: var(--fs-xs); color: var(--ml-err); }
.ml-checkbox-label { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--ml-ink-2); cursor: pointer; }
.ml-checkbox-label input { width: 1rem; height: 1rem; accent-color: var(--ml-gold); flex-shrink: 0; }

/* ══ Alertes / flash ════════════════════════════════════════════════════ */
.ml-flash { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.25rem; }
.ml-alert { padding: .8rem 1rem; border: 1px solid var(--ml-border-2); border-radius: var(--r-sm); font-size: .88rem; background: var(--ml-surface-2); color: var(--ml-ink); box-shadow: var(--ml-hi); }
.ml-alert--success { border-color: color-mix(in srgb, var(--ml-ok) 45%, transparent); color: var(--ml-ok); }
.ml-alert--error   { border-color: color-mix(in srgb, var(--ml-err) 45%, transparent); color: var(--ml-err); }
.ml-alert--warning { border-color: color-mix(in srgb, var(--ml-gold) 45%, transparent); color: var(--ml-gold); }
.ml-alert--info    { border-color: var(--ml-border-2); color: var(--ml-ink-2); }

/* ══ Badges statut ══════════════════════════════════════════════════════ */
.ml-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: var(--pill); border: 1px solid var(--ml-border-2); font-size: var(--fs-xs); font-weight: 600; background: var(--ml-surface-2); color: var(--ml-ink-2); }
.ml-badge--draft { color: var(--ml-ink-2); }
.ml-badge--in_progress { color: var(--ml-gold); border-color: color-mix(in srgb, var(--ml-gold) 40%, transparent); }
.ml-badge--published { color: var(--ml-ok); border-color: color-mix(in srgb, var(--ml-ok) 40%, transparent); }
.ml-badge--archived { color: var(--ml-ink-3); }
.ml-badge--deleted { color: var(--ml-err); border-color: color-mix(in srgb, var(--ml-err) 40%, transparent); }

/* ══ Grille / carte de livre ════════════════════════════════════════════ */
.ml-book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; }
.ml-book-card { display: flex; flex-direction: column; gap: .5rem; background: var(--ml-surface); border: 1px solid var(--ml-border); border-radius: var(--r); box-shadow: var(--ml-hi); padding: 1.25rem; text-decoration: none; color: inherit; transition: border-color var(--ml-t), transform var(--ml-t), box-shadow var(--ml-t); }
.ml-book-card:hover { border-color: var(--ml-border-2); transform: translateY(-3px); box-shadow: var(--ml-hi), var(--ml-shadow); }

/* ══ Liste / carte de section (éditeur) ═════════════════════════════════ */
.ml-section-list { display: flex; flex-direction: column; gap: .6rem; }
.ml-section-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--ml-surface); border: 1px solid var(--ml-border); border-radius: var(--r-sm); padding: .85rem 1rem; transition: border-color var(--ml-t), background var(--ml-t); }
.ml-section-card:hover { border-color: var(--ml-border-2); background: var(--ml-surface-2); }

/* ══ État vide / prose / séparateur ═════════════════════════════════════ */
.ml-empty { text-align: center; padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 1.5rem; border: 1px dashed var(--ml-border-2); border-radius: var(--r-lg); color: var(--ml-ink-2); background: var(--ml-surface); }
.ml-empty h2, .ml-empty h3 { color: var(--ml-ink); margin-bottom: .5rem; }
.ml-prose { max-width: 72ch; color: var(--ml-ink-2); line-height: 1.75; }
.ml-prose h1, .ml-prose h2, .ml-prose h3 { color: var(--ml-ink); font-weight: 600; letter-spacing: -.02em; margin: 1.75rem 0 .75rem; line-height: 1.2; }
.ml-prose h1 { font-size: 1.9rem; } .ml-prose h2 { font-size: 1.4rem; } .ml-prose h3 { font-size: 1.15rem; }
.ml-prose p { margin-bottom: 1rem; } .ml-prose ul, .ml-prose ol { margin: 0 0 1rem 1.3rem; } .ml-prose li { margin-bottom: .4rem; }
.ml-prose a { color: var(--ml-gold); border-bottom: 1px solid transparent; } .ml-prose a:hover { border-color: currentColor; }
.ml-divider { height: 1px; background: var(--ml-border); border: 0; margin: 1.5rem 0; }

/* ══ Sélecteur de langue (natif <details>, sans JS) ═════════════════════ */
.ml-langbtn { display: inline-flex; align-items: center; gap: .4rem; height: 38px; padding: 0 .7rem; border: 1px solid var(--ml-border); border-radius: var(--r-sm); background: var(--ml-surface); color: var(--ml-ink-2); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; transition: border-color var(--ml-t), color var(--ml-t); }
.ml-langbtn:hover { color: var(--ml-ink); border-color: var(--ml-border-2); }
.ml-langbtn svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.ml-langmodal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 1.5rem; padding-bottom: max(1.5rem, var(--safe-b)); background: rgba(0,0,0,.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.ml-langmodal.is-open { display: flex; }
.ml-langmodal__card { background: var(--ml-elev); border: 1px solid var(--ml-border); border-radius: var(--r-lg); box-shadow: var(--ml-shadow-lg); width: min(340px, 100%); max-height: 90vh; overflow: auto; }
.ml-langmodal__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--ml-border); font-weight: 600; color: var(--ml-ink); }
.ml-langmodal__close { background: none; border: none; color: var(--ml-ink-2); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: .25rem; }
.ml-langmodal__close:hover { color: var(--ml-ink); }
.ml-langmodal__list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.25rem; color: var(--ml-ink-2); text-decoration: none; border-bottom: 1px solid var(--ml-border); transition: background var(--ml-t), color var(--ml-t); }
.ml-langmodal__list a:last-child { border-bottom: none; }
.ml-langmodal__list a:hover { background: var(--ml-surface-2); color: var(--ml-ink); }
.ml-langmodal__list a.on { color: var(--ml-gold); font-weight: 600; }

/* ══ Shell app — barre latérale + zone de travail ═══════════════════════ */
body.ml-app { display: flex; flex-direction: row; align-items: stretch; }
.ml-side { width: 250px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--ml-bg-2); border-right: 1px solid var(--ml-border); position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; z-index: 60; }
.ml-side__brand { display: flex; align-items: center; gap: .55rem; padding: 1rem 1.1rem; text-decoration: none; }
.ml-side__mark { width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0; border: 1px solid var(--ml-border-2); border-radius: 8px; background: var(--ml-surface-2); color: var(--ml-gold); font-family: var(--ml-sans); font-style: italic; font-weight: 600; font-size: 1.15rem; box-shadow: var(--ml-hi); }
.ml-side__word { font-size: 1.02rem; font-weight: 600; letter-spacing: -.02em; color: var(--ml-ink); }
.ml-side__word b { font-weight: 600; font-size: .55rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ml-gold); vertical-align: super; margin-left: .15rem; }
.ml-side__nav { flex: 1; padding: .4rem .6rem 1rem; display: flex; flex-direction: column; gap: 2px; }
.ml-side__group { font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ml-ink-3); padding: 1rem .65rem .4rem; }
.ml-side__link { display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; border-radius: var(--r-sm); color: var(--ml-ink-2); text-decoration: none; font-size: .88rem; font-weight: 500; transition: background var(--ml-t), color var(--ml-t); }
.ml-side__link:hover { background: var(--ml-surface-2); color: var(--ml-ink); }
.ml-side__link--active { background: var(--ml-surface-2); color: var(--ml-ink); box-shadow: inset 2px 0 0 var(--ml-gold); }
.ml-side__link svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ml-side__cta { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: .6rem .65rem 0; padding: .6rem; border-radius: var(--r-sm); background: linear-gradient(180deg, var(--ml-gold-2), var(--ml-gold)); color: var(--ml-gold-ink); font-size: .82rem; font-weight: 600; text-decoration: none; box-shadow: var(--ml-hi), 0 6px 18px var(--ml-glow); transition: filter var(--ml-t); }
.ml-side__cta:hover { filter: brightness(1.06); }
.ml-side__foot { border-top: 1px solid var(--ml-border); padding: .7rem; padding-bottom: max(.7rem, var(--safe-b)); display: flex; flex-direction: column; gap: .6rem; }
.ml-side__user { display: flex; align-items: center; position: relative; }
.ml-side__user-btn { flex: 1; display: flex; align-items: center; gap: .5rem; padding: .4rem; border-radius: var(--r-sm); color: var(--ml-ink); cursor: pointer; min-width: 0; transition: background var(--ml-t); }
.ml-side__user-btn:hover { background: var(--ml-surface-2); }
.ml-side__user-name { font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-side__menu { position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; background: var(--ml-elev); border: 1px solid var(--ml-border); border-radius: var(--r-sm); box-shadow: var(--ml-shadow); overflow: hidden; display: none; z-index: 70; }
.ml-side__menu.is-open { display: block; }
.ml-side__menu a, .ml-side__menu button { display: block; width: 100%; text-align: left; padding: .6rem .85rem; color: var(--ml-ink-2); text-decoration: none; font-size: .83rem; cursor: pointer; transition: background var(--ml-t), color var(--ml-t); }
.ml-side__menu a:hover, .ml-side__menu button:hover { background: var(--ml-surface-2); color: var(--ml-ink); }
.ml-side__menu hr { border: 0; border-top: 1px solid var(--ml-border); margin: .25rem 0; }

.ml-shell { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ml-topbar { display: none; align-items: center; gap: .7rem; height: 56px; padding: 0 1rem; padding-top: var(--safe-t); flex-shrink: 0; border-bottom: 1px solid var(--ml-border); background: color-mix(in srgb, var(--ml-bg) 72%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 55; }
.ml-topbar__burger { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--ml-border); border-radius: var(--r-sm); background: var(--ml-surface); color: var(--ml-ink); cursor: pointer; }
.ml-topbar__burger svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; }
.ml-topbar__brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; }
.ml-main { flex: 1; padding: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); padding-bottom: max(clamp(1.25rem, 1rem + 1.5vw, 2.5rem), var(--safe-b)); max-width: 1140px; width: 100%; margin: 0 auto; }
.ml-side-ovl { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 59; }
.ml-side-ovl.is-open { display: block; }

.ml-guest-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 60px; padding: 0 clamp(1rem, .5rem + 2vw, 2rem); padding-top: var(--safe-t); border-bottom: 1px solid var(--ml-border); background: color-mix(in srgb, var(--ml-bg) 72%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 55; }

@media (max-width: 1023px) {
    .ml-side { position: fixed; top: 0; left: 0; bottom: 0; height: 100dvh; transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--ml-shadow-lg); }
    .ml-side.is-open { transform: none; }
    .ml-topbar { display: flex; }
}
@media (max-width: 640px) {
    .ml-book-grid { grid-template-columns: 1fr; }
    .ml-page-header { flex-direction: column; }
}

/* ══ Composants premium — redesign UX 2026 ══════════════════════════════ */
/* Hero d'en-tête de page (titre + sous-titre + compteurs + actions) */
.ml-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; padding-bottom: 1.5rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--ml-border); }
.ml-hero__eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ml-ink-3); margin-bottom: .6rem; }
.ml-hero__eyebrow::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--ml-gold); }
.ml-hero__title { font-family: var(--ml-sans); font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); font-weight: 600; letter-spacing: -.01em; color: var(--ml-ink); line-height: 1.08; }
.ml-hero__sub { margin-top: .55rem; color: var(--ml-ink-2); font-size: .98rem; max-width: 64ch; }
.ml-hero__meta { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.1rem; }
.ml-hero__actions { display: flex; gap: .6rem; flex-wrap: wrap; flex-shrink: 0; }

/* Compteur en pastille */
.ml-kpichip { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem; border: 1px solid var(--ml-border); border-radius: var(--r-sm); background: var(--ml-surface); box-shadow: var(--ml-hi); }
.ml-kpichip b { font-size: 1.05rem; font-weight: 700; color: var(--ml-ink); letter-spacing: -.02em; }
.ml-kpichip span { font-size: var(--fs-xs); color: var(--ml-ink-2); }

/* Tuile KPI */
.ml-kpi { background: var(--ml-surface); border: 1px solid var(--ml-border); border-radius: var(--r); padding: 1.25rem 1.35rem; box-shadow: var(--ml-hi); display: flex; flex-direction: column; gap: .75rem; transition: border-color var(--ml-t), transform var(--ml-t); }
.ml-kpi--hover:hover { border-color: var(--ml-border-2); transform: translateY(-2px); }
.ml-kpi__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ml-kpi__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ml-ink-3); }
.ml-kpi__val { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); font-weight: 700; letter-spacing: -.03em; color: var(--ml-ink); line-height: 1; }
.ml-kpi__ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--ml-gold-soft); color: var(--ml-gold); flex-shrink: 0; }
.ml-kpi__ico svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; fill: none; }

/* Barre d'outils : recherche + filtres + actions */
.ml-toolbar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.ml-toolbar__spacer { flex: 1; }
.ml-search { position: relative; display: inline-flex; align-items: center; min-width: 200px; flex: 1; max-width: 380px; }
.ml-search svg { position: absolute; left: .7rem; width: 16px; height: 16px; stroke: var(--ml-ink-3); stroke-width: 1.7; fill: none; pointer-events: none; }
.ml-search input { width: 100%; padding: .6rem .8rem .6rem 2.1rem; background: var(--ml-surface); border: 1px solid var(--ml-border-2); border-radius: var(--r-sm); font: inherit; font-size: .9rem; color: var(--ml-ink); }
.ml-search input:focus { outline: none; border-color: var(--ml-gold); box-shadow: 0 0 0 3px var(--ml-glow); }

/* Contrôle segmenté / onglets */
.ml-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--ml-surface-2); border: 1px solid var(--ml-border); border-radius: var(--r-sm); }
.ml-seg__btn { appearance: none; border: none; background: none; cursor: pointer; padding: .45rem .9rem; border-radius: calc(var(--r-sm) - 2px); font: inherit; font-size: .85rem; font-weight: 600; color: var(--ml-ink-2); display: inline-flex; align-items: center; gap: .45rem; transition: background var(--ml-t), color var(--ml-t); }
.ml-seg__btn:hover { color: var(--ml-ink); }
.ml-seg__btn.is-active { background: var(--ml-elev); color: var(--ml-ink); box-shadow: var(--ml-hi); }
.ml-seg__btn .ml-seg__count { font-size: .72rem; color: var(--ml-ink-3); font-weight: 600; }

/* Avatar monogramme */
.ml-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--ml-gold-soft); color: var(--ml-gold); font-weight: 700; font-size: .95rem; border: 1px solid color-mix(in srgb, var(--ml-gold) 30%, transparent); text-transform: uppercase; }
.ml-avatar--lg { width: 52px; height: 52px; font-size: 1.1rem; }
.ml-avatar--sq { border-radius: 10px; }

/* Ligne de liste riche */
.ml-listrow { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; background: var(--ml-surface); border: 1px solid var(--ml-border); border-radius: var(--r); box-shadow: var(--ml-hi); transition: border-color var(--ml-t), background var(--ml-t); }
.ml-listrow:hover { border-color: var(--ml-border-2); background: var(--ml-surface-2); }
.ml-listrow__body { flex: 1; min-width: 0; }
.ml-listrow__title { font-weight: 600; color: var(--ml-ink); }
.ml-listrow__meta { font-size: var(--fs-xs); color: var(--ml-ink-2); margin-top: .15rem; }
.ml-listrow__actions { display: flex; gap: .5rem; flex-shrink: 0; align-items: center; }

/* Sections de réglages (compte, profil, accessibilité) */
.ml-settings { display: flex; flex-direction: column; gap: 1.25rem; }
.ml-setgroup { background: var(--ml-surface); border: 1px solid var(--ml-border); border-radius: var(--r); box-shadow: var(--ml-hi); overflow: hidden; }
.ml-setgroup__head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--ml-border); }
.ml-setgroup__title { font-weight: 600; color: var(--ml-ink); }
.ml-setgroup__desc { font-size: var(--fs-sm); color: var(--ml-ink-2); margin-top: .2rem; }
.ml-setgroup__body { padding: 1.25rem; }
.ml-setrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-top: 1px solid var(--ml-border); }
.ml-setrow:first-child { border-top: none; }
.ml-setrow__label { font-weight: 500; color: var(--ml-ink); }
.ml-setrow__desc { font-size: var(--fs-sm); color: var(--ml-ink-2); margin-top: .15rem; max-width: 52ch; }

/* Chips de référence (livres, tags) */
.ml-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border: 1px solid var(--ml-border-2); border-radius: var(--pill); background: var(--ml-surface-2); font-size: var(--fs-xs); font-weight: 500; color: var(--ml-ink-2); }
.ml-chip--gold { color: var(--ml-gold); border-color: color-mix(in srgb, var(--ml-gold) 35%, transparent); background: var(--ml-gold-soft); }

/* Sous-nav réglages : défilement horizontal si trop d'onglets (mobile) */
.set-nav { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.set-nav::-webkit-scrollbar { height: 0; }

/* ══ Utilitaires — pour ne JAMAIS coder de style en dur dans les pages ══ */
.u-stack { display: flex; flex-direction: column; }
.u-row { display: flex; align-items: center; }
.u-row--top { display: flex; align-items: flex-start; }
.u-wrap { flex-wrap: wrap; }
.u-between { justify-content: space-between; }
.u-center-x { justify-content: center; }
.u-center { text-align: center; }
.u-grow { flex: 1; min-width: 0; }
.u-gap-1 { gap: .5rem; } .u-gap-2 { gap: 1rem; } .u-gap-3 { gap: 1.5rem; }
.u-mt-1 { margin-top: .5rem; } .u-mt-2 { margin-top: 1rem; } .u-mt-3 { margin-top: 1.5rem; } .u-mt-4 { margin-top: 2rem; }
.u-mb-1 { margin-bottom: .5rem; } .u-mb-2 { margin-bottom: 1rem; } .u-mb-3 { margin-bottom: 1.5rem; } .u-mb-4 { margin-bottom: 2rem; }
.u-muted { color: var(--ml-ink-2); } .u-faint { color: var(--ml-ink-3); }
.u-sm { font-size: var(--fs-sm); } .u-xs { font-size: var(--fs-xs); }
.u-narrow { max-width: 780px; margin-inline: auto; }
.u-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 560px) { .u-cols-2 { grid-template-columns: 1fr; } }

/* Vignettes de couverture (dashboard, bibliothèque, découverte) */
.ml-cover-thumb { width: 46px; height: 66px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--ml-border); flex-shrink: 0; }
.ml-cover-ph { width: 46px; height: 66px; border-radius: var(--r-sm); border: 1px solid var(--ml-border); background: var(--ml-surface-2); flex-shrink: 0; display: grid; place-items: center; color: var(--ml-ink-3); }
.ml-cover-ph svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.ml-cover-lg { width: 64px; height: 92px; }

/* ── Accessibilité & interactions ───────────────────────────────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--ml-ring); outline-offset: 2px; border-radius: var(--r-sm);
}
.ml-skip {
    position: absolute; left: -999px; top: 0; z-index: 999;
    background: var(--ml-gold); color: var(--ml-gold-ink);
    padding: .75rem 1rem; font-size: .8rem; font-weight: 600; border-radius: 0 0 var(--r-sm) 0;
}
.ml-skip:focus { left: 0; }

.ml-iconbtn { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 1px solid var(--ml-border); border-radius: var(--r-sm); background: var(--ml-surface); color: var(--ml-ink-2); cursor: pointer; transition: border-color var(--ml-t), color var(--ml-t); }
.ml-iconbtn:hover { border-color: var(--ml-border-2); color: var(--ml-ink); }

/* Options d'accessibilité (classes appliquées sur <body>) */
.acc-large_text { font-size: 112.5%; }
.acc-dyslexia_spacing { letter-spacing: .04em; word-spacing: .12em; line-height: 1.9; }
.acc-reduce_motion *, .acc-reduce_motion *::before, .acc-reduce_motion *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
:root[data-theme="dark"] .acc-high_contrast { --ml-ink-2: #E8EAED; --ml-ink-3: #C4C8CF; --ml-border: rgba(255,255,255,.42); --ml-border-2: rgba(255,255,255,.62); }
:root[data-theme="light"] .acc-high_contrast { --ml-ink-2: #2A2A2A; --ml-ink-3: #444; --ml-border: rgba(0,0,0,.5); --ml-border-2: rgba(0,0,0,.7); }

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .ml-reveal { animation: ml-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 20%; }
    }
}
@keyframes ml-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   CSS DE PAGE EXTERNALISÉ (aucun style en dur dans les templates)
   ══════════════════════════════════════════════════════════════════════ */

/* ── library/index ─────────────────────────────────────────── */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.1rem; }
    .book-card { background: var(--ml-surface); border: 1px solid var(--ml-border); border-radius: var(--r); box-shadow: var(--ml-hi); display: flex; flex-direction: column; transition: border-color var(--ml-t), transform var(--ml-t), box-shadow var(--ml-t); overflow: hidden; }
    .book-card:hover { border-color: var(--ml-border-2); transform: translateY(-3px); box-shadow: var(--ml-hi), var(--ml-shadow); }
    .book-card__body { display: flex; gap: 1rem; padding: 1.25rem; flex: 1; align-items: flex-start; }
    .book-card__cover { flex-shrink: 0; position: relative; }
    .book-card__cover a { display: block; }
    .book-card__cover img { width: 62px; height: 90px; object-fit: cover; border-radius: var(--r-sm); display: block; border: 1px solid var(--ml-border); box-shadow: 0 5px 16px rgba(0,0,0,.32); }
    .book-card__spine { position: absolute; left: 0; top: 0; width: 5px; height: 90px; background: rgba(0,0,0,.28); border-radius: var(--r-sm) 0 0 var(--r-sm); }
    .book-card__info { flex: 1; min-width: 0; }
    .book-card__title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; }
    .book-card__title { font-size: 1.1rem; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; color: var(--ml-ink); text-decoration: none; flex: 1; }
    .book-card__title:hover { color: var(--ml-gold); }
    .book-card__subtitle { font-size: .9rem; color: var(--ml-ink-2); margin-bottom: .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .book-card__meta { font-size: var(--fs-xs); color: var(--ml-ink-3); margin-top: .5rem; }
    .book-card__actions { display: flex; align-items: center; gap: .5rem; padding: .85rem 1.25rem; border-top: 1px solid var(--ml-border); background: var(--ml-surface-2); }

    .book-menu { position: relative; margin-left: auto; }
    .book-menu__btn { background: var(--ml-surface); border: 1px solid var(--ml-border-2); border-radius: var(--r-sm); color: var(--ml-ink-2); font-size: 1.1rem; line-height: 1; cursor: pointer; min-width: 38px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; transition: border-color var(--ml-t), color var(--ml-t); }
    .book-menu__btn:hover, .book-menu__btn.is-open { border-color: var(--ml-gold); color: var(--ml-gold); }
    .book-menu__dropdown { position: absolute; right: 0; bottom: calc(100% + 6px); background: var(--ml-elev); border: 1px solid var(--ml-border); border-radius: var(--r-sm); box-shadow: var(--ml-shadow); min-width: 210px; z-index: 100; display: none; overflow: hidden; }
    .book-menu__dropdown.is-open { display: block; }
    .book-menu__item, .book-menu__form-btn { display: block; width: 100%; text-align: left; padding: .6rem .85rem; font-size: .83rem; color: var(--ml-ink-2); text-decoration: none; background: none; border: none; cursor: pointer; transition: background var(--ml-t), color var(--ml-t); white-space: nowrap; }
    .book-menu__item:hover, .book-menu__form-btn:hover { background: var(--ml-surface-2); color: var(--ml-ink); }
    .book-menu__item--danger, .book-menu__form-btn--danger { color: var(--ml-err); }
    .book-menu__item--danger:hover, .book-menu__form-btn--danger:hover { background: color-mix(in srgb, var(--ml-err) 12%, transparent); }
    .book-menu__sep { height: 1px; background: var(--ml-border); margin: .25rem 0; }

    .lib-filters { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; flex-wrap: wrap; justify-content: space-between; }
    .lib-filter-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
    .lib-filter-tab { display: inline-flex; align-items: center; padding: .4rem .8rem; border-radius: var(--pill); font-size: .8rem; font-weight: 600; text-decoration: none; border: 1px solid var(--ml-border); color: var(--ml-ink-2); background: var(--ml-surface); transition: border-color var(--ml-t), color var(--ml-t), background var(--ml-t); white-space: nowrap; }
    .lib-filter-tab:hover { color: var(--ml-ink); border-color: var(--ml-border-2); }
    .lib-filter-tab--active { background: var(--ml-gold-soft); color: var(--ml-gold); border-color: color-mix(in srgb, var(--ml-gold) 45%, transparent); }
    .lib-sort { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--ml-ink-2); }
    .lib-sort select { font: inherit; font-size: .85rem; color: var(--ml-ink); background: var(--ml-surface); border: 1px solid var(--ml-border-2); border-radius: var(--r-sm); padding: .4rem .6rem; cursor: pointer; }
    .lib-sort select:focus { outline: none; border-color: var(--ml-gold); }

    .book-badge { display: inline-flex; align-items: center; padding: .2rem .55rem; border-radius: var(--pill); border: 1px solid var(--ml-border-2); font-size: var(--fs-xs); font-weight: 600; flex-shrink: 0; margin-top: 2px; background: var(--ml-surface-2); color: var(--ml-ink-2); }
    .book-badge--in_progress { color: var(--ml-gold); border-color: color-mix(in srgb, var(--ml-gold) 40%, transparent); }
    .book-badge--published { color: var(--ml-ok); border-color: color-mix(in srgb, var(--ml-ok) 40%, transparent); }
    .book-badge--archived { color: var(--ml-ink-3); }
    .book-badge--deleted { color: var(--ml-err); border-color: color-mix(in srgb, var(--ml-err) 40%, transparent); }

    .lib-empty { text-align: center; padding: clamp(3rem, 2rem + 4vw, 5rem) 2rem; border: 1px dashed var(--ml-border-2); border-radius: var(--r-lg); background: var(--ml-surface); }
    .lib-empty__orn { font-size: 3.5rem; font-weight: 700; color: var(--ml-border-2); line-height: 1; margin-bottom: 1rem; }
    .lib-empty__text { font-size: 1.1rem; color: var(--ml-ink-2); margin-bottom: 1.5rem; }

/* ── stats/index ─────────────────────────────────────────── */
.vstats { --vs-radius: 10px; }
.vstats-head { margin-bottom: 1.75rem; }
.vstats-title { font-family: var(--ml-sans); font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; color: var(--ml-ink); }
.vstats-sub { font-size: .98rem; color: var(--ml-ink-2); margin-top: .4rem; }

/* Onglets — scrollables, soulignement doré */
.vstats-tabs { display: flex; gap: .25rem; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--bdr); margin-bottom: 1.75rem; scrollbar-width: none; }
.vstats-tabs::-webkit-scrollbar { display: none; }
.vstats-tab { position: relative; background: none; border: none; cursor: pointer; white-space: nowrap;
  padding: .75rem 1.05rem; font-family: var(--ml-sans); font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-m); transition: color .2s; }
.vstats-tab::after { content: ''; position: absolute; left: .6rem; right: .6rem; bottom: -1px; height: 2px;
  background: var(--gold); border-radius: var(--r-sm) 2px 0 0; transform: scaleX(0); transition: transform .2s ease; }
.vstats-tab:hover { color: var(--ink); }
.vstats-tab.is-active { color: var(--gold); }
.vstats-tab.is-active::after { transform: scaleX(1); }

.vstats-panel { display: none; animation: vstatsFade .25s ease; }
.vstats-panel.is-active { display: block; }
@keyframes vstatsFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Cartes KPI */
.vstats-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; margin-bottom: 14px; }
.vkpi { position: relative; background: var(--ml-elev); border: 1px solid var(--bdr); border-radius: var(--vs-radius);
  padding: 1.15rem 1.3rem; box-shadow: 0 1px 2px rgba(28,24,20,.04), 0 6px 18px rgba(28,24,20,.04);
  transition: transform .2s ease, box-shadow .2s ease; overflow: hidden; }
.vkpi:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(28,24,20,.06), 0 12px 28px rgba(28,24,20,.08); }
.vkpi__val { font-family: var(--ml-sans); font-size: 2.15rem; font-weight: 700; line-height: 1; letter-spacing: -.03em;
  color: var(--ml-ink); font-variant-numeric: tabular-nums; }
.vkpi__lbl { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ml-ink-3); margin-top: .6rem; }
.vkpi--hero { background: linear-gradient(160deg, var(--ml-surface), var(--ml-gold-soft)); border-color: color-mix(in srgb, var(--ml-gold) 30%, var(--ml-border)); }
.vkpi--hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--ml-gold); }
.vkpi--hero .vkpi__val { color: var(--ml-gold); }
.vkpi--soft { background: var(--ml-surface-2); box-shadow: none; }
.vkpi--soft:hover { transform: none; box-shadow: 0 4px 14px rgba(28,24,20,.05); }

/* Titre de section avec filet doré */
.vstats-eyebrow { display: flex; align-items: center; gap: .6rem; font-family: var(--ml-sans); font-size: 10px;
  font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-m); margin: 1.75rem 0 .9rem; }
.vstats-eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--gold); border-radius: var(--r-sm); flex: none; }

/* Carte conteneur (heatmap, tables) */
.vstats-box { background: var(--ml-elev); border: 1px solid var(--bdr); border-radius: var(--vs-radius); padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(28,24,20,.04), 0 6px 18px rgba(28,24,20,.04); }

/* Heatmap */
.hm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .35rem; }
.hm-inner { display: inline-block; min-width: max-content; }
.hm-months { display: flex; margin-bottom: 5px; }
.hm-month { flex: 0 0 17px; width: 17px; font-family: var(--ml-sans); font-size: 9px; letter-spacing: .3px;
  color: var(--ink-m); white-space: nowrap; overflow: visible; }
.hm-cols { display: flex; gap: 3px; }
.hm-col { display: flex; flex-direction: column; gap: 3px; }
.hm-cell { width: 14px; height: 14px; border-radius: 3px; background: var(--sand-dp); transition: transform .1s ease; }
.hm-cell--on { background: var(--gold); }
.hm-cell--on:hover { transform: scale(1.25); }
.hm-cell--void { background: transparent; }
.vstats-legend { display: flex; align-items: center; gap: .45rem; font-size: 11px; color: var(--ink-m); margin-top: .85rem; }
.vstats-legend .hm-cell { width: 12px; height: 12px; }

/* Tables */
.vstats-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vstats-table th { text-align: left; font-family: var(--ml-sans); font-size: 9px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--ink-m); padding: .55rem .65rem; border-bottom: 1px solid var(--bdr); }
.vstats-table td { padding: .7rem .65rem; border-bottom: 1px solid var(--bdr); color: var(--ink-s); }
.vstats-table tbody tr:last-child td { border-bottom: none; }
.vstats-table tbody tr { transition: background .15s; }
.vstats-table tbody tr:hover td { background: var(--sand-d); }
.vstats-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.vstats-table .strong { font-weight: 600; color: var(--ink); }

.vstats-empty { text-align: center; padding: 3rem 1rem; color: var(--ink-m);
  font-family: var(--ml-sans); font-style: italic; font-size: 1.25rem; }
.vstats-soon { text-align: center; padding: 3.5rem 1rem; }
.vstats-soon__icon { font-family: var(--ml-sans); font-size: 3.5rem; font-style: italic; color: rgba(139,105,20,.2); line-height: 1; }
.vstats-soon__txt { font-family: var(--ml-sans); font-style: italic; font-size: 1.2rem; color: var(--ink-m); margin-top: .75rem; }

.vstats-pager { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 1.25rem; font-size: 12px; color: var(--ink-m); }

/* Objectifs */
.goals-toolbar { margin-bottom: 1rem; }
.goals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .9rem; }
.goals-field { display: flex; flex-direction: column; gap: .3rem; }
.goals-field > span { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-m); }
.goals-field select, .goals-field input { padding: 8px 10px; background: var(--sand-d); border: 1px solid var(--bdr);
  border-radius: 6px; color: var(--ink); font-size: 14px; font-family: var(--ml-sans); }
.goals-field select:focus, .goals-field input:focus { outline: none; border-color: var(--gold); }
.goals-field select:disabled, .goals-field input:disabled { opacity: .55; }
.goals-form__actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.goals-err { color: var(--red); font-size: 12px; margin-top: .6rem; }
.goals-list { display: flex; flex-direction: column; gap: .8rem; }
.goal-card { background: var(--ml-elev); border: 1px solid var(--bdr); border-radius: var(--vs-radius); padding: 1rem 1.2rem;
  box-shadow: 0 1px 2px rgba(28,24,20,.04), 0 6px 18px rgba(28,24,20,.04); }
.goal-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.goal-card__title { font-family: var(--ml-sans); font-size: 1.2rem; color: var(--ink); }
.goal-card__scope { font-size: 11px; color: var(--ink-m); margin-top: .1rem; }
.goal-card__actions { display: flex; gap: .3rem; flex: none; }
.goal-ibtn { background: none; border: 1px solid var(--bdr); border-radius: 6px; cursor: pointer; color: var(--ink-m);
  font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 9px; transition: color .15s, border-color .15s; }
.goal-ibtn:hover { color: var(--ink); border-color: var(--ink-m); }
.goal-ibtn--del:hover { color: var(--red); border-color: var(--red); }
.goal-bar { height: 9px; background: var(--sand-dp); border-radius: 5px; overflow: hidden; }
.goal-bar__fill { height: 100%; width: 0; background: var(--gold); border-radius: 5px; transition: width .5s ease; }
.goal-bar__fill.is-done { background: var(--grn); }
.goal-nums { font-size: 13px; color: var(--ink-s); margin-top: .5rem; font-variant-numeric: tabular-nums; }
.goal-reached { color: var(--grn); font-weight: 700; }
.goal-carry { color: var(--gold); font-size: 11px; font-weight: 600; }

/* Défis */
.chal-list { display: flex; flex-direction: column; gap: .9rem; }
.chal-card { background: var(--ml-elev); border: 1px solid var(--bdr); border-radius: var(--vs-radius); padding: 1.1rem 1.2rem;
  box-shadow: 0 1px 2px rgba(28,24,20,.04), 0 6px 18px rgba(28,24,20,.04); }
.chal-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.chal-card__title { font-family: var(--ml-sans); font-size: 1.35rem; color: var(--ink); }
.chal-state { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 2px 8px; border-radius: 10px; flex: none; }
.chal-state--ongoing  { background: rgba(58,122,58,.12);  color: var(--grn); }
.chal-state--upcoming { background: rgba(139,105,20,.12); color: var(--gold); }
.chal-state--ended    { background: rgba(107,94,82,.12);  color: var(--ink-m); }
.chal-card__desc { color: var(--ink-s); font-size: 13px; margin: .4rem 0; }
.chal-card__meta { font-size: 12px; color: var(--ink-m); margin-bottom: .4rem; }
.chal-join { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-top: .6rem; }
.chal-join select { padding: 6px 9px; background: var(--sand-d); border: 1px solid var(--bdr); border-radius: 6px;
  font-family: var(--ml-sans); font-size: 14px; }
.chal-join label { font-size: 12px; color: var(--ink-m); display: flex; align-items: center; gap: .3rem; }
.chal-actions { display: flex; gap: .4rem; margin-top: .6rem; flex-wrap: wrap; }
.chal-rank { margin-top: .7rem; border-top: 1px solid var(--bdr); padding-top: .5rem; }
.chal-rank ol { margin: 0; padding-left: 1.4rem; font-size: 13px; color: var(--ink-s); }
.chal-rank li { padding: .15rem 0; }
.chal-rank__done { color: var(--grn); font-weight: 700; }
.goal-deadline { font-family: var(--ml-sans); font-size: 1.4rem; color: var(--ink); }
.goal-deadline--over { color: var(--red); }

@media (max-width: 640px) {
    .vstats-title { font-size: 1.9rem; }
    .vstats-box { padding: 1rem; }
    /* Tables → cartes empilées */
    .vstats-table thead { display: none; }
    .vstats-table, .vstats-table tbody, .vstats-table tr, .vstats-table td { display: block; width: 100%; }
    .vstats-table tr { background: var(--ml-elev); border: 1px solid var(--bdr); border-radius: var(--vs-radius); margin-bottom: .7rem; padding: .35rem .25rem; }
    .vstats-table tbody tr:hover td { background: transparent; }
    .vstats-table td { border: none !important; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem .85rem; text-align: right; }
    .vstats-table td::before { content: attr(data-label); font-family: var(--ml-sans); font-weight: 700; font-size: 9px;
      letter-spacing: 1px; text-transform: uppercase; color: var(--ink-m); text-align: left; }
    .vstats-table td:first-child { font-weight: 600; border-bottom: 1px solid var(--bdr) !important; padding-bottom: .6rem; margin-bottom: .2rem; }
}

/* ── vault/index ─────────────────────────────────────────── */
.vlt-head { margin-bottom: 1.5rem; }
.vlt-title { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); font-weight: 600; letter-spacing: -.025em; color: var(--ml-ink); }
.vlt-sub { font-size: var(--fs-sm); color: var(--ml-ink-2); margin-top: .3rem; }
.vlt-gen { background: var(--ml-surface); border: 1px solid var(--ml-border); border-radius: var(--r); padding: 1.25rem; margin-bottom: 1.25rem; box-shadow: var(--ml-hi); }
.vlt-gen h2 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; margin-bottom: .4rem; color: var(--ml-ink); }
.vlt-gen p { font-size: .9rem; color: var(--ml-ink-2); margin-bottom: .8rem; }
.vlt-gen__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.vlt-gen__row select { flex: 1; min-width: 180px; padding: .6rem .7rem; background: var(--ml-surface); border: 1px solid var(--ml-border-2); border-radius: var(--r-sm); font: inherit; font-size: .92rem; color: var(--ml-ink); }
.vlt-btn { padding: .6rem 1.2rem; min-height: 42px; border-radius: var(--r-sm); border: 1px solid transparent; background: linear-gradient(180deg, var(--ml-gold-2), var(--ml-gold)); color: var(--ml-gold-ink); cursor: pointer; font-size: .9rem; font-weight: 600; box-shadow: var(--ml-hi); transition: filter var(--ml-t); }
.vlt-btn:hover { filter: brightness(1.06); }
.vlt-btn:disabled { opacity: .5; cursor: not-allowed; }
.vlt-note { font-size: .85rem; color: var(--ml-ink-3); }
.vlt-list { display: flex; flex-direction: column; gap: .6rem; }
.vlt-row { background: var(--ml-surface); border: 1px solid var(--ml-border); border-radius: var(--r); padding: 1rem 1.1rem; display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; align-items: center; box-shadow: var(--ml-hi); }
.vlt-row__work { font-size: 1.1rem; font-weight: 600; color: var(--ml-ink); }
.vlt-row__meta { font-size: var(--fs-xs); color: var(--ml-ink-2); }
.vlt-row__hash { font-family: var(--ml-mono); font-size: 11px; color: var(--ml-ink-3); word-break: break-all; grid-column: 1 / -1; }
.vlt-badge { display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: 600; padding: .15rem .5rem; border-radius: var(--pill); background: var(--ml-gold-soft); color: var(--ml-gold); border: 1px solid color-mix(in srgb, var(--ml-gold) 35%, transparent); }
.vlt-cert { color: var(--ml-gold); font-weight: 600; font-size: .85rem; white-space: nowrap; }
.vlt-cert:hover { text-decoration: underline; }
.vlt-empty { background: var(--ml-surface); border: 1px dashed var(--ml-border-2); border-radius: var(--r-lg); padding: 2.5rem; text-align: center; color: var(--ml-ink-2); }
.vlt-msg { margin-bottom: 1rem; font-size: .9rem; }

/* ── social/index ─────────────────────────────────────────── */
.soc-head { margin-bottom: 1.2rem; }
.soc-title { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); font-weight: 600; letter-spacing: -.03em; color: var(--ml-ink); }
.soc-sub { font-size: .98rem; color: var(--ml-ink-2); margin-top: .4rem; }
.soc-counts { display: flex; gap: .6rem; margin-top: 1.1rem; flex-wrap: wrap; }
.soc-count { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem; border: 1px solid var(--ml-border); border-radius: var(--r-sm); background: var(--ml-surface); box-shadow: var(--ml-hi); }
.soc-count b { font-size: 1.05rem; font-weight: 700; color: var(--ml-ink); font-variant-numeric: tabular-nums; }
.soc-count span { font-size: var(--fs-xs); color: var(--ml-ink-2); }

.soc-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--ml-border); margin: 1.5rem 0; flex-wrap: wrap; }
.soc-tab { background: none; border: none; cursor: pointer; padding: .6rem .9rem; font: inherit;
  font-size: .88rem; font-weight: 600; color: var(--ml-ink-2);
  border-bottom: 2px solid transparent; transition: color var(--ml-t), border-color var(--ml-t); }
.soc-tab:hover { color: var(--ml-ink); }
.soc-tab.is-active { color: var(--ml-gold); border-bottom-color: var(--ml-gold); }
.soc-tab .soc-badge { display: inline-block; min-width: 16px; padding: 0 5px; margin-left: .35rem; border-radius: 9px;
  background: var(--ml-gold); color: var(--ml-gold-ink); font-size: 9px; line-height: 16px; text-align: center; }

.soc-panel { display: none; }
.soc-panel.is-active { display: block; }
.soc-section-label { display: flex; align-items: center; gap: .6rem; font-size: var(--fs-xs);
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ml-ink-2); margin: 1.5rem 0 .8rem; }
.soc-section-label::before { content: ''; width: 22px; height: 2px; background: var(--ml-gold); border-radius: 2px; flex: none; }

.soc-list { display: flex; flex-direction: column; gap: .6rem; }
.soc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .9rem; }
.soc-card { background: var(--ml-surface); border: 1px solid var(--ml-border); border-radius: var(--r); padding: 1rem 1.1rem;
  display: flex; align-items: center; gap: .8rem; box-shadow: var(--ml-hi); transition: border-color var(--ml-t); }
.soc-card:hover { border-color: var(--ml-border-2); }
.soc-card--col { flex-direction: column; align-items: stretch; }
.soc-id { display: flex; align-items: center; gap: .7rem; min-width: 0; flex: 1; }
.soc-av { width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 14px; }
.soc-meta { min-width: 0; }
.soc-name { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; color: var(--ml-ink); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-bio { font-size: .82rem; color: var(--ml-ink-2); margin-top: .2rem; line-height: 1.45; }
.soc-tags { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .4rem; }
.soc-tag { font-size: var(--fs-xs); font-weight: 600; color: var(--ml-gold);
  background: var(--ml-gold-soft); border: 1px solid color-mix(in srgb, var(--ml-gold) 30%, transparent); border-radius: var(--pill); padding: .1rem .5rem; }
.soc-acts { display: flex; gap: .35rem; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.soc-card--col .soc-acts { justify-content: flex-start; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--ml-border); }
.soc-score { font-size: var(--fs-xs); color: var(--ml-ink-2); white-space: nowrap; align-self: center; }
.soc-score b { color: var(--ml-gold); font-variant-numeric: tabular-nums; }

.soc-filters { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1.25rem; }
.soc-filters .soc-fld { display: flex; flex-direction: column; gap: .3rem; }
.soc-filters label { font-size: var(--fs-xs); font-weight: 600; color: var(--ml-ink-2); }
.soc-filters input, .soc-filters select { padding: .55rem .75rem; background: var(--ml-surface); border: 1px solid var(--ml-border-2);
  border-radius: var(--r-sm); font: inherit; font-size: .9rem; color: var(--ml-ink); }
.soc-filters input:focus, .soc-filters select:focus { outline: none; border-color: var(--ml-gold); box-shadow: 0 0 0 3px var(--ml-glow); }
.soc-filters .soc-fld--grow { flex: 1; min-width: 180px; }
.soc-filters .soc-fld--grow input { width: 100%; }
.soc-more { text-align: center; margin-top: 1.25rem; }
.soc-disabled { padding: 2.5rem 1rem; text-align: center; color: var(--ml-ink-2); }

/* ── messages/index ─────────────────────────────────────────── */
.msg-wrap { display:grid; grid-template-columns:320px 1fr; gap:1rem; height:calc(100dvh - 140px); min-height:440px; }
.msg-pane { background:var(--ml-surface); border:1px solid var(--ml-border); border-radius:var(--r); display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--ml-hi); }
.msg-list__head { padding:.85rem 1rem; border-bottom:1px solid var(--ml-border); display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.msg-list__title { font-size:1.05rem; font-weight:600; letter-spacing:-.02em; color:var(--ml-ink); }
.msg-filters { display:inline-flex; padding:2px; gap:2px; background:var(--ml-surface-2); border:1px solid var(--ml-border); border-radius:var(--r-sm); }
.msg-fbtn { background:none; border:none; cursor:pointer; font-size:.72rem; font-weight:600; color:var(--ml-ink-2); padding:.3rem .6rem; border-radius:calc(var(--r-sm) - 2px); }
.msg-fbtn.on { color:var(--ml-ink); background:var(--ml-elev); box-shadow:var(--ml-hi); }
.msg-list__scroll { flex:1; overflow-y:auto; }
.msg-conv { display:flex; align-items:center; gap:.7rem; padding:.7rem 1rem; cursor:pointer; border-bottom:1px solid var(--ml-border); transition:background var(--ml-t); }
.msg-conv:hover { background:var(--ml-surface-2); }
.msg-conv.on { background:var(--ml-gold-soft); }
.msg-av { width:38px; height:38px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px; }
.msg-conv__body { min-width:0; flex:1; }
.msg-conv__name { font-size:.88rem; font-weight:600; color:var(--ml-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-conv__last { font-size:.8rem; color:var(--ml-ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-conv__unread { flex:none; min-width:18px; height:18px; border-radius:9px; background:var(--ml-gold); color:var(--ml-gold-ink); font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 5px; }
.msg-thread__head { padding:.85rem 1rem; border-bottom:1px solid var(--ml-border); display:flex; align-items:center; gap:.6rem; }
.msg-thread__name { font-size:1.05rem; font-weight:600; letter-spacing:-.02em; color:var(--ml-ink); flex:1; }
.msg-back { display:none; background:none; border:none; cursor:pointer; color:var(--ml-ink-2); font-size:18px; }
.msg-thread__scroll { flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.4rem; }
.msg-bubble { max-width:75%; padding:.5rem .8rem; border-radius:14px; font-size:.92rem; line-height:1.45; white-space:pre-wrap; word-break:break-word; position:relative; }
.msg-bubble--me { align-self:flex-end; background:linear-gradient(180deg,var(--ml-gold-2),var(--ml-gold)); color:var(--ml-gold-ink); border-bottom-right-radius:4px; }
.msg-bubble--them { align-self:flex-start; background:var(--ml-surface-2); color:var(--ml-ink); border:1px solid var(--ml-border); border-bottom-left-radius:4px; }
.msg-bubble__time { font-size:9px; opacity:.7; margin-top:2px; }
.msg-bubble__del { position:absolute; top:2px; right:-16px; background:none; border:none; color:var(--ml-ink-3); cursor:pointer; font-size:11px; opacity:0; }
.msg-bubble--me:hover .msg-bubble__del { opacity:.7; }
.msg-composer { display:flex; gap:.5rem; padding:.7rem 1rem; border-top:1px solid var(--ml-border); }
.msg-composer textarea { flex:1; resize:none; height:42px; padding:.6rem .8rem; background:var(--ml-surface); border:1px solid var(--ml-border-2); border-radius:var(--r-sm); font:inherit; font-size:.95rem; color:var(--ml-ink); }
.msg-composer textarea:focus { outline:none; border-color:var(--ml-gold); box-shadow:0 0 0 3px var(--ml-glow); }
.msg-empty-pane { flex:1; display:flex; align-items:center; justify-content:center; color:var(--ml-ink-2); font-size:1rem; padding:2rem; text-align:center; }
.msg-disabled { padding:3rem 1rem; text-align:center; color:var(--ml-ink-2); }
@media (max-width:767px){
  .msg-wrap { grid-template-columns:1fr; height:calc(100dvh - 120px); }
  .msg-wrap .msg-thread { display:none; }
  .msg-wrap.is-thread .msg-list { display:none; }
  .msg-wrap.is-thread .msg-thread { display:flex; }
  .msg-back { display:inline-block; }
}

/* ── discovery/index ─────────────────────────────────────────── */
.dsc-select { padding: .6rem .8rem; background: var(--ml-surface); border: 1px solid var(--ml-border-2); border-radius: var(--r-sm); font: inherit; font-size: .9rem; color: var(--ml-ink); cursor: pointer; }
    .dsc-select:focus { outline: none; border-color: var(--ml-gold); box-shadow: 0 0 0 3px var(--ml-glow); }
    .dsc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; }
    .dsc-card { display: flex; gap: 1rem; background: var(--ml-surface); border: 1px solid var(--ml-border); border-radius: var(--r); padding: 1.1rem; text-decoration: none; box-shadow: var(--ml-hi); transition: border-color var(--ml-t), transform var(--ml-t), box-shadow var(--ml-t); }
    .dsc-card:hover { border-color: var(--ml-border-2); transform: translateY(-3px); box-shadow: var(--ml-hi), var(--ml-shadow); }
    .dsc-cover { width: 64px; height: 92px; border-radius: var(--r-sm); flex: none; object-fit: cover; background: var(--ml-gold-soft); display: flex; align-items: center; justify-content: center; color: var(--ml-gold); font-size: 1.5rem; border: 1px solid var(--ml-border); }
    .dsc-card__body { min-width: 0; flex: 1; }
    .dsc-card__title { font-size: 1.15rem; font-weight: 600; letter-spacing: -.015em; color: var(--ml-ink); line-height: 1.25; }
    .dsc-card__by { font-size: var(--fs-xs); color: var(--ml-gold); margin: .2rem 0 .5rem; }
    .dsc-card__syn { font-size: .85rem; color: var(--ml-ink-2); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .dsc-more { text-align: center; margin-top: 1.5rem; }

/* ── library/universe ─────────────────────────────────────────── */
.uni-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.1rem; }
    .uni-none { grid-column: 1 / -1; }
    .uni-card__head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
    .uni-card__name { font-size: 1.15rem; font-weight: 600; letter-spacing: -.015em; color: var(--ml-ink); line-height: 1.2; }
    .uni-card__origin { font-size: var(--fs-xs); color: var(--ml-ink-2); margin-top: .2rem; }
    .uni-sec { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ml-ink-3); margin: 0 0 .35rem; }
    .uni-inst { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem 0; border-top: 1px solid var(--ml-border); }
    .uni-inst__main { min-width: 0; }
    .uni-inst__book { font-weight: 600; font-size: .9rem; color: var(--ml-ink); }
    .uni-inst__role { font-size: var(--fs-xs); color: var(--ml-ink-2); margin-top: .1rem; }
    .uni-inst__act { display: flex; gap: .35rem; flex-shrink: 0; }
    .uni-empty-inst { padding: .5rem 0; font-size: .85rem; color: var(--ml-ink-3); }
    .uni-add { display: flex; gap: .4rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--ml-border-2); flex-wrap: wrap; }
    .uni-add select { flex: 1; min-width: 130px; padding: .5rem .7rem; background: var(--ml-surface); border: 1px solid var(--ml-border-2); border-radius: var(--r-sm); font: inherit; font-size: .9rem; color: var(--ml-ink); }

    .uni-modal-ov { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
    .uni-modal-ov.is-open { display: flex; }
    .uni-modal { background: var(--ml-elev); width: min(520px, 96vw); border: 1px solid var(--ml-border); border-radius: var(--r-lg); padding: 1.5rem; box-shadow: var(--ml-shadow-lg); }
    .uni-modal h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; margin-bottom: 1.25rem; color: var(--ml-ink); }
    .uni-modal label { display: block; margin-bottom: .9rem; }
    .uni-modal label span { display: block; font-size: .8rem; font-weight: 600; color: var(--ml-ink-2); margin-bottom: .35rem; }
    .uni-modal input, .uni-modal textarea { width: 100%; padding: .6rem .75rem; background: var(--ml-surface); border: 1px solid var(--ml-border-2); border-radius: var(--r-sm); font: inherit; font-size: .95rem; color: var(--ml-ink); }
    .uni-modal input:focus, .uni-modal textarea:focus { outline: none; border-color: var(--ml-gold); box-shadow: 0 0 0 3px var(--ml-glow); }
    .uni-modal__act { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.25rem; }

/* Helpers de nettoyage inline (styles statiques externalisés) */
.u-ml-1 { margin-left: .5rem; }
.vlt-form { display: flex; flex-direction: column; gap: .5rem; max-width: 540px; }
.vlt-field { padding: .55rem .7rem; border: 1px solid var(--ml-border-2); border-radius: var(--r-sm); font: inherit; background: var(--ml-surface); color: var(--ml-ink); }
.vlt-pmsg { font-size: .85rem; margin-left: .5rem; }
.msg-conv-box { display: none; flex: 1; flex-direction: column; min-height: 0; }
.dsc-search { max-width: none; flex: 1; min-width: 220px; }
.st-emoji { font-size: 1.3rem; vertical-align: .05em; }
.st-pad { padding: 1rem; }