/* assets/styles/custom.css */

/*
 * Ce fichier vous permet de surcharger les variables CSS de Bootstrap
 * pour personnaliser le thème de votre site (couleurs, polices, etc.)
 * sans avoir à utiliser SASS.
 */

:root {
    /* --- COULEURS PRINCIPALES --- */

    /* Redéfinition de la couleur primaire */
    --bs-primary: #1153e3; /* Un violet moderne */
    --bs-primary-rgb:
        108, 71, 255; /* La version RGB est cruciale pour les transparences (ex: .bg-primary-subtle) */

    /* Redéfinition de la couleur secondaire */
    --bs-secondary: #dfe2e6; /* Un gris-bleu plus doux */
    --bs-secondary-rgb: 100, 116, 139;

    /* Vous pouvez aussi ajuster les autres couleurs */
    --bs-success: #10b981;
    --bs-success-rgb: 16, 185, 129;
    --bs-info: #3b82f6;
    --bs-info-rgb: 59, 130, 246;
    --bs-warning: #f59e0b;
    --bs-warning-rgb: 245, 158, 11;
    --bs-danger: #ef4444;
    --bs-danger-rgb: 239, 68, 68;

    /* --- COULEURS DE FOND & TEXTE --- */
    --bs-light: #f8fafc; /* Un blanc légèrement cassé */
    --bs-dark: #0f172a; /* Un bleu très sombre au lieu du noir pur */
    --bs-body-color: #4269a0; /* Couleur du texte principal */
    --bs-body-bg: #ffffff; /* Fond du site */
    --bs-border-radius: 0.5rem; /* Arrondir un peu plus les coins */

    /* --- TYPOGRAPHIE --- */
    /* S'assurer d'avoir importer la police dans base.html.twig */
    --bs-body-font-family:
        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: #5639d9; /* Une version plus foncée du primaire */
}

/* --- PERSONNALISATION DE COMPOSANTS (Optionnel) --- */
.btn {
    border-radius: var(--bs-border-radius);
    font-weight: 600;
    transition: all 0.3s ease;
}

/* --- STYLE RAMANITRA --- */
.brand-accent {
    font-weight: 800;
    color: #a3e37b; /* Blanc pur pour trancher sur le bleu jour */
    text-shadow: #958c41 0px 0px 5px, #b2a43e 0px 0px 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.dark-mode .brand-accent {
    color: #ab6dae !important; /* Cyan électrique */
    text-shadow:
        0 0 5px #cb9f4b,
        0 0 15px rgba(78, 220, 65, 0.983);
}

/* --- NIGHT MODE (NEON) --- */
body.dark-mode {
    background: #071733 !important;
    color: #e0e6ed !important;
}

body.dark-mode main.container {
    background: transparent !important;
}

.dark-mode .card,
.dark-mode .ad-card,
.dark-mode .modal-content,
.dark-mode .cookie-modal {
    background-color: #0d1117 !important;
    border: 1px solid #30363d !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) !important;
    color: #f0f6fc !important;
}

.dark-mode h1,
.dark-mode .h1 {
    color: #00f3ff !important; /* Cyan Néon */
    text-shadow:
        0 0 5px #00f3ff,
        0 0 10px rgba(0, 243, 255, 0.3);
}

.dark-mode h2,
.dark-mode .h2,
.dark-mode .ad-title {
    color: #ff00ff !important; /* Magenta Néon */
    text-shadow:
        0 0 5px #ff00ff,
        0 0 10px rgba(255, 0, 255, 0.3);
}

.dark-mode h3,
.dark-mode .h3 {
    color: #39e81a !important; /* Vert Néon */
    text-shadow: 0 0 5px #39ff14;
}

.dark-mode .text-primary,
.dark-mode .bi {
    color: #00f3ff !important; /* Cyan pour les icônes */
}

.dark-mode .bg-primary,
.dark-mode header,
.dark-mode .footer {
    background: #161b22 !important;
    border-bottom: 1px solid #00f3ff !important;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.3) !important;
}

.dark-mode .btn-primary {
    background: transparent !important;
    border: 1px solid #39ff14 !important;
    color: #39ff14 !important;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.4);
}

.dark-mode .btn-primary:hover {
    background-color: #39ff14 !important;
    color: #000 !important;
    box-shadow: 0 0 20px #39ff14;
}

/* Floating Toggle Button */
#theme-toggle {
    position: fixed;
    bottom: 25px;
    left: 25px;
    z-index: 2000;
    border-radius: 50px;
    padding: 10px 15px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
