/* ===========================================
   VARIABLES CSS POUR FACILITER LA MAINTENANCE
=========================================== */
:root {
    /* Couleurs principales héritées du thème du site */
    --color-primary: #667eea;                           /* Couleur principale bleu-violet */
    --color-secondary: #764ba2;                         /* Couleur secondaire violet */
    --color-cours: #3498db;                             /* Bleu pour les éléments de cours */
    --color-tp: #e74c3c;                                /* Rouge pour les TP */
    --color-entrainement: #2ecc71;                      /* Vert pour l'entraînement */
    --color-text: #2c3e50;                              /* Couleur du texte principal (gris foncé) */
    --color-text-light: #495057;                        /* Couleur du texte secondaire (gris moyen) */
    --color-background: #E8F6FF;                        /* Couleur de fond de page (bleu très clair) */
    --color-white: #ffffff;                             /* Blanc pur */
    --color-light-gray: #f8f9fa;                        /* Gris très clair pour les fonds de carte */
    --color-accent: #ff8c00;                            /* Orange pour les accents (hover navigation) */
    --color-gold: gold;                                 /* Doré pour les effets spéciaux */
    
    /* Espacements standardisés pour la cohérence */
    --spacing-xs: 0.5rem;                               /* Très petit espacement (8px) */
    --spacing-sm: 1rem;                                 /* Petit espacement (16px) */
    --spacing-md: 1.5rem;                               /* Espacement moyen (24px) */
    --spacing-lg: 2rem;                                 /* Grand espacement (32px) */
    --spacing-xl: 2.5rem;                               /* Très grand espacement (40px) */
    
    /* Effets d'ombre pour la profondeur */
    --shadow-light: 0 5px 25px rgba(0, 0, 0, 0.1);     /* Ombre légère pour les éléments */
    --shadow-medium: 0 15px 40px rgba(0, 0, 0, 0.2);   /* Ombre moyenne pour les survols */
    --shadow-colored: 0 5px 25px rgba(102, 126, 234, 0.2); /* Ombre colorée avec la couleur primaire */
    
    /* Transitions fluides */
    --transition-smooth: all 0.3s ease;                 /* Animation fluide de 0.3 secondes */
}

/* ===========================================
   STYLES DE BASE
=========================================== */
* {
    box-sizing: border-box;                             /* Inclut padding et border dans la largeur totale */
}

html {
    background-color: var(--color-background);          /* Fond de page bleu très clair */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Police système moderne */
}

body {
    margin: 0;                                          /* Supprime les marges par défaut du navigateur */
    padding: 0;                                         /* Supprime le padding par défaut du navigateur */
    line-height: 1.6;                                   /* Hauteur de ligne optimale pour la lisibilité */
    color: var(--color-text);                           /* Couleur du texte principal */
}

/* ===========================================
   NAVIGATION
=========================================== */
nav {
    width: 100%;                                        /* Largeur complète de l'écran */
    background-color: var(--color-white);               /* Fond blanc pour la navigation */
    position: sticky;                                   /* Navigation qui reste en haut lors du scroll */
    top: 0;                                            /* Position collée en haut */
    z-index: 100;                                      /* Au-dessus de tous les autres éléments */
    box-shadow: var(--shadow-light);                   /* Ombre légère sous la barre de navigation */
}

nav ul {
    list-style: none;                                  /* Supprime les puces de liste par défaut */
    display: flex;                                     /* Affichage en ligne avec Flexbox */
    margin: 0;                                         /* Supprime les marges par défaut */
    padding: 0;                                        /* Supprime le padding par défaut */
}

nav li {
    flex: 1;                                           /* Chaque élément prend une part égale de l'espace */
    text-align: center;                                /* Centre le texte dans chaque élément */
}

nav a {
    display: block;                                    /* Affichage en bloc pour pouvoir définir le padding */
    padding: var(--spacing-sm) 0;                     /* Espacement vertical de 1rem */
    text-decoration: none;                             /* Supprime le soulignement des liens */
    color: var(--color-text);                          /* Couleur du texte des liens de navigation */
    border-bottom: 2px solid transparent;              /* Bordure transparente pour l'effet hover */
    transition: var(--transition-smooth);              /* Animation fluide pour tous les changements */
}

nav a:hover {
    color: var(--color-accent);                        /* Couleur orange au survol */
    border-bottom-color: var(--color-gold);            /* Bordure dorée au survol */
}

