body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Définit une police moderne et lisible */
    line-height: 1.6; /* Définit l’espacement vertical entre les lignes de texte */
    margin: 0; /* Supprime la marge par défaut du navigateur */
    padding: 0; /* Supprime le remplissage interne par défaut */
    background-color: #f4f4f4; /* Applique une couleur de fond gris clair */
    color: #333; /* Définit une couleur de texte gris foncé */
}


header { 
    background: #333; /* Fond gris très foncé (presque noir) */
    color: #fff; /* Texte en blanc */
    padding: 1rem 0; /* Ajoute de l’espace vertical en haut et en bas du header 1rem = 16px */
    text-align: center; /* Centre le texte horizontalement */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Ajoute une légère ombre en dessous du header */
}

header h1 { 
    margin: 0; /* Supprime les marges autour du titre */
    font-size: 2.5rem; /* Définit une grande taille de police pour le titre */
}

nav ul { 
    padding: 0; /* Supprime le padding par défaut */
    list-style: none; /* Supprime les puces de la liste */
    display: flex; /* Aligne les éléments horizontalement avec Flexbox */
    justify-content: center; /* Centre les éléments dans la barre */
    margin-top: 1rem; /* Ajoute un espace au-dessus de la barre */
}

nav ul li { 
    margin: 0 15px; /* Ajoute un espace horizontal entre chaque lien */
}

nav ul li a {
    color: #fff; /* Met le texte en blanc */
    text-decoration: none; /* Supprime le soulignement */
    font-weight: bold; /* Met le texte en gras */
    transition: color 0.3s ease; /* Ajoute une transition douce quand la couleur change au survol */
}

nav ul li a:hover { /* Style quand la souris survole un lien */
    color: #00bcd4; /* Change la couleur en cyan clair au survol */
}


main { 
    padding: 20px; /* Ajoute de l’espace interne autour du contenu */
    max-width: 1000px; /* Limite la largeur du contenu à 1000px */
    margin: 20px auto; /* Centre le contenu horizontalement et ajoute de l’espace vertical */
    background: #fff; /* Met le fond en blanc */
    border-radius: 8px; /* Arrondit légèrement les coins */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Ajoute une ombre douce autour du bloc */
}


.responsive-img { 
    max-width: 100%; /* Empêche l’image de dépasser la largeur de son conteneur */
    height: auto; /* Ajuste automatiquement la hauteur selon la largeur */
    display: block; /* Fait que l’image occupe toute une ligne */
    margin: 20px auto; /* Centre l’image horizontalement et ajoute des marges verticales */
    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 */
}


footer { 
    text-align: center; /* Centre le texte */
    padding: 20px; /* Ajoute de l’espace interne */
    background: #333; /* Fond gris foncé */
    color: #fff; /* Texte blanc */
    margin-top: 30px; /* Ajoute un espace au-dessus du pied de page */
    box-shadow: 0 -2px 5px rgba(0,0,0,0.2); /* Ajoute une ombre vers le haut du pied de page */
}


@media (max-width: 768px) { /* Active les styles si la largeur d’écran ≤ 768px */
    header h1 { /* Cible le titre principal dans le header */
        font-size: 1.8rem; /* Réduit la taille du titre pour mieux s’adapter */
    }

    nav ul { 
        flex-direction: column; /* Passe les éléments du menu en colonne */
        align-items: center; /* Centre les éléments verticalement */
    }

    nav ul li {
        margin: 5px 0; /* Réduit l’espace entre les liens en mode mobile */
    }

    main { 
        margin: 10px; /* Réduit les marges autour du contenu */
        padding: 15px; /* Réduit le padding interne pour gagner de l’espace */
    }
}