/*
🎓 STYLE.CSS - Thème "Nature & Chaleur" pour ESA Manager
Palette personnalisée : Vert, Beige, Nature, Marron

Ce fichier écrase les styles Bootstrap chargés via django-bootstrap5
*/

/* ============================================================================
   🎨 PALETTE DE COULEURS PERSONNALISÉE
   ============================================================================ */

:root {
    /* Palette principale "Nature & Chaleur" */
    --vert: #5A6A56;           /* Vert olive foncé */
    --non-classe: #E8D9A0;     /* Beige/Jaune pâle */
    --nature: #5F6F52;         /* Vert nature */
    --marron: #C08B5C;         /* Marron/Caramel */
    --beige: #F4DDB3;          /* Beige clair */
    
    /* Attribution des couleurs Bootstrap */
    --primary: #5F6F52;        /* Vert nature (principal) */
    --primary-dark: #4A5741;   /* Vert nature foncé */
    --primary-light: #7A8F6D;  /* Vert nature clair */
    
    --secondary: #C08B5C;      /* Marron (secondaire) */
    --secondary-dark: #A57247; /* Marron foncé */
    --secondary-light: #D4A574; /* Marron clair */
    
    --accent: #E8D9A0;         /* Beige/Jaune pour les accents */
    --accent-dark: #D4C585;    /* Beige foncé */
    
    --success: #7A8F6D;        /* Vert clair pour succès */
    --danger: #B85C50;         /* Rouge terre cuite */
    --warning: #C08B5C;        /* Marron pour attention */
    --info: #6B8E8F;           /* Bleu-vert eau */
    
    /* Couleurs neutres */
    --bg-light: #FAF8F3;       /* Fond très clair */
    --bg-card: #FFFFFF;        /* Fond des cartes */
    --text-dark: #3A3A3A;      /* Texte principal */
    --text-muted: #6B6B6B;     /* Texte secondaire */
    
    /* Typographie */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* Espacements & Effets */
    --border-radius: 12px;
    --border-radius-lg: 16px;
    --box-shadow: 0 4px 16px rgba(95, 111, 82, 0.15);
    --box-shadow-hover: 0 8px 24px rgba(95, 111, 82, 0.25);
    --transition: all 0.3s ease;
}

/* ============================================================================
   📄 STYLES GÉNÉRAUX
   ============================================================================ */

body {
    font-family: var(--font-family);
    background-color: var(--bg-light);
    color: var(--text-dark);
}

/* ============================================================================
   🎨 ÉCRASEMENT DES CLASSES BOOTSTRAP
   ============================================================================ */

/* ---------- COULEURS PRIMAIRES ---------- */

.bg-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--vert) 100%) !important;
}

.text-primary {
    color: var(--primary) !important;
}

.border-primary {
    border-color: var(--primary) !important;
}

/* ---------- BOUTONS ---------- */

.btn {
    border-radius: var(--border-radius);
    font-weight: 600;
    padding: 0.75rem 2rem;
    transition: var(--transition);
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--vert) 100%) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(95, 111, 82, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--vert) 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(95, 111, 82, 0.4) !important;
}

/* Lien désactivé */
.link-disabled {
    color: #6c757d !important;          /* Gris */
    text-decoration: none !important;    /* Pas de soulignement */
    cursor: not-allowed !important;      /* Curseur interdit */
    opacity: 0.5;                        /* Semi-transparent */
    pointer-events: none;                /* Empêche les clics */
}

/* Optionnel : effet au survol désactivé */
.link-disabled:hover {
    color: #6c757d !important;
    text-decoration: none !important;
}

.btn-primary:active,
.btn-primary:focus {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--vert) 100%) !important;
    box-shadow: 0 4px 12px rgba(95, 111, 82, 0.3) !important;
}

.btn-secondary {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--marron) 100%) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(192, 139, 92, 0.3);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, var(--secondary-dark) 0%, var(--marron) 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(192, 139, 92, 0.4) !important;
}

.btn-success {
    background: linear-gradient(135deg, var(--success) 0%, #6A7D5F 100%) !important;
    border: none !important;
    color: white !important;
}

.btn-success:hover {
    background: linear-gradient(135deg, #6A7D5F 0%, #5A6D4F 100%) !important;
    transform: translateY(-2px);
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger) 0%, #A04B3F 100%) !important;
    border: none !important;
    color: white !important;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #A04B3F 0%, #8D3A2E 100%) !important;
    transform: translateY(-2px);
}

.btn-warning {
    background-color: var(--warning) !important;
    border: none !important;
    color: white !important;
}

.btn-warning:hover {
    background-color: var(--secondary-dark) !important;
    transform: translateY(-2px);
}

.btn-lg {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
}

/* ---------- CARTES ---------- */

.card {
    border: none !important;
    border-radius: var(--border-radius-lg) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
    transition: var(--transition);
    overflow: hidden;
    background-color: var(--bg-card);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}

.card-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--vert) 100%) !important;
    color: white !important;
    border: none !important;
    font-weight: 600;
    padding: 1rem 1.5rem !important;
}

