/* VACLAV — Feuille de styles principale */

:root {
    --bg:          #f5f4f0;
    --surface:     #ffffff;
    --surface-2:   #f9f8f5;
    --border:      #e4e2db;
    --border-2:    #d0cec5;
    --text:        #1a1917;
    --text-muted:  #706e69;
    --accent:      #2d5be3;
    --accent-h:    #1e44c0;
    --accent-soft: #eef2fd;
    --danger:      #c9321f;
    --danger-soft: #fdf2f1;
    --success:     #1a7a4a;
    --success-soft:#f0faf4;
    --warning:     #b45309;
    --warning-soft:#fffbeb;
    --violet:      #6741d9;

    --logo-mark-color: #2d5be3;
    --logo-text-color: #1a1917;

    --heatmap-0: #ede9e3;
    --heatmap-1: #c7d5f8;
    --heatmap-2: #7e9ef0;
    --heatmap-3: #2d5be3;
    --heatmap-4: #1e44c0;

    --r-sm:  4px;
    --r:     8px;
    --r-lg:  14px;
    --r-xl:  20px;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
    --shadow:    0 2px 8px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
    --shadow-md: 0 6px 24px rgba(0,0,0,.10);

    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', ui-monospace, monospace;

    --nav-h: 56px;
    --sidebar-w: 240px;

    /* — Échelle z-index — */
    --z-base:     1;
    --z-ui:       50;
    --z-dropdown: 100;
    --z-popover:  200;
    --z-modal:    300;
    --z-toast:    400;
    --z-tooltip:  500;

    /* — Séparateur textuel (breadcrumb, dividers) — */
    --text-separator: #b5b2ab;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; }

body {
    font-family: var(--font);
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* — Typographie — */
h1, h2, h3, h4 { font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; letter-spacing: -.01em; }
h3 { font-size: 1.05rem; }
p  { color: var(--text-muted); }
a  { color: var(--accent); text-decoration: none; }
/* Pas de soulignement au survol par défaut : les liens-cartes/blocs (ex. .lib-card-link)
   enveloppent titre + description + méta, et un underline global les barbouillait tous
   (cf. retour terrain biblio + « Par où commencer »). Le soulignement reste un OPT-IN
   explicite, réservé aux liens inline courts (.dash-section__link, .rel-item__target,
   .run-entry__prompt-link, .link-subtle…). NE PAS réintroduire de règle a:hover globale. */

/* — Layout principal — */
.app-shell {
    display: grid;
    grid-template-rows: var(--nav-h) 1fr auto;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-areas: "nav nav" "sidebar main" "footer footer";
    min-height: 100vh;
}

/* — Navigation — */
.app-nav {
    grid-area: nav;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.25rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.app-nav__logo {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -.03em;
    color: var(--logo-text-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 7px;
}

.app-nav__logo-mark {
    width: 20px;
    height: 20px;
    color: var(--logo-mark-color);
    fill: currentColor;
    flex-shrink: 0;
}

/* — Navigation 3 zones — */
.nav-zone         { display: flex; align-items: center; }
.nav-zone--left   { gap: .5rem; flex-shrink: 0; min-width: calc(var(--sidebar-w) - 1.25rem); }
.nav-zone--center { flex: 1; min-width: 0; max-width: 380px; margin: 0 1rem; }
.nav-zone--right  { gap: .5rem; flex-shrink: 0; margin-left: auto; }


/* Recherche globale — le form est le conteneur stylé, icône et input sont flex siblings */
.nav-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 34px;
    padding: 0 .85rem 0 .75rem;
    gap: .45rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    transition: border-color .14s, box-shadow .14s;
}
.nav-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.nav-search__label {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}
.nav-search__icon {
    flex-shrink: 0;
    color: var(--text-muted);
    pointer-events: none;
}
.nav-search__input {
    flex: 1;
    height: 100%;
    padding: 0;
    background: transparent;
    border: none;
    font-family: var(--font);
    font-size: .84rem;
    color: var(--text);
    outline: none;
    -webkit-appearance: none;
}
.nav-search__input::-webkit-search-decoration,
.nav-search__input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.nav-search__input::placeholder { color: var(--text-muted); opacity: .65; }

/* Bouton icône générique */
.nav-icon-btn {
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface-2);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .12s, color .12s, border-color .12s;
}
.nav-icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }

/* Dropdown partagé (AI + user menu) */
.nav-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: .4rem;
    min-width: 180px;
    box-shadow: var(--shadow-md);
    z-index: var(--z-popover);
    display: flex;
    flex-direction: column;
    gap: .1rem;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 150ms ease, transform 150ms ease, visibility 0s 150ms;
}
.nav-dropdown.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 150ms ease, transform 150ms ease, visibility 0s;
}
.nav-dropdown__section-label {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: .3rem .5rem .25rem;
}
/* Sous-titre explicatif du lanceur « Emporter dans une IA » */
.nav-dropdown__hint {
    font-size: .72rem;
    color: var(--text-muted);
    padding: 0 .5rem .4rem;
    line-height: 1.4;
    max-width: 16rem;
}
.nav-dropdown__item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .42rem .55rem;
    border-radius: var(--r);
    font-size: .85rem;
    color: var(--text);
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    width: 100%;
    font-family: var(--font);
    text-align: left;
    transition: background .1s;
}
.nav-dropdown__item:hover           { background: var(--surface-2); }
.nav-dropdown__item--danger         { color: var(--error, #d9534f); }
.nav-dropdown__item--danger:hover   { background: color-mix(in srgb, var(--error, #d9534f) 8%, transparent); color: var(--error, #d9534f); }
.nav-dropdown__divider              { height: 1px; background: var(--border); margin: .3rem 0; }

/* AI Launcher */
.nav-ai-launcher { position: relative; }

/* Accès rapide IA (drawer mobile) */
.nav-ai__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 7px;
    transition: transform .14s ease, box-shadow .14s ease;
}
.nav-ai__link:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 3px 9px color-mix(in srgb, #000 22%, transparent);
}
.nav-ai__link img { display: block; width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
    .nav-ai__link { transition: none; }
    .nav-ai__link:hover { transform: none; }
}

/* Menu utilisateur */
.nav-user-menu { position: relative; }
.nav-user-btn {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .35rem;
    border: 1px solid transparent;
    border-radius: var(--r);
    background: none;
    color: var(--text);
    cursor: pointer;
    font-family: var(--font);
    transition: background .12s, border-color .12s;
}
.nav-user-btn:hover { background: var(--surface-2); border-color: var(--border); }
.nav-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
}
.nav-user-name {
    font-size: .82rem;
    font-weight: 500;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-user-role                  { display: flex; align-items: center; }
.nav-user-dropdown              { min-width: 210px; }
.nav-user-dropdown__head        { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .4rem .55rem .3rem; }
.nav-user-dropdown__name        { font-size: .84rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

/* — Sidebar — */
.app-sidebar {
    grid-area: sidebar;
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 1rem 0;
    overflow-y: auto;
}

.sidebar-section { padding: .5rem 1rem .25rem; }
.sidebar-section__label {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0 .5rem .4rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .75rem;
    border-radius: var(--r);
    font-size: .875rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: background .12s, color .12s;
}

.sidebar-link:hover          { background: var(--surface-2); color: var(--text); text-decoration: none; }
.sidebar-link.is-active      { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.sidebar-link .icon          { width: 16px; height: 16px; opacity: .7; flex-shrink: 0; }
.sidebar-link.is-active .icon { opacity: 1; }
.sidebar-notif {
    margin-left: auto;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .3rem;
    background: #d94f3d;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

/* ─── Workspace indicator ───────────────────────────────────────────── */
.ws-indicator {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .75rem;
    margin: 0 .5rem .25rem;
    background: var(--accent-soft);
    border-radius: var(--r);
    border-left: 2px solid var(--accent);
    font-size: .78rem;
    font-weight: 600;
    color: var(--accent);
    overflow: hidden;
}
.ws-indicator__icon { width: 12px; height: 12px; flex-shrink: 0; }
.ws-indicator__name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ws-indicator__badge {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .04em;
    background: var(--accent);
    color: #fff;
    padding: .1rem .3rem;
    border-radius: 999px;
    flex-shrink: 0;
}

/* ─── Workspace switcher (super_admin) ──────────────────────────────── */
.ws-switcher {
    position: relative;
    margin: 0 .5rem .5rem;
}
.ws-switcher__btn {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    padding: .32rem .5rem;
    border-radius: var(--r);
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: .78rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color .14s, background .12s, color .12s;
}
.ws-switcher__btn:hover {
    border-color: var(--accent);
    color: var(--text);
}
.ws-switcher__current {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.ws-switcher__chevron {
    flex-shrink: 0;
    transition: transform 180ms cubic-bezier(.4,0,.2,1);
}
.ws-switcher.is-open .ws-switcher__chevron { transform: rotate(90deg); }

.ws-switcher__dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: .25rem;
    box-shadow: var(--shadow-md);
    z-index: var(--z-dropdown);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 150ms ease, transform 150ms ease, visibility 0s 150ms;
}
.ws-switcher.is-open .ws-switcher__dropdown {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 150ms ease, transform 150ms ease, visibility 0s;
}

.ws-switcher__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    width: 100%;
    padding: .35rem .5rem;
    border-radius: var(--r-sm);
    font-size: .8rem;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background .1s, color .1s;
}
.ws-switcher__option:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--text);
}
.ws-switcher__option.is-active {
    color: var(--accent);
    font-weight: 600;
}
.ws-switcher__option--inactive {
    opacity: .45;
    cursor: not-allowed;
}
.ws-switcher__opt-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ws-switcher__opt-meta { flex-shrink: 0; color: var(--accent); }

/* ─── Sidebar — Nouveau prompt (fond plein, calé sur .btn-primary du header) ─── */
.sidebar-link.sidebar-link--new-prompt {
    color: #fff;
    font-weight: 600;
    background: var(--accent);
    border: 1px solid var(--accent);
    /* margin-top marqué : détache le bouton du bloc nom-workspace au-dessus */
    margin: .85rem .5rem .1rem;
    border-radius: var(--r);
}
.sidebar-link.sidebar-link--new-prompt:hover {
    background: var(--accent-h);
    border-color: var(--accent-h);
    color: #fff;
}
.sidebar-link.sidebar-link--new-prompt.is-active {
    background: var(--accent-h);
    border-color: var(--accent-h);
    color: #fff;
}

/* ─── Sidebar — Fraîcheur Veille (dot discret) ───────────────────────── */
.sidebar-fresh-dot {
    display: none; /* affiché via JS quand il y a du nouveau */
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    margin-left: auto;
    flex-shrink: 0;
}

/* ─── Sidebar — Lien sous-élément (Statuts, Tags) ─────────────────────── */
.sidebar-link.sidebar-link--sub {
    padding-left: 1rem;
}

/* ─── Sidebar — Explorer groupes repliables ─────────────────────────── */
.sidebar-section--explorer { padding-bottom: .5rem; }

.sidebar-expl-group { margin-bottom: .1rem; }

.sidebar-expl-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: .3rem 1rem .3rem .75rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    gap: .3rem;
    text-align: left;
    opacity: .65;
    transition: opacity .12s, color .12s;
    border-radius: var(--r);
}
.sidebar-expl-toggle:hover { opacity: 1; color: var(--text); }
.sidebar-expl-toggle > :first-child { flex: 1; }

.sidebar-expl-chevron {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    transition: transform 180ms cubic-bezier(.4, 0, .2, 1);
}
.sidebar-expl-group.is-open > .sidebar-expl-toggle > .sidebar-expl-chevron {
    transform: rotate(90deg);
}

/* max-height collapse — cross-browser (iOS Safari < 16 ne supporte pas grid-template-rows: 0fr) */
.sidebar-expl-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 220ms ease;
}
.sidebar-expl-body-inner { }
.sidebar-expl-group.is-open > .sidebar-expl-body {
    max-height: 800px;
}

/* ─── Sidebar — Split-zone catégorie (label + chevron) ──────────────── */
.sidebar-cat-group { }

.sidebar-cat-row {
    display: flex;
    align-items: stretch;
}

.sidebar-cat-label {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: .4rem .5rem .4rem .75rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    border-radius: var(--r) 0 0 var(--r);
    transition: background .1s, color .1s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-cat-label:hover { background: var(--surface-2); text-decoration: none; }
.sidebar-cat-label.is-active { background: var(--accent-soft); color: var(--accent); }

.sidebar-cat-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 0 var(--r) var(--r) 0;
    flex-shrink: 0;
    padding: 0;
    transition: background .1s, color .1s;
}
.sidebar-cat-chevron:hover { background: var(--surface-2); color: var(--text); }
.sidebar-cat-chevron svg {
    width: 10px;
    height: 10px;
    transition: transform 160ms cubic-bezier(.4, 0, .2, 1);
}
.sidebar-cat-group.is-open > .sidebar-cat-row > .sidebar-cat-chevron svg {
    transform: rotate(90deg);
}

/* Sous-catégories */
.sidebar-cat-children {
    max-height: 0;
    overflow: hidden;
    transition: max-height 180ms ease;
}
.sidebar-cat-children-inner { }
.sidebar-cat-group.is-open > .sidebar-cat-children {
    max-height: 400px;
}

/* Liens de sous-catégorie */
.sidebar-link.sidebar-cat-sub {
    padding-left: 1.4rem;
    font-size: .83rem;
}

/* Séparation visuelle des sections de l'Explorer */
.sidebar-section--gestion {
    border-top: 1px solid var(--border);
    padding-top: .75rem;
    margin-top: .25rem;
}

/* ─── Drawer mobile — overrides pour le contexte touch ──────────────── */
.mobile-drawer__body .sidebar-link {
    border-radius: 0;
    padding: .625rem 1rem;
    min-height: 44px;
}
.mobile-drawer__body .sidebar-link.sidebar-link--new-prompt {
    margin: .25rem 1rem;
    border-radius: var(--r);
    min-height: 40px;
    justify-content: center;
}
.mobile-drawer__body .sidebar-expl-toggle {
    padding: .5rem 1rem .5rem 1rem;
    min-height: 44px;
}
.mobile-drawer__body .sidebar-cat-label {
    color: var(--text);
    border-radius: 0;
    padding: .625rem .75rem .625rem 1rem;
    min-height: 44px;
}
.mobile-drawer__body .sidebar-cat-chevron {
    border-radius: 0;
    width: 2.75rem;
    min-height: 44px;
}
.mobile-drawer__body .sidebar-link.sidebar-cat-sub {
    padding-left: 2rem;
    min-height: 40px;
}
.mobile-drawer__body .sidebar-section__label {
    padding: .875rem 1rem .3rem;
}
.mobile-drawer__body .sidebar-link.sidebar-link--sub {
    padding-left: 1.5rem;
}

/* Catégories hiérarchiques dans la sidebar (compatibilité — sera nettoyé post itération B) */
.sidebar-cat-domain { font-weight: 600; color: var(--text); }
.sidebar-cat-sub {
    padding-left: 1.6rem;
    font-size: .82rem;
}

/* — Contenu principal — */
.app-main {
    grid-area: main;
    overflow-y: auto;
    padding: 2rem;
}

.app-footer {
    grid-area: footer;
    background: #111110;
    border-top: 1px solid #1e1d1b;
    padding: 1.1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    text-align: center;
}

.footer-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    opacity: .8;
    transition: opacity .2s;
}
.footer-logo:hover { opacity: 1; text-decoration: none; }

.footer-logo__img {
    display: block;
    height: 20px;
    width: auto;
}

.footer-tagline {
    color: #9c9a96;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0;
}

.app-footer__copy {
    font-size: .68rem;
    letter-spacing: .06em;
    color: #ffffff;
    margin: 0;
    opacity: .45;
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

/* — Focus rings accessibles (clavier uniquement) — */
.btn:focus-visible,
a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* — Cartes — */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 150ms ease, transform 150ms ease;
}
/* Lift au survol pour les cartes cliquables */
a:hover > .card {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    text-decoration: none;
}

/* — Boutons — */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .45rem 1rem;
    border-radius: var(--r);
    font-size: .875rem;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .12s, color .12s, border-color .12s, box-shadow .12s;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1.4;
}

.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

.btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.btn-primary:hover:not(:disabled) {
    background: var(--accent-h);
    border-color: var(--accent-h);
    text-decoration: none;
    color: #fff;
}

.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-2);
    box-shadow: var(--shadow-sm);
}
.btn-secondary:hover:not(:disabled) {
    background: var(--surface-2);
    text-decoration: none;
    color: var(--text);
}

.btn-danger {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: transparent;
}
.btn-danger:hover:not(:disabled) {
    background: var(--danger);
    color: #fff;
    text-decoration: none;
}

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: transparent;
}
.btn-ghost:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--text);
    text-decoration: none;
}

.btn-sm { padding: .3rem .7rem; font-size: .8rem; }
.btn-lg { padding: .6rem 1.4rem; font-size: 1rem; }

/* — Formulaires — */
.field { display: flex; flex-direction: column; gap: .35rem; }
.field + .field { margin-top: 1rem; }

/* Grille 2 colonnes de champs — annule le margin-top inter-champs */
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.field-row .field + .field { margin-top: 0; }

/* Modificateurs d'espacement */
.field--mt     { margin-top: 1rem; }
.field--no-gap { margin-top: 0; }

