/* ===========================================
   VARIABLES CSS POUR FACILITER LA MAINTENANCE
=========================================== */
:root {
    /* Couleurs principales héritées du thème */
    --color-primary: limegreen;                          /* Couleur principale vert lime */
    --color-cours: rgb(51,187,76);                              /* couleur pour les éléments de cours */
    --color-tp: rgb(42,118,95);                                 /* couleur pour les TP */
    --color-entrainement: palegreen;                       /* couleur 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: #EAFEF0;                         /* Couleur de fond de page (vert très clair) */
    --color-white: #ffffff;                              /* Blanc pur */
    --color-light-gray: #f8f9fa;                         /* Gris très clair */
    
    /* Couleurs spécifiques aux fiches méthodes */
    --color-method: rgb(165, 222, 205);                             /* couleurs pour les fiches méthdoes */
    
    /* Espacements standardisés */
    --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 */
    --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 */
    
    /* Transitions */
    --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 */
}

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

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

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

nav ul {
    list-style: none;                                   /* Supprime les puces de liste */
    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 padding */
    padding: var(--spacing-sm) 0;                      /* Espacement vertical de 1rem */
    text-decoration: none;                              /* Supprime le soulignement */
    color: var(--color-text);                           /* Couleur du texte des liens */
    border-bottom: 2px solid transparent;               /* Bordure transparente pour l'effet hover */
    transition: var(--transition-smooth);               /* Animation fluide pour les changements */
}

nav a:hover {
    color: #ff8c00;                                     /* Couleur orange au survol */
    border-bottom-color: gold;                          /* Bordure dorée au survol */
}

/* ===========================================
   TITRES PRINCIPAUX
=========================================== */
.page-title {
    text-align: center;                                 /* Centre le titre */
    margin: var(--spacing-lg) 0;                       /* Marges verticales de 2rem */
    padding: 0 var(--spacing-sm);                      /* Padding horizontal de 1rem */
}

.page-title h1 {
    font-size: 2.5rem;                                  /* Taille de police grande pour le titre */
    color: var(--color-text);                           /* Couleur du texte principal */
    margin: 0;                                          /* Supprime les marges par défaut */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);          /* Ombre légère sur le texte */
}

/* ===========================================
   SECTIONS DE CHAPITRE
=========================================== */
.chapter-section {
    margin: var(--spacing-xl) auto;                     /* Marges verticales et centrage horizontal */
    max-width: 1400px;                                  /* Largeur maximale de 1200px */
    padding: 0 var(--spacing-sm);                       /* Padding horizontal de 1rem */
}

.chapter-header {
    margin-bottom: var(--spacing-lg);
}
.chapter-title {
    display: flex;                                      /* Flexbox pour aligner l'icône et le texte */
    align-items: center;                                /* Centre verticalement */
    justify-content: center;                            /* Centre horizontalement */
    gap: var(--spacing-sm);                             /* Espace de 1rem entre l'icône et le texte */
    font-size: 1.8rem;                                  /* Taille de police de 1.8rem */
    font-weight: 700;                                   /* Poids gras */
    margin: 0 0 var(--spacing-xl) 0;                    /* Marge en bas de 2.5rem */
    padding: var(--spacing-md) var(--spacing-lg);       /* Padding interne */
    background: var(--color-white);                     /* Fond blanc */
    color: var(--color-primary);                        /* Texte vert lime */
    border: 3px solid var(--color-primary);             /* Bordure verte de 3px */
    border-radius: 20px;                                /* Coins arrondis */
    box-shadow: var(--shadow-light);                    /* Ombre légère */
    transition: var(--transition-smooth);               /* Animation fluide */
}

.chapter-title:hover {
    transform: translateY(-2px);                        /* Déplace vers le haut au survol */
    box-shadow: var(--shadow-medium);                   /* Ombre plus prononcée au survol */
}

.chapter-icon {
    font-size: 2.2rem; /*taille des icones dans le titre de chapitre */
    animation: pulse 3s infinite;
}

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


/* ===========================================
   LAYOUT DEUX COLONNES
=========================================== */
.two-column-layout {
    display: grid;                      /* Utilise CSS Grid pour créer un système de grille */
    grid-template-columns: 1fr 1fr;     /* Définit 2 colonnes de largeur égale (1fr = 1 fraction de l'espace disponible) */
    gap: var(--spacing-xl);             /* Espace entre les colonnes utilisant la variable CSS --spacing-xl (2.5rem) */
    margin-bottom: var(--spacing-xl);   /* Marge en bas du conteneur pour l'espacer du contenu suivant */
}

