/*
Kate style
*/

/******************/
/*******VAR********/
/******************/
:root{
    /*color*/
    --wh: #ffffff;
    --blk: #252222;
    --orange: #FA7F04;
    --canard: #025A70;
    --beige: #F4EEE9;
    /*radius*/
    --r2: 2px;
    --r8: 8px;
    --r15: 15px;
    --r20: 20px;
    --r37: 37px;
    --r50: 50px;
    /*cols*/
    --c2: 2;
    --c3: 3;
    --c4: 4;
    /*gap*/
    --g13: 13px;
    --g16: 16px;
    --g20: 20px;
    --g37: 37px;
    --g53: 53px;
    /*width*/
    --2-37: calc((100% / var(--c2)) - var(--g37) + (var(--g37) / var(--c2)));
    --3-20: calc((100% / var(--c3)) - var(--g20) + (var(--g20) / var(--c3)));
    --4-16: calc((100% / var(--c4)) - var(--g16) + (var(--g16) / var(--c4)));
}

/******************/
/*******LIENS******/
/******************/
a:link {
color: var(--blk);
}
a:visited {
color: var(--blk);
}
a:active,
a:hover {
color: var(--canard);
}

/******************/
/******POLICES*****/
/******************/
/* Space Grotesk*/
@font-face {
    font-family: 'spaceg';
    font-style: normal;
    font-weight: 300;
    src: local(''),
    url('../fonts/space-grotesk-v21-latin-300.woff2') format('woff2');
}
@font-face {
    font-family: 'spaceg';
    font-style: normal;
    font-weight: 400;
    src: local(''),
    url('../fonts/space-grotesk-v21-latin-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'spaceg';
    font-style: normal;
    font-weight: 500;
    src: local(''),
    url('../fonts/space-grotesk-v21-latin-500.woff2') format('woff2');
}
@font-face {
    font-family: 'spaceg';
    font-style: normal;
    font-weight: 500;
    src: local(''),
    url('../fonts/space-grotesk-v21-latin-700.woff2') format('woff2');
}

/*global*/
body{
    font-family: 'spaceg';
    font-weight: 400;
    font-size: 15px;
    color: var(--blk);
}
h1, h2, h3, h4, h5, h6{
    display: block;
}

/******************/
/****STRUCTURE*****/
/******************/
.widzmain{
width: 1228px;
margin-right: auto;
margin-left: auto;
}

/******************/
/******HEADER******/
/******************/
#header_content{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 25px 0 18px;
}
/*logo*/
#logo{
display: block;
width: 272px;
position: relative;
}
#logo img{
display: block;
width: 100%;
height: auto;
position: relative;
z-index: 2;
}
#logo a{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 3;
}
/*bt*/
#header_bt_block{
    display: block;
    padding-top: 15px;
}

/******************/
/******FOOTER******/
/******************/
#footer_content{
    display: block;
    padding: 15px 0 25px;
}
#footer_content ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#footer_content ul li{
    display: inline-block;
    vertical-align: middle;
}
#footer_content ul li:not(:first-child):before{
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    background: var(--blk);
    border-radius: var(--r50);
    margin: auto 6px;
    vertical-align: middle;
}
#footer_content ul li a{
    display: inline-block;
    text-decoration: none;
}

/******************/
/*******PAGES******/
/******************/
.landing_strap_title{
    display: block;
    line-height: 40px;
    margin-bottom: 31px;
    font-size: 31px;
    color: var(--blk);
    font-weight: 500;
}
.list_single_mozaik{
    display: flex;
    flex-wrap: wrap;
    gap: var(--g20);
}
.single_hentry_title{
    display: block;
    line-height: 29px;
    margin-bottom: 20px;
    font-size: 23px;
    color: var(--canard);
    font-weight: 500;
}

