@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ── Reset total — bloque les styles du thème WordPress ── */
#sc-funnel-container,
#sc-funnel-container *,
#sc-funnel-container *::before,
#sc-funnel-container *::after {
    font-family: 'Poppins', sans-serif !important;
    box-sizing: border-box !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    -webkit-font-smoothing: antialiased;
}

/* ── Wrapper ── */
.estimate-pro-wrapper {
    --accent: #F1D835;
    --text-dark: #1F2332;
    --text-gray: #555555;
    font-family: 'Poppins', sans-serif !important;
    max-width: 100%;
    margin: 30px auto;
    padding: 20px 10px;
    background: transparent;
}

/* ── Conteneur principal ── */
/* Même carte que le formulaire d'estimation (#funnel-container dans
   funnel.css) : padding, coins et ombre identiques pour une esthétique
   cohérente entre tous les formulaires du site. */
#sc-funnel-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 40px 36px 20px !important;
    border: none !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #1F2332 !important;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.225), 0 8px 20px -8px rgba(0,0,0,0.15) !important;
    text-align: left;
}

/* ── Titre ── */
#sc-funnel-container h3 {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
    color: #1F2332 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

.question-description {
    font-style: italic !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #555555 !important;
    margin: 0 0 14px 0 !important;
    line-height: 1.4 !important;
}

/* Surlignage jaune, comme l'indicateur "cliquez sur une réponse" du formulaire d'estimation */
#sc-funnel-container .question-description {
    display: inline-block !important;
    font-style: normal !important;
    font-weight: 600 !important;
    color: #8a7400 !important;
    background: #FFF9DB !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    margin: 0 0 16px 0 !important;
}

/* ── Groupes de champs ── */
#simple-contact-form .input-group,
#sc-captcha-container {
    margin-bottom: 10px !important;
}

#simple-contact-form .input-group label,
#sc-captcha-container label {
    font-size: 13px !important;
    font-weight: 500 !important;
    display: block !important;
    margin-bottom: 4px !important;
    color: #1F2332 !important;
    line-height: 1.3 !important;
}

/* ── Inputs, textarea ── */
#simple-contact-form input[type="text"],
#simple-contact-form input[type="email"],
#simple-contact-form input[type="number"],
#simple-contact-form textarea,
#sc-captcha-container input[type="number"] {
    width: 100% !important;
    padding: 14px !important;
    border: 1px solid #cccccc !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #1F2332 !important;
    background: #ffffff !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    outline: none;
    transition: border-color 0.2s;
}

#simple-contact-form input:focus,
#simple-contact-form textarea:focus,
#sc-captcha-container input:focus {
    border-color: #F1D835 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(241, 216, 53, 0.25) !important;
}

#simple-contact-form textarea {
    resize: vertical !important;
    min-height: 70px !important;
}

/* ── Erreurs ── */
.sc-error {
    color: #cc0000 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-top: 6px !important;
    margin-bottom: 4px !important;
    line-height: 1.4 !important;
    display: block;
    min-height: 0;
}

/* ── Bouton d'envoi ── */
#sc-submit-button {
    background-color: #1F2332 !important;
    color: #ffffff !important;
    padding: 14px 24px !important;
    border: none !important;
    border-radius: 4px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    transition: background-color 0.2s, color 0.2s;
    width: 100%;
}

#sc-submit-button:hover {
    background-color: #F1D835 !important;
    color: #1F2332 !important;
}

/* ── Trust + confidentialité ── */
.estimate-pro-trust {
    display: flex !important;
    justify-content: center !important;
    gap: 35px !important;
    flex-wrap: wrap !important;
}
/* Style scopé au formulaire de contact uniquement (via #sc-funnel-container),
   pour ne plus entrer en conflit avec le formulaire d'estimation
   (#funnel-container) défini dans funnel.css. */
.estimate-form-container:has(#sc-funnel-container) ~ .estimate-pro-trust {
    margin: 20px auto 0 !important;
    padding: 14px 24px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: #fafbfc !important;
    border: 1px solid #eee !important;
    border-radius: 30px !important;
}
.trust-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #555555 !important;
    line-height: 1.4 !important;
}
.trust-item svg { stroke: #F1D835; flex-shrink: 0; }

/* Ligne "Vos données restent strictement confidentielles" : supprimée,
   comme sur le formulaire d'estimation (voir funnel.css). */
.estimate-pro-privacy { display: none !important; }

/* ── Bloc WordPress qui wrappe le formulaire de contact — desktop ── */
.wp-block-group.masection.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained:has(.estimate-pro-wrapper) {
    width: 56% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ── Tablette (≤ 768px) ── */
@media (max-width: 768px) {
    .wp-block-group.masection.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained:has(.estimate-pro-wrapper) {
        width: 90% !important;
    }
    .estimate-pro-wrapper {
        margin: 15px auto !important;
        padding: 10px 8px !important;
    }
    #sc-funnel-container {
        padding: 18px !important;
    }
    #sc-funnel-container h3 {
        font-size: 18px !important;
    }
    .estimate-pro-trust {
        gap: 20px !important;
    }
}

/* ── Mobile (≤ 480px) ── */
@media (max-width: 480px) {
    .wp-block-group.masection.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained:has(.estimate-pro-wrapper) {
        width: 100% !important;
    }
    .estimate-pro-wrapper {
        margin: 10px auto !important;
        padding: 8px 4px !important;
    }
    #sc-funnel-container {
        padding: 14px !important;
        border-radius: 6px !important;
    }
    .estimate-pro-inner {
        margin: 3% !important;
    }
    #sc-funnel-container h3 {
        font-size: 20px !important;
        margin-bottom: 10px !important;
    }
    .question-description {
        font-size: 13px !important;
    }
    #simple-contact-form .input-group label,
    #sc-captcha-container label {
        font-size: 14px !important;
    }
    #simple-contact-form input[type="text"],
    #simple-contact-form input[type="email"],
    #simple-contact-form input[type="number"],
    #simple-contact-form textarea,
    #sc-captcha-container input[type="number"] {
        font-size: 16px !important; /* évite le zoom auto sur iOS */
        padding: 11px !important;
    }
    #sc-submit-button {
        font-size: 15px !important;
        padding: 13px 16px !important;
    }
    .estimate-form-container:has(#sc-funnel-container) ~ .estimate-pro-trust {
        gap: 14px !important;
        flex-direction: column !important;
        align-items: center !important;
        margin: 16px 0 0 !important;
        padding: 14px 16px !important;
    }
    .trust-item {
        font-size: 13px !important;
    }
}