.column-container {
    display: flex;                      /* Utilise Flexbox pour organiser les éléments enfants */
    flex-direction: column;             /* Les éléments s'empilent verticalement (en colonne) */
    gap: var(--spacing-lg);             /* Espace entre chaque élément enfant utilisant --spacing-lg (2rem) */
}

/* ===========================================
   CARTES PRINCIPALES DES COLONNES
=========================================== */
.main-column-card {
    background: var(--color-white);     /* Couleur de fond blanche utilisant la variable CSS --color-white */
    border-radius: 15px;                /* Coins arrondis avec un rayon de 15 pixels */
    padding: var(--spacing-lg);         /* Espacement intérieur utilisant --spacing-lg (2rem) */
    box-shadow: var(--shadow-light);    /* Ombre légère utilisant la variable --shadow-light */
    border: 3px solid;                  /* Bordure solide de 3 pixels (couleur définie dans les classes spécifiques) */
    transition: var(--transition-smooth);/* Animation fluide pour tous les changements utilisant --transition-smooth */
}

.main-column-card--dm {
    border-color: var(--color-cours);    /* Couleur de bordure pour les cartes "Devoirs Maison" */
}

.main-column-card--ds {
    border-color: var(--color-tp);       /* Couleur de bordure  pour les cartes "Devoirs Surveillés" */
}

.main-column-card:hover {
    transform: translateY(-5px);        /* Déplace la carte de 5px vers le haut au survol */
    box-shadow: var(--shadow-medium);   /* Ombre plus prononcée au survol pour effet de profondeur */
}

.main-card-title {
    font-size: 1.8rem;                  /* Taille de police de 1.8rem pour le titre */
    font-weight: 700;                   /* Poids de police gras (700 = bold) */
    margin: 0 0 var(--spacing-lg) 0;    /* Marge : 0 en haut, 0 à droite, spacing-lg en bas, 0 à gauche */
    text-align: center;                 /* Texte centré horizontalement */
    color: var(--color-text);           /* Couleur du texte utilisant --color-text */
    display: flex;                      /* Utilise Flexbox pour l'alignement des éléments internes */               
    align-items: center;                /* Centre les éléments verticalement */
    justify-content: center;            /* Centre les éléments horizontalement */
    gap: var(--spacing-sm);             /* Espace de 1rem entre l'icône et le texte */
}

.main-card-icon {
    font-size: 2rem;                    /* Taille de police de 2rem pour les icônes */
}

/* ===========================================
   CONTENEUR DES SOUS-CARTES
=========================================== */
.sub-cards-container {
    display: flex;                      /* Utilise Flexbox pour organiser les sous-cartes */
    flex-direction: column;             /* Empile les sous-cartes verticalement */
    gap: var(--spacing-md);             /* Espace de 1.5rem entre chaque sous-carte */
}

/* ===========================================
   SOUS-CARTES INDIVIDUELLES
=========================================== */
.sub-card {
    background: rgba(248, 249, 250, 0.7);     /* Fond gris très clair avec 70% d'opacité */
    border-radius: 12px;                      /* Coins arrondis de 12px */
    padding: var(--spacing-md);               /* Espacement intérieur de 1.5rem */
    border: 2px solid transparent;            /* Bordure transparente de 2px (invisible par défaut) */
    transition: var(--transition-smooth);     /* Animation fluide pour tous les changements */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Ombre légère : 2px vers le bas, flou 10px, opacité 5% */
}

.sub-card:hover {
    transform: translateY(-2px);              /* Déplace la sous-carte de 2px vers le haut au survol */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Ombre plus prononcée au survol : 4px vers le bas, flou 15px, opacité 10% */
}

.sub-card--dm {
    border-color: var(--color-cours);   /* Bordure pour les DM */
}

.sub-card--dm:hover {
    border-color: var(--color-cours);        /* Bordure pleine au survol pour les DM */
    background: rgba(51,187,76,0.1);    /* Fond très léger (5% d'opacité) au survol pour les DM */
}

.sub-card--ds {
    border-color: var(--color-TP);    /* Bordure pour les DS */
}