label {
    font-size: .8rem;
    font-weight: 500;
    color: var(--text);
    letter-spacing: .01em;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
    width: 100%;
    padding: .5rem .75rem;
    border: 1px solid var(--border-2);
    border-radius: var(--r);
    font-size: .9rem;
    font-family: var(--font);
    color: var(--text);
    background: var(--surface);
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(45, 91, 227, .12);
}

textarea {
    resize: vertical;
    font-family: var(--font-mono);
    font-size: .85rem;
    line-height: 1.7;
    min-height: 140px;
}

.field-hint { font-size: .775rem; color: var(--text-muted); }

/* — Flash / Alertes — */
.alert {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem 1rem;
    border-radius: var(--r);
    font-size: .875rem;
    margin-bottom: 1.25rem;
    border: 1px solid transparent;
}

.alert-error   { background: var(--danger-soft);  color: var(--danger);  border-color: #f5c6c2; }
.alert-success { background: var(--success-soft); color: var(--success); border-color: #b7e4cc; }
.alert-warning { background: var(--warning-soft); color: var(--warning); border-color: #fcd89a; }

/* — Fil d'Ariane — */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.breadcrumb a         { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover   { color: var(--text); }
.breadcrumb .sep      { color: var(--text-separator); }
.breadcrumb .current  { color: var(--text); font-weight: 500; }

/* — Barre d'action unifiée (atelier + détail) ──────────────────────────
   Bandeau d'en-tête pleine largeur (3 zones logiques), en flux normal.
   NB : pas de position:sticky — .app-main porte overflow-y:auto, ce qui
   confine tout sticky à un scrollport qui ne défile jamais (la fenêtre
   défile l'app-shell). Un vrai sticky imposerait de faire de .app-main le
   conteneur de défilement (app-shell height:100vh + footer épinglé), un
   changement global hors périmètre. Conteneur = .actionbar ; zones =
   __left / __center / __right. Le menu « ⋯ » réutilise .nav-dropdown. */
.actionbar {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem 2rem;
    border-bottom: 1px solid var(--border);
    margin: -2rem -2rem 1.5rem;
}
.actionbar__left,
.actionbar__right {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
}
.actionbar__right { margin-left: auto; }
.actionbar__center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0 auto;
}
.actionbar__title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--text);
}

/* Menu de débordement « ⋯ » */
.actionbar__menu { position: relative; }
.actionbar__menu-toggle { font-size: 1.05rem; line-height: 1; padding: .3rem .6rem; }
.actionbar-dropdown { right: 0; left: auto; min-width: 196px; }
.actionbar-dropdown form { margin: 0; width: 100%; }

/* — Badges statut workflow — */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .6rem;
    border-radius: 9999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.badge-draft         { background: var(--surface-2); color: var(--text-muted); }
.badge-pending       { background: var(--warning-soft); color: var(--warning); }
.badge-published     { background: var(--success-soft); color: var(--success); }
.badge-rejected      { background: var(--danger-soft); color: var(--danger); }
.badge-archived      { background: var(--surface-2); color: var(--text-muted); }

/* — Authentification — */
.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--bg);
    padding: 2rem 1rem;
}

.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 2rem;
    box-shadow: var(--shadow-md);
}

.auth-logo {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 2rem;
}

.auth-logo-mark {
    width: 28px;
    height: 28px;
    color: var(--logo-mark-color);
    fill: currentColor;
    flex-shrink: 0;
}

.auth-logo-text { font-weight: 700; font-size: 1.1rem; letter-spacing: -.03em; }

.auth-title { font-size: 1.15rem; margin-bottom: .25rem; }
.auth-sub   { font-size: .85rem; color: var(--text-muted); margin-bottom: 1.5rem; }

/* — Responsive — */
@media (max-width: 768px) {
    :root { --sidebar-w: 0px; }

    .app-shell {
        grid-template-columns: 1fr;
        grid-template-areas: "nav" "main" "footer";
    }

    .app-sidebar { display: none; }
    .app-main    { padding: 1rem; }
    .app-footer  { padding: 1.1rem 1rem; }

    .actionbar {
        flex-wrap: wrap;
        padding: .55rem 1rem;
        margin: -1rem -1rem 1rem;
    }
    /* Zone centrale (transitions workflow) → ligne dédiée sous gauche/droite */
    .actionbar__center {
        order: 10;
        flex-basis: 100%;
        margin: 0;
        justify-content: flex-start;
    }
    .actionbar__center:empty { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   THÈMES
   ═══════════════════════════════════════════════════════════ */

/* Thème Sombre */
[data-theme="dark"] {
    --bg:          #111110;
    --surface:     #1c1b19;
    --surface-2:   #232220;
    --border:      #2e2c28;
    --border-2:    #3d3b36;
    --text:        #f0ede8;
    --text-muted:  #9c9a96;
    --accent:      #5b82ff;
    --accent-h:    #7298ff;
    --accent-soft: #1a2444;
    --danger:      #ff6b57;
    --danger-soft: #2a1510;
    --success:     #4ade80;
    --success-soft:#0d2416;
    --warning:     #fbbf24;
    --warning-soft:#2a1e08;
    --violet:      #a78bfa;
    --logo-mark-color: #5b82ff;
    --logo-text-color: #f0ede8;
    --text-separator:  #5a5856;
    --heatmap-0: #1c1b19;
    --heatmap-1: #1a2444;
    --heatmap-2: #1e3478;
    --heatmap-3: #2d5be3;
    --heatmap-4: #5b82ff;
}

/* Thème Océan */
[data-theme="ocean"] {
    --heatmap-0: #dce9ff;
    --heatmap-1: #9db4ee;
    --heatmap-2: #5b82ff;
    --heatmap-3: #1d6aed;
    --heatmap-4: #1255c8;
    --bg:          #eef4ff;
    --surface:     #ffffff;
    --surface-2:   #f5f8ff;
    --border:      #ccd9f5;
    --border-2:    #9db4ee;
    --text:        #0d1b40;
    --text-muted:  #3d5a8a;
    --accent:      #1d6aed;
    --accent-h:    #1255c8;
    --accent-soft: #dce9ff;
    --danger:      #e53e3e;
    --danger-soft: #fff0f0;
    --success:     #1a7a4a;
    --success-soft:#f0faf4;
    --warning:     #b45309;
    --warning-soft:#fffbeb;
    --violet:      #6741d9;
    --text-separator: #9db4d8;
}

/* Thème Forêt */
[data-theme="forest"] {
    --heatmap-0: #d5e8d0;
    --heatmap-1: #a8cfa2;
    --heatmap-2: #5aaa68;
    --heatmap-3: #2a7a3e;
    --heatmap-4: #1d5e2e;
    --bg:          #f0f5ee;
    --surface:     #ffffff;
    --surface-2:   #f5f8f3;
    --border:      #d0dbc8;
    --border-2:    #b3c4a8;
    --text:        #162216;
    --text-muted:  #4a6644;
    --accent:      #2a7a3e;
    --accent-h:    #1d5e2e;
    --accent-soft: #e2f5e6;
    --danger:      #c9321f;
    --danger-soft: #fdf2f1;
    --success:     #1a7a4a;
    --success-soft:#f0faf4;
    --warning:     #b45309;
    --warning-soft:#fffbeb;
    --violet:      #6741d9;
    --text-separator: #b0c4ab;
}

/* Thème Minuit */
[data-theme="midnight"] {
    --heatmap-0: #141228;
    --heatmap-1: #1e1650;
    --heatmap-2: #3d2e8a;
    --heatmap-3: #8b6eff;
    --heatmap-4: #a686ff;
    --bg:          #0c0b18;
    --surface:     #141228;
    --surface-2:   #1c1a35;
    --border:      #2a2650;
    --border-2:    #3d3868;
    --text:        #e8e0ff;
    --text-muted:  #8b7db8;
    --accent:      #8b6eff;
    --accent-h:    #a686ff;
    --accent-soft: #1e1650;
    --danger:      #ff6b8a;
    --danger-soft: #2a0e1a;
    --success:     #68eaaf;
    --success-soft:#0a2018;
    --warning:     #fbbf24;
    --warning-soft:#1e1506;
    --violet:      #b9a0ff;
    --text-separator: #4a4570;
}

/* ═══════════════════════════════════════════════════════════
   SPLASH SCREEN
   ═══════════════════════════════════════════════════════════ */

.splash-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: linear-gradient(145deg, #1a2f7a 0%, #2d5be3 50%, #1a3a9a 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: splashFade 6.0s cubic-bezier(.4,0,.2,1) forwards;
    pointer-events: none;
    overflow: hidden;
}

/* Lueur ambiante derrière le mark */
.splash-overlay::before {
    content: '';
    position: absolute;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(91,130,255,.30) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
    animation: splashGlow 6.0s cubic-bezier(.4,0,.2,1) forwards;
}

/* Vignette subtile sur les bords */
.splash-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(10,18,60,.55) 100%);
    pointer-events: none;
}

@keyframes splashFade {
    0%   { opacity: 0; }
    9%   { opacity: 1; }
    83%  { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes splashGlow {
    0%, 5%   { opacity: 0; transform: scale(.2); }
    22%, 83% { opacity: 1; transform: scale(1); }
    100%     { opacity: 0; transform: scale(1.4); }
}

.splash-mark {
    width: 128px;
    height: 128px;
    fill: #ffffff;
    position: relative;
    z-index: 1;
    margin-bottom: 2.25rem;
    animation: splashMark 6.0s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes splashMark {
    0%       { transform: scale(.25) translateY(28px); opacity: 0; }
    20%      { transform: scale(1.09) translateY(0);   opacity: 1; }
    28%, 83% { transform: scale(1)    translateY(0);   opacity: 1; }
    100%     { transform: scale(1.05) translateY(-12px); opacity: 0; }
}

.splash-name {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .72em;
    text-transform: uppercase;
    font-family: 'Inter', system-ui, sans-serif;
    position: relative;
    z-index: 1;
    padding-left: .72em;
    margin-bottom: 1.1rem;
    animation: splashName 6.0s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes splashName {
    0%, 20% { opacity: 0; letter-spacing: 1.1em; transform: translateY(10px); }
    38%     { opacity: 1; letter-spacing: .28em;  transform: translateY(0); }
    83%     { opacity: 1; letter-spacing: .28em; }
    100%    { opacity: 0; letter-spacing: .28em; }
}

.splash-tagline {
    color: rgba(255,255,255,.42);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-family: 'Inter', system-ui, sans-serif;
    position: relative;
    z-index: 1;
    animation: splashTagline 6.0s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes splashTagline {
    0%, 44%  { opacity: 0; transform: translateY(7px); }
    60%      { opacity: 1; transform: translateY(0); }
    83%      { opacity: 1; }
    100%     { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .splash-overlay { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   PAGE DE CONNEXION — SPLIT SCREEN
   ═══════════════════════════════════════════════════════════ */

.auth-split {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.auth-split__brand {
    background: linear-gradient(145deg, #1a2f7a 0%, #2d5be3 50%, #1a3a9a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}

.auth-split__brand::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 20% 80%, rgba(255,255,255,.06) 0%, transparent 60%),
        radial-gradient(ellipse 40% 60% at 80% 20%, rgba(255,255,255,.04) 0%, transparent 60%);
}

.auth-split__brand::after {
    content: 'V';
    position: absolute;
    right: -2rem;
    bottom: -3rem;
    font-size: 22rem;
    font-weight: 900;
    color: rgba(255,255,255,.04);
    line-height: 1;
    letter-spacing: -.06em;
    pointer-events: none;
    user-select: none;
}

.auth-brand-content {
    position: relative;
    z-index: 1;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.auth-brand-logo {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.auth-brand-mark {
    width: 40px;
    height: 40px;
    fill: rgba(255,255,255,.92);
    flex-shrink: 0;
}

.auth-brand-name {
    color: rgba(255,255,255,.95);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.auth-brand-quote {
    border: none;
    padding: 0;
    margin: 0;
}

.auth-brand-quote p {
    color: rgba(255,255,255,.9);
    font-size: 1.2rem;
    line-height: 1.65;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.01em;
    quotes: "\00AB" "\00BB";
}

.auth-brand-quote p::before { content: open-quote; }
.auth-brand-quote p::after  { content: close-quote; }

.auth-brand-quote footer {
    margin-top: 1.25rem;
    color: rgba(255,255,255,.55);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .04em;
    font-style: normal;
}

.auth-brand-quote footer::before { content: '— '; }

.auth-brand-tagline {
    color: rgba(255,255,255,.4);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-top: 1px solid rgba(255,255,255,.12);
    padding-top: 1.5rem;
}

.auth-split__form {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: 2.5rem 2rem;
}

.auth-form-panel {
    width: 100%;
    max-width: 360px;
}

.auth-form-panel .auth-title {
    font-size: 1.5rem;
    margin-bottom: .5rem;
    letter-spacing: -.03em;
}

.auth-form-panel .auth-sub {
    font-size: .875rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

/* Responsive login */
@media (max-width: 860px) {
    .auth-split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .auth-split__brand {
        padding: 2.5rem 2rem;
        min-height: 0;
    }
    .auth-split__brand::after { display: none; }
    .auth-brand-content { gap: 1.5rem; }
    .auth-brand-quote p { font-size: 1rem; }
}

/* ═══════════════════════════════════════════════════════════
   SÉLECTEUR DE THÈME
   ═══════════════════════════════════════════════════════════ */

.theme-switcher {
    position: relative;
}

.theme-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--border-2);
    background: conic-gradient(#2d5be3 0deg 72deg, #111110 72deg 144deg, #1d6aed 144deg 216deg, #2a7a3e 216deg 288deg, #8b6eff 288deg 360deg);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    flex-shrink: 0;
}

.theme-btn:hover {
    transform: scale(1.12);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.theme-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: .5rem;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 160px;
    z-index: var(--z-popover);
    /* Apparition animée */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 150ms ease, transform 150ms ease, visibility 0s 150ms;
}
.theme-dropdown.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 150ms ease, transform 150ms ease, visibility 0s;
}

.theme-option {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .45rem .65rem;
    border-radius: var(--r);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    font-family: var(--font);
    font-size: .85rem;
    color: var(--text);
    text-align: left;
    transition: background .1s;
}

.theme-option:hover { background: var(--surface-2); }
.theme-option.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }

.theme-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1.5px solid rgba(0,0,0,.08);
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD
   ═══════════════════════════════════════════════════════════ */

.dashboard-welcome {
    margin-bottom: 2rem;
}

.dashboard-welcome h1 {
    font-size: 1.7rem;
    margin-bottom: .25rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: .35rem;
    text-decoration: none;
    transition: box-shadow .15s, transform .15s;
}

a.stat-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    text-decoration: none;
}

.stat-value {
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -.04em;
    color: var(--text);
    line-height: 1;
}

.stat-label {
    font-size: .8rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.stat-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--r);
    display: grid;
    place-items: center;
    margin-bottom: .25rem;
}

.stat-icon svg { width: 20px; height: 20px; }

.stat-card--total   .stat-icon { background: var(--accent-soft);   color: var(--accent); }
.stat-card--pub     .stat-icon { background: var(--success-soft);   color: var(--success); }
.stat-card--fav     .stat-icon { background: var(--warning-soft);   color: var(--warning); }
.stat-card--draft   .stat-icon { background: var(--surface-2);      color: var(--text-muted); }

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.dashboard-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.dashboard-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.dashboard-panel__head h2 {
    font-size: .9rem;
    font-weight: 600;
}

.dashboard-panel__head a {
    font-size: .78rem;
    color: var(--accent);
}

.activity-list { list-style: none; }

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem 1.25rem;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    transition: background .1s;
}

.activity-item:last-child { border-bottom: none; }

a.activity-item:hover { background: var(--surface-2); text-decoration: none; }

.activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    margin-top: .45rem;
    flex-shrink: 0;
}

.activity-dot--run    { background: var(--success); }
.activity-dot--prompt { background: var(--accent); }

.activity-text {
    flex: 1;
    min-width: 0;
}

.activity-title {
    font-size: .875rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-meta {
    font-size: .75rem;
    color: var(--text-muted);
    margin-top: .1rem;
}

.dashboard-empty {
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--text-muted);
    font-size: .875rem;
}

.quickactions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    padding: .75rem;
}

.qa-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: .9rem .5rem;
    border-radius: var(--r);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: .78rem;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    transition: background .12s, box-shadow .12s;
}

.qa-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); text-decoration: none; }

.qa-btn svg { width: 22px; height: 22px; opacity: .7; }
.qa-btn:hover svg { opacity: 1; }

@media (max-width: 900px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   TOOLTIPS
   ═══════════════════════════════════════════════════════════ */

[data-tip] {
    position: relative;
}

[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--text);
    color: var(--bg);
    font-size: .72rem;
    font-weight: 400;
    font-family: var(--font);
    line-height: 1.45;
    padding: .4rem .65rem;
    border-radius: var(--r);
    white-space: normal;
    max-width: 200px;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s, transform .18s;
    z-index: 9000;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
}

[data-tip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 5px solid transparent;
    border-top-color: var(--text);
    opacity: 0;
    transition: opacity .18s, transform .18s;
    pointer-events: none;
    z-index: 9001;
}

[data-tip]:hover::after,
[data-tip]:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

[data-tip]:hover::before {
    transform: translateX(-50%) translateY(0);
}

[data-tip-pos="bottom"]::after {
    bottom: auto;
    top: calc(100% + 7px);
    transform: translateX(-50%) translateY(-4px);
}
[data-tip-pos="bottom"]::before {
    bottom: auto;
    top: calc(100% + 3px);
    border-top-color: transparent;
    border-bottom-color: var(--text);
    transform: translateX(-50%) translateY(-4px);
}
[data-tip-pos="bottom"]:hover::after  { transform: translateX(-50%) translateY(0); }
[data-tip-pos="bottom"]:hover::before { transform: translateX(-50%) translateY(0); }

[data-tip-pos="right"]::after {
    bottom: auto;
    top: 50%;
    left: calc(100% + 7px);
    transform: translateY(-50%) translateX(-4px);
    max-width: 220px;
}
[data-tip-pos="right"]::before {
    bottom: auto;
    top: 50%;
    left: calc(100% + 2px);
    border-top-color: transparent;
    border-right-color: var(--text);
    transform: translateY(-50%) translateX(-4px);
}
[data-tip-pos="right"]:hover::after  { transform: translateY(-50%) translateX(0); }
[data-tip-pos="right"]:hover::before { transform: translateY(-50%) translateX(0); }

.doc-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    color: var(--text-muted);
    font-size: .6rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    opacity: .5;
    transition: opacity .15s, color .15s;
    flex-shrink: 0;
    vertical-align: middle;
}
.doc-help:hover { opacity: 1; color: var(--accent); }

[data-tip-pos="left"]::after {
    bottom: auto;
    top: 50%;
    left: auto;
    right: calc(100% + 7px);
    transform: translateY(-50%) translateX(4px);
    max-width: 220px;
}
[data-tip-pos="left"]::before {
    bottom: auto;
    top: 50%;
    left: auto;
    right: calc(100% + 2px);
    border-top-color: transparent;
    border-left-color: var(--text);
    transform: translateY(-50%) translateX(4px);
}
[data-tip-pos="left"]:hover::after  { transform: translateY(-50%) translateX(0); }
[data-tip-pos="left"]:hover::before { transform: translateY(-50%) translateX(0); }

/* ═══════════════════════════════════════════════════════════
   PAGE DOCUMENTATION
   ═══════════════════════════════════════════════════════════ */

.doc-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2.5rem;
    align-items: start;
}

