/* public/css/style.css */

/* --- Configuration Globale --- */
:root {
    /* Définir des couleurs primaires/secondaires si besoin */
    --primary-color: #4a69bd; /* Bleu Bootstrap */
    --success-color: #198754; /* Vert Bootstrap */
    --warning-color: #ffc107; /* Jaune Bootstrap */
    --danger-color: #dc3545; /* Rouge Bootstrap */
    --light-bg: #f8f9fa;
    --white-bg: #ffffff;
    --dark-text: #2c3e50;
    --muted-text: #6c757d;

    /* --- AJOUTS DE LA MISE À JOUR (Code 2) --- */
    --primary-elegant: #4a69bd; /* Un bleu plus sophistiqué */
    --primary-elegant-hover: #5d81d1;
    --form-bg: #fdfdff; /* Un fond très légèrement bleuté/gris */
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
    --input-border-color: #e0e0e0;
    --input-shadow-focus: 0 0 0 0.25rem rgba(74, 105, 189, 0.25);
}
.text-dark {
    color: #2c3e50 !important;
}
.bg-dark {
    background-color: #2c3e50 !important;
}
.btn-dark {
    background-color: #2c3e50 !important;
}

.btn-outline-dark {
    border: 1px solid #2c3e50 !important;
    color: #2c3e50 !important;
}
.rounded-1 {
    border-radius: 26px !important;
}
.high_box {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

/* --- MISE À JOUR DU BODY --- */
body {
    /* IMPORTANT: Si vous utilisez une webfont comme Goudy, décommentez et adaptez */
    /* font-family: 'Goudy Bookletter 1911', serif; */
    /* Fallback standard */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    
    /* Couleur de fond mise à jour selon Code 2 */
    background-color: #f8f9fa; 
    
    color: var(--dark-text);
    padding-top: 70px; /* Ajuster précisément selon la hauteur de votre navbar fixe */
    padding-bottom: 75px; /* Ajuster cette valeur à la hauteur réelle de la barre + marge */
    line-height: 1.6;
    width: 70%;
    margin-left: 15%;
}

@media (max-width: 991.98px) {
  body {
  width: 100%;
    margin-left: 0;
}
}

/* --- Navbar Blanche Élégante --- */
.navbar.fixed-top {
    /* bg-white et shadow-sm sont définis dans index.php */
    transition: background-color 0.3s ease; /* Transition douce si on change le fond au scroll (non implémenté ici) */
    padding-top: 0.8rem; /* Un peu plus d'espace vertical */
    padding-bottom: 0.8rem;
}

.navbar-brand img {
    max-height: 35px; /* Hauteur max du logo */
    transition: transform 0.3s ease;
}
.navbar-brand img:hover {
    transform: scale(1.05); /* Léger zoom au survol */
}

.navbar-light .navbar-nav .nav-link.nav-link-custom {
    color: rgba(0, 0, 0, 0.7); /* Texte navbar noir légèrement transparent */
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    margin: 0 0.25rem;
    font-weight: 500; /* Texte un peu plus gras */
}
.navbar-light .navbar-nav .nav-link.nav-link-custom:hover,
.navbar-light .navbar-nav .nav-link.nav-link-custom:focus {
    color: var(--dark-text); /* Texte noir plein au survol */
    background-color: rgba(0, 0, 0, 0.05); /* Fond gris très léger au survol */
    transform: translateY(-1px); /* Léger soulèvement */
}
.navbar-light .navbar-nav .nav-link.nav-link-custom i {
    vertical-align: -0.1em; /* Ajustement icônes */
    margin-right: 0.4em;
}
.navbar-light .navbar-nav .nav-link.logout-link:hover {
     background-color: rgba(220, 53, 69, 0.1); /* Rouge TRES léger au survol déconnexion */
     color: var(--danger-color) !important; /* Texte rouge au survol */
}

.user-greeting {
    color: var(--muted-text);
}
.username-bold {
    font-weight: 600; /* Mise en gras du nom */
    color: var(--dark-text); /* S'assurer qu'il est bien noir */
}

/* --- Conteneur Principal & Chargement Initial --- */
#app {
    min-height: calc(100vh - 150px); /* Pousse le footer en bas */
    transition: opacity 0.4s ease-in-out;
}
.loading-initial {
    opacity: 0.7;
}

/* --- Dashboard Amélioré --- */
#dashboard {
    background: var(--white-bg); /* Fond blanc pur */
    border-radius: 12px; /* Coins arrondis */
    padding: 2rem !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07); /* Ombre plus douce */
    border: 1px solid #e9ecef; /* Bordure très légère */
    margin-bottom: 2.5rem !important;
}
#dashboard h4 { /* Titre du dashboard */
    font-weight: 600;
    color: var(--dark-text);
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee; /* Séparateur léger sous le titre */
}
#dashboard p {
    margin-bottom: 0.8rem; /* Espacement paragraphes */
    color: #555; /* Texte légèrement plus foncé */
    font-size: 1.05rem; /* Taille de police légèrement augmentée */
}
#dashboard .badge { /* Style général des badges */
    font-size: 0.95rem;
    padding: 0.5em 0.9em;
    vertical-align: middle;
}
#dashboard .badge.bg-success { background-color: var(--success-color) !important; }
#dashboard .badge.bg-warning { background-color: var(--warning-color) !important; color: var(--dark-text) !important;}
#dashboard .badge.bg-secondary { background-color: var(--muted-text) !important; }

#rankingInfo { /* Ligne du classement */
    font-weight: 500;
}

/* --- Zone de Jeu Améliorée --- */
#game-container {
     /* animation: fadeIn 0.5s ease-in-out; */ /* Animation possible */
}

#text-context-area,
#question-area {
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #dee2e6;
    margin-bottom: 1.8rem !important;
    background-color: var(--white-bg);
}

/* Header du Texte Contexte (cliquable) */
#text-context-area .card-header {
    background-color: var(--light-bg);
    font-weight: 500;
    border-bottom: 1px solid #dee2e6;
    cursor: pointer; /* Indiquer que c'est cliquable */
    transition: background-color 0.2s ease;
    position: relative; /* Pour positionner l'icône */
    padding-right: 3rem; /* Espace pour l'icône */
}
#text-context-area .card-header:hover {
    background-color: #e9ecef;
}
/* Icône Flèche pour indiquer ouvrable/fermé */
#text-context-area .card-header::after {
    font-family: 'bootstrap-icons'; /* Utiliser la police d'icônes */
    content: '\F282'; /* Code unicode pour chevron-down */
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    transition: transform 0.3s ease;
    color: var(--muted-text);
}
#text-context-area .card-header.expanded::after {
    transform: translateY(-50%) rotate(-180deg); /* Rotation quand ouvert */
}
#text-context-area .card-body {
    padding: 1.5rem;
    border-top: none; /* Pas besoin de double bordure */
    line-height: 1.7; /* Interligne texte contexte */
}

/* Zone de la Question */
#question-area .card-body {
     padding: 1.5rem 2rem; /* Plus d'espace horizontal */
}
#question-text {
    font-weight: 600;
    font-size: 1.2rem; /* Question plus grande */
    color: var(--dark-text);
    margin-bottom: 1.8rem; /* Plus d'espace avant les réponses */
}

/* Style options de réponse radio */
#answer-options .form-check {
    margin-bottom: 0.9rem;
    padding: 0.9rem 1.3rem; /* Padding augmenté */
    border: 1px solid #ced4da;
    border-radius: 8px;
    background-color: var(--white-bg);
    transition: all 0.25s ease-in-out;
    cursor: pointer;
}
#answer-options .form-check:hover {
    background-color: #f0f5ff; /* Bleu très pâle au survol */
    border-color: var(--primary-color);
    transform: translateX(5px); /* Décalage léger au survol */
}
#answer-options .form-check input[type="radio"] {
    margin-top: 0.2em;
    float: left;
    margin-right: 0.8em;
    cursor: pointer;
    transform: scale(1.1); /* Rendre les radios un peu plus visibles */
}
#answer-options .form-check-label {
    display: block;
    width: 100%;
    cursor: pointer;
    margin-left: 1.6em; /* Plus d'espace pour radio */
    color: #444; /* Texte des réponses un peu plus foncé */
}
#answer-options .form-check input[type="radio"]:checked + .form-check-label {
    font-weight: 600;
    color: var(--primary-color);
}
#answer-options .form-check:has(input[type="radio"]:checked) {
     border-color: var(--primary-color);
     background-color: #e7f1ff;
     box-shadow: 0 0 8px rgba(13, 110, 253, 0.15);
}

/* Bouton Valider */
#submit-answer-button {
    padding: 0.7rem 2rem;
    font-size: 1.05rem;
    font-weight: 500;
    border-radius: 50px; /* Bouton pilule */
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
#submit-answer-button:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
#submit-answer-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Feedback (Correct/Incorrect) */
#feedback {
    font-weight: 500;
    padding: 1rem 1.3rem !important; /* Plus de padding */
    border-radius: 8px;
    margin-top: 1rem; /* Espacer du bouton */
}
#feedback.alert-success { background-color: #d1e7dd; color: #0f5132; border: 1px solid #badbcc; }
#feedback.alert-danger { background-color: #f8d7da; color: #842029; border: 1px solid #f5c2c7; }
#feedback.alert-warning { background-color: #fff3cd; color: #664d03; border: 1px solid #ffecb5; }
#feedback.alert-info { background-color: #cff4fc; color: #055160; border: 1px solid #b6effb; }
#feedback strong { margin-right: 5px; }
#feedback i { margin-right: 8px; } /* Pour icônes potentielles */

/* --- Style de la correction (après validation) --- */
/* Appliqué au div .form-check */
.answer-correct { background-color: #e0f8e9 !important; border-color: var(--success-color) !important; }
.answer-incorrect { background-color: #ffeeee !important; border-color: var(--danger-color) !important; }

/* Appliqué au label */
.answer-correct > .form-check-label { color: var(--success-color); font-weight: bold; }
.answer-incorrect > .form-check-label { color: var(--danger-color); /* Pas de text-decoration par défaut */ }
.user-choice-incorrect > .form-check-label { text-decoration: line-through; opacity: 0.8; }

/* Désactiver les options après réponse */
.answer-options-disabled .form-check {
    cursor: default;
    opacity: 0.7; /* Griser légèrement */
    pointer-events: none; /* Empêcher clic/survol */
}
.answer-options-disabled .form-check:hover { transform: none; }

/* Mettre en évidence spécifiquement la bonne réponse et le mauvais choix */
.highlight-correct-answer {
    border-width: 2px !important;
    box-shadow: 0 0 10px rgba(25, 135, 84, 0.2);
}
.highlight-user-incorrect {
    border-width: 2px !important;
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.2);
}

/* --- Historique Amélioré --- */
#session-list-container .list-group-item {
    transition: all 0.25s ease;
    border-left: 5px solid transparent; /* Base pour couleur score */
    border-radius: 8px;
    margin-bottom: 0.75rem; /* Espacement items */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    padding: 1rem 1.25rem; /* Padding intérieur */
}
#session-list-container .list-group-item:hover {
    background-color: #f8f9fa;
    border-left-color: var(--primary-color);
    transform: scale(1.02); /* Léger agrandissement */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
/* Couleurs bordure selon score */
.session-score-high { border-left-color: var(--success-color); }
.session-score-medium { border-left-color: var(--warning-color); }
.session-score-low { border-left-color: var(--danger-color); }

/* Badge pourcentage */
.session-score-percentage {
    font-weight: 600;
    padding: 0.4em 0.8em;
    border-radius: 50px; /* Pilule */
    color: #fff;
    font-size: 0.9rem;
    min-width: 55px; /* Largeur minimale */
    text-align: center;
}
.percentage-high { background-color: var(--success-color); }
.percentage-medium { background-color: var(--warning-color); color: var(--dark-text) !important; }
.percentage-low { background-color: var(--danger-color); }

/* Message d'encouragement */
.session-message {
    display: block; /* Assure qu'il prend sa ligne */
    margin-top: 0.3rem;
    font-size: 0.9rem;
    font-style: italic;
}
.message-high { color: var(--success-color); }
.message-medium { color: #856404; } /* Orange/Marron pour avertissement */
.message-low { color: var(--danger-color); }

/* --- Modale Détails Historique (Sans Accordéon) --- */
#sessionDetailModalBody .session-detail-item {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 10px;
    border-width: 1px; /* Bordure plus fine mais colorée */
    border-style: solid;
    background-color: var(--white-bg);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    position: relative; /* Pour le numéro de question */
    counter-increment: question-counter; /* Incrémenter le compteur */
}
/* Numéro de question stylé */
#sessionDetailModalBody .session-detail-item::before {
    content: counter(question-counter);
    position: absolute;
    top: -15px;
    left: -15px;
    background-color: var(--primary-color);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

#sessionDetailModalBody {
    counter-reset: question-counter; /* Initialiser le compteur */
    background-color: #f0f2f5; /* Fond de la modale légèrement gris */
}
#sessionDetailModalBody .border-correct { border-color: rgba(25, 135, 84, 0.5); } /* Vert transparent */
#sessionDetailModalBody .border-incorrect { border-color: rgba(220, 53, 69, 0.5); } /* Rouge transparent */

#sessionDetailModalBody .question-title {
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--dark-text);
    font-size: 1.1rem;
}
#sessionDetailModalBody .user-answer {
    margin-bottom: 0.75rem;
    padding-left: 15px;
    border-left: 4px solid;
    font-size: 1.05rem;
}
#sessionDetailModalBody .user-answer.correct {
    color: var(--success-color);
    border-left-color: var(--success-color);
    font-weight: 500; /* Mettre en évidence la bonne réponse de l'user */
}
#sessionDetailModalBody .user-answer.incorrect {
    color: var(--danger-color);
    border-left-color: var(--danger-color);
    /* text-decoration: line-through; // Optionnel */
}
#sessionDetailModalBody .correct-answer-text {
    color: var(--success-color); /* Toujours en vert */
    font-weight: 500; /* Plus visible */
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #ccc; /* Séparateur léger */
    font-size: 1.05rem;
}
#sessionDetailModalBody .correct-answer-text::before {
    font-family: 'bootstrap-icons';
    content: '\F26A'; /* Checkmark circle */
    margin-right: 8px;
    font-size: 1.1rem;
    vertical-align: -0.15em;
}

/* --- Classement --- */
.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.04); /* Survol ligne tableau */
}
.table-info { /* Ligne de l'utilisateur connecté */
    --bs-table-bg: #cfe2ff !important; /* Fond bleu clair */
    --bs-table-color: #000 !important; /* Texte noir */
    font-weight: bold !important;
}

/* --- Animations & Utilitaires --- */
/* NOUVEAU CODE (SANS TRANSFORM) */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.fade-in { 
    animation: fadeIn 0.4s ease-out; 
    /* Sécurité : on s'assure que l'animation ne crée pas de contexte d'empilement persistant */
    transform: none !important; 
}

.loading-spinner .spinner-border { width: 2rem; height: 2rem; }

/* --- Footer --- */
footer { font-size: 0.9rem; }

/* Barre de navigation inférieure */
.navbar.fixed-bottom {
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1); /* Ombre plus prononcée en haut */
    /* background-color: #f8f9fa; */ /* Ou une autre couleur */
}

.bottom-nav-link {
    color: #6c757d; /* Couleur icône/texte par défaut */
    padding-top: 0.5rem;
    padding-bottom: 0.25rem;
    transition: color 0.2s ease-in-out, transform 0.1s ease-in-out; /* Transition douce */
}