.sub-card--ds:hover {
    border-color: var(--color-tp);           /* Bordure rouge pleine au survol pour les DS */
    background: rgba(42,118,95,0.1);     /* Fond rouge très léger (5% d'opacité) au survol pour les DS */
}

.sub-card-title {
    font-size: 1.2rem;                       /* Taille de police de 1.2rem pour les titres des sous-cartes */
    font-weight: 600;                        /* Poids de police semi-gras (600) */
    margin: 0 0 var(--spacing-sm) 0;         /* Marge : 0 en haut, 0 à droite, 1rem en bas, 0 à gauche */
    color: var(--color-text);                /* Couleur du texte principal */
    display: flex;                           /* Utilise Flexbox pour aligner l'icône et le texte */
    align-items: center;                     /* Centre verticalement l'icône et le texte */
    gap: var(--spacing-xs);                  /* Espace de 0.5rem entre l'icône et le texte */
}

.sub-card-icon {
    font-size: 1.4rem;                       /* Taille de police de 1.4rem pour les icônes des sous-cartes */
}

.sub-card-links {
    display: flex;                           /* Utilise Flexbox pour organiser les liens */
    flex-direction: column;                  /* Empile les liens verticalement */
    gap: var(--spacing-xs);                  /* Espace de 0.5rem entre chaque lien */
}

.sub-card-link {
    display: inline-block;                   /* Permet de définir padding et margin comme un bloc, mais reste en ligne */
    padding: var(--spacing-xs) var(--spacing-sm); /* Espacement intérieur : 0.5rem vertical, 1rem horizontal */
    background: var(--color-light-gray);     /* Fond gris clair */
    color: var(--color-text);                /* Couleur du texte principal */
    text-decoration: none;                   /* Supprime le soulignement des liens */
    border-radius: 20px;                     /* Coins très arrondis de 20px (forme pilule) */
    font-size: 0.9rem;                       /* Taille de police légèrement réduite à 0.9rem */
    transition: var(--transition-smooth);    /* Animation fluide pour les changements */
    border: 2px solid transparent;           /* Bordure transparente de 2px */
}

.sub-card-link--dm:hover {
    background: var(--color-cours);          /* Fond bleu au survol pour les liens DM */
    color: var(--color-white);               /* Texte blanc au survol pour les liens DM */
    transform: scale(1.02);                  /* Agrandit légèrement le lien (102% de sa taille) au survol */
}

.sub-card-link--ds:hover {
    background: var(--color-tp);             /* Fond rouge au survol pour les liens DS */
    color: var(--color-white);               /* Texte blanc au survol pour les liens DS */
    transform: scale(1.02);                  /* Agrandit légèrement le lien (102% de sa taille) au survol */
}
/* ===========================================
   GRILLE DE CARTES (POUR BAC BLANC)
=========================================== */
.content-grid {
    display: grid;                                      /* Utilise CSS Grid pour créer une grille */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Colonnes adaptatives : minimum 320px, maximum 1 fraction */
    gap: var(--spacing-lg);                             /* Espace de 2rem entre les cartes de la grille */
}

/* ===========================================
   CARTES DE CONTENU CLASSIQUES
=========================================== */
.content-card {
    background: var(--color-white);                     /* Couleur du fond des cartes (blanc) */
    border-radius: 15px;                                /* Coins arrondis de 15px */
    padding: var(--spacing-lg);                         /* Espacement intérieur de 2rem */
    box-shadow: var(--shadow-light);                    /* Ombre légère */
    transition: var(--transition-smooth);               /* Animation fluide pour tous les changements */
    border: 3px solid transparent;                      /* Bordure transparente de 3px (invisible par défaut) */
    height: fit-content;                                /* Hauteur automatique selon le contenu */
}

.content-card:hover {                                   /* État au survol des cartes */
    transform: translateY(-8px);                        /* Déplace la carte de 8px vers le haut */
    box-shadow: var(--shadow-medium);                   /* Ombre plus prononcée au survol */
}

/* Types de cartes */
.content-card--cours {
    border-color: var(--color-cours);                   /* Bordure bleue pour les cartes de cours */
}

.content-card--cours:hover {
    background: linear-gradient(135deg, rgba(51,187,76,0.37) 0%, var(--color-white) 100%); /* Dégradé bleu clair au survol */
}

