/*
Theme Name: F-brut
Version: 1.0
Theme URI: http://www.bonbay.fr/
Author: Bonbay
Author URI: http://www.bonbay.fr/
Text Domain:
*/

/*	Copyright: (c) 2013 Alexander "Alx" Agnarson
	License: GNU General Public License v3.0
	License URI: http://www.gnu.org/licenses/gpl-3.0.html*/


/*RESET*/
/*---------------------------------------------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:flex}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}


/*  Base awesome
================================================== */
.fa { width: 1em; text-align: center; }


/*  Base formulaire
================================================== */
input, textarea, 
button, select, 
label { font-family: inherit; }
input,
textarea,
button,
select,
label { font-size: 1rem; }
input::-moz-focus-inner,
button::-moz-focus-inner{ border: 0; padding: 0; }
input[type="text"],
input[type="password"],
input[type="email"],
input[type="submit"],
input[type="tel"],
button,
select,
textarea { margin: 0; border-radius: 0; width:100%;}
input,
textarea,
select,
button { 
    -moz-appearance: none; 
    -webkit-appearance: none;
    appearance: none;
    transition: all .2s ease; 
}
input[type="checkbox"]{ -moz-appearance: checkbox; -webkit-appearance: checkbox; appearance: checkbox; }
input[type="radio"]{ -moz-appearance: radio; -webkit-appearance: radio; appearance: radio; }
label{ }

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
    font-size: 15px;
    background: transparent;
    border: 0px;
    border-bottom: 1px solid #bdbdbd;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    width: calc( 100% - 2px );
    outline: none;
    padding: 0.5rem 0;
    margin-bottom: 2rem;
}
select{ width: 100%; background: transparent url('gfx/fleche-b.png') no-repeat 99% center; text-transform: uppercase; }
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus{ border-color: #000;   }

input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
input[type="number"]::placeholder,
textarea::placeholder{ font-size: 15px; color: #000; text-transform: uppercase; }

label .required { color: #bdbdbd; }
input[type="submit"],
button[type="submit"] {
    background: transparent;
    color: #000;
    border: 0px;
    font-weight: 700;
    display: inline-flex;
    cursor: pointer;
    font-size: 16px;
    text-transform: uppercase;
    justify-content: center;
    align-items: center;
    width: max-content;
    letter-spacing: .1rem;
    line-height: 20px;
    padding: 1.5rem 0;
}
input[type="submit"]:hover,
button[type="submit"]:hover { color: #bdbdbd }
input[type="submit"]



/*WPCF7*/
.wpcf7 span.italique{ color: #bdbdbd; font-size: .8rem; display: inline-block; margin: .5rem 0; }
.wpcf7-form-control-wrap{ width: 100%; }
div.wpcf7-validation-errors,
div.wpcf7-acceptance-missing{
    border: 1px solid red;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output{ border-color: red; color:red; }
.wpcf7 form .wpcf7-response-output{ border: 1px solid grey; }
.wpcf7-spinner{ position: absolute; bottom: 0; left: 0; }

/*SWIPER*/
.swiper-slide{  }
.swiper-pagination{  }
.swiper-pagination-bullet{  }
.swiper-pagination-bullet-active{  }
.swiper-button-next, .swiper-button-prev{  }
.swiper-button-next::after, .swiper-button-prev::after{ display: none; }
.swiper-button-prev{ 
    background: transparent url('gfx/fleche-g.png') no-repeat center; 
    width: 13px!important; 
    height: 21px!important; 
    left: -4rem!important;
    top: auto;
    bottom: 30%;
}
.swiper-button-next{ 
    background: transparent url('gfx/fleche-d.png') no-repeat center; 
    width: 13px!important; 
    height: 21px!important; 
    right: -4rem!important;
    top: auto;
    bottom: 30%;
}



/** GRID ***/
.row{
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: row wrap;
}
.row.nowrap{ flex-flow: row nowrap; }
.row.flow-row{ flex-flow: row wrap; }

.middle{ align-items: center; }
.flex-end{ align-items: flex-end; }

@media (max-width: 767px){
      /*.row{ flex-flow: column wrap; }
      .row.nowrap{ flex-flow: column nowrap; }*/
}

/* 24 colonnes */
.spannomargin-1, .spannomargin-2, .spannomargin-3,
.spannomargin-4, .spannomargin-5, .spannomargin-6,
.spannomargin-7, .spannomargin-8, .spannomargin-9,
.spannomargin-10, .spannomargin-11, .spannomargin-12,
.spannomargin-13, .spannomargin-14, .spannomargin-15,
.spannomargin-16, .spannomargin-17, .spannomargin-18,
.spannomargin-19, .spannomargin-20, .spannomargin-21,
.spannomargin-22, .spannomargin-23, .spannomargin-24{ width: 100%; }

/*14 colonnes*/
.span-1, .span-2, .span-3, 
.span-4, .span-5, .span-6, 
.span-7, .span-8, .span-9, 
.span-10, .span-11, .span-12, 
.span-13, .span-14{ width: 100%; }


/* tablette portrait */
@media (min-width: 768px){

    /* 24 colonnes */
    .spannomargin-1{ width: 5%; }
    .spannomargin-2{ width: 5%; }
    .spannomargin-3{ width: 10%; }
    .spannomargin-4{ width: 15%; }
    .spannomargin-5{ width: 25%; }
    .spannomargin-6{ width: 25%; }
    .spannomargin-7{ width: 35%; }
    .spannomargin-8{ width: 40%; }
    .spannomargin-9{ width: 50%; }
    .spannomargin-10{ width: 50%; }
    .spannomargin-11{ width: 50%; }
    .spannomargin-12{ width: 50%; }
    .spannomargin-13{ width: 50%; }
    .spannomargin-14{ width: 50%; }
    .spannomargin-15{ width: 50%; }
    .spannomargin-16{ width: 60%; }
    .spannomargin-17{ width: 65%; }
    .spannomargin-18{ width: 75%; }
    .spannomargin-19{ width: 75%; }
    .spannomargin-20{ width: 85%; }
    .spannomargin-21{ width: 90%; }
    .spannomargin-22{ width: 95%; }
    .spannomargin-23{ width: 95%; }
    .spannomargin-24{ width: 100%; }

    /*14 colonnes*/
    .span-1{ width: 7.1428%; }
    .span-2{ width: 14.2856%; }
    .span-3{ width: 21.4284%; }
    .span-4{ width: 28.5712%; }
    .span-5{ width: 35.714%; }
    .span-6{ width: 42.8568%; }
    .span-7{ width: 50%; }
    .span-8{ width: 57.1428%; }
    .span-9{ width: 64.2856%; }
    .span-10{ width: 71.4284%; }
    .span-11{ width: 78.5716%; }
    .span-12{ width: 85.7144%; }
    .span-13{ width: 92.8572%; }
    .span-14{ width: 100%; }

}
/* tablette paysage */
@media (min-width: 1024px){

    /*24 colonnes*/
    .spannomargin-1{ width: 4.16666667%; }
    .spannomargin-2{ width: 8.33333333%; }
    .spannomargin-3{ width: 12.5%; }
    .spannomargin-4{ width: 16.666666666667%; }
    .spannomargin-5{ width: 20%; }
    .spannomargin-6{ width: 25%; }
    .spannomargin-7{ width: 29.16666667%; }
    .spannomargin-8{ width: 33.333%; }
    .spannomargin-9{ width: 37.5%; }
    .spannomargin-10{ width: 41.66%; }
    .spannomargin-11{ width: 45.833333333333%; }
    .spannomargin-12{ width: 50%; }
    .spannomargin-13{ width: 54.166666666667%; }
    .spannomargin-14{ width: 58.3333333%; }
    .spannomargin-15{ width: 62.5%; }
    .spannomargin-16{ width: 66.666%; }
    .spannomargin-17{ width: 70.8266666%; }
    .spannomargin-18{ width: 75%; }
    .spannomargin-19{ width: 79.16%; }
    .spannomargin-20{ width: 83.32%; }
    .spannomargin-21{ width: 87.4866666%; }
    .spannomargin-22{ width: 91.6533333%; }
    .spannomargin-23{ width: 95.82%; }
    .spannomargin-24{ width: 100%; }
    .mille{ max-width: 960px; width: 100%; }

    /*14 colonnes*/
    .span-1{ width: 7.1428%; }
    .span-2{ width: 14.2856%; }
    .span-3{ width: 21.4284%; }
    .span-4{ width: 28.5712%; }
    .span-5{ width: 35.714%; }
    .span-6{ width: 42.8568%; }
    .span-7{ width: 50%; }
    .span-8{ width: 57.1428%; }
    .span-9{ width: 64.2856%; }
    .span-10{ width: 71.4284%; }
    .span-11{ width: 78.5716%; }
    .span-12{ width: 85.7144%; }
    .span-13{ width: 92.8572%; }
    .span-14{ width: 100%; }

    
}
@media (min-width: 1280px){
    .mille{ max-width: 1080px; }
}
@media (min-width: 1480px){
    .mille{ max-width: 1440px; }
}

.nomobile{ display: none; }
@media (min-width: 1024px){ .nomobile{ display: flex; } }
.onlymobile{ display: flex; }
@media (min-width: 1024px){ .onlymobile{ display: none; } }

.flex{ display: flex; }

/*****************************************/

/*FONTS*/

    @font-face {
        font-family: 'Montserrat';
        src: url('fonts/Montserrat-Thin.woff2') format('woff2'),
            url('fontsMontserrat-Thin.woff') format('woff');
        font-weight: 100;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Montserrat';
        src: url('fonts/Montserrat-ExtraBoldItalic.woff2') format('woff2'),
            url('fonts/Montserrat-ExtraBoldItalic.woff') format('woff');
        font-weight: bold;
        font-style: italic;
        font-display: swap;
    }

    @font-face {
        font-family: 'Montserrat';
        src: url('fonts/Montserrat-Medium.woff2') format('woff2'),
            url('fonts/Montserrat-Medium.woff') format('woff');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Montserrat';
        src: url('fonts/Montserrat-Italic.woff2') format('woff2'),
            url('fonts/Montserrat-Italic.woff') format('woff');
        font-weight: normal;
        font-style: italic;
        font-display: swap;
    }

    @font-face {
        font-family: 'Montserrat';
        src: url('fonts/Montserrat-ThinItalic.woff2') format('woff2'),
            url('fonts/Montserrat-ThinItalic.woff') format('woff');
        font-weight: 100;
        font-style: italic;
        font-display: swap;
    }

    @font-face {
        font-family: 'Montserrat';
        src: url('fonts/Montserrat-BoldItalic.woff2') format('woff2'),
            url('fonts/Montserrat-BoldItalic.woff') format('woff');
        font-weight: bold;
        font-style: italic;
        font-display: swap;
    }

    @font-face {
        font-family: 'Montserrat';
        src: url('fonts/Montserrat-Regular.woff2') format('woff2'),
            url('fonts/Montserrat-Regular.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Montserrat';
        src: url('fonts/Montserrat-ExtraBold.woff2') format('woff2'),
            url('fonts/Montserrat-ExtraBold.woff') format('woff');
        font-weight: bold;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Montserrat';
        src: url('fonts/Montserrat-MediumItalic.woff2') format('woff2'),
            url('fonts/Montserrat-MediumItalic.woff') format('woff');
        font-weight: 500;
        font-style: italic;
        font-display: swap;
    }

    @font-face {
        font-family: 'Montserrat';
        src: url('fonts/Montserrat-ExtraLight.woff2') format('woff2'),
            url('fonts/Montserrat-ExtraLight.woff') format('woff');
        font-weight: 200;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Montserrat';
        src: url('fonts/Montserrat-SemiBoldItalic.woff2') format('woff2'),
            url('fonts/Montserrat-SemiBoldItalic.woff') format('woff');
        font-weight: 600;
        font-style: italic;
        font-display: swap;
    }

    @font-face {
        font-family: 'Montserrat';
        src: url('fonts/Montserrat-ExtraLightItalic.woff2') format('woff2'),
            url('fonts/Montserrat-ExtraLightItalic.woff') format('woff');
        font-weight: 200;
        font-style: italic;
        font-display: swap;
    }

    @font-face {
        font-family: 'Montserrat';
        src: url('fonts/Montserrat-SemiBold.woff2') format('woff2'),
            url('fonts/Montserrat-SemiBold.woff') format('woff');
        font-weight: 600;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Montserrat';
        src: url('fonts/Montserrat-BlackItalic.woff2') format('woff2'),
            url('fonts/Montserrat-BlackItalic.woff') format('woff');
        font-weight: 900;
        font-style: italic;
        font-display: swap;
    }

    @font-face {
        font-family: 'Montserrat';
        src: url('fonts/Montserrat-Light.woff2') format('woff2'),
            url('fonts/Montserrat-Light.woff') format('woff');
        font-weight: 300;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Montserrat';
        src: url('fonts/Montserrat-LightItalic.woff2') format('woff2'),
            url('fonts/Montserrat-LightItalic.woff') format('woff');
        font-weight: 300;
        font-style: italic;
        font-display: swap;
    }

    @font-face {
        font-family: 'Montserrat';
        src: url('fonts/Montserrat-Black.woff2') format('woff2'),
            url('fonts/Montserrat-Black.woff') format('woff');
        font-weight: 900;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Montserrat';
        src: url('fonts/Montserrat-Bold.woff2') format('woff2'),
            url('fonts/Montserrat-Bold.woff') format('woff');
        font-weight: bold;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Roboto';
        src: url('fonts/Roboto-Italic.woff2') format('woff2'),
            url('fonts/Roboto-Italic.woff') format('woff');
        font-weight: normal;
        font-style: italic;
        font-display: swap;
    }

    @font-face {
        font-family: 'Roboto';
        src: url('fonts/Roboto-BoldItalic.woff2') format('woff2'),
            url('fonts/Roboto-BoldItalic.woff') format('woff');
        font-weight: bold;
        font-style: italic;
        font-display: swap;
    }

    @font-face {
        font-family: 'Roboto';
        src: url('fonts/Roboto-BlackItalic.woff2') format('woff2'),
            url('fonts/Roboto-BlackItalic.woff') format('woff');
        font-weight: 900;
        font-style: italic;
        font-display: swap;
    }

    @font-face {
        font-family: 'Roboto';
        src: url('fonts/Roboto-Light.woff2') format('woff2'),
            url('fonts/Roboto-Light.woff') format('woff');
        font-weight: 300;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Roboto';
        src: url('fonts/Roboto-Bold.woff2') format('woff2'),
            url('fonts/Roboto-Bold.woff') format('woff');
        font-weight: bold;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Roboto';
        src: url('fonts/Roboto-LightItalic.woff2') format('woff2'),
            url('fonts/Roboto-LightItalic.woff') format('woff');
        font-weight: 300;
        font-style: italic;
        font-display: swap;
    }

    @font-face {
        font-family: 'Roboto';
        src: url('fonts/Roboto-Regular.woff2') format('woff2'),
            url('fonts/Roboto-Regular.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Roboto';
        src: url('fonts/Roboto-Black.woff2') format('woff2'),
            url('fonts/Roboto-Black.woff') format('woff');
        font-weight: 900;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Roboto';
        src: url('fonts/Roboto-MediumItalic.woff2') format('woff2'),
            url('fonts/Roboto-MediumItalic.woff') format('woff');
        font-weight: 500;
        font-style: italic;
        font-display: swap;
    }

    @font-face {
        font-family: 'Roboto';
        src: url('fonts/Roboto-ThinItalic.woff2') format('woff2'),
            url('fonts/Roboto-ThinItalic.woff') format('woff');
        font-weight: 100;
        font-style: italic;
        font-display: swap;
    }

    @font-face {
        font-family: 'Roboto';
        src: url('fonts/Roboto-Thin.woff2') format('woff2'),
            url('fonts/Roboto-Thin.woff') format('woff');
        font-weight: 100;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Roboto';
        src: url('fonts/Roboto-Medium.woff2') format('woff2'),
            url('fonts/Roboto-Medium.woff') format('woff');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }

    .thin{ font-weight: 100; }
    .light{ font-weight: 300; }
    .regular{ font-weight: 400; }
    .medium{ font-weight: 500; }
    .semibold{ font-weight: 600; }
    .bold{ font-weight: 700; }
    .ultrabold{ font-weight: 900; }

    .montserrat{ font-family: 'Montserrat', sans-serif; }
    .roboto{ font-family: 'Roboto', sans-serif; }

/**/

img, iframe, video{ max-width: 100%; }
h1, h2, h3, h4, h5, h6{ font-family: 'Roboto', sans-serif; }
h1{ font-size: 32px; }
h2{ font-size: 28px; }
h3{ font-size: 24px; }
h4{ font-size: 20px; }
.italique, i, em{ font-style: italic; }
.lowercase{ text-transform: lowercase; }
.uppercase{ text-transform: uppercase; }
.black, a.black{ color:#000; }
.white, a.white{ color: #fff; }
.grey, a.grey{ color: #9c9c9c; }
.bggrey{ background: #f1f1f1; }
.green, a.green{ color: #000; }
.bggreen{ background-color: #637152; }
.red, a.red{ color:#000; }
.bgred{ background-color:#A21C1B; }
.degrade{
    /*background: rgb(162,28,27);
    background: linear-gradient(90deg, rgba(162,28,27,1) 0%, rgba(99,113,82,1) 100%);*/
    background: #f1f1f1;
}

strong, b{ font-weight: 700; }
.align-left, .alignleft{ text-align: left; justify-content: flex-start; }
.align-right, .alignright{ text-align: right; justify-content: flex-end; }
.align-center, .aligncenter{ text-align: center; justify-content: center; }

img.alignleft, img.align-left{ float: left; margin: 0 1em 1em 0 }
img.alignright, img.align-right{ float: right; margin: 0 0 1em 1em }
img.aligncenter, img.align-center{ float: none; margin: 0 auto 1em auto }

.justify{ text-align: justify; }

.button{
    display: block;
    width: auto;
    text-decoration: underline;
    font-size: 16px;
    text-align: center;
    transition: ease-in-out all 0.1s;
    cursor: pointer;
    background: white;
    text-decoration: none;
}
.button:hover{
    background: black!important;
    text-decoration: none;
}

a{ color: #000; text-decoration: none; cursor: pointer; }
a:hover{ color: #000; text-decoration: underline; }
p{ margin: 10px 0; }
article ul{ margin: 1em 0; }
article ul li{ list-style-type: disc; margin-left: 2em; }

.gallery {
  display: flex;
  width: 100%;
  align-items: flex-start;
  flex-flow: row wrap;
}
.gallery-item{ margin: 0 1rem 1rem 0; }


.left{ float: left; }
.right{ float: right; }
.center{ margin: 0 auto; }

.relative{ position: relative; }
.absolute{ position: absolute; }

.error{ color: red; font-weight: bold; }

/*****/
/* base */
body{
    background: #fff;
    margin: 0;
    padding: 0;
    color:#000;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 18px;
}
.conteneur, .cadre{ max-width: 1920px; margin: 0 auto; width: 100%; overflow-x: hidden; }

header,  main, footer, .home_contenu{ width: 100%; }

header .degrade p.uppercase img{ 
    margin-right: 1rem;
    margin-right: 1vw;
    max-height: 2.3vw;
}
header .degrade p.uppercase{ 
    font-size: 16px;
    font-size: .835vw;
    letter-spacing: .2rem;
    margin: 1.25rem 0;
    margin: 1.075vw 0;
}
header::before{
    content: " ";
    display: block;
    position: absolute;
    left: 2.6rem;
    left: 2.2vw;
    top: 2.2vw;
    width: 32%;
    height: 1px;
    background: #875300;
    z-index: 10;
}
header::after{
    content: " ";
    display: block;
    position: absolute;
    right: 2.2vw;
    top: 2.2vw;
    width: 32%;
    height: 1px;
    background: #875300;
    z-index: 10;
}
.cadre::before{
    content: " ";
    display: block;
    position: absolute;
    left: 2.2vw;
    top: 2.2vw;
    bottom: 2.2vw;
    width: 1px;
    background: #875300;
    z-index: 10;
}
.cadre::after{
    content: " ";
    display: block;
    position: absolute;
    right: 2.2vw;
    top: 2.2vw;
    bottom: 2.2vw;
    width: 1px;
    background: #875300; 
    z-index: 10;
}
.conteneur::after{
    content: " ";
    display: block;
    position: absolute;
    right: 2.2vw;
    left: 2.2vw;
    bottom: 2.2vw;
    height: 1px;
    background: #637152; 
    z-index: 10;
}
a#logo{ }
a#logo img{ margin: 1.9vw auto 2.8vw auto; max-width: 80%; }
.menu-toggle{ display: none; }
.nav-menu{ display: flex; }
nav{
    margin: 0;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    width: auto;
}
#site-navigation{ width: 100%; margin-bottom: 1.75vw; }
.menu-menu-principal-container{
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    position: relative;
}
nav ul{
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
}
nav ul li{
    list-style-type: none;
    display: inline-flex;
    text-align: center;
    background: transparent;
    transition: ease-in-out all 0.1s;
    position: relative;
}
nav ul li:first-child{ margin-left: 3.5vw; }
nav ul li a{
    font-size: 14px;
    letter-spacing: .15rem;
    display: flex;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 52px;
    height: 46px;
    padding: 0 10px;
    margin: 0;
    width: auto;
    background: transparent;
    border: 0;
}
nav ul li a::after{
    content: " ";
    display: block;
    position: absolute;
    bottom: -18px;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 2px;
    background: transparent url('gfx/menu-hover.png') no-repeat center bottom;
    opacity: 0;
    transition: ease-in-out all 0.1s;
}
nav ul li:last-child a{
    font-weight: 900;
}
nav ul li:last-child::before{
    content: " ";
    display: block;
    position: absolute;
    width: 98px;
    height: 24px;
    right: -34px;
    bottom: -24px;
    background:transparent url('gfx/sous-contact.png') no-repeat 0 0;
    z-index: 3;
}
nav ul li:last-child a::after{ display: none; }
nav ul li a:hover{  text-decoration: none; }
nav ul li a:hover::after, 
nav ul li.current-menu-item a::after{
    transition: ease-in-out all 0.1s;
    opacity:1;
}

/*nav ul li ul{
    position: absolute;
    top: 45px;
    left: 0;
    z-index: 5001;
    padding: 0;
    background: white;
    border: 1px solid #f6772b;
    display: none;
}
nav ul li:hover ul{ display: flex; flex-flow: column wrap;  }
nav ul li ul li{
    display: list-item;
}
nav ul li ul li a{
    color: #f6772b;
    padding: 0;
    margin: 0;
}
nav ul li ul li a:hover{
    color: black;
    text-decoration: none;
}*/
footer{  }
footer .ligne-logos{ padding: 4rem 0 0rem 0; }
footer .ligne-logos img{ margin: 2rem 2.75rem 0 2.75rem; }
footer .ligne-logos img.footerlogo{ margin: 0 2.75rem 0 2.75rem; }
footer .ligne-logos img.marque-asso{ margin-bottom: 1rem; }
footer .ligne-logos .sociaux{ margin: 2rem 0 2rem 2.75rem }
footer .ligne-logos .sociaux img{ margin: 0 .5rem; }
footer .ligne-logos span.bordure{
    display: block;
    height: 62px;
    width: 5px;
    background: transparent url('gfx/trait-vertical.png') no-repeat center;
    margin: 1.5rem 50px 0 130px;
}
footer .ligne-logos p.grey{
    font-size: 15px; 
    margin-right: 1rem;
    position: relative;
}
footer .ligne-logos p.grey::after{
    content: " ";
    background: transparent url('gfx/trait-vertical.png') no-repeat center / 100%;
    height: 112px;
    width: 6px;
    transform: rotate(-90deg);
    position: absolute;
    left: 0;
    top: -20px;
}



.menu-footer-container{ display: flex; width: 100%; padding: 0 0 3rem 0; }
.footer-menu{ 
    display: flex; 
    width: 100%; 
    flex-flow: row wrap;  
    justify-content: center; 
    align-items: center;
}
.footer-menu li{ 
    padding :0;
    position: relative;
    margin: 0 2rem;
    display: flex;
}
.footer-menu li a{
    color: black;
    text-transform: uppercase;
    font-size: .73vw;
    letter-spacing: .2rem;
}
.footer-menu li:last-child a{
    font-size: .73vw;
    font-weight: 900;
    letter-spacing: .2rem;
    color: #000;
    padding: 1.535vw 2.5vw 1.535vw 0;
    background: transparent url('gfx/sous-contact.png') no-repeat right bottom;
    transition: ease-in-out all .35s;
}
.footer-menu li:last-child a:hover{
    text-decoration: none;
    color:#898989;
    transition: ease-in-out all .1s;
}
.row.mentions{
    height: 84px;
    padding-bottom: 2.2vw;
}
.row.mentions p{ margin: 0; line-height: 84px; font-size: 15px; letter-spacing: .1rem; }

/*homepage*/
.home-entete{
    right: 28%;
    top: auto;
    bottom: -10%;
    left: 28%;
    z-index: 2;
    background: white;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
}
.home-entete .zonetexte p{
    font-size: 20px;
    line-height: 30px;
    letter-spacing: .075rem;
    margin: 0 1rem;
}
.home-entete img{ display: flex; }
.presentation h1{
    font-size: 48px;
    letter-spacing: .5rem;
    font-weight: 400;
}
.presentation h1 span{
    display: inline-block;
    font-size: 30px;
    line-height: 36px;
    margin-top: 2.5rem;
    letter-spacing: .55rem;
}

.btn{
    display: inline-block;
    text-transform: uppercase;
    text-align: right;
    background: transparent url('gfx/trait-horizontal.png') no-repeat right bottom / 100%;
    border: 0px;
    color:#000;
    font-size: 16px;
    letter-spacing: .15rem;
    line-height: 20px;
    padding: 2.5rem 0;
    width: 100%;
    max-width: 320px;
    transition: ease-in-out all .2s;
}
.btn:hover{
    color: #9f9f9f;
    text-decoration: none;
    background-position: right 95%;
    transition: ease-in-out all .2s;
}
.btn.large{
    background: transparent url('gfx/sous-envoyer.png') no-repeat right bottom / 100%;
    max-width: 482px;
    transition: ease-in-out all .2s;
}
.btn.large:hover{ background-position: right 95%; transition: ease-in-out all .2s; }

p.petittitre{
    font-size: 20px;
    line-height: 40px;
    letter-spacing: .15rem;
    color:#000;
    padding: 0 0 2.5rem 0;
    margin: 1.5rem 0;
}

.row.presentation{
    background: transparent;
    padding: 4rem 0 0 0;
}
.row.presentation-suite{ margin-top: 4rem; align-items: center; }
.row.presentation-suite .zonetexte{ width: 90%; }
.presentation-der{ margin: 2rem 0 0 0; }
.presentation-der .der-1{ margin: -1rem -3rem 1rem 3rem; }
.presentation-der .der-2{ max-width: 78%; }

.zonetexte h2{
    font-size: 35px;
    line-height: 60px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 3rem;
}

.degrade.services{
    background: white url('gfx/fond-prestations.jpg') no-repeat right top / 100%;
}
.row.in-services{  padding: 7rem 0 5rem 0; align-items: stretch; }
.row.in-services .span-3.relative .btn{
    position: absolute;
    bottom: 0;
    right: 0;
}
.row.in-services .span-3.relative{ padding-bottom: 6rem; }
.encart-contact{
    padding: 8rem 0 0 0;
    margin-top: -8rem;
    background: white;
}
.encart-contact h2{ 
    font-size: 30px; 
    letter-spacing: .3rem; 
    padding-bottom: 3rem;
    position: relative;
}
.encart-contact h2::after{
    content: " ";
    background: transparent url('gfx/sous-envoyer.png') no-repeat 0 0;
    width: 482px;
    height: 6px;
    position: absolute;
    bottom: 0;
    left: 0;
}
.zone-contact .wpcf7{
    padding: 6rem 0 0 0;
    position: relative;
}
.zone-contact .wpcf7 .italique{ color:#bdbdbd; margin: 0; }
.zone-contact .wpcf7::after{
    content: " ";
    width: 320px;
    height: 2px;
    background: transparent url('gfx/trait-horizontal.png') no-repeat 0 0;
    position: absolute;
    left: -240px;
    bottom: 1.5rem;
}
.zonetexte p{
    font-size: 17px;
    line-height: 30px;
    letter-spacing: .05rem;
    color:#000;
    margin: 0 0 2rem 0;
}
h2.prestations-intro{
    font-size: 60px;
    font-size: 3.125vw;
    line-height: 60px;
    line-height: 3.125vw;
    font-weight: 100;
    margin-bottom: 4rem;
    letter-spacing: .5rem;
}
.liste-services{ margin-top: 0rem; }
.liste-services li{
    padding-left: 6rem;
    font-size: 17px;
    line-height: 24px;
    margin-bottom: 25px;
    background: transparent;
}
.bggrey { padding: 3rem 0 0 0; }
.bggrey h2{ font-size: 35px; line-height: 60px; margin-bottom: 2rem; }
.bggrey .mrgneg{ margin: 6rem 0 -11rem 0; }
#home .swiper-button-prev, 
#home .swiper-button-next{ 
    bottom: 50%;
}
.logo-deco{ margin-top: 3rem; }
.decouvrez1{
    margin-top: 6rem;
}
.decouvrez2 h2{
    width: 50%;
    font-size: 35px;
    line-height: 60px;
    margin-bottom: 4rem;
}
.divbackgreen > *{ z-index: 3; position: relative; }
.divbackgreen::after{
    content: " ";
    display: block;
    width: 266%;
    position: absolute;
    left: -100%;
    top: -4rem;
    bottom: -4rem;
    background:#637152;
    z-index: 1;
}
.realisations{ align-items: stretch; margin: 6rem 0 8rem 0; }
.realisations img{ position: relative; z-index: 2; display: flex; }
.realisations .leh3{
    left: 0;
    right: 0;
    top: 1rem;
    text-align: center;
    z-index: 3;
    font-size: 74px;
    font-weight: 300;
    letter-spacing: 2.5vw;
    text-transform: uppercase;
}
.realisations .span-5.num2{
    margin-top: 5.3rem;
}
.realisations h4{
    font-size: 16px; 
    font-weight: 600; 
    margin: 2rem 0 0 0; 
    text-transform: uppercase; 
    line-height: 24px; 
    letter-spacing: .15rem;
}
.realisations p{
    font-size: 14px; 
    font-weight: 400; 
    margin: 0 0 2rem 0; 
    text-transform: uppercase; 
    line-height: 24px; 
    letter-spacing: .15rem;
}
.btn.mini{
    text-align: left;
    color:#bdbdbd;
    font-size: 14px;
    letter-spacing: .1rem;
    padding: 22px 0;
    max-width: 130px;
    background: transparent url('gfx/menu-hover.png') no-repeat left top / 62px;
}
.btn.mini:hover{ color: black; background-position: left 3px; }
.btn.mini.black{ color: black; }
.btn.mini.black:hover{ color:#bdbdbd; background-position: left 3px; }

.btn.real{
    position: relative;
    background: transparent;
}
.btn.real::before{
    content: " ";
    background: transparent url('gfx/deco-bloc1.png') no-repeat 0 0;
    position: absolute;
    left: -50px;
    bottom: -20px;
    width: 320px;
    height: 80px;
    z-index: 2;
}

.temoignages-decouvrez{
    background: transparent url('gfx/fond-actualites-avis.jpg') no-repeat center top / 100%;
    padding: 120px 0 0 0;
}
.temoignages-decouvrez .leh2{
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: .4rem;
    margin-bottom: 4.5rem;
}
.temoignages-decouvrez p{
    font-size: 18px; line-height: 30px; margin: 1rem 0 2rem 0;
}
.avishome .leh2{ margin-bottom: 1rem; }

.temoignages-decouvrez .temoignage p{
    font-size: 16px;
    line-height: 30px;
    font-weight: 300;
    margin-bottom: 2rem;
}
.temoignages-decouvrez .temoignage p.uppercase{ 
    font-weight: 400; 
    margin: 0; 
    padding-bottom: 2rem; 
    background: transparent url('gfx/menu-hover.png') no-repeat left bottom / 62px;
}
.btn.toutesactus{
    padding: 0;
    background: transparent;
    font-size: 14px;
    position: absolute;
    z-index: 3;
    top: -1.5rem;
    left: 0;
    text-align: center;
}

.article-groupe{ 
    align-items: stretch; 
    margin: 2rem 0 6rem 0;
 }
.article-groupe img{ position: relative; z-index: 2; display: flex; }
.legroupe{ margin: 4rem 0 3rem 0; }
.legroupe h2{ font-size: 40px; font-weight: 400; letter-spacing: .5rem; text-transform: uppercase; margin-top: 2.5rem; }
.legroupe-chapitre p{ font-size: 17px; line-height: 30px; letter-spacing: .05rem; margin-bottom: 2rem; color: #555555; }
.legroupe p.petittitre{
    font-size: 16px; letter-spacing: .25rem; text-transform: uppercase; position: relative;
}
.legroupe p.petittitre::after{
    content: " ";
    position: absolute;
    bottom: 0;
    left: 0;
    background: black;
    width: 160px;
    height: 1px;
}
.legroupe-chapitre::after{
    content: " ";
    background: transparent url(gfx/deco-bloc1.png) no-repeat 0 0;
    position: absolute;
    left: -120px;
    bottom: -70px;
    width: 320px;
    height: 80px;
    z-index: 2;
}
/*CONTACT*/
.bggrey{ background-color:#EDEDED; }
.bggrey img{ margin-bottom: -40%; max-width: 82%; }
.bggrey h1, h2.outrouver{
    font-size: 30px;
    line-height: 40px;
    font-weight: 400;
    letter-spacing: .5rem;
    margin: 0 0 6rem 0;
}
.bggrey .wpcf7{ margin: 17rem 0 2rem 0; }
h2.outrouver{ margin: 0 0 3rem 0; font-size: 35px; }
p.coordonnees{
    position: relative;
    padding: 0 0 0 14%;
    margin: 0 0 9rem 0;
    font-size: 20px;
    line-height: 28px;
}
p.coordonnees a{
    display: inline-block;
    margin: 0 0 1rem 0;
}
.map-content{ margin: 2rem 0; }
.map-content iframe{ max-height: 32vw; }
/* services */
#page .bandeau img{ max-width: 71.5%; }
#page .titre-intro{ margin: 0 auto 3rem auto; }
#page .titre-intro > div{ background: white; margin-top: -100px; }
#page .titre-intro img{ margin-top: -140px; max-width: 88%; }
#page .titre-intro h1{ margin-top: 70px; font-size: 24px; text-transform: uppercase; letter-spacing: .5rem; }
#page .titre-intro h1 span{ 
    font-size: 36px; 
    text-transform: none; 
    letter-spacing: .1rem;
    display: inline-block; 
    margin-bottom: 2rem;
}
.bloc{
    margin: 6rem 0 9rem 0;
    position: relative;
}
.bloc::after{
    content: " ";
    background: transparent url('gfx/deco-bloc.png') no-repeat 0 0;
    width: 482px;
    height: 166px;
    position: absolute;
    bottom: -126px;
    right: 7.1428%;
    transform: scaleX(-1);
}
.bloc.reverse{ flex-flow: row-reverse wrap; }
.bloc.reverse::after{
    transform: none;
    right: auto;
    left: 7.1428%;
    bottom : -96px;
}
.bloc .blocimage1{
    max-width: 83%;
    margin-left: 17%;
}
.bloc.reverse.bloc .blocimage1{
    margin-right: 17%;
    margin-left: 0;
}
.bloc .blocimage2{
    border: 16px solid white;
    max-width: calc( 83% - 32px );
    margin-right: 17%;
    margin-top: -32%;
}
.bloc.reverse.bloc .blocimage2{
    margin-left: 32%;
    max-width: calc(68% - 32px);
    margin-right: 0;
    margin-top: -32%;
}
.bloc h2{
    font-size: 30px;
    letter-spacing: .3rem;
    width: 60%;
    text-transform: uppercase;
    font-family:'Roboto', sans-serif;
    position: relative;
    margin: 3rem 0 3rem 0;
    font-weight: 400;
}
.contenu-texte p{
    font-size: 17px;
    line-height: 28px;
    text-align: justify;
    letter-spacing: .05rem;
    margin: 1rem 0 2rem 0;
    color: #808080;
}
.contenu-texte ul, .contenu-texte ol{ margin: 2rem 0; }
.contenu-texte li{
    font-size: 17px;
    line-height: 24px;
    letter-spacing: .05rem;
    margin: 0 0 0 1.5rem;
    color: #808080;
}
.contenu-texte h2{
    font-size: 30px;
    line-height: 40px;
    text-transform: uppercase;
    position: relative;
    margin: 3rem 0 3rem 0;
    max-width: 70%;
    letter-spacing: .5rem;
}
.contenu-texte h3{
    font-size: 20px;
    line-height: 30px;
    letter-spacing: .25rem;
    font-weight: 400;
    text-transform: uppercase;
    font-family:'Roboto', sans-serif;
}
.contenu-texte h4{
    font-size: 18px;
    line-height: 26px;
    letter-spacing: .25rem;
    font-weight: 400;
    text-transform: uppercase;
    font-family:'Roboto', sans-serif;
}
.contenu-texte hr{
    border: 0px;
    border-top: 1px solid #000;
    margin: 6rem 0;
}
.blocs a.btn{ margin-top: 3rem; }
.bloc.reverse .contenu-texte{ text-align: right; }
.bloc.reverse h2{
    text-align: right;
    margin-left: 40%;
}
.bloc.reverse h2::before{
    left: auto;
    right: -214px;
    transform: rotate(180deg);
}
#page .bggrey img{ margin: 0; }
#page .services .bggrey img{ max-width: 86%; }
#page .services .bggrey{ padding: 6rem 0; }
#page .services .bggrey h2{  margin-bottom: 6rem;  }
#page .after-temoignages-decouvrez{ margin-bottom: 8rem; }

/*histoire*/
.bgplan2{ position: relative; margin: 6rem 0 0 0; padding: 0 0 12rem 0; }
.bgplan2::before{ 
    content: " ";
    display: block;
    z-index: -1;
    width: 1000px;
    height: 1000px;
    background: white url('gfx/plan-home-1.png') no-repeat right bottom;
    position: absolute;
    right: -10%;
    bottom: -40%;
    opacity: .6;
}
#page .histoire .encart-decouvrez.degrade{
    padding: 4rem 0 0 0;
}
#page .histoire .encart-decouvrez.degrade h2{
    font-size: 35px;
    line-height: 60px;
    margin-bottom: 3rem;
}
#page .histoire .encart-decouvrez.degrade .sous_titre{
    letter-spacing: .1rem;
    font-size: 20px;
    line-height: 35px;
}
#page .histoire .encart-decouvrez.degrade .logo-opacite{
    mix-blend-mode: color-burn;
    margin: 8rem 0 0 -27%;
}
.blocs-decouvrez img{
    margin: 2rem auto;
}
.blocs-decouvrez h3{
    text-transform: uppercase;
    font-size: 19px;
    line-height: 30px;
    letter-spacing: .2rem;
    margin: 0 auto 2rem auto;
}
.blocs-decouvrez p{
    font-size: 17px;
    line-height: 30px;
    letter-spacing: .1rem;
    font-weight: 300;
    margin: 1rem auto 2rem auto;
}
.methodo{
    padding: 4rem 0;
}
.methodo p.green{
    text-transform: uppercase;
    letter-spacing: .1rem;
    font-size: 20px;
    margin: 1rem 0 0 0;
}
.methodo h2{ font-size: 35px; line-height: 60px; margin: 1rem 0 6rem 0; }
.methodo .numbers p.bignumber{
    font-size: 116px;
    line-height: 140px;
    letter-spacing: .5rem;
    font-weight: 900;
    margin: 0 0 1rem 0;
}
.numbers h3{
    text-transform: uppercase;
    font-size: 19px;
    letter-spacing: .1rem;
}
.methodo .numbers p{
    text-transform: none;
    font-size: 20px;
    line-height: 35px;
    letter-spacing: .05rem;
}
.before-footer.bggrey{
    margin: 16rem 0 0 0;
    padding: 0 0 12rem 0;

}
.before-footer .footer-real, 
.before-footer .footer-actu{
    margin-top: -8rem;
}
#page .bggrey.before-footer .footer-real img, 
#page .bggrey.before-footer .footer-actu img{
    margin: 0 9%;
}
.before-footer .footer-real .encart, 
.before-footer .footer-actu .encart{
    bottom: -3rem;
    right: 5%;
    z-index: 3;
    width: 55%;
    padding: 2rem 7.5%;
}
.bggreen a.btn:hover{ background:#A21C1B; }
/* REAL ACTU*/
.nbfade{ filter: grayscale(100%); opacity: .25; }
.img-devant{ position: absolute; z-index: 5; bottom: -120px; bottom: -27%; left: 0; max-width: 53%; }
.titrecat{
    margin: 3rem 0 3rem 0;
}
.titrecat h1{ font-size: 35px; line-height: 60px; }
.mrgreal{ margin: 4rem 0; }
.btn.small{ font-size: 17px; line-height: 54px; padding: 0 1.5rem; }
.mrgreal h3{ font-size: 18px; letter-spacing: .15rem; line-height: 30px; margin: 1rem 0; }
.mrgreal h4{ 
    font-size: 14px; 
    color:#9f9f9f;
    text-transform: uppercase;
    margin: 1rem 0; 
    letter-spacing: .1rem;
    padding: 0 0 1rem 0; 
    background: transparent url('gfx/menu-hover.png') no-repeat left bottom;
}
.navigation.pagination{
    margin: 3rem auto 6rem auto;
    font-size: 18px;
    letter-spacing: .1rem;
}
.navigation.pagination a{ color:#bdbdbd; margin: 0 .5rem; }
.navigation.pagination span.current{ color:#000; margin: 0 .5rem; }
.btn.savoir{
    color:#9f9f9f; 
    font-size: 14px;
    background: transparent url('gfx/menu-hover.png') no-repeat left center;
    max-width: 210px;
    padding: 1.5rem 0;
}
.btn.savoir:hover{ color: black; background-position: 5px center;}


/* SINGLE*/
#single p.petittitre{ font-size: 18px; font-weight: 600; padding-bottom: 1rem; margin-top: 0; }
#single .singleavis p.petittitre{ font-size: 30px; font-weight: 400; text-transform: uppercase; letter-spacing: .3rem; }
#single h1{
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: .5rem;
}
#single h3.categorie{
    font-size: 15px;
    text-transform: uppercase;
    margin: 3rem 0;
    letter-spacing: .1rem;
}
.plusdarticles h2{
    font-size: 30px;
    font-weight: 400;
    letter-spacing: .4rem;
}
.plusdarticles.bggrey{ margin-top: 9rem; }
.bggrey.plusdarticles img{ max-width: 100%; margin: 0; }
.petittitre a:hover{ text-decoration: none; }
.mrgcontenusingle{ margin-top: 3rem; }
#single .fichetech{
    position: relative;
    font-size: 16px;
    line-height: 40px;
    letter-spacing: .15rem;
    margin: 3rem 0 1rem 0;
}
#single .fichetech::before{
    content: " ";
    width: 64px;
    height: 7px;
    background: transparent url(gfx/menu-hover.png) no-repeat left center;
    position: absolute;
    left: -74px;
    top: 36px;
}
.lignetitre img{ display: flex; }
p.listetrav{
    font-size: 20px;
    font-weight: 300;
    letter-spacing: .1rem;
}
.singleavis{
    padding: 10rem 0 6rem 0;
}
.singleavis p{
    font-size: 16px;
    line-height: 30px;
    letter-spacing: .1rem;
    margin: 2rem 0 2rem 0;
}
.singleavis .singlesignature{
    font-size: 20px;
    text-transform: uppercase;
    line-height: 32px;
    letter-spacing: .1rem;
    margin: 2rem 0 0 0;
    padding: 0 0 2rem 0;
    background: transparent url(gfx/menu-hover.png) no-repeat left bottom;
}
.listeimages img {
    width: calc(50% - 1rem);
    flex: auto;
    margin: .5rem;
}
.listeimages{ margin: 6rem 0; }
.plusdarticles .mrgreal{ margin-top: 0; }
.acf-map {
    width: 100%;
    height: 500px;
}




/**/
@media (min-width: 2px) and (max-width: 1023px){
    header::before, 
    header::after, 
    .cadre::after, 
    .cadre::before, 
    .conteneur::after{ display:none; }

    header .degrade p.uppercase{ font-size: .5rem; margin: .5rem 0; }
    header .degrade p.uppercase img{ margin-right: .75rem; }

    header .row.middle .span-2{ width: 60%; }
    header .row.middle .span-8{ width: 40%; }
    header .row.middle > div:nth-child(3){ display:none; }
    a#logo img{ 
        margin: .75rem 10% 1rem 20%;
        max-width: 70%;
    }

    .menu-toggle{
        width: 100%;
        padding: 0;
        margin : 0 0 1rem 0;
        background: #fff;
        color: #000;
        border:0;
        display: block;
        font-size: 4rem;
        line-height: 4rem;
        text-align: center;
    }
   .menu-toggle:active, .menu-toggle:focus, .menu-toggle:hover{
        text-decoration: none;
    }
    .nav-menu{ 
        display: none; 
        padding: 1rem 0; 
        margin:0; 
        z-index: 10001; 
        width: 250%;
        position: absolute;
        right: 0;
        top: -1px;
        background: white;

     }
    .nav-menu.toggled-on{ display: flex; }
    nav ul{
        flex-direction: column;
    }
    nav ul li, nav ul li:first-child{
        list-style-type: none;
        display: inline-flex;
        text-align: center;
        transition: ease-in-out all 0.1s;
        margin: .25rem 0;
    }
    nav ul li a{
        font-size: 18px;
        display: block;
        background: white;
        text-decoration: none;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    nav ul li ul{
        margin:0;
        padding:0;
    }
    nav ul li:hover ul{ }
    nav ul li ul li{
        display: list-item;
    }
    nav ul li ul li a{
        color: #000;
    }
    nav ul li ul li a:hover{
        color: black;
        text-decoration: none;
    }
    nav ul li:last-child::before{ display: none; }
    nav ul li a::after{
        bottom: -4px;
    }
    .home-entete{ 
        right: 15%;
        top: auto;
        bottom: -10%;
        left: 15%;


    }
    .home-entete img{ max-width: 85%; margin: 1rem; }
    .home-entete .zonetexte p {
        font-size: 11px;
        line-height: 20px;
    }
    .home-entete .span-6{ width: 50%; }
    .home-entete .span-1{ width: 0%; }
    .btn {
        font-size: .75rem;
        letter-spacing: .1rem;
        line-height: 1.25rem;
        padding: .75rem 0;
    }
    .row.presentation{ width: 80%; padding: 3rem 10%; }
    .row.presentation-suite{ margin-top: 0; }
    .row.presentation-suite .zonetexte{ width: 100%; }
    .presentation h1{ font-size: 38px; }
    .presentation h1 span {
        display: inline-block;
        font-size: 22px;
        line-height: 26px;
        margin-bottom: 2rem;
        margin-top: 0.5rem;
        letter-spacing: .55rem;
    }
    .presentation-der .der-1{ display: none; }
    p.petittitre {
        font-size: 12px;
        padding: 0 0 1rem 0;
        margin: 1rem 0;
    }
    .zonetexte h2 {
        font-size: 18px;
        line-height: 32px;
        margin-bottom: 1rem;
    }
    .zonetexte p {
        font-size: 16px;
        line-height: 24px;
        margin: 0 0 1rem 0;
    }
    .row.degrade.services{ width: 80%; padding: 2rem 10%; background-size: cover;}
    .row.in-services{ padding: 2rem 0; }
    .row.in-services .btn.white{ margin-bottom: 2rem; }
    h2.prestations-intro{ font-size: 18px; line-height: 34px; margin-bottom: 2rem; }
    .liste-services{ margin-top: 0; }
    .liste-services li {
        padding-left: 0;
        font-size: 14px;
        line-height: 20px;
    }
    .row.in-services .span-3.relative{ padding-bottom: 3rem; margin-bottom: 3rem; }
    .row.bggrey{
        width: 80%; padding: 2rem 10%;
    }
    .bggrey h2{
        font-size: 18px;
        line-height: 32px;
        margin-bottom: 1rem;
    }
    .bggrey .mrgneg{ margin: 2rem 0; }
    .bggrey .wpcf7{ margin: 2rem 0; }
    .row.zone-contact{ width: 80%; padding: 0 10%; }
    .encart-contact{ margin: 0; padding-top: 3rem; }
    .zone-contact .wpcf7{ padding: 3rem 0 0 0; }
    input[type="submit"], button[type="submit"]{
        font-size: 1rem;
        line-height: 1.5rem;
        padding: 1rem 2rem;
    }
    .encart-contact h2::after{ width: 100%; background-size: contain; }
    .zone-contact .wpcf7::after{ left: 0; width: 100%; background-size: contain; }
    .temoignages-decouvrez{
        width: 80%; padding: 2rem 10%;
        background-size: cover;
    }
    .logo-deco { margin: 0 auto; max-width: 60%; }
    .temoignage p.italique {
        font-size: .8rem;
        line-height: 1.1rem;
        margin-bottom: 1rem;
    }
    .temoignage p {  font-size: 1rem; }
    .decouvrez1{ margin-top: 1rem; }
    .decouvrez2 h2 {
        width: 100%;
        font-size: 18px;
        line-height: 32px;
        margin-bottom: 1rem;
    }
    .realisations{ margin: 2rem 0; padding-top: 4rem; }
    .realisations .btn.mini{ margin-left: 10%; }
    .realisations .leh3 {
        left: 0;
        right: 0;
        top: -2rem;
        font-size: 34px;
    }
    .realisations h4, 
    .realisations p{ width: 80%; margin-left: 10%; }
    .realisations .span-5.num2{ margin-top: 2rem; }
    .btn.real{ margin: 2rem 0; }
    .temoignages-decouvrez .leh2 {
        font-size: 20px;
        letter-spacing: .4rem;
        margin-bottom: 1.5rem;
    }
    .btn.toutesactus{ top: 2rem; }


    .divbackgreen p, .divbackred p {
        font-size: .9rem;
        line-height: 1.5rem;
        letter-spacing: .05rem;
        margin: 0 0 2rem 0;
    }
    .article-groupe{
        width: 80%; padding: 2rem 10%;
        margin: 1rem 0;
        background-size: 100%;
        background-position: 0 110%;
    }
    .legroupe p.petittitre{ margin-top: 2rem; }
    .divbackgreen h3, .divbackred h3{ margin-top: 0; }
    .article-groupe img{ margin-top: 2rem; }
    .legroupe{ margin: 2rem 0 6rem 0; }
    .legroupe .span-2 img{ max-width: 30%; }
    .legroupe h2{ font-size: 18px; line-height: 32px; }
    .legroupe p {
        font-size: .9rem;
        line-height: 1.5rem;
    }
    .legroupe-chapitre::after{ left: 0; }
    footer .ligne-logos{ padding: 2rem 10%; }
    footer .ligne-logos span.bordure{ display: none; }
    footer .ligne-logos img.marque-asso{ margin: 1rem auto; max-width: 70%; }
    .menu-footer-container{ display: none; }
    .row.mentions p {
        margin: 1rem 0;
        line-height: 1rem;
        font-size: .8rem;
    }
    .row.mentions{ height: auto; padding-bottom: 0; }
    #page .bandeau img{ max-width: 100%; }
    #page .titre-intro {  }
    #page .titre-intro h1 { margin-top: 1rem; font-size: 10px; letter-spacing: .15rem; }
    #page .titre-intro h1 span{ font-size: 22px; margin-bottom: 1rem; }
    #page .titre-intro > div{ margin-top: 0; }
    #page .titre-intro > div.span-3{ width: 40% }
    #page .titre-intro > div.span-4{ width: 60% }
    #page .titre-intro img{ margin-top: -3rem; }
    .bloc { margin: 2rem 0 6rem 0; }
    .bloc .span-5:nth-child(4){ width: 80%; margin: 0 10%; }
    .bloc h2{ 
        font-size: 20px;
        line-height: 30px;
        letter-spacing: .1rem;
        margin: 2rem 0 2rem 0;
        width: 70%;
    }
    .bloc.reverse h2{ margin-left: 30%; }
    .contenu-texte h3 {
        font-size: 16px;
        line-height: 22px;
    }
    .contenu-texte p {
        font-size: 16px;
        line-height: 26px;
        letter-spacing: .025rem;
    }
    .contenu-texte li{
        font-size: 16px;
        line-height: 26px;
        letter-spacing: .025rem;
    }
    .blocs a.btn {  margin-top: 1rem; }
    .bloc::after, .bloc.reverse::after{
        width: 200px;
        height: 86px;
        background-size: contain;
        bottom: -66px;
    }
    #page .services .bggrey{ padding: 3rem 10%; }
    #page .services .bggrey h2 { margin-bottom: 2rem; }
    .contenu-texte h2 {
        font-size: 20px;
        line-height: 30px;
        margin: 3rem 10%;
        max-width: 80%;
    }
    #page .contenu-texte{ 
        width: 80%;
        padding: 0 10%;
    }
    .bgplan2{
        margin: 3rem 0 0 0;
        padding: 0 0 3rem 0;
    }
    #page .histoire .encart-decouvrez.degrade{
        width: 80%;
        padding: 3rem 10%;
    }
    #page .histoire .encart-decouvrez.degrade h2 {
        font-size: 20px;
        line-height: 40px;
        margin-bottom: 2rem;
    }
    #page .histoire .encart-decouvrez.degrade .sous_titre {
        font-size: 16px;
        line-height: 28px;
    }
    #page .histoire .encart-decouvrez.degrade .logo-opacite { margin: 0rem 0 0 -20%; }
    .blocs-decouvrez img { margin: 1rem auto 1.5rem auto; }
    .blocs-decouvrez h3 {
        font-size: 16px;
        line-height: 24px;
        letter-spacing: .1rem;
        margin: 0 auto 2rem auto;
    }
    .blocs-decouvrez p { font-size: 14px; line-height: 24px; }
    .methodo { padding: 2rem 0; }
    .methodo p { font-size: 16px; }
    .methodo h2{ margin: 1rem 10% 2rem 10%; font-size: 20px; line-height: 40px; }
    .methodo .numbers p.bignumber{ text-align: center; font-size: 5rem; line-height: 5rem; margin: 1rem 0 1rem 0; }
    .numbers{  width: 80%; padding: 0 10%; }
    .numbers h3 { font-size: 16px; }
    .methodo .numbers p{ line-height: 24px; }
    #page .legroupe{ width: 80%; padding: 0 10%; }
    .before-footer .footer-real, .before-footer .footer-actu{ margin: 3rem 0; }
    .before-footer.bggrey{ margin: 3rem 0 0 0; width: 90%; padding: 2rem 5%; }
    #page .bggrey.before-footer .footer-real img, 
    #page .bggrey.before-footer .footer-actu img{
        margin: 0;
    }
    .before-footer .footer-real .encart, 
    .before-footer .footer-actu .encart {
        bottom: -3rem;
        right: 0;
    }
    .before-footer .footer-real .leh3, 
    .before-footer .footer-actu .leh3{ font-size: 1rem; padding-bottom: 1.5rem; margin-bottom: 1.5rem; }
    .before-footer .footer-real .btn, 
    .before-footer .footer-actu .btn{
        letter-spacing: .05rem;
        padding: .5rem 1rem;
    }
    .titrecat{ margin: 2rem 10%; width: 80%; }
    .titrecat h1 { font-size: 24px; line-height: 40px; }
    .mrgreal { margin: 1rem 10%; width: 80%; }
    .mrgreal h4 { font-size: 14px; }
    .mrgreal h3 {
        font-size: 16px;
        letter-spacing: .1rem;
        line-height: 24px;
        margin: 1rem 0;
    }
    .btn.small { font-size: 12px; line-height: 40px; }
    .fdrealz{ background-size: 100%; background-position: -10rem 40%; }
    .navigation.pagination{ margin: 3rem auto; font-size: 2rem; }
    #single .lignetitre .span-5{ margin: 2rem 10%; width: 80%; }
    #single h1 {
        font-size: 20px;
        line-height: 40px;
        letter-spacing: .1rem;
        margin: 0;
    }
    #single .fichetech {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: .1rem;
    }
    #single .fichetech::before { left: -74px; top: 16px; }
    #single p.petittitre{ font-size: 16px; margin: 1rem 0 0 0; }
    #single .singleavis p.petittitre{ font-size: 16px; margin: 1rem 0 0 0; }
    p.listetrav { font-size: 16px; }
    .singleavis { padding: 2rem 10%; width: 80%; }
    .singleavis img.guillemet{ max-width: 30%; }
    .singleavis p.italique { font-size: 12px; line-height: 24px; }
    .singleavis .singlesignature { font-size: 16px; line-height: 22px; }
    .mrgcontenusingle{ margin: 2rem 10% 0 10%; width: 80%; }
    .listeimages{ margin: 3rem 0; }
    .plusdarticles{ margin: 1rem 10%; }
    .plusdarticles h2{ letter-spacing: .05rem; font-size: 20px; }
    .plusdarticles .mrgreal{ margin: 2rem 0 1rem 0; width: 100%; }
    .plusdarticles .mrgreal.span-1{ margin: 0 0 1rem 0; width: 100%; }
    .singleactu .row.middle .span-4{ padding: 0 10%; width: 80%; }
    #single h3.categorie { font-size: 14px; margin: 2rem 0; }
    .singleactu .contenu-texte h2{ margin: 2rem 0; width: 100%; max-width: 100%; }
    .bggrey h1, h2.outrouver, .contenu-texte h2{ 
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 1rem;
        letter-spacing: .25rem;
        margin-left: 0;
    }
    h2.outrouver{ font-size: 20px; margin: 2rem 10%; }
    p.coordonnees {
        position: relative;
        padding: 0 0 0 25%;
        margin: 0 0 3rem 0;
        font-size: 18px;
        line-height: 26px;
    }
    .map-content iframe{ max-height: 50vh; }
    #page .pagecontact .bggrey img{ display: none; }




}
/**/
@media (min-width: 768px) and (max-width: 1023px){

    header .row.middle .span-2 { width: 60%; }
    .nav-menu { width: 150%; right: -10%; }
    .home-entete{ left: 20%; right: 20%; }
    .home-entete .zonetexte p{ font-size: 18px; line-height: 26px; }
    .row.presentation { width: 100%; padding: 3rem 0%; }
    .row.degrade.services{ width: 100%; padding: 3rem 0%; }
    .liste-services li { font-size: 14px; line-height: 20px; }
    .row.bggrey { width: 100%; padding: 2rem 0%; }
    p.petittitre{ line-height: 20px; }
    .encart-contact{ margin-top: -3rem; }
    .zone-contact .span-4{ width: 35%; }
    .wpcf7 .spannomargin-11{ width: 47.5%; }
    .temoignages-decouvrez{ width: 100%; padding: 2rem 0%; }
    .temoignages-decouvrez p {
        font-size: 12px;
        line-height: 20px;
    }
    .temoignages-decouvrez .temoignage p {
        font-size: 12px;
        line-height: 20px;
    }
    .avishome .leh2{ margin-top: 0; }
    .logo-deco{ max-width: 100%; }
    .realisations{ margin-top: 3rem; }
    .realisations .leh3{ top: 0; }
    .realisations h4, .realisations p{ margin-left: 0; width: 100%; }
    .realisations .btn.mini{ margin-left: 0; }
    .divbackgreen::after, .divbackred::after{ top: -2rem; bottom: -2rem; }
    .divbackgreen, .divbackred{ width: 32%; }
    .divbackgreen::after{ left: -70%; width: 186%; }
    .divbackred::after{  width: 226%; left: -70%; }
    .legroupe .span-2, .legroupe .span-3{ width: 50%; }
    .legroupe .span-5{ width: 100%; }
    .legroupe .span-1{ display: none; }
    .legroupe{ margin: 3rem 0 3rem 0; }
    .legroupe .span-2 img{ max-width: 40%; margin-left: 30%; }
    .article-groupe{ background-size: 50%; }
    footer .ligne-logos img { margin: 1rem; }
    .bloc .span-5:nth-child(4){ width: 50%; margin: 0; }
    #page .titre-intro > div.span-3{ width: 21.4284%; }
    #page .titre-intro > div.span-4{ width: 28.5712%; }
    #page .titre-intro > div{ margin-top: -3rem; }
    #page .titre-intro h1{ font-size: 12px; }
    #page .titre-intro h1 span { font-size: 26px; }
    #page .services .bggrey{ padding: 3rem 0; }
    #page .services .bggrey .span-5{ width: 45%; }
    .titrecat > div{ width: 100%; }
    .mrgreal{ width: 38.5712%; margin: 3rem 0; }
    .span-2.mrgreal{ width: 7.1428%; }
    .fdrealz { background-size: 60%; }
    #single .lignetitre .span-5{ width: 35%; margin: 0 0 3rem 0; }
    .singleavis img.guillemet { max-width: 80%; }
    .mrgcontenusingle{ width: 100%; margin: 3rem 0 0 0; }
    .plusdarticles .mrgreal{ width: 28.5712%; margin: 2rem 0; }
    .plusdarticles .span-1.mrgreal{ width:7.1428%; }
    .singleactu .row.middle .span-4{ width: 40%; padding: 0; }
    #page .pagecontact .bggrey img{ display: flex; }
    #page .pagecontact .span-4{ width: 35%; }
    #page .pagecontact .bggrey h1 { font-size: 16px; }
    .map-content iframe { max-height: 30vh; }





}
/**/
@media (min-width: 1024px) and (max-width: 1279px) {
    header::before, header::after{ width: 30%; }
    nav ul li a { font-size: 9px; letter-spacing: .1rem; padding: 0 4px; }
    nav ul li:last-child a { font-size: 9px; padding-left: 0; }
    nav ul li:last-child::before{ width: 58px; background-size: contain; height: 16px; right: -24px; bottom: -10px;  }
    nav ul li:first-child{ margin-left: 0; }
    nav ul li a::after{ bottom: -4px; background-size: 60%; }
    footer .ligne-logos img{ max-height: 2.5rem; }
    footer .ligne-logos img.footerlogo{ max-height: 4rem; margin-top: .5rem; }
    footer .ligne-logos img.marque-asso{ max-height: 2rem; }
    footer .ligne-logos span.bordure{ height: 3rem; }
    footer .ligne-logos p.grey { font-size: 10px; margin-right: .5rem; }
    .footer-menu li:last-child a{ background-size: 1.5rem; font-size: 10px; }
    .footer-menu li::before{ width: 2.2rem; top: 0; }
    footer .ligne-logos { padding: 2rem 0; }
    .menu-footer-container { padding: 0 0 2rem 0; }
    .row.mentions { height: 34px; }
    .row.mentions p { line-height: 34px; font-size: 9px; }
    .home-entete .zonetexte p {
        font-size: 12px;
        line-height: 20px;
    }
    .presentation h1 {
        font-size: 28px;
        letter-spacing: .25rem;
    }
    .presentation h1 span {
        font-size: 20px;
        line-height: 26px;
        margin-top: 1.5rem;
        letter-spacing: .25rem;
    }
    .row.presentation-suite {
        margin-top: 2rem;
    }
    .btn {
        font-size: 10px;
        padding: 1.5rem 0;
        background-size: 90%;
    }

    .row.presentation{
        padding: 2rem 0 0 0;
    }
    p.petittitre { font-size: 12px; line-height: 20px; margin: 0; }
    .zonetexte h2 {
        font-size: 20px;
        line-height: 34px;
        margin-bottom: 1.5rem;
    }
    .zonetexte p {
        font-size: 12px;
        line-height: 20px;
        margin: 0 0 1rem 0;
    }
    .row.in-services{ padding: 3rem 0 2rem 0; }
    p.prestations-intro b{ font-size: 20px; line-height: 34px; }
    p.prestations-intro{font-size: 20px; line-height: 34px; margin-bottom: 2rem; }
    .liste-services li {
        padding-left: 3.25rem;
        font-size: 12px;
        line-height: 14px;
        margin-bottom: 12px;
    }
    .row.in-services .span-3.relative {
        padding-bottom: 4rem;
    }
    .encart-contact {
        padding: 4rem 0 0 0;
        margin-top: -4rem;
    }
    .encart-contact h2 { font-size: 20px; }
    .encart-contact h2::after{  max-width: 175%; background-size: contain; }
    .zone-contact .wpcf7::after{ width: 200px; background-size: contain; left: -120px; bottom: 0;}

    .bggrey {  padding: 1rem 0 0 0; }
    .bggrey h2{
        font-size: 20px;
        line-height: 34px;
        margin-bottom: 1.5rem;
    }
    input[type="text"], input[type="password"], 
    input[type="email"], input[type="tel"], input[type="number"], select, textarea{
        font-size: 12px;
        margin-bottom: 1rem;
    }
    input[type="text"]::placeholder, input[type="password"]::placeholder, 
    input[type="email"]::placeholder, input[type="tel"]::placeholder, 
    input[type="number"]::placeholder, textarea::placeholder{ font-size: 12px; }
    input[type="submit"], button[type="submit"]{
        font-size: 10px;
        padding: 0.55rem 1.5rem;
    }
    .zone-contact .wpcf7 .italique{ font-size: 10px; }
    .logo-deco {  margin-top: -1rem; }
    .temoignage p.italique{ font-size: 12px; line-height: 18px; }
    .temoignage p { font-size: 14px; }
    .decouvrez1 { margin-top: 3rem; }
    .decouvrez2 h2{ font-size: 20px; line-height: 34px; margin-bottom: 2rem; }
    .temoignages-decouvrez{ padding: 70px 0 0 0; }
    .temoignages-decouvrez .leh2 { font-size: 16px; margin-bottom: 2rem; letter-spacing: .2rem; }
    .temoignages-decouvrez p {
        font-size: 10px;
        line-height: 16px;
    }
    .avishome .leh2{ margin: 0 0 1rem 0; }
    .temoignages-decouvrez .temoignage p{
        font-size: 10px;
        line-height: 16px;
        margin-bottom: 1rem;
    }
    .temoignages-decouvrez .temoignage p.uppercase{ padding-bottom: 1rem; }
    .btn.toutesactus {
        font-size: 12px;
        top: -1rem;
    }

    .leh3{ font-size: 20px; padding-bottom: 1.25rem; }
    .divbackgreen h3, .divbackred h3{ margin-top: 1rem; }
    .divbackgreen p, .divbackred p {
        font-size: 12px;
        line-height: 24px;
        margin: 0 0 2rem 0;
    }
    .divbackgreen::after, .divbackred::after{ top: -2rem; bottom: -2rem; }
    .realisations{ margin: 4rem 0; }
    .realisations .span-5.num2 { margin-top: 3.3rem; }
    .realisations .leh3{ font-size: 40px; }
    .realisations h4, .realisations p {
        font-size: 10px;
        margin: 1rem 0 0 0;
        line-height: 16px;
        letter-spacing: .1rem;
    } 
    .realisations p { margin: 0 0 1rem 0; }
    .btn.mini{ font-size: 10px; }
    .btn.real{ width: 60% }
    .btn.real::before{ width: 240px; background-size: contain; height: 60px; }

    .article-groupe{ margin: 4rem 0 6rem 0; }
    .legroupe h2{ font-size: 18px; line-height: 30px; letter-spacing: .25rem; }
    .legroupe p{
        font-size: 12px;
        line-height: 22px;
        margin: 0 0 1rem 0;
    }
    .legroupe { margin: 8rem 0 2rem 0; }
    .footer-menu li a{ letter-spacing: .1rem; }
    .bggrey h1, h2.outrouver, .contenu-texte h2 {
        font-size: 17px;
        line-height: 28px;
        letter-spacing: .25rem;
        margin: 0 0 3rem 0;
    }
    .bggrey .wpcf7 { margin: 9rem 0 1rem 0; }
    h2.outrouver {
        margin: 0 0 2rem 0;
        font-size: 17px;
    }
    p.coordonnees {
        padding: 0 0 0 20%;
        margin: 0 0 6rem 0;
        font-size: 16px;
        line-height: 22px;
    }
    #page .titre-intro h1 {
        font-size: 14px;
        letter-spacing: .25rem;
        margin-top: 40px;
    }
    #page .titre-intro h1 span{ font-size: 22px; margin-bottom: 1rem; }
    #page .titre-intro > div{ margin-top: -60px; }
    #page .titre-intro img { margin-top: -70px; }
    .bloc { margin: 4rem 0 6rem 0; }
    .bloc h2 {
        font-size: 18px;
        letter-spacing: .1rem;
        margin: 2rem 0 2rem 0;
    }
    .bloc::after{ width: 302px; height: 136px; background-size: contain; }
    .contenu-texte h3 {
        font-size: 14px;
        line-height: 22px;
    }
    .contenu-texte p {
        font-size: 12px;
        line-height: 20px;
        letter-spacing: .05rem;
        margin: 1rem 0 1rem 0;
    }
    .contenu-texte li{ font-size: 12px; line-height: 24px; }
    .blocs{ background-size: 70%; background-position: 190% 82%; }
    #page .services .bggrey{ padding: 3rem 0; }
    #page .services .bggrey h2{ margin-bottom: 3rem; }
    .bgplan2{ margin: 3rem 0 0 0; padding: 0 0 6rem 0; }
    .contenu-texte h2 {
        font-size: 20px;
        line-height: 40px;
        margin: 2rem 0;
    }
    .contenu-texte h2::before{ top: 16px; }
    .contenu-texte h3 {
        font-size: 16px;
    }
    .contenu-texte h4{
        font-size: 14px;
    }
    .contenu-texte hr{ margin: 3rem 0; }
    .bgplan2::before{
        width: 500px;
        height: 500px;
        background-size: 100%;
    }
    #page .histoire .encart-decouvrez.degrade h2 {
        font-size: 20px;
        line-height: 40px;
    }
    #page .histoire .encart-decouvrez.degrade .sous_titre {
        font-size: 14px;
        line-height: 24px;
    }
    .blocs-decouvrez img{ margin: 1rem auto; max-width: 20%; }
    .blocs-decouvrez h3 { font-size: 14px; line-height: 22px; margin: 0 auto 1rem auto; }
    .blocs-decouvrez p { font-size: 10px; line-height: 18px; letter-spacing: .05rem; }
    #page .histoire .encart-decouvrez.degrade .logo-opacite { margin: 4rem 0 0 -27%; }
    .methodo p{ font-size: 12px; }
    .methodo h2 {
        font-size: 24px;
        line-height: 40px;
        margin: 1rem 0 4rem 0;
    }
    .methodo .numbers p.bignumber {
        font-size: 76px;
        line-height: 90px;
    }
    .numbers h3 { font-size: 14px; }
    .methodo .numbers p { line-height: 24px; }
    .legroupe{ margin: 2rem 0 1rem 0; }
    .before-footer .footer-real, .before-footer .footer-actu {
        margin-top: -5rem;
    }
    .before-footer.bggrey {
        margin: 10rem 0 0 0;
        padding: 0 0 8rem 0;
    }
    .titrecat h1{ font-size: 20px; line-height: 30px; }
    .titrecat{ margin: 2rem 0; }
    .mrgreal{ margin: 2rem 0; }
    .mrgreal h4 { font-size: 12px; }
    .mrgreal h3 { font-size: 14px; line-height: 20px; }
    .btn.small {
        font-size: 12px;
        line-height: 44px;
        padding: 0 1rem;
    }
    .navigation.pagination{ font-size: 18px; }
    #single p.petittitre{ font-size: 12px; }
    #single .singleavis p.petittitre{ font-size: 14px; }
    .singleavis p, .singleavis .singlesignature{ font-size: 12px; line-height: 20px; }
    #single h1 {
        font-size: 20px;
        line-height: 30px;
        letter-spacing: .15rem;
    }
    #single h3.categorie {
        font-size: 16px;
        margin: 2rem 0;
    }
    #single .fichetech {
        font-size: 14px;
        line-height: 40px;
        margin: .5rem 0;
    }
    #single .fichetech::before{ top: 16px; }
    p.listetrav { font-size: 12px; margin: .5rem 0; }
    .singleavis p.italique {
        font-size: 12px;
        line-height: 24px;
        margin: 1rem 0;
    }
    .singleavis { padding: 2rem 0; }
    .singleavis img{ max-width: 60%; }
    .plusdarticles {
        margin-top: 3rem;
    }
    .plusdarticles h2{ font-size: 20px; }




}
/**/
@media (min-width: 1280px) and (max-width: 1479px){

    nav ul li a {  font-size: 11px; letter-spacing: .1rem; }
    nav ul li:last-child a { font-size: 11px; }
    nav ul li:first-child { margin-left: 2.5vw; }
    nav ul li:last-child::before{ width: 58px; background-size: contain; height: 16px; right: -24px; bottom: -10px;  }
    nav ul li a::after{ bottom: -4px; background-size: 60%; }

    .home-entete h1 {
        font-size: 20px;
        line-height: 40px;
    }
    .btn {
        font-size: 14px;
        line-height: 20px;
        padding: 1.5rem 0;
        background-size: 90%;
    }
    .home-entete .zonetexte p {
        font-size: 16px;
        line-height: 26px;
    }
    .presentation h1 { font-size: 38px; }
    .presentation h1 span {
        display: inline-block;
        font-size: 24px;
        line-height: 30px;
    }
    .encart-contact {
        padding: 4rem 0 0 0;
        margin-top: -4rem;
    }
    .encart-contact h2 {
        font-size: 26px;
    }
    .encart-contact h2::after{
        width: 342px;
        background-size: contain;
    }
    .zone-contact .wpcf7::after{ width: 240px; background-size: contain;     left: -130px; }
    .realisations .leh3{ font-size: 50px; }
    .realisations .span-5.num2 {
        margin-top: 3.8rem;
    }
    footer .ligne-logos p.grey {
        font-size: 12px;
        margin-right: .5rem;
    }
    footer .ligne-logos img{ max-height: 3.5rem; }
    footer .ligne-logos img.footerlogo{ max-height: 5rem; }
    footer .ligne-logos img.marque-asso{ max-height: 2rem; }
    footer .ligne-logos span.bordure{ height: 3rem; }
    footer .ligne-logos .sociaux img {
        margin: 0 .25rem;
    }
    .footer-menu li:last-child a{ background-size: 2rem; font-size: 12px; }
    .footer-menu li::before{ width: 2.8rem; top: 10%; }
    .row.mentions { height: 54px; }
    .row.mentions p { line-height: 54px; font-size: 10px; }
    footer .ligne-logos { padding: 3rem 0; }
    p.petittitre { font-size: 14px; line-height: 30px; }
    .realisations h4, .realisations p{ font-size: 12px; line-height: 18px; }


    .zonetexte h2{
        font-size: 26px;
        line-height: 44px;
    }
    .zonetexte p {
        font-size: 16px;
        line-height: 26px;
        margin: 0 0 1.5rem 0;
    }
    p.prestations-intro {
        font-size: 20px;
        line-height: 40px;
        margin-bottom: 3rem;
    }
    p.prestations-intro b { font-size: 24px; }
    .liste-services li {
        padding-left: 3.5rem;
        font-size: 14px;
        line-height: 16px;
        margin-bottom: 14px;
    }
    .row.in-services {
        padding: 5rem 0 3rem 0;
    }
    .bggrey h2 {
        font-size: 24px;
        line-height: 46px;
    }
    input[type="text"], input[type="password"], 
    input[type="email"], input[type="tel"], input[type="number"], select, textarea{
        font-size: 16px;
        margin-bottom: 1rem;
    }
    input[type="text"]::placeholder, input[type="password"]::placeholder, 
    input[type="email"]::placeholder, input[type="tel"]::placeholder, 
    input[type="number"]::placeholder, textarea::placeholder{ font-size: 16px; }
    input[type="submit"], button[type="submit"]{
        font-size: 14px;
        line-height: 20px;
        padding: 1rem 2rem;
    }
    .logo-deco{ margin-top: 0; }
    .temoignage p.italique {
        font-size: 13px;
        line-height: 24px;
    }
    .temoignage p { font-size: 16px; }
    .temoignages-decouvrez {
        padding: 80px 0 0 0;
    }
    .temoignages-decouvrez .leh2 {
        font-size: 22px;
        margin-top: 0;
        margin-bottom: 3.5rem;
    }
    .avishome .leh2{ margin-bottom: 0; }
    .temoignages-decouvrez p {
        font-size: 14px;
        line-height: 24px;
    }
    .temoignages-decouvrez .temoignage p {
        font-size: 14px;
        line-height: 24px;
    }



    .decouvrez2 h2{ font-size: 24px; line-height: 46px; }
    .leh3 { font-size: 22px; }
    .divbackgreen p, .divbackred p {
        font-size: 14px;
        line-height: 26px;
        margin: 0 0 2rem 0;
    }
    .article-groupe{  background-size: 30%; }
    .legroupe h2{ font-size: 24px; line-height: 46px; }
    .legroupe p {
        font-size: 14px;
        line-height: 24px;
    }
    .bggrey h1 {
        font-size: 22px;
        line-height: 40px;
        margin: 0 0 4rem 0;
    }
    .bggrey .wpcf7 { margin: 12rem 0 1rem 0; }
    h2.outrouver { margin: 0 0 2rem 0; font-size: 22px; }
    p.coordonnees { margin: 0 0 7rem 0; }
    #page .titre-intro h1 {
        font-size: 18px;
        letter-spacing: .25rem;
        margin-top: 60px;
    }
    #page .titre-intro h1 span{ font-size: 28px; margin-bottom: 1.5rem; }
    #page .titre-intro > div{ margin-top: -60px; }
    #page .titre-intro img { margin-top: -70px; }
    .bloc h2 {
        font-size: 22px;
    }
    .contenu-texte h3 {
        font-size: 16px;
    }
    .contenu-texte p, .contenu-texte li {
        font-size: 16px;
        line-height: 24px;
    }
    .bloc h2::before{ background-size: 70%; background-position: right center;}
    .bloc::after{
        width: 382px;
        height: 136px;
        background-size: contain;
    }
    #page .services .bggrey{ padding: 4rem 0; }
    #page .services .bggrey h2 { margin-bottom: 4rem; }
    .contenu-texte h2 {
        font-size: 24px;
        line-height: 40px;
    }
    .contenu-texte h2::before{ top: 16px; }
    .contenu-texte h3 {
        font-size: 20px;
    }
    .contenu-texte hr{
        margin: 4rem 0;
    }
    .bgplan2::before{
        width: 700px;
        height: 700px;
        background-size: 100%;
    }
    .bgplan2 {
        margin: 4rem 0 0 0;
        padding: 0px 0 8rem 0;
    }
    #page .histoire .encart-decouvrez.degrade h2 {
        font-size: 24px;
        line-height: 50px;
    }
    .blocs-decouvrez h3 {
        font-size: 16px;
        line-height: 26px;
    }
    .blocs-decouvrez p {
        font-size: 13px;
        line-height: 22px;
    }
    #page .histoire .encart-decouvrez.degrade .logo-opacite { margin: 4rem 0 8rem -27%; }
    .methodo p{ font-size: 16px; }
    .methodo h2 {
        font-size: 24px;
        line-height: 40px;
        margin: 1rem 0 4rem 0;
    }
    .numbers h3 { font-size: 17px; }
    .methodo .numbers p{ line-height: 24px; }
    .legroupe { margin: 6rem 0 1rem 0; }
    .before-footer .footer-real, .before-footer .footer-actu { margin-top: -6rem; }
    .before-footer.bggrey {
        margin: 12rem 0 0 0;
        padding: 0 0 10rem 0;
    }
    .titrecat h1 { font-size: 26px; line-height: 40px; }
    .mrgreal h3 { font-size: 16px; line-height: 26px; }
    .mrgreal h4 { font-size: 14px; }
    .btn.small { font-size: 14px; line-height: 44px; }
    #single p.petittitre{ font-size: 16px; }
    #single .singleavis p.petittitre{ font-size: 20px; }
    #single h1 {
        font-size: 26px;
        line-height: 32px;
        letter-spacing: .25rem;
    }
    #single h3.categorie {
        font-size: 18px;
        margin: 2rem 0;
    }
    #single .fichetech {
        font-size: 18px;
        line-height: 40px;
        margin: 1rem 0 1rem 0;
    }
    #single .fichetech::before{ top: 16px; }
    p.listetrav { font-size: 14px; margin: .5rem 0; }
    .singleavis { padding: 4rem 0; }
    .singleavis p.italique {
        font-size: 14px;
        line-height: 28px;
        margin: 1rem 0;
    }
    .singleavis { padding: 3rem 0; }
    .singleavis img{ max-width: 60%; }
    .plusdarticles.bggrey {
        margin-top: 3rem;
    }




    


}
/**/
@media (min-width: 1480px) and (max-width: 1599px){
    nav ul li a { font-size: 13px; letter-spacing: .125rem; }
    nav ul li:last-child a {  font-size: 13px; }
    nav ul li:last-child::before{  }

    .home-entete h1 {
        font-size: 24px;
        line-height: 46px;
    }
    .footer-menu li::before{ width: 3.5rem; }
    .bggrey h1 {
        font-size: 24px;
        line-height: 50px;
        margin: 0 0 3rem 0;
    }
    .bggrey .wpcf7 { margin: 13rem 0 1rem 0; }
    h2.outrouver{ font-size: 24px; }
    .blocs{ background-size: 70%; background-position: 190% 82%; }
    #page .titre-intro h1 { margin-top: 50px; }
    #page .titre-intro > div{ margin-top: -70px; }
    #page .titre-intro img { margin-top: -80px; }
    .contenu-texte h2, #page .histoire .encart-decouvrez.degrade h2 {
        font-size: 28px;
        line-height: 50px;
    }
    .bgplan2::before{
        width: 700px;
        height: 700px;
        background-size: 100%;
    }
    .blocs-decouvrez p {
        font-size: 14px;
        line-height: 24px;
    }
    #single h1 {
        font-size: 36px;
        line-height: 50px;
        letter-spacing: .25rem;
    }
    #single .fichetech {
        font-size: 20px;
        line-height: 50px;
        margin: 1rem 0 1rem 0;
    }
    p.listetrav { font-size: 18px; margin: .5rem 0; }

    .row.in-services {
        padding: 5rem 0 4rem 0;
    }
    .liste-services li {
        font-size: 16px;
        line-height: 20px;
        margin-bottom: 20px;
    }
    .temoignages-decouvrez{ padding-top: 80px; }



}
/**/
@media (min-width: 1600px) and (max-width: 1799px){
    .blocs{ background-size: 70%; background-position: 190% 82%; }

    
}
/**/
@media (min-width: 1800px){

}
/**/
@media (min-width: 1900px){

    #site-navigation{ width: 100%; margin-bottom: 2rem; }
    header .degrade p.uppercase img{ 
        margin-right: 1rem;
    }
    header .degrade p.uppercase{ 
        font-size: 16px;
        margin: 1.25rem 0;
    }
    header::before{
        left: 2.6rem;
        top: 2.6rem;
    }
    header::after{
        right: 2.6rem;
        top: 2.6rem;
    }
    .cadre::before{
        left: 2.6rem;
        top: 2.6rem;
        bottom: 2.6rem;
    }
    .cadre::after{
        right: 2.6rem;
        top: 2.6rem;
        bottom: 2.6rem;
    }
    .conteneur::after{
        right: 2.6rem;
        left: 2.6rem;
        bottom: 2.6rem;
    }
    a#logo img{ margin: 1.05rem auto .65rem auto; margin: 36px 0 54px 0; }
    nav ul li:first-child { margin-left: 4.2rem; }
    h2.prestations-intro{
        font-size: 60px;
        line-height: 60px;
    }
    .footer-menu li{ 
        padding-left: 0;
        margin: 0 2rem;
    }
    .footer-menu li a{ font-size: 14px; }
    .footer-menu li:last-child a{
        font-size: 14px;
        font-weight: 700;
        padding: 1.85rem 3rem 1.85rem 0;
    }
    .row.mentions{ padding-bottom: 2.6rem; }




}
/**/
/**/
/*COOKIES */