.bottom-nav-link i {
    margin-bottom: -2px; /* Ajustement visuel icône/texte */
    transition: transform 0.1s ease-in-out;
}
.bottom-nav-link small{
    font-size: 0.7rem; /* Texte plus petit */
    display: block;
}

.bottom-nav-link.active {
    color: var(--bs-primary); /* Couleur thème Bootstrap pour lien actif */
    font-weight: bold;
}

.bottom-nav-link:hover {
    color: var(--bs-primary-text-emphasis);
}
.bottom-nav-link:active i {
     transform: scale(0.9); /* Effet de clic */
}

/* Styles pour la sélection de domaine/texte */
.domain-list .list-group-item {
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.domain-list .list-group-item:hover,
.domain-list .list-group-item.active {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-emphasis-color);
    border-left: 4px solid var(--bs-primary);
}

.text-list .list-group-item {
    cursor: pointer;
     transition: background-color 0.2s ease;
}
.text-list .list-group-item:hover {
    background-color: var(--bs-light-bg-subtle);
}
.text-list .list-group-item .text-excerpt {
    font-size: 0.9em;
    color: #6c757d;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limiter à 2 lignes */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Conteneur général de la vue classement */
.classement-container {
    /* Utiliser la même animation que les autres sections */
    animation: fadeIn 0.4s ease-out;
    padding: 1rem 0; /* Espace haut/bas */
}

/* Titre de la page Classement */
.classement-container h2 {
    font-weight: 600;
    color: var(--dark-text);
    margin-bottom: 0.5rem;
    display: flex; /* Pour aligner icône et texte */
    align-items: center;
}
.classement-container h2 i.bi-trophy-fill {
    color: #ffc107; /* Couleur or pour l'icône trophée */
    font-size: 1.3em; /* Icône plus grande */
    margin-right: 0.75rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.1); /* Légère ombre portée */
}

/* Description sous le titre */
.classement-container .text-muted {
    margin-bottom: 2rem; /* Plus d'espace avant le contenu */
    font-size: 1.05rem;
}

/* Boîte d'information du classement de l'utilisateur connecté */
.user-ranking-summary {
    background: linear-gradient(135deg, #e7f1ff 0%, #cfe2ff 100%); /* Dégradé bleu léger */
    border: 1px solid #b8d6ff;
    border-radius: 12px; /* Coins arrondis */
    padding: 1.5rem 2rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.1);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    position: relative; /* Pour pseudo-éléments */
    overflow: hidden; /* Pour les effets de fond */
}
.user-ranking-summary:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(13, 110, 253, 0.15);
}
.user-ranking-summary::before { /* Effet subtil */
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
    transform: rotate(30deg);
    opacity: 0.5;
    z-index: 0;
}
.user-ranking-summary > * { /* Assurer que le contenu est au-dessus */
    position: relative;
    z-index: 1;
}
.user-ranking-summary i.bi-person-check-fill {
    color: var(--primary-color);
    font-size: 1.2em;
    vertical-align: -0.15em;
}
.user-ranking-summary strong {
    font-size: 1.1em;
    color: var(--dark-text);
}

/* Conteneur pour la table responsive (pour l'ombre et les coins arrondis) */
.table-responsive-container {
    border-radius: 10px;
    overflow: hidden; /* Important pour que border-radius s'applique à la table */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}

/* La table du classement elle-même */
.classement-table {
    margin-bottom: 0 !important; /* La marge est sur le conteneur */
    vertical-align: middle; /* Centrer verticalement le contenu des cellules */
    border-collapse: separate; /* Pour border-spacing */
    border-spacing: 0; /* Enlever l'espacement par défaut */
}

/* Header de la table */
.classement-table thead th {
    background-color: #e9ecef; /* Fond gris clair */
    color: var(--dark-text);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
    padding: 0.9rem 1.25rem;
    border-bottom: 2px solid var(--primary-color); /* Ligne bleue distinctive */
    white-space: nowrap; /* Empêcher le retour à la ligne */
}

/* Lignes du corps de la table */
.classement-table tbody tr {
    border-bottom: 1px solid #f1f1f1; /* Séparateur de ligne très léger */
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.classement-table tbody tr:last-child {
    border-bottom: none; /* Pas de bordure pour la dernière ligne */
}
.classement-table tbody tr:hover {
    background-color: #f8f9fa; /* Gris très léger au survol */
    transform: scale(1.01); /* Effet de zoom subtil */
    box-shadow: 0 0 15px rgba(0,0,0,0.05); /* Ombre au survol */
    z-index: 10; /* Passer au-dessus des autres lignes */
    position: relative; /* Pour que z-index fonctionne */
}

/* Cellules de la table */
.classement-table tbody td {
    padding: 0.9rem 1.25rem; /* Padding cohérent avec le header */
    font-size: 1.0rem;
}

/* Cellule du Rang (avec icônes potentielles) */
.rank-cell {
    font-weight: 700;
    font-size: 1.1em;
    text-align: center;
    min-width: 70px; /* Donner de l'espace */
}
.rank-cell i.bi-trophy-fill {
    font-size: 1.1em;
    margin-right: 0.3em;
    vertical-align: -0.1em;
    display: inline-block;
    transition: transform 0.2s ease;
}
.rank-cell i.bi-trophy-fill:hover {
    transform: scale(1.2) rotate(-5deg); /* Animation icône au survol */
}
/* Couleurs spécifiques Top 3 (correspondent à celles générées en PHP) */
.rank-cell i.text-warning { color: #ffc107 !important; } /* Or */
.rank-cell i.text-secondary { color: #adb5bd !important; } /* Argent */
.rank-cell i[style*="#cd7f32"] { color: #cd7f32 !important; } /* Bronze */

/* Cellule du Nom d'utilisateur */
.username-cell {
    font-weight: 500;
    color: #333;
}

/* Cellule du Score */
.score-cell {
    font-weight: 600;
    text-align: right;
    color: var(--success-color); /* Score en vert */
    white-space: nowrap;
}
/* Ajouter 'pts' après le score */
.score-cell::after {
    content: ' pts';
    font-size: 0.8em;
    color: var(--muted-text);
    margin-left: 0.3em;
    font-weight: 400;
}

/* Styles spéciaux pour les lignes Top 3 */
.classement-table tbody tr.rank-1 {
    background-color: rgba(255, 193, 7, 0.05); /* Fond Or très léger */
}
.classement-table tbody tr.rank-2 {
    background-color: rgba(173, 181, 189, 0.08); /* Fond Argent très léger */
}
.classement-table tbody tr.rank-3 {
    background-color: rgba(205, 127, 50, 0.05); /* Fond Bronze très léger */
}
/* Mettre le nom en gras pour le top 3 */
.classement-table tbody tr.rank-1 .username-cell,
.classement-table tbody tr.rank-2 .username-cell,
.classement-table tbody tr.rank-3 .username-cell {
    font-weight: 600;
}

/* Style pour la ligne de l'utilisateur connecté */
/* Remplacer le .table-primary par une classe plus spécifique si besoin */
.classement-table tbody tr.current-user-row {
    background-color: var(--bs-primary-bg-subtle) !important; /* Fond bleu thème */
    font-weight: bold !important;
    border-left: 4px solid var(--primary-color); /* Marqueur bleu à gauche */
    box-shadow: inset 5px 0 10px -5px rgba(13, 110, 253, 0.2); /* Ombre intérieure */
}
.classement-table tbody tr.current-user-row td {
    color: var(--dark-text) !important;
}
.classement-table tbody tr.current-user-row:hover {
     transform: scale(1.015); /* Zoom un peu plus prononcé au survol */
}

/* Message si aucun classement */
.no-ranking-alert {
    text-align: center;
    padding: 2rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    color: var(--muted-text);
    font-style: italic;
}
.no-ranking-alert::before {
    font-family: 'bootstrap-icons';
    content: '\F612'; /* Icône table vide ou similaire */
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.5rem;
    color: #ced4da;
}

/* --- Fin Styles Classement --- */

/* --- Styles pour la bannière d'application --- */

/* Police d'écriture pour la bannière (ne modifiera pas le reste de votre site) */
#app-download-banner-component {
    font-family: 'Poppins', sans-serif;
}

/* Conteneur principal de la bannière */
#app-download-banner-component {
    position: relative;
   
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    z-index: 1000;
   
    animation-delay: 0.5s; /* Petit délai avant l'apparition */
}

/* Contenu intérieur de la bannière */
#app-download-banner-component .banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    max-width: 900px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(48, 134, 250, 0.15); /* Ombre subtile avec la couleur primaire */
    position: relative;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Animation d'apparition */
@keyframes slide-in-banner {
    to {
        transform: translateY(0);
    }
}

/* État caché pour l'animation de fermeture */
#app-download-banner-component.hidden {
    transform: translateY(150%);
    transition: transform 0.4s cubic-bezier(0.7, 0, 0.84, 0);
}

/* Icône de l'application */
#app-download-banner-component .banner-icon img {
    width: 110px;
   
    border-radius: 12px;
}

/* Section Texte */
#app-download-banner-component .banner-text {
    flex-grow: 1;
}
#app-download-banner-component .banner-text h3 {
    margin: 0 0 4px 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a202c;
}
#app-download-banner-component .banner-text p {
    margin: 0;
    font-size: 0.9rem;
    color: #5a677d;
}

/* Bouton d'action principal */
#app-download-banner-component .banner-action-button {
    display: inline-block;
    background-color: #3086FA; /* Couleur primaire */
    color: white;
    padding: 12px 24px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    box-shadow: 0 4px 12px rgba(48, 134, 250, 0.3);
}
#app-download-banner-component .banner-action-button:hover {
    transform: translateY(-3px);
    background-color: #2575dd; /* Couleur primaire un peu plus foncée */
    box-shadow: 0 6px 16px rgba(48, 134, 250, 0.4);
}

/* Bouton de fermeture */
#app-download-banner-component .banner-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #f0f3f8;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #718096;
    transition: all 0.2s ease;
}
#app-download-banner-component .banner-close-btn:hover {
    background-color: #e2e8f0;
    color: #2d3748;
    transform: scale(1.1);
}

/* Responsive pour les écrans mobiles (< 768px) */
@media (max-width: 768px) {
    #app-download-banner-component {
        padding: 15px;
    }
    #app-download-banner-component .banner-content {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 40px 20px 20px 20px;
    }
    #app-download-banner-component .banner-text {
        margin: 10px 0;
    }
}

/* --- Style général de la modale pour un look plus doux (Code 2 Integration) --- */
.modal-content {
    border-radius: 1rem; /* Bords bien plus arrondis */
    border: none;
    box-shadow: var(--card-shadow);
    background-color: var(--form-bg);
    overflow: hidden; /* Pour que le header arrondi s'affiche correctement */
}

.modal-header {
    border-bottom: 1px solid #f0f0f0;
    background-color: #f8f9fc;
    padding: 1.25rem 1.5rem;
}

.modal-header .btn-close {
    transition: transform 0.2s ease;
}

.modal-header .btn-close:hover {
    transform: scale(1.1);
}

.modal-title {
    font-weight: 600;
    color: #333;
}

.modal-body {
    padding: 2rem;
}

/* Style des champs de formulaire flottants */
.form-floating > .form-control {
    border-radius: 0.75rem; /* Bords arrondis pour les champs */
    border: 1px solid var(--input-border-color);
    transition: all 0.3s ease-in-out;
    height: calc(3.8rem + 2px); /* Un peu plus haut pour un meilleur feeling */
    padding-top: 1.8rem;
}

/* Apparence du champ quand on clique dessus */
.form-floating > .form-control:focus {
    
    box-shadow: var(--input-shadow-focus);
}

/* Style du label flottant */
.form-floating > .form-label {
    padding: 1.1rem 1rem;
    color: #6c757d;
}

/* Bouton de soumission élégant */
.modal-body .btn-primary {
    background-color: var(--primary-elegant);
    border-color: var(--primary-elegant);
    border-radius: 50px; /* Forme de pilule */
    padding: 12px 30px;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(74, 105, 189, 0.2);
}

.modal-body .btn-primary:hover {
    background-color: var(--primary-elegant-hover);
    border-color: var(--primary-elegant-hover);
    transform: translateY(-3px); /* Effet de lévitation au survol */
    box-shadow: 0 6px 15px rgba(74, 105, 189, 0.3);
}

/* Centrage du bouton */
.form-submit-wrapper {
    padding-top: 1rem;
    text-align: center;
}

.pulse-play-button {
    animation: pulsePlay 2s infinite;
    /* Optionnel: autres styles pour le rendre plus proéminent */
    /* font-size: 1.25rem; */
   /* background-color: #4a69bd;
    color: white;
    border: 1px solid rgba(74, 105, 189, 0.5);*/
}
.pulsePlay2-b {
    animation: pulsePlay2 3s infinite;
    border-radius: 4px;
}

.pulse-play-button:hover {
    animation: pulsePlay 2s infinite;
    /* Optionnel: autres styles pour le rendre plus proéminent */
    /* font-size: 1.25rem; */
    /*background-color: rgba(74, 105, 189, 0.9);
    color: white;*/
    /*border: 1px solid rgba(74, 105, 189, 0.5);*/
}

@keyframes pulsePlay {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7); /* Couleur Bootstrap success */
    }
    70% {
        transform: scale(0.95);
        box-shadow: 0 0 0 15px rgba(25, 135, 84, 0);
       
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(25, 135, 84, 0);
    }
}

@keyframes pulsePlay2 {
    0% {
        transform: scale(1);
        
    }
    70% {
        transform: scale(1.10);
        
    }
    100% {
        transform: scale(1);
       
    }
}
/* Styles pour la modal de jeu universelle */
.game-modal-custom .modal-dialog {
    /* max-width: 700px; */ /* Ou une autre taille si modal-lg n'est pas suffisant */
}
.game-modal-custom .modal-header {
    /* Styles spécifiques pour le header si besoin */
    background-color: #f8f9fa; 
}
#openTextContextModalButtonInGame {
    font-size: 0.85rem;
}
/* --- MISE À JOUR GAME MODAL BODY (Code 2) --- */
#gameModalBody {
    padding: 1rem; /* Ajuster le padding du corps de la modal */
    position: relative; /* Ajouté depuis Code 2 */
}
#gameModalBody #question-area.card {
    margin-bottom: 0; /* Enlever marge si c'est le dernier élément avant le footer */
}

.answer-option-clickable {
    border-radius: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px !important;
}

/* Classe pour l'option radio sélectionnée visuellement avant validation */
.answer-option-clickable.selected {
    background-color: #e7f1ff; /* Bleu très clair, à ajuster */
    font-style: italic;
    font-weight: bold;
    border-radius: 10px;


}
.answer-option-clickable input[type="radio"].visually-hidden:focus + label {
    /* Style pour le focus si on navigue au clavier sur le radio caché */
   
    outline-offset: 2px;
}

/* Police plus petite pour les messages de limite/prompt dans la modal */
.fs-small {
    font-size: 0.875em;
}

.fs-small2 {
    font-size: 80%;
}
/* Bouton Texte Contexte dans la modal de jeu */
#openTextContextModalButtonInGame {
    font-weight: 500;
    /* Transition pour le survol */
    transition: all 0.2s ease-in-out;
    /* Pour l'effet pulse, on va créer une animation */
    animation: pulseContextButton 2.5s infinite ease-in-out;
}

#openTextContextModalButtonInGame:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

@keyframes pulseContextButton {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2); 
    }
    50% {
        transform: scale(1.15);
         box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

#openTextContextModalButtonInGame {
    background-image: linear-gradient(to right, rgb(30,100,20)  -10%,  rgb(30,90,160) 100%);
    color: white;
    border: none;
}