.content-card--tp {
    border-color: var(--color-tp);                      /* Bordure rouge pour les cartes de TP */
}

.content-card--tp:hover {
    background: linear-gradient(135deg, rgba(42,118,95,0.37) 0%, var(--color-white) 100%); /* Dégradé rouge clair au survol */
}

.content-card--entrainement {
    border-color: var(--color-entrainement);            /* Bordure verte pour les cartes d'entraînement */
}

.content-card--entrainement:hover {
    background: linear-gradient(135deg, rgba(152,251,152,0.37) 0%, var(--color-white) 100%); /* Dégradé vert clair au survol */
}

/* Titre des cartes */
.card-title {
    display: flex;                                      /* Utilise Flexbox pour aligner l'icône et le texte */
    align-items: center;                                /* Centre verticalement l'icône et le texte */
    gap: var(--spacing-xs);                             /* Espace de 0.5rem entre l'icône et le texte */
    
    font-size: 1.4rem;                                  /* Taille de police de 1.4rem */
    font-weight: 600;                                   /* Poids de police semi-gras */
    margin: 0 0 var(--spacing-sm) 0;                    /* Marge : 0 en haut, 0 à droite, 1rem en bas, 0 à gauche */
    color: var(--color-text);                           /* Couleur du texte principal */
}

.card-icon {
    font-size: 1.6rem;                                  /* Taille de police de 1.6rem pour les icônes */
}

/* ===========================================
   LIENS DANS LES CARTES CLASSIQUES
=========================================== */
.card-links {
    display: flex;                                      /* Utilise Flexbox pour organiser les liens */
    flex-direction: column;                             /* Empile les liens verticalement */
    gap: var(--spacing-xs);                             /* Espace de 0.5rem entre chaque lien */
}

.card-link {
    display: inline-block;                              /* Permet de définir padding et margin comme un bloc */
    padding: var(--spacing-xs) var(--spacing-sm);       /* Espacement intérieur : 0.5rem vertical, 1rem horizontal */
    background: var(--color-light-gray);                /* Fond gris clair */
    color: var(--color-text-light);                     /* Couleur du texte secondaire (plus sombre) */
    text-decoration: none;                              /* Supprime le soulignement des liens */
    border-radius: 20px;                                /* Coins très arrondis de 20px (forme pilule) */
    font-size: 0.9rem;                                  /* Taille de police légèrement réduite */
    transition: var(--transition-smooth);               /* Animation fluide pour les changements */
    border: 2px solid transparent;                      /* Bordure transparente de 2px */
}

.card-link:hover {
    background: var(--color-primary);                   /* Fond vert lime au survol (couleur primaire) */
    color: var(--color-white);                          /* Texte blanc au survol */
    transform: scale(1.02);                             /* Agrandit légèrement le lien (102%) au survol */
}

.card-link--cours:hover {
    background: var(--color-cours);                     /* Fond bleu au survol pour les liens de cours */
    color: var(--color-white);                          /* Texte blanc au survol */
    transform: scale(1.02);                             /* Agrandit légèrement le lien au survol */
}

.card-link--TP:hover {
    background: var(--color-tp);                        /* Fond rouge au survol pour les liens de TP */
    color: var(--color-white);                          /* Texte blanc au survol */
    transform: scale(1.02);                             /* Agrandit légèrement le lien au survol */
}

.card-link--entrainement:hover {
    background: var(--color-entrainement);              /* Fond vert au survol pour les liens d'entraînement */
    color: var(--color-white);                          /* Texte blanc au survol */
    transform: scale(1.02);                             /* Agrandit légèrement le lien au survol */
}

        /* ===========================================
           STYLES POUR LISTES IMBRIQUÉES DANS LES CARTES
        =========================================== */
        .card-links ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: var(--spacing-xs);
        }

        .card-links li {
            margin: 0;
            padding: 0;
        }

        /* Styles pour les sous-listes (listes imbriquées) */
        .card-links ul ul {
            margin-top: var(--spacing-xs);
            margin-left: var(--spacing-md);
            gap: calc(var(--spacing-xs) * 0.5);
        }

        .card-links ul ul li {
            font-size: 0.85rem;
            color: var(--color-text-light);
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
        }

        .card-links ul ul li strong {
            color: var(--color-text);
            font-weight: 600;
        }

        /* Ajustement pour que le texte et le lien restent sur la même ligne */
        .card-links ul ul li .card-link {
            display: inline;
            padding: calc(var(--spacing-xs) * 0.5) var(--spacing-xs);
            font-size: 0.85rem;
            margin-left: var(--spacing-xs);
        }

        /* Sous-liste pour les liens imbriqués (ancienne version conservée pour compatibilité) */
        .card-sublinks {
            margin-left: var(--spacing-sm);
            margin-top: var(--spacing-xs);
        }

        .card-sublinks .card-link {
            font-size: 0.85rem;
            background: rgba(248, 249, 250, 0.7);
        }


