/* ═══════════════════════════════════════════════════════════
   VIGIL Design System — RiskAntilles Pro
   Dark theme: noir profond + vert #2ecc8a
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── VIGIL CSS VARIABLES ─────────────────────────────── */
:root {
    /* Backgrounds */
    --vigil-bg:       #0a0e0d;
    --vigil-card:     #141a19;
    --vigil-card-alt: #1a2120;
    --vigil-surface:  #1e2826;

    /* Accents */
    --vigil-green:    #2ecc8a;
    --vigil-green-dim:#27ae60;
    --vigil-orange:    #c4561c;
    --vigil-orange-bg: rgba(196, 86, 28, 0.15);

    /* Status colors */
    --vigil-ok:       #2ecc8a;
    --vigil-warn:     #e8a838;
    --vigil-danger:   #c4561c;
    --vigil-muted:    #8a9a97;

    /* Text */
    --vigil-text:     #f0f0f0;
    --vigil-text-dim: #8a9a97;
    --vigil-text-faint: rgba(240,240,240,0.45);

    /* Borders */
    --vigil-border:   #2a3530;
    --vigil-border-bright: rgba(46, 204, 138, 0.25);

    /* Shadows / glows */
    --vigil-glow:     0 0 20px rgba(46, 204, 138, 0.18);
    --vigil-glow-strong: 0 0 30px rgba(46, 204, 138, 0.30);

    /* Typography */
    --vigil-font-display: 'Syne', sans-serif;
    --vigil-font-body:    'Inter', sans-serif;
    --vigil-font-mono:     'JetBrains Mono', monospace;

    /* Spacing */
    --vigil-radius-sm: 6px;
    --vigil-radius:     10px;
    --vigil-radius-lg: 14px;
    --vigil-radius-xl: 20px;

    /* Nav */
    --vigil-nav-h: 64px;
}

/* ── RESET & BASE ───────────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--vigil-font-body);
    background: var(--vigil-bg);
    color: var(--vigil-text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ── TYPOGRAPHY ─────────────────────────────────────── */
h1, h2, h3, h4 {
    font-family: var(--vigil-font-display);
    color: var(--vigil-text);
    line-height: 1.2;
}

/* ── SHARED CARD ────────────────────────────────────── */
.vigil-card {
    background: var(--vigil-card);
    border: 1px solid var(--vigil-border);
    border-radius: var(--vigil-radius-lg);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.vigil-card:hover,
.vigil-card-hoverable:hover {
    border-color: var(--vigil-border-bright);
    box-shadow: var(--vigil-glow);
}

/* ── SHARED BUTTONS ─────────────────────────────────── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--vigil-green);
    color: #000;
    border: none;
    border-radius: var(--vigil-radius);
    padding: 0.65rem 1.5rem;
    font-family: var(--vigil-font-display);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
    text-decoration: none;
    white-space: nowrap;
}
.btn-primary:hover {
    background: var(--vigil-green-dim);
    box-shadow: var(--vigil-glow);
    transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid var(--vigil-border);
    color: var(--vigil-text-dim);
    border-radius: var(--vigil-radius);
    padding: 0.65rem 1.25rem;
    font-family: var(--vigil-font-body);
    font-size: 0.88rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    text-decoration: none;
}
.btn-ghost:hover {
    border-color: var(--vigil-green);
    color: var(--vigil-green);
    background: rgba(46, 204, 138, 0.06);
}

.btn-crisis {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--vigil-orange);
    color: #fff;
    border: none;
    border-radius: var(--vigil-radius);
    padding: 0.65rem 1.5rem;
    font-family: var(--vigil-font-display);
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    text-decoration: none;
}
.btn-crisis:hover {
    background: #b34d16;
    box-shadow: 0 0 20px rgba(196, 86, 28, 0.35);
}

/* ── BADGES ─────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.75rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}
.badge-a_jour {
    background: rgba(46, 204, 138, 0.15);
    color: var(--vigil-ok);
    border: 1px solid rgba(46, 204, 138, 0.25);
}
.badge-incomplet {
    background: rgba(232, 168, 56, 0.15);
    color: var(--vigil-warn);
    border: 1px solid rgba(232, 168, 56, 0.25);
}
.badge-non_realise {
    background: var(--vigil-orange-bg);
    color: var(--vigil-danger);
    border: 1px solid rgba(196, 86, 28, 0.25);
}

/* ── SHARED INPUTS ───────────────────────────────────── */
.input-vigil {
    background: var(--vigil-bg);
    border: 1px solid var(--vigil-border);
    color: var(--vigil-text);
    border-radius: var(--vigil-radius);
    padding: 0.6rem 1rem;
    font-family: var(--vigil-font-body);
    font-size: 0.9rem;
    transition: border-color 0.2s;
    width: 100%;
}
.input-vigil:focus {
    outline: none;
    border-color: var(--vigil-green);
}
.input-vigil::placeholder {
    color: var(--vigil-text-faint);
}

select.input-vigil {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238a9a97' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

/* ── SECTION HEADER ──────────────────────────────────── */
.section-title {
    font-family: var(--vigil-font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--vigil-text);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.section-title .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vigil-green);
    flex-shrink: 0;
}
.section-subtitle {
    font-size: 0.82rem;
    color: var(--vigil-text-dim);
    margin-top: 0.2rem;
}

/* ── SECTION HEADER — UPPERCASE STYLE ───────────────── */
.section-title-upper {
    font-family: var(--vigil-font-display);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--vigil-text-dim);
}