/* --- SECTIONS REMPLACÉES PAR LA MISE À JOUR (Code 2) --- */

.domain-scroller-container {
    width: 100%;
    overflow: hidden; /* Pour cacher les barres de scroll verticales potentielles du conteneur lui-même */
}

/* --- STYLE POUR LES CARTES DE DOMAINE (Horizontal Scroll) - MIS À JOUR --- */
.domain-horizontal-list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
    gap: 1rem;
}
.domain-horizontal-list::-webkit-scrollbar { display: none; }
.domain-horizontal-list { -ms-overflow-style: none; scrollbar-width: none; }

/* 2. Style de la carte de domaine (remplace .btn-outline-primary) - MIS À JOUR */
.domain-button {
    border: 1px solid #dee2e6;
    background-color: #ffffff;
    color: #212529;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    text-align: center;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    min-width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 3. Effet au survol de la souris - MIS À JOUR */
.domain-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
    border-color: #0d6efd;
    color: #0d6efd;
}
/* 4. Style de la carte de domaine LORSQU'ELLE EST SÉLECTIONNÉE (active) - MIS À JOUR */
.domain-button.active {
    background-color: #0d6efd;
    color: #ffffff;
    border-color: #0d6efd;
    transform: translateY(-3px);
    box-shadow: 0 8px 12px rgba(13, 110, 253, 0.3);
}

/* Pour la liste des textes (qui reste verticale) */
.text-list-vertical .list-group-item {
    /* Styles spécifiques si besoin */
}


/* Style pour la modal de retrait */
#withdrawalModal .modal-header {
    background-color: #f8f9fa; /* Fond léger */
}

#withdrawalModal .form-label {
    font-weight: 500;
    font-size: 0.9rem;
    color: #495057;
}

#withdrawalModal .form-submit-wrapper { /* Si vous l'utilisez, sinon d-grid est bien */
    display: flex;
    justify-content: center;
}

#withdrawalModal .btn-lg {
    font-size: 1.1rem;
    padding: 0.75rem 1.25rem;
}

/* Style pour le solde affiché dans la modal */
#withdrawalModalCurrentBalance {
    font-size: 1.2rem;
    font-weight: bold;
}

/* Style pour la bannière de limite de questions (similaire à la bannière de téléchargement) */
.banner-component {
    background-color: #0d6efd; /* Bleu Bootstrap par défaut */
    color: white;
    padding: 1rem;
    position: fixed;
    top: 56px; /* Juste en dessous de la navbar */
    left: 0;
    right: 0;
    z-index: 1029; /* En dessous de la navbar mais au-dessus du reste */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease;
}

.banner-component-daily {
     background-color: #0d6efd; /* Bleu Bootstrap par défaut */
    color: white;
    padding: 1rem;
    position: relative;
    
    z-index: 1029; /* En dessous de la navbar mais au-dessus du reste */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease;
}
.banner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
}

.banner-icon {
    font-size: 2rem;
    margin-right: 1.5rem;
}

.banner-text h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    font-weight: bold;
}

.banner-text p {
    margin: 0;
    opacity: 0.9;
}

/* Classe pour l'avertissement quand il reste peu de questions */
.banner-content.banner-warning {
    background-color: #dc3545 !important; /* Rouge Bootstrap */
}

/* --- STYLES POUR LES ANIMATIONS DE POINTS - MIS À JOUR (Code 2) --- */
.points-animation-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 11000;
}
#confetti-canvas { width: 100%; height: 100%; }