.doc-nav {
    position: sticky;
    top: calc(var(--nav-h) + 2rem);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: .75rem 0;
    box-shadow: var(--shadow-sm);
}

.doc-nav__section {
    padding: .5rem 1rem .25rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.doc-nav a {
    display: block;
    padding: .38rem 1rem;
    font-size: .82rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: background .1s, color .1s;
    border-radius: 0;
}

.doc-nav a:hover { background: var(--surface-2); color: var(--text); }
.doc-nav a.is-active { color: var(--accent); font-weight: 500; }

.doc-content {
    min-width: 0;
}

.doc-section {
    margin-bottom: 3rem;
    scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}

.doc-section h2 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--border);
}

.doc-section h3 {
    font-size: 1rem;
    margin: 1.5rem 0 .5rem;
    color: var(--text);
}

.doc-section p, .doc-section li {
    font-size: .9rem;
    line-height: 1.7;
    color: var(--text-muted);
}

.doc-section ul, .doc-section ol {
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: .5rem 0;
}

.doc-callout {
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--r) var(--r) 0;
    padding: .75rem 1rem;
    margin: 1rem 0;
    font-size: .875rem;
    color: var(--text);
}

.doc-callout strong { color: var(--accent); }

.doc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
    margin: 1rem 0;
}

.doc-table th {
    background: var(--surface-2);
    font-weight: 600;
    padding: .6rem .9rem;
    text-align: left;
    border: 1px solid var(--border);
    color: var(--text);
}

.doc-table td {
    padding: .55rem .9rem;
    border: 1px solid var(--border);
    color: var(--text-muted);
    vertical-align: top;
}

.doc-table tr:hover td { background: var(--surface-2); }

.doc-kbd {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
}

.doc-kbd kbd {
    display: inline-block;
    padding: .15rem .4rem;
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: .75rem;
    color: var(--text);
    box-shadow: 0 1px 0 var(--border-2);
}

@media (max-width: 900px) {
    .doc-layout { grid-template-columns: 1fr; }
    .doc-nav { position: static; }
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD — REFONTE
   ═══════════════════════════════════════════════════════════ */

/* Salutation */
.dash-greeting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.dash-greeting__title {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--text);
    margin: 0;
    line-height: 1.2;
}
.dash-greeting__sub {
    font-size: .78rem;
    color: var(--text-muted);
    margin: .3rem 0 0;
    letter-spacing: .01em;
}
/* Cadrage permanent : à quoi sert VACLAV, en une ligne */
.dash-greeting__purpose {
    font-size: .9rem;
    color: var(--text-muted);
    margin: .6rem 0 0;
    max-width: 60ch;
    line-height: 1.5;
}
.dash-greeting__purpose strong { color: var(--text); font-weight: 600; }

/* Bloc « Par où commencer » — orientation premier contact (masquable) */
.dash-onboarding {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-lg);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.75rem;
}
.dash-onboarding__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .85rem;
}
.dash-onboarding__title { font-size: .95rem; font-weight: 600; color: var(--text); }
.dash-onboarding__toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: 9999px;
    cursor: pointer;
    font-size: .75rem;
    font-weight: 500;
    color: var(--text-muted);
    padding: .2rem .7rem;
    transition: border-color .15s, color .15s, background .15s;
}
.dash-onboarding__toggle:hover { color: var(--accent); border-color: var(--accent); }
/* État réduit : seul l'en-tête reste, le panneau garde sa place */
.dash-onboarding.is-collapsed { padding-bottom: 1.1rem; }
.dash-onboarding.is-collapsed .dash-onboarding__head { margin-bottom: 0; }
.dash-onboarding.is-collapsed .dash-onboarding__steps { display: none; }
.dash-onboarding__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
}
.dash-onboarding__step {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem .85rem;
    border: 1px solid var(--border);
    border-radius: calc(var(--r-lg) - 5px);
    text-decoration: none;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.dash-onboarding__step:hover,
.dash-onboarding__step:focus-visible {
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 1px 4px rgba(45,91,227,.12);
    text-decoration: none;
}
/* Jamais de soulignement sur le texte des étapes (ce sont des liens-cartes) */
.dash-onboarding__step:hover .dash-onboarding__step-title,
.dash-onboarding__step:hover .dash-onboarding__step-sub { text-decoration: none; }
.dash-onboarding__num {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: var(--accent);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dash-onboarding__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.dash-onboarding__step-title { font-size: .85rem; font-weight: 600; color: var(--text); }
.dash-onboarding__step-sub { font-size: .76rem; color: var(--text-muted); line-height: 1.4; }
@media (max-width: 768px) {
    .dash-onboarding__steps { grid-template-columns: 1fr; }
}

/* Cockpit d'analyste relégué (replié) pour un nouvel arrivant */
.dash-advanced {
    margin-bottom: 1.75rem;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
}
.dash-advanced > .pulse-panel { border-top: none; }
.dash-advanced__summary {
    cursor: pointer;
    list-style: none;
    padding: .85rem 1.25rem;
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-muted);
    user-select: none;
}
.dash-advanced__summary::-webkit-details-marker { display: none; }
.dash-advanced__summary::before { content: "▸ "; color: var(--accent); }
.dash-advanced[open] .dash-advanced__summary::before { content: "▾ "; }
.dash-advanced[open] .dash-advanced__summary { border-bottom: 1px solid var(--border); }

/* Recherche rapide dashboard */
.dash-search { margin-bottom: 1.5rem; }
.dash-search__wrap {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--r-lg);
    padding: 0 .4rem 0 .85rem;
    transition: border-color .15s, box-shadow .15s;
}
.dash-search__wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(45,91,227,.12);
}
.dash-search__icon {
    flex-shrink: 0;
    color: var(--text-muted);
}
.dash-search__wrap input[type="search"] {
    flex: 1;
    min-width: 0;
    width: auto;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: .65rem 0;
    font-size: .9rem;
}
.dash-search__wrap input[type="search"]:focus {
    border-color: transparent;
    box-shadow: none;
}
.dash-search__btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: .42rem .7rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: calc(var(--r-lg) - 5px);
    cursor: pointer;
    transition: background .15s;
}
.dash-search__btn:hover { background: color-mix(in srgb, var(--accent) 85%, #000); }
.dash-search__btn svg { width: 15px; height: 15px; }

/* Stats panel — conteneur unique KPI + pouls d'activité */
.stats-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.75rem;
    /* pas d'overflow:hidden — les pseudo-éléments tooltip doivent pouvoir sortir */
}
.stats-panel .kpi-strip {
    background: transparent;
    border: none;
    border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
    box-shadow: none;
    margin-bottom: 0;
    overflow: hidden; /* clip hover aux coins hauts */
}

/* ── Pouls d'activité ── */
.pulse-panel {
    display: flex;
    align-items: stretch;
    border-top: 1px solid var(--border);
}
.pulse-main {
    flex: 1;
    min-width: 0;
    padding: 1.25rem 1.5rem 1.1rem;
}
.pulse-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.pulse-trend {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    font-size: .76rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: .22rem .55rem;
    border-radius: 999px;
    white-space: nowrap;
}
.pulse-trend--up   { color: var(--success); background: color-mix(in srgb, var(--success) 13%, transparent); }
.pulse-trend--down { color: var(--warning); background: color-mix(in srgb, var(--warning) 13%, transparent); }
.pulse-trend--flat { color: var(--text-muted); background: var(--surface-2); }
.pulse-trend__ref  { font-weight: 400; opacity: .7; }
.pulse-verdict {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--text);
    line-height: 1.1;
    margin: .7rem 0 .15rem;
}
.pulse-subline {
    font-size: .8rem;
    color: var(--text-muted);
    margin: 0 0 .9rem;
}
.pulse-chart {
    position: relative;
    height: 116px;
}
.pulse-chart svg {
    display: block;
    width: 100%;
    height: 100%;
}
.pulse-peak {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--surface);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
    cursor: default;
}
.pulse-axis {
    display: flex;
    justify-content: space-between;
    font-size: .68rem;
    color: var(--text-muted);
    margin-top: .55rem;
}
.pulse-signals {
    flex-shrink: 0;
    width: 232px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border);
}
.pulse-signal {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 1.1rem 1.35rem;
    text-decoration: none;
}
.pulse-signal + .pulse-signal {
    border-top: 1px solid var(--border);
}
a.pulse-signal:hover {
    background: color-mix(in srgb, var(--accent) 5%, transparent);
    text-decoration: none;
}
.pulse-signal__head {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .055em;
    color: var(--text-muted);
}
.pulse-signal__value {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--text);
    line-height: 1.05;
}
.pulse-signal__desc {
    font-size: .72rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.pulse-signal--warn .pulse-signal__head,
.pulse-signal--warn .pulse-signal__value { color: var(--warning); }
.pulse-signal--ok   .pulse-signal__head  { color: var(--success); }

/* KPI strip */
.kpi-strip {
    display: flex;
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 1.75rem;
    box-shadow: var(--shadow-sm);
}
.kpi-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1.15rem 1.5rem 1.2rem;
    text-decoration: none;
    border-top: 3px solid transparent;
    transition: filter .12s;
}
a.kpi-item:hover { filter: brightness(.97); text-decoration: none; }
[data-theme="dark"]     a.kpi-item:hover,
[data-theme="midnight"] a.kpi-item:hover { filter: brightness(1.2); }

/* Segments KPI colorés — chaque bloc teinté de sa couleur */
.kpi-item--accent  { background: color-mix(in srgb, var(--accent)  13%, var(--surface)); border-top-color: var(--accent); }
.kpi-item--success { background: color-mix(in srgb, var(--success) 13%, var(--surface)); border-top-color: var(--success); }
.kpi-item--warning { background: color-mix(in srgb, var(--warning) 13%, var(--surface)); border-top-color: var(--warning); }
.kpi-item--violet  { background: color-mix(in srgb, var(--violet)  13%, var(--surface)); border-top-color: var(--violet); }
.kpi-item--accent  .kpi-value, .kpi-item--accent  .kpi-icon { color: var(--accent);  stroke: var(--accent); }
.kpi-item--success .kpi-value, .kpi-item--success .kpi-icon { color: var(--success); stroke: var(--success); }
.kpi-item--warning .kpi-value, .kpi-item--warning .kpi-icon { color: var(--warning); stroke: var(--warning); }
.kpi-item--violet  .kpi-value, .kpi-item--violet  .kpi-icon { color: var(--violet);  stroke: var(--violet); }

.kpi-value {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -.05em;
    color: var(--text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    animation: kpiIn .4s both;
}
.kpi-item:nth-child(1) .kpi-value { animation-delay: .05s; }
.kpi-item:nth-child(2) .kpi-value { animation-delay: .12s; }
.kpi-item:nth-child(3) .kpi-value { animation-delay: .19s; }
.kpi-item:nth-child(4) .kpi-value { animation-delay: .26s; }
@keyframes kpiIn {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: translateY(0); }
}
.kpi-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .7rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
}
.kpi-icon {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    fill: none;
    stroke-width: 1.8;
    opacity: .9;
}

/* En-tête de section générique */
.dash-section { margin-bottom: 1.25rem; }
.dash-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
    gap: .5rem;
}
.dash-section__title {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: .02em;
    text-transform: uppercase;
    margin: 0;
}
.dash-section__meta  { font-size: .75rem; color: var(--text-muted); }
.dash-section__link  { font-size: .78rem; color: var(--accent); text-decoration: none; }
.dash-section__link:hover { text-decoration: underline; }
/* Flèche révélée au survol uniquement : au repos, pas de pointeur statique qui
   semblerait désigner le contenu voisin (ex. l'encart guide à droite de « Top prompts »).
   L'espace est réservé (inline-block + opacity) → aucun décalage de texte au survol. */
.dash-section__link::after {
    content: "\2192";
    display: inline-block;
    margin-left: .3em;
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity .14s ease, transform .14s ease;
}
.dash-section__link:hover::after,
.dash-section__link:focus-visible::after { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
    .dash-section__link::after { transition: none; transform: none; }
}
.dash-section__icon { font-size: .9rem; line-height: 1; }
.dash-section__label { font-weight: 600; font-size: .88rem; }

/* Prompts en attente de revue (T14) */
.pending-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    border-left: 3px solid transparent;
    transition: border-color .12s, background .12s;
}
.pending-item:last-child { border-bottom: none; }
.pending-item:hover { border-left-color: var(--accent); background: var(--surface-2); }
.pending-item__title { font-size: .875rem; font-weight: 500; }
.pending-item__date  { font-size: .75rem; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }

