/* Définit la hauteur de l'élément html et body à 100% pour occuper toute la fenêtre */
html, body {
    height: 100%;
    margin: 0; /* Supprime les marges par défaut */
    padding: 0; /* Supprime les espacements internes par défaut */
}

/* Styles pour le corps de la page */
body {
    font-family: Arial, sans-serif; /* Définit la police de caractère */
    background-color: #f4f4f4; /* Définit la couleur de fond */
    margin: 0; /* Supprime les marges par défaut */
    padding: 0; /* Supprime les espacements internes par défaut */
    text-align: center; /* Centre le texte */
    display: flex; /* Utilise le modèle de boîte flexible */
    flex-direction: column; /* Dispose les éléments en colonne */
    min-height: 100vh; /* Définit la hauteur minimale à 100% de la hauteur de la fenêtre */
}

/* Styles pour l'en-tête de la page */
.header {
    position: fixed; /* Fixe la position de l'en-tête */
    top: 0; /* Positionne l'en-tête en haut de la page */
    width: 100%; /* Définit la largeur à 100% */
    height: 9vh; /* Définit la hauteur à 9% de la hauteur de la fenêtre */
    overflow: hidden; /* Cache le contenu qui dépasse */
}

/* Styles pour les sections rouge et noire de l'en-tête */
.header .red,
.header .black {
    width: 100%; /* Définit la largeur à 100% */
    height: 50%; /* Définit la hauteur à 50% */
    position: relative; /* Position relative pour le positionnement absolu des enfants */
}

/* Styles pour la section rouge de l'en-tête */
.header .red {
    background-color: #ee1c25; /* Définit la couleur de fond rouge */
}

/* Styles pour la section noire de l'en-tête */
.header .black {
    background-color: #38424b; /* Définit la couleur de fond noire */
}

/* Styles pour le conteneur du logo */
.logo-container {
    position: absolute; /* Position absolue pour le positionnement précis */
    top: 50%; /* Positionne le conteneur à 50% du haut */
    left: 2%; /* Positionne le conteneur à 2% de la gauche */
    transform: translateY(-50%); /* Centre verticalement le logo */
    z-index: 2; /* Positionne le conteneur au-dessus des autres éléments */
    display: flex; /* Utilise le modèle de boîte flexible */
    align-items: center; /* Centre verticalement les éléments */
    height: 60px; /* Définit la hauteur */
}

/* Styles pour le logo */
.logo-container .logo {
    height: 100%; /* Définit la hauteur du logo à 100% du conteneur */
    display: block; /* Affiche le logo comme un bloc */
}

/* Styles pour le conteneur du titre */
.title-container {
    position: absolute; /* Position absolue pour le positionnement précis */
    top: 49%; /* Positionne le conteneur à 49% du haut */
    left: 50%; /* Positionne le conteneur à 50% de la gauche */
    transform: translate(-50%, -50%); /* Centre le conteneur */
    z-index: 2; /* Positionne le conteneur au-dessus des autres éléments */
}

/* Styles pour le titre */
.title-container h1 {
    color: white; /* Définit la couleur du texte en blanc */
    font-size: 28px; /* Définit la taille de la police */
    margin: 0; /* Supprime les marges par défaut */
    font-weight: bold; /* Définit le poids de la police en gras */
    text-align: center; /* Centre le texte */
}

/* Styles pour le conteneur principal */
.container {
    display: flex; /* Utilise le modèle de boîte flexible */
    flex-direction: column; /* Dispose les éléments en colonne */
    align-items: center; /* Centre horizontalement les éléments */
    justify-content: center; /* Centre verticalement les éléments */
    background-color: #fff; /* Définit la couleur de fond en blanc */
    padding: 20px; /* Définit l'espacement interne */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Ajoute une ombre portée */
    width: 90%; /* Définit la largeur à 90% */
    margin: 0 auto; /* Centre le conteneur horizontalement */
    flex: 1; /* Permet au conteneur de grandir pour occuper l'espace disponible */
    margin-top: 2vh; /* Définit la marge supérieure à 2% de la hauteur de la fenêtre */
    margin-bottom: 2vh; /* Définit la marge inférieure à 2% de la hauteur de la fenêtre */
}