cookie-banner {
    display: none; /* Caché par défaut, affiché par JS */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(158, 150, 197, 0.453);
    color: #cba636;
    z-index: 1060; /* Au-dessus de la plupart des éléments */
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.cookie-modal-open {
    overflow: hidden; /* Empêche le scroll de la page derrière la modale */
}

.cookie-modal {
    background-color: #d0afaf;
    color: #ebd84b;
    font: 1em sans-serif;
    padding: 2rem;
    border-radius: 0.5rem;
    max-width: 600px;
    width: 100%;
    box-shadow: 0 5px 15px rgba(171, 171, 72, 0.5);
    animation: fadeIn 0.3s ease-out;
}

.cookie-modal-custom-view {
    display: none; /* Caché par défaut, affiché par JS */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ============================================
   ADMIN DASHBOARD - MODE NUIT NÉON
   ============================================ */

/* --- STAT CARDS ADMIN (bg-primary, bg-success, etc.) --- */
.dark-mode .stat-card {
    background: #0d1117 !important;
    border: 1px solid #30363d !important;
    color: #f0f6fc !important;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.dark-mode .stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.dark-mode .stat-card.bg-primary::before {
    background: linear-gradient(90deg, #00f3ff, #0080ff);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.6);
}

.dark-mode .stat-card.bg-success::before {
    background: linear-gradient(90deg, #39ff14, #00cc00);
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.6);
}

.dark-mode .stat-card.bg-info::before {
    background: linear-gradient(90deg, #ff00ff, #ff006e);
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.6);
}

.dark-mode .stat-card.bg-warning::before {
    background: linear-gradient(90deg, #ffff00, #ffaa00);
    box-shadow: 0 0 15px rgba(255, 255, 0, 0.6);
}

.dark-mode .stat-card.bg-danger::before {
    background: linear-gradient(90deg, #ff4444, #cc0000);
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.6);
}

.dark-mode .stat-card:hover {
    transform: translateY(-4px);
    border-color: #00f3ff !important;
    box-shadow: 0 8px 30px rgba(0, 243, 255, 0.15) !important;
}

.dark-mode .stat-card .bi {
    opacity: 0.6 !important;
}

.dark-mode .stat-card.bg-primary .bi { color: #00f3ff !important; }
.dark-mode .stat-card.bg-success .bi { color: #39ff14 !important; }
.dark-mode .stat-card.bg-info .bi { color: #ff00ff !important; }
.dark-mode .stat-card.bg-warning .bi { color: #ffff00 !important; }
.dark-mode .stat-card.bg-danger .bi { color: #ff4444 !important; }

/* --- TABLEAUX ADMIN --- */
.dark-mode .table {
    color: #c9d1d9 !important;
    border-color: #21262d !important;
}

.dark-mode .table thead {
    background: rgba(0, 243, 255, 0.06) !important;
    border-bottom: 2px solid rgba(0, 243, 255, 0.3) !important;
}

.dark-mode .table thead th {
    color: #00f3ff !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    border: none !important;
    padding: 12px 14px;
}

.dark-mode .table tbody tr {
    border-bottom: 1px solid #21262d !important;
    transition: all 0.3s ease;
}

.dark-mode .table tbody tr:hover {
    background: rgba(0, 243, 255, 0.04) !important;
    box-shadow: inset 3px 0 0 #00f3ff;
}

.dark-mode .table tbody td {
    border: none !important;
    padding: 10px 14px;
    vertical-align: middle;
}

.dark-mode .table .fw-bold {
    color: #f0f6fc !important;
}

.dark-mode .table .text-muted,
.dark-mode .table .text-secondary {
    color: #484f58 !important;
}

.dark-mode .table-hover tbody tr:hover {
    background: rgba(0, 243, 255, 0.04) !important;
}

/* --- BADGES ADMIN --- */
.dark-mode .badge.bg-success {
    background: rgba(57, 255, 20, 0.15) !important;
    color: #39ff14 !important;
    border: 1px solid rgba(57, 255, 20, 0.3);
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.15);
}

.dark-mode .badge.bg-secondary {
    background: rgba(139, 148, 158, 0.15) !important;
    color: #8b949e !important;
    border: 1px solid rgba(139, 148, 158, 0.3);
}

.dark-mode .badge.bg-warning {
    background: rgba(255, 255, 0, 0.15) !important;
    color: #ffff00 !important;
    border: 1px solid rgba(255, 255, 0, 0.3);
    box-shadow: 0 0 8px rgba(255, 255, 0, 0.15);
}

.dark-mode .badge.bg-danger {
    background: rgba(255, 68, 68, 0.15) !important;
    color: #ff4444 !important;
    border: 1px solid rgba(255, 68, 68, 0.3);
    box-shadow: 0 0 8px rgba(255, 68, 68, 0.15);
}

.dark-mode .badge.bg-info {
    background: rgba(255, 0, 255, 0.15) !important;
    color: #ff00ff !important;
    border: 1px solid rgba(255, 0, 255, 0.3);
    box-shadow: 0 0 8px rgba(255, 0, 255, 0.15);
}

.dark-mode .badge.bg-primary {
    background: rgba(0, 243, 255, 0.15) !important;
    color: #00f3ff !important;
    border: 1px solid rgba(0, 243, 255, 0.3);
    box-shadow: 0 0 8px rgba(0, 243, 255, 0.15);
}

/* --- CARD HEADERS ADMIN --- */
.dark-mode .card-header.bg-white {
    background: rgba(0, 243, 255, 0.04) !important;
    border-bottom: 1px solid #21262d !important;
}

.dark-mode .card-header .text-primary,
.dark-mode .card-header .font-weight-bold {
    color: #00f3ff !important;
}

/* --- BOUTONS ADMIN --- */
.dark-mode .btn-outline-danger {
    border-color: #ff4444 !important;
    color: #ff4444 !important;
    box-shadow: 0 0 8px rgba(255, 68, 68, 0.15);
}

.dark-mode .btn-outline-danger:hover {
    background: #ff4444 !important;
    color: #000 !important;
    box-shadow: 0 0 20px rgba(255, 68, 68, 0.4);
}

.dark-mode .btn-warning {
    background: rgba(255, 255, 0, 0.15) !important;
    border: 1px solid rgba(255, 255, 0, 0.4) !important;
    color: #ffff00 !important;
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.15);
}

.dark-mode .btn-warning:hover {
    background: #ffff00 !important;
    color: #000 !important;
    box-shadow: 0 0 20px rgba(255, 255, 0, 0.4);
}

.dark-mode .btn-link {
    color: #00f3ff !important;
}

.dark-mode .btn-link:hover {
    color: #ff00ff !important;
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.3);
}

/* --- BORDER BOTTOM ADMIN HEADER --- */
.dark-mode .border-bottom {
    border-color: #21262d !important;
}

/* --- PRIX EN VERT NÉON DANS TABLEAUX --- */
.dark-mode .text-success,
.dark-mode .table .text-success {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57, 255, 20, 0.3);
}

/* --- CHECKBOXES NÉON --- */
.dark-mode .form-check-input {
    background-color: #0d1117;
    border: 1px solid #30363d;
}

.dark-mode .form-check-input:checked {
    background-color: #00f3ff;
    border-color: #00f3ff;
    box-shadow: 0 0 8px rgba(0, 243, 255, 0.4);
}

.dark-mode .form-check-input:focus {
    border-color: #00f3ff;
    box-shadow: 0 0 0 3px rgba(0, 243, 255, 0.2);
}

/* --- TEXT CENTER MUTED DANS TABLES --- */
.dark-mode .text-center.text-muted {
    color: #484f58 !important;
}
/* ============================================
   ADMIN LAYOUT - SIDEBAR & HEADER NÉON
   ============================================ */

/* --- BODY ADMIN NUIT --- */
body.dark-mode {
    background: #071733 !important;
}

/* --- MAIN CONTENT ADMIN NUIT --- */
.dark-mode .main-content {
    background: transparent !important;
}

/* --- SIDEBAR ADMIN NUIT --- */
.dark-mode .sidebar {
    background: #0a0e1a !important;
    border-right: 1px solid #00f3ff !important;
    box-shadow: 4px 0 30px rgba(0, 243, 255, 0.1) !important;
}

.dark-mode .sidebar .sidebar-brand h4 {
    color: #00f3ff !important;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.4);
}

.dark-mode .sidebar .sidebar-brand i {
    color: #ff00ff !important;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.4);
}

.dark-mode .sidebar a {
    color: #6e7681 !important;
}

.dark-mode .sidebar a:hover {
    color: #f0f6fc !important;
    background: rgba(0, 243, 255, 0.06) !important;
    border-left-color: #00f3ff !important;
}

.dark-mode .sidebar a.active {
    color: #00f3ff !important;
    background: rgba(0, 243, 255, 0.1) !important;
    border-left-color: #00f3ff !important;
    box-shadow: inset 0 0 20px rgba(0, 243, 255, 0.05);
}

.dark-mode .sidebar a.active i {
    color: #00f3ff !important;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.5);
}

.dark-mode .sidebar a:hover i {
    color: #00f3ff !important;
}

.dark-mode .sidebar .divider {
    background: #21262d !important;
}

.dark-mode .sidebar .sidebar-section-title {
    color: #484f58 !important;
}

/* --- HEADER MOBILE ADMIN NUIT --- */
.dark-mode .header-mobile-admin {
    background: #0a0e1a !important;
    border-bottom: 1px solid #00f3ff !important;
    box-shadow: 0 2px 15px rgba(0, 243, 255, 0.2) !important;
}

.dark-mode .header-mobile-admin .navbar-brand {
    color: #00f3ff !important;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.4);
}

.dark-mode .header-mobile-admin .navbar-brand i {
    color: #ff00ff !important;
}

/* --- COLLAPSE SIDEBAR MOBILE NUIT (overlay) --- */
.dark-mode .sidebar.show,
.dark-mode .sidebar.collapsing {
    background: #0a0e1a !important;
    border-right: 1px solid #00f3ff !important;
}

/* --- ALERTS ADMIN NUIT --- */
.dark-mode .alert-success {
    background: rgba(57, 255, 20, 0.1) !important;
    border: 1px solid rgba(57, 255, 20, 0.3) !important;
    color: #39ff14 !important;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.1);
}

.dark-mode .alert-danger {
    background: rgba(255, 68, 68, 0.1) !important;
    border: 1px solid rgba(255, 68, 68, 0.3) !important;
    color: #ff4444 !important;
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.1);
}

.dark-mode .alert-warning {
    background: rgba(255, 255, 0, 0.1) !important;
    border: 1px solid rgba(255, 255, 0, 0.3) !important;
    color: #ffff00 !important;
    box-shadow: 0 0 15px rgba(255, 255, 0, 0.1);
}

.dark-mode .alert-info {
    background: rgba(0, 243, 255, 0.1) !important;
    border: 1px solid rgba(0, 243, 255, 0.3) !important;
    color: #00f3ff !important;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.1);
}

.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
/* ============================================
   HEADER PUBLIC - MODE NUIT NÉON
   ============================================ */

/* --- NAVBAR PRINCIPALE --- */
.dark-mode .navbar.bg-header-custom {
    background: #263254 !important;
    border-bottom: 1px solid #00f3ff !important;
    box-shadow: 0 2px 25px rgba(0, 243, 255, 0.15) !important;
}

/* --- BRAND "heyou" --- */
.dark-mode .navbar-brand {
    color: #b6d5f3 !important;
    font-weight: 700;
    letter-spacing: 1px;
}

.dark-mode .navbar-brand:hover {
    color: #00f3ff !important;
    text-shadow: 0 0 12px rgba(0, 243, 255, 0.5);
}

/* --- LIENS NAV --- */
.dark-mode .navbar .nav-link {
    color: #8b949e !important;
    transition: all 0.3s ease;
    position: relative;
}

.dark-mode .navbar .nav-link:hover {
    color: #00f3ff !important;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.3);
}

.dark-mode .navbar .nav-link.active {
    color: #00f3ff !important;
}

/* Petit trait cyan sous le lien actif */
.dark-mode .navbar .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 20px;
    right: 20px;
    height: 2px;
    background: #00f3ff;
    box-shadow: 0 0 8px rgba(0, 243, 255, 0.5);
    border-radius: 2px;
}

/* --- ICÔNE PANIER --- */
.dark-mode .navbar .bi-cart-fill {
    color: #ff00ff !important;
    font-size: 1.15rem;
    transition: all 0.3s ease;
}

.dark-mode .navbar .bi-cart-fill:hover {
    color: #ff00ff !important;
    text-shadow: 0 0 12px rgba(255, 0, 255, 0.6);
    transform: scale(1.15);
}

/* --- DROPDOWN TOGGLE (nom utilisateur) --- */
.dark-mode .navbar .dropdown-toggle {
    color: #e08114 !important;
}

.dark-mode .navbar .dropdown-toggle::after {
    border-top-color: #00f3ff !important;
}

.dark-mode .navbar .dropdown-toggle:hover {
    color: #00f3ff !important;
}

.dark-mode .navbar .dropdown-toggle.show {
    color: #00f3ff !important;
}

/* --- DROPDOWN MENU --- */
.dark-mode .navbar .dropdown-menu {
    background: #364760 !important;
    border: 1px solid #30363d !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6),
                0 0 20px rgba(0, 243, 255, 0.08) !important;
    padding: 8px !important;
    margin-top: 8px !important;
}

/* Petite flèche neon en haut du dropdown */
.dark-mode .navbar .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 20px;
    width: 12px;
    height: 12px;
    background: #0d1117;
    border-left: 1px solid #30363d;
    border-top: 1px solid #30363d;
    transform: rotate(45deg);
}

/* --- DROPDOWN ITEMS --- */
.dark-mode .navbar .dropdown-item {
    color: #c9d1d9 !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    transition: all 0.3s ease;
}

.dark-mode .navbar .dropdown-item:hover {
    background: rgba(0, 243, 255, 0.08) !important;
    color: #00f3ff !important;
}

.dark-mode .navbar .dropdown-item i {
    color: #8b949e !important;
    width: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.dark-mode .navbar .dropdown-item:hover i {
    color: #00f3ff !important;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.4);
}

/* Item "Dashboard Admin" - couleur spéciale */
.dark-mode .navbar .dropdown-item[href*="admin"] i {
    color: #ff00ff !important;
}

.dark-mode .navbar .dropdown-item[href*="admin"]:hover i {
    color: #ff00ff !important;
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.5);
}

.dark-mode .navbar .dropdown-item[href*="admin"]:hover {
    background: rgba(255, 0, 255, 0.08) !important;
    color: #ff00ff !important;
}

/* Item "Déconnexion" - couleur rouge */
.dark-mode .navbar .dropdown-item[href*="logout"] i {
    color: #ff4444 !important;
}

.dark-mode .navbar .dropdown-item[href*="logout"]:hover {
    background: rgba(255, 68, 68, 0.08) !important;
    color: #ff4444 !important;
}

.dark-mode .navbar .dropdown-item[href*="logout"]:hover i {
    color: #ff4444 !important;
    text-shadow: 0 0 8px rgba(255, 68, 68, 0.5);
}

/* --- DROPDOWN DIVIDER --- */
.dark-mode .navbar .dropdown-divider {
    border-color: #21262d !important;
    margin: 4px 8px !important;
}

/* --- BARRE DE RECHERCHE --- */
.dark-mode .navbar .form-control {
    background: #161b22 !important;
    border: 1px solid #30363d !important;
    color: #f0f6fc !important;
    border-radius: 8px !important;
    transition: all 0.3s ease;
}

.dark-mode .navbar .form-control::placeholder {
    color: #484f58 !important;
}

.dark-mode .navbar .form-control:focus {
    background: #0d1117 !important;
    border-color: #00f3ff !important;
    color: #f0f6fc !important;
    box-shadow: 0 0 0 3px rgba(0, 243, 255, 0.15),
                0 0 15px rgba(0, 243, 255, 0.1) !important;
}

/* --- BOUTON RECHERCHE --- */
.dark-mode .navbar .btn-outline-light {
    border-color: #30363d !important;
    color: #8b949e !important;
    border-radius: 8px !important;
    transition: all 0.3s ease;
}

.dark-mode .navbar .btn-outline-light:hover {
    background: transparent !important;
    border-color: #00f3ff !important;
    color: #00f3ff !important;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
}

/* --- HAMBURGER MOBILE --- */
.dark-mode .navbar-toggler {
    border-color: #30363d !important;
    transition: all 0.3s ease;
}

.dark-mode .navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(0, 243, 255, 0.2) !important;
    border-color: #00f3ff !important;
}

.dark-mode .navbar-toggler-icon {
    filter: invert(1) brightness(0.7);
}

/* --- COLLAPSE MOBILE (fond derrière le menu) --- */
.dark-mode .navbar-collapse {
    background: transparent;
}

@media (max-width: 991.98px) {
    .dark-mode .navbar-collapse.show,
    .dark-mode .navbar-collapse.collapsing {
        background: #0a0e1a !important;
        border: 1px solid #30363d;
        border-radius: 12px;
        margin-top: 8px;
        padding: 16px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    }
}
/* ============================================
   SÉLECTEUR DE THÈME (JOUR / NUIT / AUTO)
   ============================================ */

.theme-selector {
    position: fixed;
    bottom: 25px;
    left: 25px;
    z-index: 2000;
}

.theme-selector-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 50px;
    border: 1px solid #dee2e6;
    background: #ffffff;
    color: #495057;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    font-family: inherit;
}

