/* === THÈME DYNAMIQUE - LE PETIT AGENAIS === */

/* Variables CSS personnalisées */
:root {
    --primary-color: #f59e0b;
    --secondary-color: #d97706;
    --accent-color: #ef4444;
    --bg-gradient-start: #f59e0b;
    --bg-gradient-end: #ef4444;
    --text-color: #1f2937;
    --card-bg: #ffffff;
    
    /* Variations automatiques */
    --primary-light: #f59e0b20;
    --primary-dark: #f59e0b80;
    --secondary-light: #d9770620;
}

/* === ARRIÈRE-PLANS === */
body {
    background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end)) !important;
}

.hero-section,
.page-header {
    background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end)) !important;
}

/* === BOUTONS PRINCIPAUX === */
.btn-primary,
.btn.btn-primary,
button.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    border-color: var(--primary-color) !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
button.btn-primary:hover {
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px var(--primary-light);
}

/* === LIENS ET NAVIGATION === */
.nav-link.active,
.nav-link:hover {
    color: var(--primary-color) !important;
}

.surprise-link {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    color: white !important;
}

/* === CARTES ET CONTENUS === */
.card,
.admin-card,
.restaurant-card,
.activity-card,
.event-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--primary-light);
}

.card-badge,
.rating-badge {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    color: white !important;
}

/* === FILTRES ET FORMULAIRES === */
.form-input:focus,
.form-select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--primary-light) !important;
}

.filter-active {
    background: var(--primary-color) !important;
    color: white !important;
}

/* === TAGS ET BADGES === */
.tag,
.badge {
    background: var(--primary-light) !important;
    color: var(--primary-color) !important;
}

.tag:hover,
.badge:hover {
    background: var(--primary-color) !important;
    color: white !important;
}

/* === TITRES ET TEXTES === */
.page-title {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-color) !important;
}

/* === ÉLÉMENTS INTERACTIFS === */
.hover-primary:hover {
    background: var(--primary-light) !important;
    border-color: var(--primary-color) !important;
}

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

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

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

/* === NOTIFICATIONS === */
.notification.success,
.alert.success {
    background: var(--primary-light) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

/* === ANIMATIONS ET TRANSITIONS === */
.btn,
.card,
.nav-link {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* === GLASSMORPHISME PERSONNALISÉ === */
.glass-effect {
    background: var(--card-bg)95 !important;
    backdrop-filter: blur(10px);
    border: 1px solid var(--primary-light);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .btn {
        padding: 0.75rem 1.5rem !important;
    }
    
    .card {
        margin-bottom: 1rem !important;
    }
}

/* === THÈME SOMBRE === */
[data-theme="dark"] {
    --card-bg: #1f2937;
    --text-color: #f9fafb;
}

[data-theme="dark"] .card,
[data-theme="dark"] .admin-card {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2, 
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text-color) !important;
}

/* === PRINT === */
@media print {
    body {
        background: white !important;
    }
    
    .card {
        border: 1px solid #ccc !important;
        background: white !important;
    }
}