/*breadcrumb*/
#breadcrumb_content{
display: block;
line-height: 19px;
padding: 9px 0;
font-size: 0;
}
.breadcrumb_item{
display: inline-block;
font-size: 16px;
color: var(--blk);
}
.breadcrumb_item:last-of-type{
color: var(--kate);
}
.breadcrumb_item:not(:last-of-type):after{
content: '';
display: inline-block;
height : 0;
width : 0;
border-top : 4px solid transparent;
border-bottom : 4px solid transparent;
border-left : 5px solid var(--blk);
margin: auto 12px;
}
.breadcrumb_item a{
color: var(--blk);
text-decoration: none;
}
.breadcrumb_item a:hover{
text-decoration: underline;
}
/*Hentry*/
.page_title{
display: block;
line-height: 42px;
margin-bottom: 21px;
font-size: 33px;
font-weight: 500;
}
.page_title_chapo_sub{
display: block;
line-height: 28px;
font-size: 25px;
font-family: /**/;
}
.post_content{
padding: 44px 0 76px;
}
.page_hentry h2{
line-height: 34px;
margin-bottom: 36px;
font-size: 28px;
}
.page_hentry h3{
line-height: 22px;
margin-bottom: 20px;
font-size: 18px;
}
.page_hentry p{
line-height: 26px;
margin-bottom: 26px;
}
.page_hentry ul{
padding: 0;
margin: 0 0 26px;
}
.page_hentry ul li{
line-height: 26px;
padding: 0 0 0 14px;
margin: 0;
position: relative;
}
.page_hentry ul li:before{
content: '';
width: 4px;
height: 4px;
background: var(--blk);
border-radius: var(--r50);
position: absolute;
top: 11px;
left: 1px;
}
.page_hentry b,
.page_hentry strong{
font-family: /**/;
}
.page_hentry em{
font-family: /**/;
}
.page_hentry img{
width: auto;
max-width: 100%;
height: auto;
}

/*spe*/
.btn_principal a{
    display: block;
    line-height: 20px;
    padding: 14px;
    background: var(--canard);
    border: 1px solid var(--canard);
    border-radius: var(--r8);
    font-size: 16px;
    color: var(--wh);
    text-align: center;
    text-decoration: none;
    transition: all 0.3s;
}
.btn_principal a:hover{
    background: transparent;
    color: var(--canard);
    transition: all 0.3s;
}
.btn_secondary a{
    display: inline-block;
    line-height: 20px;
    padding: 14px 29px;
    background: var(--orange);
    border: 1px solid var(--orange);
    border-radius: var(--r8);
    font-size: 16px;
    color: var(--wh);
    text-align: center;
    text-decoration: none;
    transition: all 0.3s;
}
.btn_secondary a:hover{
    background: transparent;
    color: var(--orange);
    transition: all 0.3s;
}

/*404*/
#page_404{
display: flex;
flex-wrap: wrap;
padding: 94px 0 94px;
}
#page_404_ill_block{
width: 36.5%;
margin: 0 9.8% 0 0;
}
#page_404_ill_block object{
width: 100%;
max-width: 511px;
height: auto;
margin: auto;
}
#page_404_ill_main{
flex: 1;
padding-top: 53px;
}

/******************/
/*****HOMEPAGE*****/
/******************/
/*chapo*/
#landing_chapo{
    display: flex;
    flex-wrap: wrap;
    background: var(--beige);
    border-radius: var(--r20);
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-topright: 0;
    border-top-right-radius: 0;
    margin-bottom: 86px;
}
#landing_chapo_text{
    flex: 1;
    display: block;
    padding: 54px 84px 50px
}
#landing_chapo_pic_block{
    display: block;
    width: 51.4%;
    padding-bottom: 66px;
}
#landing_chapo_pic{
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: fit-content;
    padding: 0 0 28px 28px;
    background: linear-gradient(180deg,var(--beige) 0%, #E4DEDA 100%);
    -webkit-border-bottom-left-radius: var(--r37);
    -moz-border-radius-bottomleft: var(--r37);
    border-bottom-left-radius: var(--r37);
}
#landing_chapo_pic_block img{
    display: block;
    width: 100%;
    height: auto;
    -webkit-border-bottom-left-radius: var(--r20);
    -moz-border-radius-bottomleft: var(--r20);
    border-bottom-left-radius: var(--r20);
    margin: 0;
}