.theme-selector-btn:hover {
    border-color: #1153e3;
    color: #1153e3;
    box-shadow: 0 4px 20px rgba(17, 83, 227, 0.15);
}

.theme-selector-btn .theme-icon {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.theme-selector-btn[aria-expanded="true"] .theme-icon {
    transform: rotate(180deg);
}

.theme-selector-btn .theme-label {
    display: none;
}

@media (min-width: 768px) {
    .theme-selector-btn .theme-label {
        display: inline;
    }
}

/* --- Dropdown menu jour --- */
.theme-selector-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    min-width: 180px;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.25s ease;
}

.theme-selector-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Petite flèche en bas du dropdown */
.theme-selector-menu::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 20px;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    transform: rotate(45deg);
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    font-size: 0.85rem;
    font-weight: 500;
    color: #495057;
    transition: all 0.2s ease;
    font-family: inherit;
    text-align: left;
}

.theme-option:hover {
    background: #f1f3f5;
    color: #1153e3;
}

.theme-option.active {
    background: #e8f0fe;
    color: #1153e3;
}

.theme-option .option-icon {
    font-size: 1.1rem;
    width: 22px;
    text-align: center;
}

.theme-option .option-label {
    flex: 1;
}

.theme-option .option-check {
    opacity: 0;
    color: #1153e3;
    font-size: 0.9rem;
    transition: opacity 0.2s ease;
}

.theme-option.active .option-check {
    opacity: 1;
}

.theme-option + .theme-option {
    margin-top: 2px;
}