/* ── STATS GRID ─────────────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}
@media (max-width: 640px) {
    .stats-grid { grid-template-columns: 1fr; }
}
.stat-card {
    background: var(--vigil-card);
    border: 1px solid var(--vigil-border);
    border-radius: var(--vigil-radius-lg);
    padding: 1.25rem 1.5rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.stat-card:hover {
    border-color: var(--vigil-border-bright);
    box-shadow: var(--vigil-glow);
}
.stat-card .stat-label {
    font-size: 0.72rem;
    color: var(--vigil-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.4rem;
}
.stat-card .stat-value {
    font-family: var(--vigil-font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--vigil-text);
}
.stat-card .stat-sub {
    font-size: 0.78rem;
    color: var(--vigil-text-dim);
    margin-top: 0.2rem;
}
.stat-card.green .stat-value { color: var(--vigil-ok); }
.stat-card.amber .stat-value { color: var(--vigil-warn); }
.stat-card.red   .stat-value { color: var(--vigil-danger); }

/* ── TABLE ──────────────────────────────────────────── */
.compliance-wrap {
    background: var(--vigil-card);
    border: 1px solid var(--vigil-border);
    border-radius: var(--vigil-radius-lg);
    overflow: hidden;
    margin-bottom: 2rem;
}
.compliance-table { width: 100%; border-collapse: collapse; }
.compliance-table thead tr {
    background: rgba(30, 40, 38, 0.8);
    border-bottom: 1px solid var(--vigil-border);
}
.compliance-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--vigil-text-dim);
    padding: 0.85rem 1.25rem;
    text-align: left;
    white-space: nowrap;
    font-family: var(--vigil-font-display);
}
.compliance-table tbody tr {
    border-bottom: 1px solid rgba(42, 53, 48, 0.5);
    transition: background 0.15s;
    cursor: pointer;
}
.compliance-table tbody tr:last-child { border-bottom: none; }
.compliance-table tbody tr:hover {
    background: rgba(46, 204, 138, 0.04);
    border-color: var(--vigil-border-bright);
}
.compliance-table tbody tr.selected {
    background: rgba(46, 204, 138, 0.07);
}
.compliance-table td {
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
    vertical-align: middle;
}
.td-obligation { color: var(--vigil-text); font-weight: 500; max-width: 340px; }
.td-obligation .ref { display: block; font-size: 0.75rem; color: var(--vigil-text-dim); font-weight: 400; margin-top: 0.15rem; }
.td-echeance { white-space: nowrap; font-size: 0.85rem; }
.td-maj { font-size: 0.78rem; color: var(--vigil-text-dim); white-space: nowrap; font-family: var(--vigil-font-mono); }

