:root {
    /* ─── Couleurs : fond (3 niveaux d'élévation) ─── */
    --bg-primary:   #0f0f12;
    --bg-elevated:  #18181d;
    --bg-overlay:   #22222a;

    /* ─── Couleurs : texte (3 niveaux) ─── */
    --text-primary:    #fafafa;
    --text-secondary:  #a0a0a8;
    --text-muted:      #909098;

    /* ─── Accent (vert signature) ─── */
    --accent:       #a3ff5e;
    --accent-soft:  #c8ff9b;
    --accent-deep:  #7dcc41;
    --accent-glow:  rgba(163, 255, 94, 0.20);

    /* ─── Sémantique d'état ─── */
    --success:  #4ade80;
    --warning:  #fbbf24;
    --error:    #f87171;   /* destruction soft (boutons "Supprimer", erreurs backup) */
    --danger:   #b91c1c;   /* destruction lourde (badges, alertes critiques) */
    --info:     #60a5fa;

    /* ─── Bordures ─── */
    --border-subtle:  #2a2a32;
    --border-strong:  #3f3f48;

    /* ─── Typographie : familles ─── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, Consolas, 'Liberation Mono', monospace;

    /* ─── Typographie : tailles ─── */
    --text-xs:    0.75rem;
    --text-sm:    0.875rem;
    --text-base:  1rem;
    --text-lg:    1.125rem;
    --text-xl:    1.5rem;
    --text-2xl:   2rem;

    /* ─── Typographie : poids ─── */
    --font-regular:  400;
    --font-medium:   500;
    --font-bold:     700;
    --font-black:    800;

    /* ─── Typographie : interlignes ─── */
    --leading-tight:  1.05;
    --leading-snug:   1.2;
    --leading-base:   1.6;

    /* ─── Espacement (échelle 4px) ─── */
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-5:   1.25rem;
    --space-6:   1.5rem;
    --space-8:   2rem;

    /* ─── Radius ─── */
    --radius-sm:    6px;
    --radius-md:    8px;
    --radius-lg:    12px;
    --radius-pill:  999px;

    /* ─── Layout ─── */
    --sidebar-width:  240px;

    /* ─── Transitions ─── */
    --transition-fast:      0.15s ease;
    --transition-base:      0.25s ease;
    --transition-emphasis:  200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Polices self-hosted (mêmes fichiers que portfolio + BO Stephan) ─── */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/inter-medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/inter-bold.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/assets/fonts/inter-extrabold.woff2') format('woff2');
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-soft); }

::selection { background: var(--accent); color: var(--bg-primary); }

*:focus { outline: none; }
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Login */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card {
    background: var(--bg-elevated);
    padding: 40px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    width: 100%; max-width: 400px;
}
.login-card h1 { color: var(--accent); margin-bottom: 4px; }
.login-sub { color: var(--text-muted); font-size: 14px; margin-bottom: 24px; }
.login-card label { display: block; margin: 12px 0; font-size: 14px; }
.login-card input {
    width: 100%; padding: 10px 12px;
    background: var(--bg-overlay); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
    color: var(--text-primary); font: inherit;
    margin-top: 4px;
}
.login-card button {
    width: 100%; padding: 12px; margin-top: 16px;
    background: var(--accent); color: var(--bg-primary);
    border: none; border-radius: var(--radius-sm);
    font-weight: 600; cursor: pointer;
}

/* Console streaming */
.streaming-page { padding: 24px; }
.console {
    background: #000;
    color: var(--text-primary);
    font-family: var(--font-mono);
    padding: 16px;
    border-radius: var(--radius-sm);
    line-height: 1.5;
    max-height: 600px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
.console .ok { color: var(--accent); }
.console .warn { color: var(--warning); }
.console .err { color: var(--error); }
.console .run { color: var(--text-muted); }

/* Boxes */
.error-box, .success-box {
    margin-top: 16px;
    padding: 16px;
    border-radius: var(--radius-sm);
}
.error-box { background: rgba(255,107,107,0.1); border: 1px solid var(--error); color: var(--error); }
.success-box { background: rgba(163,255,94,0.1); border: 1px solid var(--accent); color: var(--accent); }

/* Layout app */
.app-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar { background: var(--bg-elevated); border-right: 1px solid var(--border-subtle); padding: 24px; }
.sidebar h1 { font-size: 18px; color: var(--accent); margin-bottom: 24px; }
.sidebar nav { display: flex; flex-direction: column; }
.sidebar nav a {
    display: block; padding: 9px 12px;
    color: var(--text-primary); border-radius: var(--radius-sm);
    margin-bottom: 2px; font-size: 14px;
    transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1),
                color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 120ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar nav a:hover { background: var(--bg-overlay); }
.sidebar nav a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
.sidebar nav a.active { background: var(--bg-overlay); color: var(--accent); }
.sidebar-sep {
    border: none; border-top: 1px solid var(--border-subtle);
    margin: 12px 4px;
}
.sidebar nav a.sidebar-cta {
    background: var(--bg-overlay);
    border: 1px dashed var(--border-strong);
    color: var(--accent);
    text-align: center; font-weight: 500;
}
.sidebar nav a.sidebar-cta:hover {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
    transform: translateY(-1px);
}
.sidebar nav a.sidebar-cta.active {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
}

/* ─── Onglets (Géré / Manuel sur dashboard) ────────────────── */
.sites-tabs { display: flex; gap: 4px; }
.sites-tab {
    padding: 10px 18px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px; font-weight: 500;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                background 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sites-tab:hover { color: var(--text-primary); background: var(--bg-overlay); }
.sites-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}
.sites-tab--active,
.sites-tab[aria-selected="true"] {
    color: var(--text-primary);
    border-bottom-color: var(--accent);
}
.sites-tab__count { color: var(--text-muted); font-weight: 400; margin-left: 2px; }

.main { padding: 32px; }
.main h2 { margin-bottom: 16px; }

/* ─── Table (aligné avec BO Stephan) ─── */
.table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.table th, .table td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-subtle);
}
.table th {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    font-weight: var(--font-bold);
}
.table td { font-size: 13px; }
.table tbody tr {
    transition: background var(--transition-fast);
}
.table tbody tr:hover { background: var(--bg-overlay); }
.table .num { font-variant-numeric: tabular-nums; text-align: right; }
.table .actions { text-align: right; white-space: nowrap; }