/* --- MODE NUIT pour le sélecteur --- */
.dark-mode .theme-selector-btn {
    background: #161b22 !important;
    border: 1px solid #30363d !important;
    color: #c9d1d9 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

.dark-mode .theme-selector-btn:hover {
    border-color: #00f3ff !important;
    color: #00f3ff !important;
    box-shadow: 0 4px 20px rgba(0, 243, 255, 0.15) !important;
}

.dark-mode .theme-selector-menu {
    background: #0d1117 !important;
    border: 1px solid #30363d !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6),
                0 0 20px rgba(0, 243, 255, 0.06) !important;
}

.dark-mode .theme-selector-menu::after {
    background: #0d1117 !important;
    border-color: #30363d !important;
}

.dark-mode .theme-option {
    color: #8b949e !important;
}

.dark-mode .theme-option:hover {
    background: rgba(0, 243, 255, 0.06) !important;
    color: #00f3ff !important;
}

.dark-mode .theme-option.active {
    background: rgba(0, 243, 255, 0.1) !important;
    color: #00f3ff !important;
}

.dark-mode .theme-option .option-check {
    color: #00f3ff !important;
}

/* Séparateur dans le menu */
.theme-separator {
    height: 1px;
    background: #e9ecef;
    margin: 4px 8px;
}

.dark-mode .theme-separator {
    background: #21262d !important;
}
/* ============================================
   COOKIE CONSENT - JOUR / NUIT NÉON
   ============================================ */

/* --- OVERLAY (fond derrière la modale) --- */
.cookie-banner {
    display: flex; /* Remplace le display:none du JS, géré par JS */
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1060;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    animation: cookieFadeIn 0.4s ease-out;
}

/* --- MODALE --- */
.cookie-modal {
    background: #ffffff;
    color: #334155;
    font-family: 'Inter', sans-serif;
    padding: 2rem 2.2rem;
    border-radius: 16px;
    max-width: 580px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    border: 1px solid #e2e8f0;
    animation: cookieSlideIn 0.4s ease-out;
}

.cookie-modal h4 {
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
}

.cookie-modal p {
    color: #475569;
    line-height: 1.65;
    font-size: 0.9rem;
}

.cookie-modal .text-primary {
    color: #475569 !important;
}

.cookie-modal a {
    color: #1153e3;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
}

.cookie-modal a:hover {
    color: #5639d9;
}

/* --- BOUTONS JOUR --- */
.cookie-modal .btn-outline-secondary {
    border-color: #cbd5e1;
    color: #475569;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.85rem;
    padding: 10px 18px;
    transition: all 0.2s ease;
}

.cookie-modal .btn-outline-secondary:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a;
}

.cookie-modal .btn-secondary {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.85rem;
    padding: 10px 18px;
    transition: all 0.2s ease;
}

.cookie-modal .btn-secondary:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.cookie-modal .btn-primary {
    background: #1153e3;
    border: none;
    color: #ffffff;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 10px 18px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(17, 83, 227, 0.3);}

.cookie-modal .btn-primary:hover {
    background: #0d42b8;
    box-shadow: 0 4px 18px rgba(17, 83, 227, 0.4);
    transform: translateY(-1px);
}

/* --- FORM SWITCHES JOUR --- */
.cookie-modal .form-check-label strong {
    color: #0f172a;
    font-size: 0.9rem;
}

.cookie-modal .form-check-label small {
    color: #64748b;
    font-size: 0.8rem;
}

.cookie-modal .form-check-input {
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.cookie-modal .form-check-input:checked {
    background-color: #1153e3;
    border-color: #1153e3;
}

.cookie-modal .form-check-input:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* --- SÉPARATEUR VUES --- */
.cookie-modal #cookie-view-default {
    border-bottom: 1px solid transparent;
    padding-bottom: 0;
    transition: all 0.3s ease;
}

/* ============================================
   COOKIE CONSENT - MODE NUIT NÉON
   ============================================ */

.dark-mode .cookie-banner {
    background: rgba(7, 23, 51, 0.85) !important;
}

.dark-mode .cookie-modal {
    background: #0d1117 !important;
    border: 1px solid rgba(0, 243, 255, 0.2) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6),
                0 0 40px rgba(0, 243, 255, 0.08) !important;
    color: #c9d1d9 !important;
}

.dark-mode .cookie-modal h4 {
    color: #00f3ff !important;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.3);
}

.dark-mode .cookie-modal p,
.dark-mode .cookie-modal .text-primary {
    color: #8b949e !important;
}

.dark-mode .cookie-modal a {
    color: #00f3ff !important;
}

.dark-mode .cookie-modal a:hover {
    color: #ff00ff !important;
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.3);
}

/* --- BOUTONS NUIT --- */
.dark-mode .cookie-modal .btn-outline-secondary {
    border-color: #30363d !important;
    color: #8b949e !important;
}

.dark-mode .cookie-modal .btn-outline-secondary:hover {
    background: rgba(0, 243, 255, 0.06) !important;
    border-color: #00f3ff !important;
    color: #00f3ff !important;
}

.dark-mode .cookie-modal .btn-secondary {
    background: rgba(139, 148, 158, 0.1) !important;
    border: 1px solid #30363d !important;
    color: #8b949e !important;
}

.dark-mode .cookie-modal .btn-secondary:hover {
    background: rgba(139, 148, 158, 0.2) !important;
    color: #f0f6fc !important;
}

.dark-mode .cookie-modal .btn-primary {
    background: transparent !important;
    border: 1px solid #39ff14 !important;
    color: #39ff14 !important;
    box-shadow: 0 0 12px rgba(57, 255, 20, 0.25) !important;
}

.dark-mode .cookie-modal .btn-primary:hover {
    background: #39ff14 !important;
    color: #000 !important;
    box-shadow: 0 0 25px rgba(57, 255, 20, 0.4) !important;
    transform: translateY(-1px);
}

/* --- FORM SWITCHES NUIT --- */
.dark-mode .cookie-modal .form-check-input {
    background-color: #21262d !important;
    border: 1px solid #30363d !important;
    cursor: pointer;
}

.dark-mode .cookie-modal .form-check-input:checked {
    background-color: #00f3ff !important;
    border-color: #00f3ff !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.4);
}

.dark-mode .cookie-modal .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(0, 243, 255, 0.15) !important;
    border-color: #00f3ff !important;
}

.dark-mode .cookie-modal .form-check-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dark-mode .cookie-modal .form-check-input:disabled:checked {
    background-color: #39ff14 !important;
    border-color: #39ff14 !important;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.3);
}

.dark-mode .cookie-modal .form-check-label strong {
    color: #f0f6fc !important;
}

.dark-mode .cookie-modal .form-check-label small {
    color: #6e7681 !important;
}

/* --- ANIMATIONS --- */
@keyframes cookieFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Transition douce entre vue par défaut et personnalisée */
#cookie-view-custom {
    animation: cookieSlideIn 0.3s ease-out;
}
/* ============================================
   COOKIE CONSENT - VRAIES CLASSES
   ============================================ */

/* --- OVERLAY (Fond flou) --- */
.cookie-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1060;
    display: flex !important; /* Forcé par JS au besoin */
    justify-content: center;
    align-items: center;
    padding: 1rem;
    animation: cookieFadeIn 0.3s ease-out;
}

/* --- MODALE (bg-body-tertiary) --- */
.cookie-modal {
    background: #f8f9fa !important; /* Plus joli que le bg-body-tertiary de base */
    border: 1px solid #e2e8f0;
    max-width: 520px;
    width: 100%;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
    animation: cookieSlideIn 0.3s ease-out;
}

.cookie-modal #cookie-title {
    color: #0f172a;
    font-weight: 700;
}

.cookie-modal .text-muted {
    color: #64748b !important;
    line-height: 1.6;
}

/* Lien "en savoir plus" */
.cookie-modal #btn-info a {
    color: #1153e3;
    font-size: 0.85rem;
    text-decoration: none;
    margin-left: 4px;
}

.cookie-modal #btn-info a:hover {
    text-decoration: underline;
}

/* --- BOUTONS JOUR --- */
.cookie-actions .btn,
.cookie-modal .btn {
    border-radius: 8px;
    font-weight: 500;
    padding: 8px 16px;
    transition: all 0.2s ease;
}

.cookie-actions .btn-primary,
.cookie-modal .btn-primary {
    background: #1153e3;
    border-color: #1153e3;
    box-shadow: 0 4px 12px rgba(17, 83, 227, 0.3);
}

.cookie-actions .btn-primary:hover,
.cookie-modal .btn-primary:hover {
    background: #0d42b8;
    border-color: #0d42b8;
    transform: translateY(-1px);
}

/* --- CATÉGORIES (cookie-category-item) --- */
.cookie-category-item {
    background: #ffffff !important;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.cookie-category-item:hover {
    border-color: #cbd5e1;
}

.cookie-category-item .text-dark {
    color: #0f172a !important;
    font-size: 0.9rem;
}

.cookie-category-item .badge.bg-secondary {
    background: #f1f5f9 !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0;
    font-weight: 500;
    font-size: 0.75rem;
}

/* --- SWITCHES JOUR --- */
.cookie-modal .form-check-input {
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.cookie-modal .form-check-input:checked {
    background-color: #1153e3;
    border-color: #1153e3;
}

/* ============================================
   COOKIE CONSENT - MODE NUIT NÉON
   ============================================ */

.dark-mode .cookie-overlay {
    background: rgba(7, 23, 51, 0.85) !important;
}

.dark-mode .cookie-modal {
    background: #0d1117 !important;
    border: 1px solid rgba(0, 243, 255, 0.2) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6),
                0 0 40px rgba(0, 243, 255, 0.06) !important;
}