/* ===========================================
   SECTION HERO (BANNIÈRE PRINCIPALE)
=========================================== */
.hero-section {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); /* Dégradé de bleu-violet vers violet */
    color: var(--color-white);                         /* Texte blanc sur fond coloré */
    text-align: center;                                /* Texte centré */
    padding: var(--spacing-xl) var(--spacing-sm);      /* Padding vertical large, horizontal petit */
    position: relative;                                /* Position relative pour les éléments absolus enfants */
    overflow: hidden;                                  /* Cache les débordements des animations */
}

.hero-section::before {
    content: '';                                       /* Pseudo-élément vide pour l'animation */
    position: absolute;                                /* Position absolue pour le placement libre */
    top: 0;                                           /* Position en haut */
    left: 0;                                          /* Position à gauche */
    right: 0;                                         /* Étend jusqu'à droite */
    bottom: 0;                                        /* Étend jusqu'en bas */
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="70" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="70" cy="20" r="1.2" fill="rgba(255,255,255,0.1)"/></svg>') repeat; /* Motif de cercles en SVG */
    animation: float 20s infinite linear;              /* Animation de flottement de 20 secondes en boucle */
}

@keyframes float {
    0% { transform: translateY(0px) translateX(0px); }    /* Position initiale */
    100% { transform: translateY(-100px) translateX(100px); } /* Position finale : monte et va à droite */
}

.hero-content {
    position: relative;                                /* Position relative pour passer au-dessus de l'animation */
    z-index: 1;                                       /* Au-dessus du fond animé */
    max-width: 1000px;                                 /* Largeur maximale du contenu */
    margin: 0 auto;                                   /* Centrage horizontal */
}

.hero-title {
    font-size: 3rem;                                  /* Grande taille de police pour le nom */
    font-weight: 900;                                 /* Poids très gras */
    margin: 0 0 var(--spacing-sm) 0;                  /* Marge en bas de 1rem */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);         /* Ombre portée pour le contraste */
}

.hero-subtitle {
    font-size: 1.5rem;                                /* Taille de police moyenne pour la matière */
    font-weight: 300;                                 /* Poids léger */
    margin: 0 0 var(--spacing-md) 0;                  /* Marge en bas de 1.5rem */
    opacity: 0.9;                                     /* Légère transparence */
}

.hero-school {
    font-size: 1.1rem;                                /* Taille de police pour l'établissement */
    margin: 0 0 var(--spacing-lg) 0;                  /* Marge en bas de 2rem */
    opacity: 0.8;                                     /* Plus de transparence que le sous-titre */
}

.hero-description {
    font-size: 1.1rem;                                /* Taille de police pour la description */
    line-height: 1.7;                                 /* Hauteur de ligne augmentée pour la lisibilité */
    margin-bottom: var(--spacing-xl);                 /* Marge en bas de 2.5rem */
    opacity: 0.9;                                     /* Légère transparence */
}

/* ===========================================
   SECTION DES CLASSES
=========================================== */
.classes-section {
    max-width: 1200px;                                /* Largeur maximale du contenu */
    margin: var(--spacing-xl) auto;                   /* Marges verticales et centrage horizontal */
    padding: 0 var(--spacing-sm);                     /* Padding horizontal de 1rem */
}

.section-title {
    text-align: center;                               /* Titre centré */
    font-size: 2.5rem;                                /* Grande taille de police */
    color: var(--color-primary);                      /* Couleur principale du thème */
    margin: 0 0 var(--spacing-xl) 0;                  /* Marge en bas de 2.5rem */
    font-weight: 700;                                 /* Poids gras */
}

.section-description {
    text-align: center;                               /* Description centrée */
    color: var(--color-text-light);                   /* Couleur de texte secondaire */
    font-size: 1.1rem;                                /* Taille légèrement plus grande */
    margin-bottom: var(--spacing-lg);                 /* Marge en bas de 2rem */
}

.classes-grid {
    display: grid;                                    /* Affichage en grille CSS */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Colonnes adaptatives, minimum 350px */
    gap: var(--spacing-lg);                           /* Espace de 2rem entre les cartes */
    margin-bottom: var(--spacing-xl);                 /* Marge en bas de 2.5rem */
}

/* ===========================================
   CARTES DES CLASSES
=========================================== */
.class-card {
    background: var(--color-white);                   /* Fond blanc */
    border-radius: 20px;                              /* Coins arrondis de 20px */
    padding: var(--spacing-lg);                       /* Padding de 2rem */
    box-shadow: var(--shadow-light);                  /* Ombre légère */
    border: 3px solid;                                /* Bordure de 3px (couleur définie par les modificateurs) */
    transition: var(--transition-smooth);             /* Animation fluide */
    text-decoration: none;                            /* Supprime le soulignement des liens */
    color: inherit;                                   /* Hérite de la couleur du parent */
    position: relative;                               /* Position relative pour les pseudo-éléments */
    overflow: hidden;                                 /* Cache les débordements des effets */
    text-align: center;                               /* Texte centré */    
}