/* ─── Badges (managed/manual + actif) ─── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.badge--managed { background: rgba(163,255,94,0.15); color: var(--accent); }
.badge--manual  { background: rgba(251,191,36,0.15); color: var(--warning); }
.badge--backup  { background: rgba(96,165,250,0.15); color: var(--info); }
.badge--expire-soon { background: rgba(251,191,36,0.18); color: var(--warning); }

/* ─── Forms ─── */
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-size: 13px; color: var(--text-secondary); font-weight: var(--font-medium); margin-bottom: 4px; }
.form-field input[type=text],
.form-field input[type=email],
.form-field input[type=url],
.form-field input[type=password],
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-overlay);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.checkbox-group {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 16px;
}
.checkbox-group label { display: flex; align-items: center; gap: 8px; padding: 8px 0; cursor: pointer; }

/* ─── Buttons (système unifié avec BO Stephan) ─── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 13px;
    font-weight: var(--font-bold);
    line-height: 1.2;
    cursor: pointer;
    border: 1px solid transparent;
    background: var(--accent);
    color: var(--bg-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:hover:not(:disabled) { background: var(--accent-soft); }

.btn--secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-strong);
}
.btn--secondary:hover:not(:disabled) {
    background: transparent;
    border-color: var(--accent);
    color: var(--accent);
}

.btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}
.btn--ghost:hover:not(:disabled) { background: transparent; color: var(--accent); }

.btn--danger {
    background: var(--error);
    color: #fff;
    border-color: transparent;
}
.btn--danger:hover:not(:disabled) {
    background: #fa9595;     /* error éclairci ~10% */
    color: #fff;
}

.btn--sm { padding: 5px 10px; font-size: 12px; }

/* Spinner inline pour les boutons en état loading (state="loading") */
.btn[data-loading="true"] { position: relative; color: transparent !important; }
.btn[data-loading="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
    color: var(--bg-primary);
}
.btn--secondary[data-loading="true"]::after,
.btn--ghost[data-loading="true"]::after { color: var(--text-primary); }
@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   MOTION POLISH (V8 — 2026-05-14)
   Transitions et micro-anims cohérentes sur tous les éléments
   interactifs. Respecte prefers-reduced-motion.
   ============================================================ */

/* Table rows : highlight subtil au survol (déjà sur cells, on ajoute lift) */
.table tbody tr {
    transition: background var(--transition-fast),
                transform 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Cards interactives (badges, sites, archives) : hover lift léger */
.card-interactive,
.health-grid > div {
    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.card-interactive:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* Liens dans le contenu : transition color sur hover */
.main a:not(.btn):not(.sites-tab) {
    transition: color var(--transition-fast);
}

/* Inputs/selects : transition sur focus (border + glow) */
.form-field input,
.form-field select,
.form-field textarea {
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast);
}

/* Fade-in des cards async (health widget, system-backups) */
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
#health-grid > div,
.system-backup-card {
    animation: fade-in-up 280ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
/* Stagger : chaque card entre avec 40ms de décalage (max 8 cards) */
#health-grid > div:nth-child(1) { animation-delay: 0ms; }
#health-grid > div:nth-child(2) { animation-delay: 40ms; }
#health-grid > div:nth-child(3) { animation-delay: 80ms; }
#health-grid > div:nth-child(4) { animation-delay: 120ms; }
#health-grid > div:nth-child(5) { animation-delay: 160ms; }
#health-grid > div:nth-child(6) { animation-delay: 200ms; }
#health-grid > div:nth-child(7) { animation-delay: 240ms; }
#health-grid > div:nth-child(8) { animation-delay: 280ms; }

/* Boutons : subtle scale au press pour tactile */
.btn:active:not(:disabled) {
    transform: scale(0.98);
    transition-duration: 80ms;
}

/* Respect prefers-reduced-motion (a11y critique) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}