/* --- Variables de Couleur Personnalisées (Thème Casino Sombre) --- */
:root {
    --casino-bg: #1a1a1a; /* Fond très sombre */
    --casino-bg-transparent: rgba(26, 26, 26, 0.85); /* Fond avec transparence */
    --casino-surface: #2c2c2c; /* Surface légèrement plus claire (cartes, modales) */
    --casino-surface-transparent: rgba(44, 44, 44, 0.9);
    --casino-primary: #d4af37; /* Or / Doré pour les accents primaires */
    --casino-secondary: #990000; /* Rouge casino foncé */
    --casino-green: #006400; /* Vert casino (tapis de jeu) */
    --casino-text: #f0f0f0; /* Texte principal clair */
    --casino-text-muted: #a0a0a0; /* Texte secondaire */

    /* Polices */
    --font-display: 'Limelight', cursive; /* Pour les titres, accents "casino" */
    --font-body: 'Roboto', sans-serif;   /* Pour le corps du texte */
}

/* --- Application du Mode Sombre Global et Polices --- */
body {
    background-color: var(--casino-bg) !important; /* !important pour surcharger Bootstrap si besoin */
    color: var(--casino-text) !important;
    font-family: var(--font-body);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main.container {
    flex-grow: 1; /* Pour que le footer reste en bas */
}

h1, h2, h3, h4, h5, h6, .display-font {
    font-family: var(--font-display);
    color: var(--casino-primary);
}

a {
    color: var(--casino-primary);
}
a:hover {
    color: lighten(var(--casino-primary), 10%);
}

/* --- Style des Composants Bootstrap avec Effet Casino --- */

/* Cartes avec fond transparent et effet de flou (si un fond est derrière) */
.card {
    background-color: var(--casino-surface-transparent) !important;
    border: 1px solid var(--casino-primary);
    backdrop-filter: blur(10px); /* Effet de flou derrière la carte */
    -webkit-backdrop-filter: blur(10px); /* Pour Safari */
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.card-header, .card-footer {
    background-color: rgba(0,0,0,0.2) !important; /* Fond légèrement plus sombre pour header/footer de carte */
    border-bottom: 1px solid var(--casino-primary);
}
.card-title {
    color: var(--casino-primary);
}

/* Formulaires */
.form-control {
    background-color: var(--casino-surface) !important;
    color: var(--casino-text) !important;
    border: 1px solid var(--casino-text-muted);
}
.form-control:focus {
    background-color: var(--casino-surface) !important;
    color: var(--casino-text) !important;
    border-color: var(--casino-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--casino-primary-rgb), 0.5); /* Adaptez casino-primary-rgb */
}
.form-label {
    color: var(--casino-text-muted);
}

/* Boutons */
.btn-primary {
    background-color: var(--casino-primary) !important;
    border-color: var(--casino-primary) !important;
    color: var(--casino-bg) !important; /* Texte sombre sur bouton doré */
    font-weight: bold;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: lighten(var(--casino-primary), 5%) !important;
    border-color: lighten(var(--casino-primary), 5%) !important;
}

.btn-secondary { /* Si vous voulez un autre style de bouton */
    background-color: var(--casino-secondary) !important;
    border-color: var(--casino-secondary) !important;
    color: var(--casino-text) !important;
}

/* Style de la barre de navigation */
header.border-bottom {
     border-bottom-color: var(--casino-primary) !important;
}
.navbar { /* Surcharge pour la navbar Bootstrap si besoin */
    background-color: var(--casino-bg-transparent); /* Fond de la navbar avec transparence */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.nav-link {
    color: var(--casino-text-muted) !important;
}
.nav-link.active, .nav-link:hover, .nav-link:focus {
    color: var(--casino-primary) !important;
}
.dropdown-menu {
    background-color: var(--casino-surface-transparent) !important;
    border: 1px solid var(--casino-primary);
    backdrop-filter: blur(10px);
}
.dropdown-item {
    color: var(--casino-text-muted) !important;
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: rgba(var(--casino-primary-rgb), 0.2) !important; /* Adaptez */
    color: var(--casino-primary) !important;
}


/* Effet pour l'arrière-plan du body (si vous voulez une image de fond casino) */
/*
body {
    background-image: url('/images/casino-background.jpg');
    background-size: cover;
    background-attachment: fixed;
}
*/

/* Exemple de classe pour un élément avec un fond "tapis vert" */
.tapis-vert {
    background-color: var(--casino-green);
    color: var(--casino-text);
    padding: 20px;
    border-radius: 8px;
    border: 2px solid darken(var(--casino-green), 10%);
}

.explanation-box {
    background-color: #f8f9fa !important; /* Un gris très clair, presque blanc. Priorité haute. */
    color: #212529 !important;            /* Texte foncé standard. Priorité haute. */
    border: 1px solid var(--casino-primary, #d4af37); /* Garde une bordure thématique */
    border-radius: 0.375rem; /* Rayon de bordure standard des cartes Bootstrap */
    margin-top: 1.5rem; /* Un peu d'espace au-dessus */
}

/* Assurer que le texte à l'intérieur de la boîte d'explication est bien foncé */
.explanation-box .card-body, /* Si vous utilisez la structure .card > .card-body */
.explanation-box p,
.explanation-box ul,
.explanation-box li,
.explanation-box h6 { /* Pour les titres à l'intérieur de la boîte */
    color: #212529 !important; /* Texte foncé */
}

.explanation-box h6.card-title, /* Titre principal de la boîte d'explication */
.explanation-box .display-font { /* Si vous utilisez display-font pour le titre */
    color: var(--casino-secondary, #990000) !important; /* Couleur d'accent pour le titre, ex: rouge casino */
}

.explanation-box strong {
    color: #000000 !important; /* Noir pour une forte emphase */
}

.explanation-box code { /* Si vous utilisez des balises <code> */
    background-color: #e9ecef;
    color: #c7254e; /* Couleur typique pour le code */
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
}

.explanation-box .badge { /* Si vous avez des badges dans les explications */
    /* Assurez-vous qu'ils sont lisibles sur fond clair */
    /* Par exemple, si vous avez <span class="badge bg-light text-dark ..."> */
    /* ceci n'est peut-être pas nécessaire, mais à garder à l'esprit */
}

/* Dans css/style.css */

/* Catégories de couleurs (revues pour s'assurer qu'elles ne gênent pas la surbrillance) */
/* Le !important sur background-color est OK ici car la surbrillance ne modifiera pas le fond */
.num-cat-tres-chaud { background-color: #B22222 !important; color: white !important; border-color: #8B0000; }
.num-cat-chaud { background-color: #FF4500 !important; color: white !important; border-color: #CD3700; }
.num-cat-neutre { background-color: #FFD700 !important; color: #333 !important; border-color: #EEC900; }
.num-cat-froid { background-color: #1E90FF !important; color: white !important; border-color: #104E8B; }
.num-cat-tres-froid { background-color: #4682B4 !important; color: white !important; border-color: #36648B; }
.num-cat-jamais-sorti { background-color: #6c757d !important; color: white !important; border-color: #545b62; }

/* Classes de fallback pour les boutons du sélecteur manuel si aucune catégorie n'est trouvée */
.btn-outline-secondary-cat {
    border-color: #6c757d; color: #6c757d; background-color: transparent;
}
.btn-outline-secondary-cat:hover, .btn-outline-secondary-cat.manual-item-selected:hover {
    background-color: #6c757d; color: white;
}
.btn-outline-warning-cat { /* Pour les étoiles */
    border-color: #ffc107; color: #000; background-color: transparent;
}
.btn-outline-warning-cat:hover, .btn-outline-warning-cat.manual-item-selected:hover {
    background-color: #ffc107; color: #000;
}

/* Style de base pour les boutons du sélecteur manuel */
.btn.manual-num, .btn.manual-star {
    transition: transform 0.1s ease-in-out, box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
    border-width: 2px; /* Bordure initiale un peu plus visible */
    border-style: solid; /* Assurer que la bordure est toujours solide */
    font-weight: bold; /* Rendre le chiffre plus lisible */
    /* La couleur de fond et du texte vient des classes .num-cat-* ou .btn-outline-*-cat */
}
.btn.manual-num:hover, .btn.manual-star:hover {
    transform: scale(1.1); /* Agrandissement au survol */
    z-index: 10;
}

/* NOUVEAU STYLE DE MISE EN ÉVIDENCE pour les items sélectionnés manuellement */
.btn.manual-item-selected {
    border-color: #FFFFFF !important; /* Bordure blanche épaisse et très visible */
    /* Ou une couleur dorée : var(--casino-primary, #d4af37) !important; */
    box-shadow: 0 0 10px 3px rgba(255, 255, 100, 0.7), /* Lueur dorée/blanche externe */
                inset 0 0 6px rgba(0, 0, 0, 0.4);  /* Ombre interne subtile pour du relief */
    transform: scale(1.12); /* Un peu plus grand que le survol */
    z-index: 5; /* Pour être au-dessus des autres */
    /* On ne touche PAS au background-color ni à la color ici, elles sont héritées de la classe de catégorie */
}

/* Styles pour les badges des grilles générées (coloration) */
.badge.num-cat-tres-chaud { background-color: #B22222 !important; color: white !important; }
.badge.num-cat-chaud { background-color: #FF4500 !important; color: white !important; }
.badge.num-cat-neutre { background-color: #FFD700 !important; color: #333 !important; }
.badge.num-cat-froid { background-color: #1E90FF !important; color: white !important; }
.badge.num-cat-tres-froid { background-color: #4682B4 !important; color: white !important; }
.badge.num-cat-jamais-sorti { background-color: #6c757d !important; color: white !important; }
/* Fallbacks si pas de classe de catégorie (pour les badges) */
.badge.bg-secondary {} /* Bootstrap gère déjà */
.badge.bg-warning.text-dark {} /* Bootstrap gère déjà */