/*triptyque*/
#landing_triptyque_strap{
    margin-bottom: 86px;
}
#landing_triptyque_strap  .list_single_mozaik{
    margin-bottom: 57px;
}
.landing_triptyque_single{
    flex: 1;
    display: block;
    background: var(--beige);
    border-radius: var(--r20);
}
.landing_triptyque_single_content{
    display: block;
    padding: 40px 47px 32px;
}
#landing_triptyque_bt_strap{
    display: block;
    text-align: center;
}

/*chiffres*/
#landing_chiffres_strap{
    display: block;
    background: var(--canard);
    margin: 0 0 128px;
    color: var(--wh);
}
#landing_chiffres{
    display: block;
    padding: 82px 0 63px;
}
#landing_chiffres .list_single_mozaik{
    gap: var(--g53);
}
.landing_chiffres_single{
    flex: 1;
}
.landing_chiffres_single_content{
    display: flex;
    flex-wrap: wrap;
}
.landing_chiffres_single_pic{
    display: block;
    width: 30px;
    text-align: left;
}
.landing_chiffres_single_pic img{
    display: block;
    margin: 0;
}
.landing_chiffres_single_hentry{
    flex: 1;
}
.landing_chiffres_single_title{
    display: block;
    line-height: 27px;
    margin-bottom: 10px;
    font-size: 21px;
    font-weight: 500;
}

/*push*/
#landing_push{
    display: block;
    margin-bottom: 109px;
    position: relative;
}
img#landing_push_pic{
    display: block;
    width: 100%;
    height: 100%;
    margin: auto;
    object-fit: cover;
    border-radius: var(--r20);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
}
#landing_push_content{
    display: flex;
    height: 433px;
    position: relative;
    z-index: 3;
}
#landing_push_hentry{
    display: block;
    height: fit-content;
    margin: auto auto auto 6.8%;
    text-align: left;
}
.landing_push_l_title{
    display: block;
    line-height: 34px;
    font-size: 29px;
    color: var(--wh);
    font-weight: 400;
}
.landing_push_b_title{
    display: block;
    line-height: 49px;
    margin-bottom: 20px;
    font-size: 41px;
    color: var(--wh);
    font-weight: 500;
}

/*actualites*/
#landing_actualites_strap .landing_strap_title{
    margin-bottom: 65px;
    text-align: center;
}
#landing_actualites_strap{
    margin-bottom: 109px;
}
#landing_actualites_sliderarea{
    display: block;
    padding: 0 15%;
    position: relative;
}
.landing_actualites_single_label{
    display: block;
    line-height: 26px;
    font-size: 15px;
    color: var(--orange);
    text-transform: uppercase;
}
.landing_actualites_slider_next,
.landing_actualites_slider_prev{
    display: block;
    width: 48px;
    height: 48px;
    background: url('../img/pic_ill_next.svg') no-repeat center;
    position: absolute;
    top: 28px;
    bottom: 0;
    z-index: 4;
}
.landing_actualites_slider_prev{
    transform: rotate(180deg);
    left: 8.4%;
}
.landing_actualites_slider_next{
    right: 8.4%;
}
.swiper-button-disabled{
    opacity: 0.5;
}

/*double*/
#landing_double_strap{
    margin-bottom: 155px;
}
#landing_double_strap .list_single_mozaik{
    gap: var(--g37);
}
.landing_double_single_pic{
    display: block;
    width: 100%;
    height: 344px;
    position: relative;
}
.landing_double_single_pic img{
    display: block;
    width: 100%;
    height: 100%;
    margin: auto;
    object-fit: cover;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
}
#landing_double_strap .landing_triptyque_single .btn_secondary{
    display: block;
    width: fit-content;
    margin: 0 0 0 auto;
}

/*références*/
#landing_references_strap{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 124px;
}
.landing_references_side{
    flex: 2;
}
.landing_references_mozaik{
    flex: 5;
}
.landing_references_mozaik .list_single_mozaik{
    gap: var(--g16);
}
.landing_references_single{
    display: block;
    box-sizing: border-box;
    width: var(--4-16);
    border: 1px solid var(--beige);
    border-radius: var(--r15);
}
.landing_references_single_pic{
    display: flex;
    width: 100%;
    height: 109px;
}
.landing_references_single_pic img{
    display: block;
    width: auto;
    max-width: 90%;
    height: auto;
    max-height: 90%;
    margin: auto;
}