/* ===========================================
   RESPONSIVE DESIGN
=========================================== */
@media (max-width: 768px) {                            /* Styles pour écrans de 768px et moins (mobiles/tablettes) */
    .page-title h1 {
        font-size: 2rem;                                /* Réduit la taille du titre principal sur mobile */
    }
    
    .chapter-title {
        font-size: 1.5rem;                              /* Réduit la taille des titres de chapitre */
        flex-direction: column;                         /* Empile l'icône et le texte verticalement */
        text-align: center;                             /* Centre le texte */
        gap: var(--spacing-xs);                         /* Réduit l'espace entre l'icône et le texte */
    }
    
    .chapter-icon {
        font-size: 2rem;                                /* Réduit la taille des icônes de chapitre */
    }
    
    .two-column-layout {
        grid-template-columns: 1fr;                     /* Passe à une seule colonne sur mobile */
        gap: var(--spacing-lg);                         /* Conserve l'espace entre les éléments */
    }
    
    .content-grid {
        grid-template-columns: 1fr;                     /* Une seule colonne pour la grille sur mobile */
        gap: var(--spacing-sm);                         /* Réduit l'espace entre les cartes */
    }
    
    .content-card,
    .main-column-card {
        padding: var(--spacing-sm);                     /* Réduit l'espacement intérieur des cartes */
    }

    .main-card-title {
        font-size: 1.5rem;                              /* Réduit la taille des titres des cartes principales */
        flex-direction: column;                         /* Empile l'icône et le texte verticalement */
        gap: var(--spacing-xs);                         /* Réduit l'espace entre l'icône et le texte */
    }

    .main-card-icon {
        font-size: 1.8rem;                              /* Réduit la taille des icônes des cartes principales */
    }
}

/* ===========================================
   UTILITAIRES
=========================================== */
.text-center {
    text-align: center;                                 /* Classe utilitaire pour centrer le texte */
}

.hidden {
    display: none;                                      /* Classe utilitaire pour masquer un élément */
}
/* ===========================================
   SECTION STATISTIQUES
=========================================== */
.stats-section {
    background: var(--color-white);                     /* Fond blanc */
    border-radius: 15px;                                /* Coins arrondis */
    padding: var(--spacing-lg);                         /* Padding de 2rem */
    margin-bottom: var(--spacing-xl);                   /* Marge en bas de 2.5rem */
    text-align: center;                                 /* Texte centré */
    box-shadow: var(--shadow-light);                    /* Ombre légère */
}

.stats-section h3 {
    margin: 0 0 var(--spacing-md) 0;                    /* Marge en bas de 1.5rem */
    color: var(--color-text);                           /* Couleur du texte principal */
    font-size: 1.3rem;                                  /* Taille de police de 1.3rem */
}

.stats-grid {
    display: grid;                                      /* Affichage en grille */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Colonnes adaptatives, minimum 200px */
    gap: var(--spacing-md);                             /* Espace de 1.5rem entre les éléments */
    margin-top: var(--spacing-md);                      /* Marge en haut de 1.5rem */
}

.stat-item {
    padding: var(--spacing-sm);                         /* Padding de 1rem */
}

.stat-number {
    font-size: 2.5rem;                                  /* Grande taille pour les chiffres */
    font-weight: 900;                                   /* Poids très gras */
    color: var(--color-primary);                        /* Couleur verte */
    display: block;                                     /* Affichage en bloc */
}

.stat-label {
    font-size: 0.9rem;                                  /* Petite taille pour les labels */
    color: var(--color-text-light);                     /* Couleur grise */
    text-transform: uppercase;                          /* Texte en majuscules */
    letter-spacing: 1px;                                /* Espacement entre les lettres */
}

