/* SOS Faune Toulouse - Style & Ergonomie Visuelle */
:root {
    --bg-page: #F5F2EB;
    --bg-card: #FFFFFF;
    --bg-card-hover: #FAF7F2;
    --bg-card-muted: #EFEAE0;
    --border-color: #E2DBD0;
    --border-subtle: #EBE5DB;
    --text-primary: #26231F;
    --text-secondary: #6B655E;
    --text-muted: #8F8880;

    /* Bandeau Toulouse - Brique rose foraine */
    --header-bg: #B84C38;
    --header-border: #A33F2D;
    --header-hover: #A7412E;
    --header-text: #FFFFFF;
    --header-subtext: #FBEAE7;

    /* Accents d'action */
    --accent-btn: #1F5F43;
    --accent-btn-hover: #174B34;
    --accent-btn-text: #FFFFFF;
    --accent-sec: #2B6750;
    --accent-sec-hover: #21513E;

    /* Statuts & alertes */
    --alert-amber-bg: #FCF5E8;
    --alert-amber-border: #E8D3B0;
    --alert-amber-text: #7A4F13;
    --alert-red-bg: #FDF1EE;
    --alert-red-border: #ECC6BE;
    --alert-red-text: #8E2F20;
    --alert-green-bg: #EFF7F2;
    --alert-green-border: #C8E3D2;
    --alert-green-text: #195237;

    --shadow-soft: 0 1px 3px rgba(38, 35, 31, 0.05), 0 1px 2px rgba(38, 35, 31, 0.03);
    --shadow-card: 0 2px 6px rgba(38, 35, 31, 0.06), 0 1px 3px rgba(38, 35, 31, 0.04);
}

.dark {
    /* Mode sombre adouci : gris ardoise/végétal feutré pour éliminer l'effet de halo */
    --bg-page: #1D2421;
    --bg-card: #26302B;
    --bg-card-hover: #2D3933;
    --bg-card-muted: #2F3B35;
    --border-color: #384640;
    --border-subtle: #303C36;
    --text-primary: #EBE7DF;
    --text-secondary: #A6B2AB;
    --text-muted: #7E8A83;

    /* Bandeau Toulouse en mode sombre : brique foraine assourdie */
    --header-bg: #A3402E;
    --header-border: #8A3323;
    --header-hover: #933827;
    --header-text: #FFFFFF;
    --header-subtext: #F7DCD7;

    /* Accents d'action en mode sombre */
    --accent-btn: #277252;
    --accent-btn-hover: #1F5F43;
    --accent-btn-text: #FFFFFF;
    --accent-sec: #2F6D53;
    --accent-sec-hover: #245741;

    /* Statuts & alertes en mode sombre */
    --alert-amber-bg: #2B261A;
    --alert-amber-border: #4D3F25;
    --alert-amber-text: #E5BE72;
    --alert-red-bg: #2F1E1C;
    --alert-red-border: #52312C;
    --alert-red-text: #F09B8E;
    --alert-green-bg: #202D26;
    --alert-green-border: #32473C;
    --alert-green-text: #A0D8B7;

    --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.25);
    --shadow-card: 0 3px 8px rgba(0, 0, 0, 0.35);
}

body {
    background-color: var(--bg-page);
    color: var(--text-primary);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Bandeau Toulouse */
.toulouse-header {
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    color: var(--header-text);
}

.toulouse-header .subtext {
    color: var(--header-subtext);
}

/* Surfaces de cartes personnalisées */
.app-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-soft);
    color: var(--text-primary);
    transition: all 0.15s ease;
}

.app-card:hover {
    background-color: var(--bg-card-hover);
    box-shadow: var(--shadow-card);
}

.app-card-muted {
    background-color: var(--bg-card-muted);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

/* Boutons d'action principaux */
.btn-primary-action {
    background-color: var(--accent-btn);
    color: var(--accent-btn-text);
    transition: background-color 0.15s ease, transform 0.05s ease;
}

.btn-primary-action:hover {
    background-color: var(--accent-btn-hover);
}

.btn-primary-action:active {
    transform: scale(0.99);
}

.btn-secondary-action {
    background-color: var(--accent-sec);
    color: #FFFFFF;
    transition: background-color 0.15s ease, transform 0.05s ease;
}

.btn-secondary-action:hover {
    background-color: var(--accent-sec-hover);
}

/* Alertes & Encadrés d'information */
.badge-alert-amber {
    background-color: var(--alert-amber-bg);
    border: 1px solid var(--alert-amber-border);
    color: var(--alert-amber-text);
}

.badge-alert-red {
    background-color: var(--alert-red-bg);
    border: 1px solid var(--alert-red-border);
    color: var(--alert-red-text);
}

.badge-alert-green {
    background-color: var(--alert-green-bg);
    border: 1px solid var(--alert-green-border);
    color: var(--alert-green-text);
}

/* Pied de page persistant */
.app-footer {
    background-color: var(--bg-card-muted);
    border-top: 1px solid var(--border-color);
}

.footer-title {
    color: var(--header-bg);
}

.dark .footer-title {
    color: #FFA594; /* Brique rose corail claire hautement visible et contrastée en mode sombre */
}

/* Animations de transition */
.fade-in {
    animation: appFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes appFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}