/* ── Tuile-portail Atlas ── */
.atlas-portal {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 1.75rem;
    padding: 1.4rem 1.75rem;
    border-radius: var(--r-lg);
    background: #14161f;            /* tranche sombre profonde — identique sur les 5 thèmes */
    border: 1px solid #272b3b;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease;
}
.atlas-portal:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px color-mix(in srgb, #000 38%, transparent);
    text-decoration: none; /* neutralise le `a:hover` global */
}
.atlas-portal__viz {
    flex-shrink: 0;
    width: 220px;
    height: 100px;
}
.atlas-portal__viz svg { display: block; width: 100%; height: 100%; }
.atlas-portal__edges path { stroke: #5b82ff; stroke-width: 1.4; opacity: .32; }
.atlas-portal__nodes .n-domain { fill: #5b82ff; }
.atlas-portal__nodes .n-sub    { fill: #8ea6ff; opacity: .82; }
.atlas-portal__nodes .n-prompt { fill: #c7d2ff; opacity: .68; }
.atlas-portal__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.atlas-portal__eyebrow {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #7d88b0;
}
.atlas-portal__title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: #f0f1f7;
}
.atlas-portal__promise {
    font-size: .85rem;
    line-height: 1.4;
    color: #9aa3c4;
    max-width: 48ch;
    margin-top: .15rem;
}
.atlas-portal__cta {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, #5b82ff 18%, transparent);
    color: #9db4ff;
    transition: transform .16s ease, background .16s ease, color .16s ease;
}
.atlas-portal:hover .atlas-portal__cta {
    background: #5b82ff;
    color: #fff;
    transform: translateX(3px);
}
.atlas-portal__cta svg { width: 20px; height: 20px; }

/* Fondu du dashboard à l'entrée dans l'Atlas */
.app-shell.is-leaving {
    opacity: 0;
    transition: opacity .3s ease;
}

@media (max-width: 720px) {
    .atlas-portal__viz { display: none; }
}

/* Grid principal */
.dash-main-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
    align-items: start;
}
.dash-col-main  { min-width: 0; }
.dash-col-side  { min-width: 0; }

/* Encart guide du workspace — mis en avant en tête de colonne droite */
.guide-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
    padding: .85rem 1rem;
    border-radius: var(--r);
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #fff;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: background .12s, transform .12s, box-shadow .12s;
}
.guide-card:hover {
    background: var(--accent-h);
    border-color: var(--accent-h);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}
.guide-card__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
}
.guide-card__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.guide-card__title { font-weight: 600; font-size: .9rem; color: #fff; }
.guide-card__sub {
    font-size: .75rem;
    color: rgba(255, 255, 255, .82);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guide-card__arrow { flex-shrink: 0; color: rgba(255, 255, 255, .9); }

/* Top prompts */
.top-prompts {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.25rem;
}
.top-prompt {
    display: grid;
    grid-template-columns: 26px 1fr 100px 32px;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1.25rem;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    transition: background 150ms ease;
}
.top-prompt:last-child { border-bottom: none; }
a.top-prompt:hover { background: var(--surface-2); text-decoration: none; }
.top-prompt__rank {
    font-size: .7rem;
    font-weight: 700;
    color: var(--border-2);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.top-prompt__info { min-width: 0; }
.top-prompt__title {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.top-prompt:hover .top-prompt__title { color: var(--accent); }
.top-prompt__meta {
    display: block;
    font-size: .7rem;
    color: var(--text-muted);
    margin-top: .1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.top-prompt__bar-wrap {
    height: 3px;
    background: var(--surface-2);
    border-radius: 2px;
    overflow: hidden;
}
.top-prompt__bar {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    opacity: .65;
    transition: opacity .15s;
}
a.top-prompt:hover .top-prompt__bar { opacity: 1; }
.top-prompt__count {
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Prompts récents */
.recents-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.recent-item {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    transition: background 150ms ease;
}
.recent-item:last-child { border-bottom: none; }
.recent-item:hover { background: var(--surface-2); text-decoration: none; }
.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-dot--published     { background: var(--success); }
.status-dot--draft         { background: var(--border-2); }
.status-dot--pending_review {
    background: var(--warning);
    animation: pulseDot 1.6s ease-in-out infinite;
}
.status-dot--rejected  { background: var(--danger); }
.status-dot--archived  { background: var(--border-2); opacity: .5; }
@keyframes pulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.6); opacity: .6; }
}
.recent-item__body { flex: 1; min-width: 0; }
.recent-item__title {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recent-item:hover .recent-item__title { color: var(--accent); }
.recent-item__meta { font-size: .7rem; color: var(--text-muted); margin-top: .1rem; }
.recent-item__time { font-size: .7rem; color: var(--text-muted); flex-shrink: 0; }

/* Runs timeline */
.runs-timeline {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.25rem;
}
.run-item {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    transition: background .1s;
}
.run-item:last-child { border-bottom: none; }
a.run-item:hover { background: var(--surface-2); text-decoration: none; }
.run-item__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    flex-shrink: 0;
}
.run-item__body { flex: 1; min-width: 0; }
.run-item__title {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.run-item:hover .run-item__title { color: var(--accent); }
.run-item__meta { font-size: .7rem; color: var(--text-muted); margin-top: .1rem; }
.run-item__duration {
    font-size: .7rem;
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
    flex-shrink: 0;
}

/* Historique des exécutions — fiche prompt (T08) */
.run-history { border-top: 1px solid var(--border); padding-top: 1.5rem; }
.run-history__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .85rem;
    flex-wrap: wrap;
    gap: .5rem;
}
.run-history__title { font-weight: 600; font-size: .92rem; }
.run-history__count {
    font-size: .72rem;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .1rem .55rem;
}
.run-history__pages { font-size: .72rem; color: var(--text-muted); }
.run-history__list { display: flex; flex-direction: column; gap: .35rem; }
.run-entry {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
}
.run-entry[open] { border-color: var(--accent); }
.run-entry__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem .85rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    flex-wrap: wrap;
}
.run-entry__summary::-webkit-details-marker { display: none; }
.run-entry__summary:hover { background: var(--surface-2); }
.run-entry__meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.run-entry__model {
    font-size: .78rem;
    font-weight: 600;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    padding: .1rem .45rem;
    border-radius: 4px;
}
.run-entry__tokens, .run-entry__dur {
    font-size: .72rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}
.run-entry__right { display: flex; align-items: center; gap: .6rem; }
.run-entry__user { font-size: .72rem; color: var(--text-muted); }
.run-entry__date { font-size: .72rem; color: var(--text-muted); white-space: nowrap; }
.run-entry__chevron {
    color: var(--text-muted);
    transition: transform .2s;
    flex-shrink: 0;
}
.run-entry[open] .run-entry__chevron { transform: rotate(180deg); }
.run-entry__body { border-top: 1px solid var(--border); }
.run-entry__response {
    padding: .875rem 1rem;
    font-size: .85rem;
    line-height: 1.7;
    color: var(--text);
    white-space: pre-wrap;
    /* Résultat affiché en totalité — l'accordéon gère l'ouverture/fermeture,
       aucun plafond de hauteur ni fondu qui tronquerait la réponse LLM. */
}
.run-history__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-top: 1rem;
}
.run-history__pager-info { font-size: .78rem; color: var(--text-muted); }
.run-entry__prompt-link {
    font-size: .78rem;
    color: var(--accent);
    text-decoration: none;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.run-entry__prompt-link:hover { text-decoration: underline; }

/* ════ Page « Tests » (prompt/test.php) — ex-styles inline, chantier S-11 ════
   Déplacement value-preserving. Les bordures/badges pass·fail (jadis style=""
   dynamiques) deviennent des modifieurs ; `.run-entry.run-entry--pass` (0,2,0)
   l'emporte sur `.run-entry[open]` (0,1,1) pour garder la bordure à l'ouvert. */
.test-back-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .35rem; }
.test-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
.test-title__sub { color: var(--text-muted); font-weight: 500; }
.test-head-meta { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.test-head-count { font-size: .82rem; color: var(--text-muted); }
.test-badge { font-size: .75rem; padding: .2rem .55rem; }
.test-badge--pass { background: var(--success-soft, #d1fae5); color: var(--success, #059669); }
.test-badge--fail { background: var(--danger-soft); color: var(--danger); }
.test-list { display: flex; flex-direction: column; gap: .5rem; }
.run-entry.run-entry--pass { border-color: var(--success, #059669); }
.run-entry.run-entry--fail { border-color: var(--danger); }
.test-summary { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; cursor: pointer; list-style: none; user-select: none; }
.test-mark { flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; }
.test-mark--pass { background: var(--success-soft, #d1fae5); color: var(--success, #059669); }
.test-mark--fail { background: var(--danger-soft); color: var(--danger); }
.test-name { flex: 1; min-width: 0; font-size: .875rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.test-kw-summary { flex-shrink: 0; font-size: .75rem; color: var(--text-muted); }
.test-detail { padding: .75rem 1rem 1rem; border-top: 1px solid var(--border); display: grid; gap: .75rem; }
.test-detail__label { font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .35rem; }
.test-detail__label--danger { color: var(--danger); }
.test-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.test-chip-var { font-size: .75rem; background: var(--danger-soft); color: var(--danger); padding: .1rem .4rem; border-radius: 3px; }
.test-kw { font-size: .78rem; padding: .15rem .5rem; border-radius: 3px; display: inline-flex; align-items: center; gap: .25rem; }
.test-kw--found { background: var(--success-soft, #d1fae5); color: var(--success, #059669); }
.test-kw--missing { background: var(--danger-soft); color: var(--danger); }
.test-rendered { font-family: var(--font-mono); font-size: .8rem; line-height: 1.7; white-space: pre-wrap; word-break: break-word; background: var(--surface-2); padding: .75rem 1rem; border-radius: var(--r); border: 1px solid var(--border); max-height: 14rem; overflow-y: auto; margin: 0; }

/* Historique des versions — fiche prompt (T05) */
.versions-accordion {
    display: inline-block;
}
.versions-accordion > summary {
    cursor: pointer;
    list-style: none;
    color: inherit;
    font-size: inherit;
}
.versions-accordion > summary::-webkit-details-marker { display: none; }
.versions-accordion[open] > summary { color: var(--accent); }
.versions-accordion__body {
    position: absolute;
    z-index: 50;
    margin-top: .35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.12));
    min-width: 20rem;
    max-width: 32rem;
    padding: .75rem;
}
.versions-list {
    list-style: none;
    margin: 0 0 .5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    max-height: 12rem;
    overflow-y: auto;
}
.versions-list__item {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    font-size: .78rem;
    padding: .25rem .35rem;
    border-radius: 4px;
}
.versions-list__item:hover { background: var(--surface-2); }
.versions-list__label { color: var(--text); font-weight: 500; }
.versions-list__date { color: var(--text-muted); white-space: nowrap; font-family: var(--font-mono); }
.versions-compare-form {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    border-top: 1px solid var(--border);
    padding-top: .6rem;
    margin-top: .35rem;
}
.versions-compare-form__select {
    font-size: .78rem;
    padding: .25rem .4rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface-2);
    color: var(--text);
    width: 100%;
}

/* Comparateur de versions — page compare (T05) */
.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 1.5rem;
}
@media (max-width: 720px) {
    .compare-grid { grid-template-columns: 1fr; }
}
.compare-col {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
}
.compare-col__head {
    padding: .65rem .9rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.compare-col__label { font-weight: 600; font-size: .875rem; color: var(--text); }
.compare-col__date { font-size: .72rem; color: var(--text-muted); font-family: var(--font-mono); }
.compare-section {
    padding: .65rem .9rem;
    border-bottom: 1px solid var(--border);
}
.compare-section:last-child { border-bottom: none; }
.compare-section__title {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: .35rem;
}
.compare-section__body {
    font-size: .85rem;
    line-height: 1.65;
    color: var(--text);
    white-space: pre-wrap;
}
.compare-section__body.is-mono {
    font-family: var(--font-mono);
    font-size: .8rem;
}
/* Tokens diff */
.diff-add {
    background: color-mix(in srgb, var(--success, #22c55e) 18%, transparent);
    border-radius: 2px;
    padding: 0 .1em;
}
.diff-del {
    background: color-mix(in srgb, var(--danger) 18%, transparent);
    border-radius: 2px;
    padding: 0 .1em;
    text-decoration: line-through;
}
.compare-nav {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.compare-selectors {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-left: auto;
}
.compare-selectors select {
    font-size: .8rem;
    padding: .25rem .5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface-2);
    color: var(--text);
}
/* S-11 : ex-styles inline de compare.php (déplacés sans harmonisation) */
.compare-page { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem; }
.compare-nav__title { display: inline-flex; align-items: center; gap: .4rem; }
.compare-nav__title-text { font-size: .85rem; color: var(--text-muted); font-weight: 500; }
.compare-vs { font-size: .75rem; color: var(--text-muted); font-weight: 600; }

/* Actions rapides */
.dash-actions {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.dash-action {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1.25rem;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    color: var(--text);
    transition: background .1s, color .1s;
}
.dash-action:last-child { border-bottom: none; }
.dash-action:hover { background: var(--surface-2); color: var(--accent); text-decoration: none; }
/* Variante bouton (ré-afficher « Par où commencer ») — aligne le <button> sur le <a> */
button.dash-action {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
    font-size: .875rem;
    font-weight: 500;
}
.dash-action svg { width: 15px; height: 15px; opacity: .5; flex-shrink: 0; transition: opacity .1s; }
.dash-action:hover svg { opacity: 1; }
.dash-action__badge {
    margin-left: auto;
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-2);
    padding: .1rem .45rem;
    border-radius: 9999px;
    font-variant-numeric: tabular-nums;
}

/* Empty states */
.dash-empty {
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--text-muted);
    font-size: .875rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
}
/* Liens texte de l'état vide en accent — mais pas les boutons (.btn garde sa
   propre couleur ; sinon .btn-primary devient bleu sur bleu = texte invisible). */
.dash-empty a:not(.btn) { color: var(--accent); }
.dash-empty__icon { color: var(--border-2); margin-bottom: .25rem; }
.dash-empty__title { font-size: .875rem; font-weight: 500; color: var(--text); }
.dash-empty__sub { font-size: .78rem; color: var(--text-muted); max-width: 26rem; }

/* Empty state pleine page */
.empty-state {
    text-align: center;
    padding: 3.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}
.empty-state__icon { color: var(--border-2); margin-bottom: .25rem; }
.empty-state__title { font-size: .95rem; font-weight: 500; color: var(--text); }
.empty-state__sub { font-size: .825rem; color: var(--text-muted); max-width: 28rem; }

/* — Page catégories — */
.cat-page { max-width: 760px; }
.cat-header { margin-bottom: 1.25rem; }
.cat-header h1 { font-size: 1.5rem; letter-spacing: -.03em; }
.cat-header__sub { font-size: .82rem; color: var(--text-muted); margin-top: .25rem; }
.cat-label {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}

.cat-create {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1rem 1.1rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.cat-create__row { display: flex; gap: .6rem; }
.cat-create__row input[type="text"] { flex: 1; }
.cat-create__hue { display: flex; align-items: center; gap: .6rem; margin-top: .7rem; }

/* Sélecteur de teinte */
.hue-picker { display: flex; gap: .35rem; flex-wrap: wrap; }
.hue-opt { cursor: pointer; line-height: 0; }
.hue-opt input { position: absolute; opacity: 0; pointer-events: none; }
.hue-dot {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--border-2);
}
.hue-dot--none { background: var(--surface-2); position: relative; }
.hue-dot--none::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border-top: 2px solid var(--danger);
    transform: rotate(45deg);
}
.hue-opt input:checked + .hue-dot { box-shadow: 0 0 0 2px var(--accent); }

/* Domaine */
.cat-domain {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid hsl(var(--cat-hue) 60% 55%);
    border-radius: var(--r);
    margin-bottom: .8rem;
    box-shadow: var(--shadow-sm);
}
.cat-domain__head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .9rem;
}
.cat-swatch { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.cat-domain__name { font-weight: 600; font-size: .95rem; }
.cat-count { font-size: .72rem; color: var(--text-muted); }
.cat-domain__head .cat-edit { margin-left: auto; }
.cat-domain__head form { margin: 0; }

.cat-domain__body {
    padding: .5rem 1rem .9rem 1.4rem;
    border-top: 1px solid var(--border);
}
.cat-sub {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .6rem;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    margin-bottom: .5rem;
}
.cat-sub__name { font-size: .85rem; color: var(--text-muted); }
.cat-sub .cat-edit { margin-left: auto; }
.cat-sub form { margin: 0; }
.cat-sub-empty { font-size: .78rem; color: var(--text-muted); padding: .3rem 0 .6rem; }

.cat-add-sub { display: flex; gap: .5rem; margin-top: .5rem; }
.cat-add-sub input[type="text"] { flex: 1; }
.cat-del { color: var(--danger); }

/* Réordonnancement ↑↓ (Atlas-2b.1) */
.cat-reorder { display: inline-flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.cat-reorder__form { margin: 0; line-height: 0; }
.cat-reorder__btn {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 15px; padding: 0;
    font-size: .72rem; line-height: 1;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px; cursor: pointer;
    transition: color .12s, border-color .12s, background .12s;
}
.cat-reorder__btn:hover { color: var(--accent); border-color: var(--accent); }
.cat-reorder__btn--off { opacity: .28; cursor: default; }

/* Compteur de prompts (badge pilule discret) */
.cat-count--prompts {
    padding: .08rem .45rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
}

/* Domaine « Non classé » : mise en évidence discrète */
.cat-domain--orphans { border-left-color: hsl(38 90% 55%); }
.cat-domain--orphans .cat-domain__name::after {
    content: "à ranger";
    margin-left: .5rem;
    padding: .05rem .4rem;
    font-size: .62rem; font-weight: 600; letter-spacing: .02em;
    color: hsl(38 80% 38%);
    background: hsl(38 90% 55% / .14);
    border-radius: 999px;
}

/* Panneau d'édition (details en popover) */
.cat-edit { position: relative; }
.cat-edit > summary { list-style: none; cursor: pointer; }
.cat-edit > summary::-webkit-details-marker { display: none; }
.cat-edit__form {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: var(--z-ui);
    width: 260px;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: .875rem;
    box-shadow: var(--shadow-md);
    /* Transition d'apparition */
    transition: opacity 150ms ease, transform 150ms ease;
}
details[open] .cat-edit__form {
    opacity: 1;
    transform: translateY(0);
}
@starting-style {
    details[open] .cat-edit__form {
        opacity: 0;
        transform: translateY(4px);
    }
}
/* Popover qui s'ouvre vers le haut (déclencheur près du bas de page) */
.cat-edit--up .cat-edit__form {
    top: auto;
    bottom: calc(100% + 4px);
}
@starting-style {
    .cat-edit--up[open] .cat-edit__form {
        opacity: 0;
        transform: translateY(-4px);
    }
}

.cat-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: .85rem;
    padding: 2rem;
    background: var(--surface);
    border: 1px dashed var(--border-2);
    border-radius: var(--r-lg);
}

/* Responsive */
@media (max-width: 1100px) {
    .dash-main-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .pulse-panel { flex-direction: column; }
    .pulse-signals {
        width: auto;
        flex-direction: row;
        border-left: none;
        border-top: 1px solid var(--border);
    }
    .pulse-signal { flex: 1; }
    .pulse-signal + .pulse-signal {
        border-top: none;
        border-left: 1px solid var(--border);
    }
}
@media (max-width: 768px) {
    .kpi-strip { flex-wrap: wrap; gap: 0; }
    .kpi-item {
        flex: 0 0 50%;
        min-width: 0;
        padding: .875rem 1.1rem 1rem;
        border-bottom: 1px solid var(--border);
    }
    .kpi-item:nth-child(odd) { border-right: 1px solid var(--border); }
    /* Supprime la bordure basse de la dernière rangée */
    .kpi-item:nth-last-child(-n+2) { border-bottom: none; }
    .dash-greeting { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════
   ATLAS — système d'exploration cognitive
   ═══════════════════════════════════════════════════════════ */

/* — Univers Atlas : une nuit fixe, indépendante des 5 thèmes de l'app —
   Franchir l'Atlas, c'est changer de monde : ces tokens ne dépendent
   jamais de `data-theme`. Constellation cosmique (cf. ATLAS.md § 8). */
.atlas-root {
    --atlas-void:      #05060f;
    --atlas-deep:      #090b18;
    --atlas-bg:        #0c0f22;
    --atlas-panel:     rgba(19, 23, 44, .74);
    --atlas-panel-2:   rgba(30, 35, 64, .92);
    --atlas-brd:       rgba(150, 165, 255, .12);
    --atlas-brd-lit:   rgba(150, 165, 255, .34);
    --atlas-text:      #eef0ff;
    --atlas-dim:       #aab0d8;
    --atlas-faint:     #767ba2;
    --atlas-accent:    #8b9bff;
    --atlas-accent-2:  #c39bff;
    --atlas-accent-soft: rgba(139, 155, 255, .16);
    --atlas-star:      #f6f4ff;
    --atlas-success:   #54d6a0;
    --atlas-warning:   #f0b441;
    --atlas-danger:    #ff6b7a;
    --atlas-shadow:    0 22px 60px -14px rgba(0, 0, 0, .8);
    --atlas-glow:      0 0 0 1px var(--atlas-brd-lit), 0 14px 44px -16px rgba(0, 0, 0, .85);
}
.atlas-root {
    margin: 0;
    height: 100vh;
    overflow: hidden;
    background: var(--atlas-void);
    color: var(--atlas-text);
    font-feature-settings: "ss01";
}
.atlas { display: flex; flex-direction: column; height: 100vh; position: relative; }

/* — Barre haute : verre sombre suspendu au-dessus du cosmos — */
.atlas-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 56px;
    flex-shrink: 0;
    padding: 0 1.1rem;
    background: linear-gradient(180deg, rgba(11, 14, 30, .94), rgba(11, 14, 30, .74));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--atlas-brd);
    box-shadow: inset 0 1px 0 rgba(150, 165, 255, .06), 0 12px 32px -20px #000;
    z-index: 10;
}
.atlas-exit { display: flex; align-items: center; flex-shrink: 0; }
.atlas-exit__mark {
    width: 26px;
    height: 26px;
    fill: var(--atlas-accent);
    filter: drop-shadow(0 0 10px rgba(139, 155, 255, .5));
    transition: transform .2s, filter .2s;
}
.atlas-exit:hover .atlas-exit__mark {
    transform: scale(1.1);
    filter: drop-shadow(0 0 16px rgba(139, 155, 255, .9));
}

.atlas-breadcrumb {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .88rem;
    min-width: 0;
    margin-left: .35rem;
    padding-left: 1rem;
    border-left: 1px solid var(--atlas-brd);
}
.atlas-crumb {
    color: var(--atlas-dim);
    cursor: pointer;
    white-space: nowrap;
    font-weight: 500;
    transition: color .15s;
}
.atlas-crumb:hover { color: var(--atlas-accent); }
.atlas-crumb.is-current {
    color: var(--atlas-text);
    font-weight: 700;
    cursor: default;
}
.atlas-crumb.is-current:hover { color: var(--atlas-text); }
.atlas-crumb + .atlas-crumb::before {
    content: '›';
    margin-right: .4rem;
    color: var(--atlas-faint);
    font-weight: 400;
}

.atlas-search { position: relative; margin-left: auto; width: 300px; }
.atlas-search__icon {
    position: absolute;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--atlas-faint);
    pointer-events: none;
}
.atlas-search__input {
    width: 100%;
    padding: .48rem .7rem .48rem 2rem;
    font-size: .82rem;
    color: var(--atlas-text);
    background: rgba(150, 165, 255, .07);
    border: 1px solid var(--atlas-brd);
    border-radius: 999px;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.atlas-search__input::placeholder { color: var(--atlas-faint); }
.atlas-search__input:focus {
    outline: none;
    border-color: var(--atlas-brd-lit);
    background: rgba(150, 165, 255, .12);
    box-shadow: 0 0 0 3px var(--atlas-accent-soft);
}
.atlas-search__results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--atlas-panel-2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--atlas-brd);
    border-radius: 14px;
    box-shadow: var(--atlas-shadow);
    max-height: 340px;
    overflow-y: auto;
    z-index: 20;
}
.atlas-search__result {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    padding: .55rem .8rem;
    cursor: pointer;
    border-bottom: 1px solid var(--atlas-brd);
    transition: background .12s;
}
.atlas-search__result:last-child { border-bottom: none; }
.atlas-search__result:hover { background: var(--atlas-accent-soft); }
.atlas-search__result-title { font-size: .83rem; color: var(--atlas-text); }
.atlas-search__result-path  { font-size: .72rem; color: var(--atlas-faint); }
.atlas-search__empty { padding: .8rem; font-size: .8rem; color: var(--atlas-faint); }

/* — Scène — */
.atlas-stage { display: flex; flex: 1; min-height: 0; }

/* — Rail gauche : panneau de verre, les Lentilles en vedette — */
.atlas-rail {
    width: 252px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.4rem 1.15rem;
    background: linear-gradient(180deg, rgba(13, 16, 34, .82), rgba(9, 11, 24, .84));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-right: 1px solid var(--atlas-brd);
    overflow-y: auto;
    z-index: 5;
}
.atlas-rail__foot { margin-top: auto; }
.atlas-rail__kicker {
    display: block;
    font-size: .63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .17em;
    color: var(--atlas-accent);
}
.atlas-rail__title {
    margin: .22rem 0 0;
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--atlas-text);
}
.atlas-rail__intro {
    margin: .5rem 0 .95rem;
    font-size: .76rem;
    line-height: 1.55;
    color: var(--atlas-dim);
}
.atlas-rail__note {
    margin: .6rem 0 0;
    font-size: .74rem;
    line-height: 1.55;
    color: var(--atlas-faint);
}

.atlas-legend { list-style: none; margin: 0 0 .9rem; padding: 0; }
.atlas-legend li {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .76rem;
    color: var(--atlas-dim);
    padding: .22rem 0;
}
.atlas-dot { border-radius: 50%; flex-shrink: 0; }
.atlas-dot--domain {
    width: 13px; height: 13px;
    background: radial-gradient(circle at 38% 34%, #b9c2ff, #6f7ce0);
    box-shadow: 0 0 9px rgba(139, 155, 255, .7);
}
.atlas-dot--sub {
    width: 10px; height: 10px;
    background: radial-gradient(circle at 38% 34%, #cdd6ff, #8b9bff);
}
.atlas-dot--prompt {
    width: 8px; height: 8px;
    background: var(--atlas-star);
    box-shadow: 0 0 7px rgba(246, 244, 255, .85);
}
.atlas-rail__keys {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .8rem;
    margin: 0;
    font-size: .72rem;
    color: var(--atlas-faint);
}
.atlas-rail__keys span { display: inline-flex; align-items: center; gap: .3rem; }
.atlas-rail__keys kbd {
    font-family: var(--font-mono);
    font-size: .66rem;
    color: var(--atlas-dim);
    background: rgba(150, 165, 255, .1);
    border: 1px solid var(--atlas-brd);
    border-radius: 4px;
    padding: .05rem .32rem;
}

/* — Canevas : le territoire cosmique — fond fixe, hors thème de l'app — */
.atlas-canvas {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    background-color: var(--atlas-void);
    background-image:
        radial-gradient(ellipse 68% 56% at 30% 26%, rgba(104, 88, 214, .26), transparent 70%),
        radial-gradient(ellipse 64% 54% at 76% 74%, rgba(54, 116, 196, .20), transparent 72%),
        radial-gradient(circle at 50% 46%, transparent 38%, var(--atlas-void) 92%);
    box-shadow: inset 0 0 260px 70px rgba(0, 0, 0, .72);
}
/* nébuleuses dérivantes — la profondeur respire (cf. ATLAS.md § 16) */
.atlas-canvas::before,
.atlas-canvas::after {
    content: '';
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(64px);
    mix-blend-mode: screen;
}
.atlas-canvas::before {
    width: 46%; height: 46%;
    left: 8%; top: 6%;
    background: radial-gradient(circle, rgba(126, 104, 232, .34), transparent 68%);
    animation: atlasDrift1 38s ease-in-out infinite alternate;
}
.atlas-canvas::after {
    width: 52%; height: 52%;
    right: 4%; bottom: 2%;
    background: radial-gradient(circle, rgba(58, 134, 210, .26), transparent 70%);
    animation: atlasDrift2 46s ease-in-out infinite alternate;
}
@keyframes atlasDrift1 {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(7%, 5%, 0) scale(1.14); }
}
@keyframes atlasDrift2 {
    from { transform: translate3d(0, 0, 0) scale(1.08); }
    to   { transform: translate3d(-6%, -6%, 0) scale(1); }
}
/* champ d'étoiles (canvas JS — module Cosmos) : entre nébuleuse et graphe */
/* <canvas> est un élément remplacé : inset:0 ne l'étire PAS (il garde sa taille
   intrinsèque 300×150) — il faut width/height explicites pour remplir le parent. */
.atlas-stars {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}
.atlas-cy { position: absolute; inset: 0; z-index: 2; }

/* — Seuil d'entrée : le voile qui se dissipe sur le cosmos — */
.atlas-veil {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse 58% 50% at 50% 44%, rgba(104, 88, 214, .32), transparent 70%),
        var(--atlas-void);
    transition: opacity .9s ease, transform .9s ease, filter .9s ease;
}
.atlas-veil[hidden] { display: none; }
.atlas-veil.is-lifted {
    opacity: 0;
    transform: scale(1.07);
    filter: blur(8px);
    pointer-events: none;
}
.atlas-veil__core {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    animation: atlasVeilIn 1s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes atlasVeilIn {
    from { opacity: 0; transform: translateY(16px) scale(.95); }
    to   { opacity: 1; transform: none; }
}
.atlas-veil__mark {
    width: 62px;
    height: 62px;
    fill: var(--atlas-accent);
    animation: atlasVeilGlow 2.6s ease-in-out infinite;
}
@keyframes atlasVeilGlow {
    0%, 100% { filter: drop-shadow(0 0 16px rgba(139, 155, 255, .5)); }
    50%      { filter: drop-shadow(0 0 32px rgba(139, 155, 255, 1)); }
}
.atlas-veil__title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .42em;
    text-indent: .42em;
    color: var(--atlas-text);
}
.atlas-veil__hint {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .76rem;
    letter-spacing: .04em;
    color: var(--atlas-dim);
}
.atlas-veil__pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--atlas-accent);
    box-shadow: 0 0 12px var(--atlas-accent);
    animation: atlasPulse 1.1s ease-in-out infinite;
}
@keyframes atlasPulse {
    0%, 100% { opacity: .3; transform: scale(.8); }
    50%      { opacity: 1;  transform: scale(1.2); }
}

/* — Contrôles de zoom — */
.atlas-zoom {
    position: absolute;
    right: 1.1rem;
    bottom: 1.1rem;
    z-index: 4;
    display: flex;
    flex-direction: column;
    background: var(--atlas-panel);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--atlas-brd);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--atlas-shadow);
}
.atlas-zoom button {
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    color: var(--atlas-dim);
    font-size: 1rem;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.atlas-zoom button:hover { background: var(--atlas-accent-soft); color: var(--atlas-text); }
.atlas-zoom button + button { border-top: 1px solid var(--atlas-brd); }

/* — Inspecteur : fiche d'astre, panneau de verre glissant — */
.atlas-inspector {
    width: 336px;
    flex-shrink: 0;
    position: relative;
    background: linear-gradient(180deg, rgba(15, 18, 38, .92), rgba(9, 11, 24, .94));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: 1px solid var(--atlas-brd);
    box-shadow: -24px 0 60px -32px #000;
    overflow-y: auto;
    z-index: 5;
}
.atlas-inspector[hidden] { display: none; }
.atlas-inspector:not([hidden]) {
    animation: atlasInspIn .36s cubic-bezier(.22, .61, .36, 1);
}
@keyframes atlasInspIn {
    from { transform: translateX(30px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
.atlas-inspector__close {
    position: absolute;
    top: .7rem;
    right: .7rem;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--atlas-faint);
    font-size: 1.25rem;
    cursor: pointer;
    border-radius: 8px;
    transition: background .12s, color .12s;
}
.atlas-inspector__close:hover { background: var(--atlas-accent-soft); color: var(--atlas-text); }
.atlas-inspector__body { padding: 1.7rem 1.2rem 1.2rem; }

.atlas-insp__layer {
    font-size: .63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .17em;
    color: var(--atlas-accent);
}
.atlas-insp__title {
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--atlas-text);
    margin: .35rem 0 .7rem;
}
.atlas-insp__status {
    display: inline-block;
    font-size: .7rem;
    font-weight: 600;
    padding: .18rem .65rem;
    border-radius: 999px;
    background: rgba(150, 165, 255, .12);
    color: var(--atlas-dim);
    border: 1px solid var(--atlas-brd);
}
.atlas-insp__status--published {
    background: rgba(84, 214, 160, .14);
    color: var(--atlas-success);
    border-color: rgba(84, 214, 160, .3);
}
.atlas-insp__status--pending_review {
    background: rgba(240, 180, 65, .14);
    color: var(--atlas-warning);
    border-color: rgba(240, 180, 65, .3);
}
.atlas-insp__metrics { display: flex; gap: 1.5rem; margin: 1.2rem 0; }
.atlas-metric { display: flex; flex-direction: column; }
.atlas-metric__value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--atlas-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.atlas-metric__label { font-size: .72rem; color: var(--atlas-faint); margin-top: .3rem; }
.atlas-insp__open {
    width: 100%;
    justify-content: center;
    background: linear-gradient(135deg, #8b9bff, #c39bff);
    border: none;
    color: #0a0c1a;
    font-weight: 700;
    box-shadow: 0 10px 26px -12px rgba(139, 155, 255, .9);
}
.atlas-insp__open:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* — Portail mobile : l'Atlas se déploie sur grand écran — */
.atlas-gate { display: none; }

@media (max-width: 1024px) {
    .atlas { display: none; }
    .atlas-gate {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        height: 100vh;
        padding: 2rem;
        gap: .5rem;
        color: var(--atlas-text);
        background:
            radial-gradient(ellipse 70% 50% at 50% 38%, rgba(104, 88, 214, .26), transparent 70%),
            var(--atlas-void);
    }
    .atlas-gate__mark {
        width: 64px; height: 64px;
        fill: var(--atlas-accent);
        filter: drop-shadow(0 0 18px rgba(139, 155, 255, .6));
    }
    .atlas-gate__title { font-size: 1.6rem; margin: .5rem 0 0; letter-spacing: -.03em; }
    .atlas-gate__text { max-width: 380px; color: var(--atlas-dim); font-size: .9rem; margin: 0 0 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .atlas-canvas::before,
    .atlas-canvas::after { animation: none; }
    .atlas-inspector:not([hidden]) { animation: none; }
    .atlas-exit__mark { transition: none; }
    .atlas-veil { transition: none; }
    .atlas-veil__core,
    .atlas-veil__mark,
    .atlas-veil__pulse { animation: none; }
}

/* ── Bloc Relations (fiche prompt — Atlas-2) ── */
.rel-empty {
    font-size: .82rem;
    color: var(--text-muted);
    margin: 0;
}
.rel-list {
    list-style: none;
    margin: 0 0 .75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.rel-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
}
.rel-chip {
    flex-shrink: 0;
    font-size: .67rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .16rem .5rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-muted);
    white-space: nowrap;
}
.rel-item__dir {
    flex-shrink: 0;
    color: var(--text-muted);
}
.rel-item__target {
    color: var(--accent);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rel-item__target:hover { text-decoration: underline; }
.rel-item__derived {
    margin-left: auto;
    color: var(--text-muted);
    cursor: default;
}
.rel-item__del { margin-left: auto; }
.rel-item__del button {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: .1rem .35rem;
    border-radius: var(--r-sm);
}
.rel-item__del button:hover { background: var(--danger-soft); color: var(--danger); }
.rel-form {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding-top: .65rem;
    border-top: 1px solid var(--border);
}
.rel-form__select {
    flex: 1;
    min-width: 7rem;
    font-size: .8rem;
    padding: .35rem .5rem;
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
}

/* ── Relations dans l'inspecteur Atlas ── */
.atlas-insp__relations { margin-top: 1.4rem; }
.atlas-insp__rel-empty {
    font-size: .8rem;
    color: var(--atlas-faint);
    margin: .4rem 0 0;
}
.atlas-rel-list {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.atlas-rel {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    padding: .38rem .5rem;
    border-radius: 9px;
    background: rgba(150, 165, 255, .05);
    border: 1px solid var(--atlas-brd);
}
.atlas-rel__type {
    flex-shrink: 0;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .14rem .45rem;
    border-radius: 999px;
    background: var(--atlas-accent-soft);
    color: var(--atlas-accent);
    white-space: nowrap;
}
.atlas-rel__dir { flex-shrink: 0; color: var(--atlas-faint); }
.atlas-rel__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--atlas-text);
}
.atlas-rel__del {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--atlas-faint);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: .05rem .3rem;
    border-radius: 6px;
}
.atlas-rel__del:hover { background: rgba(255, 107, 122, .16); color: var(--atlas-danger); }

/* ── Mode édition de l'Atlas ── */
.atlas-edit-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .55rem .65rem;
    border: 1px solid var(--atlas-brd);
    border-radius: 10px;
    background: rgba(150, 165, 255, .06);
    color: var(--atlas-text);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .14s, border-color .14s;
}
.atlas-edit-toggle:hover { background: var(--atlas-accent-soft); }
.atlas-edit-toggle__dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--atlas-faint);
    transition: background .14s, box-shadow .14s;
}
.atlas-edit-toggle.is-active {
    border-color: var(--atlas-brd-lit);
    background: var(--atlas-accent-soft);
}
.atlas-edit-toggle.is-active .atlas-edit-toggle__dot {
    background: var(--atlas-accent);
    box-shadow: 0 0 0 3px rgba(139, 155, 255, .28), 0 0 10px var(--atlas-accent);
}
.atlas--editing .atlas-cy { cursor: crosshair; }

