/* =========================================================
   LUNATIC-IT Academy — Thème cybersécurité (sombre)
   Palette : Noir / Bleu foncé / Cyan / Blanc
   ========================================================= */

:root {
    --lit-black:      #0a0e17;
    --lit-navy:       #0e1626;
    --lit-navy-2:     #131d31;
    --lit-surface:    #16213a;
    --lit-border:     #223052;
    --lit-cyan:       #22d3ee;
    --lit-cyan-dim:   #0891b2;
    --lit-blue:       #3b82f6;
    --lit-white:      #e8eefc;
    --lit-muted:      #8ba0c4;
    --lit-green:      #34d399;
    --lit-red:        #f87171;
    --lit-amber:      #fbbf24;
    --lit-radius:     14px;
    --lit-shadow:     0 10px 40px rgba(0, 0, 0, .45);
    --lit-glow:       0 0 0 1px rgba(34, 211, 238, .35), 0 8px 30px rgba(34, 211, 238, .12);
}

* { scroll-behavior: smooth; }

body {
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(59,130,246,.10), transparent 60%),
        radial-gradient(1000px 500px at -10% 20%, rgba(34,211,238,.08), transparent 55%),
        var(--lit-black);
    color: var(--lit-white);
    font-family: 'Inter', system-ui, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.lit-main { flex: 1 0 auto; }

.text-cyan   { color: var(--lit-cyan) !important; }
.bg-navy     { background: var(--lit-navy) !important; }
.font-mono   { font-family: 'JetBrains Mono', monospace; }

/* ---------- Navbar ---------- */
.lit-navbar {
    background: rgba(10, 14, 23, .85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--lit-border);
}
.lit-logo-icon { color: var(--lit-cyan); font-size: 1.4rem; margin-right: .5rem; }
.lit-brand-text { font-weight: 800; letter-spacing: .5px; color: var(--lit-white); }
.lit-brand-sub { color: var(--lit-muted); font-weight: 500; margin-left: .35rem; }
.navbar-brand { display: flex; align-items: center; }
.lit-navbar .nav-link { color: var(--lit-muted); font-weight: 500; transition: color .2s; }
.lit-navbar .nav-link:hover, .lit-navbar .nav-link.active { color: var(--lit-cyan); }