.dark-mode .cookie-modal #cookie-title {
    color: #00f3ff !important;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.3);
}

.dark-mode .cookie-modal .text-muted {
    color: #8b949e !important;
}

/* Lien "en savoir plus" nuit */
.dark-mode .cookie-modal #btn-info a {
    color: #00f3ff !important;
}

.dark-mode .cookie-modal #btn-info a:hover {
    color: #ff00ff !important;
    text-shadow: 0 0 6px rgba(255, 0, 255, 0.3);
}

/* --- BOUTONS NUIT --- */
.dark-mode .cookie-actions .btn-outline-secondary,
.dark-mode .cookie-modal .btn-outline-secondary {
    border-color: #30363d !important;
    color: #8b949e !important;
    background: transparent !important;
}

.dark-mode .cookie-actions .btn-outline-secondary:hover,
.dark-mode .cookie-modal .btn-outline-secondary:hover {
    border-color: #00f3ff !important;
    color: #00f3ff !important;
    background: rgba(0, 243, 255, 0.06) !important;
}

.dark-mode .cookie-actions .btn-primary,
.dark-mode .cookie-modal .btn-primary {
    background: transparent !important;
    border: 1px solid #39ff14 !important;
    color: #39ff14 !important;
    box-shadow: 0 0 12px rgba(57, 255, 20, 0.2) !important;
}

.dark-mode .cookie-actions .btn-primary:hover,
.dark-mode .cookie-modal .btn-primary:hover {
    background: #39ff14 !important;
    color: #000 !important;
    box-shadow: 0 0 25px rgba(57, 255, 20, 0.4) !important;
    transform: translateY(-1px);
}

/* --- CATÉGORIES NUIT --- */
.dark-mode .cookie-category-item {
    background: #161b22 !important;
    border: 1px solid #21262d !important;
}

.dark-mode .cookie-category-item:hover {
    border-color: #30363d !important;
}

.dark-mode .cookie-category-item .text-dark {
    color: #f0f6fc !important;
}

.dark-mode .cookie-category-item .badge.bg-secondary {
    background: rgba(57, 255, 20, 0.1) !important;
    color: #39ff14 !important;
    border: 1px solid rgba(57, 255, 20, 0.25);
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.1);
}

/* --- SWITCHES NUIT --- */
.dark-mode .cookie-modal .form-check-input {
    background-color: #21262d !important;
    border: 1px solid #30363d !important;
}

.dark-mode .cookie-modal .form-check-input:checked {
    background-color: #00f3ff !important;
    border-color: #00f3ff !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.4);
}

.dark-mode .cookie-modal .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(0, 243, 255, 0.15) !important;
    border-color: #00f3ff !important;
}

/* --- ANIMATIONS --- */
@keyframes cookieFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

#cookie-view-custom {
    animation: cookieSlideIn 0.3s ease-out;
}
/* ============================================
   FOOTER - MODE NUIT NÉON
   ============================================ */

/* --- FOOTER PRINCIPAL (bg-primary) --- */
.dark-mode .footer {
    background: #0a0e1a !important;
    border-top: 1px solid #00f3ff !important;
    box-shadow: 0 -4px 30px rgba(0, 243, 255, 0.1) !important;
    color: #8b949e !important;
}

/* --- SÉPARATEUR NAV (border-bottom border-light) --- */
.dark-mode .footer .border-light {
    border-color: #21262d !important;
}

/* --- LIENS FOOTER --- */
.dark-mode .footer .nav-link {
    color: #6e7681 !important;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 8px 12px !important;
    transition: all 0.3s ease;
    border-radius: 6px;
}

.dark-mode .footer .nav-link:hover {
    color: #00f3ff !important;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.3);
    background: rgba(0, 243, 255, 0.06);
}

/* --- ICÔNES FONTAWESOME (fas) --- */
.dark-mode .footer .nav-link .fas {
    color: #484f58 !important;
    transition: all 0.3s ease;
}

.dark-mode .footer .nav-link:hover .fas {
    color: #00f3ff !important;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.4);
}

/* Couleurs spécifiques par icône au survol */
.dark-mode .footer .nav-link:hover .fa-user-shield {
    color: #00f3ff !important; /* Cyan */
}

.dark-mode .footer .nav-link:hover .fa-shield-alt {
    color: #39ff14 !important; /* Vert */
    text-shadow: 0 0 8px rgba(57, 255, 20, 0.4);
}

.dark-mode .footer .nav-link:hover .fa-universal-access {
    color: #ff00ff !important; /* Magenta */
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.4);
}

.dark-mode .footer .nav-link:hover .fa-search {
    color: #ffff00 !important; /* Jaune */
    text-shadow: 0 0 8px rgba(255, 255, 0, 0.4);
}

.dark-mode .footer .nav-link:hover .fa-leaf {
    color: #39ff14 !important; /* Vert */
    text-shadow: 0 0 8px rgba(57, 255, 20, 0.4);
}

/* --- COPYRIGHT --- */
.dark-mode .footer p {
    color: #8b949e !important;
    font-size: 0.9rem;
}

.dark-mode .footer p .copyright {
    color: #f0f6fc !important;
}

/* --- PETIT TEXTE (text-white-50) --- */
.dark-mode .footer .text-white-50 {
    color: #30363d !important;
    font-size: 0.78rem;
    line-height: 1.6;
}

/* --- BRAND ACCENT (déjà stylé mais on affine pour le footer) --- */
.dark-mode .footer .brand-accent {
    display: inline-block;
    font-size: 1rem;
}
/* ============================================
   PAGINATION - MODE NUIT NÉON
   ============================================ */

/* --- CONTENEUR (card-footer) --- */
.dark-mode .card-footer.bg-transparent {
    border-top: 1px solid #21262d !important;
}

/* --- TEXTE INFO (résultats, page X/Y) --- */
.dark-mode .pagination ~ .text-muted,
.dark-mode .d-flex .text-muted {
    color: #6e7681 !important;
}

.dark-mode .d-flex .text-muted strong {
    color: #00f3ff !important;
    text-shadow: 0 0 6px rgba(0, 243, 255, 0.2);
}

/* --- PAGINATION CONTENEUR --- */
.dark-mode .pagination {
    gap: 4px;
}

/* --- TOUS LES BOUTONS (page-link) --- */
.dark-mode .page-link {
    background: transparent !important;
    border: 1px solid #30363d !important;
    color: #8b949e !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.25s ease;
}

.dark-mode .page-link:hover {
    background: rgba(0, 243, 255, 0.06) !important;
    border-color: #00f3ff !important;
    color: #00f3ff !important;
    box-shadow: 0 0 12px rgba(0, 243, 255, 0.15);
    transform: translateY(-1px);
}

/* --- PAGE ACTIVE --- */
.dark-mode .page-item.active .page-link {
    background: #00f3ff !important;
    border-color: #00f3ff !important;
    color: #000 !important;
    font-weight: 700;
    box-shadow: 0 0 18px rgba(0, 243, 255, 0.4);
}

/* --- PAGES DÉSACTIVÉES (précédent/suivant grisés) --- */
.dark-mode .page-item.disabled .page-link {
    background: transparent !important;
    border-color: #21262d !important;
    color: #30363d !important;
    box-shadow: none !important;
    cursor: not-allowed;
    transform: none;
}

/* --- FOCUS ACCESSIBILITÉ --- */
.dark-mode .page-link:focus {
    background: rgba(0, 243, 255, 0.08) !important;
    border-color: #00f3ff !important;
    color: #00f3ff !important;
    box-shadow: 0 0 0 3px rgba(0, 243, 255, 0.15) !important;
}
/* ============================================
   COMPLÉMENT ADMIN - BOUTONS ACTION & TABLE-LIGHT
   ============================================ */

/* --- TABLE LIGHT (thead) --- */
.dark-mode .table-light {
    --bs-table-bg: rgba(0, 243, 255, 0.04) !important;
    --bs-table-border-color: rgba(0, 243, 255, 0.2) !important;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: transparent;
    background: transparent !important;
}

.dark-mode .table-light th {
    background: transparent !important;
    color: #00f3ff !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    border-bottom: 2px solid rgba(0, 243, 255, 0.3) !important;
    padding: 12px 14px;
}

