section { /* Cible toutes les balises <section> de la page */
    margin-bottom: 30px; /* Ajoute un espace de 30px en dessous de chaque section */
    padding-bottom: 20px; /* Ajoute un espace interne de 20px en bas de chaque section */
    border-bottom: 1px solid #eee; /* Trace une fine ligne grise claire sous chaque section */
}

section:last-of-type { /* Cible la dernière section du document */
    border-bottom: none; /* Supprime la ligne du bas pour la dernière section */
}

h2 { 
    color: #007bff; /* bleu vif */
    border-bottom: 2px solid #007bff; /* Ajoute une ligne bleue sous le titre */
    padding-bottom: 10px; /* Crée un espace entre le texte et la ligne */
    margin-top: 0; /* Supprime l’espace au-dessus du titre */
    font-size: 2rem; /* Définit une grande taille de police */
}

p { 
    margin-bottom: 15px; /* Ajoute un espace sous chaque paragraphe */
}

ul { /* listes */
    list-style: disc; /* Utilise des points ronds par défaut */
    margin-left: 20px; /* Décale la liste vers la droite */
    margin-bottom: 15px; /* Ajoute un espace sous la liste */
}

ul li { /* Cible chaque élément de liste */
    margin-bottom: 8px; /* Ajoute un petit espace entre les points */
}

/* Conception réactive pour les éléments spécifiques à index.html */ /* Section pour adapter le design aux écrans plus petits */
@media (max-width: 768px) { /* Applique les règles si l’écran fait 768px ou moins */
    h2 { /* Cible les titres h2 sur petit écran */
        font-size: 1.5rem; /* Réduit la taille du titre pour une meilleure lisibilité mobile 1rem = 16px */
    }
}