@charset "utf-8";
/* CSS Document */


html {
  scroll-behavior: smooth;
}
a.anchor { position: absolute; margin-top: -8rem;}

html , body { font-size: 18px; margin: 0; padding: 0; font-family:'Source Sans 3', Arial, Helvetica, sans-serif; -webkit-text-size-adjust: 100%;text-size-adjust: 100%; color: #333; color: #000C;}

#content {  padding:11rem 0 0 0;  }
.small_header #content { padding:4rem 0 0 0; }



.swiper .swiper-slide { user-select: none; height: auto; box-sizing: border-box;}
.swiper.actualites .swiper-slide , .swiper.videos .swiper-slide { width: 30%; width: calc(33% - 2.5rem); max-width: 24rem; min-width: 240px;}



.swiper.diaporama { margin:2rem -0.5rem; overflow: visible; padding-bottom: 2rem; overflow: hidden; border-radius: 0.89rem; }
.swiper.diaporama .swiper-slide { margin:0; padding: 0 0.5rem; width: 100%; box-sizing: border-box; border-radius: 0.89rem;}
.swiper.diaporama  .picture { padding: 28% 0;  background: #37153f22 no-repeat center center; background-size: cover; border-radius: 0.89rem;}


.swiper.diaporama .swiper-button:before , .swiper.diaporama .swiper-button:after , .swiper.diaporama .swiper-button { font-size: 1.8rem !important; border-radius: 0.49rem !important; }
.swiper.diaporama .swiper-button:before { width: 1.4em; height: 2.4em; margin:-1.2em -0.7em; background: #f8f8f8; background: #f8f8f8CC; box-sizing: border-box; border: none;}
.swiper.diaporama .swiper-button { width: 1.4em; height: 2.4em; top: 50%; margin: -1.2em 0.5rem; border-radius: 0;  }

.swiper.diaporama .swiper-button-next.swiper-button-disabled, .swiper.diaporama  .swiper-button-prev.swiper-button-disabled { opacity: 0.2;}

.swiper.diaporama .swiper-button:after { position: relative;}

.swiper.diaporama .swiper-button-next,  .swiper.diaporama .swiper-rtl .swiper-button-prev { right: 0.5rem;}
.swiper.diaporama .swiper-button-prev,  .swiper.diaporama .swiper-rtl .swiper-button-right { left: 0.5rem;}


.swiper.diaporama .swiper-pagination { bottom:0 !important}


#article p.picture { margin: 3rem auto; overflow: hidden;  max-height: 600px; background: #37153f22 no-repeat center center; background-size: cover; border-radius: 0.89rem;}
#article p.picture img { display: block; width: auto; height: auto; max-width: 100%; margin: auto; pointer-events: none; opacity: 0; }

#article p img , #article figure img {  width: auto; height: auto; max-width: 100%;border-radius: 0.89rem;   }
#article figure { margin: 1rem auto;}


.diaporama  .video_content { padding: 0; height: 100%; position: absolute; width: 100%; top: 0; left: 0; margin: 0;  }



.chapo { margin: -1.5rem 0 2.5rem 0; font-size: 115%; font-weight: 450; opacity: 1; color: #000; max-width: 48em; line-height: 120%;}
.chapo + .chapo { margin-top: -1.5rem;}
.chapo.al-c {  margin-left: auto; margin-right: auto;}


.subMenu {  margin: 2.5rem 0; }




body { margin:0 0 0 0; padding: 0; font-weight: 400; background: #F8F6F4;  color: #020406CC; overflow-wrap: break-word; }

footer.footer + footer.footer {  background: #7D953A; font-size: 80%;}

footer.footer p.logos { display: flex; column-gap: 3rem; margin: 0 auto;  max-width: 680px; margin-top: -1rem; margin-bottom: 2rem;}
footer.footer p.logos span { display: block; width: 33.33%; margin: auto; max-width: 13rem;}
footer.footer p.logos span a {  display: block; padding: 16% 0; background: #FFFB;  mask: no-repeat center center; mask-size: contain; transition: background-color 0.2s;} 
footer.footer p.logos span a.lesentreprisesdupaysage { mask-image: url(../images/logo-unep.svg);}
footer.footer p.logos span a.acces-sap { mask-image: url(../images/logo-acces-sap.svg);}
footer.footer p.logos span a.qualipaysage { mask-image: url(../images/logo-qualipaysage.svg);}



footer.footer .columns { display: flex; width: 100%; column-gap: 2rem;}
footer.footer .columns .column { width: 23%;  margin: 0 auto; max-width: 12rem;}
footer.footer .columns .column:first-child { max-width: 16rem; width: 31%;}
footer.footer p.tel { margin: 2rem 0;}
footer.footer p.tel a { background: #FFFC no-repeat 0.2em 0.2em url(../images/phone-call.svg); background-size: 2em; text-decoration: none; text-align: center; display: block; white-space: nowrap; margin: 0 auto; font-size: 1.2rem; font-weight: 800; padding: 0.7em 0.4em 0.7em 2.1em; line-height: 1em;  border-radius: 2rem; color: #8DA54A; margin: 0 auto; max-width: 8em; }

footer.footer .main-logo { padding: 21% 0; margin-top: 0.9rem;  background: #FFF; mask: no-repeat center center url(../images/logo.svg); mask-size: contain; border-radius: 0.82rem;}


section, footer { position: relative; padding: 1px 0;}

section.green{ background: #8DA54A; color: #FFF;}
section.brown { background: #72645E  repeat center center url(../images/white-leather.png) fixed; color: #FFF; }
section.green .filet:before , section.brown .filet:before { background: #FFF; background: #FFFA;}

section.green-light { background: #e9eed9; }
section.white { background: #FFF;}

.liste-services h3 { display: inline-block;}

h1, h2, h3, h4, h5, h6, p, ul { background-color: #F8F6F4CC; box-shadow: 0 0 0 0.4rem #F8F6F4CC; backdrop-filter: blur(3px); border-radius: 0.2rem;}

section.green h1, section.green h2, section.green h3, section.green h4, section.green h5, section.green h6, section.green p, section.green  ul { background-color: #8DA54ACC; box-shadow: 0 0 0 0.3rem #8DA54CCA;}

section.white h1, section.white h2, section.white h3, section.white h4, section.white h5, section.white h6, section.white p, section.white  ul { background-color: #FFFFFFCC; box-shadow: 0 0 0 0.3rem #FFFFFFCC;}
section.green-light h1, section.green-light h2, section.green-light h3, section.green-light h4, section.green-light h5, section.green-light h6, section.green-light p, section.green-light  ul { background-color: #e9eed9CC; box-shadow: 0 0 0 0.3rem #e9eed9CC;}



.wrap .wrap h1, .wrap .wrap h2, .wrap .wrap h3, .wrap .wrap h4, .wrap .wrap h5, .wrap .wrap h6, .wrap .wrap p, .wrap .wrap  ul , 
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6, footer p, footer  ul , 
#header h1, #header h2, #header h3, #header h4, #header h5, #header h6, #header p, #header  ul,
section.brown h1, section.brown h2, section.brown h3, section.brown h4, section.brown h5, section.brown h6, section.brown p, section.brown  ul ,
.overcontent  h1, .overcontent  h2, .overcontent  h3, .overcontent  h4, .overcontent  h5, .overcontent  h6, .overcontent  p, .overcontent   ul 
{ background: none; box-shadow: none;  backdrop-filter: none;}


footer.footer a {  color: #FFF; text-decoration: none;}

footer.footer { background: #8DA54A; color: #FFF; font-size: 90%; font-weight: 350;}
footer.footer h3 { margin: 1rem 0 -0.75rem 0; font-size: 110%; font-weight: 600; color: #FFF;}
footer.footer p , footer.footer ul { margin: 1rem 0;  line-height: 130%; }
footer.footer ul li { margin: 0; padding: 0;}
footer.footer ul li:before { content: ""; display: none;}

footer.footer p.socials { font-size: 0; margin: 1.5rem -0.5rem;}
footer.footer p.socials a { display: inline-block; transition: background-color 0.2s; width: 2.8rem; height: 2.8rem; background: #FFFB no-repeat center center; background-size: 1.5rem; overflow: hidden; text-indent: -5000px; border-radius: 100rem; margin: 0.25rem;}
footer.footer p.socials a.facebook { background-image: url(../images/socials/facebook.svg);}
footer.footer p.socials a.instagram { background-image: url(../images/socials/instagram.svg);}
footer.footer p.socials a.linkedin { background-image: url(../images/socials/linkedin.svg);}

strong { font-weight: 600;}
strong.big { font-size: 115%;}

body.popuped { overflow: hidden;}

a { cursor: pointer; color: #7D953A; text-underline-offset: 0.1em; transition: text-underline-offset 0.1s;}
a:hover { text-underline-offset: 0.2em;}

.flex-labels { display: flex; gap: 0.3rem; margin-bottom: 1rem; justify-content: center;}
.flex-labels label { padding: 0 0 0 2.5em !important; background: none !important; border: none !important;}


.al-c { text-align: center;}

#header { position: fixed; top: 0; left: 0; width: 100%; box-sizing: border-box;   transition: background-color 0.25s, box-shadow 0.25s; z-index: 100; user-select: none; }
#header .wrap { margin-top: 0; margin-bottom: 0;}
#header .center { position: relative; margin: 0 auto;  height: 11rem;  transition: height 0.25s; }
#header a#logo { font-size:1rem; top: 50%; left: 50%; margin: -4em -7.5em; width: 15em; height: 2.5em; z-index: 5;  height: 8em; background: #FFF; mask: no-repeat bottom center url(../images/logo.svg); mask-size: 100% auto; position: absolute; transition: height 0.25s, margin-top 0.25s, background-color 0.25s;}


#header #menu a { text-decoration: underline 2px; text-underline-offset: 0.4em; transition: text-decoration-color 0.3s, color 0.25s;}
#header #menu a:not(.actif):not(:hover) { text-decoration-color: transparent}


#header.minimize a#logo , .small_header #header a#logo {  height: 2.6em; margin-top: -1.3em;  background-color: #7D953A; }
#header.minimize  , .small_header #header  { background: #FFF; box-shadow:0 0 1.2rem #0001;}




#header.minimize .center , .small_header #header .center { height: 5.2rem;}
#header.minimize #menu a  , .small_header #header a { color: #222; }
#header #menu .buttons a { background: #DDD; background: #DDD8; color: #222;  text-decoration: none;}
#header #menu .buttons a:hover { color: #FFF; }
#header #menu .buttons a:before { background-color: #EEE; background-color: #7D953A;}


#header.minimize #menu  , .small_header #header #menu { bottom: 1.3rem;}

p , ul, ol { margin: 1em 0; line-height: 150%;}

section.small-margin { padding: 1px 0;}
section.small-margin .center { margin: 0 auto;}

.center { margin: 5rem auto; max-width: 1280px; position: relative;}
.center.large {  max-width: 1800px; }
.center.small {  max-width: 900px; }

.error_form { font-weight: 600; color: #E02; font-size:0.8rem; margin: 0.5em 0 0.2em 0;}
.error_form.head { font-size: 1rem; }
h2 + .error_form.head {  margin: -1.5rem 0 1rem 0;}
h3 + .error_form.head {  margin: -0.5rem 0 0.8remrem 0;}


.wrap { margin: 4rem;}
.wrap .wrap { margin: 2rem;}

h1  , .h1 { font-size: 280%; margin: 1em 0 1em 0; line-height: 105%; font-weight: 750;}
h2  , .h2 { font-size: 220%; margin: 1em 0 1em 0; line-height: 110%; font-weight: 750;}
h3  , .h3 { font-size: 160%; margin: 1em 0 0.6em 0; line-height: 115%; font-weight: 750;}
h4  , .h4 { font-size: 130%; margin: 1em 0 0.6em 0; line-height: 120%; font-weight: 750;}

.filet { padding-top: 0.6em; position: relative; margin: 2em 0 3.5rem;}
.filet:before { content: ""; position: absolute; left: 0; top: 0; height: 0.16em; width: 1.6em; background: #7D953A; border-radius: 0.82em;}
.filet.al-c:before , .al-c .filet:before { left: 50%; margin-left: -0.8em;}

.filet.h3 { margin-bottom: 1.2em; }


.buttons {  margin: 1.5rem -0.2rem; user-select: none;}

.buttons a { text-decoration: none; transition: color 0.2s, border-color 0.2s; color: #FFFD; box-sizing: border-box; text-align: center;  white-space: nowrap; font-weight: 600; display: inline-block; border-radius: 2em; padding:0.2em 0.8em; line-height: 1.8em; position: relative; border: 2px solid transparent; background: #7D953A; margin: 0.2em 0.1em; }





.buttons a:before { content: ""; pointer-events: none; border-radius: 2em; padding: 2px; margin: -2px; background: #3D5500; width: 1em; opacity: 0; height: 100%; position: absolute; top: 0; left: 0;  transition: opacity 0.25s, width 0.2s; }

.buttons a span { position: relative; display: block;  text-overflow: ellipsis; overflow: hidden; max-width: 240px; min-width: 6em; }

.buttons a.invert { background: #FFF; color: #4D650A;  }

.buttons a.invert:before { background: #FFF;}



.buttons a.border {  border-color: #7D953A;  color: #7D953A; background: #F8F6F4; text-shadow: none;  }

.buttons a.border:before { background-color: #7D953A; }

.overcontent  .buttons { margin-top: 2rem;}
.overcontent  .buttons a { border-color: #FFF; background: transparent; text-shadow: none; font-size: 1.15rem;}

.overcontent  .buttons a:before { background-color: #FFF;} 


.overcontent video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.5; object-fit: cover;}

.overcontent h1 { margin-bottom: 1rem;}
.overcontent { background: #0c1500; user-select: none;  min-height: 100vh; margin-top: -11rem; position: relative; z-index: 3; box-sizing: border-box; display: flex; font-size: 1.15rem; padding-top: 11.5rem; padding-bottom: 1.5rem; font-weight: 400; text-shadow: 0 0 0.4em #000A;}
.overcontent .center { margin: auto; max-width: 50em; text-align: center; color: #FFF; color: #FFFE; position: relative; z-index: 2;}


#menu { display: flex; position: absolute; width: 100%; bottom: 2.0rem; transition: bottom 0.25s;}

#menu ul { display: flex; margin:0; column-gap: 2rem; padding: 0; list-style: none; text-transform: uppercase; font-weight: 600; font-size: 0.9rem;}
#menu ul + ul { margin-left: auto;}
#menu ul li { margin: auto 0; padding: 0;}
#menu ul li:before { display: none; content: "";}
.appear h1 , .appear h2  , .appear h3 , .appear p { opacity: 0; animation: appear; animation-duration: 1.2s; animation-iteration-count: 1; animation-fill-mode: forwards;  animation-delay: 0.1s; }
.appear p  {  animation-delay: 0.2s; }
.appear p.buttons  {  animation-delay: 0.3s; }

#menu a { color: #EEE;color: #FFFE; font-weight: 650;}

ul { margin: 1em 0; padding: 0; list-style: none;}

ul li { position: relative; padding-left: 1em;}
ul li:before { content: "–"; position: absolute; margin-left: -1em; color: #7D953A; font-weight: 600;}

ul.has-margin li { margin: 1em 0;}


.flexbox { display: flex; column-gap: 1rem; }
.flexbox .column {    border-radius: 0.98rem; padding: 1px; margin: 0.5rem 0; }
.flexbox.quatuor .column { width: 33.33%;  }

.flexbox.six { flex-wrap: wrap; }
.flexbox.trio .column { width: 33.33%; background: #e9eed9;  background: #FFF;   }
.flexbox.six  .column { width: calc(33.33% - 1rem); }

.flexbox.invert .column {  background: #7D953A; color: #FFF; color: #FFFD;  }

.flexbox.trio .column h3 { color: #7D953A;}

.flexbox.invert .column h3 { color: #FFF; }
.flexbox p.picto { margin: 0;}
.flexbox p.picto img { height: 3.5rem; width: auto;}
.flexbox p.picto + h3 { margin-top: 0.3rem; }

.green .flexbox.logos img { filter: grayscale(1) brightness(2); opacity: 0.9;}

.flexbox.chiffres .column {border:4px solid  #e9eed9; }
.flexbox.chiffres  { font-size: 110%;}
.flexbox.chiffres strong { font-size: 280%; display: block; line-height: 100%; font-weight: 800; color: #7D953A; text-indent: -0.1em; margin-bottom: 0.5rem;}
.flexbox.chiffres strong span { position: absolute; padding-left: 0.15em; opacity: 0;}
.flexbox.chiffres p { margin: 0 auto; max-width: 10em; line-height: 120%;}
.slide-in { margin: 4rem auto; padding: 3rem 0; position: relative;  display: flex; min-height: 23rem; }

.slide-in .picture { margin: 0 2.5rem; background: #4D650A no-repeat center center; background-size: cover; padding: 0 0; border-radius:0.98rem; height: 100%; width: 60vw;  right: 38%; top: 0; position: absolute; pointer-events: none;  }

.to-appear { opacity: 0;}

.slide-in .picture.appear { animation-name: slide-appear-left; animation-duration: 0.8s; opacity: 0; animation-fill-mode: forwards;  animation-delay: 0;}
.slide-in.invert .picture.appear { animation-name: slide-appear-right;}

.slide-in .content { background: #FFF;  position: relative; z-index: 2; padding: 1px;  border-radius: 0.98rem; min-height: 10rem; width: 55%; max-width: 710px;  box-sizing: border-box; margin: auto auto auto 45%;  }
.slide-in.invert .picture { left: 38%; right: auto; }
.slide-in.invert .content {  margin: auto 45% auto auto; }

blockquote.big { font-size: 1.5rem; padding-top: 1vw; padding-bottom: 1vw; border-radius: 0.98rem;}
blockquote.big p { line-height: 1.3em;}
blockquote { font-weight: 450; position: relative; margin: 3em auto 0 auto; padding-left: 3em; padding-right: 1em; max-width: 920px; }
blockquote:before { content: "“"; position: absolute; font-size: 400%; margin-top: -0.3em; left: 0.22em;  color: #7D953A;}
blockquote p { margin: 0.2em 0;}
blockquote cite { font-size: 75%; font-weight: 400; opacity: 0.8; line-height: 130%; margin-top: 0.6em; display: block;}

.terre { background: no-repeat center center; background-size: contain; width: 40vw; height: 100%; max-height: 620px; max-width: 280px; pointer-events: none; position: absolute; mix-blend-mode: multiply;}
.terre.right { right: 0; background-image: url(../images/terre-right.png);}
.terre.left { left: 0; background-image: url(../images/terre-left.png);}

.terre.left.top { background-position: left top;}
.terre.right.top { background-position: right top;}
.terre.left.bottom { background-position: left bottom;}
.terre.right.bottom { background-position: right bottom;}

.terre.top { top: 8vh; top: calc(7vh + 8rem);}
.terre.bottom { bottom: 8vh; bottom: calc(7vh + 8rem);}




.articles.swiper { padding-bottom: 60px; margin-bottom: 1.5rem;}
.articles { margin: 1.5rem -0.5rem;}

.articles .article .picture { background: #7D953A66 no-repeat center center; height: 30vh; min-height: 20rem;  max-height: 25rem;   border-radius: 0.98rem 0.98rem 1rem 0.98rem; overflow: hidden; position: relative; border-radius: 0.89rem; }
.articles .article .picture div { position: absolute; left: 0; top: 0; background: no-repeat center center; background-size: cover; width: 100%; height:100%; transition: padding 0.25s, margin 0.25s;}

.articles .article { position: relative;   margin: 0.5rem; }
.articles .article .preview { position: absolute; background: #FFF; z-index: 5;  bottom: 0; right: 0; border-radius: 0.84rem 0 0.84rem 0; width: 55%; max-width: 440px; min-width: 200px;}
.articles .article .preview .wrap {margin: 1.5rem;}



.articles.swiper .article { width: 44%; width: calc(50% - 2.5rem); }

.articles.swiper .article:nth-child(2n) .picture { border-radius: 0.98rem 2rem 0.98rem 0.98rem;}
.articles.swiper .article:nth-child(2n) .preview { bottom:auto; left: auto;  top: 0; right: 0; border-radius: 0 0.84rem 0 0.84rem}


.articles .article h3 { font-size: 125%; font-weight: 700;}
.articles .article a { font-weight: 500; text-decoration-color: #7D953A00; transition: text-decoration-color 0.2s, text-underline-offset 0.2s; text-decoration:#7D953A00 underline 0.1em; text-underline-offset: 0.1em; }

a.overall_link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0.98rem; z-index: 15;}


#block-contact .wrap {   margin: 5rem;  display: flex;  align-items: end; position: relative; width: calc(100% - 10rem);}
#block-contact { position: relative;  border-radius: 0.98rem; padding: 1px; }

#block-contact .background { top: 0; left: 0; display: flex; align-items: end; width: 100%; border-radius: 0.98rem;  background: #4D650A; background: #071000; padding: 1px; padding-top: 8%; padding-top: calc(4rem + 6%); min-height: 20rem;  overflow: hidden; position: relative; }
#block-contact h2 { text-shadow: 0 0 1em #071000AA;}
#block-contact h2, #block-contact p { position: relative; z-index: 3; margin: 0 0; color: #FFF;}
#block-contact p { margin-left: auto; margin-right: 0; font-size: 1.2rem;}
#block-contact video { position: absolute; top: -2%; left: -2%; width: 104%; height: 104%; opacity: 0.5; object-fit: cover; border-radius: 0.98rem;}

#block-contact.sap { justify-content: center; margin-top: -2.5rem;}
#block-contact.sap .background {  padding: 1rem 0;  justify-content: center;  min-height: 26rem; align-items: center; }
#block-contact.sap .wrap {  flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 3.5rem 2rem; width: auto;}

#block-contact.sap h2, #block-contact.sap p { width: 100%; font-size: 1rem; margin: 0 auto !important; text-align: center;}
#block-contact.sap h2 { font-size: 1.25rem; line-height: 125%; white-space: wrap; padding-bottom: 2rem; padding-top: 6.5rem; background: url(../images/logo-acces-sap-white.svg) no-repeat center 0.5rem; background-size: auto 4rem; margin: auto; max-width: 740px; font-weight: 700;}




#toggleMenu { position: absolute; cursor: pointer; right: -0.2rem; top: 50%; margin-top: -1.4rem; box-sizing: border-box;  box-sizing: border-box;  border-right: none;  height: 2.8rem; width: 2.8rem; border-radius: 6px; z-index: 20; background: #A8A6A429; display: none;}

#toggleMenu span { position: absolute; width: 20px; height: 2px; background: #FFF; left: 50%; margin: -5px -10px; top: 50%; transition: all 0.2s;}
#toggleMenu span + span { top: auto; bottom:50%;  }

body.menu-open #toggleMenu span , .minimize #toggleMenu span  , .small_header #toggleMenu span  { background: #111 }

body.menu-open #toggleMenu {   }

body.menu-open { overflow: hidden;}


body.menu-open #toggleMenu span:nth-child(1) { transform: rotate(45deg); top: 50%;  margin: -1px -10px; }
body.menu-open #toggleMenu span:nth-child(2) { transform: rotate(-45deg); bottom: 50%;  margin: -1px -10px; }




.liste-services { padding-left: 17rem; margin: 2.5rem 0; position: relative;}
.liste-services div.menu  {  position: absolute; top: 0; left: 0; height: 100%; width: 15rem;}
.liste-services div.menu  menu  { position: sticky; top: 13rem; padding: 0; margin:3rem 0 -0.5rem 0;}
.liste-services div.menu  menu p { margin:0.75rem 0; font-size: 90%; line-height: 120%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}


.liste-services .picture { height: 16rem; background: #82746E no-repeat center center; background-size: cover; width:45%; width: calc(50% - 2rem); position: absolute; right: 0; margin: -1rem 0 1rem 0; border-radius: 0.82rem;}

.liste-services article .anchor { margin-top: -12rem;}

.liste-services article  { min-height: 20rem; position: relative; padding: 1px 0; margin: 3rem 0; }
.liste-services article  { border-bottom: 1px solid #7D953A66; padding-bottom: 3rem; border-top: 1px solid #7D953A66; padding-top: 3rem;  }
.liste-services article + article  { border-top: none; padding-top: 1px; }



.liste-services article p { margin-right: 55%; margin-right: calc(50% + 2rem); max-width: 29em;}
.liste-services article p:last-child { margin-bottom: 0;}
.liste-services article h3 { padding-left: 2em; position: relative;  color: #82746E; color: #7D953A; margin-bottom: 2rem; margin-top: 0; }
.liste-services article h3 svg { position: absolute; left: 0; top: -0.25em; height: 1.5em; max-width: 1.8em;}
.liste-services article h3 svg path , .liste-services article h3 svg circle { fill: #7D953A;   stroke: #7D953A;  stroke-width: 1px;}



#timeline { position: relative; margin: 3rem auto; max-width: 880px;}
#timeline article { position: relative; margin: 0; padding: 1px 0;  padding-left: 9rem;  }
#timeline h3 span { position: absolute; z-index: 3; margin-top: -0.5rem; background: #72645E  repeat center center url(../images/white-leather.png) fixed; font-size: 80%; left: 5rem; width: 2.6rem; height: 2.6rem;  box-sizing: border-box; display: flex; align-items: center; border-radius: 100%; justify-content: center; text-align: center; border: 4px solid #FFF;}


#timeline h3 svg { position: absolute; z-index: 3;  margin-top: -1rem; left: 0; width: 3.5rem; height: 3.5rem; opacity: 0.9; }
#timeline h3 svg.big {   margin-top: -1.2rem; left: -0.2rem; width: 3.8rem; height: 3.8rem;  }



#timeline h3 svg path , #timeline h3 svg circle {   fill: #FFF; }


#timeline article:before { top: 2rem; content: ""; position: absolute; left: 6.3rem; margin-left: -2px; width: 4px; height: 100%; background: #FFF; }

#timeline article:last-child:before { display: none;}


.team .picture { background:#7D953A66 no-repeat 50% 40%; background-size: cover; padding: 22% 0; border-radius: 0.82rem; margin: 1rem 0;}
.team { margin: auto; max-width: 620px;}
.team .gallery .picture { margin: 0.5rem;}

.team .gallery { margin: 1rem -0.5rem; display: flex; flex-wrap: wrap;}
.team .gallery .picture { height: 38vw; padding: 0;}
.team .gallery .column { width: 33.33%;}
.team .gallery .column:nth-child(2), .team .gallery .column:nth-child(3) , .team .gallery .column:nth-child(6) { width: 60%;}
.team .gallery .column:nth-child(1), .team .gallery .column:nth-child(4), .team .gallery .column:nth-child(5)  { width: 40%;}

p.legende { opacity: 0.7; line-height: 130%; font-size: 80%; font-style: italic; margin: -0.2rem 0 1.5rem 0;}

.team .picture.square { height: 0; padding: 40% 0;}
div.has-col { margin: auto; max-width:600px;}
div.has-col .picture { background:#7D953A66 no-repeat 50% 40%; background-size: cover; padding: 26% 0; border-radius: 0.82rem; margin:1rem 0 1.5rem 0;  }

div.has-col .picture.big { padding: 42% 0; background-position: center 10%;}

sup { line-height: 0; font-size: 60%;}

div.has-col blockquote { margin: 1.5rem 0;}

.has-col + .has-col { margin-top: 4rem;}

blockquote { font-size: 120%;}
blockquote p { line-height: 125%;}



 .field { font-size: 100%; font-family:'Source Sans 3', Arial, Helvetica, sans-serif; font-weight: 350; box-sizing: border-box; padding: 0.8rem 0.7rem; background: #FFF; border: 2px solid #F5F4FF; border-color: #12111C15; border-radius: 0.3rem; }
 .has-menu .content .field { min-width: 33%; min-width: calc(33% - 0.75rem); }
 
 .flex-form { display: flex; margin: 0.5rem -0.25rem; }
 .flex-form p , .flex-form .form-group { margin:0;}
 
 .flex-form .wrapper { margin:auto 0 0 0; width: 50%; padding: 0 0.25rem;}
 

 form.devis { margin: 2rem auto; max-width: 720px;}
 
 form .wrapper { margin: 1rem 0;}

textarea.form-input { height: 15em; resize: none;}

#form-devis textarea.form-input { height: 9em;}

.form-input , input , .champ { font-family:'Source Sans 3', Arial, Helvetica, sans-serif; font-weight: 400; font-size:100%;  border-radius: 0.66rem; background: #FFF; }

.form-group.error .form-input , .wrapper.error .form-group.file, .wrapper.error .form-input , p.checkBox.error , .form-group.file.error , .champ.error , .champ.error:hover  , .champ.error:focus { border-color:#F83131; background-color:rgba(255,0,0,0.01); }
.champ.error , .champ.error:hover  , .champ.error:focus { color:#ff2b37;  }

.form-group.file {  padding:0.9em; background:#FFF; border-radius: 0.66rem;  border:1px solid #AAA;
	border-color:rgba(0,0,0,0.2); overflow: hidden;}
.form-group.file p { margin:0;  pointer-events: none;}
.form-group.file hr { margin:0.8em -0.9em 0.9em -0.9em; border: none; border-top: 1px solid #E4E4E4;}

.form-group.file input { border-radius: 0; max-width: 100%; font-size: 90%;}
.form-group {
 position: relative;
 margin:0 0;
}


form .columns .form-group {
	margin:0 0 0 0;	
}

.form-label {
 position: absolute;
 left: .9em;
 top: 1.2em;
 line-height:90%;
 color: #999;
 z-index: 10;
 font-weight:400;
 transition:top 0.1s, font-size 0.1s, color 0.1s, left 0.1s; transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);
 cursor:text;
 pointer-events: none;
 user-select: none;
}



.focused .form-label , .readonly .form-label {
 font-size: 72%;
 top:0.9em;
 left: 1.3em;
 font-weight:400;
 pointer-events: none;
}

.form-input , .champ {
 position: relative;
 padding: 1.3em .9em 0.5em .9em;
 width: 100%;
 outline: 0;
 border: 0;
 border:1px solid #AAA;
 border-color:rgba(0,0,0,0.1);
 transition: ball .2s ease-out; transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);
 font-size:100%; line-height:100%;
 box-sizing:border-box;
 pointer-events: fill;
}



input.selector { display: none;}
input.selector + label { display: block;  user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; margin: 0.5rem 0; line-height: 1.2em; transition: border-color 0.2s;  border:1px solid #AAA; background: #FFF; border-color:rgba(0,0,0,0.1);  padding: 1em .9em 1em 2.5em; padding-left: calc(1.8em + 16px); position: relative; border-radius: 0.66rem; }


input.selector + label.error , input.selector + label.error:hover {
 border-color:#F83131;color:#ff2b37;  background-color:rgba(255,0,0,0.01);
}
input.selector + label.error:before {  border-color:#F83131 !important; }



input.selector.radio + label:before { content: ""; transition: all 0.2s;  position: absolute; width: 16px; height: 16px; position: absolute; border: 1px solid #DDD; box-sizing: border-box; border-radius: 100%; top: 50%; margin: -8px 0; left: 1em;}

input.selector:checked + label { font-weight: 700;}

input.selector.radio + label:after { content: ""; transition: all 0.2s;  position: absolute; width: 12px; height: 12px; position: absolute; left: 1em; border-radius: 100%; top: 50%; background: #FFF; margin: -6px 2px; }
input.selector.radio:checked  + label:after , input.selector.radio:checked  + label:hover:after { background-color: #7D953A; }
input.selector.radio:checked  + label:before , input.selector.checkbox:checked  + label:before { border-color: #7D953A; }



input.selector.checkbox + label:before { content: ""; transition: all 0.2s;  position: absolute; width: 16px; height: 16px; position: absolute; border: 1px solid #DDD; box-sizing: border-box; border-radius: 3px; top: 50%; margin: -8px 0; left: 1em;}

input.selector.checkbox + label:after { content: ""; background: no-repeat center center url(../images/check-mark.svg); background-size: contain; transition: all 0.2s;  position: absolute; width: 22px; height: 22px; position: absolute;  box-sizing: border-box; border-radius: 3px; top: 50%; margin: -11px -3px; left: 1em; filter: grayscale(1); opacity: 0;}

input.selector.checkbox:checked + label:after , input.selector.checkbox:checked + label:hover:after { opacity: 1; filter: none; }

.colored { color: #7D953A;}

#form-devis h3.colored { margin-top: 2em;}
#form-devis .filet + h3.colored { margin-top: -0.8em; }



.flex-cards { display: flex; flex-wrap: wrap; margin: 1.5rem -0.75rem; }
.flex-cards .article { width: 40%; width: calc(50% - 1.5rem); margin:0.75rem }


p.folio { margin: 1rem -3px; text-align: center; user-select: none;}
p.folio a { display: inline-block; margin: 3px; padding: 5px; min-width: 20px; text-decoration: none; font-weight: 500; text-align: center; line-height: 20px;height: 20px; overflow: hidden; border: 1px solid #7D953A; position: relative;}
p.folio a span { font-size: 160%;}
p.folio a.actif { pointer-events: none; cursor: default; background: #7D953A; color: #FFF;}
p.folio a.disabled { pointer-events: none; opacity: 0.25; }



form.loading { opacity: 0.7; pointer-events: none; transition: opacity 0.2s;}
form.loading * { pointer-events: none;}
form.loading a.submitter { color: #FFF0; background-image: url(../images/loader.gif); background-repeat: no-repeat; background-size: 2.2rem; background-position: center center;}

@media (hover: hover) and (pointer: fine) {  

.liste-services div.menu  menu p a:hover { color: #000;}
.buttons a:hover { color: #FFF;}
.buttons a:hover:before { width: 100%; opacity: 1;}
.buttons a.invert:hover { color: #111;  }
.buttons a.border:hover { color: #FFF;  }
.overcontent  .buttons a:hover { color: #222;}
  
.articles .article:hover .picture div { margin: -2.5rem; padding: 2.5rem;}
.articles .article:hover a {  text-decoration-color: #7D953A;  text-underline-offset: 0.3em;}

footer.footer a:hover { text-decoration: underline;}
footer.footer p.socials a:hover { background-color: #FFF;}

footer.footer p.logos span a:hover {  background-color: #FFF; }


input.selector + label:hover {  border-color:rgba(0,0,0,0.25); }
input.selector.radio + label:hover:after {  background-color:rgba(0,0,0,0.15); }
input.selector.checkbox + label:hover:after { opacity: 0.4; }
}





@media (min-width: 1000px) {  
  .team .picture {  margin: 1rem 0 2rem 0;}
.team { padding-left: 22rem; position: relative; margin:-0.5rem auto 2rem auto; box-sizing: border-box; max-width: 1500px;}




.team .picture.square { padding: 0 0; height: 23.5rem;}
.team .block-left { width: 20rem; left: 0; top: 0; position: absolute;  }

.team .gallery .column:nth-child(2), .team .gallery .column:nth-child(3) , .team .gallery .column:nth-child(6) { width: calc(100% - 22rem);}
.team .gallery .column:nth-child(1), .team .gallery .column:nth-child(4), .team .gallery .column:nth-child(7), .team .gallery .column:nth-child(5)  { width: 22rem;}
.team .gallery .picture { height: 20rem; }

.team .picture + p.legende  { margin-top: -1.2rem;}

.team h2 { margin-top: 0;}
.team h2 , .team .chapo { text-align: left;  }
.team .chapo { margin-top:0.5rem;  }
.team h2.filet:before { margin-left: 0; left: 0;}

.team .gallery { margin-left: -23rem; margin-right: -1rem;}

.team .gallery .picture  { margin: 1rem;}


}




div.has-col p.chapo svg { display: none;}

@media (min-width: 1000px) and (min-height: 640px) {  

.subMenu { left: 0; width: 100%; height: 2.8rem; line-height: 2.8rem;  }
.subMenu p.buttons { position: absolute; left: 0; width: 100%; margin: 0; background: transparent;  }


.subMenu.fixed p.buttons { position: fixed; top: 5.2rem; z-index: 50; padding: 1rem 0; background: #FFF;  box-shadow:0 0 1.2rem #0001; transition: background-color 0.2s, box-shadow 0.2s; }
.subMenu.fixed p.buttons a { background: #FFF;  }


div.has-col { padding-left: 40%; position: relative; margin: auto;  box-sizing: border-box; max-width: 1300px;}
div.has-col .column { height: 100%; top: 0; left: 0; position: absolute; width: 40%;box-sizing: border-box; padding-right: 2rem;}
div.has-col .column .content { position: sticky; top: 12rem; }
div.has-col .picture {  padding: 35% 0; margin: 0 0; }
div.has-col .picture.big { padding:70% 0;}
div.has-col .picture.soft-parallaxe {  top: 14rem;}


div.has-col.right { padding-right: 40%; padding-left: 0;}
div.has-col.right .column {  left: auto; right: 0;  padding-right: 0; padding-left: 2rem;}
div.has-col p.chapo { text-align: right; font-size: 120%; color: #7D953A;}
div.has-col p.chapo svg { display: block; margin: 0.5rem 0 1rem auto; height: 3.5em; width: 3.5em; }

}



.flexbox + .flexbox { margin-top: 1rem;}





@media (min-width: 1820px) {  
  .slide-in .picture , .slide-in.invert .picture { max-width: 960px;  }
} 


@keyframes slide-appear-left {
  0% {
    opacity: 0;
    transform: translateX(-5rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-appear-right {
  0% {
    opacity: 0;
    transform: translateX(5rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}


@keyframes appear {
    0% {
      opacity: 0;
      transform: translateY(3rem);
    }
    50% {
        transform: translateY(0);
      }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }


  @media (max-width: 1600px) {  
    html , body { font-size: 17px; }
  }

  @media (max-width: 1300px) {  
    html , body { font-size: 16px; }
    blockquote.big {  background: #F8F6F466;}
    .wrap { margin: 3rem;}
    #menu ul {  column-gap: 1.5rem; }



    
    .articles.swiper { margin:2rem -3rem;}
    .articles.swiper .swiper-slide:first-child { margin-left: 3rem;}
    .articles.swiper .swiper-slide:last-child { margin-right: 3.5rem;}
    .articles.swiper .article {  width: calc(50% - 3.5rem); }


  }

  @media (max-width: 1100px) {  
   
    .wrap { margin: 2rem;}

    .articles.swiper { margin:2rem -2rem;}
    .articles.swiper .swiper-slide:first-child { margin-left: 2rem;}
    .articles.swiper .swiper-slide:last-child { margin-right: 2.5rem;}



    #menu ul {  column-gap: 1rem; }
  }
  

  @media (max-width: 1060px) {      
    body.menu-open { overflow: hidden;}
    html , body { font-size: 15px; }
    #toggleMenu { display: block; }


    #menu:before { position: fixed; top: 0; left: 0; width: 100%; height: 5.2rem; content: ""; box-shadow:0 0 1.2rem #0001;  pointer-events: none;background: #FFF;}
    #menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%;   display: none;  box-sizing: border-box; background: #F8F6F4; padding-top: 5.8rem; pointer-events: none;    }
    #menu ul , #menu ul + ul { display: block; margin: 0 2rem; width: auto;}
    #menu ul li { text-align: center; margin: 0 auto; width: auto; border-top: 1px solid #0001;  max-width: 440px; }
    #menu ul:first-child li:first-child { border-top: none;}
    #menu ul li.buttons { border-top: none; margin-top: 0.2em; }
    #menu ul li.buttons a {  padding: 0.8em;  }
    #menu ul li a { display: block; text-align: center; margin: 0; color: #000; padding: 1em 0; }
    #menu ul li a span { max-width: 100%;}
    #menu ul li.buttons a { margin: 0 -0.4rem;}
    #menu a { font-size: 125%;}


    .menu-open  #menu { display: block; pointer-events: fill; animation: menu-appear 0.25s; }

    .menu-open #header a#logo {  height: 2.6em; margin-top: -1.3em;  background-color: #7D953A; }
    .menu-open #header  { background: #FFF; box-shadow:0 0 1.2rem #0001; }
    .menu-open #header .center { height: 5.2rem;}

  }



  @keyframes menu-appear {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }


  @media (max-height: 450px) and (max-width: 1060px) {      
   
    #menu a { font-size: 100%;}
    #menu ul li a ,  #menu ul li.buttons a  { padding:0.1rem 0; line-height: 10vh;}
    .menu-open #header .center { height:  5.2rem;}




    
  }



  @media (max-width: 940px) {  
    .articles.swiper .article { width: 75%; width: calc(100% - 4rem); max-width: 480px; }
    
#block-contact .wrap {   margin: 4rem;  display: block;}

.wrap, .wrap .wrap { margin: 1.5rem;}

#block-contact h2 { margin-bottom:2rem}

.filet { margin-top: 3rem; margin-bottom: 2rem;}
.center { margin-top: 3rem; margin-bottom: 3rem;}

p.chapo { margin-top: -0.5rem;}

.liste-services article p { width: auto; max-width: 100%; margin-right: 0; }
.liste-services .picture { position: relative; width: auto; transform: none !important; margin: 1.5rem 0; height: auto; padding: 28% 0;}



.flex-cards { display: block;  margin: 1.5rem auto; max-width: 640px; }
.flex-cards .article { width: auto; margin:1rem auto }





  }


@media (max-width: 760px) {  
  html , body { font-size: 15px; }



  h1  , .h1 { font-size: 220%; }
  h2  , .h2 { font-size: 200%; }
  h3  , .h3 { font-size: 160%; }
  h4  , .h4 { font-size: 135%; }
  h5  , .h5 { font-size: 110%; }



  
  .wrap, .wrap .wrap { margin: 1.5rem;}
  .articles.swiper { margin:2rem -1.5rem;}
.articles.swiper .swiper-slide:first-child { margin-left: 1.5rem;}
.articles.swiper .swiper-slide:last-child { margin-right: 2rem;}
   .overcontent { min-height: calc(100vh - 115px);  }


   .center  { max-width: 520px;}
   .overcontent .center { max-width: 640px;}
   #header .center { max-width: 900px;}



   .flexbox.trio { display: block; column-gap: 0; }
.flexbox.trio .column { width: auto; margin:1rem auto;  }

.flexbox.quatuor { flex-wrap: wrap;}
.flexbox.quatuor .column { width: 40%; box-sizing: border-box; width: calc(50% - 0.5rem); margin:0.5rem auto;   }



.slide-in .content { width: 65%;  margin: auto auto auto 35%;  }
.slide-in.invert .content {  margin: auto 35% auto auto; }
   

#block-contact .wrap {   margin: 3rem; }
#block-contact h2 { font-size: 2.5rem; white-space: nowrap;}



footer.footer .columns .column:first-child { width: 100%;}


footer.footer { font-size: 100%;}
footer.footer + footer.footer {  background: #7D953A; font-size: 90%;}

footer.footer p.logos { display: block; column-gap: 0; margin: 0 auto; }

footer.footer p.logos span { display: block; width: 100%; margin:1rem auto; max-width: 10rem;}



footer.footer .columns { display: block; width: 100%; column-gap: 0;}
footer.footer .columns .column { width: auto; max-width: 100%; text-align: center;}

footer.footer .columns .column h3:first-child { margin-top: 2rem;}

footer.footer .columns .column ul a , footer.footer h3 a , footer.footer p.infos a { display: block; background: #FFFFFF0F; border-radius: 0.4rem; padding: 0.6em 0; margin: 0.15em 0;}
footer.footer .columns .column .socials a { display: inline-block;}

footer.footer p.infos span { display: none;}
footer.footer p.infos a {  margin: 0.8rem 0 -0.5rem 0;}


.liste-services { padding-left: 0;}
.liste-services div.menu  { display: none;}


}



@media (max-width: 475px) {  

  .flexbox.quatuor:not(.always-duo) { display: block; column-gap: 0; }
  .flexbox.quatuor:not(.always-duo) .column { width: auto; margin:1rem auto;  }



  .center , .overcontent .center { max-width: 100%;}
  .slide-in { margin: 4rem auto; padding: 8rem 0 2rem 0; }
.slide-in .content { width: 100%;  margin: auto; background: #FFF;  }
.slide-in.invert .content {  margin: auto; }

.slide-in .picture { right: auto; left: -3rem; margin:-1rem 0; width: 80vw; }
.slide-in.invert .picture { left: auto; right: -3rem; }




#block-contact .wrap {   margin: 2rem; }
#block-contact h2 { font-size: 7.5vw; }


  #header a#logo { font-size:3.2vw; }
}

@media (display-mode: fullscreen) , (display-mode: standalone) {
  .overcontent { min-height: calc(100vh);  }
}