/* ################ 1. VARIABLES ET RÉINITIALISATION ################ */

:root {
    /* Palette Principale (Base du site) */
    --color-primary: #007BFF;       /* Bleu vif (Accentuation, Boutons) */
    --color-dark: #333333;          /* Gris foncé (Texte principal) */
    --color-light: #F4F7F9;         /* Gris très clair (Fonds secondaires) */
    --color-white: #ffffff;
    
    /* Couleurs des Niveaux Scolaires (index.html) */
    --color-primaire: #FFB347;      /* Orange doux */
    --color-college: #17A2B8;       /* Bleu/Cyan */
    --color-lycee: #6F42C1;         /* Violet Sophistiqué */

    /* Couleurs des Matières (primaire.html et listes de jeux) */
    --color-maths: #28a745;     /* Vert (Logique) */
    --color-francais: #dc3545;  /* Rouge (Structure) */
    --color-sciences: #17a2b8;  /* Cyan (Technologie) */
    --color-histoire: #ffc107;  /* Jaune (Histoire) */
    --color-langues: #6f42c1;   /* Violet (Culture) */
    --color-logique: #fd7e14;   /* Orange foncé (Défi) */
}

/* Réinitialisation de base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif; 
    background-color: var(--color-white);
    color: var(--color-dark);
    line-height: 1.6;
    scroll-behavior: smooth; 
}
h1, h2, h3 {
    font-weight: 700;
}

/* ################ 2. EN-TÊTE (Header) et Navigation ################ */