.class-card::before {
    content: '';                                      /* Pseudo-élément vide pour l'effet de brillance */
    position: absolute;                               /* Position absolue pour le placement libre */
    top: -50%;                                        /* Position au-dessus de la carte */
    right: -50%;                                      /* Position à droite de la carte */
    width: 200%;                                      /* Largeur double pour couvrir toute la carte */
    height: 200%;                                     /* Hauteur double pour couvrir toute la carte */
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%); /* Dégradé de brillance */
    transform: translateX(-100%) translateY(-100%);   /* Position initiale hors de la carte */
    transition: var(--transition-smooth);             /* Animation fluide */
}

.class-card:hover::before {
    transform: translateX(0) translateY(0);           /* Animation de la brillance au survol */
}

.class-card:hover {
    transform: translateY(-10px);                     /* Soulève la carte de 10px au survol */
    box-shadow: var(--shadow-medium);                 /* Ombre plus prononcée au survol */
}

/* Types de cartes avec couleurs spécifiques */
.class-card--seconde {
    border-color: var(--color-cours);                 /* Bordure bleue pour la 2nde */
}

.class-card--terminale {
    border-color: var(--color-entrainement);          /* Bordure verte pour la Terminale */
}

.class-card--sti2d {
    border-color: var(--color-tp);                     /* Bordure rouge pour STI2D */
}

.class-card-icon {
    font-size: 3rem;                                  /* Grande taille pour l'icône */
    margin-bottom: var(--spacing-sm);                 /* Marge en bas de 1rem */
    display: block;                                   /* Affichage en bloc */
}

.class-card-title {
    font-size: 1.8rem;                                /* Taille de police du titre de carte */
    font-weight: 700;                                 /* Poids gras */
    margin: 0 0 var(--spacing-sm) 0;                  /* Marge en bas de 1rem */
    color: var(--color-text);                         /* Couleur du texte principal */
}

.class-card-description {
    color: var(--color-text-light);                   /* Couleur de texte secondaire */
    margin-bottom: var(--spacing-md);                 /* Marge en bas de 1.5rem */
    line-height: 1.6;                                 /* Hauteur de ligne pour la lisibilité */
}

.class-card-features {
    list-style: none;                                 /* Supprime les puces par défaut */
    padding: 0;                                       /* Supprime le padding par défaut */
    margin: 0;                                        /* Supprime les marges par défaut */
}

.class-card-features li {
    padding: var(--spacing-xs) 0;                     /* Padding vertical de 0.5rem */
    color: var(--color-text-light);                   /* Couleur de texte secondaire */
    position: relative;                               /* Position relative pour le pseudo-élément */
    padding-left: var(--spacing-md);                  /* Padding à gauche pour laisser place à la coche */
}

.class-card-features li::before {
    content: '✓';                                     /* Coche verte devant chaque élément */
    position: absolute;                               /* Position absolue pour le placement libre */
    left: 0;                                          /* Position à gauche */
    color: var(--color-entrainement);                 /* Couleur verte */
    font-weight: bold;                                /* Poids gras pour la coche */
}

/* ===========================================
   SECTION INFORMATIONS
=========================================== */
.info-section {
    background: var(--color-white);                   /* Fond blanc */
    margin: var(--spacing-xl) auto;                   /* Marges verticales et centrage horizontal */
    max-width: 1200px;                                /* Largeur maximale */
    border-radius: 20px;                              /* Coins arrondis */
    padding: var(--spacing-xl);                       /* Padding de 2.5rem */
    box-shadow: var(--shadow-light);                  /* Ombre légère */
    text-align: center;                               /* Texte centré */
}

.info-grid {
    display: grid;                                    /* Affichage en grille */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Colonnes adaptatives, minimum 300px */
    gap: var(--spacing-lg);                           /* Espace de 2rem entre les cartes */
    margin-top: var(--spacing-lg);                    /* Marge en haut de 2rem */
}

.info-card {
    padding: var(--spacing-md);                       /* Padding de 1.5rem */
    border-radius: 15px;                              /* Coins arrondis */
    background: var(--color-light-gray);              /* Fond gris clair */
    transition: var(--transition-smooth);             /* Animation fluide */
}

.info-card:hover {
    transform: translateY(-5px);                      /* Soulève légèrement au survol */
    box-shadow: var(--shadow-light);                  /* Ajoute une ombre au survol */
}