.card-body {
    padding: 1.5rem !important;
}

.card-footer {
    background-color: var(--bg-light) !important;
    border-top: 1px solid #E8E8E8 !important;
}

/* Variantes de cartes avec bordure colorée et fond */
.card-nature {
    border-left: 10px solid var(--primary-light) !important;
    background: linear-gradient(135deg, var(--nature), var(--primary-light)) !important;
    color: white !important;
}

.card-nature .card-body,
.card-nature .card-header {
    color: white !important;
}

.card-marron {
    border-left: 10px solid var(--secondary-light) !important;
    background: linear-gradient(135deg, var(--marron), var(--secondary-light)) !important;
    color: white !important;
}

.card-marron .card-body,
.card-marron .card-header {
    color: white !important;
}

.card-accent {
    border-left: 4px solid var(--accent-dark) !important;
    background-color: var(--accent) !important;
    color: var(--text-dark) !important;
}

.card-accent .card-body,
.card-accent .card-header {
    color: var(--text-dark) !important;
}

/* ---------- NAVBAR ---------- */

.navbar {
    background: linear-gradient(135deg, var(--primary) 0%, var(--vert) 100%) !important;
    box-shadow: 0 4px 20px rgba(95, 111, 82, 0.2);
    padding: 1rem 0;
}

.navbar-dark .navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
    color: white !important;
    transition: var(--transition);
}

.navbar-dark .navbar-brand:hover {
    transform: scale(1.05);
    color: var(--accent) !important;
}

.navbar-dark .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500;
    margin: 0 0.5rem;
    padding: 0.5rem 1rem !important;
    border-radius: 8px;
    transition: var(--transition);
}

.navbar-dark .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: white !important;
}

.navbar-dark .nav-link:active,
.navbar-dark .nav-link.active {
    background-color: rgba(255, 255, 255, 0.2);
    color: white !important;
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ---------- FOOTER ---------- */

footer.bg-light {
    background: linear-gradient(135deg, var(--primary) 0%, var(--vert) 100%) !important;
    color: white !important;
    padding: 2rem 0;
    margin-top: 4rem;
}

footer .text-muted {
    color: rgba(255, 255, 255, 0.9) !important;
}

footer .text-danger {
    color: var(--marron) !important;
}

/* ---------- ALERTS ---------- */

.alert {
    border: none !important;
    border-radius: var(--border-radius) !important;
    border-left: 4px solid !important;
}

.alert-success {
    background-color: #E8F5E5 !important;
    color: #3A5A32 !important;
    border-left-color: var(--success) !important;
}

.alert-danger {
    background-color: #F8E5E3 !important;
    color: #7A3A32 !important;
    border-left-color: var(--danger) !important;
}

.alert-warning {
    background-color: #FFF4E5 !important;
    color: #8A5A32 !important;
    border-left-color: var(--warning) !important;
}

.alert-info {
    background-color: #E5F3F5 !important;
    color: #2A5A5D !important;
    border-left-color: var(--info) !important;
}

/* ---------- BADGES ---------- */

.badge {
    border-radius: 6px;
    font-weight: 600;
    padding: 0.35rem 0.65rem;
}

.badge.bg-primary {
    background-color: var(--primary) !important;
}

.badge.bg-secondary {
    background-color: var(--secondary) !important;
}

.badge.bg-success {
    background-color: var(--success) !important;
}

/* Badge personnalisé avec fond beige et texte foncé */
.badge-accent {
    background-color: var(--accent-dark) !important;
    color: var(--text-dark) !important;
}

/* ---------- PAGINATION ---------- */

.pagination .page-link {
    color: var(--primary);
    border-radius: 8px;
    margin: 0 0.2rem;
    border: 1px solid #E5E7EB;
}

.pagination .page-link:hover {
    background-color: var(--primary-light);
    color: white;
    border-color: var(--primary-light);
}

.pagination .page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* ============================================================================
   📊 COMPOSANTS PERSONNALISÉS
   ============================================================================ */

/* ---------- STAT CARDS ---------- */

.stat-card {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

/* Barre colorée en haut avec la palette */
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, 
        var(--vert) 0%, 
        var(--nature) 25%, 
        var(--marron) 50%, 
        var(--accent-dark) 75%, 
        var(--beige) 100%
    );
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.stat-card .icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--marron) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-card .number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0.5rem 0;
}

.stat-card .label {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 1rem;
}

/* Variantes de stat-cards avec couleurs différentes */
.stat-card-nature .icon {
    background: linear-gradient(135deg, var(--nature) 0%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-card-marron .icon {
    background: linear-gradient(135deg, var(--marron) 0%, var(--secondary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------- GRADIENTS ---------- */

.gradient-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--vert) 100%);
}

.gradient-secondary {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--marron) 100%);
}