body #cookie-notice{
    height: 100%;
    top: 20%;
    left: 0;
    bottom: 0;
    right: 0;
    background: transparent!important;
}
.cookie-notice-container{
    width: 50%;
    margin: 2% 25% 0 25%;
    background: rgba(255,255,255,1) url('gfx/logo.png') no-repeat center 20%;
    border: 0px;
    padding: 140px 5% 20px 5%;
}
@media (max-width: 1024px){
    .cookie-notice-container{
        width: 70%;
        margin: 2% 15% 0;
    }
}
@media (max-width: 767px){
    .cookie-notice-container{
        width: 90%;
        margin: 2% 5% 0 5%;
    }
}


#cn-notice-text{ font-size: 1.2em; line-height: 1.6em; float: left; width: 100%; text-align: center; margin-bottom: 1em; color: #000!important; }
#cn-notice-text a{ color: #000!important; text-decoration: underline; }
#cn-notice-buttons{ width: 100%; }
#cookie-notice .cn-button{
    transform: none!important;
    display: inline-block!important;
    margin: 0px .5rem!important;
    font-size: 1.2em!important;
    background:#bdbdbd!important;
    color: #fff!important;
    border: 0px solid #bdbdbd!important;
    text-shadow: none!important;
    border-radius: 0px!important;
    padding: 8px 28px!important;
    transition: ease-in-out all .1s;
}
#cookie-notice .cn-button:hover{
    background: #000!important;
    color: #fff!important;
    border-color: #000!important;
    transition: ease-in-out all .1s;
}
#cookie-notice #cn-refuse-cookie.cn-button, 
#cookie-notice #cn-more-info.cn-button{
  background: #eee!important;
  border: 0px solid #fff!important;
  color:#000!important;
}
#cookie-notice #cn-refuse-cookie.cn-button:hover, 
#cookie-notice #cn-more-info.cn-button:hover{
  background: #bdbdbd!important;
  border: 0px solid #bdbdbd!important;
  color:#fff!important;
}
 #cookie-notice #cn-more-info.cn-button{ display: block!important; margin: 1rem auto!important; max-width: 270px; }