.score-float {
    position: fixed; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5rem;
    font-weight: 900;
    opacity: 0;
    animation: float-up 1.5s ease-out forwards;
    pointer-events: none;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.4);
    z-index: 11001;
}
.score-float-success { color: #198754; }
.score-float-danger { color: #dc3545; animation-name: float-shake; }

@keyframes float-up {
    0% { opacity: 1; transform: translate(-50%, 0) scale(0.5); }
    100% { opacity: 0; transform: translate(-50%, -150px) scale(1.5); }
}
@keyframes float-shake {
    0% { opacity: 1; transform: translate(-50%, 0); }
    20%, 40%, 60%, 80% { transform: translate(-50%, 0) translateX(10px); }
    30%, 50%, 70% { transform: translate(-50%, 0) translateX(-10px); }
    100% { opacity: 0; transform: translate(-50%, 50px); }
}

/* --- STYLE POUR LA BANNIÈRE DE LIMITE HORAIRE - MIS À JOUR (Code 2) --- */
.banner-component.banner-limit {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    background-color: #212529;
    color: white;
    top: 56px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease;
}
.banner-component.banner-limit .banner-icon i { font-size: 1.5rem; color: #0dcaf0; margin-right: 0.5rem; }
.banner-component.banner-limit .banner-text p { margin: 0; font-size: 0.9rem; }

@media (max-width: 991.98px) {
    .banner-component.banner-limit {
        top: auto;
        bottom: 60px;
    }
}
.banner-component.banner-limit.limit-warning { background-color: #dc3545; }
.banner-component.banner-limit.limit-warning .banner-icon i { color: white; }


/* --- STYLE POUR JEU 3D (WINNER) - MIS À JOUR (Code 2) --- */
.card-3d-effect {
    transition: transform 0.1s, box-shadow 0.1s;
    border-bottom: 6px solid #e5e7eb;
}
.card-3d-effect:active {
    transform: translateY(4px);
    border-bottom-width: 2px;
    box-shadow: none !important;
}
.card-3d-effect.selected {
    border-color: #0d6efd;
    background-color: #f0f8ff;
}

.scene-dice {
    width: 100px;
    height: 100px;
    margin: 40px auto;
    perspective: 600px;
}
.cube-dice {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s ease-out;
}
.cube-dice.rolling { animation: spinDice 0.5s infinite linear; }
.cube-face {
    position: absolute;
    width: 100px;
    height: 100px;
    background: white;
    border: 2px solid #ccc;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    font-weight: bold;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.1);
}
.cube-face-1 { transform: rotateY(  0deg) translateZ(50px); }
.cube-face-2 { transform: rotateY( 90deg) translateZ(50px); }
.cube-face-3 { transform: rotateY(180deg) translateZ(50px); }
.cube-face-4 { transform: rotateY(-90deg) translateZ(50px); }
.cube-face-5 { transform: rotateX( 90deg) translateZ(50px); }
.cube-face-6 { transform: rotateX(-90deg) translateZ(50px); }

@keyframes spinDice {
    0% { transform: rotateX(0deg) rotateY(0deg); }
    100% { transform: rotateX(360deg) rotateY(360deg); }
}

.hover-card-up { transition: transform 0.2s; }
.hover-card-up:hover { transform: translateY(-5px); }
/* --- STYLE DASHBOARD COMPACT --- */

.dash-block {
    /* Le fameux "petit bleu transparent" */
    background-color: rgba(13, 202, 240, 0.08); /* Cyan très clair */
    border: 1px solid rgba(13, 202, 240, 0.2);
    border-radius: 12px;
    padding: 12px 15px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Le bloc portefeuille est un peu plus grand */
.dash-block.wallet-block {
    background-color: rgba(25, 135, 84, 0.08); /* Vert très clair */
    border-color: rgba(25, 135, 84, 0.2);
    display: block; /* Pas flex ici pour gérer le contenu */
}

.dash-icon {
    font-size: 1.2rem;
    margin-right: 10px;
    color: #0dcaf0;
}

.dash-val {
    font-weight: 700;
    color: #212529;
}

/* Style pour le bouton rond de notification en haut */
.btn-icon-round {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #f8f9fa; /* Gris très clair */
    color: #333;
    transition: all 0.2s ease;
}
.btn-icon-round:hover {
    background-color: #e9ecef;
    transform: translateY(-2px); /* Petit effet de saut */
    color: var(--primary-color);
}

/* Style de la liste des notifications */
.notif-item {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f0f0f0;
    cursor: default;
    transition: background-color 0.2s;
}
.notif-item:last-child {
    border-bottom: none;
}
.notif-item:hover {
    background-color: #fcfcfc;
}

/* Style spécifique pour les non-lues */
.notif-item.unread {
    background-color: #e7f1ff; /* Bleu très très clair */
    border-left: 4px solid var(--primary-color);
}

.notif-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.notif-time {
    font-size: 0.75rem;
    color: #aaa;
}

/* --- WINNER MODERN UI --- */
.winner-modal-header {
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
    color: #ffd700; /* Or */
    border-radius: 1rem 1rem 0 0;
    padding: 1.5rem;
}

.mode-selector-card {
    border: 2px solid #eee;
    border-radius: 12px;
    transition: all 0.2s ease;
    cursor: pointer;
    text-align: center;
    padding: 1rem;
    background: #fff;
}
.mode-selector-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.btn-check:checked + .mode-selector-card {
    border-color: #000;
    background-color: #f8f9fa;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
}
.mode-icon { font-size: 2rem; margin-bottom: 0.5rem; display: block; }

/* Input Moderne pour la mise */
.modern-input-group {
    position: relative;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 5px 15px;
    background: #fff;
    display: flex;
    align-items: center;
}
.modern-input-group:focus-within { border-color: #000; box-shadow: 0 0 0 3px rgba(0,0,0,0.05); }
.modern-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 1px;
    margin-right: 10px;
    font-weight: 700;
}
.modern-input {
    border: none;
    font-size: 1.2rem;
    font-weight: bold;
    width: 100%;
    outline: none;
    text-align: right;
    color: #000;
}

/* Sélecteur de joueurs "Cool" */
.player-counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f0f2f5;
    border-radius: 50px;
    padding: 5px;
}
.player-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
}
.player-btn:active { transform: scale(0.9); }
.player-val { font-weight: 800; font-size: 1.1rem; min-width: 30px; text-align: center; }

/* --- WINNER V2 : NOUVEAU DESIGN --- */

/* Gros sélecteur de nombre (+ 7 -) */
.big-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 1rem;
    padding: 10px;
    height: 80px; /* Hauteur imposante */
}
.big-selector-btn {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background-color: #fff;
    border: 1px solid #dee2e6;
    font-size: 1.5rem;
    font-weight: bold;
    color: #212529;
    transition: all 0.1s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.big-selector-btn:active { transform: scale(0.95); background-color: #e2e6ea; }
.big-selector-val { font-size: 2rem; font-weight: 800; color: #212529; }

/* Input Mise avec boutons */
.bet-selector {
    display: flex;
    align-items: center;
    border: 1px solid #ced4da;
    border-radius: 50px;
    overflow: hidden;
    background: #fff;
}
.bet-btn {
    width: 50px;
    height: 50px;
    border: none;
    background: #f8f9fa;
    font-weight: bold;
    font-size: 1.2rem;
    cursor: pointer;
}
.bet-btn:hover { background: #e9ecef; }
.bet-input {
    flex-grow: 1;
    border: none;
    text-align: center;
    font-size: 1.3rem;
    font-weight: bold;
    color: #198754; /* Vert argent */
    outline: none;
}

/* Carte Lobby Redesign */
.lobby-card {
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.03);
    transition: transform 0.2s;
    overflow: hidden;
}
.lobby-card:hover { transform: translateY(-5px); }
.prizes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5px;
    background: #f8f9fa;
    padding: 10px;
    border-radius: 10px;
    margin-top: 10px;
}
.prize-box { text-align: center; }
.prize-rank { font-size: 0.7rem; text-transform: uppercase; color: #888; font-weight: 700; }
.prize-val { font-weight: bold; font-size: 0.9rem; color: #212529; }
.prize-val.gold { color: #d63384; } /* Couleur distinctive pour le 1er */

/* --- WINNER V3 : DESIGN SURÉLEVÉ & SCROLL --- */

/* Conteneur Scroll Horizontal (Mes Parties) */
.horizontal-scroll-wrapper {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding: 10px 5px 20px 5px; /* Espace pour l'ombre */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}
.horizontal-scroll-wrapper::-webkit-scrollbar { display: none; } /* Chrome */

/* Carte "Mes Parties" (Format paysage compact) */
.active-game-card {
    min-width: 260px;
    background: #fff;
    border-radius: 16px;
    padding: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
    transition: transform 0.2s;
    position: relative;
}
.active-game-card:active { transform: scale(0.98); }

/* Bouton "Voir tout" à la fin du scroll */
.see-more-card {
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 16px;
    cursor: pointer;
    color: #6c757d;
}

/* Carte Lobby (Surélevée & Blanche) */
.lobby-card-elevated {
    background: #ffffff;
    border-radius: 20px;
    border: none;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06); /* Ombre douce portée */
    padding: 20px;
    position: relative;
    transition: transform 0.2s;
}
.lobby-card-elevated:hover { transform: translateY(-3px); }

/* Badges Surélevés */
.badge-elevated {
    background: #fff;
    color: #000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 50px;
    padding: 5px 12px;
    font-weight: 700;
    font-size: 0.75rem;
}

/* Bouton Outline (Vide à l'intérieur) */
.btn-outline-custom {
    background: transparent;
    border: 2px solid #000;
    color: #000;
    border-radius: 50px;
    font-weight: 700;
    padding: 8px 20px;
    transition: all 0.2s;
}
.btn-outline-custom:hover {
    background: #000;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Correction Icônes Rondes (Aspect Ratio) */
.icon-circle {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important; /* Force le rond parfait */
    aspect-ratio: 1/1; /* Sécurité CSS moderne */
}

/* --- CORRECTIONS FINALES DESIGN --- */

/* 1. Gestion des Modales superposées (Le fond noir profond) */
.modal-backdrop + .modal-backdrop {
    opacity: 0.8 !important; /* Rend le 2ème fond plus noir pour cacher le 1er */
    z-index: 1055 !important;
}
.modal.show + .modal.show {
    z-index: 1060 !important; /* Met la 2ème modale au-dessus */
}

/* 2. Boutons "Light" (Bordure fine) */
.btn-outline-thin {
    border: 1px solid #000 !important; /* Bordure fine */
    font-weight: 500 !important; /* Moins gras */
    color: #000;
    transition: all 0.2s;
}
.btn-outline-thin:hover {
    background-color: #000;
    color: #fff;
    transform: translateY(-2px);
}

/* 3. Nouveau Design du Dé (Rouleau Horizontal) */
.dice-container-2d {
    width: 100px;
    height: 100px;
    margin: 20px auto;
    overflow: hidden;
    background: #f8f9fa;
    border: 2px solid #333;
    border-radius: 16px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.1);
    position: relative;
}

.dice-strip {
    display: flex; /* Horizontal */
    width: 1000%; /* Large pour contenir la répétition */
    height: 100%;
    transition: transform 3s cubic-bezier(0.1, 0.9, 0.2, 1); /* Effet freinage */
}

.dice-face-2d {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 800;
    color: #333;
    flex-shrink: 0;
}

/* Indicateur de sélection (Triangle) */
.dice-indicator {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #dc3545;
    z-index: 10;
}

/* --- WINNER V4 : BOUTONS DE CRÉATION PREMIUM --- */

.mode-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    position: relative;
    overflow: hidden;
}

.mode-card:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    border-color: #000;
}

/* Bordure colorée à gauche pour distinguer les modes */
.mode-card.multi { border-left: 6px solid #212529; }
.mode-card.solo { border-left: 6px solid #dc3545; }

/* Conteneur de l'icône */
.mode-icon-box {
    width: 55px;
    height: 55px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
    margin-right: 15px;
}

.bg-icon-dark { background-color: #2c3e50; color: #212529; }
.bg-icon-danger { background-color: #fff5f5; color: #dc3545; }

/* Flèche d'action à droite */
.action-arrow {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #f1f3f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    transition: background 0.2s;
}
.mode-card:hover .action-arrow {
    background: #000;
    color: #fff;
}

/* Carte spécifique pour l'historique ou "Ajouter" */
.border-dashed {
    border-style: dashed !important;
    border-width: 2px !important;
    border-color: #dee2e6 !important;
}
.border-dashed:hover {
    border-color: var(--primary-color) !important;
    background-color: #f8f9fa !important;
}

/* --- ACCUEIL VISITEUR (LANDING OPTIMISÉE) --- */
.hero-slogan {
    font-size: 2.2rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -1px;
}
.hero-micro-copy {
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 25px;
}
.btn-action-unique {
    background: linear-gradient(45deg, #000000, #333333);
    color: #fff;
    border: none;
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: 700;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    transition: transform 0.2s;
}
.btn-action-unique:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0,0,0,0.25);
    color: #ffd700; /* Touche dorée au survol */
}
.btn-secondary-link {
    color: #6c757d;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 15px;
    display: inline-block;
}

/* --- DASHBOARD : SCROLL WINNER --- */
.dashboard-winner-scroll {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding: 10px 5px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.dashboard-winner-scroll::-webkit-scrollbar { display: none; }

.mini-winner-card {
    min-width: 220px;
    background: #fff;
    border: 1.5px solid #eee;
    /*border-left: 4px solid #dc3545; /* Rappel X-Winner Rouge */
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.03);
    cursor: pointer;
    transition: transform 0.2s;
}
.mini-winner-card:hover { transform: translateY(-3px); }

/* --- DASHBOARD : SCROLL QUIZ SUGGESTIONS --- */
.quiz-suggestion-card {
    min-width: 200px;
    min-height: 130px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 10px;
    margin-right: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;

}
.quiz-suggestion-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
.quiz-domain-badge {
    font-size: 0.65rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #6c757d;
    margin-bottom: 5px;
    display: block;
}
.quiz-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #212529;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- DASHBOARD : SUGGESTIONS QUIZ (SCROLL) --- */
.quiz-suggestion-card {
    min-width: 220px;
    max-width: 220px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 12px;
    margin-right: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100px;
}

.quiz-suggestion-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary-color);
    box-shadow: 0 5px 10px rgba(0,0,0,0.05);
}

.quiz-suggestion-card.sponsored {
    background: #f0fff4; /* Fond vert très clair */
    border-color: #d1e7dd;
}

.quiz-domain-badge {
    font-size: 0.65rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #adb5bd;
    margin-bottom: 5px;
}

.quiz-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #343a40;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Max 2 lignes */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.quiz-arrow {
    align-self: flex-end;
    font-size: 0.8rem;
    color: var(--primary-color);
}

/* --- DOMAINE V2 : DESIGN MODERNE --- */

/* Barre de recherche flottante */
.search-bar-modern {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 50px;
    padding: 5px 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}
.search-bar-modern:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.search-input-modern {
    border: none;
    outline: none;
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    color: #333;
}

/* Scroll Horizontal des Domaines (Chips) */
.domain-scroll-wrapper {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 10px 5px 15px 5px; /* Espace pour l'ombre */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.domain-scroll-wrapper::-webkit-scrollbar { display: none; }

/* Style des Chips (Boutons Domaines) */
.domain-chip {
    white-space: nowrap;
    padding: 10px 20px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid #e9ecef;
    color: #495057;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    display: flex;
    align-items: center;
    gap: 8px;
}
.domain-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.05);
    background-color: #f8f9fa;
}
.domain-chip.active {
    background-color: #212529; /* Noir Premium */
    color: #fff;
    border-color: #212529;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Carte de Résultat Quiz */
.quiz-result-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 15px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.01);
    position: relative;
    overflow: hidden;
}
.quiz-result-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border-color: #e9ecef;
}
.quiz-result-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15%;
    height: 70%;
    width: 4px;
    background-color: #e9ecef; /* Bordure décorative gauche */
    border-radius: 0 4px 4px 0;
}
.quiz-result-card.sponsored {
    background: linear-gradient(to right, #fafffc, #fff);
    border-color: #d1e7dd;
}
.quiz-result-card.sponsored::before { background-color: #198754; }
/* --- MENU BURGER DESIGN (Asymétrique) --- */
.navbar-toggler {
    border: none !important; /* Enlève la bordure carrée moche */
    box-shadow: none !important; /* Enlève le halo bleu au clic */
    padding: 0;
}

.custom-hamburger {
    width: 30px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end; /* Aligne les barres à droite pour l'effet escalier */
    cursor: pointer;
}

.custom-hamburger span {
    display: block;
    height: 3px;
    background-color: #212529; /* Noir profond */
    border-radius: 10px; /* Bords ronds */
    transition: all 0.3s ease-in-out;
}

/* Les 3 barres de longueurs différentes */
.custom-hamburger span:nth-child(1) { width: 100%; } /* Longue */
.custom-hamburger span:nth-child(2) { width: 60%; }  /* Courte */
.custom-hamburger span:nth-child(3) { width: 80%; }  /* Moyenne */

/* Effet au survol : elles s'alignent toutes */
.navbar-toggler:hover .custom-hamburger span {
    width: 100%;
    background-color: var(--primary-color);
}


/* --- BOTTOM NAVIGATION "SEXY" (Glassmorphism) --- */
.navbar.fixed-bottom {
    background: rgba(255, 255, 255, 0.9); /* Fond blanc semi-transparent */
    backdrop-filter: blur(10px); /* Effet de flou iPhone-like */
    border-top: 1px solid rgba(0,0,0,0.05); /* Bordure ultra fine */
    box-shadow: 0 -5px 20px rgba(0,0,0,0.03); /* Ombre douce qui remonte */
    padding-bottom: 15px; /* Espace pour les barres de geste iPhone */
    padding-top: 10px;
    border-radius: 20px 20px 0 0; /* Arrondi sur les coins du haut */
}

.bottom-nav-link {
    color: #adb5bd; /* Gris clair par défaut */
    position: relative;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Rebond fluide */
}

/* L'icône grossit légèrement quand active */
.bottom-nav-link.active {
    color: #212529; /* Noir actif */
    transform: translateY(-5px); /* Remonte légèrement */
}

.bottom-nav-link i {
    font-size: 1.4rem;
    margin-bottom: 2px;
    display: block;
    transition: transform 0.2s;
}

/* Modification pour afficher le texte TOUT LE TEMPS */
.bottom-nav-link small {
    font-size: 0.65rem; /* Un peu plus petit pour que ça tienne */
    font-weight: 600;
    letter-spacing: 0px; /* Plus serré pour éviter les retours à la ligne */
    opacity: 1 !important; /* TOUJOURS VISIBLE */
    transform: translateY(0) !important; /* PAS DE DÉCALAGE */
    display: block;
    margin-top: 2px;
}

/* L'icône doit être un peu plus haute pour laisser la place au texte */
.bottom-nav-link i {
    font-size: 1.3rem; /* Légèrement réduit pour l'équilibre */
    margin-bottom: 0;
    display: block;
    line-height: 1;
}

/* Ajustement du bouton central pour qu'il s'aligne bien avec le texte */
.nav-item.center-btn {
    margin-top: -35px; /* On le remonte un peu plus */
}

/* On affiche le texte seulement quand c'est actif pour un look très propre */
.bottom-nav-link.active small {
    opacity: 1;
    transform: translateY(0);
}
/* --- BOTTOM NAVIGATION "SEXY" --- */

/* ... (Le début reste pareil) ... */

/* 1. RETOUR DU POINT ROUGE (INDICATEUR ACTIF) */
.bottom-nav-link.active::after {
    content: '';
    position: absolute;
    top: 5px; /* Positionné près de l'icône */
    right: 30%; /* Un peu décalé */
    width: 6px;
    height: 6px;
    background-color: #dc3545; /* Rouge */
    border-radius: 50%;
    border: 1px solid #fff;
    opacity: 1;
}

/* 2. STYLE DU BOUTON WINNER (CENTRAL) */
/* Par défaut (Inactif) : Blanc avec bordure noire */
.center-btn .rounded-circle {
    background-color: #fff !important; 
    color: #212529 !important;
    border: none !important;
    transition: all 0.3s ease;
}

/* Quand Actif : Noir plein */
.center-btn .nav-link.active .rounded-circle {
    background-color: #212529 !important;
    color: #fff !important;
    border-color: #212529 !important;
    transform: scale(1.1); /* Lier grossissement */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}

/* On cache le petit point rouge spécifiquement pour le gros bouton central (pas besoin) */
.center-btn .nav-link.active::after {
    display: none;
}

/* --- NAVBAR HAUT SEXY (PC & Mobile) --- */

/* 1. Le Conteneur (Glassmorphism) */
.navbar-sexy {
    background: rgba(255, 255, 255, 0.92) !important; /* Blanc translucide */
    backdrop-filter: blur(12px); /* Flou d'arrière-plan */
    border-bottom: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 4px 20px rgba(0,0,0,0.03); /* Ombre très douce */
    transition: all 0.3s ease;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

/* 2. Le Logo */
.navbar-brand img {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.navbar-brand:hover img {
    transform: scale(1.08) rotate(-2deg); /* Petit effet sympa au survol */
}

/* 3. Les Liens (Desktop) */
.nav-link-sexy {
    font-weight: 600;
    color: #495057 !important;
    font-size: 0.95rem;
    padding: 0.5rem 1rem !important;
    margin: 0 5px;
    border-radius: 50px;
    transition: all 0.3s ease;
    position: relative;
}

.nav-link-sexy:hover, .nav-link-sexy.active {
    color: #000 !important;
    background-color: rgba(0,0,0,0.04);
}

/* Petit point sous le lien actif */
.nav-link-sexy.active::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background-color: var(--bg-dark);
    border-radius: 50%;
}

/* 4. Dropdown Utilisateur (Le Menu Flottant) */
.dropdown-menu-sexy {
    border: none;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    padding: 10px;
    margin-top: 15px !important; /* Décalage vers le bas */
    animation: slideDown 0.3s ease;
}

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

.dropdown-item-sexy {
    border-radius: 10px;
    padding: 10px 15px;
    font-weight: 500;
    transition: background 0.2s;
}
.dropdown-item-sexy:hover {
    background-color: #f8f9fa;
    color: var(--primary-color);
}
.dropdown-item-sexy i {
    opacity: 0.7;
    margin-right: 10px;
}

/* 5. Boutons Connexion/Inscription (Gradient) */
.btn-login-sexy {
    background: #fff;
    color: #000;
    border: 1px solid #e0e0e0;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 50px;
    transition: all 0.2s;
}
.btn-login-sexy:hover {
    border-color: #000;
    background: #f8f9fa;
}

.btn-register-sexy {
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
    color: #fff !important;
    font-weight: 700;
    padding: 8px 25px;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    border: none;
    transition: transform 0.2s;
}
.btn-register-sexy:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

/* Badge Notification Desktop */
.notif-badge-desktop {
    top: 7px !important;
    right: 7px !important;
    border: 3px solid #fff;
}
/* --- FINITIONS SEXY V2 --- */

/* Effet de brillance subtile sur les cartes */
.card-sexy-light {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    backdrop-filter: blur(5px);
    transition: transform 0.2s ease;
}
.card-sexy-light:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

/* Boutons "Soft" (Moins agressifs que btn-dark) */
.btn-soft-dark {
    background-color: #2c3e50; /* Un gris-bleu très foncé, plus classe que #000 */
    color: #fff;
    border: none;
    box-shadow: 0 4px 10px rgba(44, 62, 80, 0.2);
}
.btn-soft-dark:hover {
    background-color: #1a252f;
    color: #fff;
    transform: scale(1.02);
}

/* Titres de section élégants */
.section-title-sexy {
    font-size: 0.85rem;
    font-weight: 700;
    color: #95a5a6; /* Gris doux */
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1rem;
    padding-left: 5px;
    border-left: 3px solid var(--primary-color); /* Petite touche de couleur */
    line-height: 1;
}




.hover-bg-light:hover {
    background-color: #f8f9fa !important;
    transition: background-color 0.2s ease;
}

/* --- CARTES TOURNOIS PREMIUM (Version Chaude & Vibrante) --- */
.arena-card {
    border: none;
    border-radius: 24px; /* Plus arrondi */
    color: white;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.arena-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

/* Gradients Chauds et Modernes */
.bg-gradient-sprint {
    /* Orange vibrant vers Rouge Solaire */
    background: linear-gradient(135deg, #FF8008 0%, #FFC837 100%);
}
.bg-gradient-marathon {
    /* Bleu Profond vers Cyan chaud */
    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%); 
}
.bg-gradient-titan {
    /* Violet Royal vers Rose Intense */
    background: linear-gradient(135deg, #8E2DE2 0%, #4A00E0 100%);
}

/* Effet de brillance subtil */
.arena-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

/* Contenu */
.arena-card .card-body {
    position: relative;
    z-index: 2;
    padding: 1.8rem;
    display: flex;
    flex-direction: column;
}

/* Titres */
.arena-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    text-transform: capitalize; /* Première lettre majuscule seulement */
    letter-spacing: -0.5px;
    margin-bottom: 0.2rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* Badges intégrés */
.arena-badge {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(5px);
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255,255,255,0.2);
}

/* Zone Cagnotte */
.pot-container {
    
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 1.5rem;
    color: white !important;
    
}
.pot-amount {
    font-size: 1.7rem; /* Ajusté pour ne pas casser */
    font-weight: 900;
    color:white;
    line-height: 1;
}
.pot-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: whitesmoke;
    font-weight: 700;
}
.pot-potential {
    font-size: 0.7rem;
    color: whitesmoke; /* Orange pour le potentiel */
    font-weight: 600;
    margin-top: 4px;
    border-top: 1px dashed #eee;
    padding-top: 4px;
}

/* Boutons */
.btn-arena-join {
    background: rgba(245, 250, 255, 0.3);
    color: whitesmoke;
    border: none;
    border-radius: 32px;
    padding: 14px 20px; /* Plus épais */
    font-weight: 700;
    font-size: 1rem;
    width: 100%;
    transition: all 0.2s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    text-transform: none; /* Pas de majuscules forcées */
}
.btn-arena-join:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
    color: #000;
    background: #fff;
}
.btn-arena-play {
    background: #27ae60; /* Vert action */
    color: white;
    border: none;
    border-radius: 12px;
    padding: 14px 20px;
    font-weight: 700;
    width: 100%;
    box-shadow: 0 4px 10px rgba(39, 174, 96, 0.4);
    animation: pulse-green 2s infinite;
}
.btn-arena-play:hover {
    background-color: #219150;
    color: white;
}

@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(39, 174, 96, 0); }
    100% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0); }
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  75% { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}
.shake-anim { animation: shake 0.4s ease-in-out; }
.scale-105 { transform: scale(1.05); }
.ring-2 { box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.3) !important; }

/* --- MENU DES SÉRIES (CHAPITRES) --- */
.series-card {
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    transition: transform 0.2s, box-shadow 0.2s;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}
.series-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border-color: var(--primary-color);
}
.series-card.locked {
    opacity: 0.6;
    background-color: #f8f9fa;
    cursor: not-allowed;
    pointer-events: none; /* Empêche le clic */
}
.series-card.locked::after {
    content: '\F4F8'; /* Cadenas Bootstrap Icons */
    font-family: 'bootstrap-icons';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: #dee2e6;
}
.series-badge {
    position: absolute;
    top: 10px; right: 10px;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 20px;
}