/*formulaire*/
#landing_formulaire_strap{
    display: block;
    background: var(--canard);
    border-radius: var(--r20);
}
#landing_formulaire_content{
    display: flex;
    padding: 0;
}

.landing_formulaire_pic_block{
    display: block;
    box-sizing: border-box;
    width: 372px;
    height: fit-content;
    padding: 0 36px 36px 0;
    background: linear-gradient(180deg,var(--canard) 0%, #015165 100%);
    -webkit-border-bottom-right-radius: var(--r37);
    -moz-border-radius-bottomright: var(--r37);
    border-bottom-right-radius: var(--r37);

    -webkit-border-top-left-radius: var(--r20);
    -moz-border-radius-topleft: var(--r20);
    border-top-left-radius: var(--r20);
}
.landing_formulaire_pic{
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: 405px;
    background: var(--canard);
    -webkit-border-bottom-right-radius: var(--r37);
    -moz-border-radius-bottomright: var(--r37);
    border-bottom-right-radius: var(--r37);
    -webkit-border-top-left-radius: var(--r20);
    -moz-border-radius-topleft: var(--r20);
    border-top-left-radius: var(--r20);
}
.landing_formulaire_pic img{
    display: block;
    width: auto;
    max-width: 90%;
    height: auto;
    max-height: 90%;
    margin: auto 0 0 auto;
}
.landing_formulaire_main{
    flex: 1;
    display: block;
    padding: 65px 106px 68px 146px;
}
.landing_formulaire_main .landing_strap_title{
    color: var(--orange);
}

/******************/
/*******FORMS******/
/******************/
.wpcf7-spinner{
    position: absolute;
}
.wpcf7 p{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.page_form_footer .wpcf7 p{
    margin-bottom: 0;
}
.wpcf7 span[data-name="prenom"],
.wpcf7 span[data-name="email"],
.wpcf7 span[data-name="tel"],
.wpcf7 span[data-name="nom"],
.wpcf7 span[data-name="societe"]{
    display: inline-block;
    width: 49%;
    margin-bottom: 9px;
}
/*.wpcf7 span[data-name="rgpd"],*/
.wpcf7 span[data-name="acceptance"],
.wpcf7 span[data-name="message"]{
    display: inline-block;
    width: 100%;
    margin-bottom: 9px;
}
.wpcf7 span[data-name="acceptance"]{
    line-height: 21px;
    margin-bottom: 9px;
    color: var(--wh);
}
.wpcf7 span[data-name="acceptance"] a{
    color: var(--wh);
}
.wpcf7 span[data-name="acceptance"] span.wpcf7-checkbox{
    display: inline-block;
}
.wpcf7 span input,
.wpcf7 span select,
.wpcf7 span textarea{
    display: block;
    box-sizing: border-box;
    width: 100%;
    line-height: 16px;
    background: var(--wh);
    border: 1px solid var(--wh);
    border-radius: var(--r2);
    font-size: 15px;
    font-family: 'spaceg';
    color: var(--bleu);
}
.wpcf7 span input,
.wpcf7 span select,
.wpcf7 span textarea{
    border: 1px solid var(--wh);
}
.wpcf7 span select,
.wpcf7 span input{
    padding: 8px 19px;
}
.wpcf7 span select{
    height: 39px;
}
.wpcf7 span textarea{
    height: 175px;
    padding: 10px 19px;
    border: 1px solid var(--wh);
    font-family: 'spaceg';
}
.wpcf7 input[type="checkbox"]{
    display: inline-block;
    width: auto;
}
.wpcf7-form input[type='submit']{
    width: auto;
    height: auto;
    line-height: 19px;
    padding: 12px 22px;
    background: var(--orange);
    border: 1px solid var(--orange);
    border-radius: var(--r8);
    margin: 0 0 0 auto;
    font-size: 15px;
    font-family: 'spaceg';
    color: var(--wh);
    cursor: pointer;
    transition: all 0.4s;
}
.wpcf7-form input[type='submit']:hover{
    background: transparent;
    color: var(--orange);
    transition: all 0.4s;
}