.cookie-notice-hidden{ display:none!important; }
.cookie-notice-hidden.cn-animated{ display:block!important; }


body #cookie-notice.cookie-notice-hidden.cookie-revoke-visible{ 
    display:block!important;
    background: transparent!important;
    box-shadow: none;
    height: 3rem;
    top: auto;
    bottom: 0;
}
#cookie-notice .cookie-revoke-container{ display: flex; align-items: flex-end; justify-content: flex-end; }
#cn-close-notice{ display: none; }
.grecaptcha-badge{ display:none!important; visibility:hidden!important; }

@media (max-width: 1024px){
    #cn-revoke-buttons{
        width: 40%;
    }
    #cookie-notice .cn-button.cn-revoke-cookie{
        padding: .5rem !important;
        font-size: .65rem !important;
    }
}

/* rappels fixes*/
.stickyphone{
    line-height: 90px;
    width: 270px;
    padding: 0 0 0 80px;
    text-align: left;
    font-size: 22px;
    font-weight: 500;
    color: white;
    text-transform: uppercase;
    background: #000 url('gfx/picto-tel.png') no-repeat 5% center;
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
    box-shadow: 0 6px 6px rgba(0,0,0,.15);
    transform: translateX(270px);
    transition: ease-in-out all .5s;
    position: fixed;
    top: 40%;
    right: 0;
    z-index: 100;
}
.stickyphone:hover{
    transform: translateX(0);
    transition: ease-in-out all .25s;
    text-decoration: none;
    color: white;
}
/*associé single*/
.stickyphone.tel{
    top: 25%;
    padding-left: 100px;
    transform: translateX(290px);
}
.stickyphone.devis{
    top: calc( 25% + 90px );
    background: #000 url('gfx/picto-devis.png') no-repeat 5% center;
    padding-left: 100px;
    transform: translateX(290px);
}
.stickyphone.tel:hover, .stickyphone.devis:hover{ transform: translateX(0); }

