/* ==========================================================================
   DoctoAlerte — thème global
   Palette « santé française » : blanc clinique, vert pharmacie, ambre alerte.
   Chargé après bootstrap.min.css et app.css (voir App.razor).
   ========================================================================== */

:root {
    /* Couleurs */
    --da-bg: #FBFDFB; /* blanc clinique, très légère pointe de vert */
    --da-surface: #FFFFFF;
    --da-tint: #EFF6F1; /* fond de section alterné */
    --da-ink: #152A20; /* titres */
    --da-body: #3C4F45; /* texte courant */
    --da-muted: #66766D;
    --da-line: #DCE7DF;
    --da-green: #0E8A5F; /* vert pharmacie — couleur d'action */
    --da-green-ink: #0B6B4A;
    --da-green-deep: #0A3D2C; /* pin foncé — bandeau final */
    --da-green-soft: #E3F3EA;
    --da-amber: #F5B301; /* ambre — le moment « créneau trouvé » */
    --da-amber-soft: #FCE9B2;
    --da-amber-ink: #7A5600;
    /* Typo */
    --da-display: 'Bricolage Grotesque', 'Public Sans', system-ui, sans-serif;
    --da-font: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    /* Divers */
    --da-radius: 14px;
    --da-shadow: 0 10px 30px rgba(21, 42, 32, .08);
    --da-focus: 0 0 0 .25rem rgba(14, 138, 95, .18);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
    background: var(--da-bg);
    color: var(--da-body);
    font-family: var(--da-font);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--da-display);
    color: var(--da-ink);
    letter-spacing: -0.01em;
}

a {
    color: var(--da-green-ink);
}

    a:hover {
        color: var(--da-green);
    }

::selection {
    background: var(--da-amber-soft);
    color: var(--da-ink);
}

