/** * ========================================================= * PAGE CONTACT - EFICIOS * ========================================================= * * Formulaire Divi 5 * Classe CSS du module : contact-form * * @date 27/08/2026 */ /* ========================================================= 1. CONTENEUR GLOBAL DU FORMULAIRE ========================================================= */ /* * IMPORTANT : * Divi 5 ajoute notamment la classe et_flex_module * sur le conteneur du formulaire. * * On force le module à occuper toute la largeur disponible. */ .contact-form { width: 100% !important; max-width: 100% !important; flex-basis: 100% !important; box-sizing: border-box !important; } /* ========================================================= 2. STRUCTURE GÉNÉRALE DES CHAMPS ========================================================= */ .contact-form .et_pb_contact_field { display: flex !important; flex-direction: column !important; gap: 7px !important; margin-bottom: 22px !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Suppression des espacements ajoutés par Divi */ .contact-form .et_pb_contact_form p { padding-top: 0 !important; padding-bottom: 0 !important; } /* ========================================================= 3. LABELS DES CHAMPS ========================================================= */ .contact-form .et_pb_contact_form_label { display: block !important; margin: 0 !important; padding: 0 !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.3em !important; color: #123B7A !important; } .contact-form .et_pb_contact_field > label { margin: 0 !important; padding: 0 !important; } /* ========================================================= 4. INPUTS / TEXTAREA / SELECT ========================================================= */ .contact-form .et_pb_contact_field:not([data-type="radio"]):not([data-type="checkbox"]) input, .contact-form .et_pb_contact_field textarea, .contact-form .et_pb_contact_field select { display: block !important; width: 100% !important; margin: 0 !important; padding: 12px 14px !important; box-sizing: border-box !important; background: #FFFFFF !important; border: 1px solid #D9E2F0 !important; border-radius: 6px !important; color: #123B7A !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.4em !important; box-shadow: none !important; transition: border-color 0.2s ease, box-shadow 0.2s ease; } /* ========================================================= 5. HAUTEUR DES INPUTS ========================================================= */ .contact-form .et_pb_contact_field:not([data-type="radio"]):not([data-type="checkbox"]) input { height: 44px !important; } /* ========================================================= 6. TEXTAREA ========================================================= */ .contact-form .et_pb_contact_field textarea { min-height: 110px !important; resize: none !important; } /* ========================================================= 7. PLACEHOLDERS ========================================================= */ .contact-form .et_pb_contact_field input::placeholder, .contact-form .et_pb_contact_field textarea::placeholder { color: #9AA9C1 !important; opacity: 1 !important; } /* ========================================================= 8. FOCUS DES CHAMPS ========================================================= */ .contact-form .et_pb_contact_field:not([data-type="radio"]):not([data-type="checkbox"]) input:focus, .contact-form .et_pb_contact_field textarea:focus, .contact-form .et_pb_contact_field select:focus { border-color: #216CA9 !important; box-shadow: 0 0 0 2px rgba(33, 108, 169, 0.08) !important; outline: none !important; } /* ========================================================= 9. PRÉNOM + NOM ========================================================= */ .contact-form .et_pb_contact_field_half { margin-bottom: 22px !important; } /* Suppression des marges résiduelles Divi */ .contact-form .et_pb_contact_field > input, .contact-form .et_pb_contact_field > textarea, .contact-form .et_pb_contact_field > select { margin-top: 0 !important; margin-bottom: 0 !important; } /* ========================================================= 10. OBJET DE LA DEMANDE 5 CARTES RADIO ========================================================= */ /* --------------------------------------------------------- Conteneur --------------------------------------------------------- */ .contact-form .et_pb_contact_field[data-id="demande"] { display: block !important; width: 100% !important; margin-bottom: 22px !important; padding: 0 !important; } /* --------------------------------------------------------- Titre --------------------------------------------------------- */ .contact-form .et_pb_contact_field[data-id="demande"] .et_pb_contact_form_label { display: block !important; margin: 0 0 7px 0 !important; padding: 0 !important; color: #123B7A !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.3em !important; } /* Deuxième titre généré par Divi */ .contact-form .et_pb_contact_field[data-id="demande"] .et_pb_contact_field_options_title { display: none !important; } /* --------------------------------------------------------- Wrapper --------------------------------------------------------- */ .contact-form .et_pb_contact_field[data-id="demande"] .et_pb_contact_field_options_wrapper { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* --------------------------------------------------------- Liste des cartes --------------------------------------------------------- */ .contact-form .et_pb_contact_field[data-id="demande"] .et_pb_contact_field_options_list { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* --------------------------------------------------------- Option radio --------------------------------------------------------- */ .contact-form .et_pb_contact_field[data-id="demande"] .et_pb_contact_field_radio { position: relative !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* --------------------------------------------------------- Radio natif invisible --------------------------------------------------------- */ .contact-form .et_pb_contact_field[data-id="demande"] .et_pb_contact_field_radio input { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; pointer-events: none !important; } /* Masquage du rond radio Divi */ .contact-form .et_pb_contact_field[data-id="demande"] .et_pb_contact_field_radio label i { display: none !important; } /* --------------------------------------------------------- Carte --------------------------------------------------------- */ .contact-form .et_pb_contact_field[data-id="demande"] .et_pb_contact_field_radio label { display: grid !important; grid-template-rows: 40px 1fr !important; align-items: start !important; justify-items: center !important; row-gap: 8px !important; width: 100% !important; height: 100% !important; min-height: 110px !important; box-sizing: border-box !important; margin: 0 !important; padding: 12px 8px !important; background: #FFFFFF !important; border: 1px solid #D9E2F0 !important; border-radius: 8px !important; color: #123B7A !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.35em !important; text-align: center !important; cursor: pointer !important; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease; } /* Hover */ .contact-form .et_pb_contact_field[data-id="demande"] .et_pb_contact_field_radio label:hover { border-color: #216CA9 !important; box-shadow: 0 4px 12px rgba(33, 108, 169, 0.08) !important; transform: translateY(-1px); } /* Carte sélectionnée */ .contact-form .et_pb_contact_field[data-id="demande"] .et_pb_contact_field_radio input:checked + label { background: #F7FBFF !important; border-color: #216CA9 !important; box-shadow: 0 0 0 1px rgba(33, 108, 169, 0.12) !important; color: #123B7A !important; } /* Focus clavier */ .contact-form .et_pb_contact_field[data-id="demande"] .et_pb_contact_field_radio input:focus-visible + label { border-color: #216CA9 !important; box-shadow: 0 0 0 3px rgba(33, 108, 169, 0.15) !important; } /* ========================================================= 11. ICÔNES DES CARTES ========================================================= */ .contact-form .contact-radio-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; border-radius: 50%; color: #FFFFFF; } .contact-form .contact-radio-icon svg { display: block !important; width: 21px !important; height: 21px !important; margin: 0 !important; padding: 0 !important; } /* Bleu */ .contact-form .contact-radio-icon-blue { background: #1F6FFF; } /* Orange */ .contact-form .contact-radio-icon-orange { background: #FF6A13; } /* Vert */ .contact-form .contact-radio-icon-green { background: #0DBF63; } /* Violet */ .contact-form .contact-radio-icon-violet { background: #7026E8; } /* Rouge */ .contact-form .contact-radio-icon-red { background: #FF1744; } /* ========================================================= 12. CASE D'ACCEPTATION ========================================================= */ .contact-form .et_pb_contact_field[data-type="checkbox"] { display: block !important; width: 100% !important; margin: 0 0 22px 0 !important; padding: 0 !important; } /* Masquage des titres Divi */ .contact-form .et_pb_contact_field[data-type="checkbox"] .et_pb_contact_form_label, .contact-form .et_pb_contact_field[data-type="checkbox"] .et_pb_contact_field_options_title { display: none !important; } /* Wrapper */ .contact-form .et_pb_contact_field[data-type="checkbox"] .et_pb_contact_field_options_wrapper { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Liste */ .contact-form .et_pb_contact_field[data-type="checkbox"] .et_pb_contact_field_options_list { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Option */ .contact-form .et_pb_contact_field[data-type="checkbox"] .et_pb_contact_field_checkbox { position: relative !important; display: block !important; margin: 0 !important; padding: 0 !important; } /* Checkbox native invisible */ .contact-form .et_pb_contact_field[data-type="checkbox"] .et_pb_contact_field_checkbox input { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; } /* Label */ .contact-form .et_pb_contact_field[data-type="checkbox"] .et_pb_contact_field_checkbox label { display: flex !important; align-items: center !important; gap: 9px !important; width: auto !important; margin: 0 !important; padding: 0 !important; color: #123B7A !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.4em !important; cursor: pointer !important; } /* Carré personnalisé */ .contact-form .et_pb_contact_field[data-type="checkbox"] .et_pb_contact_field_checkbox label i { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 16px !important; width: 16px !important; height: 16px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; background: #FFFFFF !important; border: 1px solid #BFCDE0 !important; border-radius: 3px !important; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } /* Checkbox cochée */ .contact-form .et_pb_contact_field[data-type="checkbox"] .et_pb_contact_field_checkbox input:checked + label i { background: #129B55 !important; border-color: #129B55 !important; } /* Coche blanche */ .contact-form .et_pb_contact_field[data-type="checkbox"] .et_pb_contact_field_checkbox input:checked + label i::after { content: ""; display: block; width: 4px; height: 8px; border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); } /* Hover */ .contact-form .et_pb_contact_field[data-type="checkbox"] .et_pb_contact_field_checkbox label:hover i { border-color: #216CA9 !important; } /* Focus clavier */ .contact-form .et_pb_contact_field[data-type="checkbox"] .et_pb_contact_field_checkbox input:focus-visible + label i { border-color: #216CA9 !important; box-shadow: 0 0 0 3px rgba(33, 108, 169, 0.12) !important; } /* ========================================================= 13. BOUTON D'ENVOI ========================================================= */ .contact-form .et_contact_bottom_container { display: block !important; float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .contact-form .et_pb_contact_submit { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 46px !important; margin: 0 !important; padding: 0 20px !important; background: #129B55 !important; border: 0 !important; border-radius: 6px !important; color: #FFFFFF !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1 !important; text-align: center !important; cursor: pointer !important; box-shadow: none !important; transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important; } /* Suppression de la flèche Divi */ .contact-form .et_pb_contact_submit::after { display: none !important; } /* Hover */ .contact-form .et_pb_contact_submit:hover { background: #0D8849 !important; padding: 0 20px !important; box-shadow: 0 5px 14px rgba(18, 155, 85, 0.18) !important; transform: translateY(-1px); } /* Clic */ .contact-form .et_pb_contact_submit:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(18, 155, 85, 0.15) !important; } /* Focus clavier */ .contact-form .et_pb_contact_submit:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(18, 155, 85, 0.18) !important; } /* ========================================================= 14. MESSAGE DIVI ========================================================= */ /* * La div de message existe même lorsqu'elle est vide. * Elle reste donc masquée par défaut. */ .contact-form > .et-pb-contact-message { display: none !important; } /* * En cas d'erreur Divi génère une liste UL. * On masque ce récapitulatif. */ .contact-form > .et-pb-contact-message:has(ul) { display: none !important; } /* Autre message d'erreur Divi */ .contact-form .et_pb_contact_error_text { display: none !important; } /* ========================================================= 15. MESSAGE DE CONFIRMATION ========================================================= */ /* * Après un envoi réussi, Divi génère : * * .contact-form * > .et-pb-contact-message * > p */ .contact-form > .et-pb-contact-message:has(p):not(:has(ul)) { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 0 20px 0 !important; padding: 18px 20px !important; background: #F1FBF6 !important; border: 1px solid rgba(18, 155, 85, 0.20) !important; border-radius: 8px !important; color: #129B55 !important; text-align: center !important; } /* Texte de confirmation */ .contact-form > .et-pb-contact-message:has(p):not(:has(ul)) > p { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; color: #129B55 !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.5em !important; text-align: center !important; } /* ========================================================= 16. ERREURS - CHAMPS CLASSIQUES ========================================================= */ /* * Seul le titre du champ passe en rouge. */ .contact-form .et_pb_contact_field:has(.et_contact_error) .et_pb_contact_form_label { color: #FF1744 !important; } /* * Pas de bordure rouge sur les champs. */ .contact-form input.et_contact_error, .contact-form textarea.et_contact_error, .contact-form select.et_contact_error, .contact-form .et_pb_contact_field textarea.et_contact_error { border-color: #D9E2F0 !important; box-shadow: none !important; } /* Focus d'un champ en erreur */ .contact-form input.et_contact_error:focus, .contact-form textarea.et_contact_error:focus, .contact-form select.et_contact_error:focus { border-color: #216CA9 !important; box-shadow: 0 0 0 2px rgba(33, 108, 169, 0.08) !important; } /* ========================================================= 17. ERREURS - OBJET DE LA DEMANDE ========================================================= */ /* * Titre du groupe en rouge. */ .contact-form .et_pb_contact_field[data-id="demande"]:has(.et_contact_error) > .et_pb_contact_form_label, .contact-form .et_pb_contact_field[data-id="demande"].et_contact_error > .et_pb_contact_form_label { color: #FF1744 !important; } /* * Les textes des cartes restent TOUJOURS bleus. */ .contact-form .et_pb_contact_field[data-id="demande"] .et_pb_contact_field_radio label, .contact-form .et_pb_contact_field[data-id="demande"] .et_pb_contact_field_radio label.et_contact_error, .contact-form .et_pb_contact_field[data-id="demande"] .et_pb_contact_field_radio input.et_contact_error + label, .contact-form .et_pb_contact_field[data-id="demande"].et_contact_error .et_pb_contact_field_radio label, .contact-form .et_pb_contact_field[data-id="demande"]:has(.et_contact_error) .et_pb_contact_field_radio label { color: #123B7A !important; } /* * Pas de bordure rouge sur les cartes. */ .contact-form .et_pb_contact_field[data-id="demande"]:has(.et_contact_error) .et_pb_contact_field_radio label, .contact-form .et_pb_contact_field[data-id="demande"].et_contact_error .et_pb_contact_field_radio label { border-color: #D9E2F0 !important; } /* Hover conservé */ .contact-form .et_pb_contact_field[data-id="demande"]:has(.et_contact_error) .et_pb_contact_field_radio label:hover, .contact-form .et_pb_contact_field[data-id="demande"].et_contact_error .et_pb_contact_field_radio label:hover { border-color: #216CA9 !important; } /* Carte sélectionnée */ .contact-form .et_pb_contact_field[data-id="demande"] .et_pb_contact_field_radio input:checked + label { color: #123B7A !important; background: #F7FBFF !important; border-color: #216CA9 !important; } /* ========================================================= 18. ERREURS - CASE D'ACCEPTATION ========================================================= */ /* Texte en rouge */ .contact-form .et_pb_contact_field[data-type="checkbox"]:has(.et_contact_error) .et_pb_contact_field_checkbox label { color: #FF1744 !important; } /* Carré en rouge */ .contact-form .et_pb_contact_field[data-type="checkbox"]:has(.et_contact_error) .et_pb_contact_field_checkbox label i { border-color: #FF1744 !important; } /* ========================================================= 19. TABLETTE ========================================================= */ @media (max-width: 980px) { .contact-form .et_pb_contact_field[data-id="demande"] .et_pb_contact_field_options_list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } } /* ========================================================= 20. MOBILE ========================================================= */ @media (max-width: 767px) { /* Champs */ .contact-form .et_pb_contact_field { gap: 6px !important; margin-bottom: 18px !important; } .contact-form .et_pb_contact_field:not([data-type="radio"]):not([data-type="checkbox"]) input { height: 44px !important; } .contact-form .et_pb_contact_field textarea { min-height: 110px !important; } /* Cartes radio */ .contact-form .et_pb_contact_field[data-id="demande"] .et_pb_contact_field_options_list { grid-template-columns: 1fr !important; gap: 8px !important; } .contact-form .et_pb_contact_field[data-id="demande"] .et_pb_contact_field_radio label { grid-template-rows: 40px auto !important; min-height: 90px !important; padding: 10px 12px !important; row-gap: 7px !important; } /* Consentement */ .contact-form .et_pb_contact_field[data-type="checkbox"] .et_pb_contact_field_checkbox label { align-items: flex-start !important; font-size: 13px !important; } .contact-form .et_pb_contact_field[data-type="checkbox"] .et_pb_contact_field_checkbox label i { margin-top: 1px !important; } /* Confirmation */ .contact-form > .et-pb-contact-message:has(p):not(:has(ul)) { padding: 15px 16px !important; } .contact-form > .et-pb-contact-message:has(p):not(:has(ul)) > p { font-size: 13px !important; } }