/* Style général pour le corps et la page HTML */
body, html {
    margin: 0; /* Supprime les marges par défaut */
    padding: 0; /* Supprime les paddings par défaut */
    height: 100%; /* Prend toute la hauteur de l'écran */
    font-family: Arial, sans-serif; /* Définit la police globale */
    display: flex; /* Utilisé pour centrer les éléments */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    background-color: #f3f3f3; /* Couleur de fond douce */
}

/* Bandes de couleur */
.color-band {
    position: fixed; /* Fixe la position pour toujours afficher les bandes */
    top: 0; /* Colle la bande en haut */
    height: 100%; /* Prend toute la hauteur de la fenêtre */
    width: 100px; /* Largeur définie des bandes */
    background-color: #374fcc; /* Couleur des bandes */
    z-index: -1; /* Place les bandes en arrière-plan */
    overflow: hidden; /* Empêche les débordements du texte ou des éléments */
}

/* Bande de gauche avec styles additionnels */
.color-band.left {
    left: 0; /* Positionne la bande à gauche */
    display: flex; /* Utilise Flexbox pour aligner le contenu */
    flex-direction: column; /* Aligne les éléments verticalement */
    justify-content: center; /* Centre verticalement les éléments */
    align-items: center; /* Centre horizontalement les éléments */
    padding: 0 10px; /* Ajoute des marges internes */
}

/* Bande de droite */
.color-band.right {
    right: 0; /* Positionne la bande à droite */
    padding: 0 10px; /* Ajoute des marges internes */
}

/* Texte dans la bande de gauche */
.left-text {
    color: white; /* Texte en blanc */
    font-size: 18px; /* Taille de la police */
    text-align: center; /* Centre horizontalement le texte */
    white-space: nowrap; /* Empêche le texte de se mettre sur plusieurs lignes */
    overflow: hidden; /* Supprime les débordements */
    text-overflow: ellipsis; /* Ajoute des points de suspension si le texte est trop long */
    margin: 0; /* Supprime les marges */
    padding: 5px 0; /* Ajoute de l'espacement vertical */
    word-wrap: break-word; /* Coupe le texte si nécessaire */
}

/* Conteneur du formulaire */
.form-wrapper {
    max-width: 400px; /* Limite la largeur maximale */
    width: 100%; /* S'adapte à la taille de l'écran */
    padding: 20px; /* Ajoute un espace interne */
    background-color: #D3D3D3; /* Couleur de fond gris clair */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 5px 4px 5px rgba(0, 0, 0, 0.4); /* Ajoute une ombre */
    z-index: 1; /* Positionne le formulaire au-dessus des bandes */
    display: flex; /* Utilise Flexbox pour organiser les éléments */
    flex-direction: column; /* Aligne les éléments verticalement */
    justify-content: center; /* Centre verticalement le contenu */
    align-items: center; /* Centre horizontalement le contenu */
}

/* Style du titre */
h2 {
    color: #000000; /* Couleur noire pour le titre */
    text-shadow: 2.5px 2.5px 0.2px rgba(0, 0, 0, 0.1); /* Ajoute une ombre légère au texte */
    margin-bottom: 20px; /* Espacement en bas du titre */
}

/* Style des labels des champs */
label {
    display: block; /* Force les labels à occuper toute la largeur */
    font-weight: bold; /* Texte en gras */
    margin-bottom: 5px; /* Espacement entre le label et le champ */
    color: #000000; /* Couleur noire */
    text-shadow: 1.5px 1.5px 0.4px rgba(0, 0, 0, 0.2); /* Ombre légère pour les labels */
    text-align: left; /* Aligne le texte à gauche */
}

/* Style des champs de saisie et de la liste déroulante */
input[type="text"],
input[type="email"],
input[type="password"],
select {
    width: 100%; /* Adapte à la largeur du conteneur */
    padding: 10px; /* Ajoute de l'espace interne */
    margin-bottom: 15px; /* Espacement entre les champs */
    border: 1px solid #000000; /* Bordure noire */
    border-radius: 4px; /* Coins arrondis */
    box-sizing: border-box; /* Inclut le padding dans les dimensions */
    background-color: white; /* Fond blanc */
    font-size: 16px; /* Taille de la police */
    color: #000000; /* Couleur du texte en noir */
}

/* Style du bouton de soumission */
button[type="submit"] {
    width: 100%; /* Adapte le bouton à la largeur disponible */
    padding: 10px; /* Ajoute de l'espace interne */
    background-color: #364fcc; /* Couleur bleu foncé */
    color: white; /* Texte en blanc */
    border: none; /* Supprime les bordures */
    border-radius: 4px; /* Coins arrondis */
    cursor: pointer; /* Change le curseur en pointeur */
    font-size: 16px; /* Taille de la police */
    text-shadow: 2.5px 2.5px 2px rgba(0, 0, 0, 0.4); /* Ajoute une ombre au texte */
    box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.1); /* Ombre légère */
    margin-top: 15px; /* Espacement en haut */
}
#submitBtn{
    width: 100%; /* Adapte le bouton à la largeur disponible */
    padding: 10px; /* Ajoute de l'espace interne */
    background-color: #364fcc; /* Couleur bleu foncé */
    color: white; /* Texte en blanc */
    border: none; /* Supprime les bordures */
    border-radius: 4px; /* Coins arrondis */
    cursor: pointer; /* Change le curseur en pointeur */
    font-size: 16px; /* Taille de la police */
    text-shadow: 2.5px 2.5px 2px rgba(0, 0, 0, 0.4); /* Ajoute une ombre au texte */
    box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.1); /* Ombre légère */
    margin-top: 15px; /* Espacement en haut */
}
/* Changement de couleur au survol */
button[type="submit"]:hover {
    background-color: #2393ce; /* Couleur bleu clair */
}

/* Style responsive pour les écrans plus petits */
@media (max-width: 768px) {
    .color-band {
        width: 50px; /* Réduit la largeur des bandes */
    }

    .left-text {
        font-size: 12px; /* Réduit la taille de la police */
    }

    .form-wrapper {
        padding: 15px; /* Réduit le padding interne */
        width: 90%; /* Adapte le formulaire à la largeur de l'écran */
    }

    h2 {
        font-size: 20px; /* Réduit la taille du titre */
    }

    button[type="submit"] {
        font-size: 14px; /* Réduit la taille du texte du bouton */
    }
}

/* Style pour les très petits écrans */
@media (max-width: 480px) {
    .color-band {
        width: 40px; /* Réduit encore plus la largeur des bandes */
    }

    .left-text {
        font-size: 12px; /* Réduit la taille du texte */
        padding: 0 5px; /* Ajuste les marges internes */
        white-space: normal; /* Permet au texte de passer à la ligne */
        text-align: left; /* Texte aligné à gauche */
        margin-left: -7.5px; /* Ajuste la position du texte */
    }

    .form-wrapper {
        width: 90%; /* Largeur ajustée au petit écran */
        padding: 5px; /* Réduction du padding */
        box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.4); /* Ajuste l'ombre */
    }

    h2 {
        font-size: 18px; /* Taille du titre réduite */
    }

    label, input {
        font-size: 14px; /* Taille réduite pour les champs et labels */
    }

    button[type="submit"] {
        font-size: 12px; /* Taille réduite pour le bouton */
    }

    .color-band.left .left-text {
        content: "Site prêt"; /* Texte personnalisé pour petits écrans */
    }
}