/*smart*/
@media (max-width: 1023px){
    .stickyphone.tel{
        position: absolute;
        top: 21rem;
        padding-left: 60px;
        height: 60px;
        background-position: center;
        background-size: 40px;
        width: 0px;
        transform: none;
        overflow: hidden;
        text-indent: -1000%;
    }
    .stickyphone.devis{  
        top: calc(21rem + 60px);
        position: absolute;
        padding-left: 60px;
        height: 60px;
        background-position: center;
        width: 0px;
        transform: none;
        overflow: hidden;
        text-indent: -1000%;
        background-size: 50px;
    }
}
/*768*/
@media (min-width: 768) and (max-width: 1023px){
    .stickyphone{ top: 20%; }
}
/*1024*/
@media (min-width: 1024) and (max-width: 1279px){
    .stickyphone{
        background-size: 30px;
        line-height: 60px;
        width: 170px;
        padding: 0 0 0 60px;
        text-align: left;
        font-size: 17px;
        transform: translateX(170px);
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }
    .stickyphone.tel{ transform: translateX(210px); background-size: 30px; }
    .stickyphone.devis{ transform: translateX(210px); background-size: 50px; top: calc(25% + 60px); }
}
/*1280*/
@media (min-width: 1280) and (max-width: 1479px){
    .stickyphone{
        background-size: 30px;
        line-height: 60px;
        width: 170px;
        padding: 0 0 0 60px;
        text-align: left;
        font-size: 17px;
        transform: translateX(170px);
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }
    .stickyphone.tel{ transform: translateX(210px); background-size: 30px; }
    .stickyphone.devis{ transform: translateX(210px); background-size: 50px; top: calc(25% + 60px); }
}
/**/