/* ===========================================
           VARIABLES CSS POUR FACILITER LA MAINTENANCE
        =========================================== */
        :root {
            /* Couleurs principales */
            --color-primary: Crimson;
            --color-secondary: #764ba2;
            --color-cours: red;
            --color-tp: #c32147;
            --color-entrainement: #f97997;
            --color-text: #2c3e50;
            --color-text-light: #495057;
            --color-background: #FEEFEA;
            --color-white: #ffffff;
            --color-light-gray: #f8f9fa;
            
            /* Couleurs spécifiques aux fiches méthodes */
            --color-method: rgb(255, 210, 193);                             /* couleur pour les outils généraux */

            /* Espacements */
            --spacing-xs: 0.5rem;
            --spacing-sm: 1rem;
            --spacing-md: 1.5rem;
            --spacing-lg: 2rem;
            --spacing-xl: 2.5rem;
            
            /* Ombres */
            --shadow-light: 0 5px 25px rgba(0, 0, 0, 0.1);
            --shadow-medium: 0 15px 40px rgba(0, 0, 0, 0.2);
            --shadow-colored: 0 5px 25px rgba(102, 126, 234, 0.2);
            
            /* Transitions */
            --transition-smooth: all 0.3s ease;
        }

        /* ===========================================
           STYLES DE BASE
        =========================================== */
        * {
            box-sizing: border-box;
        }

        html {
            background-color: var(--color-background);/* couleur du fond de la page */
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        body {
            margin: 0;
            padding: 0;
            line-height: 1.6;
            color: var(--color-text); /*couleur du texte dans le body*/
        }

        /* ===========================================
           NAVIGATION
        =========================================== */
        nav {
            width: 100%;
            background-color: var(--color-white);/*couleur du fond du bandeau des menus en bandeau */
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: var(--shadow-light);
        }

        nav ul {
            list-style: none;
            display: flex;
            margin: 0;
            padding: 0;
        }

        nav li {
            flex: 1;
            text-align: center;
        }

        nav a { /*menus en bandeau */
            display: block;
            padding: var(--spacing-sm) 0;
            text-decoration: none;
            color: var(--color-text); /* couleur du texte des menus en bandeau */
            border-bottom: 2px solid transparent;
            transition: var(--transition-smooth);
        }

        nav a:hover {/*menus en bandeau en survol*/
            color: #ff8c00;/* couleur du texte lors du survol des menus en bandeau */
            border-bottom-color: gold; /* couleur du souligné */
        }

        /* ===========================================
           TITRES PRINCIPAUX
        =========================================== */
        .page-title {/*titre de la page */
            text-align: center;
            margin: var(--spacing-lg) 0;
            padding: 0 var(--spacing-sm);
        }

        .page-title h1 { /*titre de la page */
            font-size: 2.5rem;
            color: var(--color-text); /* couleur du titre de la page */
            margin: 0;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        }

        /* ===========================================
           SECTIONS DE CHAPITRE
        =========================================== */
        .chapter-section {
            margin: var(--spacing-xl) auto;
            max-width: 1400px;
            padding: 0 var(--spacing-sm);
        }

        /* Titre de chapitre avec icône */
        .chapter-header {
            margin-bottom: var(--spacing-lg);
        }

        .chapter-title {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--spacing-sm);
            
            font-size: 1.8rem;
            font-weight: 700;
            margin: 0;
            padding: var(--spacing-md) var(--spacing-lg);
            
            background: var(--color-white);
            color: var(--color-primary); /*couleur du titre des chapitres */
            border: 3px solid var(--color-primary);
            border-radius: 20px;
            box-shadow: var(--shadow-colored);
            
            transition: var(--transition-smooth);
        }

        .chapter-title:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);
        }

        .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); }
        }

        /* ===========================================
           GRILLE DE CARTES
        =========================================== */
        .content-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: var(--spacing-lg);
        }

        /* ===========================================
           CARTES DE CONTENU
        =========================================== */
        .content-card {
            background: var(--color-white); /*couleur du fond des cartes*/
            border-radius: 15px;
            padding: var(--spacing-lg);
            box-shadow: var(--shadow-light);
            transition: var(--transition-smooth);
            border: 3px solid transparent;
            height: fit-content;
        }

        .content-card:hover { /*precisions suivant le type de carte */
            transform: translateY(-8px);
            box-shadow: var(--shadow-medium);
        }

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

        .content-card--cours:hover {
            background: linear-gradient(135deg, rgba(255,0,0,0.37) 0%, var(--color-white) 100%);
        }

        .content-card--tp {
            border-color: var(--color-tp);
        }

        .content-card--tp:hover {
            background: linear-gradient(135deg, rgba(195,33,71,0.37) 0%, var(--color-white) 100%);
        }

        .content-card--entrainement {
            border-color: var(--color-entrainement);
        }

        .content-card--entrainement:hover {
            background: linear-gradient(135deg, rgba(249,121,151,0.37) 0%, var(--color-white) 100%);
        }

        /* Titre des cartes */
        .card-title {
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
            
            font-size: 1.4rem;
            font-weight: 600;
            margin: 0 0 var(--spacing-sm) 0;
            color: var(--color-text);
        }

        .card-icon {
            font-size: 1.6rem;
        }

        /* ===========================================
           LIENS DANS LES CARTES
        =========================================== */
        .card-links {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-xs);
        }

        .card-link {
            display: inline-block;
            padding: var(--spacing-xs) var(--spacing-sm);
            background: var(--color-light-gray);
            color: var(--color-text-light);
            text-decoration: none;
            border-radius: 20px;
            font-size: 0.9rem;
            transition: var(--transition-smooth);
            border: 2px solid transparent;
        }

        .card-link:hover {
            background: var(--color-primary);
            color: var(--color-white);
            transform: scale(1.02);
        }

        .card-link--cours:hover {
            background: var(--color-cours);
            color: var(--color-white);
            transform: scale(1.02);
        }

        .card-link--TP:hover {
            background: var(--color-tp);
            color: var(--color-white);
            transform: scale(1.02);
        }

        .card-link--entrainement:hover {
            background: var(--color-entrainement);
            color: var(--color-white);
            transform: scale(1.02);
        }

        /* Lien spécial avec couleur rouge au survol */
        .card-link--special:hover {
            background: var(--color-tp);
            color: var(--color-white);
        }

        /* ===========================================
           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) {
            .page-title h1 {
                font-size: 2rem;
            }
            
            .chapter-title {
                font-size: 1.5rem;
                flex-direction: column;
                text-align: center;
                gap: var(--spacing-xs);
            }
            
            .chapter-icon {
                font-size: 2rem;
            }
            
            .content-grid {
                grid-template-columns: 1fr;
                gap: var(--spacing-sm);
            }
            
            .content-card {
                padding: var(--spacing-sm);
            }

            /* Réduction de l'indentation sur mobile */
            .card-links ul ul {
                margin-left: var(--spacing-sm);
            }
        }

        /* ===========================================
           UTILITAIRES
        =========================================== */
        .text-center {
            text-align: center;
        }

        .hidden {
            display: none;
        }

                /* ===========================================
   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(255, 210, 193, 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 */
    }
}