/* Section contenant le formulaire */
.centered-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Centre le contenu verticalement */
}

/* Boîte du formulaire */
.form-box {
    display: flex; /* Utilisation de flexbox pour aligner le formulaire et l'image */
     padding: 30px; /* Espacement interne */
    width: 800px; /* Largeur de la boîte */
background-color: #2a2a2a; /* Couleur de fond souhaitée */
    border-radius: 12px; /* Rayon des coins */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); /* Ombre portée */
    gap: 20px; /* Espace entre les éléments internes */
    transition: all 0.3s ease-in-out; /* Transition pour les effets */
    border: 2px solid rgba(255, 255, 255, 0.1); /* Bordure */
}

/* Colonne de contenu */
.l-col {
    flex: 1; /* Permet à chaque colonne de prendre un espace égal */
    padding: 10px; /* Espacement interne pour chaque colonne */
}

/* Titre du formulaire */
.form-box__title {
    font-size: 24px; /* Taille de la police pour le titre */
    color: #eee; /* Couleur du texte */
    text-align: center; /* Centre le texte */
    margin-bottom: 20px; /* Espacement sous le titre */
}

/* Description du formulaire */
.form-box__descri,
.form-box__descris {
    color: #b12323; /* Couleur du texte descriptif */
    text-align: center; /* Centre le texte */
    margin-bottom: 10px; /* Espacement sous la description */
}

/* Étiquettes des champs de formulaire */
.form__label {
    display: block; /* Affichage en bloc */
    margin-bottom: 5px; /* Espacement sous l'étiquette */
    font-weight: bold; /* Met l'étiquette en gras */
}

/* Champs de saisie */
.form__field {
    width: 100%; /* Champs remplissant toute la largeur */
    padding: 10px; /* Espacement interne */
    border: 1px solid #ccc; /* Bordure grise */
    border-radius: 8px; /* Bords arrondis pour les champs */
    box-sizing: border-box; /* Inclut la bordure et le padding dans la largeur totale */
    margin-bottom: 20px; /* Espacement sous le champ */
    transition: border-color 0.3s; /* Transition douce pour le changement de couleur */
}

.form__field:focus {
    border-color: #007bff; /* Couleur de bordure au focus */
    outline: none; /* Supprime le contour par défaut */
}

/* Bouton de soumission */
.form__button {
    background-color: #39beff; /* Couleur de fond du bouton */
    color: white; /* Couleur du texte du bouton */
    padding: 10px; /* Espacement interne */
    border: none; /* Supprime la bordure */
    border-radius: 8px; /* Bords arrondis pour le bouton */
    cursor: pointer; /* Change le curseur en pointeur */
    width: 100%; /* Remplit toute la largeur de la boîte */
    font-size: 16px; /* Taille de la police du bouton */
    transition: background-color 0.3s; /* Transition douce pour le changement de couleur */
}

.form__button:hover {
    background-color: #0056b3; /* Couleur de fond au survol */
}

/* Espacement entre le formulaire et la boîte */
.form-box__form {
    margin-top: 20px; /* Espacement au-dessus du formulaire */
}

/* Styles pour l'image */
.form-box__image {
    display: flex; /* Aligne l'image au centre */
    justify-content: center; /* Centre horizontalement l'image */
    align-items: center; /* Centre verticalement l'image */
}

.form-box__img {
    max-width: 100%; /* S'assure que l'image ne dépasse pas la largeur de la colonne */
    border-radius: 10px; /* Bords arrondis pour l'image */
}