/* --- RÉPARATION ANIMATION DÉ --- */
/* On crée une animation de défilement infini très rapide */
@keyframes rollDiceAnimation {
    0% { transform: translateX(0); }
    100% { transform: translateX(-600px); } /* Défilement de 6 faces de 100px */
}

.cube-dice.rolling .dice-strip {
    /* Animation fluide et infinie */
    animation: rollDiceAnimation 0.5s linear infinite; 
}

/* --- VIBRATION (Juste pour info, géré par JS) --- */
.vibrate-effect {
    animation: shake 0.5s;
}

/* --- CARTES TOURNOIS : DESIGN "CLEAN & PRO" --- */
.arena-card-clean {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 24px;
    padding: 0;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.arena-card-clean:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    border-color: #e9ecef;
}

/* En-tête de carte subtil */
.arena-header {
    padding: 1.5rem;
    background: #fff;
    border-bottom: 1px solid #f8f9fa;
    text-align: center;
}

/* Couleurs d'accentuation (Juste pour les icônes/textes) */
.accent-sprint { color: #FF8008; }
.bg-sprint-light { background-color: #fff8f3; }
.btn-sprint { background-color: #FF8008; color: white; border: none; }

.accent-marathon { color: #007bff; }
.bg-marathon-light { background-color: #f0f7ff; }
.btn-marathon { background-color: #007bff; color: white; border: none; }

.accent-titan { color: #6f42c1; }
.bg-titan-light { background-color: #f8f4fc; }
.btn-titan { background-color: #6f42c1; color: white; border: none; }

/* Typographie */
.arena-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: -0.5px;
    margin-top: 0.5rem;
    color: #2c3e50;
}
.arena-meta {
    font-size: 0.75rem;
    font-weight: 600;
    color: #95a5a6;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Indicateur de Rang intégré */
.user-rank-badge {
    background-color: #212529;
    color: #ffd700;
    padding: 5px 12px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 0.8rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Bouton d'action */
.btn-arena-action {
    width: 100%;
    padding: 14px;
    border-radius: 16px;
    font-weight: 700;
    font-size: 0.95rem;
    transition: transform 0.2s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.btn-arena-action:hover {
    transform: scale(1.02);
    opacity: 0.95;
}

/* --- STATS DÉTAILLÉES (SÉRIES) --- */
.stat-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 5px;
}
.stat-pill.success { background: #d1e7dd; color: #0f5132; }
.stat-pill.danger { background: #f8d7da; color: #842029; }
.stat-pill.neutral { background: #e2e3e5; color: #41464b; }

.series-card.completed {
    border-color: #198754;
    background-color: #f8fffb;
}
.series-card.completed::after {
    display: none; /* Pas de cadenas */
}

/* --- DESIGN PREMIUM & CLEAN --- */

/* 1. CARTES ARÈNES (Accueil) */
.arena-card-premium {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.15); /* Ombre diffuse classe */
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    background: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.arena-card-premium:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px -10px rgba(0,0,0,0.25);
}

/* En-tête Gradient Subtil (Pas criard) */
.arena-header-gradient {
    padding: 1.5rem;
    color: white;
    position: relative;
}
.grad-sprint { background: linear-gradient(135deg, #111111 0%, #2c3e50 100%); } /* Noir profond */
.grad-marathon { background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); } /* Bleu pétrole sérieux */
.grad-titan { background: linear-gradient(135deg, #4b1248 0%, #f0c27b 100%); } /* Or & Pourpre (Luxe) */

/* Typographie Arène */
.arena-title-clean {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: -0.5px;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.arena-badge-clean {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    display: inline-block;
    margin-bottom: 0.5rem;
}

/* Corps de la carte */
.arena-body-clean {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Chiffres Cagnotte */
.pot-clean {
    font-size: 1.8rem;
    font-weight: 800;
    color: #212529;
    letter-spacing: -1px;
    line-height: 1;
}
.pot-label-clean {
    font-size: 0.7rem;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}

/* Boutons PRO */
.btn-premium-join {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #333;
    transition: all 0.2s;
}
.btn-premium-join:hover {
    background: #f8f9fa;
    border-color: #000;
}
.btn-premium-play {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    background: #212529; /* Noir mat */
    color: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.btn-premium-play:hover {
    background: #000;
    transform: scale(1.02);
}

/* 2. WIDGET CLASSEMENT (Accueil) */
.ranking-widget-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    padding: 1.5rem;
}
.ranking-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 0;
    border-bottom: 1px solid #f9f9f9;
}
.ranking-row:last-child { border-bottom: none; }
.ranking-label {
    font-size: 0.9rem;
    color: #555;
    font-weight: 500;
    display: flex;
    align-items: center;
}
.ranking-value {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: #212529;
}
/* Petit point de couleur au lieu d'icône moche */
.dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
}
.dot-sprint { background-color: #FF8008; }
.dot-marathon { background-color: #007bff; }
.dot-titan { background-color: #6f42c1; }

.btn-link-clean {
    text-decoration: none;
    color: #888;
    font-size: 0.8rem;
    font-weight: 600;
    transition: color 0.2s;
}
.btn-link-clean:hover { color: #000; }

/* 3. HEADER JEU (Séries) */
.game-header-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.stat-box-clean {
    text-align: center;
    padding: 0 15px;
}
.stat-val-clean {
    font-size: 1.2rem;
    font-weight: 800;
    color: #2c3e50;
    line-height: 1;
}
.stat-lbl-clean {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #aaa;
    letter-spacing: 0.5px;
    margin-top: 4px;
}
.btn-view-rank {
    font-size: 0.8rem;
    color: #2c3e50;
    text-decoration: none;
    border: 1px solid #eee;
    padding: 6px 15px;
    border-radius: 50px;
    transition: all 0.2s;
}
.btn-view-rank:hover {
    background: #f8f9fa;
    border-color: #ccc;
}

/* --- AGORA & WHATSAPP STYLES --- */
/* --- BOUTON WHATSAPP DISCRET --- */
.whatsapp-fab {
    position: fixed;
    bottom: 85px; /* Juste au-dessus du menu du bas */
    right: 15px;  /* Collé à droite mais pas trop */
    width: 35px;  /* Beaucoup plus petit (avant 60px) */
    height: 35px;
    background-color: #25D366; /* Vert officiel WhatsApp */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 100%; /* Icône plus petite */
    z-index: 9999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* Ombre légère */
    transition: transform 0.2s, opacity 0.2s;
    text-decoration: none;
    opacity: 0.9; /* Légèrement transparent pour moins gêner */
}

.whatsapp-fab:hover {
    transform: scale(1.1);
    opacity: 1;
    color: white;
}
/* Bouton Flottant WhatsApp */


/* Style de la zone de texte Agora */
#agoraInput:focus {
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(74, 105, 189, 0.1);
    border-color: #4a69bd;
}

/* Cartes de messages */
#agoraFeed .card {
    transition: transform 0.2s;
    border: 1px solid #f0f0f0 !important;
}
#agoraFeed .card:hover {
    background-color: #fcfcfc;
}

/* Initiales Avatar */
.rounded-circle.bg-light.border {
    font-family: 'Poppins', sans-serif;
    color: var(--primary-color) !important;
    background-color: #e7f1ff !important;
    border-color: #e7f1ff !important;
}

/* --- CORRECTION PROFIL PUBLIC (VISIBILITÉ) --- */

/* 1. Le Nom d'utilisateur en BLANC PUR */
#publicProfileModal .modal-header #pp-username {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Petite ombre pour détacher du fond */
}

/* 2. Le Badge en style "Verre" (Texte blanc + Fond transparent) */
#publicProfileModal .modal-header #pp-badge {
    color: #ffffff !important;                 /* Texte Blanc */
    background-color: rgba(255, 255, 255, 0.2) !important; /* Fond blanc transparent (20%) */
    border: 1px solid rgba(255, 255, 255, 0.5); /* Bordure fine blanche */
    backdrop-filter: blur(4px);                /* Effet de flou derrière */
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* --- ASSISTANT INTELLIGENT STYLES --- */

/* 1. Le Bouton qui respire */
.btn-assistant-pulse {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Dégradé Violet/Bleu Profond */
    color: white;
    border: none;
    border-radius: 20px;
    padding: 15px 20px;
    width: 100%;
    text-align: left;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(118, 75, 162, 0.3);
    transition: transform 0.3s ease;
    animation: breathing 3s infinite ease-in-out;
}

.btn-assistant-pulse:hover {
    transform: translateY(-3px);
    color: white;
}

.btn-assistant-pulse .assistant-icon {
    font-size: 2rem;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

@keyframes breathing {
    0% { box-shadow: 0 10px 20px rgba(118, 75, 162, 0.3); transform: scale(1); }
    50% { box-shadow: 0 20px 40px rgba(118, 75, 162, 0.5); transform: scale(1.02); }
    100% { box-shadow: 0 10px 20px rgba(118, 75, 162, 0.3); transform: scale(1); }
}

/* 2. La Modale Chat (Style iPhone/Message) */
.chat-bubble-bot {
    background-color: #f1f0f0;
    color: #000;
    border-radius: 18px 18px 18px 4px; /* Coin bas gauche carré */
    padding: 15px;
    margin-bottom: 15px;
    font-size: 0.95rem;
    line-height: 1.5;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.chat-bubble-user {
    background-color: #4a69bd;
    color: white;
    border-radius: 18px 18px 4px 18px; /* Coin bas droit carré */
    padding: 10px 20px;
    font-size: 0.9rem;
    display: inline-block;
    margin-bottom: 10px;
    float: right;
    clear: both;
    cursor: pointer;
    transition: transform 0.2s;
    border: none;
}
.chat-bubble-user:hover {
    transform: scale(1.05);
    background-color: #3c55a0;
}

.assistant-avatar-lg {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin: 0 auto 15px auto;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* --- ASSISTANT INTELLIGENT V2 --- */
/* --- BOUTON ASSISTANT (Super Pulse) --- */
.btn-assistant-compact {
    /* Fond dynamique (Orange -> Violet -> Bleu) */
    background-image: linear-gradient(to right, #FF8008 0%, #6f42c1 50%, #007bff 100%);
    background-size: 200% auto;
    margin-bottom: 5px;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 12px 35px; /* Un peu plus large pour l'effet */
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    
    /* DOUBLE ANIMATION : Couleurs qui bougent + Battement de cœur */
    animation: gradient-move 3s infinite alternate, super-pulse 2s infinite;
}

.btn-assistant-compact:hover {
    color: white;
    transform: scale(1.05); /* Grossit encore plus au survol */
    cursor: pointer;
}

/* 1. Animation des couleurs */
@keyframes gradient-move {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* 2. Animation du "Pulse" et de la "Bordure qui rayonne" */
@keyframes super-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(111, 66, 193, 0.7); /* Ombre violette collée */
    }
    70% {
        transform: scale(1.03); /* Grossit légèrement */
        box-shadow: 0 0 0 10px rgba(111, 66, 193, 0); /* L'ombre s'éloigne et disparaît */
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(111, 66, 193, 0);
    }
}

/* 2. Chat : Boutons de choix (Utilisateur) */
.chat-option-btn {
    background-color: white;
    color: #4a69bd;
    border: 2px solid #4a69bd;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 8px;
    margin-left: auto; /* Aligner à droite */
    display: block;
    cursor: pointer;
    transition: all 0.2s;
    animation: pulse-option 1.5s infinite;
    text-align: right;
    max-width: 90%;
}
.chat-option-btn:hover {
    background-color: #4a69bd;
    color: white;
    transform: translateX(-5px);
}

@keyframes pulse-option {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* 3. Chat : Boutons d'Action (Bot - WhatsApp/Jouer) */
.chat-action-card {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 15px;
    margin-top: 10px;
    border-left: 4px solid;
    text-align: center;
}
.chat-action-card.whatsapp { border-color: #25D366; }
.chat-action-card.game { border-color: #ffc107; }

.btn-chat-action {
    display: block;
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
    margin-top: 10px;
    transition: transform 0.2s;
}
.btn-chat-action:hover { transform: scale(1.02); }

.bg-whatsapp { background-color: #25D366; color: white; }
.bg-game { background-color: #212529; color: #ffd700; }

/* Scroll automatique fluide */
#assistant-chat-area {
    scroll-behavior: smooth;
    max-height: 400px;
    overflow-y: auto;
    padding-bottom: 20px; /* Espace pour le dernier message */
}

/* --- AMÉLIORATION CHAT ASSISTANT --- */

/* Zone de chat qui prend toute la place disponible */
#assistant-chat-area {
    background-color: #ffffff;
    /* Petit fond subtil si tu veux */
    /* background-image: url('data:image/svg+xml,...'); */ 
}

/* Bulle Utilisateur (Droite, Bleu) */
.chat-option-btn {
    background: #4a69bd; /* Bleu XOO-X */
    color: white;
    border: none;
    border-radius: 20px 20px 5px 20px;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: right;
    margin-bottom: 8px;
    cursor: pointer;
    transition: transform 0.2s;
    box-shadow: 0 2px 5px rgba(74, 105, 189, 0.3);
    max-width: 90%;
}
.chat-option-btn:hover {
    transform: scale(1.02);
    background: #3c55a0;
    color: white;
}

/* Bulle Bot (Gauche, Gris) */
.bg-light.text-dark {
    background-color: #f0f2f5 !important;
    color: #050505 !important;
}

/* --- ASSISTANT : ÉLÉMENTS RICHES --- */

/* 1. Bouton WhatsApp "Radioactif" */
.btn-chat-whatsapp {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 12px 25px;
    font-weight: 800;
    font-size: 1rem;
    width: 100%;
    margin-top: 10px;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    animation: pulse-green-chat 2s infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.btn-chat-whatsapp:hover { transform: scale(1.02); color: white; }

@keyframes pulse-green-chat {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* 2. Cartes Arènes (Miniatures dans le chat) */
.chat-arena-container {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 10px;
    margin-top: 10px;
    /* Cache scrollbar */
    scrollbar-width: none; 
    -ms-overflow-style: none;
}
.chat-arena-container::-webkit-scrollbar { display: none; }

.chat-arena-card {
    min-width: 200px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    flex-shrink: 0;
}

.chat-arena-title { font-weight: 800; font-size: 1.1rem; margin-bottom: 5px; text-transform: uppercase; }
.chat-arena-info { font-size: 0.75rem; color: #666; margin-bottom: 10px; }
.chat-btn-join {
    font-size: 0.8rem; 
    padding: 8px 0; 
    width: 100%; 
    border-radius: 20px; 
    font-weight: 700;
}

/* Couleurs spécifiques */
.border-sprint { border-top: 4px solid #FF8008; }
.text-sprint { color: #FF8008; }
.btn-sprint { background-color: #FF8008; color: white; border: none; }

.border-marathon { border-top: 4px solid #007bff; }
.text-marathon { color: #007bff; }
.btn-marathon { background-color: #007bff; color: white; border: none; }

.border-titan { border-top: 4px solid #6f42c1; }
.text-titan { color: #6f42c1; }
.btn-titan { background-color: #6f42c1; color: white; border: none; }

/* 3. Bouton Standard (Retour, etc.) */
.chat-btn-standard {
    background: #f8f9fa;
    border: 1px solid #ddd;
    color: #333;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 5px;
    display: inline-block;
}

/* --- BOUTONS DÉTAILS (GRADIENT) --- */


/* --- BOUTONS ARÈNES (SWAP) --- */

/* 1. Boutons REJOINDRE (Pleins & Colorés) */
/* SPRINT : Vitesse (Bleu gris vers Cyan électrique) */
.btn-join-sprint {
    background: linear-gradient(135deg, #2c3e50 0%, #00d2ff 100%);
    color: white; 
    border: none;
    box-shadow: 0 4px 15px rgba(0, 210, 255, 0.3); /* Ombre bleutée */
}

/* MARATHON : Endurance (Bleu nuit très sombre vers Bleu Roi solide) */
.btn-join-marathon {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 15px rgba(44, 83, 100, 0.3); /* Ombre profonde */
}

/* TITAN : Puissance (Gris sombre vers Indigo/Violet impérial) */
.btn-join-titan {
    background: linear-gradient(135deg, #2c3e50 0%, #6f42c1 100%);
    color: white; 
    border: none;
    box-shadow: 0 4px 15px rgba(111, 66, 193, 0.3); /* Ombre violette */
}
/* Style commun bouton Rejoindre */
.btn-arena-join-filled {
    border-radius: 12px;
    padding: 12px 15px;
    font-weight: 800;
    font-size: 100%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    
    letter-spacing: 0.5px;
    flex-grow: 1; /* Prend toute la place disponible */
}
.btn-arena-join-filled:hover {
    transform: translateY(-2px);
    color: white;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

/* 2. Bouton DÉTAILS (Blanc/Outline) */
.btn-details-outline {
    background: transparent;
    border: 2px solid #e9ecef;
    color: #6c757d;
    border-radius: 12px;
    padding: 12px 15px;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-details-outline:hover {
    background: #f8f9fa;
    border-color: #dee2e6;
    color: #000;
}

/* Style pour la liste des règles dans la modale */
.rule-item {
    background-color: #f8f9fa;
    border-left: 4px solid #ccc;
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 0 8px 8px 0;
    font-size: 0.9rem;
}
.rule-item.focus { border-color: var(--primary-color); background-color: #f0f8ff; }
.rule-item i { font-size: 1.2rem; margin-right: 10px; vertical-align: middle; }

/* --- JEU DE DÉS (Style Rouleau) --- */
.dice-container-2d {
    width: 100px;
    height: 100px;
    margin: 20px auto;
    overflow: hidden; /* Cache ce qui dépasse */
    background: #ffffff;
    border: 3px solid #333;
    border-radius: 16px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.1), 0 10px 20px rgba(0,0,0,0.1);
    position: relative;
}

/* Le triangle rouge qui pointe le résultat */
.dice-indicator {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid #dc3545; /* Rouge */
    z-index: 10;
}

/* La bande qui contient les chiffres */
.dice-strip {
    display: flex; /* Alignement horizontal */
    width: max-content; /* S'adapte au contenu */
    height: 100%;
    transform: translateX(0); /* Position de départ */
    /* Transition pour l'arrêt en douceur */
    transition: transform 3s cubic-bezier(0.1, 0.9, 0.2, 1); 
}

/* Chaque face de dé */
.dice-face-2d {
    width: 100px; /* Doit être égal à la largeur du container */
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    font-weight: 800;
    color: #212529;
    flex-shrink: 0;
    border-right: 1px dashed #eee; /* Petit séparateur visuel */
}

/* Animation infinie quand ça tourne */
@keyframes spin-strip {
    0% { transform: translateX(0); }
    100% { transform: translateX(-600px); } /* 6 faces * 100px */
}

.dice-container-2d.rolling .dice-strip {
    animation: spin-strip 0.3s linear infinite; /* Très rapide */
}
/* Animation de rotation RAPIDE avec flou de mouvement */
@keyframes spin-blur {
    0% { transform: translateX(0); filter: blur(0px); }
    50% { filter: blur(2px); } /* Flou au milieu pour la vitesse */
    100% { transform: translateX(-600px); filter: blur(0px); } /* 1 tour complet */
}

/* Classe activée par JS au clic */
.dice-container-2d.rolling .dice-strip {
    animation: spin-blur 0.3s linear infinite; /* Très rapide (0.3s par tour) */
}
/* --- STYLE ULTIMATE (Gradient unifié) --- */
.bg-gradient-ultimate {
    background-image: linear-gradient(to right, #FF8008 0%, #6f42c1 50%, #007bff 100%);
    background-size: 200% auto;
    animation: gradient-move 3s infinite alternate;
    color: white !important;
    border: none !important;
}

/* Application spécifique pour les gros boutons */
.btn-ultimate-action {
    background-image: linear-gradient(to right, #FF8008 0%, #6f42c1 50%, #007bff 100%);
    background-size: 200% auto;
    color: white;
    border: none;
    border-radius: 1rem; /* rounded-4 */
    transition: transform 0.2s, box-shadow 0.2s;
    animation: gradient-move 3s infinite alternate, super-pulse 3s infinite; /* Pulse + Couleur */
    box-shadow: 0 10px 20px rgba(111, 66, 193, 0.4);
}

.btn-ultimate-action:hover {
    transform: translateY(-3px) scale(1.02);
    color: white;
    box-shadow: 0 15px 30px rgba(111, 66, 193, 0.6);
}

/* Petit ajustement pour le texte secondaire dans le bouton ultimate */
.btn-ultimate-action .text-white-50 {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* --- BOUTON ULTIMATE PILL (Style Assistant) --- */
.btn-ultimate-pill {
    /* Le fameux dégradé Orange -> Violet -> Bleu */
    background-image: linear-gradient(to right, #FF8008 0%, #6f42c1 50%, #007bff 100%);
    background-size: 200% auto;
    color: white !important;
    border: none;
    border-radius: 50px; /* Arrondi Pilule parfait */
    padding: 15px 30px;
    box-shadow: 0 10px 25px rgba(111, 66, 193, 0.4);
    transition: transform 0.2s;
    animation: gradient-move 3s infinite alternate, super-pulse 2s infinite; /* Double animation */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    width: 100%;
}

.btn-ultimate-pill:hover {
    transform: scale(1.03);
    box-shadow: 0 15px 35px rgba(111, 66, 193, 0.6);
}

/* Ajustement du texte à l'intérieur */
.btn-ultimate-pill .main-text {
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}
.btn-ultimate-pill .sub-text {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    margin-top: 4px;
    display: block;
}

/* Force le loader générique à être au-dessus de tout le reste (Modales Bootstrap = 1055 max) */
#loadingModalGeneric {
    z-index: 1080 !important;
}

/* Le fond noir du loader doit aussi être au-dessus des autres fonds noirs */
#loadingModalGeneric + .modal-backdrop {
    z-index: 1075 !important;
}

/* Animation douce pour le texte du loader */
.animate-pulse {
    animation: pulse-text 1.5s infinite;
}
@keyframes pulse-text {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* --- HIERARCHIE DES MODALES (CRITIQUE) --- */

/* Niveau 1 : Le Jeu et les Menus (Standard Bootstrap = 1055) */
.modal { z-index: 1055; }

/* Niveau 2 : Le Loader (Doit couvrir le jeu) */
#loadingModalGeneric { z-index: 1070 !important; }
/* Le fond noir du loader */
#loadingModalGeneric + .modal-backdrop { z-index: 1065 !important; }

/* Niveau 3 : Les Erreurs (Doivent couvrir LE LOADER) */
#errorModalGeneric, #infoModalGeneric { z-index: 1090 !important; }
/* Le fond noir des erreurs */
#errorModalGeneric + .modal-backdrop, 
#infoModalGeneric + .modal-backdrop { z-index: 1085 !important; }

/* --- CHAT MODULE STYLES --- */

/* 1. Zone de Chat Fixe (Plein écran mobile) */
.chat-fullscreen-container {
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    width: 100%; 
    height: 100dvh; /* Dynamic Height pour mobile */
    z-index: 2000; /* Au-dessus de tout */
    background: #fff;
    display: flex;
    flex-direction: column;
}

/* 2. Bouton Flottant (Support) */
.whatsapp-fab {
    position: fixed;
    bottom: 90px; /* Au-dessus du menu du bas */
    right: 20px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 1040;
    transition: transform 0.2s, box-shadow 0.2s;
}
.whatsapp-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
}

/* 3. Bulles de message */
.message-bubble-item {
    transition: all 0.3s ease;
}

/* 4. Animation Pulse pour le micro */
.pulse-play-button {
    animation: pulseRed 1.5s infinite;
}
@keyframes pulseRed {
    0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

/* 5. Cursors */
.cursor-pointer { cursor: pointer; }
.hover-scale { transition: transform 0.2s; }
.hover-scale:hover { transform: scale(1.02); }



.btn-condensed-action {
    background: #212529; /* Noir */
    color: white;
    border-radius: 50px;
    padding: 10px 40px; /* Large */
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s;
    border: none;
}
.btn-condensed-action:hover {
    transform: scale(1.03);
    background: #000;
    color: white;
}

/* --- 1. NAVIGATION TABS (100% Largeur, Pas de scroll) --- */
.nav-pills-premium {
    display: flex;
    width: 100%;
    gap: 5px; /* Petit espace entre les boutons */
    padding: 0;
    margin: 0;
    /* On désactive le scroll pour forcer l'affichage sur une ligne */
    overflow-x: visible; 
    flex-wrap: nowrap;
}

.nav-pills-premium .nav-item {
    flex: 1; /* Chaque bouton prend la même largeur */
    text-align: center;
}

.nav-pills-premium .nav-link {
    width: 100%;
    border-radius: 50px;
    padding: 8px 2px; /* Padding latéral très réduit pour faire tenir le texte */
    font-weight: 800;
    font-size: 0.85rem; /* Texte un peu plus petit sur mobile */
    color: #999;
    background-color: transparent;
    border: 1px solid #f0f0f0;
    transition: all 0.2s ease;
    text-transform: capitalize;
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
    overflow: hidden;
    text-overflow: ellipsis; /* Ajoute "..." si vraiment trop long */
}

/* État Actif */
.nav-pills-premium .nav-link.active {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}




/* Ligne 3 : Le Bouton Booster (Jaune/Danger Style) */
.condensed-line-3 {
    margin-top: 5px;
}

/* --- HEADER CONDENSÉ ANIMÉ (Style Assistant) --- */
.ranking-card-condensed {
    /* Le fameux dégradé dynamique */
    background-image: linear-gradient(to right, #FF8008 0%, #6f42c1 50%, #007bff 100%);
    background-size: 200% auto;
    animation: gradient-move 3s infinite alternate;
    
    border-radius: 24px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(111, 66, 193, 0.4); /* Ombre violette lumineuse */
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: white;
    border: none; /* Pas de bordure, le dégradé suffit */
}

/* Ligne 1 : Le Titre / Cagnotte */
.condensed-line-1 {
    font-size: 1.8rem; 
    font-weight: 900;
    color: #fff;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    text-transform: uppercase;
}
.condensed-line-1 .suffix {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-transform: none;
    display: block;
    margin-top: 4px;
    letter-spacing: 0.5px;
}

/* Ligne 2 : Les Stats Joueur */
.condensed-line-2 {
    font-size: 0.95rem;
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.2); /* Fond noir translucide pour lisibilité */
    padding: 8px 15px;
    border-radius: 50px; /* Pillule */
    margin: 0 auto;
    width: fit-content; /* S'adapte au contenu */
    backdrop-filter: blur(5px);
}

.condensed-dot {
    width: 4px; height: 4px;
    background: rgba(255,255,255,0.6);
    border-radius: 50%;
}

/* Ligne 3 : Le Bouton (Blanc pour ressortir sur le dégradé) */
.btn-booster-white {
    background-color: #fff;
    color: #000;
    border: none;
    border-radius: 50px;
    padding: 12px 0;
    width: 100%;
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}
.btn-booster-white:hover {
    background-color: #f8f9fa;
    transform: scale(1.02);
    color: var(--primary-color); /* Petit effet couleur au survol */
}

/* --- SECTION PUBLICITÉ ACCUEIL (Remplacement Winner) --- */
.ad-spotlight-container {
    overflow-x: auto;
    display: flex;
    gap: 15px;
    padding: 10px 5px 20px 5px; /* Espace pour l'ombre */
    scrollbar-width: none; /* Cache scrollbar Firefox */
    -ms-overflow-style: none; /* Cache scrollbar IE */
}
.ad-spotlight-container::-webkit-scrollbar { display: none; } /* Cache scrollbar Chrome */


.ad-card-home:hover { transform: translateY(-5px); }



/* Lien "Voir plus" à la fin du scroll */
.see-more-ads-card {
    min-width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 20px;
    color: var(--primary-color);
    cursor: pointer;
    border: 2px dashed #dee2e6;
}

/* --- DOMAINES SCROLLABLES AVEC FLÈCHES --- */
.domain-scroll-wrapper-enhanced {
    position: relative;
    display: flex;
    align-items: center;
}

/* Conteneur masqué */
.domain-list-scroll {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding: 10px 5px;
    scroll-behavior: smooth; /* Défilement fluide */
    scrollbar-width: none;
    width: 100%;
}
.domain-list-scroll::-webkit-scrollbar { display: none; }

/* Les Cartes Domaines (Jolis Conteneurs) */
.domain-pill-card {
    min-width: 140px; /* Taille fixe pour uniformité */
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 16px;
    padding: 15px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    flex-shrink: 0;
}
.domain-pill-card:hover, .domain-pill-card.active {
    background: var(--primary-color); /* Bleu */
    color: white;
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(74, 105, 189, 0.3);
}
.domain-pill-card i { font-size: 1.5rem; display: block; margin-bottom: 5px; }
.domain-pill-card span { font-weight: 600; font-size: 0.85rem; line-height: 1.2; display: block;}







/* Wrapper pour les pubs avec flèches */
.ad-spotlight-wrapper-scroll {
    position: relative;
    display: flex;
    align-items: center;
}



/* --- CORRECTION FLÈCHES SCROLL (OVERLAY) --- */

/* Le conteneur principal prend toute la largeur */
.ad-spotlight-wrapper-scroll,
.domain-scroll-wrapper-enhanced {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0; /* Plus de padding qui écrase le contenu */
}

/* La liste défilante */
.ad-spotlight-container, 
.domain-list-scroll {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding: 10px 5px 20px 5px; /* Espace pour l'ombre */
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    /* Important : alignement parfait à gauche */
    margin: 0; 
    width: 100%;
}

/* Les Flèches Flottantes (Transparentes & Superposées) */
.scroll-arrow-btn {
    width: 35px; height: 35px;
    border-radius: 50%;
    /* Fond blanc semi-transparent (Glassmorphism léger) */
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(2px);
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: #333;
    transition: all 0.2s;
    
    /* Position ABSOLUE pour flotter au-dessus */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20; /* Au-dessus des cartes */
}

/* Positionnement : Légèrement décalé pour ne pas cacher le tout début */
.scroll-left { left: 5px; }
.scroll-right { right: 5px; }

/* Au survol */
.scroll-arrow-btn:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.15);
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

/* Sur Mobile, on garde les flèches mais discrètes */
@media (max-width: 768px) {
    .scroll-arrow-btn {
        width: 32px; height: 32px;
        opacity: 0.8; /* Encore plus discret */
    }
}



.ad-card-body {
    padding: 12px 15px;
}

/* --- CSS POUR CARTES PUBLICITAIRES MULTI-MÉDIA --- */

.ad-card-home {
    min-width: 270px;
    max-width: 270px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden; /* Important pour que la vidéo ne dépasse pas */
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.2s;
    flex-shrink: 0;
    position: relative; /* Pour positionner les badges */
}


.ad-card-img-top {
    height: 100%;
    width: 100%;
    object-fit: cover; /* Remplit tout l'espace */
    display: block;
}

/* Conteneur des Badges en haut à droite */
.ad-badges-container {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    z-index: 5;
    pointer-events: none; /* Pour cliquer à travers */
}

/* Badge Points (+1 Pt) */
.ad-badge-points {
    background: #28a745;
    color: white;
    font-weight: 800;
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Badge Type Média (Vidéo / Galerie) */
.media-type-badge {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* --- STYLES CARROUSEL INTÉGRÉ (HOME) --- */

/* La zone média prend une taille fixe pour l'uniformité */
.ad-media-wrapper {
    height: 150px; /* Hauteur ajustée pour mobile/desktop */
    width: 100%;
    position: relative;
    background-color: #000;
    overflow: hidden;
}

/* Images et Vidéos remplissent tout */
.ad-media-wrapper img, 
.ad-media-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Coupe l'image pour remplir sans déformer */
}

/* Flèches du Carrousel : Discrètes et transparentes */
.ad-carousel-control {
    width: 15%; /* Zone de clic */
    opacity: 0; /* Caché par défaut */
    transition: opacity 0.2s;
    background: linear-gradient(to right, rgba(0,0,0,0.4), transparent);
}
.carousel-item-next.carousel-item-start,
.carousel-item-prev.carousel-item-end {
  transform: translateX(0);
}
.ad-card-home:hover .ad-carousel-control {
    opacity: 1; /* Apparaît au survol */
}
.ad-carousel-control.right {
    background: linear-gradient(to left, rgba(0,0,0,0.4), transparent);
}

/* Petits indicateurs (points) en bas */
.ad-carousel-indicators {
    margin-bottom: 0.2rem;
}
.ad-carousel-indicators [data-bs-target] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.8);
    border: none;
}
/* --- FIX Z-INDEX (On garde ça pour que ça passe devant) --- */
#textContextModal { z-index: 10060 !important; }
#textContextModal + .modal-backdrop { z-index: 10055 !important; }

/* --- FIX PADDING JEU (COMPACT) --- */
#gameModalBody {
    padding: 0 !important; /* On enlève le padding du conteneur principal */
}
#gameModalBody .card-body {
    padding: 1.25rem !important; /* Padding standard, pas géant */
}
#game-content-wrapper-modal {
    padding: 0;
}

/* --- FIX CONTEXTE/PUB --- */
.partner-modal-content { text-align: left; }
.partner-media-box {
    max-height: 180px; /* Image contenue */
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    background: #000;
    display: flex; align-items: center; justify-content: center;
}
.partner-media-box img { width: 100%; height: 100%; object-fit: cover; }
.context-long-text {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333;
}

/* --- SELLWALL (BANNIÈRE ROUGE MARKETING) --- */
.sellwall-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    z-index: 9999; /* Au-dessus de tout, même de la navbar */
    padding: 10px 15px;
    box-shadow: 0 5px 20px rgba(220, 53, 69, 0.4);
    transform: translateY(-100%); /* Caché par défaut (haut) */
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    justify-content: center;
}

.sellwall-banner.show {
    transform: translateY(0);
}

.sellwall-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 600px;
    gap: 10px;
}

.sellwall-timer {
    background: rgba(255,255,255,0.2);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.sellwall-text {
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
    flex-grow: 1;
}

.sellwall-btn {
    background: white;
    color: #dc3545;
    border: none;
    border-radius: 50px;
    padding: 5px 15px;
    font-weight: 800;
    font-size: 0.8rem;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    white-space: nowrap;
    animation: pulse-red 1.5s infinite;
}

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

/* --- AMÉLIORATION COMPACTE JEU (Accueil & Modal) --- */

/* Réduire l'espace sous la question */
#question-text-flow, 
#question-text-modal {
    margin-bottom: 1rem !important; /* Était environ 1.8rem */
}

/* Réduire l'espace entre les options de réponse */
#answer-options-flow .form-check,
#answer-options-modal .form-check {
    margin-bottom: 0.5rem !important; /* Était 0.9rem */
    padding: 0.75rem 1rem !important; /* Un peu moins de padding interne */
}

/* Ajustement spécifique pour le conteneur In-Flow */
#game-content-flow .card-body {
    padding: 1.5rem !important; /* Un peu moins de gras autour */
}

/* --- DESIGN OLYMPIQUE 2026 --- */

/* La Carte Principale */
.card-olympic {
    border: none;
    border-radius: 24px; /* Arrondi très moderne */
    background: #ffffff;
    box-shadow: 0 15px 40px -10px rgba(17, 24, 39, 0.08); /* Ombre diffuse et douce */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* Effet rebond */
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

.card-olympic:active {
    transform: scale(0.98);
}

/* Header de la carte avec dégradé subtil */
.olympic-header {
    padding: 20px 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Corps de la carte */
.olympic-body {
    padding: 20px 24px;
}

/* Les stats (Cagnotte / Joueurs) dans des bulles */
.olympic-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.olympic-stat-box {
    background: #f8f9fc;
    border-radius: 16px;
    padding: 12px;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.02);
}

.stat-label-oly {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #94a3b8;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.stat-value-oly {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1e293b;
}

/* Le Bouton "Action" */
.btn-olympic {
    width: 100%;
    padding: 16px;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

/* Variantes de boutons */
.btn-oly-primary {
    background: linear-gradient(135deg, #0f172a 0%, #334155 100%); /* Noir/Gris premium */
    color: white;
    box-shadow: 0 8px 20px -5px rgba(15, 23, 42, 0.4);
}

.btn-oly-accent {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); /* Indigo vibrant */
    color: white;
    box-shadow: 0 8px 20px -5px rgba(79, 70, 229, 0.4);
}

.btn-oly-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%); /* Vert émeraude */
    color: white;
    box-shadow: 0 8px 20px -5px rgba(16, 185, 129, 0.4);
}

/* Badges Flottants */
.badge-oly {
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}
.badge-live { background: #fee2e2; color: #ef4444; }
.badge-joined { background: #dcfce7; color: #10b981; }

/* Icône Tournoi Artistique */
.olympic-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-right: 15px;
}
.icon-sprint { background: #fff7ed; color: #f97316; }
.icon-marathon { background: #eff6ff; color: #3b82f6; }
.icon-titan { background: #f5f3ff; color: #8b5cf6; }

/* --- STYLE X-LUCK (Roue & Coffres) --- */
/* --- FIX X-LUCK --- */

/* COFFRES : Pas de bordure jaune par défaut */
.chest-card {
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    border: 2px solid transparent; /* Transparent par défaut */
    /* Ou border: 2px solid #f0f0f0; si tu veux un gris léger */
}
/* Survol uniquement sur PC (pas de sticky hover sur mobile) */
@media (hover: hover) {
    .chest-card:hover {
        background-color: #fff9e6; /* Jaune très clair */
        transform: translateY(-5px);
    }
}
.chest-card:active {
    transform: scale(0.95);
}
.chest-icon {
    font-size: 3rem;
    color: #d69e2e; /* Or sombre */
    transition: all 0.3s;
}

/* ROUE : Dégradé correct */
/* Rouge de 0 à 180 (Moitié droite), Noir de 180 à 360 (Moitié gauche) */
.wheel-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    /* Attention à l'ordre des couleurs pour matcher la logique JS */
    background: conic-gradient(
        #dc3545 0deg 180deg,  /* Rouge */
        #212529 180deg 360deg /* Noir */
    );
    /* Transition gérée en JS */
}

/* --- JEU DE LA PIÈCE (COIN) --- */
.coin-container {
    width: 120px; height: 120px;
    perspective: 1000px;
}
.coin {
    width: 100%; height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
}
.coin.spinning { animation: spinCoin 0.5s linear infinite; }

.coin-face {
    position: absolute; width: 100%; height: 100%;
    border-radius: 50%;
    backface-visibility: hidden;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border: 4px solid #d4af37; /* Or */
}
.coin-front { background: #ffd700; color: #b8860b; transform: rotateY(0deg); }
.coin-back { background: #e6e6e6; color: #555; transform: rotateY(180deg); border-color: #999; }

@keyframes spinCoin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }

/* --- JEU DES CARTES --- */
.playing-card-container {
    perspective: 1000px; height: 140px; cursor: pointer;
}
.playing-card {
    width: 100%; height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.playing-card.flipped { transform: rotateY(180deg); }

.card-front, .card-back {
    position: absolute; width: 100%; height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
}
.card-back {
    background: repeating-linear-gradient(45deg, #1a1a1a, #1a1a1a 10px, #2c2c2c 10px, #2c2c2c 20px);
    border: 2px solid white; transform: rotateY(0deg);
}
.card-front {
    background: white; color: black; transform: rotateY(180deg); border: 1px solid #ddd;
}

/* --- FIX COFFRES (ÉGALITÉ) --- */
.chest-card {
    border: 2px solid transparent; /* Pas de bordure visible par défaut */
    background-color: #f8f9fa; /* Gris très léger */
    transition: transform 0.2s, background-color 0.2s;
    cursor: pointer;
}
@media (hover: hover) {
    .chest-card:hover {
        background-color: #fff3cd; /* Jaune pâle survol */
        transform: translateY(-5px);
    }
}
.chest-card:active { transform: scale(0.98); }

/* --- ANIMATIONS BOUTONS VIVANTS --- */

/* Heartbeat (Battement de coeur) */
@keyframes heartbeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.05); }
    28% { transform: scale(1); }
    42% { transform: scale(1.05); }
    70% { transform: scale(1); }
}

.btn-heartbeat {
    animation: heartbeat 2s infinite ease-in-out;
    transform-origin: center;
}

/* Gradient Animé (Couleurs changeantes) */
@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.btn-gradient-animate {
    background-size: 200% 200%;
    animation: gradient-flow 3s ease infinite;
    border: none;
    color: white !important;
}

/* Gradients spécifiques pour les boutons */
.bg-grad-sprint-btn { background-image: linear-gradient(45deg, #FF8008, #FFC837, #FF8008); }
.bg-grad-marathon-btn { background-image: linear-gradient(45deg, #007bff, #00d2ff, #007bff); }
.bg-grad-titan-btn { background-image: linear-gradient(45deg, #6f42c1, #a64bf4, #6f42c1); }
.bg-grad-gamer-btn { background-image: linear-gradient(45deg, #1e293b, #334155, #1e293b); } /* Noir/Gris */
.bg-grad-luck-btn { background-image: linear-gradient(45deg, #059669, #34d399, #059669); } /* Vert */

/* --- AJUSTEMENTS CARTES --- */
/* Pour que toutes les cartes aient la même hauteur visuelle */
.card-game-uniform {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/* LA ROUE */
.wheel-container {
    width: 150px;
    height: 150px;
    margin: 0 auto 20px;
    position: relative;
}

.wheel-pointer {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid #ffc107; /* Flèche Jaune */
    z-index: 10;
}

/* LES COFFRES */

.chest-card:hover {
    border-color: #ffc107;
    background-color: #fff9e6;
    transform: translateY(-5px);
}

.chest-card.opened .chest-icon {
    transform: scale(1.2);
}

.wheel-container {
    width: 200px;
    height: 200px;
    margin: 20px auto;
    position: relative;
    border-radius: 50%;
    border: 5px solid #333;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.wheel-pointer {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 25px solid #ffc107; /* Flèche Jaune Or */
    z-index: 10;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
}


/* Animations pour Luck.js */
@keyframes spin-blur {
    0% { transform: rotate(0deg); filter: blur(0px); }
    100% { transform: rotate(360deg); filter: blur(2px); }
}

.chest-card {
    transition: all 0.3s;
    border: 2px solid #f0f0f0;
}
.chest-card:hover { border-color: #ddd; }

/* public/css/style.css */

/* --- FIX DICE STRIP --- */
.dice-container-2d {
    width: 100px;
    height: 100px;
    margin: 20px auto;
    overflow: hidden; /* Important pour cacher les autres chiffres */
    background: #ffffff;
    border: 3px solid #333;
    border-radius: 16px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.1), 0 10px 20px rgba(0,0,0,0.1);
    position: relative;
}

.dice-strip {
    display: flex;
    width: max-content;
    height: 100%;
    transform: translateX(0); 
    /* La transition gérée par JS */
}

.dice-face-2d {
    width: 100px; /* Doit correspondre à la largeur du container */
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    font-weight: 800;
    color: #212529;
    flex-shrink: 0;
    border-right: 1px dashed #eee; 
}

/* Animation de défilement infinie */
@keyframes rollDiceAnimation {
    0% { transform: translateX(0); }
    100% { transform: translateX(-600px); } /* Défile 6 faces de 100px */
}

.dice-container-2d.rolling .dice-strip {
    animation: rollDiceAnimation 0.3s linear infinite; /* Très rapide */
}

/* ================================================================= */
/* === FIX ULTIME DES SUPERPOSITIONS (Z-INDEX)                   === */
/* ================================================================= */

/* --- BOUTON RECHARGER ANIMÉ (Header) --- */
.btn-recharge-anim {
    /* Dégradé Orange -> Violet -> Bleu */
    background-image: linear-gradient(to right, #FF8008 0%, #6f42c1 50%, #007bff 100%);
    background-size: 200% auto;
    animation: gradient-move 3s infinite alternate; /* Ça bouge */
    color: white !important;
    border: none;
    height: 38px; width: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    padding: 8px 20px; /* Plus large pour le texte */
    font-weight: 800;
    font-size: 0.85rem;
    box-shadow: 0 4px 10px rgba(111, 66, 193, 0.3);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s;
}

.btn-recharge-anim:active {
    transform: scale(0.95);
}

/* Rappel de l'animation si pas déjà présente */
@keyframes gradient-move {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}


/* --- SOLDE COMPACT (Barre style App) --- */
.wallet-bar-compact {
    background: white;
    border-radius: 16px;
    padding: 10px 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.wallet-info {
    line-height: 1.2;
}
.wallet-amount {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--dark-text);
}
.wallet-approx {
    font-size: 0.7rem;
    color: var(--success-color);
    font-weight: 600;
}
.btn-wallet-action {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s;
}
.btn-wallet-action:active { transform: scale(0.9); }

/* --- TEASER JEU (Accueil) --- */
.game-teaser-card {
    transition: transform 0.2s;
    cursor: pointer;
}
/* Empêcher le clic sur le bouton de partage de déclencher l'ouverture du modal */
.game-teaser-card .btn-share-teaser {
    position: relative; z-index: 5;
}
/* Simulation de survol des options pour inciter au clic */
.teaser-option {
    border: 1px solid #e9ecef;
    background: #fff;
    padding: 12px 15px;
    border-radius: 12px;
    margin-bottom: 8px;
    font-weight: 500;
    color: #495057;
    transition: all 0.2s;
}
.teaser-option:hover {
    background-color: #e7f1ff;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* --- ACCORDÉON COMPETITIONS --- */
.competitions-toggler {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    padding: 15px;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    color: #2c3e50;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}
.competitions-toggler[aria-expanded="true"] .chevron-icon {
    transform: rotate(180deg);
}
.chevron-icon { transition: transform 0.3s; }
/* --- BARRE PROGRESSION LIMITE HORAIRE (Header Bottom) --- */

/* Le conteneur de la barre (prend toute la largeur du bas du header) */
.header-limit-track {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px; /* Hauteur de la "bordure" */
    background-color: rgba(0,0,0,0.05); /* Gris très léger pour le fond */
    z-index: 1030;
}

/* La barre de remplissage colorée */
.header-limit-fill {
    height: 100%;
    width: 0%;
    background-color: var(--primary-color);
    transition: width 0.5s ease, background-color 0.5s ease;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}
/* Le Badge (Pill) flottant - CORRECTION POSITION CENTRALE */
.header-limit-badge {
    position: absolute;
    bottom: -15px; /* Juste en dessous de la barre */
    
    /* On le centre pour éviter les boutons à gauche ou à droite */
    left: 48%;
    transform: translateX(-50%);
    right: auto; /* On annule le right: 15px précédent */
    
    background: #fff;
    padding: 1px 8px;
    border-radius: 0 0 8px 8px; /* Arrondi en bas */
    font-size: 60%; /* Un peu plus lisible */
    font-weight: 600;
    box-shadow: 0 4px 5px rgba(0,0,0,0.08);
    
    border-top: none;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap; /* Empêche le texte de se casser */
}
/* COULEURS DYNAMIQUES */
/* Normal (Bleu) */
.limit-level-ok .header-limit-fill { background-color: #0d6efd; }
.limit-level-ok .header-limit-badge { color: #0d6efd; }

/* Attention (Jaune/Orange - À partir de 30/40) */
.limit-level-warn .header-limit-fill { background-color: #ffc107; }
.limit-level-warn .header-limit-badge { color: #856404; background-color: #fff3cd; }

/* Danger/Stop (Rouge - À partir de 38/40) */
.limit-level-danger .header-limit-fill { background-color: #dc3545; }
.limit-level-danger .header-limit-badge { color: #dc3545; background-color: #f8d7da; border-color: #f5c2c7; }

/* --- BARRE LIMITE TEASER (Sur la carte d'accueil) --- */

/* Le conteneur de la barre (Collé en haut de la carte) */
.teaser-limit-track {
    height: 6px;
    width: 100%;
    background-color: #e9ecef;
    border-radius: 16px 16px 0 0; /* Arrondi haut seulement (comme la carte) */
    overflow: hidden;
    position: relative;
    margin-bottom: -1px; /* Pour coller parfaitement à la carte */
    z-index: 5;
}

/* La barre de remplissage */
.teaser-limit-fill {
    height: 100%;
    width: 0%;
    background-color: #0d6efd;
    transition: width 0.5s ease, background-color 0.3s ease;
}

/* Le Badge Flottant (Centré au milieu de la barre) */
.teaser-limit-badge {
    position: absolute;
    top: -12px; /* Chevauche la barre vers le haut */
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 800;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border: 1px solid #e0e0e0;
    color: #333;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

/* COULEURS DYNAMIQUES (Mêmes logiques) */
.limit-level-warn .teaser-limit-fill { background-color: #ffc107; }
.limit-level-warn .teaser-limit-badge { color: #856404; border-color: #ffc107; }

.limit-level-danger .teaser-limit-fill { background-color: #dc3545; }
.limit-level-danger .teaser-limit-badge { color: #dc3545; border-color: #dc3545; }

/* --- STYLES MODALES MOBILE (BOTTOM SHEET) --- */

@media (max-width: 768px) {
    /* Aligne la modale en bas de l'écran sur mobile */
    .bottom-sheet-modal .modal-dialog-bottom {
        display: flex;
        align-items: flex-end;
        min-height: 100%;
        margin: 0;
        padding-top: 50px; /* Espace en haut pour cliquer et fermer */
    }

    .bottom-sheet-modal .modal-content {
        width: 100%;
        border-radius: 24px 24px 0 0 !important; /* Arrondi généreux en haut */
        padding-bottom: env(safe-area-inset-bottom); /* Support iPhone (encoche du bas) */
    }

    /* Animation d'entrée depuis le bas (Slide Up) */
    .bottom-sheet-modal.fade .modal-dialog {
        transform: translate(0, 100%);
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .bottom-sheet-modal.show .modal-dialog {
        transform: translate(0, 0);
    }
}

/* --- NOUVEAU DESIGN SALON PUBLIC (DASHBOARD) --- */
.public-room-card {
    background: #fff;
    border-radius: 20px;
    padding: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.04);
    border: 1px solid #f0f0f0;
    margin-bottom: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.public-room-card:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 10px 25px rgba(0,0,0,0.08); 
    border-color: #e9ecef;
}

.room-main-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

/* Le nombre de joueurs en GÉANT */
.room-players-huge {
    text-align: center;
    line-height: 1;
    min-width: 60px;
}
.room-players-huge .current { font-size: 2.8rem; font-weight: 900; color: #212529; letter-spacing: -2px; }
.room-players-huge .max { font-size: 1.2rem; font-weight: 700; color: #adb5bd; }
.room-players-huge .label { display: block; font-size: 0.65rem; text-transform: uppercase; color: #6c757d; font-weight: 800; margin-top: 4px; }

/* Info au centre */
.room-info-center {
    flex-grow: 1;
    padding: 0 15px;
    border-left: 2px solid #f8f9fa;
    margin-left: 10px;
}
.room-domain { font-size: 1.05rem; font-weight: 800; color: #212529; margin-bottom: 5px; line-height: 1.2; }
.room-mise-badge { 
    display: inline-block; background: #e7f1ff; color: #0d6efd; 
    padding: 4px 10px; border-radius: 8px; font-size: 0.75rem; 
    font-weight: 800; border: 1px solid #b6d4fe; 
}

/* La grosse flèche à droite */
.room-join-arrow {
    text-align: center;
    color: #212529;
    padding-left: 10px;
}
.room-join-arrow i { font-size: 2.5rem; transition: transform 0.2s; display: block; line-height: 1; }
.public-room-card:hover .room-join-arrow i { transform: translateX(5px); color: #0d6efd; }
.room-join-arrow .label { display: block; font-size: 0.7rem; font-weight: 800; margin-top: 4px; color: #6c757d; text-transform: uppercase; }

/* Bouton Partager vide (Hollow) */
.btn-share-hollow {
    width: 100%;
    background: transparent;
    border: 2px dashed #dee2e6;
    color: #6c757d;
    padding: 10px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.85rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-share-hollow:hover { background: #f8f9fa; border-color: #adb5bd; color: #212529; }
.btn-share-hollow i { font-size: 1.2rem; color: #0d6efd; }

/* Style Spécial : Ma Partie en Cours */
.my-active-room { border: 2px solid #198754; background: #f8fffb; }
.my-active-room .room-join-arrow i { color: #198754; }
.my-active-room:hover .room-join-arrow i { color: #146c43; }
.my-active-room .room-mise-badge { background: #d1e7dd; color: #0f5132; border-color: #badbcc; }

/* --- NOUVEAU DESIGN SALON PUBLIC (DASHBOARD) --- */
.public-room-card {
    background: #fff;
    border-radius: 20px;
    padding: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.04);
    border: 1px solid #f0f0f0;
    margin-bottom: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.public-room-card:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 10px 25px rgba(0,0,0,0.08); 
    border-color: #e9ecef;
}

.room-main-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

/* Le nombre de joueurs en GÉANT */
.room-players-huge {
    text-align: center;
    line-height: 1;
    min-width: 60px;
}
.room-players-huge .current { font-size: 2.8rem; font-weight: 900; color: #212529; letter-spacing: -2px; }
.room-players-huge .max { font-size: 1.2rem; font-weight: 700; color: #adb5bd; }
.room-players-huge .label { display: block; font-size: 0.65rem; text-transform: uppercase; color: #6c757d; font-weight: 800; margin-top: 4px; }

/* Info au centre (Tronquée pour protéger la flèche) */
.room-info-center {
    flex-grow: 1;
    padding: 0 10px;
    border-left: 2px solid #f8f9fa;
    margin-left: 10px;
    overflow: hidden; /* Empêche de pousser les autres éléments */
}
.room-domain { font-size: 1.05rem; font-weight: 800; color: #212529; margin-bottom: 5px; line-height: 1.2; }
.room-mise-badge { 
    display: inline-block; background: #e7f1ff; color: #0d6efd; 
    padding: 4px 10px; border-radius: 8px; font-size: 0.75rem; 
    font-weight: 800; border: 1px solid #b6d4fe; 
}

/* La grosse flèche à droite (Rétrécie et fixée) */
.room-join-arrow {
    text-align: center;
    color: #212529;
    padding-left: 5px;
    min-width: 70px; /* Espace minimal garanti */
    flex-shrink: 0; /* Interdit de s'écraser */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.room-join-arrow i { font-size: 2.2rem; transition: transform 0.2s; display: block; line-height: 1; margin-bottom: 2px; }
.public-room-card:hover .room-join-arrow i { transform: translateX(5px); color: #0d6efd; }
.room-join-arrow .label { 
    display: block; 
    font-size: 0.65rem; 
    font-weight: 800; 
    color: #6c757d; 
    text-transform: uppercase; 
    letter-spacing: -0.2px; 
    white-space: nowrap; /* EMPÊCHE le mot de se casser en deux */
}

/* Bouton Partager vide (Hollow) */
.btn-share-hollow {
    width: 100%;
    background: transparent;
    border: 2px dashed #dee2e6;
    color: #6c757d;
    padding: 10px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.85rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-share-hollow:hover { background: #f8f9fa; border-color: #adb5bd; color: #212529; }
.btn-share-hollow i { font-size: 1.2rem; color: #0d6efd; }

/* Style Spécial : Ma Partie en Cours */
.my-active-room { border: 2px solid #198754; background: #f8fffb; }
.my-active-room .room-join-arrow i { color: #198754; }
.my-active-room:hover .room-join-arrow i { color: #146c43; }
.my-active-room .room-mise-badge { background: #d1e7dd; color: #0f5132; border-color: #badbcc; }
/* ================================================================= */
/* --- BORDURE ANIMÉE "ULTIMATE" POUR SALON ACTIF / IMMINENT ---     */
/* ================================================================= */

.active-room-glow {
    /* On met une bordure transparente pour laisser voir le background en dessous */
    border: 1px solid transparent !important;
    
    /* TRICK MAGIQUE : 
       1er linear-gradient = Le fond de la carte (Blanc)
       2ème linear-gradient = La bordure (Ultimate) 
    */
    background: 
        linear-gradient(#ffffff, #ffffff) padding-box, 
        linear-gradient(to right, #FF8008 0%, #6f42c1 50%, #007bff 100%) border-box !important;
        
    /* On double la taille du dégradé (200%) pour qu'il puisse défiler de gauche à droite */
    background-size: 100% 100%, 200% auto !important;
    
    /* Double animation : Le dégradé qui bouge + L'ombre lumineuse (Glow) */
    animation: border-gradient-anim 3s infinite alternate, glow-ultimate-shadow 1.5s infinite alternate !important;
}

/* Variante : Si c'est "Ma partie", on peut mettre un fond à peine teinté gris/bleu 
   au lieu du blanc pur pour la différencier légèrement à l'intérieur */
.my-active-room.active-room-glow {
    background: 
        linear-gradient(#f8f9fa, #f8f9fa) padding-box, 
        linear-gradient(to right, #FF8008 0%, #6f42c1 50%, #007bff 100%) border-box !important;
}

/* Animation 1 : Défilement des couleurs du dégradé sur la bordure */
@keyframes border-gradient-anim {
    0% { background-position: 0% 0%, 0% 50%; }
    100% { background-position: 0% 0%, 100% 50%; }
}

/* Animation 2 : Le halo de lumière externe (Ombre portée) violette */
@keyframes glow-ultimate-shadow {
    0% { box-shadow: 0 0 2px rgba(111, 66, 193, 0.2); }
    100% { box-shadow: 0 0 10px rgba(111, 66, 193, 0.8), inset 0 0 10px rgba(111, 66, 193, 0.1); }
}

/* ================================================================= */
/* === NOUVEAU DESIGN SALON X-WINNER (COMPACT, SLOTS, EFFICACE)  === */
/* ================================================================= */
.xoo-room-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.04);
    border: 1px solid #f0f0f0;
    transition: all 0.2s ease;
    position: relative;
}
.xoo-room-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
    border-color: #e4e4e4;
}
.xoo-room-card.my-active {
    border: 2px solid #198754;
    background: #f8fffb;
}

/* En-tête de la carte (Badges) */
.xoo-room-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

/* Zone centrale : Chiffres et Prix */
.xoo-room-stats {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Aligne le texte en bas */
    margin-bottom: 12px;
}

/* Le grand nombre (ex: 1/2) et le petit texte */
.xoo-players-text .big-num {
    font-size: 2.2rem;
    font-weight: 900;
    color: #212529;
    line-height: 1;
    letter-spacing: -1px;
}
.xoo-players-text .small-text {
    font-size: 0.65rem;
    color: #adb5bd;
    text-transform: lowercase;
    margin-left: 4px;
    font-weight: 600;
}

/* Le prix */
.xoo-price-text {
    font-size: 1.2rem;
    font-weight: 900;
    color: #0d6efd;
    background: #f0f7ff;
    padding: 6px 12px;
    border-radius: 12px;
    line-height: 1;
}

/* === LA NOUVELLE BARRE DE PROGRESSION EN "PLACES" (SLOTS) === */
.xoo-slots-container {
    display: flex;
    gap: 6px; /* Espace entre les places */
    margin-bottom: 18px;
    height: 14px; /* Assez épaisse pour être visible */
}
.xoo-slot {
    flex-grow: 1;
    background-color: #e9ecef; /* Place vide (Grise) */
    border-radius: 6px;
    transition: background-color 0.3s ease;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); /* Effet creusé */
}
.xoo-slot.filled {
    background-color: #0d6efd; /* Place occupée (Bleue) */
    box-shadow: 0 2px 4px rgba(13, 110, 253, 0.2); /* Léger relief */
}
.xoo-room-card.my-active .xoo-slot.filled {
    background-color: #198754; /* Vert si c'est ma partie */
    box-shadow: 0 2px 4px rgba(25, 135, 84, 0.2);
}

/* Boutons d'action */
.btn-xoo-action {
    background: #212529;
    color: white;
    border-radius: 14px;
    font-weight: 800;
    padding: 14px 10px;
    font-size: 0.9rem;
    transition: all 0.2s;
    text-transform: uppercase;
    border: none;
}
.btn-xoo-action:hover {
    background: #000;
    transform: scale(1.02);
    color: white;
}

.btn-xoo-invite {
    background: #f8f9fa;
    color: #0d6efd;
    border-radius: 14px;
    font-weight: 800;
    padding: 14px 10px;
    font-size: 0.85rem;
    transition: all 0.2s;
    text-transform: uppercase;
    border: none;
}
.btn-xoo-invite:hover {
    background: #e7f1ff;
    color: #0b5ed7;
}

/* --- BOUTON ENTRAÎNEMENT GRATUIT (MAIN CTA) --- */
.free-training-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
    border: 2px solid #0d6efd !important;
    box-shadow: 0 0 20px rgba(13, 110, 253, 0.2);
    animation: heartbeat-glow 2s infinite ease-in-out;
    border-radius: 0 0 16px 16px;
    cursor: pointer;
}

@keyframes heartbeat-glow {
    0% { transform: scale(1); box-shadow: 0 0 15px rgba(13, 110, 253, 0.2); }
    15% { transform: scale(1.02); box-shadow: 0 0 30px rgba(13, 110, 253, 0.5); }
    30% { transform: scale(1); box-shadow: 0 0 15px rgba(13, 110, 253, 0.2); }
    45% { transform: scale(1.02); box-shadow: 0 0 30px rgba(13, 110, 253, 0.5); }
    100% { transform: scale(1); box-shadow: 0 0 15px rgba(13, 110, 253, 0.2); }
}

.free-training-card:active {
    transform: scale(0.98) !important;
    animation: none;
}