.atlas-rel-picker {
    position: absolute;
    z-index: 6;
    transform: translate(-50%, 12px);
    display: flex;
    flex-direction: column;
    gap: .12rem;
    min-width: 12rem;
    padding: .5rem;
    background: var(--atlas-panel-2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--atlas-brd);
    border-radius: 12px;
    box-shadow: var(--atlas-shadow);
}
.atlas-rel-picker[hidden] { display: none; }
.atlas-rel-picker__title {
    font-size: .63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--atlas-accent);
    padding: .15rem .35rem .35rem;
}
.atlas-rel-picker__btn,
.atlas-rel-picker__cancel {
    text-align: left;
    border: none;
    background: transparent;
    color: var(--atlas-text);
    font-size: .82rem;
    padding: .42rem .45rem;
    border-radius: 7px;
    cursor: pointer;
    transition: background .12s;
}
.atlas-rel-picker__btn:hover { background: var(--atlas-accent-soft); }
.atlas-rel-picker__cancel {
    margin-top: .2rem;
    padding-top: .45rem;
    border-top: 1px solid var(--atlas-brd);
    color: var(--atlas-faint);
    font-size: .76rem;
}
.atlas-rel-picker__cancel:hover { color: var(--atlas-text); }

/* ── Sélecteur de Lentille — la vedette du rail ── */
.atlas-lens {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.atlas-lens__btn {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    text-align: left;
    border: 1px solid var(--atlas-brd);
    background: rgba(150, 165, 255, .045);
    color: var(--atlas-text);
    padding: .55rem .7rem;
    border-radius: 11px;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s;
}
.atlas-lens__btn:hover {
    background: var(--atlas-accent-soft);
    border-color: var(--atlas-brd-lit);
}
.atlas-lens__name {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
.atlas-lens__desc {
    font-size: .69rem;
    color: var(--atlas-faint);
    line-height: 1.35;
}
.atlas-lens__btn.is-active {
    background: linear-gradient(135deg, rgba(139, 155, 255, .22), rgba(195, 155, 255, .16));
    border-color: var(--atlas-brd-lit);
    box-shadow: inset 0 0 0 1px rgba(150, 165, 255, .12),
                0 8px 24px -14px rgba(139, 155, 255, .8);
}
.atlas-lens__btn.is-active .atlas-lens__desc { color: var(--atlas-dim); }

/* ── Légende dynamique de la Lentille active ── */
.atlas-lens-legend {
    margin-top: .85rem;
    padding: .75rem .8rem;
    border-radius: 11px;
    background: rgba(8, 10, 22, .6);
    border: 1px solid var(--atlas-brd);
}
.atlas-lens-legend[hidden] { display: none; }
.atlas-lens-legend__title {
    font-size: .63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--atlas-accent);
    margin: 0 0 .5rem;
}
.atlas-lens-legend__scale {
    height: 7px;
    border-radius: 999px;
    margin-bottom: .4rem;
}
.atlas-lens-legend__ends {
    display: flex;
    justify-content: space-between;
    font-size: .69rem;
    color: var(--atlas-dim);
}
.atlas-lens-legend__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .32rem;
}
.atlas-lens-legend__items li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .72rem;
    color: var(--atlas-dim);
}
.atlas-lens-legend__swatch {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
}
.atlas-lens-legend__note {
    margin: .55rem 0 0;
    font-size: .69rem;
    line-height: 1.45;
    color: var(--atlas-faint);
}

