/* Reset de base pour supprimer les marges et le padding par défaut */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Définition du style général de la page */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4; /* Fond gris clair pour un contraste agréable */
    line-height: 1.6; /* Pour améliorer la lisibilité du texte */
    padding: 20px; /* Espacement autour du contenu principal */
}

/* Container principal qui entoure tout le contenu */
.container {
    max-width: 1200px;  /* Limite la largeur du contenu */
    margin: 0 auto;  /* Centre le contenu horizontalement */
    background-color: #fff;  /* Fond blanc pour le contenu */
    padding: 20px;  /* Espacement interne autour du contenu */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);  /* Ombre légère autour du contenu */
    border-radius: 10px;  /* Coins arrondis */
}

/* En-tête du site */
header {
    text-align: center;  /* Centrer le texte */
    margin-bottom: 30px;  /* Espace sous l'en-tête */
    background-color: #c2e1e4;  /* Fond pour le header */
}

header h1 {
    font-size: 2.5rem;
    color: #333;  /* Texte sombre */
    font-weight: bold;
}

header p {
    font-size: 1.2rem;
    color: #555;  /* Gris clair pour le sous-titre */
}

/* Navigation */
nav {
    display: flex;
    justify-content: center;
    gap: 20px;  /* Espacement entre les liens */
    margin-bottom: 30px;  /* Espace sous la navigation */
}

nav a {
    text-decoration: none;
    color: #007BFF;  /* Bleu pour les liens */
    font-weight: bold;
    transition: color 0.3s ease;  /* Transition douce au survol */
}

nav a:hover {
    color: #0056b3;  /* Changer de bleu au survol */
    text-decoration: underline;  /* Souligner le lien au survol */
}

/* Section principale */
main {
    margin-bottom: 40px;  /* Espace avant le footer */
}
main h1 {
    background-color: #97afb2;
}
main h2 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 20px;  /* Espace sous le titre */
}

main p {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 20px;  /* Espace sous chaque paragraphe */
}

/* Footer */
footer {
    text-align: center;
    padding: 20px;
    background-color: #c2e1e4;  /* Fond pour le footer */
    color: #333;  /* Texte blanc */
    font-size: 1rem;
    border-radius: 0 0 10px 10px;  /* Coins arrondis en bas */
    display: flex;
    justify-content: center; /* Centrer horizontalement le contenu */
    align-items: center; /* Centrer verticalement le contenu */
}
.footer-content {
    display: flex;
    align-items: center; /* Alignement vertical des éléments */
  }
footer p {
    margin-top: 0px;
    margin-right: 10px; /* Espace entre le texte et l'image */
}
.footer-logo {
    width: 240px;
    height: auto;
    margin-top: 0px;
    transition: transform 0.3s ease, opacity 0.3s ease; /* Animation */
  }
  
 .footer-logo:hover {
    transform: scale(1.1); /* Agrandissement du logo */
    opacity: 0.8; /* Réduction de l'opacité */
  }

.logo-section {
  width: 50%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.logo-section:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

/* Responsive Design */
@media (max-width: 768px) {
    body {
        padding: 10px;  /* Moins de padding sur les petits écrans */
    }

    .container {
        padding: 15px;
    }

    nav {
        flex-direction: column;  /* Mettre la navigation en colonne sur petits écrans */
        align-items: center;  /* Centrer les liens */
        gap: 10px;  /* Moins d'espace entre les liens */
    }