/* ################ 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;
}

/* ################ 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: var(--color-dark);
    color: var(--color-light);
    padding: 30px 5%;
    text-align: center;
    font-size: 0.9em;
    border-top: 5px solid var(--color-primary); 
}

.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) ################ */

@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;
    }

    /* 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;
    }
}