/* ── Filtre spatial — réduire la constellation (Atlas-2b.2) ── */
.atlas-filter__body {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}
.atlas-filter__hint {
    margin: 0;
    font-size: .69rem;
    line-height: 1.45;
    color: var(--atlas-faint);
    display: none;
}
/* Vue d'ensemble / domaine : aucune étoile à filtrer → invite, corps masqué. */
.atlas-filter--disabled .atlas-filter__hint { display: block; }
.atlas-filter--disabled .atlas-filter__body { display: none; }

.atlas-filter__group {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.atlas-filter__label {
    font-size: .63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--atlas-accent);
}
.atlas-filter__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}
.atlas-filter__chip {
    border: 1px solid var(--atlas-brd);
    background: rgba(150, 165, 255, .045);
    color: var(--atlas-dim);
    font-size: .72rem;
    padding: .22rem .55rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.atlas-filter__chip:hover {
    background: var(--atlas-accent-soft);
    border-color: var(--atlas-brd-lit);
    color: var(--atlas-text);
}
.atlas-filter__chip.is-active {
    background: linear-gradient(135deg, rgba(139, 155, 255, .26), rgba(195, 155, 255, .18));
    border-color: var(--atlas-brd-lit);
    color: var(--atlas-text);
    font-weight: 600;
}
.atlas-filter__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-height: 1.4rem;
    margin-top: .15rem;
}
.atlas-filter__count {
    font-size: .7rem;
    color: var(--atlas-dim);
}
.atlas-filter__reset {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .7rem;
    color: var(--atlas-faint);
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 0;
}
.atlas-filter__reset:hover { color: var(--atlas-text); }
.atlas-filter__reset[hidden] { display: none; }

/* ── Parcours guidés — dérouler un enchaînement (Atlas-3a) ── */
.atlas-tour__hint {
    margin: 0;
    font-size: .69rem;
    line-height: 1.45;
    color: var(--atlas-faint);
    display: none;
}
/* Aucune chaîne next_step au niveau courant → invite, liste masquée. */
.atlas-tour--disabled .atlas-tour__hint { display: block; }
.atlas-tour--disabled .atlas-tour__list { display: none; }

.atlas-tour__group { margin-bottom: .6rem; }
.atlas-tour__group[hidden] { display: none; }
.atlas-tour__subtitle {
    display: block;
    font-size: .63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--atlas-accent);
    margin-bottom: .35rem;
}
.atlas-tour__list {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.atlas-tour__chain {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    text-align: left;
    border: 1px solid var(--atlas-brd);
    background: rgba(150, 165, 255, .045);
    color: var(--atlas-text);
    padding: .5rem .65rem;
    border-radius: 11px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.atlas-tour__chain:hover {
    background: var(--atlas-accent-soft);
    border-color: var(--atlas-brd-lit);
}
.atlas-tour__chain-title {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: -.01em;
}
.atlas-tour__chain-meta {
    font-size: .69rem;
    color: var(--atlas-faint);
}

/* Barre de lecture — chrome de verre, bas-centre du canvas */
.atlas-tour-bar {
    position: absolute;
    left: 50%;
    bottom: 1.4rem;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .55rem;
    border-radius: 999px;
    background: rgba(8, 10, 22, .72);
    border: 1px solid var(--atlas-brd-lit);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 40px -18px rgba(0, 0, 0, .9);
    z-index: 20;
}
.atlas-tour-bar[hidden] { display: none; }
.atlas-tour-bar__btn,
.atlas-tour-bar__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--atlas-brd);
    background: rgba(150, 165, 255, .06);
    color: var(--atlas-text);
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.atlas-tour-bar__btn:hover,
.atlas-tour-bar__close:hover {
    background: var(--atlas-accent-soft);
    border-color: var(--atlas-brd-lit);
}
.atlas-tour-bar__label {
    font-size: .76rem;
    color: var(--atlas-dim);
    padding: 0 .5rem;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.atlas-tour-bar__close { margin-left: .15rem; color: var(--atlas-faint); }

/* ─── Veille Prompt Engineering ─────────────────────────────────── */

.watch-list { display: flex; flex-direction: column; gap: 1rem; }

.watch-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1.25rem 1.5rem;
    transition: border-color .15s, box-shadow .15s;
}
.watch-card--latest { border-left-color: var(--accent); }
.watch-card:hover {
    border-color: var(--accent);
    border-left-color: var(--accent);
    box-shadow: var(--shadow-md);
}
.watch-card:hover .watch-card__chevron { transform: translateX(3px); color: var(--accent); }

.watch-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .6rem;
}
.watch-card__meta { display: flex; align-items: center; gap: .6rem; }

.watch-card__num {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--accent);
    background: var(--accent-soft);
    padding: .15rem .5rem;
    border-radius: 999px;
}
.watch-card__date { font-size: .8125rem; color: var(--text-muted); }

.watch-card__actions {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}
.watch-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: .4rem;
    line-height: 1.35;
}
.watch-card__excerpt {
    font-size: .8625rem;
    color: var(--text-muted);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Lien étiré — couvre toute la carte, z-index sous les actions */
.watch-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
    outline: none; /* ring reporté sur .watch-card:focus-within */
}
.watch-card__link:hover,
.watch-card__link:focus,
.watch-card__link:focus-visible { outline: none; text-decoration: none; }
.watch-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--r-lg);
    z-index: 0;
}
/* Lien GitHub au-dessus du lien étiré (déjà dans .watch-card__actions z-index:1) */
.watch-card__source {
    font-size: .75rem;
    color: var(--text-muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: .3rem;
    transition: color .12s;
}
.watch-card__source:hover { color: var(--text); text-decoration: none; }

.watch-card__chevron {
    color: var(--text-muted);
    transition: transform .15s, color .15s;
}

/* ─── Vue édition ────────────────────────────────────────────────── */

.watch-article {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent);
    border-radius: var(--r-lg);
    padding: 2rem 2.5rem;
    margin-top: 1rem;
    line-height: 1.75;
    font-size: .9375rem;
}

/* Surcharge de la règle globale p { color: var(--text-muted) } */
.watch-article p  { color: var(--text); margin: .75rem 0; }
.watch-article li { color: var(--text); margin: .35rem 0; }
.watch-article ul, .watch-article ol { padding-left: 1.6rem; margin: .6rem 0; }
.watch-article h1 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 .75rem; border-bottom: 1px solid var(--border); padding-bottom: .5rem; color: var(--text); }
.watch-article h2 { font-size: 1.2rem; font-weight: 700; margin: 1.75rem 0 .6rem; color: var(--text); }
.watch-article h3 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 .4rem; color: var(--accent); }
.watch-article h4 { font-size: .9375rem; font-weight: 600; margin: 1rem 0 .3rem; color: var(--text); }
.watch-article blockquote { border-left: 3px solid var(--accent); margin: 1rem 0; padding: .5rem 1rem; background: var(--accent-soft); color: var(--text); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-style: italic; }
.watch-article code { font-family: var(--font-mono); font-size: .875em; background: var(--surface-2); padding: .1em .4em; border-radius: 4px; color: var(--text); }
.watch-article pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 1rem 1.25rem; overflow-x: auto; margin: .75rem 0; }
.watch-article pre code { background: none; padding: 0; }
.watch-article table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .875rem; }
.watch-article th, .watch-article td { border: 1px solid var(--border); padding: .5rem .75rem; text-align: left; color: var(--text); }
.watch-article th { background: var(--surface-2); font-weight: 600; }
.watch-article hr { border: none; border-top: 1px solid var(--border); margin: 1.75rem 0; }
.watch-article a { color: var(--accent); font-weight: 500; }
.watch-article strong { color: var(--text); font-weight: 700; }
.watch-article em { font-style: italic; }

/* ═══════════════════════════════════════════════════════════
   BIBLIOTHÈQUE — layout & responsive mobile
   ═══════════════════════════════════════════════════════════ */

/* Barre de recherche — masquée sur desktop (nav search suffit), visible sur mobile */
.lib-search { display: none; }

/* Layout interne d'une card de prompt */
.lib-card-inner {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}
.lib-card-main { flex: 1; min-width: 0; }
.lib-card-aside {
    text-align: right;
    flex-shrink: 0;
    font-size: .775rem;
    color: var(--text-muted);
    line-height: 1.6;
    white-space: nowrap;
}

/* Ligne compacte visible uniquement sur mobile
   — reprend catégorie + usages en ligne sous la description */
.lib-card-footer {
    display: none;
    margin-top: .4rem;
    font-size: .75rem;
    color: var(--text-muted);
}

/* Formulaire de recherche bibliothèque */

/* Empty state (liste vide / aucun résultat) */
.lib-empty { text-align: center; padding: 3rem; }

/* ─── Breakpoint 480 px — petits téléphones ─────────────────────────── */
@media (max-width: 480px) {

    /* Page header — titre + bouton empilés verticalement */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
        margin-bottom: 1.25rem;
    }
    /* Le bouton CTA prend toute la largeur pour faciliter le tap */
    .page-header > .btn,
    .page-header > a.btn {
        align-self: stretch;
        justify-content: center;
    }

    /* Barre de recherche bibliothèque — visible sur mobile uniquement */
    .lib-search {
        display: flex;
        flex-direction: column;
        gap: .5rem;
        margin-bottom: 1.25rem;
    }
    .lib-search input[type="search"] {
        width: 100%;
        height: 44px;
        padding: 0 1rem;
        background: var(--surface);
        border: 1px solid var(--border-2);
        border-radius: var(--r-lg);
        font-family: var(--font);
        font-size: 1rem;
        color: var(--text);
        outline: none;
        -webkit-appearance: none;
    }
    .lib-search input[type="search"]:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-soft);
    }
    .lib-search input[type="search"]::-webkit-search-decoration,
    .lib-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
    .lib-search .btn {
        width: 100%;
        justify-content: center;
        height: 44px;
        font-size: 1rem;
    }

    /* Cards — métadonnées sous le contenu principal */
    .lib-card-inner  { flex-direction: column; gap: .4rem; }
    .lib-card-aside  { display: none; }
    .lib-card-footer { display: block; }

    /* Empty state — padding réduit */
    .lib-empty { padding: 2rem 1rem; }
}

/* ─── Breakpoint 640 px — tous les mobiles ──────────────────────────── */
@media (max-width: 640px) {
    /* Chips filtres — plus d'espace vertical entre les lignes */
    .lib-chips { row-gap: .5rem; }
}

/* ═══════════════════════════════════════════════════════════
   NAVIGATION MOBILE — Hamburger + Drawer
   ═══════════════════════════════════════════════════════════ */

/* Bouton hamburger — masqué sur desktop */
.nav-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: none;
    border: none;
    border-radius: var(--r);
    cursor: pointer;
    color: var(--text);
    padding: 0;
    flex-shrink: 0;
    margin-right: .25rem;
}
.nav-hamburger:hover { background: var(--surface-2); }
.nav-hamburger svg   { width: 20px; height: 20px; display: block; }

/* Voile sombre derrière le drawer */
.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
}
.mobile-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Panneau drawer */
.mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: min(85vw, 320px);
    height: 100dvh;
    background: var(--surface);
    border-right: 1px solid var(--border);
    z-index: 950;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1);
    overflow: hidden;
}
.mobile-drawer.is-open { transform: translateX(0); }

/* Corps bloqué quand drawer ouvert */
body.drawer-open { overflow: hidden; }

/* — En-tête : profil + bouton fermer — */
.mobile-drawer__head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .875rem 1rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.mobile-drawer__profile {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 1;
    min-width: 0;
    text-decoration: none;
}
.mobile-drawer__avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    line-height: 1;
}
.mobile-drawer__profile-info { min-width: 0; }
.mobile-drawer__name {
    font-size: .875rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mobile-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: none;
    border: none;
    border-radius: var(--r);
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
    flex-shrink: 0;
}
.mobile-drawer__close:hover { background: var(--surface-2); color: var(--text); }
.mobile-drawer__close svg   { width: 16px; height: 16px; display: block; }

/* — Recherche dans le drawer mobile — */
.mobile-drawer__search {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--border);
}
.mobile-drawer__search svg { flex-shrink: 0; color: var(--text-muted); }
.mobile-drawer__search input[type="search"] {
    flex: 1;
    height: 38px;
    padding: 0 .75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    font-family: var(--font);
    font-size: .9rem;
    color: var(--text);
    outline: none;
    -webkit-appearance: none;
}
.mobile-drawer__search input[type="search"]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.mobile-drawer__search input::-webkit-search-decoration,
.mobile-drawer__search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }

/* — Navigation dans le drawer — */
.mobile-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: .5rem 0;
}
.mobile-drawer__section-label {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: .875rem 1rem .3rem;
    opacity: .6;
}
.mobile-drawer__link {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem 1rem;
    font-size: .875rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: background .1s, color .1s;
}
.mobile-drawer__link:hover  { background: var(--surface-2); color: var(--text); }
.mobile-drawer__link.is-active { color: var(--accent); background: var(--accent-soft); font-weight: 500; }
.mobile-drawer__link .icon  { width: 14px; height: 14px; flex-shrink: 0; }

/* Catégories hiérarchiques */
.mobile-drawer__link.drawer-cat-domain { font-size: .84rem; font-weight: 500; color: var(--text); padding-left: 1rem; }
.mobile-drawer__link.drawer-cat-sub    { font-size: .82rem; padding-left: 1.75rem; }

