html, body {
    height: 100%; /* Assure que html et body prennent toute la hauteur */
    margin: 0; /* Supprime les marges par défaut */
}

body {
    font-family: Arial, sans-serif;
    padding: 0;
    background-color: #F0F0F0;
    color: #333333;
    display: flex; /* Utilise flexbox pour le corps */
    flex-direction: column; /* Colonne pour le header, main et footer */
}

main {
    padding: 20px;
}

h1 {
    color: #333;
}

ul {
    list-style-type: none;
}

li {
    margin: 5px 0;
}

a {
    text-decoration: none;
    color: #FFC300;;
}

header {
    background-color: #5B86E5; /* Couleur de fond du bandeau */
    color: white; /* Couleur du texte */
    padding: 20px; /* Espacement interne */
    display: flex; /* Utilisation de Flexbox pour aligner les éléments */
    justify-content: space-between; /* Espace entre le titre et la navigation */
    align-items: center; /* Alignement vertical au centre */
}

header h1 {
    margin: 0; /* Suppression de la marge par défaut */
    font-size: 2em; /* Taille de la police */
}

header nav ul {
    list-style-type: none; /* Suppression des puces de la liste */
    padding: 0; /* Suppression du padding */
    margin: 0; /* Suppression de la marge */
    display: flex; /* Utilisation de Flexbox pour l'alignement horizontal */
}

header nav li {
    margin-left: 20px; /* Espacement entre les éléments de la liste */
}

header nav a {
    color: #FFC300; /* Couleur des liens */
    text-decoration: none; /* Suppression du soulignement */
    padding: 5px 10px; /* Espacement interne des liens */
    transition: background-color 0.3s; /* Transition pour l'effet de survol */
}

header nav a:hover {
    background-color: #357ABD; /* Couleur de fond au survol */
    border-radius: 5px; /* Coins arrondis pour un effet esthétique */
}

main {
    flex: 1; /* Prend tout l'espace disponible entre le header et le footer */
    padding: 20px; /* Espacement interne */
    background-color: #f4f4f4; /* Couleur de fond pour le main */
}

footer {
    background-color: #2C3E50; /* Couleur de fond du footer */
    color: white; /* Couleur du texte */
    text-align: center; /* Centrer le texte */
    padding: 15px; /* Espacement interne */
}

footer p {
    margin: 0; /* Suppression de la marge par défaut */
    font-size: 0.9em; /* Taille de la police */
}

/* Pour les écrans plus petits, vous pouvez ajuster la taille de la police si nécessaire */
@media (max-width: 600px) {
    footer p {
        font-size: 0.8em; /* Taille de police réduite sur les petits écrans */
    }
}