/* 
Theme Name: Hello Elementor Child
*/
/* 
Theme Name: Hello Elementor Child
*/


.page-contact {

    /* ==========================================================================
    PAGE CONTACT — formulaire
    ========================================================================== */

    /* Icônes SVG décoratives du bloc contact */
    .contact-container svg path {
        fill: var(--e-global-color-5cbd812) !important;
    }

    /* --------------------------------------------------------------------------
    Groupe de cases « services » (1er field-group) stylé en pastilles
    -------------------------------------------------------------------------- */
    .elementor-form > div.elementor-form-fields-wrapper > .elementor-field-group:first-child .elementor-field-subgroup {
        --rb-accent: #DC440A;
        --rb-selected-bg: #EEE6D6;

        display: flex;
        flex-wrap: wrap;
        gap: .75rem;

        .elementor-field-option {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            width: fit-content;
            flex-basis: auto !important;
            padding: 13px 25px 13px 55px;
            border-radius: 33px;
            background: var(--e-global-color-77af503);
            color: var(--e-global-color-9cce11a);
            font-family: var(--e-global-typography-primary-font-family);
            font-size: var(--e-global-typography-primary-font-size);
            font-weight: var(--e-global-typography-secondary-font-weight);
            font-style: normal;
            line-height: 18px;
            cursor: pointer;
            user-select: none;
            transition: border-color .15s ease, background .15s ease, color .15s ease;

            /* dernière option : pas d'icône */
            &:last-child {
                padding: 13px 25px;
                label::before { display: none; }
            }

            /* survol + état sélectionné */
            &:hover,
            &:has(input:checked) {
                background: var(--rb-selected-bg);
                color: var(--e-global-color-24500b4) !important;

                label { color: var(--e-global-color-24500b4) !important; }
            }

            /* focus clavier */
            &:has(input:focus-visible) {
                outline: 2px solid var(--rb-accent);
                outline-offset: 2px;
            }

            label {
                margin: 0;
                cursor: pointer;
            }

            /* emplacement de l'icône (l'image est définie plus bas, par option) */
            label::before {
                content: "";
                position: absolute;
                left: 25px;
                top: 50%;
                transform: translateY(-50%);
                width: 20px;
                height: 20px;
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
            }

            /* checkbox masquée mais focusable */
            input[type="checkbox"] {
                position: absolute;
                width: 1px;
                height: 1px;
                margin: -1px;
                padding: 0;
                border: 0;
                overflow: hidden;
                clip: rect(0 0 0 0);
                white-space: nowrap;
            }
        }
    }

    /* Une icône par option */
    .elementor-field-option:has(input[value="Bilan mobilité"]) label::before {
        background-image: url('https://mobilidee.logia-web.fr/wp-content/uploads/2026/06/bilan-orange.svg');
    }
    .elementor-field-option:has(input[value="Plan de mobilité"]) label::before {
        background-image: url('https://mobilidee.logia-web.fr/wp-content/uploads/2026/06/plan-orange.svg');
    }
    .elementor-field-option:has(input[value="Stationnement"]) label::before {
        background-image: url('https://mobilidee.logia-web.fr/wp-content/uploads/2026/06/stationnement-orange.svg');
    }
    .elementor-field-option:has(input[value="Expertise cyclable"]) label::before {
        background-image: url('https://mobilidee.logia-web.fr/wp-content/uploads/2026/06/cyclable-orange.svg');
    }
    .elementor-field-option:has(input[value="Covoiturage"]) label::before {
        background-image: url('https://mobilidee.logia-web.fr/wp-content/uploads/2026/06/covoiturage-orange.svg');
    }
    .elementor-field-option:has(input[value="Démo fairmove"]) label::before {
        background-image: url('https://mobilidee.logia-web.fr/wp-content/uploads/2026/06/Mask-group.webp');
    }

    /* --------------------------------------------------------------------------
    Case à cocher RGPD
    -------------------------------------------------------------------------- */
    .elementor-form > div.elementor-form-fields-wrapper .elementor-field-group-field_accept .elementor-field-subgroup label,
    .elementor-field-type-captcha-mandatory .texte-captcha,
    .elementor-field-type-html {
        color: rgba(255, 255, 255, 0.70) !important;
        font-family: var(--e-global-typography-primary-font-family) !important;
        font-size: 1rem !important;
        font-weight: 400 !important;
        font-style: normal !important;
        line-height: normal !important;
    }

    /* Champs : retire l'ombre au focus */
    .elementor-form > div.elementor-form-fields-wrapper input:focus {
        box-shadow: none;
    }

    /* capchat*/
    .elementor-field-type-captcha-mandatory,
    .elementor-field-type-html {
        margin-bottom : 15px!important;
        a {
            color: var(--e-global-color-primary);
            &:hover {
                color: var(--e-global-color-d03b0a6);
            }
        }
    }

    .elementor-field-type-captcha-mandatory {
        display: none!important;
    }

    /* phrase apres le btn submit*/
    .elementor-field-type-submit {
        display: flex!important;
        justify-content: flex-start!important;
        align-items: center!important;
        gap: 3rem;

        @media (max-width: 1170px) {
            gap: 2rem;
        }

        &::after {
            content: "Réponse sous 48 h ouvrées · pas de relance commerciale automatique";
            color: #F4E8BC;
            text-align: left;
            font-family: var(--e-global-typography-primary-font-family) !important;
            font-size: 1.125rem!important;
            font-style: italic;
            font-weight: 400;
            line-height: 1.125rem;
        }
    }

    @media screen and (max-width: 1024px) {
        .hideBgOnTabMob {
            background-image: none!important;
            background-color: var(--e-global-color-primary)!important;
        }
    }

    .contact-container .elementor-element {
        & .contact-info .elementor-heading-title { 
            @media (max-width: 1024px) {
                font-size: 1.5rem!important;
            }
        }

    }
}

input, textarea {
    margin-top: 10px!important;
    padding-top: 10px!important;
    &:focus {
        box-shadow: none!important;
    }
}

/* Version anglaise de la phrase après le bouton submit (TranslatePress ajoute la classe de langue sur le <body>) */
body.translatepress-en_CA.page-contact .elementor-field-type-submit::after {
    content: "Response within 48 business hours · no automatic follow-up" !important;
}