.gradient-success {
    background: linear-gradient(135deg, var(--success) 0%, var(--primary-light) 100%);
}

.gradient-warm {
    background: linear-gradient(135deg, var(--marron) 0%, var(--accent-dark) 100%);
}

.gradient-nature {
    background: linear-gradient(135deg, var(--nature) 0%, var(--vert) 100%);
}

/* Gradient complet de la palette */
.gradient-palette {
    background: linear-gradient(135deg, 
        var(--vert) 0%, 
        var(--nature) 25%, 
        var(--marron) 50%, 
        var(--accent) 75%, 
        var(--beige) 100%
    );
}

/* ---------- TEXTE AVEC GRADIENT ---------- */

.text-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, var(--marron) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-warm {
    background: linear-gradient(135deg, var(--marron) 0%, var(--accent-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================================================
   🗺️ CARTES LEAFLET (si utilisées)
   ============================================================================ */

.leaflet-popup-content {
    font-family: var(--font-family);
}

.leaflet-popup-content h6 {
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

/* ============================================================================
   🎯 ACCENTS DE COULEUR
   ============================================================================ */

/* Bordures avec les couleurs de la palette */
.border-vert {
    border-color: var(--vert) !important;
}

.border-nature {
    border-color: var(--nature) !important;
}

.border-marron {
    border-color: var(--marron) !important;
}

.border-accent {
    border-color: var(--accent-dark) !important;
}

/* Fonds avec les couleurs de la palette */
.bg-vert {
    background-color: var(--vert) !important;
    color: white !important;
}

.bg-nature {
    background-color: var(--nature) !important;
    color: white !important;
}

.bg-marron {
    background-color: var(--marron) !important;
    color: white !important;
}

.bg-accent {
    background-color: var(--accent) !important;
    color: var(--text-dark) !important;
}

.bg-beige {
    background-color: var(--beige) !important;
    color: var(--text-dark) !important;
}

/* ============================================================================
   📱 RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .navbar-brand {
        font-size: 1.2rem;
    }
    
    .stat-card .number {
        font-size: 2rem;
    }
    
    .stat-card .icon {
        font-size: 2.5rem;
    }
    
    .btn {
        padding: 0.6rem 1.5rem;
    }
}

/* ============================================================================
   ✨ ANIMATIONS
   ============================================================================ */

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

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

.slide-in {
    animation: slideInFromLeft 0.6s ease-out;
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* Animation au chargement */
.card,
.stat-card {
    animation: fadeIn 0.6s ease-out;
}

/* ============================================================================
   🎨 CLASSES UTILITAIRES SUPPLÉMENTAIRES
   ============================================================================ */

.shadow-custom {
    box-shadow: var(--box-shadow) !important;
}

.shadow-custom-hover:hover {
    box-shadow: var(--box-shadow-hover) !important;
}

.rounded-custom {
    border-radius: var(--border-radius) !important;
}

.rounded-custom-lg {
    border-radius: var(--border-radius-lg) !important;
}

/* Spinner de chargement personnalisé */
.spinner-border-primary {
    color: var(--primary) !important;
}

/* Divider avec gradient */
.divider-gradient {
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--primary) 20%, 
        var(--marron) 50%, 
        var(--accent-dark) 80%, 
        transparent 100%
    );
    border: none;
    margin: 2rem 0;
}

/* ============================================================================
   🎓 NOTES POUR TOI
   ============================================================================ */

/*
📝 PALETTE DE COULEURS UTILISÉE :

🟢 VERT (#5A6A56) - Vert olive foncé
    Utilisé pour : navbar alternative, bordures

🌾 NON CLASSÉ (#E8D9A0) - Beige/Jaune pâle
    Utilisé pour : accents, badges, fonds clairs

🌿 NATURE (#5F6F52) - Vert nature
    Utilisé pour : couleur principale, boutons primaires, navbar

🟤 MARRON (#C08B5C) - Marron/Caramel
    Utilisé pour : boutons secondaires, accents chauds

🔆 BEIGE (#F4DDB3) - Beige clair
    Utilisé pour : arrière-plans, cartes, zones douces

💡 COMMENT UTILISER :

1. Remplace ton style.css actuel par ce fichier
2. Les classes Bootstrap standards (btn-primary, card, etc.) utilisent automatiquement ces couleurs
3. Tu peux aussi utiliser les classes personnalisées :
   - .bg-nature, .bg-marron, .bg-accent
   - .border-nature, .border-marron
   - .gradient-nature, .gradient-warm
   - .stat-card-nature, .stat-card-marron

🎨 PERSONNALISER DAVANTAGE :

Modifie les variables au début du fichier (:root) pour ajuster :
- Les nuances de couleurs
- Les espacements
- Les ombres
- Les animations

🚀 ASTUCE PRO :

Utilise la classe .gradient-palette pour afficher toute la palette dans un élément !
Exemple : <div class="p-4 gradient-palette">...</div>
*/