/* Style global du formulaire */
form {
    background-color: #ffffff;
    color: #222b48;
    max-width: 600px;
    margin: 20px auto;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
}

/* Style des labels */
form label {
    display: block;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #222b48;
}

/* Style des champs input, textarea et select */
form input[type="text"],
form input[type="email"],
form select,
form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 2px solid #222b48;
    border-radius: 5px;
    font-size: 14px;
    color: #222b48;
    background-color: #f8f9fc;
}

form input:focus,
form select:focus,
form textarea:focus {
    outline: none;
    border-color: #f9a21f;
    box-shadow: 0 0 5px rgba(249, 162, 31, 0.5);
}

/* Style des boutons radio et cases à cocher */
form input[type="radio"],
form input[type="checkbox"] {
    margin-right: 10px;
    vertical-align: middle;
}

/* Alignement des options radio/checkbox sur des lignes séparées */
form div input[type="radio"] + label,
form div input[type="checkbox"] + label {
    display: block;
    font-size: 14px;
    font-weight: normal;
    margin: 5px 0;
    padding: 10px;
    background-color: #f8f9fc;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Style des sections conditionnelles */
#website_questions {
    margin-top: 20px;
    padding: 20px;
    border: 0px dashed #222b48;
    border-radius: 5px;
    background-color: #f8f9fc;
}

/* Style du bouton de soumission */
form button {
    display: block;
    width: 100%;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    background-color: #222b48;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

form button:hover {
    background-color: #f9a21f;
    transform: scale(1.02);
}

form button:active {
    background-color: #222b48;
    transform: scale(0.98);
}

/* Marges entre les questions */
form .question {
    margin-bottom: 20px;
}

/* Style des erreurs */
form .error {
    color: red;
    font-size: 12px;
    margin-top: -15px;
    margin-bottom: 10px;
}

/* Style des espaces pour les réponses conditionnelles */
form .conditional-answer {
    margin-top: 10px;
}


/* Style pour la section four_questions */
#four_questions {
    margin-bottom: 30px; /* Marge inférieure pour espacer des autres éléments */
    padding: 20px; /* Ajout d'espaces à l'intérieur */
    background-color: #ffffff; /* Fond blanc */
    border: 1px solid #ddd; /* Bordure légère */
    border-radius: 8px; /* Coins arrondis */
}

#four_questions label {
    font-size: 16px; /* Taille de police pour les labels */
    font-weight: bold; /* Mettre les labels en gras */
    display: block; /* Affiche chaque label sur une nouvelle ligne */
    margin-bottom: 10px; /* Espacement sous chaque label */
}

#four_questions input[type="text"],
#four_questions input[type="email"],
#four_questions input[type="radio"],
#four_questions input[type="phone"],
#four_questions select {
    width: 100%; /* Largeur complète pour les champs de saisie */
    padding: 12px; /* Espacement intérieur pour une meilleure lisibilité */
    margin-bottom: 20px; /* Espacement sous chaque champ */
    border: 1px solid #ccc; /* Bordure légère */
    border-radius: 5px; /* Coins arrondis */
    font-size: 14px; /* Taille de police */
    background-color: #f9f9f9; /* Fond légèrement gris pour les champs de texte */
}

/* Spécifique pour les champs radio et checkbox */
#four_questions input[type="radio"] {
    width: auto; /* Laisser les boutons radio prendre leur taille naturelle */
    margin-right: 10px; /* Espacement à droite des boutons radio */
}

/* Espacement entre les boutons radio et leur texte */
#four_questions input[type="radio"] + label {
    display: inline-block;
    margin-bottom: 0;
}

/* Espacement entre les éléments de la section */
#four_questions div {
    margin-bottom: 20px; /* Marge entre les groupes d'éléments */
}

/* Appliquer une couleur de fond pour le bouton de soumission */
#four_questions button[type="submit"] {
    background-color: #f9a21f; /* Couleur orange */
    color: white; /* Texte en blanc */
    padding: 12px 24px; /* Espacement intérieur */
    border: none; /* Supprimer les bordures */
    border-radius: 5px; /* Coins arrondis */
    font-size: 16px; /* Taille de la police */
    cursor: pointer; /* Coursuor de main */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transition douce */
}

/* Effet au survol du bouton */
#four_questions button[type="submit"]:hover {
    background-color: #222b48; /* Changer la couleur de fond au survol */
    transform: translateY(-3px); /* Légère élévation au survol */
}

/* Effet au clic du bouton */
#four_questions button[type="submit"]:active {
    background-color: #f9a21f; /* Restaure la couleur d'origine */
    transform: translateY(0); /* Annule l'élévation */
}
 
 

 


/* Style pour le bouton de soumission */
#submit_buton {
    background-color: #f9a21f; /* Couleur orange pour le bouton */
    color: #ffffff; /* Texte en blanc */
    padding: 12px 24px; /* Espacement intérieur du bouton */
    border: none; /* Suppression des bordures */
    border-radius: 5px; /* Coins arrondis */
    font-size: 16px; /* Taille de la police */
    font-weight: bold; /* Texte en gras */
    cursor: pointer; /* Curseur de la souris change en main */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transition pour l'effet de survol */
    width: auto; /* Largeur ajustée en fonction du texte */
    margin-top: 20px; /* Espacement au-dessus du bouton */
}

/* Effet de survol */
#submit_buton:hover {
    background-color: #222b48; /* Couleur sombre au survol */
    transform: translateY(-3px); /* Effet d'élévation au survol */
}

/* Effet lorsque le bouton est cliqué */
#submit_buton:active {
    background-color: #f9a21f; /* Restaure la couleur d'origine lors du clic */
    transform: translateY(0); /* Annule l'effet d'élévation au clic */
}

/* Style quand le bouton est désactivé */
#submit_buton:disabled {
    background-color: #ddd; /* Couleur de fond gris lorsque le bouton est désactivé */
    color: #bbb; /* Couleur du texte gris */
    cursor: not-allowed; /* Curseur pour indiquer que l'action est impossible */
}