/* --- BTN OUTLINE INFO (Voir) --- */
.dark-mode .btn-outline-info {
    border-color: #ff00ff !important;
    color: #ff00ff !important;
    transition: all 0.3s ease;
}

.dark-mode .btn-outline-info:hover {
    background: #ff00ff !important;
    color: #000 !important;
    box-shadow: 0 0 18px rgba(255, 0, 255, 0.4);
    transform: translateY(-1px);
}

/* --- BTN OUTLINE PRIMARY (Modifier) --- */
.dark-mode .btn-outline-primary {
    border-color: #00f3ff !important;
    color: #00f3ff !important;
    transition: all 0.3s ease;
}

.dark-mode .btn-outline-primary:hover {
    background: #00f3ff !important;
    color: #000 !important;
    box-shadow: 0 0 18px rgba(0, 243, 255, 0.4);
    transform: translateY(-1px);
}

/* --- BTN OUTLINE SUCCESS (Réactiver) --- */
.dark-mode .btn-outline-success {
    border-color: #39ff14 !important;
    color: #39ff14 !important;
    transition: all 0.3s ease;
}

.dark-mode .btn-outline-success:hover {
    background: #39ff14 !important;
    color: #000 !important;
    box-shadow: 0 0 18px rgba(57, 255, 20, 0.4);
    transform: translateY(-1px);
}

/* --- BTN OUTLINE WARNING (Suspendre) - déjà stylé mais on affine --- */
.dark-mode .btn-outline-warning:hover {
    transform: translateY(-1px);
}

/* --- BTN OUTLINE DANGER (Supprimer) - déjà stylé mais on affine --- */
.dark-mode .btn-outline-danger:hover {
    transform: translateY(-1px);
}

/* --- EMPTY STATE ADMIN --- */
.dark-mode .text-center.py-5 .text-muted {
    color: #30363d !important;
}

.dark-mode .text-center.py-5 h5 {
    color: #484f58 !important;
}

.dark-mode .text-center.py-5 .fa-3x {
    color: #21262d !important;
}
/* ============================================
   PAGE CATÉGORIE - MODE NUIT NÉON
   ============================================ */

/* --- EN-TÊTE DE CATÉGORIE --- */
.dark-mode .border-bottom {
    border-color: #21262d !important;
}

/* Icône géante */
.dark-mode .display-1.text-primary {
    color: #ff00ff !important;
    text-shadow: 0 0 20px rgba(255, 0, 255, 0.4),
                 0 0 40px rgba(255, 0, 255, 0.2);
    opacity: 0.8;
}

/* Titre de la catégorie (h1.display-5) */
.dark-mode h1.display-5 {
    color: #00f3ff !important;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.3),
                 0 0 20px rgba(0, 243, 255, 0.15);
}

/* Sous-titre (lead) */
.dark-mode .lead.text-muted {
    color: #6e7681 !important;
}

/* Bouton "Retour aux catégories" */
.dark-mode .btn-outline-secondary {
    border-color: #30363d !important;
    color: #8b949e !important;
    transition: all 0.3s ease;
}

.dark-mode .btn-outline-secondary:hover {
    border-color: #00f3ff !important;
    color: #00f3ff !important;
    background: rgba(0, 243, 255, 0.06) !important;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.15);
}

/* --- LIEN TITRE ANNONCE (Correction du .text-dark) --- */
.dark-mode .ad-title .text-dark {
    color: #f0f6fc !important;
    transition: all 0.3s ease;
}

.dark-mode .ad-title .text-dark:hover {
    color: #00f3ff !important;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.3);
}

/* --- IMAGE PLACEHOLDER (bg-light) --- */
.dark-mode .image-wrapper .bg-light {
    background: #161b22 !important;
}

.dark-mode .image-wrapper .bg-light i {
    color: #30363d !important;
}
/* ============================================
   FORMULAIRES ADMIN - MODE NUIT NÉON
   ============================================ */

/* --- LABELS --- */
.dark-mode .form-label {
    color: #8b949e !important;
    font-weight: 500;
    font-size: 0.85rem;
    margin-bottom: 6px;
}

/* --- INPUTS, TEXTAREAS, SELECTS --- */
.dark-mode .form-control,
.dark-mode .form-select {
    background: #0d1117 !important;
    border: 1px solid #30363d !important;
    color: #f0f6fc !important;
    border-radius: 8px !important;
    padding: 10px 14px;
    transition: all 0.3s ease;
}

.dark-mode .form-control::placeholder {
    color: #484f58 !important;
}

.dark-mode .form-control:focus,
.dark-mode .form-select:focus {
    background: #161b22 !important;
    border-color: #00f3ff !important;
    color: #f0f6fc !important;
    /* Un seul halo fin et propre, sans l'ombre externe qui flash */
    box-shadow: 0 0 0 3px rgba(0, 243, 255, 0.2) !important;
}
/* Flèche du select en nuit */
/* .dark-mode .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2300f3ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
} */

/* --- INPUTS INVALIDES (Erreurs Symfony) --- */
.dark-mode .form-control.is-invalid,
.dark-mode .form-select.is-invalid {
    border-color: #ff4444 !important;
    box-shadow: 0 0 0 3px rgba(255, 68, 68, 0.15) !important;
}

.dark-mode .invalid-feedback {
    color: #ff4444 !important;
    font-size: 0.8rem;
}

/* --- CHECKBOXES & SWITCHES (si utilisés) --- */
.dark-mode .form-check-input {
    background-color: #0d1117 !important;
    border: 1px solid #30363d !important;
    cursor: pointer;
}

.dark-mode .form-check-input:checked {
    background-color: #00f3ff !important;
    border-color: #00f3ff !important;
    box-shadow: 0 0 8px rgba(0, 243, 255, 0.4);
}

.dark-mode .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(0, 243, 255, 0.15) !important;
    border-color: #00f3ff !important;
}

.dark-mode .form-check-label {
    color: #c9d1d9 !important;
}

/* --- TEXTAREA REDIMENSIONNABLE --- */
.dark-mode .form-control:not([rows]) {
    min-height: 100px;
}

/* --- BTN SECONDARY PLEIN (Retour à la liste) --- */
.dark-mode .btn-secondary {
    background: rgba(139, 148, 158, 0.15) !important;
    border: 1px solid #30363d !important;
    color: #8b949e !important;
    transition: all 0.3s ease;
}

.dark-mode .btn-secondary:hover {
    background: rgba(139, 148, 158, 0.25) !important;
    color: #f0f6fc !important;
    border-color: #8b949e !important;
}
/* ============================================
   TABLE STRIPED (Lignes zébrées) - NUIT
   ============================================ */

.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(0, 243, 255, 0.03) !important;
    --bs-table-bg-type: rgba(0, 243, 255, 0.03);
}

/* Le survol doit rester plus visible que le stripe */
.dark-mode .table-striped > tbody > tr:hover > * {
    background-color: rgba(0, 243, 255, 0.06) !important;
    box-shadow: inset 3px 0 0 #00f3ff;
}
/* ============================================
   PROFIL UTILISATEUR - MODE NUIT NÉON
   ============================================ */

/* Mettre en valeur les mots en gras dans les cartes */
.dark-mode .card-body strong {
    color: #00f3ff !important;
    font-weight: 600;
}
/* ============================================
   TABLE WARNING (Ligne non vérifiée) - NUIT
   ============================================ */

.dark-mode .table-warning > td,
.dark-mode .table-warning > th {
    --bs-table-bg: rgba(255, 255, 0, 0.05) !important;
    --bs-table-border-color: rgba(255, 255, 0, 0.1);
    background-color: rgba(255, 255, 0, 0.05) !important;
}

/* Au survol d'une ligne warning */
.dark-mode .table-warning:hover > td,
.dark-mode .table-warning:hover > th {
    --bs-table-bg-state: rgba(255, 255, 0, 0.08) !important;
    background-color: rgba(255, 255, 0, 0.08) !important;
    box-shadow: inset 3px 0 0 #ffff00;
}
/* ============================================
   DÉTAILS UTILISATEUR - MODE NUIT NÉON
   ============================================ */

/* --- CARD HEADER BG-LIGHT --- */
.dark-mode .card-header.bg-light {
    background: #161b22 !important;
    border-bottom: 1px solid #21262d !important;
}