/* ── EDIT PANEL ─────────────────────────────────────── */
.edit-panel {
    background: rgba(10, 14, 13, 0.92);
    border-top: 1px solid var(--vigil-border-bright);
    padding: 1.5rem 1.25rem;
    display: none;
}
.edit-panel.open { display: block; }
.edit-panel-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--vigil-green);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--vigil-font-display);
}
.edit-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.edit-group { display: flex; flex-direction: column; gap: 0.35rem; }
.edit-group label {
    font-size: 0.72rem;
    color: var(--vigil-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.edit-select, .edit-input, .edit-textarea {
    background: var(--vigil-bg);
    border: 1px solid var(--vigil-border-bright);
    color: var(--vigil-text);
    border-radius: var(--vigil-radius);
    padding: 0.6rem 1rem;
    font-family: var(--vigil-font-body);
    font-size: 0.9rem;
    transition: border-color 0.2s;
}
.edit-select:focus, .edit-input:focus, .edit-textarea:focus {
    outline: none;
    border-color: var(--vigil-green);
}
.edit-select { min-width: 170px; cursor: pointer; }
.edit-input[type="date"] { min-width: 160px; color-scheme: dark; }
.edit-textarea { width: 100%; min-height: 64px; resize: vertical; }
.btn-save {
    background: var(--vigil-green);
    color: #000;
    border: none;
    border-radius: var(--vigil-radius);
    padding: 0.6rem 1.4rem;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}
.btn-save:hover {
    background: var(--vigil-green-dim);
    box-shadow: var(--vigil-glow);
}
.btn-save:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-cancel {
    background: transparent;
    border: 1px solid var(--vigil-border);
    color: var(--vigil-text-dim);
    border-radius: var(--vigil-radius);
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.btn-cancel:hover {
    border-color: var(--vigil-text-dim);
    color: var(--vigil-text);
}
.save-msg {
    font-size: 0.82rem;
    color: var(--vigil-ok);
    margin-left: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s;
}
.save-msg.visible { opacity: 1; }

/* ── QUICK LINKS ─────────────────────────────────────── */
.quick-links {
    display: flex;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}
.quick-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--vigil-card);
    border: 1px solid var(--vigil-border);
    color: var(--vigil-text-dim);
    text-decoration: none;
    border-radius: var(--vigil-radius);
    padding: 0.75rem 1.25rem;
    font-size: 0.88rem;
    transition: all 0.2s;
}
.quick-link:hover {
    border-color: var(--vigil-green);
    color: var(--vigil-green);
    box-shadow: var(--vigil-glow);
}
.quick-link .ql-icon { font-size: 1.1rem; }

/* ── LOADING SPINNER ────────────────────────────────── */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--vigil-text-dim);
    font-size: 0.88rem;
}
.spinner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(46, 204, 138, 0.15);
    border-top-color: var(--vigil-green);
    animation: spin 0.7s linear infinite;
    margin-right: 0.75rem;
    flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── TOAST ──────────────────────────────────────────── */
#toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    background: var(--vigil-card-alt);
    border: 1px solid var(--vigil-border);
    color: var(--vigil-text);
    padding: 0.85rem 1.25rem;
    border-radius: var(--vigil-radius-lg);
    font-size: 0.88rem;
    max-width: 320px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
    pointer-events: none;
}
#toast.show { transform: translateY(0); opacity: 1; }
#toast.success { border-color: rgba(46, 204, 138, 0.4); }
#toast.error   { border-color: rgba(196, 86, 28, 0.4); }

/* ── EMPTY STATE ─────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 3.5rem 2rem;
    color: var(--vigil-text-dim);
}
.empty-state .icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}
.empty-state p {
    font-size: 0.9rem;
    max-width: 340px;
    margin: 0 auto 1.5rem;
    line-height: 1.65;
}

/* ── AUTH GUARD ─────────────────────────────────────── */
#auth-guard {
    position: fixed;
    inset: 0;
    background: var(--vigil-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}
.auth-box { text-align: center; }
.auth-box p { color: var(--vigil-text-dim); margin-bottom: 1rem; }

/* ── PAGE WRAPPER ────────────────────────────────────── */
.page {
    padding-top: calc(var(--vigil-nav-h) + 1.5rem);
    max-width: 1100px;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 4rem;
}

/* ── WELCOME HERO ────────────────────────────────────── */
.welcome {
    padding-bottom: 2rem;
}
.welcome h1 {
    font-family: var(--vigil-font-display);
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--vigil-text);
    margin-bottom: 0.4rem;
}
.welcome h1 span { color: var(--vigil-green); }
.welcome p { color: var(--vigil-text-dim); font-size: 0.95rem; }

/* ── SECTION HEADER ─────────────────────────────────── */
.section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

/* ── RADON BADGE ─────────────────────────────────────── */
.badge-radon {
    background: rgba(232, 168, 56, 0.12);
    color: var(--vigil-warn);
    border: 1px solid rgba(232, 168, 56, 0.2);
    padding: 0.28rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 768px) {
    .page { padding-left: 1rem; padding-right: 1rem; }
    .compliance-table th:nth-child(3),
    .compliance-table td:nth-child(3),
    .compliance-table th:nth-child(4),
    .compliance-table td:nth-child(4) { display: none; }
    .edit-row { flex-direction: column; }
}