.main-header {
    background-color: var(--color-white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky; 
    top: 0;
    z-index: 1000;
}

.logo a {
    font-size: 1.8em;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}

.main-nav ul {
    list-style: none;
    display: flex;
}

.main-nav ul li a {
    text-decoration: none;
    color: var(--color-dark);
    margin-left: 25px;
    padding: 5px 0;
    transition: color 0.3s, border-bottom 0.3s;
}

.main-nav ul li a:hover, .main-nav ul li a.active {
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
}

/* ################ 3. BANDEAU HÉROS (index.html) ################ */

.hero-section {
    background: var(--color-light); 
    padding: 100px 5%;
    text-align: center;
    margin-bottom: 40px;
}

.hero-section h1 {
    font-size: 3em;
    margin-bottom: 15px;
    color: var(--color-primary);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Styles des boutons principaux */
.btn-primary {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 8px; 
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: background-color 0.3s, transform 0.2s;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
}

.btn-primary:hover {
    background-color: #0056b3;
    transform: translateY(-3px); 
}

/* Styles des boutons plus petits */
.btn-small {
    padding: 8px 20px;
    font-size: 0.9em;
}

/* ################ 4. CADRES DE NIVEAU SCOLAIRE (index.html) ################ */

.categories-section {
    padding: 60px 5%;
    display: flex;
    justify-content: center;
    gap: 30px; 
    flex-wrap: wrap;
    text-align: center;
}

.categories-section h2 {
    width: 100%;
    text-align: center;
    font-size: 2.2em;
    color: var(--color-dark);
    margin-bottom: 50px;
}

.category-card {
    flex-basis: 300px; 
    text-decoration: none;
    color: var(--color-white);
    padding: 35px 25px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); 
    transition: transform 0.4s, box-shadow 0.4s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 270px;
}

.category-card:hover {
    transform: scale(1.05); 
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.card-icon {
    font-size: 4em;
    margin-bottom: 15px;
    line-height: 1;
}

/* Couleurs des cadres de niveau */
.primary-bg { background-color: var(--color-primaire); }
.secondary-bg { background-color: var(--color-college); }
.tertiary-bg { background-color: var(--color-lycee); }


/* ################ 5. BANDEAU DE NIVEAU/MATIÈRE ################ */

.level-hero {
    padding: 60px 5%;
    text-align: center;
    color: var(--color-white); 
    margin-bottom: 50px;
}

.level-hero h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
    color: var(--color-white);
}

/* ################ 6. GRILLE DE SÉLECTION DES MATIÈRES (primaire.html) ################ */

.subject-grid-container {
    padding: 40px 5% 80px 5%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.subject-grid-container h2 {
    font-size: 2em;
    color: var(--color-dark);
    margin-bottom: 40px;
}

.subject-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

/* Style du Cadre de Matière (Harmonisé avec les cadres de niveau) */
.subject-card {
    text-decoration: none;
    color: var(--color-white);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 180px;
}

.subject-card:hover {
    transform: translateY(-8px); 
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.subject-icon {
    font-size: 3.5em;
    margin-bottom: 15px;
}

.subject-card h3 {
    font-size: 1.5em;
    margin-bottom: 5px;
    color: var(--color-white);
}

/* Couleurs spécifiques aux Matières */
.card-maths { background-color: var(--color-maths); }
.card-francais { background-color: var(--color-francais); }
.card-sciences { background-color: var(--color-sciences); }
.card-histoire { background-color: var(--color-histoire); }
.card-langues { background-color: var(--color-langues); }
.card-logique { background-color: var(--color-logique); }


/* ################ 7. GRILLE DE LISTING DES JEUX (jeux-maths-primaire.html) ################ */

.games-grid-container {
    padding: 0 5% 80px 5%;
    max-width: 1200px;
    margin: 0 auto;
}

.games-grid-container h2 {
    text-align: center;
    font-size: 1.8em;
    color: var(--color-dark);
    margin-bottom: 40px;
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 30px;
}

/* Carte de Jeu Individuelle */
.game-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-light);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 20px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    min-height: 280px; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.game-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
}

.game-thumbnail {
    font-size: 3em;
    height: 80px;
    width: 80px;
    line-height: 80px;
    border-radius: 50%; 
    margin: 0 auto 15px auto;
    color: var(--color-white);
}

/* L'icône de la carte de jeu utilise la couleur de la matière via une classe HTML */
.card-maths .game-thumbnail { background-color: var(--color-maths); }
.card-francais .game-thumbnail { background-color: var(--color-francais); }
/* Ajoutez les autres matières ici si nécessaire */


.game-card h3 {
    font-size: 1.4em;
    margin-bottom: 8px;
    color: var(--color-primary);
}

.game-tag {
    display: inline-block;
    background-color: var(--color-light);
    color: var(--color-dark);
    font-size: 0.8em;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 10px;
}
.game-area {
    max-width: 800px;
    width: 90%;
    margin: 40px auto;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    background-color: var(--color-white);
    text-align: center;
    border: 3px solid var(--color-culture);
    /* --- AJOUT ICI --- */
    flex: 1; /* Dit à cette zone de prendre tout l'espace vide restant */
}
/* ################ 8. BOUTONS DE NIVEAU DE DIFFICULTÉ ################ */

.difficulty-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.btn-difficulty {
    display: inline-block;
    background-color: var(--color-light); 
    color: var(--color-dark);
    font-size: 0.8em;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    border: 1px solid #ddd;
}

/* Le survol est géré par des styles en ligne dans le HTML ou une surcharge plus spécifique
   car la couleur du hover dépend de la matière (Vert pour Maths, Rouge pour Français, etc.) */

/* Exemple de style de survol par défaut (à utiliser si aucune surcharge n'est faite) */
.btn-difficulty:hover {
    background-color: var(--color-primary); 
    color: var(--color-white);
    border-color: var(--color-primary);
}


/* ################ 9. PIED DE PAGE (Footer) ################ */

.main-footer {
    background-color: #000000;
    color: #ffffff;
    padding: 40px 20px;
    text-align: center;
    width: 100%;
    margin-top: auto; /* Sécurité supplémentaire pour pousser le footer */
    box-sizing: border-box;
}

.footer-links {
    margin-top: 15px;
}

.footer-links a {
    color: var(--color-light);
    text-decoration: none;
    margin: 0 15px;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--color-primary);
}

.main-footer p {
    margin-top: 10px;
}


/* ################ 10. RESPONSIVE DESIGN (Adaptation mobile) ################ */

/* ################ 10. RESPONSIVE DESIGN (Adaptation mobile) ################ */

/* Assure que les images ne dépassent jamais, même sur PC */
img { 
    max-width: 100%; 
    height: auto; 
}

@media (max-width: 768px) {
    
    .main-header {
        flex-direction: column;
    }
    
    .main-nav ul {
        padding-top: 10px;
        justify-content: center;
        gap: 15px;
    }
    
    .hero-section h1 {
        font-size: 2.2em;
    }

    /* --- AJOUT POUR LES TABLEAUX ET LE CONTENU --- */
    table { 
        display: block; 
        overflow-x: auto; 
        white-space: normal;
    }
    th, td { 
        min-width: 120px; 
        font-size: 14px; 
    }

    .fiche, .container {
        padding: 15px !important;
        margin: 10px !important;
        width: auto !important;
    }
    /* ------------------------------------------- */

    /* Adapter les grilles pour les petits écrans */
    .categories-section,
    .subject-grid,
    .games-grid {
        flex-direction: column;
        align-items: center;
    }

    .category-card,
    .subject-card,
    .game-card {
        width: 100%;
        max-width: 350px;
    }
    
    .features-grid {
        flex-direction: column;
    }
}