.info-icon {
    font-size: 2.5rem;                                /* Grande taille pour l'icône */
    margin-bottom: var(--spacing-sm);                 /* Marge en bas de 1rem */
    display: block;                                   /* Affichage en bloc */
}

.info-title {
    font-size: 1.3rem;                                /* Taille de police du titre */
    font-weight: 600;                                 /* Poids semi-gras */
    margin: 0 0 var(--spacing-sm) 0;                  /* Marge en bas de 1rem */
    color: var(--color-text);                         /* Couleur du texte principal */
}

.info-description {
    color: var(--color-text-light);                   /* Couleur de texte secondaire */
    line-height: 1.6;                                 /* Hauteur de ligne pour la lisibilité */
}

/* ===========================================
   SECTION SPÉCIALE (CAHIERS DE VACANCES)
=========================================== */
.special-section {
    background: linear-gradient(135deg, var(--color-entrainement) 0%, var(--color-cours) 100%); /* Dégradé vert vers bleu */
    color: var(--color-white);                        /* Texte blanc sur fond coloré */
    text-align: center;                               /* Texte centré */
    padding: var(--spacing-xl);                       /* Padding de 2.5rem */
    margin: var(--spacing-xl) auto;                   /* Marges verticales et centrage horizontal */
    max-width: 1200px;                                /* Largeur maximale */
    border-radius: 20px;                              /* Coins arrondis */
    box-shadow: var(--shadow-medium);                 /* Ombre moyenne */
}

.special-title {
    font-size: 2rem;                                  /* Grande taille pour le titre */
    font-weight: 700;                                 /* Poids gras */
    margin: 0 0 var(--spacing-md) 0;                  /* Marge en bas de 1.5rem */
}

.special-description {
    font-size: 1.1rem;                                /* Taille de police légèrement plus grande */
    opacity: 0.9;                                     /* Légère transparence */
    line-height: 1.6;                                 /* Hauteur de ligne pour la lisibilité */
}

/* ===========================================
   FOOTER
=========================================== */
.footer-section {
    background: var(--color-text);                    /* Fond gris foncé */
    color: var(--color-white);                        /* Texte blanc */
    text-align: center;                               /* Texte centré */
    padding: var(--spacing-lg);                       /* Padding de 2rem */
    margin-top: var(--spacing-xl);                    /* Marge en haut de 2.5rem */
}

.contact-info {
    margin-bottom: var(--spacing-sm);                 /* Marge en bas de 1rem */
    max-width: 1000px;                                 /* Largeur maximale pour la lisibilité */
    margin-left: auto;                                /* Centrage horizontal */
    margin-right: auto;                               /* Centrage horizontal */
}

.contact-info p {
    margin-bottom: var(--spacing-sm);                 /* Marge en bas entre les paragraphes */
    line-height: 1.6;                                 /* Hauteur de ligne pour la lisibilité */
}

/* ===========================================
   RESPONSIVE DESIGN
=========================================== */
@media (max-width: 768px) {                          /* Styles pour écrans de 768px et moins (mobiles/tablettes) */
    .hero-title {
        font-size: 2.2rem;                            /* Réduit la taille du titre principal sur mobile */
    }

    .hero-subtitle {
        font-size: 1.2rem;                            /* Réduit la taille du sous-titre sur mobile */
    }

    .section-title {
        font-size: 2rem;                              /* Réduit la taille des titres de section */
    }

    .classes-grid {
        grid-template-columns: 1fr;                   /* Une seule colonne pour les cartes sur mobile */
        gap: var(--spacing-md);                       /* Réduit l'espace entre les cartes */
    }

    .class-card {
        padding: var(--spacing-md);                   /* Réduit le padding des cartes */
    }

    .info-grid {
        grid-template-columns: 1fr;                   /* Une seule colonne pour les infos sur mobile */
    }

    .hero-section {
        padding: var(--spacing-lg) var(--spacing-sm); /* Réduit le padding vertical de la section hero */
    }

    .info-section,
    .special-section {
        margin-left: var(--spacing-sm);               /* Ajoute des marges latérales sur mobile */
        margin-right: var(--spacing-sm);              /* Ajoute des marges latérales sur mobile */
        padding: var(--spacing-lg);                   /* Réduit le padding sur mobile */
    }

    .class-card-icon {
        font-size: 2.5rem;                            /* Réduit la taille des icônes sur mobile */
    }

    .class-card-title {
        font-size: 1.5rem;                            /* Réduit la taille des titres de carte sur mobile */
    }
}