.dark-mode .card-header.bg-light .card-title {
    color: #00f3ff !important;
}

/* --- TABLE BORDERLESS (Tableau de profil) --- */
.dark-mode .table-borderless th {
    color: #00f3ff !important;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.dark-mode .table-borderless td {
    color: #c9d1d9 !important;
}

/* --- BADGE INFO (Override du text-dark de Bootstrap) --- */
.dark-mode .badge.bg-info.text-dark {
    color: #f0f6fc !important; /* Force le texte en clair au lieu du noir */
}

/* --- BOUTONS PLEINS (Warning & Success) --- */
.dark-mode .btn-warning {
    background: rgba(255, 255, 0, 0.15) !important;
    border: 1px solid rgba(255, 255, 0, 0.4) !important;
    color: #ffff00 !important;
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.15);
    transition: all 0.3s ease;
}

.dark-mode .btn-warning:hover {
    background: #ffff00 !important;
    color: #000 !important;
    box-shadow: 0 0 20px rgba(255, 255, 0, 0.4);
    transform: translateY(-1px);
}

.dark-mode .btn-success {
    background: rgba(57, 255, 20, 0.15) !important;
    border: 1px solid rgba(57, 255, 20, 0.4) !important;
    color: #39ff14 !important;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.15);
    transition: all 0.3s ease;
}

.dark-mode .btn-success:hover {
    background: #39ff14 !important;
    color: #000 !important;
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.4);
    transform: translateY(-1px);
}
/* ============================================
   DÉTAILS UTILISATEUR - MODE NUIT NÉON
   ============================================ */

/* --- CARD HEADER BG-LIGHT --- */
.dark-mode .card-header.bg-light {
    background: #161b22 !important;
    border-bottom: 1px solid #21262d !important;
}

.dark-mode .card-header.bg-light .card-title {
    color: #00f3ff !important;
}

/* --- TABLE BORDERLESS (Tableau de profil) --- */
.dark-mode .table-borderless th {
    color: #00f3ff !important;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.dark-mode .table-borderless td {
    color: #c9d1d9 !important;
}

/* --- BADGE INFO (Override du text-dark de Bootstrap) --- */
.dark-mode .badge.bg-info.text-dark {
    color: #f0f6fc !important; /* Force le texte en clair au lieu du noir */
}

/* --- BOUTONS PLEINS (Warning & Success) --- */
.dark-mode .btn-warning {
    background: rgba(255, 255, 0, 0.15) !important;
    border: 1px solid rgba(255, 255, 0, 0.4) !important;
    color: #ffff00 !important;
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.15);
    transition: all 0.3s ease;
}

.dark-mode .btn-warning:hover {
    background: #ffff00 !important;
    color: #000 !important;
    box-shadow: 0 0 20px rgba(255, 255, 0, 0.4);
    transform: translateY(-1px);
}

.dark-mode .btn-success {
    background: rgba(57, 255, 20, 0.15) !important;
    border: 1px solid rgba(57, 255, 20, 0.4) !important;
    color: #39ff14 !important;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.15);
    transition: all 0.3s ease;
}

.dark-mode .btn-success:hover {
    background: #39ff14 !important;
    color: #000 !important;
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.4);
    transform: translateY(-1px);
}
/* ============================================
   CORRECTION GLOBALE TABLEAUX (FOND & TEXTE)
   ============================================ */

/* Forcer le fond des tableaux à être transparent
   (pour hériter du #0d1117 des cartes) */
.dark-mode .table {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-hover-bg: transparent;
    --bs-table-striped-bg: transparent;
}

/* Forcer le texte des cellules à être clair
   (pour écraser le bleu foncé #1f4166 du body) */
.dark-mode .table td {
    background-color: transparent !important;
    color: #c9d1d9 !important;
}

/* Forcer les titres en gras et les liens à ressortir en blanc pur */
.dark-mode .table td.fw-bold,
.dark-mode .table td a.fw-bold {
    color: #f0f6fc !important;
}

/* Liens dans les tableaux (comme les titres d'annonces) */
.dark-mode .table td a {
    color: #f0f6fc !important;
    transition: color 0.2s ease;
}

.dark-mode .table td a:hover {
    color: #00f3ff !important;
}
/* ============================================
   PAGE D'ACCUEIL - Héro & Catégories - NUIT
   ============================================ */

/* --- HERO SECTION (bg-dark) --- */
.dark-mode .bg-dark {
    background: #0a0e1a !important;
    border: 1px solid #21262d !important;
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.05) !important;
}

.dark-mode .bg-dark .display-4 {
    color: #f0f6fc !important;
}

.dark-mode .bg-dark .text-primary {
    color: #00f3ff !important;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.3);
}

.dark-mode .bg-dark p {
    color: #8b949e !important;
}

.dark-mode .bg-dark .btn-outline-secondary {
    border-color: #30363d !important;
    color: #8b949e !important;
}

.dark-mode .bg-dark .btn-outline-secondary:hover {
    border-color: #00f3ff !important;
    color: #00f3ff !important;
    background: rgba(0, 243, 255, 0.06) !important;
}

/* --- CATEGORY CARDS --- */
.dark-mode .category-card {
    background: #0d1117 !important;
    border: 1px solid #21262d !important;
    transition: all 0.3s ease;
}

.dark-mode .category-card:hover {
    border-color: #ff00ff !important;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.15);
    transform: translateY(-5px);
}

.dark-mode .category-card .icon-wrapper {
    color: #484f58 !important;
    font-size: 1.8rem;
    transition: all 0.3s ease;
}

.dark-mode .category-card:hover .icon-wrapper {
    color: #ff00ff !important;
    text-shadow: 0 0 12px rgba(255, 0, 255, 0.4);
    transform: scale(1.15);
}

.dark-mode .category-card .category-title {
    color: #8b949e !important;
    transition: all 0.3s ease;
}

.dark-mode .category-card:hover .category-title {
    color: #f0f6fc !important;
}

/* --- BADGES ANNONCES (Prix & Localisation) --- */
.dark-mode .price-badge {
    background: rgba(57, 255, 20, 0.15) !important;
    color: #39ff14 !important;
    border: 1px solid rgba(57, 255, 20, 0.3);
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.2);
}

.dark-mode .location-badge {
    background: rgba(0, 243, 255, 0.15) !important;
    color: #00f3ff !important;
    border: 1px solid rgba(0, 243, 255, 0.3);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
}

/* --- BOUTON ACHETER (btn-success) --- */
.dark-mode .btn-success {
    background: rgba(57, 255, 20, 0.15) !important;
    border: 1px solid rgba(57, 255, 20, 0.4) !important;
    color: #39ff14 !important;
    transition: all 0.3s ease;
}

.dark-mode .btn-success:hover {
    background: #39ff14 !important;
    color: #000 !important;
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.4);
    transform: translateY(-2px);
}
/* ============================================
   SIDEBAR LIST-GROUP - MODE NUIT NÉON
   ============================================ */