/* Badge notification inline */
.mobile-drawer__notif {
    margin-left: auto;
    background: var(--accent);
    color: #fff;
    border-radius: 9999px;
    font-size: .65rem;
    font-weight: 600;
    padding: .1em .45em;
    min-width: 1.2em;
    text-align: center;
}

/* — Pied : thème + IA + déconnexion — */
.mobile-drawer__foot {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    padding: .875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* Sélecteur de thème en ligne */
.mobile-theme-strip {
    display: flex;
    align-items: center;
    gap: .45rem;
}
.mobile-theme-label {
    font-size: .75rem;
    color: var(--text-muted);
    margin-right: .2rem;
    flex-shrink: 0;
}
.mobile-theme-opt {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: border-color .12s, transform .12s;
    flex-shrink: 0;
}
.mobile-theme-opt.is-active { border-color: var(--accent); transform: scale(1.12); }
.mobile-theme-opt:hover:not(.is-active) { transform: scale(1.08); }

/* Accès rapide IA dans le drawer */
.mobile-ai-strip {
    display: flex;
    align-items: center;
    gap: .4rem;
}
.mobile-ai-label {
    font-size: .75rem;
    color: var(--text-muted);
    margin-right: .2rem;
    flex-shrink: 0;
}

/* Bouton de déconnexion dans le drawer */
.mobile-drawer-logout {
    width: 100%;
    text-align: left;
    padding: .5rem .75rem;
    font-size: .875rem;
    color: var(--text-muted);
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--r);
    cursor: pointer;
    transition: background .1s, color .1s;
}
.mobile-drawer-logout:hover { background: var(--surface-2); color: var(--text); }

