.elementor-367 .elementor-element.elementor-element-727d2bf{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-5055b4f */@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Roboto:wght@400;500;600;700&display=swap');


:root{
    --contact-blue:#21489A;
    --contact-orange:#ff571c;

    --contact-light:#fbfaf7;
    --contact-beige:#f4eee6;

    --contact-text:#647c8a;

    --contact-line:rgba(33,72,154,.11);
}


/* =========================================================
   RESET
========================================================= */

.contact-page,
.contact-page *,
.contact-page *::before,
.contact-page *::after{
    box-sizing:border-box;
}


.contact-page{
    width:100%;

    overflow:hidden;

    background:var(--contact-light);

    color:var(--contact-blue);

    font-family:"Roboto",sans-serif;
}


.contact-page a{
    text-decoration:none;
}


/* =========================================================
   CONTAINER
========================================================= */

.contact-container{
    width:min(
        1040px,
        calc(100% - 90px)
    );

    margin:0 auto;
}


/* =========================================================
   HERO
========================================================= */

.contact-hero{
    position:relative;

    overflow:hidden;

    padding:
        clamp(55px,5vw,75px)
        0
        clamp(75px,7vw,100px);

    background:
        radial-gradient(
            circle at 92% 0%,
            rgba(255,87,28,.055),
            transparent 29%
        ),
        linear-gradient(
            115deg,
            var(--contact-light),
            var(--contact-beige)
        );
}


/* =========================================================
   GRID
========================================================= */

.contact-grid{
    position:absolute;

    inset:0;

    pointer-events:none;

    background-image:
        linear-gradient(
            rgba(33,72,154,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(33,72,154,.025) 1px,
            transparent 1px
        );

    background-size:
        92px
        92px;
}


/* =========================================================
   LABEL
========================================================= */

.contact-label{
    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:
        clamp(30px,3vw,42px);
}


.contact-label > span{
    width:42px;
    height:2px;

    flex:0 0 42px;

    background:var(--contact-orange);
}


.contact-label small{
    color:#748a97;

    font-family:"Montserrat",sans-serif;

    font-size:16px;

    font-weight:800;

    line-height:1;

    letter-spacing:.17em;

    text-transform:uppercase;
}


/* =========================================================
   TITLE
========================================================= */

.contact-title{
    position:relative;

    z-index:2;

    width:fit-content;

    max-width:100%;

    margin:0;

    font-family:"Montserrat",sans-serif;

    font-size:
        clamp(58px,5.6vw,90px);

    font-weight:800;

    line-height:.88;

    letter-spacing:-.06em;
}


.contact-title__top{
    display:block;

    color:var(--contact-blue);
}


.contact-title__bottom{
    position:relative;

    display:block;

    width:fit-content;

    margin-top:8px;

    margin-left:
        clamp(38px,4vw,64px);

    color:var(--contact-orange);

    font-weight:800;
}


/* =========================================================
   SQUARE DOT
========================================================= */

.contact-title__dot{
    position:absolute;

    left:
        calc(100% + .11em);

    bottom:.08em;

    width:.14em;
    height:.14em;

    background:var(--contact-blue);
}


/* =========================================================
   FORM SHELL
========================================================= */

.contact-form-shell{
    position:relative;

    z-index:2;

    width:100%;

    margin-top:
        clamp(45px,5vw,65px);

    padding:
        clamp(34px,4vw,52px);

    background:
        rgba(255,255,255,.78);

    border:
        1px solid
        var(--contact-line);

    border-radius:26px;

    box-shadow:
        0 22px 55px
        rgba(33,72,154,.07);
}


/* =========================================================
   FORM
========================================================= */

.z-contact-form{
    width:100%;
}


/* =========================================================
   GRID
========================================================= */

.z-form-grid{
    display:grid;

    gap:20px;

    margin-bottom:22px;
}


.z-form-grid--2{
    grid-template-columns:
        repeat(2,minmax(0,1fr));
}


.z-form-grid--phone{
    grid-template-columns:
        .65fr
        1.35fr;
}


/* =========================================================
   FIELD
========================================================= */

.z-field{
    width:100%;

    margin-bottom:22px;
}


.z-form-grid .z-field{
    margin-bottom:0;
}


/* =========================================================
   LABEL
========================================================= */

.z-field label{
    display:block;

    margin-bottom:9px;

    color:var(--contact-blue);

    font-family:"Montserrat",sans-serif;

    font-size:13px;

    font-weight:700;

    line-height:1.3;
}


.z-field label span{
    color:var(--contact-orange);
}


/* =========================================================
   INPUTS
========================================================= */

.z-contact-form input[type="text"],
.z-contact-form input[type="email"],
.z-contact-form input[type="tel"],
.z-contact-form select,
.z-contact-form textarea{
    width:100%;

    min-height:58px;

    margin:0;

    padding:
        0
        18px;

    border:
        1px solid
        #d5dfe4;

    border-radius:14px;

    outline:none;

    background:#fff;

    color:var(--contact-blue);

    font-family:"Roboto",sans-serif;

    font-size:15px;

    box-shadow:none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.z-contact-form textarea{
    min-height:150px;

    padding:
        16px
        18px;

    line-height:1.6;

    resize:vertical;
}


.z-contact-form input:focus,
.z-contact-form select:focus,
.z-contact-form textarea:focus{
    border-color:
        rgba(255,87,28,.65);

    box-shadow:
        0 0 0 3px
        rgba(255,87,28,.08);
}


/* =========================================================
   PLACEHOLDER
========================================================= */

.z-contact-form input::placeholder,
.z-contact-form textarea::placeholder{
    color:#9aa8b0;

    opacity:1;
}


/* =========================================================
   SELECT
========================================================= */

.z-contact-form select{
    cursor:pointer;
}


/* =========================================================
   ACTION AREA
   CAPTCHA + BUTTON SUR LA MÊME LIGNE
========================================================= */

.z-form-actions{
    width:100%;

    margin-top:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:32px;
}


/* =========================================================
   CAPTCHA
========================================================= */

.z-recaptcha{
    flex:0 0 auto;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 !important;

    padding:0 !important;
}


.z-recaptcha > p,
.z-recaptcha p,
.z-recaptcha .wpcf7-form-control-wrap,
.z-recaptcha .g-recaptcha{
    margin:0 !important;

    padding:0 !important;
}


/* =========================================================
   SUBMIT AREA
========================================================= */

.z-submit-area{
    flex:0 0 290px;

    width:290px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    margin:0 !important;

    padding:0 !important;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.z-contact-form .z-submit{
    width:290px !important;

    min-width:290px !important;

    height:64px !important;

    min-height:64px !important;

    margin:0 !important;

    padding:
        0
        24px !important;

    border:0 !important;

    border-radius:
        18px !important;

    background:
        var(--contact-blue) !important;

    color:#fff !important;

    font-family:
        "Montserrat",
        sans-serif !important;

    font-size:
        16px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    text-align:center;

    cursor:pointer;

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}


.z-contact-form .z-submit:hover{
    transform:
        translateY(-2px);

    background:
        var(--contact-orange) !important;

    box-shadow:
        0 12px 26px
        rgba(33,72,154,.14);
}


/* =========================================================
   REQUIRED TEXT
========================================================= */

.z-required{
    margin:
        9px
        0
        0 !important;

    color:#8b9aa3;

    font-family:"Roboto",sans-serif;

    font-size:11px;

    font-weight:400;

    line-height:1.2;

    text-align:center;
}


/* =========================================================
   IMPORTANT — CF7 PARAGRAPH RESET
========================================================= */

.z-form-actions > p,
.z-submit-area > p:not(.z-required){
    margin:0 !important;

    padding:0 !important;
}


/* =========================================================
   CF7 SPINNER
========================================================= */

.z-submit-area .wpcf7-spinner{
    position:absolute;

    margin:0 0 0 8px;
}


/* =========================================================
   CF7 VALIDATION
========================================================= */

.z-contact-form .wpcf7-not-valid-tip{
    display:block;

    margin-top:6px;

    color:var(--contact-orange);

    font-size:12px;

    line-height:1.3;
}


.contact-form-shell .wpcf7-response-output{
    margin:
        28px
        0
        0 !important;

    padding:
        14px
        17px !important;

    border:
        1px solid
        var(--contact-orange) !important;

    border-radius:12px;

    color:var(--contact-blue);

    font-size:14px;

    line-height:1.5;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px){

    .contact-container{
        width:
            calc(100% - 50px);
    }


    .z-form-actions{
        gap:22px;
    }


    .z-submit-area{
        flex-basis:260px;

        width:260px;
    }


    .z-contact-form .z-submit{
        width:260px !important;

        min-width:260px !important;

        font-size:
            15px !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

    .contact-container{
        width:
            calc(100% - 32px);
    }


    /* HERO */

    .contact-hero{
        padding:
            42px
            0
            60px;
    }


    .contact-grid{
        background-size:
            58px
            58px;
    }


    /* LABEL */

    .contact-label{
        gap:11px;

        margin-bottom:25px;
    }


    .contact-label > span{
        width:28px;

        flex-basis:28px;
    }


    .contact-label small{
        font-size:11px;

        letter-spacing:.14em;
    }


    /* TITLE */

    .contact-title{
        font-size:
            clamp(42px,11.5vw,56px);
    }


    .contact-title__bottom{
        margin-left:
            clamp(24px,7vw,34px);
    }


    /* FORM */

    .contact-form-shell{
        margin-top:35px;

        padding:
            25px
            17px;

        border-radius:20px;
    }


    /* GRIDS */

    .z-form-grid--2,
    .z-form-grid--phone{
        grid-template-columns:1fr;
    }


    .z-form-grid{
        gap:22px;
    }


    /* ACTIONS */

    .z-form-actions{
        flex-direction:column;

        align-items:stretch;

        gap:20px;

        margin-top:25px;
    }


    /* CAPTCHA */

    .z-recaptcha{
        justify-content:flex-start;
    }


    /* SUBMIT */

    .z-submit-area{
        flex:
            0
            0
            auto;

        width:100%;

        align-items:stretch;
    }


    .z-contact-form .z-submit{
        width:100% !important;

        min-width:0 !important;

        height:62px !important;

        min-height:62px !important;

        font-size:
            16px !important;
    }


    .z-required{
        text-align:left;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:390px){

    .contact-container{
        width:
            calc(100% - 28px);
    }


    .contact-title{
        font-size:40px;
    }


    .contact-form-shell{
        padding:
            22px
            14px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    .z-contact-form .z-submit{
        transition:none !important;
    }

}
/* =========================================================
   ESPACE CAPTCHA → BOUTON
========================================================= */

.z-form-actions{
    gap:28px !important;
}

/* Si le formulaire est actuellement affiché verticalement */
.z-recaptcha{
    margin-bottom:28px !important;
}

.z-submit-area{
    margin-top:0 !important;
}/* End custom CSS */