:root {
    --navy-deep: #040817;
    --navy-card: #0a1734;
    --navy-card-hover: #0d1c3d;
    --sky: #38bdf8;
    --sky-dim: #0ea5e9;
    --slate-border: #1e293b;
}

* { box-sizing: border-box; }

body {
    background-color: var(--navy-deep);
    color: #e2e8f0;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    min-height: 100vh;
    margin: 0;
    /* Chiffres tabulaires : alignement vertical propre */
    font-feature-settings: "tnum", "cv02", "cv03";
}

/* === Fond matrix === */
#matrix-canvas {
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: 0.18;
    pointer-events: none;
    /* Estompe les bords haut et bas */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
}

/* === Ancres modules === */
[id^="module-"] { scroll-margin-top: 5rem; }

/* === Cartes === */
.card {
    background: var(--navy-card);
    border: 1px solid var(--slate-border);
    border-radius: 0.75rem;
    transition: border-color .2s ease, background .15s ease, transform .15s ease;
}
.card:hover { border-color: rgba(56, 189, 248, .4); }

.card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.card-link:hover {
    background: var(--navy-card-hover);
    transform: translateY(-1px);
}
.card-link:hover h3 { color: var(--sky); }
.card-link .fa-arrow-right { transition: transform .15s ease; }
.card-link:hover .fa-arrow-right { transform: translateX(3px); }

/* === Accents à gauche des cartes === */
.card-accent-cyan   { border-left: 2px solid #22d3ee; }
.card-accent-green  { border-left: 2px solid #4ade80; }
.card-accent-amber  { border-left: 2px solid #fbbf24; }
.card-accent-rose   { border-left: 2px solid #fb7185; }
.card-accent-violet { border-left: 2px solid #a78bfa; }
.card-accent-sky    { border-left: 2px solid var(--sky); }

/* === Boutons === */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: var(--sky-dim);
    color: #fff;
    font-weight: 600;
    padding: .75rem 1.5rem;
    border-radius: .5rem;
    text-decoration: none;
    transition: background .15s ease;
    border: none;
    cursor: pointer;
}
.btn-primary:hover { background: var(--sky); color: #040817; }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: transparent;
    color: #cbd5e1;
    border: 1px solid var(--slate-border);
    padding: .75rem 1.5rem;
    border-radius: .5rem;
    text-decoration: none;
    font-weight: 500;
    transition: border-color .15s ease, color .15s ease;
}
.btn-ghost:hover { border-color: var(--sky); color: var(--sky); }

/* === Nav === */
.nav-link {
    color: #94a3b8;
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    transition: color .15s ease;
}
.nav-link:hover, .nav-link.active { color: var(--sky); }

/* === Utilitaires === */
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

.section-label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--sky);
}

/* === Tag monospace numéroté === */
.tag {
    display: inline-block;
    padding: 2px 6px;
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 3px;
    font-size: 0.7rem;
    color: var(--sky);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    line-height: 1.2;
}

/* === Bloc terminal (hero) === */
.terminal {
    background: #030712;
    border: 1px solid var(--slate-border);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.75rem;
    line-height: 1.7;
    color: #94a3b8;
    overflow-x: auto;
}
.terminal .k { color: #38bdf8; }   /* clé */
.terminal .v { color: #e2e8f0; }   /* valeur */
.terminal .ok { color: #4ade80; }  /* succès */
.terminal .warn { color: #fbbf24; } /* attention */
.terminal .dim { color: #475569; }
.terminal .line { display: block; white-space: nowrap; }

/* === Statut footer === */
.status-line {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.7rem;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.8);
}