/* ─── Breakpoint 768px — activer le drawer ─────────────────────────── */
@media (max-width: 768px) {
    /* Afficher le hamburger */
    .nav-hamburger          { display: flex; }
    /* Masquer les éléments desktop exclusivement */
    .nav-zone--center       { display: none; }
.nav-new-prompt         { display: none; }
    .nav-ai-launcher        { display: none; }
    .theme-switcher         { display: none; }
    .nav-user-name          { display: none; }
    .nav-user-role          { display: none; }
    /* Rétro-compat anciens sélecteurs */
    .nav-ai                 { display: none; }
    .nav-logout-wrap        { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-overlay { transition: none; }
    .mobile-drawer  { transition: none; }
    .mobile-theme-opt { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   ATELIER PROMPT — RESPONSIVE MOBILE
   ═══════════════════════════════════════════════════════════ */

/* La barre d'action de l'atelier utilise le système partagé .actionbar
   (sticky desktop + mobile, zones, titre ellipsis). Voir « Barre d'action
   unifiée ». Plus de second bouton d'enregistrement : le sticky suffit. */

/* — Accordéons (desktop : toggle masqué, body + label toujours visibles) — */
.atelier-section__toggle { display: none; }

/* En-tête de la zone d'écriture : caché desktop (la colonne se suffit) — voir mobile. */
.atelier-writing__label { display: none; }

/* — Boutons ↑↓ tri : masqués sur pointeur précis (souris) — */
@media (hover: hover) and (pointer: fine) {
    .var-sort-btn { display: none !important; }
}

/* ════ Atelier d'écriture (prompt/form.php) — ex-styles inline, chantier S-11 ════
   Déplacement value-preserving. Les overrides mobiles (bloc @media ci-dessous)
   utilisent `!important` → ils l'emportent sur ces règles de classe comme ils
   l'emportaient sur les ex-inline. Les `display:none` lus/écrits par le JS
   (var-config, var-options-row, vars-empty-hint) restent inline (couplage JS). */
.form-errors { background: var(--danger-soft); border: 1px solid var(--danger); border-radius: var(--r); padding: .75rem 1rem; margin-bottom: 1rem; }
.form-errors__list { margin: 0; padding-left: 1.2rem; font-size: .875rem; color: var(--danger); }
.atelier-form { display: grid; grid-template-columns: 272px 1fr; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.atelier-left { background: var(--surface-2); border-right: 1px solid var(--border); position: sticky; top: 0; max-height: calc(100vh - var(--nav-h)); overflow-y: auto; display: flex; flex-direction: column; }
.atelier-pane { padding: 1.25rem; }
.atelier-pane--bordered { border-bottom: 1px solid var(--border); }
.atelier-pane--grow { flex: 1; }
.atelier-kicker { font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
/* Préfixe `.atelier-form` : porte la spécificité à (0,2,0) pour battre la règle
   globale `input[type="text"]…` (0,1,1) que l'ex-style inline (1,0,0,0) battait.
   On ne re-déclare PAS bordure/fond : la règle globale les fournit, comme avant. */
.atelier-form .atelier-title-input { width: 100%; border: none; border-bottom: 1.5px solid var(--border-2); background: transparent; outline: none; font-size: .975rem; font-weight: 600; letter-spacing: -.02em; color: var(--text); padding: .2rem 0 .35rem; transition: border-color .15s; }
.atelier-form .atelier-input { width: 100%; font-size: .8rem; padding: .3rem .45rem; }
.atelier-form .atelier-input--mono { font-family: var(--font-mono); }
.atelier-form .atelier-desc-input { width: 100%; font-size: .8rem; padding: .35rem .5rem; }
.atelier-flabel { font-size: .65rem; color: var(--text-muted); display: block; margin-bottom: .2rem; }
.atelier-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.atelier-vars-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.atelier-vars-head__left { display: flex; align-items: center; gap: .35rem; }
.atelier-add-var { background: none; border: 1px dashed var(--border-2); border-radius: var(--r-sm); padding: .2rem .55rem; font-size: .72rem; color: var(--text-muted); cursor: pointer; transition: all .15s; }
.atelier-type-row { display: grid; grid-template-columns: 1fr auto; gap: .4rem; align-items: end; margin-bottom: .35rem; }
.atelier-req-label { font-size: .72rem; display: flex; align-items: center; gap: .25rem; white-space: nowrap; padding-bottom: .35rem; }
.atelier-var-chip { font-size: .72rem; background: var(--accent-soft); color: var(--accent); padding: .05rem .3rem; border-radius: 3px; }
.atelier-empty-hint { font-size: .75rem; color: var(--text-muted); margin-top: .5rem; }
.atelier-right { background: var(--surface); display: flex; flex-direction: column; }
.atelier-writing { padding: 2rem 2.5rem 1.5rem; }
.atelier-textarea { display: block; width: 100%; min-height: 8rem; border: none; background: transparent; font-family: var(--font-mono); font-size: .9rem; line-height: 1.9; color: var(--text); resize: none; outline: none; padding: 0; overflow: hidden; }
.atelier-stats-row { margin-top: 1.5rem; padding-top: .75rem; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 1rem; }
.atelier-stats { flex: 1; font-size: .72rem; color: var(--text-muted); }
.atelier-autosave { font-size: .72rem; color: var(--success); opacity: 0; transition: opacity .4s; flex-shrink: 0; }
.atelier-hint-mono { font-size: .72rem; color: var(--border-2); }
.atelier-hint-code { font-size: .72rem; }
.atelier-section--top { border-top: 1px solid var(--border); }
.atelier-preview-zone { padding: 1.5rem 2.5rem 2rem; background: var(--surface-2); }
.atelier-preview { font-size: .875rem; line-height: 1.85; color: var(--text); white-space: pre-wrap; word-break: break-word; min-height: 5rem; max-height: 18rem; overflow-y: auto; font-family: var(--font-mono); }
.atelier-preview-status { font-size: .72rem; margin-top: .65rem; color: var(--text-muted); }
.atelier-preview-placeholder { color: var(--text-muted); font-style: italic; }
.atelier-preview-unknown { color: var(--warning); }

/* ─── Responsive 768px ─────────────────────────────────────── */
@media (max-width: 768px) {

    /* La barre (.actionbar) reste sticky via le système partagé.
       Sur mobile, le toggle d'accordéon devient l'unique en-tête de
       section → on masque le label interne pour tuer la duplication. */
    .atelier-section__label { display: none; }

    /* Layout : pile verticale */
    .atelier-form {
        display: block !important;
    }
    .atelier-left {
        position: static !important;
        max-height: none !important;
        overflow-y: visible !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border);
    }

    /* Accordéons */
    .atelier-section__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: .75rem 1.25rem;
        border: none;
        border-bottom: 1px solid var(--border);
        background: none;
        cursor: pointer;
        user-select: none;
        font-size: .65rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--text-muted);
    }
    .atelier-section__toggle:hover { background: var(--surface-2); }
    .atelier-section__chevron { transition: transform .2s; flex-shrink: 0; }
    .atelier-section.is-open .atelier-section__chevron { transform: rotate(90deg); }

    /* Collapse accordéon : minmax(0, …) force le minimum du track à 0.
       Un simple « 0fr » vaut minmax(auto, 0fr) → le minimum auto retombe
       sur le min-content (~38px : le champ titre dépassait sous la barre). */
    .atelier-section__body {
        display: grid;
        grid-template-rows: minmax(0, 0fr);
        overflow: hidden;
        transition: grid-template-rows .22s ease;
    }
    .atelier-section__body > * { min-height: 0; }
    .atelier-section.is-open .atelier-section__body { grid-template-rows: minmax(0, 1fr); }

    /* Grilles 2 colonnes internes → 1 colonne */
    .atelier-grid-2 { grid-template-columns: 1fr !important; }

    /* Padding réduit sur le panneau d'écriture et l'aperçu */
    .atelier-writing      { padding: 1.25rem !important; }
    .atelier-preview-zone { padding: 1.25rem !important; }

    /* En-tête « Corps du prompt » : empilé sur mobile, le textarea sans bordure
       perd son contexte de colonne. On lui rend un en-tête full-bleed, calé
       sur les toggles d'accordéon (sans chevron : la zone est toujours visible). */
    .atelier-writing__label {
        display: block;
        margin: -1.25rem -1.25rem 1rem;
        padding: .75rem 1.25rem;
        border-bottom: 1px solid var(--border);
        font-size: .65rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    /* Boutons ↑↓ tri variables */
    .var-sort-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        padding: .15rem .3rem;
        border-radius: 3px;
        font-size: .85rem;
        line-height: 1;
        color: var(--text-muted);
        opacity: .5;
        flex-shrink: 0;
        transition: opacity .15s, background .1s;
    }
    .var-sort-btn:hover { opacity: 1; background: var(--surface-2); }

    /* Bouton droit */
    .atelier-right { border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .atelier-section__chevron { transition: none; }
    .atelier-section__body    { transition: none; }
}

/* ── Autosave — bannière brouillon local ── */
.draft-banner {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .4rem 1rem;
    background: var(--warning-soft);
    border: 1px solid #fcd89a;
    border-radius: var(--r);
    font-size: .8rem;
    color: var(--warning);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.draft-banner__msg { flex: 1; min-width: 0; }
.draft-banner__restore {
    background: var(--warning);
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    padding: .2rem .65rem;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
    white-space: nowrap;
}
.draft-banner__restore:hover { opacity: .85; }
.draft-banner__discard {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--warning);
    font-size: 1.1rem;
    line-height: 1;
    padding: .1rem .3rem;
    opacity: .55;
    transition: opacity .15s;
}
.draft-banner__discard:hover { opacity: 1; }

/* ─── Utilitaires manquants ─────────────────────────────────── */
.btn-xs       { padding: .15rem .5rem; font-size: .72rem; }
.link-subtle  { color: inherit; text-decoration: none; }
.link-subtle:hover { text-decoration: underline; color: var(--accent); }
.badge-role   { background: var(--surface-2); color: var(--text-muted); font-weight: 500; }

/* ─── Page Statistiques (T07) ───────────────────────────────── */
.stats-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.stats-kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    box-shadow: var(--shadow-sm);
}
.stats-kpi__value { font-size: 1.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.stats-kpi__label { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }

.stats-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.stats-card-title {
    font-size: .9rem;
    font-weight: 600;
    margin: 0 0 1rem;
    color: var(--text);
}

.stats-bars { display: flex; flex-direction: column; gap: .6rem; }
.stats-bar-row { display: flex; align-items: center; gap: .6rem; }
.stats-bar-label {
    width: 8rem;
    flex-shrink: 0;
    font-size: .78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stats-bar-track {
    flex: 1;
    height: .55rem;
    background: var(--surface-2);
    border-radius: 99px;
    overflow: hidden;
}
.stats-bar-fill {
    height: 100%;
    border-radius: 99px;
    background: var(--accent);
    transition: width .4s ease;
    min-width: 2px;
}
.stats-bar-fill--domain      { background: var(--accent); }
.stats-bar-fill--published   { background: var(--success); }
.stats-bar-fill--draft       { background: var(--warning); }
.stats-bar-fill--pending_review { background: #a78bfa; }
.stats-bar-fill--rejected    { background: var(--danger); }
.stats-bar-fill--archived    { background: var(--text-muted); }
.stats-bar-count { font-size: .75rem; color: var(--text-muted); min-width: 1.5rem; text-align: right; font-variant-numeric: tabular-nums; }

.stats-table-wrap { overflow-x: auto; }
.stats-table {
    width: 100%;
    /* Sans min-width, la table se comprime sous 390px au lieu de déborder :
       overflow-x du wrapper ne s'active jamais et les colonnes de droite
       (Utilisations / Exécutions / Dernière exécution) sont rognées. */
    min-width: 560px;
    border-collapse: collapse;
    font-size: .82rem;
}
.stats-table th {
    text-align: left;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    padding: .4rem .6rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.stats-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--border-subtle, var(--border)); vertical-align: middle; }
.stats-table tbody tr:last-child td { border-bottom: none; }
.stats-table tbody tr:hover td { background: var(--surface-2); }
.stats-row--inactive td { opacity: .5; }

.stats-table__rank { color: var(--text-muted); width: 2rem; font-variant-numeric: tabular-nums; }
.stats-table__title { max-width: 18rem; }
.stats-table__title a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.stats-table__cat { color: var(--text-muted); font-size: .78rem; max-width: 9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.stats-inline-bar {
    display: flex;
    align-items: center;
    gap: .4rem;
    justify-content: flex-end;
}
.stats-inline-track {
    width: 5rem;
    height: .45rem;
    background: var(--surface-2);
    border-radius: 99px;
    overflow: hidden;
    flex-shrink: 0;
}
.stats-inline-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 99px;
    min-width: 2px;
}
.stats-inline-val { font-variant-numeric: tabular-nums; font-size: .8rem; min-width: 2.5rem; text-align: right; }

.stats-user-name { display: block; font-weight: 500; }
.stats-user-email { display: block; font-size: .72rem; color: var(--text-muted); }

/* Responsive stats */
@media (max-width: 900px) {
    .stats-kpi-grid { grid-template-columns: repeat(3, 1fr); }
    .stats-row-2    { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .stats-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ════ Fiche prompt (prompt/show.php) — ex-styles inline, chantier S-11 ════
   Déplacement value-preserving (diff CDP = 0). Placé en fin de zone composants
   pour que `.badge-meta` etc. l'emportent sur `.badge` (même spécificité). */
.icon-row { display: flex; align-items: center; gap: .5rem; }
.is-hidden { display: none; }
.show-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 1.5rem; align-items: start; }
.show-badges { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.badge-meta { background: var(--surface-2); color: var(--text-muted); }
.show-fav-star { color: #d97706; }
.show-fav-on { color: #d97706; }
.show-title { font-size: 1.4rem; margin-bottom: .4rem; }
.show-desc { color: var(--text-muted); margin-bottom: .75rem; }
.show-meta { font-size: .8rem; color: var(--text-muted); display: flex; gap: 1rem; flex-wrap: wrap; }
.show-meta__strong { color: var(--text); }
.show-tags { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.show-tag { font-size: .75rem; padding: .15rem .5rem; background: var(--surface-2); border-radius: 9999px; text-decoration: none; color: var(--text-muted); }
.show-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: .5rem; }
.show-label--mb6 { margin-bottom: .6rem; }
.show-label--head { margin-bottom: 1rem; display: flex; align-items: center; gap: .4rem; }
/* Bouton « Copier le prompt rempli » — poussé à droite de l'en-tête de l'aperçu */
.show-copy-filled { margin-left: auto; }
.show-template-pre { margin: 0; font-size: .85rem; white-space: pre-wrap; word-break: break-word; line-height: 1.7; background: var(--surface-2); padding: 1rem; border-radius: 8px; overflow: auto; max-height: 20rem; }
.show-preview-pre { margin: 0; font-size: .85rem; white-space: pre-wrap; line-height: 1.7; background: var(--surface-2); padding: 1rem; border-radius: 8px; min-height: 6rem; }
.show-preview-pre--scroll { margin: 0 0 .5rem; overflow: auto; max-height: 16rem; }
.show-var-form { display: grid; gap: .6rem; margin-bottom: 1rem; }
.show-var-textarea { resize: vertical; min-height: 4rem; }
.show-multi { display: flex; flex-direction: column; gap: .25rem; }
.show-check-label { font-weight: normal; font-size: .875rem; display: flex; align-items: center; gap: .4rem; }
.show-preview-status { font-size: .775rem; margin: 0; }
/* Panneau « Tester le prompt » (rendu si $canRun) */
.run-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; flex-wrap: wrap; }
.run-panel-icon { font-size: 1rem; line-height: 1; }
.run-panel-title { font-weight: 600; font-size: .95rem; }
.run-panel-hint { font-size: .78rem; color: var(--text-muted); font-weight: 400; }
/* Sous-ligne honnête du banc d'essai (occupe toute la largeur sous l'en-tête flex) */
.run-panel-sub { flex-basis: 100%; width: 100%; margin: 0; font-size: .8rem; color: var(--text-muted); line-height: 1.5; max-width: 70ch; }
.run-panel-models { display: flex; gap: .4rem; flex-wrap: wrap; }
.run-card { padding: 0; overflow: hidden; }
.run-settings { padding: .875rem 1.25rem; border-bottom: 1px solid var(--border); }
.run-settings-row1 { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .7rem; }
.run-tone-group { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.run-label { font-size: .7rem; color: var(--text-muted); flex-shrink: 0; }
.run-label-wide { font-size: .7rem; color: var(--text-muted); flex-shrink: 0; min-width: 5.5rem; }
.run-pill-wrap { display: flex; gap: .3rem; flex-wrap: wrap; }
.run-btn-exec { min-width: 7rem; display: flex; align-items: center; justify-content: center; gap: .5rem; flex-shrink: 0; }
.run-temp-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.run-temp-bound { font-size: .65rem; color: var(--text-muted); flex-shrink: 0; }
.run-temp-slider { flex: 1; cursor: pointer; accent-color: var(--accent); }
.run-temp-val { font-size: .72rem; font-family: var(--font-mono); color: var(--accent); min-width: 2.2rem; text-align: right; }
.run-len-row { display: flex; align-items: center; gap: .6rem; }
.run-len-pills { display: flex; gap: .25rem; }
.run-loading { display: none; padding: 2.5rem; text-align: center; }
.run-spinner { display: inline-block; width: 1.75rem; height: 1.75rem; border: 2.5px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: vaclav-spin .7s linear infinite; }
.run-loading__txt { margin: .75rem 0 0; font-size: .85rem; color: var(--text-muted); }
.run-result-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 1.25rem; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.run-meta { display: flex; gap: .4rem; flex-wrap: wrap; font-size: .775rem; }
.run-copy-btn { font-size: .775rem; padding: .25rem .7rem; white-space: nowrap; }
.run-output { padding: 1.25rem 1.5rem; font-size: .875rem; line-height: 1.75; overflow: auto; max-height: 34rem; color: var(--text); }
.run-error { display: none; padding: 1rem 1.25rem; font-size: .85rem; color: var(--danger); background: var(--danger-soft); border-top: 1px solid var(--border); }
.run-hist__icon { font-size: .9rem; line-height: 1; }
.run-badge { background: var(--surface-2); border: 1px solid var(--border); padding: .2rem .6rem; border-radius: 9999px; white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════════════════
   Couche utilitaire — chantier S-11 (styles inline → classes, sans flip CSP)
   Convention : préfixe `u-`. Barème BORNÉ aux valeurs réellement employées
   (suffixe = valeur rem sans point : `u-mt-175` = margin-top:1.75rem).
   But : éliminer les attributs style="" statiques sans changer le rendu
   (diff CDP = 0). L'harmonisation des valeurs proches viendra plus tard.
   ════════════════════════════════════════════════════════════════════════════ */
.u-m-0       { margin: 0; }
.u-mb-035    { margin-bottom: .35rem; }
.u-mb-06     { margin-bottom: .6rem; }
.u-mb-075    { margin-bottom: .75rem; }
.u-mb-1      { margin-bottom: 1rem; }
.u-mb-125    { margin-bottom: 1.25rem; }
.u-mb-15     { margin-bottom: 1.5rem; }
.u-mt-1      { margin-top: 1rem; }
.u-mt-125    { margin-top: 1.25rem; }
.u-mt-15     { margin-top: 1.5rem; }
.u-mt-175    { margin-top: 1.75rem; }
.u-mt-25     { margin-top: 2.5rem; }
.u-w-full    { width: 100%; }
.u-text-center { text-align: center; }
.u-text-muted  { color: var(--text-muted); }
.u-text-accent { color: var(--accent); }
.u-text-danger { color: var(--danger); }
.u-text-warning { color: var(--warning); }
.u-fw-normal { font-weight: normal; }
.u-fs-8      { font-size: .8rem; }
.u-fs-875    { font-size: .875rem; }
.u-shrink-0  { flex-shrink: 0; }

/* Composant — ligne label + lien « mot de passe oublié » (atelier auth) */
.auth-pwd-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .4rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   S-11 · Aire admin — styles inline → classes (refactor présentation, diff CDP=0).
   Restent inline (DYNAMIQUES) : couleur/fond d'avatar ($color), opacité de ligne
   inactive, couleur de statut actif/danger, et les propriétés pilotées par le JS
   (barres de robustesse, couleurs de critères, display des accordéons/confirm).
   ═══════════════════════════════════════════════════════════════════════════ */

/* — Utilitaires complémentaires — */
.u-mb-04  { margin-bottom: .4rem; }
.u-mb-175 { margin-bottom: 1.75rem; }
.u-mt-05  { margin-top: .5rem; }
.u-mt-075 { margin-top: .75rem; }
.u-fs-65  { font-size: .65rem; }
.u-fs-75  { font-size: .75rem; }
.u-fs-82  { font-size: .82rem; }
.u-fw-500 { font-weight: 500; }
.u-inline { display: inline; }
.u-overflow-hidden { overflow: hidden; }
.u-p-0    { padding: 0; }

/* — Conteneurs de formulaire centrés — */
.profile-page   { max-width: 600px; margin: 0 auto; }
.user-form-page { max-width: 680px; margin: 0 auto; }
.ws-form-page   { max-width: 640px; margin: 0 auto; }
.ws-invite-page { max-width: 560px; margin: 0 auto; }

/* Lien de retour « ← … » des formulaires admin */
.form-back { color: var(--text-muted); font-size: .875rem; }

/* En-tête de page : variante centrée (listes users/workspaces) + sous-titre */
.page-header--center { align-items: center; margin-bottom: 1.5rem; }
.page-subtitle { margin: .25rem 0 0; color: var(--text-muted); font-size: .875rem; }
.intro-note { margin: .4rem 0 0; color: var(--text-muted); font-size: .875rem; }
.field-note { margin: .4rem 0 0; font-size: .8rem; color: var(--text-muted); }

/* Titres et aides de carte */
.card-label { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 1.25rem; }
.card-label--mb04 { margin: 0 0 .4rem; }
.card--pad-15 { padding: 1.5rem; }
.card-h2 { font-size: 1rem; font-weight: 600; margin: 0 0 1rem; }
.card-h2--mb05 { margin: 0 0 .5rem; }
.card-hint { font-size: .82rem; color: var(--text-muted); margin: 0 0 1rem; }
.card-hint--mb125 { margin: 0 0 1.25rem; }
.form-hint { font-size: .85rem; color: var(--text-muted); margin: 0 0 1rem; }

/* Libellé de champ (profil — bloc + .85rem) + grille identité 2 colonnes */
.field-label { display: block; margin-bottom: .35rem; font-size: .85rem; font-weight: 500; }
.id-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.id-grid .field { margin: 0; }

/* — Sélecteur d'avatar (profil + form utilisateur) — */
.avatar-picker { display: flex; flex-wrap: wrap; gap: .5rem; }
.avatar-radio { cursor: pointer; }
.avatar-radio input { display: none; }
.avatar-opt {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    border: 2px solid var(--border); background: var(--surface-raised);
    cursor: pointer; transition: border-color .15s;
    font-size: 1.2rem;
}
.avatar-opt--initials { font-size: .75rem; font-weight: 700; }

/* — Robustesse du mot de passe — */
.pwd-card .field { margin-top: 0; }
.pwd-bar-wrap { display: none; margin-top: .65rem; }
.pwd-bars { display: flex; gap: 3px; margin-bottom: .5rem; }
.pwd-bar  { height: 4px; flex: 1; border-radius: 2px; background: var(--border); transition: background .2s; }
.pwd-reqs { display: flex; flex-wrap: wrap; gap: .3rem .75rem; }
.pwd-req  { font-size: .78rem; color: var(--text-muted); }
.pwd-confirm-msg { display: none; font-size: .78rem; margin-top: .35rem; }
.input-disabled { opacity: .55; cursor: not-allowed; }
.pwd-strength { margin-top: .75rem; display: none; }
.pwd-reqs-inline { display: flex; flex-wrap: wrap; gap: .4rem .75rem; font-size: .8rem; }

/* — Tables admin denses — */
.table-scroll { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.admin-table--minw { min-width: 680px; }
.admin-table thead tr { border-bottom: 1px solid var(--border); }
.admin-table tbody tr { border-bottom: 1px solid var(--border); }
.admin-table th { padding: .75rem 1rem; font-weight: 600; color: var(--text-muted); text-align: left; }
.admin-table td { padding: .75rem 1rem; }
.admin-table--tight th, .admin-table--tight td { padding: .65rem 1rem; }
.admin-table .c-center { text-align: center; }
.admin-table .c-right  { text-align: right; }
.admin-table .cell-empty { padding: 2rem; text-align: center; color: var(--text-muted); }
.row-head-raised { background: var(--surface-raised); }

/* Cellules : pastille membre, statut, actions, identité */
.member-avatar { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; color: #fff; flex-shrink: 0; }
.member-avatar--show { display: inline-flex; font-weight: 700; }
.status-pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 500; }
.status-pill__dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; display: inline-block; }
.self-tag { font-size: .72rem; color: var(--text-muted); margin-left: .25rem; }
.row-actions      { display: flex; align-items: center; gap: .4rem; }
.row-actions-end  { display: flex; align-items: center; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }
.row-actions-wrap { display: flex; gap: .5rem; flex-wrap: wrap; }
.member-identity { display: flex; align-items: center; gap: .6rem; }
.user-identity   { display: flex; align-items: center; gap: .75rem; }
.ws-name-cell    { display: flex; align-items: center; gap: .5rem; }
.ws-name-link    { font-weight: 500; color: var(--text); text-decoration: none; }
.btn.btn--muted  { opacity: .45; cursor: not-allowed; } /* .btn.btn--muted (0,0,2,0) bat .btn:disabled (0,0,2,0) par l'ordre source — sinon le bouton désactivé reprend opacity:.5 */

/* — Carte « section » (workspaces/show : Membres / Invitations) — */
.card-section-head { padding: .75rem 1rem .5rem; border-bottom: 1px solid var(--border); }
.card-section-head__title { margin: 0; font-size: .875rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.card-section-head__title--warn { color: var(--warning); }
.card-empty { padding: 2rem; text-align: center; color: var(--text-muted); }

/* — Carte réglage (users/index : inscription libre) — */
.settings-row { margin-bottom: 1.5rem; padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.settings-row__hint { margin: .2rem 0 0; font-size: .85rem; color: var(--text-muted); }

/* Champ case à cocher en ligne (workspace actif) */
.field-check { align-items: center; gap: .75rem; }
.checkbox-sm { width: 1rem; height: 1rem; }
.u-pointer { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════════════════
   S-11 · Aire workspace/ (Mon workspace + invitation membre) — inline → classes.
   Reste inline (DYNAMIQUE) : taille de police de l'avatar (avatar présent vs
   initiales). Diff CDP=0. En-tête : réutilise .page-header--center (l'original
   portait déjà class="page-header" + override inline align/margin = ce modifieur).
   ═══════════════════════════════════════════════════════════════════════════ */
.u-fs-85 { font-size: .85rem; }
.ws-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--surface-raised); font-weight: 700; flex-shrink: 0; }
.ws-role-form { display: flex; gap: .5rem; align-items: center; }
.select-sm { font-size: .8rem; padding: .25rem .5rem; }
.member-invite-page { max-width: 520px; margin: 0 auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   S-11 · Aire stats/ — inline → classes. Restent inline (DYNAMIQUES) : les 3
   largeurs de barres `width:<?= round(...) ?>%` (statut, domaine, top usage).
   Diff CDP=0.
   ═══════════════════════════════════════════════════════════════════════════ */
/* — Utilitaires génériques (réutilisables hors stats) — */
.u-text-right { text-align: right; }
.u-tnum { font-variant-numeric: tabular-nums; }
.u-fs-62 { font-size: .62rem; }
.u-fs-7  { font-size: .7rem; }
/* — Classes scopées stats — */
.stats-recompute-form { display: flex; align-items: center; gap: .6rem; margin: 0; }
.stats-status-badge { font-size: .65rem; min-width: 6.5rem; }
.empty-state--pad15 { padding: 1.5rem 0; }
/* `.stats-table th { text-align:left }` (0,0,1,1) bat `.u-text-right` (0,0,1,0) :
   l'ex-inline (1,0,0,0) gagnait, l'utilitaire seul perd sur les <th>. Scoper
   (0,0,2,0) pour rétablir l'alignement à droite des en-têtes numériques (cf.
   lessons.md « migration peut baisser la spécificité », 15 juin). */
.stats-table .u-text-right { text-align: right; }

/* ═══════════════════════════════════════════════════════════════════════════
   S-11 · Aires runs/ + watch/index — inline → classes. Diff CDP=0.
   (categories/index reste à 3 styles DYNAMIQUES : hsl($hue)/`--cat-hue` pilotés
   par la teinte de domaine — non migrables, plancher atteint.)
   ═══════════════════════════════════════════════════════════════════════════ */
.u-mt-02 { margin-top: .2rem; }
.watch-empty { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
/* Pagination générique (veille + bibliothèque — valeurs identiques, consolidées) */
.pager { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 1.5rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   S-11 · Aire library/ (bibliothèque : en-tête, chips de filtre, états vides,
   grille de cartes, pagination) — inline → classes. Diff CDP=0.
   ═══════════════════════════════════════════════════════════════════════════ */
.u-mb-05 { margin-bottom: .5rem; }
/* Chips de filtres actifs — base déplacée de l'inline (la règle mobile
   `.lib-chips { row-gap:.5rem }` était morte : l'inline gap:.4rem la battait). */
.lib-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.lib-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; background: var(--accent-soft); color: var(--accent); border-radius: 9999px; font-size: .8rem; text-decoration: none; }
/* États vides (aucun résultat / aucun prompt) */
.lib-empty__icon { font-size: 1.75rem; margin-bottom: .5rem; }
.lib-empty__icon--xl { font-size: 2rem; }
.lib-empty__title { color: var(--text); margin-bottom: .5rem; }
.lib-empty__text { margin: 0 0 1.5rem; color: var(--text-muted); }
/* Grille + cartes de prompts */
.lib-grid { display: grid; gap: .75rem; }
.lib-card-link { display: block; text-decoration: none; }
.lib-card-status { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.lib-card-star { color: #d97706; }
.lib-card-title { font-size: 1rem; margin-bottom: .2rem; color: var(--text); }
.lib-card-desc { font-size: .825rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   S-11 · Aire dashboard/ — inline → classes. Restent inline (DYNAMIQUES) :
   position du pic d'activité (`left:$peakX%;top:$peakY%`) + largeur de barre
   d'usage (`width:$pct%`). Diff CDP=0.
   NB diff=0 : `var(--fg-muted)` et `var(--radius-md)` sont reproduits VERBATIM
   bien qu'UNDEFINED dans le thème (typos latents pour --text-muted / --r-lg :
   le texte tombe en couleur héritée, la box d'attente a radius:0). À corriger
   au lot « harmonisation » séparé — les changer ici casserait le diff=0.
   ═══════════════════════════════════════════════════════════════════════════ */
.u-mt-025 { margin-top: .25rem; }
.u-self-start { align-self: flex-start; }
.dash-pending-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.dash-import__summary { cursor: pointer; color: var(--fg-muted); font-size: .85rem; padding: .4rem 0; list-style: none; display: flex; align-items: center; gap: .4rem; }
.dash-import__form { margin-top: .75rem; display: flex; flex-direction: column; gap: .6rem; }
.dash-import__check { display: flex; align-items: center; gap: .5rem; font-size: .85rem; cursor: pointer; color: var(--fg-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   S-11 · Aire doc/ (documentation in-app) — inline → classes. Diff CDP=0.
   (Variantes .badge-* : même spécificité que .badge, définies après → OK.)
   ═══════════════════════════════════════════════════════════════════════════ */
/* gap:1rem inclus À DESSEIN : l'inline d'origine le posait, ce qui écrasait la
   media-query mobile `.page-header { gap:.75rem }` (l.4449) → header mobile à 1rem.
   Sans lui, la migration retombe à .75rem en mobile (diff de hauteur). */
.page-header--wrap { flex-wrap: wrap; gap: 1rem; }
.doc-dl-icon { vertical-align: -2px; margin-right: .35rem; }
.badge-accent { background: var(--accent-soft); color: var(--accent); }
.badge-superadmin { background: #f3e8ff; color: #7c3aed; }
/* `.doc-section ul` (0,0,1,1) bat `.doc-list` (0,0,1,0) sur `margin` — l'ex-inline
   (1,0,0,0) gagnait. Scoper (0,0,2,0) pour conserver la marge gauche + line-height
   (cf. lessons.md « utilitaire nu perd contre `.parent <tag>` », 18 juin). */
.doc-section .doc-list { margin: .5rem 0 .5rem 1.25rem; line-height: 1.8; }

/* — Pied de formulaire (boutons) + en-tête workspaces/show — */
.form-actions { display: flex; gap: .75rem; }
.ws-show__header { align-items: flex-start; margin-top: .5rem; flex-wrap: wrap; gap: .75rem; }
.ws-show__titleline { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.ws-show__actions { display: flex; gap: .5rem; flex-wrap: wrap; }