/* static/style.css */

/* ==========================================================================
   Variables CSS
   ========================================================================== */
:root {
    --primary-color: #007bff; /* Bleu Bootstrap */
    --secondary-color: #6c757d; /* Gris Bootstrap */
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;

    --text-color: #333; /* Texte principal sombre */
    --text-muted: #6c757d; /* Texte secondaire estompé */
    --heading-color: #2c3e50; /* Couleur des titres (bleu-gris foncé) */

    --bg-light: #f0f2f5; /* Fond très clair, doux */
    --bg-gradient-light: linear-gradient(135deg, #e3f2fd 0%, #c5e1fd 100%); /* Dégradé de bleu très clair */
    --bg-gradient-dark: linear-gradient(145deg, #2c3e50, #1a2a3a); /* Fond sombre élégant pour promo */

    --border-color: #e0e0e0; /* Bordure générale */
    --card-bg-color: #ffffff; /* Fond des cartes */
    --card-shadow: 0 8px 25px rgba(0,0,0,0.08); /* Ombre douce et prononcée pour cartes */
    --header-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Ombre légère pour le header */

    --font-family-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-family-headings: 'Montserrat', 'Segoe UI', sans-serif;
}

/* ==========================================================================
   Général
   ========================================================================== */
html {
    scroll-behavior: smooth; /* Pour un défilement doux */
    scroll-padding-top: 80px; /* Ajustez cette valeur à la hauteur de votre bandeau + un peu d'espace si vous voulez */
}



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

.container {
    max-width: 1200px; /* Limite la largeur du contenu */
    padding-left: 15px;
    padding-right: 15px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-headings);
    color: var(--heading-color);
    font-weight: 700;
}

p {
    margin-bottom: 1rem;
}

a {
    color: var(--primary-color);
    text-decoration: none;
}
a:hover {
    color: #0056b3; /* Teinte plus foncée du bleu primaire */
    text-decoration: underline;
}


/* Classe pour cacher élégamment les groupes de formulaires */
.form-group-hidden {
    visibility: hidden;
    opacity: 0;
    height: 0;
    overflow: hidden;
    margin: 0 !important; /* Utiliser !important pour forcer la suppression des marges */
    padding: 0 !important;
    transition: opacity 0.3s ease, height 0.3s ease;
}

/* ==========================================================================
   Boutons Personnalisés
   ========================================================================== */
.custom-btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
}
.custom-btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 123, 255, 0.3);
}

.custom-btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(108, 117, 125, 0.2);
}
.custom-btn-secondary:hover {
    background-color: #5a6268; /* Teinte plus foncée du gris secondaire */
    border-color: #5a6268;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(108, 117, 125, 0.3);
}

/* ==========================================================================
   Header (Navigation)
   ========================================================================== */
.main-header {
    background-color: var(--card-bg-color); /* Fond blanc épuré */
    border-bottom: 1px solid var(--border-color); /* Ligne subtile en bas */
    box-shadow: var(--header-shadow); /* Ombre légère */
    position: sticky;
    top: 0;
    z-index: 1030; /* Au-dessus de tout le reste */
}

.main-header .navbar-brand {
    font-family: var(--font-family-headings);
    font-weight: 800;
    font-size: 1.3em;
    color: var(--heading-color); /* Couleur forte pour le nom du site */
    letter-spacing: -0.5px;
}

.main-nav .nav-link {
    color: #555;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: color 0.3s ease, border-bottom 0.3s ease;
    border-bottom: 2px solid transparent; /* Pour l'effet de survol */
}
.main-nav .nav-link:hover,
.main-nav .nav-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.navbar-toggler {
    border: none;
    font-size: 1.8rem;
    color: var(--text-color);
}
.offcanvas-header {
    border-bottom: 1px solid #e9ecef;
}
.offcanvas-body .nav-link {
    padding: 0.8rem 1rem;
    font-size: 1.1em;
    color: var(--text-color);
}
.offcanvas-body .nav-link:hover {
    background-color: var(--bg-light);
    color: var(--primary-color);
}

