section { 
    margin-bottom: 30px; /* Ajoute un espace de 30px sous chaque section */
    padding-bottom: 20px; /* Ajoute un espace interne de 20px en bas de chaque section */
    border-bottom: 1px solid #eee; /* Ajoute une ligne grise claire de séparation sous chaque section */
}

.responsive-img { 
    max-width: 50%; /* L’image occupe au maximum 50 % de la largeur du conteneur */
    height: auto; /* Ajuste automatiquement la hauteur pour garder les proportions */
    display: block; /* Fait que l’image occupe toute une ligne (évite qu’elle soit à côté d’un texte) */
    margin: 20px auto; /* Centre l’image horizontalement et ajoute 20px d’espace en haut et en bas */
    border-radius: 5px; /* Arrondit légèrement les coins de l’image */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Ajoute une ombre douce sous l’image */
}

section:last-of-type {
    border-bottom: none; /* Supprime la ligne de séparation sous la dernière section */
}

h2 {
    color: #007bff; /* Applique un bleu vif au texte */
    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 en dessous */
    margin-top: 0; /* Supprime la marge au-dessus du titre */
    font-size: 2rem; /* Définit une grande taille de police pour bien distinguer le titre */
}

h3 { 
    color: #0056b3; /* Applique un bleu plus foncé que celui des h2 */
    font-size: 1.5rem; /* Définit une taille un peu plus petite que h2 */
}

p { 
    margin-bottom: 15px; /* Ajoute un espace vertical après chaque paragraphe */
}

ul { /* Cible les listes non ordonnées (<ul>) */
    list-style: disc; /* Utilise des puces rondes */
    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 la liste */
    margin-bottom: 8px; /* Ajoute un petit espace entre les éléments */
}


@media (max-width: 768px) { /* Applique les styles si l’écran fait 768px de large ou moins */