/* Styles pour le conteneur de contenu */
.content-wrapper {
    display: flex; /* Utilise le modèle de boîte flexible */
    flex-direction: column; /* Dispose les éléments en colonne */
    align-items: center; /* Centre horizontalement les éléments */
    gap: 20px; /* Définit l'espacement entre les éléments */
    width: 100%; /* Définit la largeur à 100% */
}

/* Styles pour les champs de saisie */
.input-field {
    width: 300px; /* Définit la largeur */
    padding: 10px; /* Définit l'espacement interne */
    margin: 10px 0; /* Définit les marges verticales */
    background-color: #ddd; /* Définit la couleur de fond */
    border: none; /* Supprime la bordure */
    font-size: 16px; /* Définit la taille de la police */
}

/* Styles pour le bouton de connexion */
.login-button {
    padding: 12px 30px; /* Définit l'espacement interne */
    background-color: #a0b8ff; /* Définit la couleur de fond */
    border: none; /* Supprime la bordure */
    font-size: 18px; /* Définit la taille de la police */
    font-weight: bold; /* Définit le poids de la police en gras */
    color: black; /* Définit la couleur du texte */
    cursor: pointer; /* Change le curseur au survol */
    transition: background-color 0.3s; /* Ajoute une transition pour la couleur de fond */
}

/* Styles pour le bouton de connexion au survol */
.login-button:hover {
    background-color: #879ae0; /* Change la couleur de fond au survol */
}

/* Styles pour le pied de page */
.footer {
    background-color: black; /* Définit la couleur de fond */
    color: white; /* Définit la couleur du texte */
    display: flex; /* Utilise le modèle de boîte flexible */
    align-items: center; /* Centre verticalement les éléments */
    justify-content: center; /* Centre horizontalement les éléments */
    flex-direction: column; /* Dispose les éléments en colonne */
}

/* Styles pour le conteneur des contacts */
.contacts {
    display: flex; /* Utilise le modèle de boîte flexible */
    align-items: center; /* Centre verticalement les éléments */
    justify-content: center; /* Centre horizontalement les éléments */
    background-color: #ee1c25; /* Définit la couleur de fond */
    width: 100%; /* Définit la largeur à 100% */
    padding: 3px; /* Définit l'espacement interne */
    height: 5vh; /* Définit la hauteur à 5% de la hauteur de la fenêtre */
}

/* Styles pour la transition du pied de page */
.transition-footer {
    height: 5px; /* Définit la hauteur */
    width: 100%; /* Définit la largeur à 100% */
    background: linear-gradient(to bottom, #ee1c25, #38424b); /* Définit le dégradé de fond */
}

/* Styles pour le conteneur des droits */
.Droits {
    display: flex; /* Utilise le modèle de boîte flexible */
    align-items: center; /* Centre verticalement les éléments */
    justify-content: center; /* Centre horizontalement les éléments */
    background-color: #38424b; /* Définit la couleur de fond */
    width: 100%; /* Définit la largeur à 100% */
    padding: 3px; /* Définit l'espacement interne */
    height: 5vh; /* Définit la hauteur à 5% de la hauteur de la fenêtre */
}

/* Styles pour les listes non ordonnées */
ul {
    list-style-type: none; /* Supprime les puces */
    padding: 0; /* Supprime les espacements internes par défaut */
    margin: 0; /* Supprime les marges par défaut */
}

/* Styles pour les éléments de liste */
li {
    display: inline; /* Affiche les éléments en ligne */
    color: white; /* Définit la couleur du texte */
    margin: 0 5px; /* Définit les marges horizontales */
}

/* Styles pour les liens */
a {
    text-decoration: none; /* Supprime le soulignement */
    color: white; /* Définit la couleur du texte */
}

/* Styles pour les logos des réseaux sociaux */
.reseaux-logo {
    height: 15px; /* Définit la hauteur */
    margin-left: 3px; /* Définit la marge gauche */
    margin-right: 7px; /* Définit la marge droite */
    vertical-align: middle; /* Centre verticalement */
}

/* Styles pour les écrans de largeur maximale de 600px */
@media (max-width: 600px) {
    .container {
        width: 95%; /* Définit la largeur à 95% */
        padding: 15px; /* Définit l'espacement interne */
        align-items: center; /* Centre horizontalement les éléments */
        justify-content: center; /* Centre verticalement les éléments */
    }

    .input-field {
        width: 90%; /* Définit la largeur à 90% */
    }
}