/* ==========================================================================
   Sections Générales & Cartes
   ========================================================================== */
.section-divider {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
    margin: 0.1rem 0;
}

.data-card {
    background-color: var(--card-bg-color);
    border-radius: 12px; /* Coins plus arrondis */
    padding: 3rem; /* Plus d'espace intérieur */
    box-shadow: var(--card-shadow); /* Ombre plus prononcée mais douce */
    border: none; /* Supprime la bordure par défaut de Bootstrap card */
}

.card-title-lg {
    font-size: 2.2em; /* Titres de section plus grands */
    color: var(--primary-color); /* Couleur distinctive pour les titres de section */
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
}
.card-title-lg i {
    font-size: 0.9em; /* Taille de l'icône par rapport au texte */
    color: #0056b3;
    margin-right: 10px; /* Ajout d'un espace entre l'icône et le texte */
}
.section-sub-title {
    font-size: 1.6em;
    color: #444;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
    display: inline-block; /* Pour que la bordure ne prenne pas toute la largeur */
}

/* ==========================================================================
   Hero Section (Introduction)
   ========================================================================== */
.hero-section {
    background: var(--bg-gradient-light); /* Dégradé de bleu très clair */
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 123, 255, 0.1);
    margin-top: 2rem;
    overflow: hidden;
    position: relative;
    padding: 4rem 2rem; /* Ajout de padding pour le contenu */
}
.hero-section h1 {
    color: #1a2a3a;
    font-size: 3.2rem; /* Plus grand sur desktop */
}
.hero-section p.lead {
    font-size: 1.25rem;
    color: #4f6b8a;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Animation Placeholder */
.loto-animation-container {
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    height: 250px; /* Hauteur fixe pour le placeholder */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.animated-loto-ball {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: white;
    font-size: 1.5em;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    animation: bounce 1s infinite alternate; /* Exemple d'animation */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; /* Animation douce */
    cursor: default; /* Pas de pointeur sur la souris */
    flex-shrink: 0; /* Empêche les boules de rétrécir */
}
.animated-loto-ball:nth-child(even) { animation-delay: 0.2s; }
.animated-loto-ball:nth-child(odd) { animation-delay: 0s; }
@keyframes bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}
.animated-loto-ball.main-ball {
    background: linear-gradient(145deg, var(--primary-color), #0056b3); /* Dégradé de bleu pour les boules principales */
    border: 2px solid #004085; /* Bordure plus foncée */
}
.animated-loto-ball.chance-ball {
    background: linear-gradient(145deg, var(--warning-color), #e0a800); /* Dégradé de jaune/orange pour la boule Chance */
    border: 2px solid #d39e00;
}
.animated-loto-ball:hover { /* Effet au survol */
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   Dernier Tirage
   ========================================================================== */
.last-draw-section {
    background-color: #e9f5ff; /* Bleu très clair */
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #cceeff;
}
.last-draw-section h2 {
    color: var(--primary-color);
    font-size: 2em;
}
.last-draw-numbers .label {
    font-weight: bold;
    font-size: 1.3em;
    color: #444;
}
.loto-ball {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px; /* Taille légèrement plus grande */
    height: 50px;
    border-radius: 50%;
    font-weight: bold;
    color: white;
    font-size: 1.4em;
    margin: 0 2px; /* Espacement entre les boules */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: transform 0.2s ease-in-out;
}
.loto-ball:hover {
    transform: translateY(-3px);
}
.main-ball {
    background: linear-gradient(145deg, var(--primary-color), #0056b3); /* Dégradé de bleu */
}
.chance-ball {
    background: linear-gradient(145deg, var(--danger-color), #b30000); /* Dégradé de rouge */
    border: 2px solid rgba(255,255,255,0.7); /* Bordure blanche pour le différencier */
}

/* ==========================================================================
   Générateur Intelligent (Formulaires & Slicers)
   ========================================================================== */
.criteria-group {
    background-color: #f8fafd;
    border: 1px solid #e1eaf3;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Common Styles for Criteria Sections */
.criteria-section.data-card {
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1.5rem;
    background-color: var(--card-bg-color);
    box-shadow: var(--card-shadow);
}

.criteria-section .card-subtitle {
    font-size: 1.15rem;
    font-weight: 500;
    font-weight: bold;
    color: var(--heading-color);
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
}

/* Base Grid Styles for Criteria */
.criteria-grid {
    display: grid;
    gap: 15px 25px; /* Row gap, Column gap */
    align-items: start; /* Align content to the top of the grid cell */
}

/* Headers of grid columns */
.grid-header-row {
    display: contents; /* Les enfants sont directement grid items du .criteria-grid parent */
    font-weight: bold;
    color: var(--heading-color);
    margin-bottom: 10px; /* Espace après les en-têtes */
}


/* Headers of grid columns (GENERAL) */
/* C'est CE sélecteur qui assure la hauteur égale et le centrage vertical dans CHAQUE cellule d'en-tête */
.grid-header-col {
    padding-bottom: 8px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    display: flex; /* Active Flexbox */
    flex-direction: column; /* Pour centrer le texte sur plusieurs lignes */
    justify-content: center; /* Centre le contenu verticalement */
    align-items: center; /* Centre le contenu horizontalement */
    box-sizing: border-box;
    min-height: 40px; /* Assure une hauteur minimale pour toutes les cellules d'en-tête */
    /* background-color: rgba(255, 0, 0, 0.1); /* Pour le débogage, à retirer après */
}


.grid-header-col-slicer {
    text-align: left; /* Le titre "Critère" peut être aligné à gauche */
}


/* Row and column styles within the grid */
.grid-row {
    display: contents; /* Les enfants sont directement grid items du .criteria-grid parent */
    align-items: center; /* Aligne verticalement les .grid-col enfants au centre de la ligne */
}

.grid-col {
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.grid-col-slicer p.small {
    font-size: 0.85em;
    color: var(--text-muted);
    line-height: 1.3;
}

/* Specific styling for weight column to align content */
.grid-col-weight {
    display: flex;
    justify-content: center; /* Horizontally center the input group within its column */
    align-items: center; /* Vertically center the input group */
}

/* Input groups (weights) */
.input-group-text {
    background-color: #e9ecef;
    color: #495057;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    flex-grow: 0;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem 0 0 0.375rem;
    display: flex; /* Permet d'aligner "Poids:" si nécessaire */
    align-items: center;
}
/* The actual input field needs to grow and take remaining space */
.input-group .form-control {
    flex-grow: 1; /* Allow the input field to grow and fill available space */
    text-align: center; /* Center the number within the input field */
    padding: 0.5rem 0.75rem;
    border-radius: 0 0.375rem 0.375rem 0;
    font-size: 0.9em;
    /* Correction: Supprimez tout max-width ici. L'input prendra la largeur de son parent. */
}

/* Fix for the input-group not taking full width in its column */
.grid-col-weight .input-group {
    width: 100%; /* S'assure que le groupe d'input prend toute la largeur de sa colonne */
    /* Pas de max-width ici pour qu'il s'étire pleinement dans sa colonne */
}

/* ==========================================================================
   Section: Fréquence des numéros (2 Colonnes Homogènes)
   ========================================================================== */
.criteria-grid-freq {
    grid-template-columns: 1fr 1fr; /* Slicer column | Weight column (colonnes égales) */
    gap: 20px;
}
.criteria-grid-freq .grid-row + .grid-row {
    padding-top: 15px;
    border-top: 1px dashed var(--border-color);
}

/* Positionnement des en-têtes spécifiques pour la fréquence */
.criteria-grid-freq .grid-header-col-slicer { grid-column: 1; text-align: center; }
.criteria-grid-freq .grid-header-col-weight { grid-column: 2; text-align: center; }




/* ==========================================================================
   Section: Performance Récente (IMPLÉMENTATION DÉDIÉE et RIGIDE)
   ========================================================================== */

/* .recent-performance-section {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1.5rem;
    background-color: var(--card-bg-color);
    box-shadow: var(--card-shadow);
    box-sizing: border-box; 
} */

/* La grille principale pour cette section spécifique */
.recent-performance-grid {
    display: grid;
    /* Définition explicite des colonnes: 3 colonnes. Le 1.5fr pour la première est clé. */
    grid-template-columns: 1.5fr 1fr 1fr; /* Slicer | ComboBox | Poids */
    gap: 15px; /* Espacement entre les colonnes */
    align-items: start; /* Aligne le contenu en haut des cellules par défaut */
    width: 100%; /* S'assure que la grille interne prend toute la largeur du recent-performance-section */
}

/* Ligne des EN-TÊTES de la section Performance Récente */
.rp-header-row {
    /* `display: contents` fait que ses enfants sont des items directs de `recent-performance-grid` */
    /* C'est la solution la plus fiable pour l'alignement horizontal précis */
    display: contents;
    font-weight: bold;
    color: var(--heading-color);
}

/* Styles pour CHAQUE cellule d'en-tête de la section Performance Récente */
/* Ces styles s'appliquent directement aux enfants de rp-header-row */
.rp-header-col {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    box-sizing: border-box;
    /* Utilisation de Flexbox pour le centrage et la hauteur uniforme */
    display: flex;
    flex-direction: column; /* Permet au texte de se mettre sur plusieurs lignes */
    justify-content: center; /* Centre le contenu verticalement */
    align-items: center; /* Centre le contenu horizontalement */
    min-height: 55px; /* Hauteur minimale augmentée pour garantir que le texte multi-lignes ne déborde pas */
    line-height: 1.2; /* Ajustement de l'interligne pour les titres sur plusieurs lignes */
    /* background-color: rgba(0, 0, 255, 0.1); /* DEBUG: Bleu clair pour les en-têtes */
    text-align: center; /* Alignement par défaut du texte dans les en-têtes */
}

/* Alignements spécifiques pour les titres de colonnes (TEXTE À L'INTÉRIEUR DES CELLULES) */
.rp-header-col-slicer { text-align: left; /* "Critère" */ }
/* Le titre "Nombre de tirages à considérer" est centré par défaut via .rp-header-col */
/* .rp-header-col-select { }
.rp-header-col-weight { } */


/* Styles pour les lignes de contenu (rp-content-row) */
.rp-content-row {
    /* `display: contents` fait que ses enfants sont des items directs de `recent-performance-grid` */
    display: contents;
}

/* Styles pour CHAQUE colonne de contenu (rp-col) */
.rp-col {
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligne le contenu en haut par défaut */
    /* background-color: rgba(255, 0, 0, 0.1); /* DEBUG: Rouge clair pour les colonnes de contenu */
}

/* Styles pour le Slicer */
.rp-col-slicer {
    justify-content: center; /* Centre le slicer verticalement si sa cellule est plus haute */
    align-items: flex-start; /* Aligne le slicer à gauche dans sa cellule */
    padding-right: 15px; /* Ajout d'un peu d'espace à droite du slicer */
}

/* Style pour le texte de description sous le slicer */
.rp-small-description {
    font-size: 0.85em;
    color: var(--text-muted);
    line-height: 1.3;
    margin-top: 5px; /* Espace au-dessus de la description */
    text-align: left; /* Alignement à gauche */
    padding-right: 15px; /* Pour aligner avec le slicer */
}


/* Styles pour la ComboBox "Nombre de tirages" */
.rp-col-select {
    justify-content: center; /* Centre la combobox verticalement dans sa cellule */
    align-items: center; /* Centre la combobox horizontalement dans sa cellule */
}
.rp-col-select .form-select {
    width: 100%; /* La combobox prend toute la largeur de sa colonne */
    max-width: 180px; /* Limite sa largeur pour l'esthétique */
    height : 40px;
}

/* Styles pour l'Input Poids */
.rp-col-weight {
    justify-content: center; /* Centre l'input group verticalement */
    align-items: center; /* Centre l'input group horizontalement */
}
.rp-col-weight .input-group {
    width: 100%; /* Assure que le groupe d'input prend toute la largeur de sa colonne */
    max-width: 150px; /* Limite sa largeur pour l'esthétique et éviter le débordement */
}






/* ==========================================================================
   Slicers (Toggle Switches)
   ========================================================================== */
.custom-switch .form-check-input,
.form-switch .form-check-input {
    width: 2.5em;
    height: 1.25em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%236c757d'/%3e%3c/svg%3e");
    background-position: left center;
    border-radius: 1.25em;
    transition: background-position 0.15s ease-in-out;
    cursor: pointer;
    background-color: #ccc;
    border: none;
}

.custom-switch .form-check-input:checked,
.form-switch .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-position: right center;
}

.custom-switch .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

.custom-switch .form-check-label {
    font-weight: 500;
    margin-left: 0.5rem;
    cursor: pointer;
}

/* Simulation Status */
#simulation-status .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
}
#simulation-status p {
    font-size: 1.1em;
    color: #666;
}

/* ==========================================================================
   Tables
   ========================================================================== */
.interactive-table th {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
    padding: 1rem;
    text-align: center;
    background-color: #f2f6fc;
    color: #333;
    font-weight: 600;
}
.interactive-table th:hover {
    background-color: #e6effa;
}
.interactive-table td {
    text-align: center;
    vertical-align: middle;
}
.table-bordered th, .table-bordered td {
    border: 1px solid #dee2e6;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fbfdff;
}


/* ==========================================================================
   Sélection de numéros "Slicers" (Boules)
   ========================================================================== */
.number-selector {
    max-width: 600px; /* Limite la largeur maximale de la grille */
    margin: 0 auto; /* Centre le conteneur sur la page */
    column-gap:20px; /* Espace entre les boules */
    row-gap: 5px;
    padding: 20px 50px; 
    background-color: #fefefe;
    border: 1px solid var(--border-color); /* Utilise une variable CSS si définie, sinon une couleur fixe */
    border-radius: 10px;
    box-shadow: inset 0 1px 5px rgba(0,0,0,0.05);
    margin-bottom: 2rem; /* Espace en bas pour séparer des autres sections */
    /* Flexbox pour la grille de boules */
    display: flex;
    flex-wrap: wrap; /* Permet aux boules de passer à la ligne suivante */
    justify-content: center; /* Centre les lignes de boules dans le conteneur */
    align-items: flex-start; /* Aligne les boules au début de l'axe transversal (haut) */
}
/* ==========================================================================
   Styles de base pour TOUS les boutons de loto
   (Définissez ici les propriétés communes à tous les états)
   ========================================================================== */
.loto-number-button {
    /* 1. Dimensionnement et Grille : 7 numéros par ligne, alignés et centrés */
    width: calc((100% - (6 * 20px)) / 7);
    aspect-ratio: 1 / 1;
    border-radius: 50%;

    /* 2. Centrage du numéro à l'intérieur de la boule */
    display: flex;
    justify-content: center;
    align-items: center;

    /* 3. Typographie et Apparence générale */
    font-weight: bold;
    font-size: clamp(0.8em, 2.5vw, 1.2em);
    cursor: pointer;
    transition: all 0.2s ease-in-out; /* Transition pour les changements d'état */
    box-shadow: 0 2px 5px rgba(0,0,0,0.15); /* Ombre douce par défaut */
    user-select: none; /* Empêche la sélection du texte du numéro */
    outline: none; /* Supprime le contour bleu par défaut du focus, si pas déjà fait */

    /* Couleurs par DÉFAUT pour un bouton NON SÉLECTIONNÉ / NON DANGER */
    background-color: #f4f9ff;
    color: #0056b3;
    border: 2px solid #0056b3;
}

/* ==========================================================================
   Styles des interactions génériques (HOVER)
   ========================================================================== */

/* Hover pour les boutons dans leur état par défaut (non sélectionné, non danger) */
/* .loto-number-button:not(.selected):not(.is-danger):hover { */
     /* transform: translateY(-2px) scale(1.02); Léger soulèvement et agrandissement */
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.15); */
/* } */


/* ==========================================================================
   Styles des états spécifiques (SELECTED, DANGER, etc.)
   Ces règles DOIVENT venir APRÈS les règles génériques pour avoir plus de poids.
   ========================================================================== */

/* État "selected" */
.loto-number-button.selected {
    background: linear-gradient(135deg, var(--primary-color, #007bff), #0056b3);
    color: white;
    border-color: var(--primary-color, #007bff);
    transform: scale(1.05); /* Légèrement plus grand quand sélectionné */
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3); /* Ombre plus prononcée */
    /* Le 'outline: none;' est déjà dans la base, mais peut être ici si besoin */
}

/* Hover spécifique pour un bouton sélectionné */
.loto-number-button.selected:hover {
    transform: scale(1.07); /* Encore un peu plus grand */
    box-shadow: 0 6px 15px rgba(0, 123, 255, 0.4);
    /* Les couleurs de fond et de texte sont déjà définies par .selected et n'ont pas besoin de changer */
}


/* État "danger" */
.loto-number-button.is-danger {
    background-color: #dc3545; /* Rouge vif */
    color: white;
    border-color: #bd2130;
    /* Ajoutez d'autres styles visuels distinctifs ici */
}

/* Hover spécifique pour un bouton en état "danger" */
.loto-number-button.is-danger:hover {
    transform: translateY(-2px); /* Léger soulèvement */
    box-shadow: 0 6px 12px rgba(220, 53, 69, 0.4); /* Ombre de couleur rouge */
    background-color: #c82333; /* Rouge légèrement plus foncé au survol */
    border-color: #ad1e2e;
}


/* Classe pour la couleur par défaut des non-sélectionnés (gérée par JS) */
/* C'est la même couleur que celle définie sur .loto-number-button, elle est là pour la clarté */
/* Si elle doit vraiment écraser d'autres choses, elle devrait être plus spécifique ou plus tard */
.loto-number-button.is-primary-default {
    background-color: #f4f9ff;
    color: #0056b3;
    border: 2px solid #0056b3;
}

.toggle-details-btn {
    background-color: var(--bg-light);
    border-color: #ced4da;
    color: #495057;
    font-weight: 500;
    transition: all 0.3s ease;
}
.toggle-details-btn:hover {
    background-color: #e2e6ea;
    border-color: #dae0e5;
    color: #333;
}
.toggle-details-btn[aria-expanded="true"] {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
} 


/* ==========================================================================
   Publicités et Avertissements
   ========================================================================== */
.ad-banner {
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    color: #856404;
    font-size: 0.95em;
    padding: 1.5rem 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.ad-banner p strong {
    color: #a07a00;
}

.promo-section {
    background: var(--bg-gradient-dark);
    color: white;
    border-radius: 15px;
    padding: 4rem;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}
.promo-section h2 {
    color: #ffe082;
}
.promo-section .promo-card {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 1.8rem;
    transition: all 0.3s ease;
}
.promo-section .promo-card:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.promo-section .promo-card h4 {
    color: #fff;
    font-weight: 600;
}
.promo-section .promo-card p {
    color: #e0e0e0;
}
.promo-section .custom-btn-secondary {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    color: #333;
}
.promo-section .custom-btn-secondary:hover {
    background-color: #e0a800;
    border-color: #e0a800;
    color: #333;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    background-color: var(--heading-color);
    color: #f8f9fa;
    border-top: 1px solid #3d5166;
}
.site-footer .nav-link {
    color: #aebfd0;
    font-size: 0.9em;
    padding: 0.25rem 0.75rem;
}
.site-footer .nav-link:hover {
    color: #fff;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

/* Pour les écrans de taille moyenne (tablettes et petits ordinateurs portables) */
@media (max-width: 991.98px) {
    .hero-section h1 {
        font-size: 2.5rem;
    }
    .hero-section p.lead {
        font-size: 1.1rem;
    }
    .card-title-lg {
        font-size: 1.8em;
    }
    .data-card {
        padding: 2rem;
    }


    /* Ajustements spécifiques pour les grilles de critères sur tablette */
    .criteria-grid-freq,
    .criteria-grid-recent { /* Laisser criteria-grid-recent ici si vous souhaitez qu'il bascule aussi en 1 colonne */
        grid-template-columns: 1fr; /* Passage à une seule colonne pour l'empilement */
        gap: 15px; /* Espacement vertical entre les éléments empilés */
    }

    /* Important: Ce sélecteur concerne les GRILLES GENERALES. Pour la performance récente, nous avons des sélecteurs spécifiques. */
    .grid-header-row {
        display: none; /* Cache les en-têtes de colonne des grilles générales */
    }

    /* Chaque grid-row devient sa propre grille, empilant ses éléments en une seule colonne (pour les grilles générales) */
    .grid-row {
        display: grid; /* Chaque ligne devient sa propre grille */
        grid-template-columns: 1fr; /* Slicer et poids s'empilent */
        gap: 10px; /* Espacement entre les éléments */
        border: 1px solid var(--border-color); /* Bordure autour de chaque bloc de critère */
        border-radius: 0.25rem;
        padding: 12px;
        margin-bottom: 10px; /* Espace entre les blocs de critères */
    }
    .grid-row:last-child {
        margin-bottom: 0;
    }


    /* Supprime les bordures internes si les blocs ont leurs propres bordures */
    .criteria-grid-freq .grid-row + .grid-row {
        border-top: none;
        padding-top: 1px;
    }

    .grid-col-weight {
        justify-content: flex-start; /* Aligner l'input group à gauche */
        align-items: flex-start; /* Aligner le contenu à gauche */
    }
    .grid-col-weight .input-group {
        /* width: 100%; L'input group prend toute la largeur disponible */
        max-width: 100%; /* Une largeur maximale pour éviter qu'il ne s'étire trop sur de petites tablettes */
    }

    /* Ajustements pour la section Performance Récente sur tablette (avec les NOUVELLES CLASSES) */
    /* La grille principale de performance récente s'adapte à 1 colonne */
    .recent-performance-grid { /* Cible le conteneur principal de la grille RP */
        grid-template-columns: 1fr; /* Passer à une seule colonne sur tablette */
        gap: 15px;
    }

    /* Masquer les en-têtes de la grille de performance récente sur tablette */
    .rp-header-row {
        display: none;
    }

    /* Empiler les éléments de chaque ligne de contenu dans la grille de performance récente */
    .rp-content-row { /* Chaque ligne de contenu de RP devient sa propre grille */
        display: grid;
        grid-template-columns: 1fr; /* Tous les éléments s'empilent verticalement */
        gap: 8px;
        border: 1px solid var(--border-color);
        border-radius: 0.25rem;
        padding: 12px;
        margin-bottom: 10px; /* Espace entre les blocs de critères empilés */
    }
    .rp-content-row:last-child {
        margin-bottom: 0;
    }

    /* Réinitialiser les alignements pour les colonnes de Performance Récente sur mobile */
    .rp-col-slicer,
    .rp-col-select,
    .rp-col-weight {
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
    }

    /* S'assurer que le select prend toute la largeur sur mobile pour la Performance Récente */
    .rp-col-select .form-select {
        width: 100%; /* Prend toute la largeur disponible sur mobile */
        max-width: unset; /* Annule toute max-width définie pour le desktop */
    }

    /* Assurez-vous que l'input de poids prend toute la largeur sur les très petits écrans */
    .rp-col-weight .input-group {
        max-width: 100%;
    }

}

/* Pour les petits écrans (smartphones) */
@media (max-width: 767.98px) {
    .hero-section {
        padding-top: 3rem;
        padding-bottom: 3rem;
        margin-top: 1rem;
    }
    .hero-section h1 {
        font-size: 2rem;
    }
    .hero-section p.lead {
        font-size: 1rem;
    }
    .hero-section .d-flex {
        flex-direction: column;
        align-items: center;
    }
    .hero-section .btn-lg {
        width: 100%;
        margin-bottom: 10px;
    }
    .data-card {
        padding: 1.5rem;
        margin-bottom: 2rem !important;
    }
    .card-title-lg {
        font-size: 1.6em;
        text-align: center;
        flex-direction: column; /* Empile l'icône et le texte */
    }
    .card-title-lg i {
        margin-bottom: 0.5rem;
        margin-right: 0 !important;
    }
    .section-sub-title {
        font-size: 1.4em;
    }

    .last-draw-numbers {
        gap: 0.5rem !important;
        justify-content: center;
    }
    .loto-ball {
        width: 40px;
        height: 40px;
        font-size: 1.1em;
        margin:0px;
    }

 .number-selector {
        max-width: 100%; /* Permet au conteneur de prendre toute la largeur disponible sur mobile */
        column-gap: 5px; /* Réduire l'espace horizontal entre les boules */
        row-gap: 10px;    /* Réduire l'espace vertical entre les lignes */
        padding: 10px 10px; /* Réduire le padding général du conteneur */
        margin-bottom: 1.5rem; /* Ajuster la marge du bas si besoin */
    }

    .loto-number-button {
        /* Recalculer la largeur pour 7 boules par ligne avec le nouveau column-gap (8px) */
        width: calc((100% - (6 * 5px)) / 7);
        /* Laissé aspect-ratio: 1 / 1; et border-radius: 50%; inchangés pour garder les ronds */

        /* Ajuster la taille de la police pour être plus petite et lisible sur mobile */
        font-size: clamp(0.7em, 3.5vw, 1em); /* Plage plus petite et utilisation de vw pour la réactivité */
    }


    .table-responsive .table th,
    .table-responsive .table td {
        font-size: 0.8em;
        padding: 0.4rem;
    }
    .ad-banner {
        padding: 1rem;
        font-size: 0.85em;
    }
    .promo-section {
        padding: 2.5rem;
    }
    .promo-section h2 {
        font-size: 1.8rem;
    }
    .promo-section p.lead {
        font-size: 1rem;
    }
    .promo-section .btn-lg {
        font-size: 0.9rem;
        padding: 0.6rem 1rem;
    }
    .site-footer {
        text-align: center;
    }
    .site-footer .nav {
        flex-direction: column;
        align-items: center;
    }
    .site-footer .nav-item {
        margin-bottom: 5px;
    }

    /* Ajustements pour la section Performance Récente sur mobile (empilement explicite) */
    .recent-performance-grid {
        gap: 10px; /* Réduit le gap entre les éléments empilés sur mobile */
    }
    .rp-content-row {
        gap: 5px;
        margin-bottom: 8px;
        padding: 10px;
    }

    /* Assurez-vous que l'input de poids prend toute la largeur sur les très petits écrans */
    .rp-col-weight .input-group {
        max-width: 100%;
    }
    /* Les réinitialisations de grid-area ne sont plus nécessaires car nous n'en utilisons pas */
}

/* Pour les très très petits écrans (comme les vieux smartphones) */
@media (max-width: 575.98px) {
    /* Ce sélecteur `criteria-row` semble être général et non lié aux nouvelles classes `rp-`.
       Si vous aviez une `criteria-row` avant, elle sera toujours affectée.
       Si vous souhaitez que la grille de performance récente réagisse de la même manière,
       ajoutez un sélecteur spécifique ici si 1fr n'est pas déjà suffisant. */
    /* .criteria-row {
        grid-template-columns: 1fr;
        gap: 5px;
    } */

    /* Si .recent-performance-grid doit aussi changer ici spécifiquement */
    .recent-performance-grid {
        /* Si vous avez besoin de changements spécifiques au-delà du 767.98px */
        /* Par exemple, si vous voulez un gap encore plus petit ici */
        gap: 5px;
    }
}