/* Applique des styles de base au body et à l'html */
body, html {
    margin: 0; /* Supprime les marges par défaut */
    padding: 0; /* Supprime le remplissage par défaut */
    width: 100%; /* Définit la largeur à 100% */
    height: 100%; /* Définit la hauteur à 100% */
    overflow: hidden; /* Cache les débordements */
    font-family: Arial, sans-serif; /* Définit la police de caractères */
    color: #333; /* Définit la couleur du texte */
}

/* Style de l'en-tête */
header {
    background-color: rgba(0, 0, 255, 0.5); /* Définit une couleur de fond bleue semi-transparente */
    color: #fff; /* Définit la couleur du texte en blanc */
    padding: 10px 0; /* Ajoute un remplissage en haut et en bas */
    border-radius: 40px; /* Arrondit les coins */
    width: 20%; /* Définit la largeur à 20% */
    text-align: center; /* Centre le texte */
}

/* Style du titre h1 */
h1 {
    color: #FF0000; /* Définit la couleur du texte en rouge */
    background-color: transparent; /* Définit la couleur de fond en transparent */
    font-size: 2.5em; /* Définit la taille de la police */
    margin: 0; /* Supprime les marges */
    padding: 20px 0; /* Ajoute un remplissage en haut et en bas */
}

/* Style des paragraphes */
p {
    margin: 10px 0; /* Ajoute une marge en haut et en bas */
}

/* Style des liens */
a {
    color: #0066cc; /* Définit la couleur du texte en bleu */
    text-decoration: none; /* Supprime la décoration du texte */
    font-weight: bold; /* Définit le texte en gras */
}

/* Style des liens au survol */
a:hover {
    text-decoration: underline; /* Souligne le texte au survol */
}

/* Supprime les puces et le remplissage des listes dans les éléments nav et aside */
nav ul, aside ul {
    list-style-type: none; /* Supprime les puces */
    padding: 0; /* Supprime le remplissage */
}

/* Style des listes dans nav avec une disposition en flex, un alignement centré, une couleur de fond et une largeur */
nav ul {
    display: flex; /* Utilise le modèle de boîte flexible pour organiser les éléments enfants */
    justify-content: center; /* Centre les éléments enfants horizontalement */
    background-color: #444; /* Définit une couleur de fond grise */
    width: 100%; /* Définit la largeur à 100% */
}

/* Ajoute une marge aux éléments de liste dans nav et aside */
nav ul li, aside ul li {
    margin: 0 10px; /* Ajoute une marge à gauche et à droite */
}

/* Style des liens dans nav et aside avec une couleur de texte blanche et sans soulignement */
nav ul li a, aside ul li a {
    color: #fff; /* Définit la couleur du texte en blanc */
    text-decoration: none; /* Supprime la décoration du texte */
}

/* Style des étiquettes */
label {
    display: block; /* Définit l'affichage en bloc */
    margin-bottom: 5px; /* Ajoute une marge en bas */
    font-weight: bold; /* Définit le texte en gras */
}

/* Style des champs de saisie et des zones de texte */
input, textarea {
    width: calc(100% - 22px); /* Définit la largeur en soustrayant le remplissage */
    padding: 10px; /* Ajoute un remplissage */
    margin: 10px 0; /* Ajoute une marge en haut et en bas */
    border: 1px solid #ccc; /* Définit une bordure grise */
    border-radius: 5px; /* Arrondit les coins */
    box-sizing: border-box; /* Inclut le remplissage et la bordure dans la largeur et la hauteur */
}

/* Style des boutons */
button {
    background-color: #0066cc; /* Définit une couleur de fond bleue */
    color: white; /* Définit la couleur du texte en blanc */
    padding: 10px 20px; /* Ajoute un remplissage */
    border: none; /* Supprime la bordure */
    border-radius: 5px; /* Arrondit les coins */
    cursor: pointer; /* Change le curseur au survol */
    transition: background-color 0.3s ease; /* Ajoute une transition pour la couleur de fond */
}

/* Change la couleur de fond des boutons au survol */
button:hover {
    background-color: #004999; /* Change la couleur de fond au survol */
}

/* Style des boutons et des liens au focus */
button:focus, a:focus {
    outline: 2px solid #ffcc00; /* Ajoute une bordure de focus */
    outline-offset: 2px; /* Ajoute un décalage de la bordure de focus */
}

/* Style des liens invisibles */
.invisible-link {
    color: transparent; /* Rend le texte transparent */
    text-decoration: none; /* Supprime la décoration du texte */