/* --- LIST-GROUP CONTENEUR --- */
.dark-mode .list-group {
    background: #0d1117 !important;
    border: 1px solid #21262d !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

/* --- LIST-GROUP ITEMS --- */
.dark-mode .list-group-item {
    background: transparent !important;
    border-color: #21262d !important;
    color: #8b949e !important;
    padding: 12px 20px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.dark-mode .list-group-item:first-child {
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}

.dark-mode .list-group-item:last-child {
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

.dark-mode .list-group-item:hover {
    background: rgba(0, 243, 255, 0.04) !important;
    color: #f0f6fc !important;
    border-left-color: #00f3ff;
}

/* --- LIST-GROUP ACTIVE --- */
.dark-mode .list-group-item.active {
    background: rgba(0, 243, 255, 0.1) !important;
    border-color: rgba(0, 243, 255, 0.2) !important;
    border-left-color: #00f3ff !important;
    color: #00f3ff !important;
    font-weight: 600;
    box-shadow: inset 0 0 15px rgba(0, 243, 255, 0.05);
}

/* --- CARD FOOTER (bg-white) --- */
.dark-mode .card-footer.bg-white {
    background: #0d1117 !important;
    border-top: 1px solid #21262d !important;
}

/* --- IMAGE PLACEHOLDER (bg-light) --- */
.dark-mode .bg-light.text-secondary {
    background: #161b22 !important;
}

.dark-mode .bg-light.text-secondary i {
    color: #30363d !important;
}
/* ============================================
   MESSAGERIE - MODE NUIT NÉON
   ============================================ */

/* --- LAYOUT GLOBAL --- */
.chat-sidebar {
    background: #0d1117 !important;
    border-color: #21262d !important;
}

.chat-main {
    background: #010409 !important; /* Plus sombre que la sidebar pour l'effet de profondeur */
}

.chat-sidebar-header,
.chat-main-header {
    background: #0a0e1a !important;
    border-color: #21262d !important;
}

/* --- ELEMENT DE LA LISTE (Sidebar) --- */
.chat-sidebar .chat-item {
    background: transparent !important;
    border-color: #21262d !important;
    color: #8b949e !important;
    padding: 15px !important;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.chat-sidebar .chat-item:hover {
    background: rgba(0, 243, 255, 0.04) !important;
    color: #f0f6fc !important;
    border-left-color: #00f3ff;
}

.chat-sidebar .chat-item.active {
    background: rgba(0, 243, 255, 0.08) !important;
    border-left-color: #00f3ff !important;
    color: #f0f6fc !important;
}

.chat-sidebar .chat-item.active strong {
    color: #00f3ff !important;
}

/* --- BULLES DE MESSAGE --- */
.msg-bubble-sent {
    background: linear-gradient(135deg, rgba(0, 243, 255, 0.2), rgba(0, 243, 255, 0.05));
    border: 1px solid rgba(0, 243, 255, 0.3);
    color: #f0f6fc !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.msg-bubble-received {
    background: #161b22 !important;
    border: 1px solid #30363d;
    color: #c9d1d9 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* --- ZONE DE SAISIE --- */
.chat-input-area {
    background: #0d1117 !important;
    border-color: #21262d !important;
}

.chat-input-area .form-control {
    background: #0a0e1a !important;
    border: 1px solid #30363d !important;
    color: #f0f6fc !important;
    box-shadow: none !important;
}

.chat-input-area .form-control:focus {
    border-color: #00f3ff !important;
    box-shadow: 0 0 0 2px rgba(0, 243, 255, 0.15) !important;
}

.chat-input-area .form-control::placeholder {
    color: #484f58 !important;
}

/* Barre de scroll personnalisée (optionnel mais stylé) */
.chat-messages::-webkit-scrollbar,
.chat-sidebar .list-group::-webkit-scrollbar {
    width: 6px;
    min-height: 0;
}
.chat-messages::-webkit-scrollbar-track,
.chat-sidebar .list-group::-webkit-scrollbar-track {
    background: #010409;
    min-height: 0;
}
.chat-messages::-webkit-scrollbar-thumb,
.chat-sidebar .list-group::-webkit-scrollbar-thumb {
    background: #21262d;
    border-radius: 3px;
    min-height: 0;
}
.chat-messages::-webkit-scrollbar-thumb:hover,
.chat-sidebar .list-group::-webkit-scrollbar-thumb:hover {
    background: #30363d;
    min-height: 0;
}
.chat-main {
    background: #010409 !important;
    min-height: 0; /* <--- LA LIGNE MAGIQUE QUI DÉBLOQUE LE SCROLL DANS UN FLEXBOX */
}
/* ============================================
   MESSAGERIE - FORCE LE SCROLL (FLEXBOX FIX)
   ============================================ */

/* 1. Le conteneur principal DOIT cacher ce qui dépasse */
.container-fluid[style*="100vh"] {
    overflow: hidden !important;
}

/* 2. Les colonnes (sidebar + chat) DOIVENT accepter de rétrécir */
.row.h-100 > [class*="col-"] {
    min-height: 0 !important;
}

/* 3. La zone de chat principale */
.chat-main {
    background: #010409 !important;
    min-height: 0 !important;
    height: 100%;
    overflow: hidden !important; /* C'est lui qui gère le bloc, pas les enfants directs */
}

/* 4. LA ZONE DES MESSAGES ELLE-MÊME (Le plus important) */
#chat-messages-area {
    overflow-y: scroll !important; /* Force la barre de scroll à apparaître */
}

/* 5. Le reste du style (Sidebar, Bulles, etc.) */
.chat-sidebar {
    background: #0d1117 !important;
    border-color: #21262d !important;
}
/* ... laisse le reste du CSS néon qu'on a ajouté avant (bulles, inputs, etc.) ... */
/* --- BADGE NON LU DANS LE HEADER --- */
.dark-mode #unread-msg-badge {
    background: #ff00ff !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.6);
    animation: neon-pulse 1.5s ease-in-out infinite; /* Pulse comme sur le dashboard */
}
/* ============================================
   Cards scrollbar explorer par categories
   ============================================ */
   /* Stylisation de la scrollbar horizontale */
.category-scroll-container::-webkit-scrollbar {
    height: 8px; /* Hauteur de la barre */
}

.category-scroll-container::-webkit-scrollbar-track {
    background: #f1f1f1; /* Fond de la piste */
    border-radius: 4px;
}

.category-scroll-container::-webkit-scrollbar-thumb {
    background: #cbd5e0; /* Couleur du "curseur" */
    border-radius: 4px;
}

.category-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #a0aec0; /* Couleur au survol */
}

/* Petit effet de survol sur les cartes */
.transition-hover:hover {
    transform: translateY(-3px);
    transition: transform 0.2s ease-in-out;
}
/* Conteneur relatif pour positionner les flèches */
.category-wrapper {
    /* Ajoute un peu d'espace sur les côtés pour ne pas couper le scroll ou les ombres */
    padding: 0 10px;
}

/* Style des boutons flèches */
.btn-scroll {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;

    width: 40px;
    height: 40px;
    border-radius: 50%;

    /* Effet verre dépoli (Glassmorphism) - Fonctionne Nuit et Jour */
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.5);
    color: var(--bs-primary);

    /* Effet Neon (Glow) */
    box-shadow: 0 0 10px rgba(var(--bs-primary-rgb), 0.3);

    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.btn-scroll:hover {
    background: var(--bs-primary);
    color: white;
    box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.8); /* Glow intense au survol */
}

.scroll-left {
    left: -15px; /* Positionner un peu à l'extérieur à gauche */
}

.scroll-right {
    right: -15px; /* Positionner un peu à l'extérieur à droite */
}

/* Masquer la barre de défilement native (optionnel, pour un look plus épuré) */
.category-scroll-container {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.category-scroll-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}
/* --- 1. Style de la scrollbar (Visible sur Desktop, Cachée sur Mobile) --- */

/* Style général pour Firefox et autres */
.category-scroll-container {
    -ms-overflow-style: thin;
    scrollbar-width: thin;
    scrollbar-color: var(--bs-primary) #f1f1f1; /* Ta couleur primaire + fond clair */
    cursor: grab; /* Curseur main ouverte */
}

.category-scroll-container:active {
    cursor: grabbing; /* Curseur main fermée quand on clique */
}

/* Style pour Chrome/Safari/Edge */
.category-scroll-container::-webkit-scrollbar {
    height: 8px; /* Hauteur de la barre */
    background-color: #f1f1f1;
    border-radius: 10px;
}

.category-scroll-container::-webkit-scrollbar-thumb {
    background-color: var(--bs-primary); /* Couleur Neon de Bootstrap */
    border-radius: 10px;
    border: 2px solid #f1f1f1; /* Petit espace autour pour le style */
}

/* Cacher la barre sur Mobile (car on a le doigt/swipe) */
@media (max-width: 768px) {
    .category-scroll-container::-webkit-scrollbar {
        display: none;
    }
    .category-scroll-container {
        -ms-overflow-style: none;
        scrollbar-width: none;
        cursor: default; /* Curseur normal sur mobile */
    }
}
/* Flash messages : toujours visibles en haut, au-dessus du Hero */
.alert {
    position: sticky;
    top: 1rem;
    z-index: 1040;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: slideDown 0.3s ease-out;
}

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

/* Contraste mode sombre pour les alertes */
body.dark-mode .alert-success {
    background: rgba(57, 255, 20, 0.15) !important;
    color: #39ff14 !important;
    border-color: rgba(57, 255, 20, 0.3) !important;
}
body.dark-mode .alert-danger {
    background: rgba(255, 68, 68, 0.15) !important;
    color: #ff4444 !important;
    border-color: rgba(255, 68, 68, 0.3) !important;
}