/* ---------- Boutons ---------- */
.btn-cyan {
    background: linear-gradient(135deg, var(--lit-cyan), var(--lit-cyan-dim));
    color: #04121a; font-weight: 700; border: none;
    box-shadow: 0 6px 20px rgba(34,211,238,.25);
    transition: transform .15s, box-shadow .15s;
}
.btn-cyan:hover { color: #04121a; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(34,211,238,.4); }
.btn-outline-cyan {
    border: 1px solid var(--lit-cyan); color: var(--lit-cyan); font-weight: 600; background: transparent;
    transition: all .2s;
}
.btn-outline-cyan:hover { background: var(--lit-cyan); color: #04121a; }

/* ---------- Cartes ---------- */
.lit-card {
    background: linear-gradient(180deg, var(--lit-navy-2), var(--lit-navy));
    border: 1px solid var(--lit-border);
    border-radius: var(--lit-radius);
    box-shadow: var(--lit-shadow);
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.lit-card:hover { transform: translateY(-4px); border-color: var(--lit-cyan); box-shadow: var(--lit-glow); }

/* ---------- Hero ---------- */
.lit-hero {
    position: relative;
    padding: 6rem 0 5rem;
    overflow: hidden;
    border-bottom: 1px solid var(--lit-border);
}
.lit-hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(34,211,238,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34,211,238,.05) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at 50% 0%, black, transparent 75%);
    pointer-events: none;
}
.lit-hero h1 { font-weight: 800; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.1; }
.lit-badge-pill {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.35);
    color: var(--lit-cyan); padding: .35rem .9rem; border-radius: 999px;
    font-size: .8rem; font-weight: 600;
}
.gradient-text {
    background: linear-gradient(120deg, var(--lit-cyan), var(--lit-blue));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Terminal décoratif ---------- */
.lit-terminal {
    background: #060a12; border: 1px solid var(--lit-border);
    border-radius: 12px; box-shadow: var(--lit-shadow); overflow: hidden;
    font-family: 'JetBrains Mono', monospace; font-size: .85rem;
}
.lit-terminal-bar { background: #0d1524; padding: .55rem .8rem; display: flex; gap: .4rem; align-items: center; border-bottom: 1px solid var(--lit-border); }
.lit-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.lit-dot.r { background: #ff5f56; } .lit-dot.y { background: #ffbd2e; } .lit-dot.g { background: #27c93f; }
.lit-terminal-body { padding: 1rem 1.1rem; color: #a8ffce; line-height: 1.8; }
.lit-terminal-body .cmd { color: var(--lit-cyan); }
.lit-terminal-body .muted { color: #5f7196; }

/* ---------- Statistiques ---------- */
.stat-num { font-weight: 800; font-size: 2.4rem; color: var(--lit-cyan); font-family: 'JetBrains Mono', monospace; }

/* ---------- Catégories / badges ---------- */
.cat-icon {
    width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center;
    font-size: 1.5rem; background: rgba(34,211,238,.12); color: var(--lit-cyan);
    border: 1px solid rgba(34,211,238,.3);
}
.badge-soft { background: rgba(59,130,246,.15); color: #93c5fd; border: 1px solid rgba(59,130,246,.3); font-weight: 500; }

/* ---------- Progression ---------- */
.progress { background: var(--lit-navy); height: 10px; border-radius: 999px; }
.progress-bar { background: linear-gradient(90deg, var(--lit-cyan), var(--lit-blue)); }

/* ---------- Module / lecture ---------- */
.module-content { line-height: 1.85; font-size: 1.02rem; }
.module-content h2, .module-content h3 { color: var(--lit-cyan); margin-top: 1.6rem; }
.module-content pre {
    background: #060a12; border: 1px solid var(--lit-border); border-radius: 10px;
    padding: 1rem; overflow-x: auto; font-family: 'JetBrains Mono', monospace; color: #a8ffce;
}
.module-content code { color: var(--lit-cyan); background: rgba(34,211,238,.08); padding: .1rem .35rem; border-radius: 5px; }
.module-content img { max-width: 100%; border-radius: 10px; border: 1px solid var(--lit-border); margin: 1rem 0; }
.ratio iframe { border-radius: 10px; border: 1px solid var(--lit-border); }

.module-list .list-group-item {
    background: var(--lit-navy); border-color: var(--lit-border); color: var(--lit-white);
    display: flex; align-items: center; gap: .75rem; transition: background .2s;
}
.module-list .list-group-item:hover { background: var(--lit-navy-2); }
.module-list .list-group-item.done { color: var(--lit-green); }
.module-list a { color: inherit; text-decoration: none; }

/* ---------- Forms ---------- */
.lit-form-card {
    max-width: 460px; margin: 3rem auto;
    background: linear-gradient(180deg, var(--lit-navy-2), var(--lit-navy));
    border: 1px solid var(--lit-border); border-radius: var(--lit-radius);
    box-shadow: var(--lit-shadow); padding: 2.2rem;
}
.form-control, .form-select {
    background: var(--lit-black); border: 1px solid var(--lit-border); color: var(--lit-white);
}
.form-control:focus, .form-select:focus {
    background: var(--lit-black); color: var(--lit-white);
    border-color: var(--lit-cyan); box-shadow: 0 0 0 .2rem rgba(34,211,238,.2);
}
.form-control::placeholder { color: #5f7196; }

/* ---------- Examen ---------- */
.exam-timer {
    font-family: 'JetBrains Mono', monospace; font-size: 1.4rem; font-weight: 700;
    color: var(--lit-cyan);
}
.exam-timer.danger { color: var(--lit-red); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .5; } }
.question-card { background: var(--lit-navy); border: 1px solid var(--lit-border); border-radius: 12px; }
.answer-option {
    display: block; padding: .8rem 1rem; border: 1px solid var(--lit-border); border-radius: 10px;
    margin-bottom: .6rem; cursor: pointer; transition: all .15s;
}
.answer-option:hover { border-color: var(--lit-cyan); background: rgba(34,211,238,.05); }
.answer-option input:checked ~ span { color: var(--lit-cyan); font-weight: 600; }
.answer-option:has(input:checked) { border-color: var(--lit-cyan); background: rgba(34,211,238,.1); }

/* ---------- Footer ---------- */
.lit-footer { background: var(--lit-navy); border-top: 1px solid var(--lit-border); padding: 3rem 0 1.5rem; flex-shrink: 0; }
.footer-title { color: var(--lit-white); font-weight: 700; margin-bottom: 1rem; }
.footer-links a { color: var(--lit-muted); text-decoration: none; display: block; padding: .25rem 0; transition: color .2s; }
.footer-links a:hover { color: var(--lit-cyan); }

/* ---------- Back to top ---------- */
.lit-back-top {
    position: fixed; bottom: 24px; right: 24px; width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid var(--lit-cyan); background: var(--lit-navy); color: var(--lit-cyan);
    display: none; place-items: center; cursor: pointer; z-index: 50; box-shadow: var(--lit-shadow);
}
.lit-back-top.show { display: grid; }

/* ---------- Animations d'apparition ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ---------- Tables admin ---------- */
.table { color: var(--lit-white); }
.table > :not(caption) > * > * { background: transparent; border-color: var(--lit-border); }
.admin-sidebar { background: var(--lit-navy); border-right: 1px solid var(--lit-border); min-height: calc(100vh - 60px); }
.admin-sidebar .nav-link { color: var(--lit-muted); border-radius: 8px; margin-bottom: .25rem; }
.admin-sidebar .nav-link:hover, .admin-sidebar .nav-link.active { background: rgba(34,211,238,.1); color: var(--lit-cyan); }

/* ---------- Divers ---------- */
.dropdown-menu { background: var(--lit-navy-2); border: 1px solid var(--lit-border); }
.dropdown-item { color: var(--lit-white); }
.dropdown-item:hover { background: var(--lit-surface); color: var(--lit-cyan); }
a { color: var(--lit-cyan); }
.divider-glow { height: 1px; background: linear-gradient(90deg, transparent, var(--lit-cyan), transparent); border: 0; opacity: .5; }