/* ===========================================
   GRILLE DES FICHES MÉTHODES
=========================================== */
.methods-grid {
    display: grid;                                      /* Affichage en grille */
    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 FICHES MÉTHODES
=========================================== */
.method-card {
    background: var(--color-white);                     /* Fond blanc */
    border-radius: 15px;                                /* Coins arrondis */
    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 */
    position: relative;                                 /* Position relative pour le numéro en arrière-plan */
    overflow: hidden;                                   /* Cache les débordements */
}

.method-card:hover {
    transform: translateY(-8px);                        /* Déplace vers le haut au survol */
    box-shadow: var(--shadow-medium);                   /* Ombre plus prononcée au survol */
}

/* Types de cartes avec couleurs spécifiques */
.method-card--general {
    border-color: var(--color-method);                  /* Bordure violette pour les outils généraux */
}

.method-card--general:hover {
    background: linear-gradient(135deg, rgba(165, 222, 205,0.2) 0%, var(--color-white) 100%); /* Dégradé  au survol */
}
/* ===========================================
   ÉLÉMENTS DES CARTES
=========================================== */
.method-number {
    position: absolute;                                 /* Position absolue pour le placement libre */
    top: -5px;                                          /* Position verticale */
    right: 15px;                                        /* Position horizontale */
    font-size: 3rem;                                    /* Grande taille pour le numéro */
    font-weight: 900;                                   /* Poids très gras */
    opacity: 0.1;                                       /* Très transparent (arrière-plan) */
    z-index: 0;                                         /* Derrière le contenu */
    color: inherit;                                     /* Hérite de la couleur de la bordure */
}

.method-content {
    position: relative;                                 /* Position relative pour passer au-dessus du numéro */
    z-index: 1;                                         /* Au-dessus du numéro d'arrière-plan */
}

.method-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 */
}

.method-title {
    font-size: 1.3rem;                                  /* Taille de police de 1.3rem */
    font-weight: 700;                                   /* Poids gras */
    margin: 0 0 var(--spacing-xs) 0;                    /* Marge en bas de 0.5rem */
    color: var(--color-text);                           /* Couleur du texte principal */
}

.method-subtitle {
    font-size: 1rem;                                    /* Taille de police normale */
    color: var(--color-text-light);                     /* Couleur grise */
    margin: 0 0 var(--spacing-md) 0;                    /* Marge en bas de 1.5rem */
}

.method-description {
    font-size: 0.9rem;                                  /* Petite taille de police */
    color: var(--color-text-light);                     /* Couleur grise */
    margin-bottom: var(--spacing-md);                   /* Marge en bas de 1.5rem */
    line-height: 1.5;                                   /* Hauteur de ligne pour la lisibilité */
}

/* ===========================================
   LIENS DES FICHES
=========================================== */
.method-link {
    display: inline-block;                              /* Affichage inline-block pour le padding */
    padding: var(--spacing-xs) var(--spacing-md);       /* Padding : 0.5rem vertical, 1.5rem horizontal */
    background: var(--color-light-gray);                /* Fond gris clair */
    color: var(--color-text);                           /* Couleur du texte */
    text-decoration: none;                              /* Supprime le soulignement */
    border-radius: 25px;                                /* Coins très arrondis (forme pilule) */
    font-weight: 600;                                   /* Poids semi-gras */
    transition: var(--transition-smooth);               /* Animation fluide */
    width: 100%;                                        /* Largeur complète */
    text-align: center;                                 /* Texte centré */
}

.method-link--general:hover {
    background: var(--color-method);                    /* Fond violet au survol */
    color: var(--color-white);                          /* Texte blanc au survol */
    transform: scale(1.02);                             /* Légère augmentation de taille */
}


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

    .chapter-title {
        font-size: 1.5rem;                              /* Réduit la taille du titre de chapitre */
        flex-direction: column;                         /* Empile l'icône et le texte verticalement */
        gap: var(--spacing-xs);                         /* Réduit l'espace entre les éléments */
    }

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

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

    .stats-grid {
        grid-template-columns: 1fr;                     /* Une seule colonne pour les statistiques */
    }

    .method-number {
        font-size: 2.5rem;                              /* Réduit la taille du numéro d'arrière-plan */
        top: 5px;                                       /* Ajuste la position */
        right: 10px;                                    /* Ajuste la position horizontale */
    }
}