:focus-visible {
    outline: 2px solid var(--da-green);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   En-tête / pied de page
   -------------------------------------------------------------------------- */

.site-header {
    background: rgba(251, 253, 251, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--da-line);
}

    .site-header .navbar-brand {
        font-family: var(--da-display);
        color: var(--da-green-ink) !important;
    }

    .site-header .nav-link {
        color: var(--da-body);
        font-weight: 500;
    }

        .site-header .nav-link:hover {
            color: var(--da-green-ink);
        }

        .site-header .nav-link.active {
            color: var(--da-green-ink) !important;
            font-weight: 650;
            text-decoration: underline;
            text-decoration-color: var(--da-amber);
            text-decoration-thickness: 3px;
            text-underline-offset: 8px;
        }

.site-footer {
    border-top: 1px solid var(--da-line);
    color: var(--da-muted);
    font-size: .9rem;
}

    .site-footer a {
        color: var(--da-muted);
        text-decoration: none;
    }

        .site-footer a:hover {
            color: var(--da-green-ink);
            text-decoration: underline;
        }

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.btn-brand {
    background: var(--da-green);
    border: 1px solid var(--da-green-ink);
    color: #fff;
    font-weight: 600;
    border-radius: 12px;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

    .btn-brand:hover, .btn-brand:focus {
        background: var(--da-green-ink);
        color: #fff;
        transform: translateY(-1px);
        box-shadow: var(--da-shadow);
    }

    .btn-brand:disabled {
        background: var(--da-green);
        opacity: .65;
        transform: none;
    }

.btn-outline-brand {
    background: transparent;
    border: 1px solid var(--da-green);
    color: var(--da-green-ink);
    font-weight: 600;
    border-radius: 12px;
}

    .btn-outline-brand:hover {
        background: var(--da-green-soft);
        color: var(--da-green-ink);
    }

/* Bouton « Soutenir » (Ko-fi) */
.btn-support {
    background: #FFF6DC;
    border: 1px solid #F0DFAC;
    color: var(--da-amber-ink);
    font-weight: 600;
    border-radius: 999px;
    padding: .35rem .9rem;
    font-size: .9rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease;
}

    .btn-support:hover {
        background: var(--da-amber-soft);
        color: var(--da-amber-ink);
    }

/* --------------------------------------------------------------------------
   Cartes, formulaires, tableaux (surcharges Bootstrap)
   -------------------------------------------------------------------------- */

.card {
    border-color: var(--da-line);
    border-radius: var(--da-radius);
    box-shadow: 0 1px 2px rgba(21, 42, 32, .04);
}

.card-header {
    background: var(--da-surface);
    border-bottom-color: var(--da-line);
    border-top-left-radius: var(--da-radius) !important;
    border-top-right-radius: var(--da-radius) !important;
}

    .card-header h3, .card-header h4 {
        font-size: 1.15rem;
        margin: 0;
    }

.form-control, .form-select {
    border-color: var(--da-line);
    border-radius: 10px;
    padding: .55rem .8rem;
    color: var(--da-ink);
}

    .form-control:focus, .form-select:focus {
        border-color: var(--da-green);
        box-shadow: var(--da-focus);
    }

.form-check-input:checked {
    background-color: var(--da-green);
    border-color: var(--da-green);
}

.form-check-input:focus {
    border-color: var(--da-green);
    box-shadow: var(--da-focus);
}

.form-label {
    color: var(--da-ink);
    font-weight: 550;
}

/* Tableau des alertes */
.table-da {
    --bs-table-hover-bg: var(--da-tint);
}

    .table-da thead th {
        background: var(--da-tint);
        color: var(--da-ink);
        font-weight: 650;
        border-bottom: 1px solid var(--da-line);
        white-space: nowrap;
    }

    .table-da td {
        border-color: var(--da-line);
        vertical-align: middle;
    }

/* --------------------------------------------------------------------------
   Badges de statut
   -------------------------------------------------------------------------- */

.badge-found {
    background: var(--da-green-soft);
    color: var(--da-green-ink);
}

.badge-watch {
    background: #E7F0FB;
    color: #1D4E89;
}

.badge-paused {
    background: #EEF1EE;
    color: var(--da-muted);
}

.badge-tag {
    background: var(--da-green-soft);
    color: var(--da-green-ink);
}

.badge-slot {
    background: var(--da-amber-soft);
    color: var(--da-amber-ink);
}

.badge-outline {
    background: var(--da-surface);
    color: var(--da-muted);
    border: 1px solid var(--da-line);
}

/* --------------------------------------------------------------------------
   Divers partagés
   -------------------------------------------------------------------------- */

/* Console de logs (page Médecins) */
.da-console {
    background: #0D1A13;
    color: #CFE8DA;
    border-radius: var(--da-radius);
    padding: 1rem;
    height: 200px;
    overflow-y: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem;
}

/* Bandeau conseil (lien croisé vers les alertes) */
.tip-banner {
    background: var(--da-green-soft);
    border: 1px solid #CBE5D6;
    color: var(--da-green-ink);
    border-radius: var(--da-radius);
    padding: .8rem 1rem;
}

    .tip-banner a {
        color: var(--da-green-ink);
        font-weight: 650;
    }

/* Pages légales */
.legal {
    max-width: 760px;
    margin: 0 auto;
    padding: 56px 20px 72px;
}

    .legal h1 {
        font-size: 2.1rem;
        margin-bottom: .4rem;
    }

    .legal .legal-updated {
        color: var(--da-muted);
        font-size: .9rem;
        margin-bottom: 2.2rem;
    }

    .legal h2 {
        font-size: 1.25rem;
        margin-top: 2.2rem;
        margin-bottom: .6rem;
    }

    .legal p, .legal li {
        line-height: 1.7;
    }

    .legal .legal-note {
        background: var(--da-tint);
        border: 1px solid var(--da-line);
        border-radius: var(--da-radius);
        padding: .9rem 1.1rem;
        font-size: .92rem;
    }



/*    KKDS*/
.da-navbar-brand {
    font-family: var(--da-display);
    font-weight: 700;
    color: var(--da-green-ink);
    text-decoration: none;
}

    .da-navbar-brand:hover,
    .da-navbar-brand:focus {
        color: var(--da-green);
    }