@font-face {
    font-family: 'Adobe Clean';
    src: url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-BoldIt.eot');
    src: local('AdobeClean-BoldIt'),
        url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-BoldIt.eot?#iefix') format('embedded-opentype'),
        url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-BoldIt.woff2') format('woff2'),
        url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-BoldIt.woff') format('woff'),
        url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-BoldIt.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Adobe Clean';
    src: url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-It.eot');
    src: local('AdobeClean-It'),
        url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-It.eot?#iefix') format('embedded-opentype'),
        url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-It.woff2') format('woff2'),
        url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-It.woff') format('woff'),
        url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-It.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Adobe Clean';
    src: url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-Regular.eot');
    src: local('AdobeClean-Regular'),
        url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-Regular.eot?#iefix') format('embedded-opentype'),
        url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-Regular.woff2') format('woff2'),
        url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-Regular.woff') format('woff'),
        url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Adobe Clean';
    src: url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-Bold.eot');
    src: local('AdobeClean-Bold'),
        url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-Bold.eot?#iefix') format('embedded-opentype'),
        url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-Bold.woff2') format('woff2'),
        url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-Bold.woff') format('woff'),
        url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Adobe Clean';
    src: url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-Light.eot');
    src: local('AdobeClean-Light'),
        url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-Light.eot?#iefix') format('embedded-opentype'),
        url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-Light.woff2') format('woff2'),
        url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-Light.woff') format('woff'),
        url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Adobe Clean';
    src: url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-LightIt.eot');
    src: local('AdobeClean-LightIt'),
        url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-LightIt.eot?#iefix') format('embedded-opentype'),
        url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-LightIt.woff2') format('woff2'),
        url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-LightIt.woff') format('woff'),
        url('../themes/ag-energie/assets/fonts/adobeClean/AdobeClean-LightIt.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

  
@font-face {
  font-family: 'Mont';
  src: url('../themes/ag-energie/assets/fonts/mont/webFonts/Mont-Light/font.woff2') format('woff2'), url('../themes/ag-energie/assets/fonts/mont/webFonts/Mont-Light/font.woff') format('woff');
  font-weight:300;
}

@font-face {
  font-family: 'Mont';
  src: url('../themes/ag-energie/assets/fonts/mont/webFonts/Mont-Book/font.woff2') format('woff2'), url('../themes/ag-energie/assets/fonts/mont/webFonts/Mont-Book/font.woff') format('woff');
  font-weight:350;
}

@font-face {
  font-family: 'Mont';
  src: url('../themes/ag-energie/assets/fonts/mont/webFonts/Mont-Regular/font.woff2') format('woff2'), url('../themes/ag-energie/assets/fonts/mont/webFonts/Mont-Regular/font.woff') format('woff');
  font-weight:400;
}

@font-face {
  font-family: 'Mont';
  src: url('../themes/ag-energie/assets/fonts/mont/webFonts/Mont-SemiBold/font.woff2') format('woff2'), url('../themes/ag-energie/assets/fonts/mont/webFonts/Mont-SemiBold/font.woff') format('woff');
  font-weight:600;
}

@font-face {
  font-family: 'Mont';
  src: url('../themes/ag-energie/assets/fonts/mont/webFonts/Mont-Bold/font.woff2') format('woff2'), url('../themes/ag-energie/assets/fonts/mont/webFonts/Mont-Bold/font.woff') format('woff');
  font-weight:700;
}

@font-face {
  font-family: 'Mont';
  src: url('../themes/ag-energie/assets/fonts/mont/webFonts/Mont-Black/font.woff2') format('woff2'), url('../themes/ag-energie/assets/fonts/mont/webFonts/Mont-Black/font.woff') format('woff');
  font-weight:900;
}


/* Frontend editor */
.ct-widget.ct-ignition { position:fixed; left:auto; top:auto; right:20px; bottom:20px; z-index:10000; transition:all 0.5s ease 0s; }
.ct-widget.ct-ignition .ct-ignition__button { position:static; margin-top:10px;}

.ce-element { outline:2px dashed rgba(243, 156, 18, 0.5); }
.ce-element--focused, .ce-element:focus { outline:2px dashed rgba(243, 156, 18, 1); }
/**
 * General Elements
 **/
body{ 
    --bs-body-font-family: 'Adobe Clean', Arial, Helvetica, sans-serif;
    --bs-body-font-size: calc(1.1rem + 0.15vw); /* 1.25rem / 20px */
    --bs-body-line-height: 1.8em;
    --bs-body-color: #3F516C;

    --head-font-family: 'Mont', Verdana, Geneva, Tahoma, sans-serif;
    --book: 350;
    --heavy: 900;
    --fz70: calc(1rem + 2.85vw);
    --fz44: calc(0.8rem + 1.66vw);
    --fz35: calc(1.1rem + 0.93vw);

    --containerWidth: 100%;
    --asideWidth: calc( ((100vw - var(--containerWidth)) / 2) + (1.5rem / 2) );
    --designWidth: 100vw;

    --bleu: #0096AE;
    --orange: #F39200;
    --jaune: #FFDD75;

    --swiper-theme-color: #3F516C;
    --swiper-pagination-color: #0096AE;
    --swiper-pagination-bullet-inactive-color: #3F516C;
    --swiper-pagination-bullet-size: 1.2em;

    color: var(--bs-body-color);
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    line-height: var(--bs-body-line-height);
}

:focus, button:focus { outline:none; }

/* Images */
img, svg { max-width:100%; height:auto; }
[data-sizes] { display:block; width:100%; }
[data-bg] { background-size:cover; background-repeat:no-repeat; background-position:center center; }
.goutte-tr{ border-radius: 25% / 50% 0 50% 50%; overflow: hidden; }
.goutte-bl{ border-radius: 25% / 50% 50% 50% 0; overflow: hidden; }

/* Headings */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4{ margin: 0 0 3vmin; line-height: 1.2em; font-weight: normal; }
h1, .h1{ font-family: var(--head-font-family);    font-size: var(--fz70); color: #fff; font-weight: var(--heavy); margin-bottom: calc( var(--containerWidth) * .05 ); }
h2, .h2{ font-family: var(--head-font-family);    font-size: var(--fz44); color: var(--bleu); font-weight: var(--book); margin-top: 10vmin; margin-bottom: 10vmin; text-transform: uppercase; }
h3, .h3{ font-family: var(--bs-body-font-family); font-size: var(--fz35); color: var(--bs-body-color); }
h4, .h4{ font-family: var(--bs-body-font-family); font-size: var(--bs-body-font-size);  color: #fff; background-color: var(--bs-body-color); display: inline-block; border-radius: 2em 2em 0 2em; padding: 0.4em 0.75em 0.2em; }
.outline{ color: #fff; -webkit-text-stroke: 1px var(--bs-body-color); font-weight: 900; font-size: var(--fz70); white-space: nowrap; }

/* Lists */
ul, ol { margin-bottom:0; padding:0; list-style:none; }
#main ol,
#main ul{ margin-bottom: 3vmin; }
#main ul li{ margin-bottom: 0.5em; padding-left: 1.8rem; }
#main ul li:before{ content: ''; color: var(--bleu); width: 1.5rem; height: 1.5rem; background: url(../themes/ag-energie/assets/img/list-item.svg) no-repeat 0 50%; float: left; margin-left: -1.8rem; }
#main ul.def li{ margin: 5vmin 0; }
#main ul.def li strong{ font-size: var(--fz35); }
#main ol{ display: flex; flex-wrap: wrap; margin-left: -1vmin; margin-right: -1vmin; }
#main ol li{ counter-increment: numbers; font-size: var(--fz35); flex: 0 0 auto; width: 50%; padding: 10vmin 2vmin; }
#main ol li em{ font-size: var(--bs-body-font-size); }
#main ol li:before{ content: counter(numbers); float: left; font-size: calc(5rem + 5vw); color: #fff; -webkit-text-stroke: 1px var(--bs-body-color); line-height: 0.2em; padding-right: 2vmin; height: 110%; }
#main ul.bicolore{ display: flex; align-items: stretch; border-radius: 10vmin; overflow: hidden; border-top-left-radius: 0; border-bottom-right-radius: 0; }
#main ul.bicolore li{ flex: 1; background-color: var(--bs-body-color); color: #fff; text-transform: uppercase; font-size: var(--fz35); padding-left: 0; padding: 5vmin 1vmin; text-align: center; font-weight: 700; margin: 0; }
#main ul.bicolore li:nth-child(odd){ background-color: var(--bleu); }
#main ul.bicolore li:before{ content: none; }
#main ul.bicolore li a{ color: inherit; opacity: 0.8; display: flex; align-items: center;  height: 100%; width: 100%; justify-content: center; }
#main ul.bicolore li a:after{ content: none; }
#main ul.bicolore li a:hover{ opacity: 1; }

/* Paragraphs & lists */
p { margin-bottom: 3vmin; }

/* Link */
#main a{ color: var(--bs-body-color); text-decoration:none; transition: opacity 0.2s ease-out; text-transform: uppercase; color: var(--bleu); }
#main a:hover { text-decoration:none; color: var(--bs-body-color); }

#main a{ text-decoration: none; white-space: nowrap; position: relative; }
#main a:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 90%; border-bottom: 2.5px solid; transition: all 0.2s ease-out; }
#main a:hover:after { width: 100%; }
/* #main a { color: var(--bs-body-color); display: inline-flex; align-items: baseline; margin-left: 0.2em; margin-right: 0.2em;}
#main a:before,
#main a:after { content: ''; width: 1em; height: 1em; background: url(../img/fleche.svg) no-repeat 50% 50%; transition: all 0.2s ease-out; transform: translateY(0.15em); }
#main a:before { transform: translateY(0.15em) rotate(180deg); }
#main a:hover:before { transform: rotate(180deg) translate(0.2em, -0.15em); }
#main a:hover:after { transform: translate(0.2em, 0.15em); } */


/* common classes */
.casper{ display: none; }
.toggler{ cursor: pointer; }
.up{ text-transform: uppercase; }

.btn{ border-radius: 1.5em; font-weight: bold; }
.btn.blanc{ background-color: #fff; color: var(--bs-body-color) !important; }

.p10{ padding-top: 10vmin; padding-bottom: 10vmin; }
.pt10{ padding-top: 10vmin; }
.pb10{ padding-bottom: 10vmin; }
.m10{ margin-top: 10vmin; margin-bottom: 10vmin; }
.mt10{ margin-top: 10vmin; }
.mb10{ margin-bottom: 10vmin; }

.g5{ --bs-gutter-x: 5vw; }

.ombre{ position: relative; }
.ombre:before{ content: ''; position: absolute; z-index: 1; width: 100%; height: 100%; left: 0; top: 0; background: linear-gradient(180deg, rgba(255,255,255,0.75) 10%, rgba(255,255,255,0) 40%, rgba(63,81,108,0.7) 90%); opacity: 0.2; }
.ombre.btm:before{ top: inherit; bottom: 0; }
.vague-d:after{ content: ''; width: 100vw; min-width: 2560px; height: 13.3vw; position: absolute; bottom: -2px; left: 0; z-index: 1; background: url(../themes/ag-energie/assets/img/mask-section.svg) no-repeat 100% 100%; background-size: contain; transform: translateX(50%); }
.vague-g:after{ content: ''; width: 100vw; min-width: 2560px; height: 13.3vw; position: absolute; bottom: -2px; left: 0; z-index: 1; background: url(../themes/ag-energie/assets/img/mask-section.svg) no-repeat 100% 100%; background-size: contain; transform: translateX(-50%) scaleX(-1); }

.vague{ position: relative; padding-bottom: 0; min-height: calc(var(--designWidth) / 4); }
.vague:after{ content: ''; position: absolute; z-index: 0; left: 0; bottom: 0; width: 100vw; height: calc(var(--designWidth) / 4); background: linear-gradient(178deg, rgb(255 255 255) 20%, rgb(63 81 108) 70%); opacity: 0.15; min-height: 120px; min-width: 480px; }
.vague>.container{ position: relative; padding-bottom: calc(var(--designWidth) / 4); }
.vague>.container:before{ content: ''; position: absolute; z-index: 1; left: 50%;  bottom: -1px; width: var(--designWidth); height: calc(var(--designWidth) / 6); background: url(../themes/ag-energie/assets/img/section-vague.svg) no-repeat 50% 100%; transform: translateX(-50%); min-height: 80px; min-width: 480px; }
.vague>.container:after{  content: ''; position: absolute; z-index: 1; left: 100%; bottom: -1px; width: 50vw;  height: calc(var(--designWidth) / 6); background-color: #fff; min-height: 80px; min-width: 480px; }
.vague>.container>*{ position: relative; z-index: 2; min-height: calc(var(--designWidth) / 6); padding-top: calc(var(--designWidth) / 18); }
.vague.top{ padding-bottom: 10vmin; padding-top: calc(var(--designWidth) / 12); }
.vague.top:after{ bottom: inherit; top: 0; }
.vague.top>.container{ padding-bottom: 0; }
.vague.top>.container:before{ bottom: inherit; top: 1px; }
.vague.top>.container:after{  bottom: inherit; top: 1px; }
.vague.reverse>.container:before{ transform: scaleX(-1) translateX(50%); }

.vague-goutte-tr{ position: relative; padding-top: 5vmin; max-width: 1920px; margin: auto; }
.vague-goutte-tr:before{ content: ''; position: absolute; z-index: 1; width: 200%; height: 0; padding-top: 20%; top: 0; left: 50%; transform: translate(-50%, -27%); background: linear-gradient(-180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0) 12%, rgba(63,81,108,0.7) 90%); opacity: 0.3; }
.vague-goutte-tr:after{ content: ''; width: 200%; height: 0; padding-top: 15%; position: absolute; top: 0; left: 0; z-index: 1; background: url(../themes/ag-energie/assets/img/section-mask-goutte-tr.svg) no-repeat 0 0; }
.vague-goutte-tr .goutte-tr{ width: 45%; margin: auto; position: relative; z-index: 2; }

.swiper-horizontal>.swiper-pagination-bullets, 
.swiper-pagination-bullets.swiper-pagination-horizontal, 
.swiper-pagination-custom, .swiper-pagination-fraction{ bottom: -20px; }

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, 
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{ border-top-right-radius: 0; border-bottom-left-radius: 0; counter-increment: numbers; position: relative; }
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet:before{ content: counter(numbers); font-family: var(--head-font-family); color: #fff; font-size: 0.8em; line-height: 1em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -30%); }

.lax{ position: relative; left: 50%; text-align: center; }

/**
 * Pages
 **/
#accueil .intro{ position: relative; max-width: 90%; }
#accueil .intro:after{ content: ''; position: absolute; height: 200%; width: 30%; min-width: 150px; left: 95%; top: -10vmin; background: url(../themes/ag-energie/assets/img/ampoule.png) no-repeat 50% 0%; background-size: contain; }
#accueil .pompes-wrapper{ position: relative; }
#accueil .pompes-wrapper .pac{ position: absolute; width: 60%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; right: 100%; top: 0; border-top-left-radius: 20vmin; border-bottom-left-radius: 20vmin; overflow: hidden; }
#accueil .pompes-wrapper .pac:after{ content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.4); }
#accueil .pompes{ position: relative; background-color: var(--bs-body-color); color: #fff; border-top-right-radius: 20vmin; border-bottom-right-radius: 20vmin; overflow: hidden; }
#accueil .pompe{ padding: 3vmin; }
#accueil .pompe > p:last-child{ margin-bottom: 0; }
#accueil .pompe.air-eau{ background-color: var(--bleu); }
#accueil .pompe.air-air{ background-color: #5F6E84; }
#accueil .pompe.eau-eau{ background-color: #7DC1E4; }
#accueil .pompe h3{ padding-right: 0.5em; color: #fff; text-transform: uppercase; font-weight: 900; font-family: var(--head-font-family); line-height: 1.7em; letter-spacing: 0.02em; }
#accueil .pompe li:before{ content: '>'; color: #fff; background: transparent none; }
#accueil .pompe a{ color: #fff; }
#accueil .avantages-wrapper{ display: flex; align-items: stretch; justify-content: center; }
#accueil .avantage{ color: #fff; text-align: center; width: 25vmin; min-width: 110px; margin: 0 5vmin; padding: 1vmin 0 3vmin; border-radius: 20vmin; border-top-right-radius: 0; font-size: 0.8em; line-height: 1.2em; }
#accueil .avantage:before{ content: ''; display: block; width: 60%; margin: 5vmin auto; height: 10vmin; background-repeat:no-repeat; background-position: 50% 50%; background-size: 100% 100%; }
#accueil .avantage.installation{ background-color: var(--bleu); }
#accueil .avantage.installation:before{ background-image: url(../themes/ag-energie/assets/img/plus.svg); }
#accueil .avantage.delai{ background-color: var(--orange); }
#accueil .avantage.delai:before{ background-image: url(../themes/ag-energie/assets/img/calendrier.svg); }
#accueil .avantage.aides{ background-color: var(--jaune); }
#accueil .avantage.aides:before{ background-image: url(../themes/ag-energie/assets/img/cochon.svg); }
#accueil .vague>.container>*{ min-height: 0; }
#accueil .section2.vague>.container{ padding-bottom: calc(100vw / 20); }
#accueil .section2.vague>.container:before{ transform: translateX(-10%); z-index: 3; }
    #partenaires{ position: relative; }
    #partenaires .partenaires{ width: calc(100% + var(--asideWidth)); float: right; position: relative; }
    #partenaires .partenaires:before{ content: ''; position: absolute; top: -2px; right: 0; width: 100vw; height: 100%; background-color: var(--bs-body-color); }
    #partenaires .partenaires ul{ display: flex; margin: 0; animation: marquee 15s linear infinite; }
    #partenaires .partenaires ul li{ position: relative; z-index: 1; margin: 0; padding: 1.5vmin 0.5vmin; max-width: 45%; height: auto; padding-left: 0; min-width: 150px; }
    #partenaires .partenaires ul li:before{ content: none; }
    #partenaires .partenaires ul li img{ filter: brightness(0) invert(1); width: auto; max-width: 120px; }
#accueil #qualif ul{ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-start; }
#accueil #qualif ul li:before{ content: none; }
#accueil .section3 .row>div{ position: relative; }
#accueil .section3 .technicien{ margin-top: calc(var(--designWidth) / -6); width: 100%; min-width: 20vw; height: 0; padding-top: 150%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; border-radius: 30vmin; border-top-right-radius: 0; transform: translate(-5vmin, -5vmin); }
#accueil .devis a{ color: var(--bleu); text-transform: uppercase; font-size: 0.85em; }
#accueil .avis .svg-wrapper{ flex-direction: row-reverse; align-items: flex-end; position: relative; }
#accueil .avis .svg-wrapper h3{ text-align: right; padding-right: 0.5em; }
#accueil .avis .svg-wrapper .svg{ position: absolute; width: calc( 50% + var(--asideWidth)); bottom: 0.6em; left: 100%; }
#accueil .avis a:after{ content: none; }
#accueil #speaker svg{ min-width: 540px; }
#accueil #speaker svg path{ opacity:0; }
#accueil #speaker.headroom--not-top svg path{ opacity: 1; stroke-dasharray:10000; stroke-dashoffset:10000; animation:draw 10s ease-in-out 0.2s forwards; }
#accueil #speaker.headroom--not-top svg circle{ opacity: 0; animation:dot 0.1s ease-in-out forwards; }
#accueil .fb{ width: 90vw; position: relative; left: 50%; transform: translateX(-50%); margin: 0 0 10vmin; box-shadow: 5px 5px 20px rgb(0 0 0 / 20%); border-radius: 0 25vmin 0 25vmin; background: rgb(255 255 255 / 50%); }
#accueil .eapps-widget{ padding-top: 0;}
#accueil .eapps-widget a:after{ content: none; }
#accueil .WidgetTitle__Container-sc-173f1y-0{ display: none; }
#accueil .eMVsmS{ background-color: #fff; box-shadow: 20px 30px 40px rgba(0, 0, 0, 0.16); border-radius: 15vmin; padding: 3vmin 10vmin; }
#accueil .huVKUn:first-child .eMVsmS{ border-bottom-left-radius: 0; transform: translateY(-50%); }
#accueil .huVKUn:nth-child(2n) .eMVsmS{ border-bottom-right-radius: 0; transform: translateY(50%); }
#accueil .huVKUn:last-child .eMVsmS{ border-top-left-radius: 0; }
#accueil .cGkhmA { align-items: center; }
#accueil .vague.reverse>.container:before{ transform: scaleX(-1) translateX(130%); }
#accueil .vague.reverse>.container:after{ left: inherit; right: 140%; }
#accueil .vague.reverse>.container{ padding-bottom: 10vmin; }
#accueil .qui a{ color: var(--bleu); text-transform: uppercase; font-size: 0.85em; }
#accueil .qui .svg-wrapper{ display: flex; flex-direction: row-reverse; align-items: flex-start; }
#accueil .qui .svg-wrapper h3{ margin-bottom: 0; margin-top: 0.4em; min-width: 50%; }
#accueil .qui .svg-wrapper .svg{ width: 100%; padding-left: 0; padding-right: 2vw; }
#accueil .qui .svg-wrapper svg{ float: right; width: calc(100% + var(--asideWidth)); max-width: none; min-width: 1300px; }
#accueil #fleche svg path{ opacity:0; }
#accueil #fleche.headroom--not-top svg path{ opacity: 1; stroke-dasharray:10000; stroke-dashoffset:10000; animation:draw 8s ease-in-out 0s forwards; }
#accueil #fleche.headroom--not-top svg circle{ opacity: 0; animation:dot 0.1s ease-in 2.2s forwards; }

.eapps-facebook-feed-large .eapps-facebook-feed-posts-item{ width: 100%; }
.eapps-facebook-feed-posts-item {
    display: block;
    background: #fff;
    margin-top: 20px;
    width: calc(50% - 10px);
    box-sizing: border-box;
}

#entreprise .ombre:before{ width: 100vw; left: 50%; transform: translateX(-50%); }
#entreprise .section1.vague>.container{ padding-bottom: 5vmin; }
#entreprise .section1.vague>.container:before { transform: translateX(-12%); }
#entreprise .section1 h2{ margin-bottom: 5vmin; }
#entreprise .projet{ display: flex; align-items: center; min-width: 250px; }
#entreprise .projet:before{ content: ''; width: 7vw; height: 5vw; background: url(../themes/ag-energie/assets/img/picto-home.svg) no-repeat 0 50%; min-height: 50px; min-width: 70px; }
#entreprise .projet p{ margin-bottom: 0; line-height: 1.5em; }
#entreprise .projet a{ color: var(--orange); text-transform: uppercase; font-size: 0.85em; }
#entreprise .svg-wrapper{ display: flex; align-items: flex-end; }
#entreprise .svg-wrapper h3{ white-space: nowrap; margin-bottom: -0.4em; }
#entreprise .svg-wrapper .svg{ height: calc(100% + var(--asideWidth)); width: 100%; padding-left: 2vw; }
#entreprise .svg-wrapper svg{ width: calc(100% + var(--asideWidth)); height: 100%; max-width: none; }
#entreprise #geek.headroom--not-top svg path{ stroke-dasharray:10000; stroke-dashoffset:10000; animation:draw 10s ease-in-out 0.5s forwards; }
#entreprise .energy{ align-items: center; }
#entreprise .energy .text{ text-align: justify; }
#entreprise .energy img{ width: 230px; margin: auto; max-width: 80%; }
#entreprise .section3 .svg-wrapper{ flex-direction: row-reverse; align-items: flex-start; }
#entreprise .section3 .svg-wrapper h3{ margin-bottom: 0; margin-top: 0.4em; min-width: 50%; }
#entreprise .section3 .svg-wrapper .svg{ padding-left: 0; padding-right: 2vw; }
#entreprise .section3 .svg-wrapper svg{ float: right; width: calc(160% + var(--asideWidth)); }
#entreprise #mains.headroom--not-top svg path{ stroke-dasharray:10000; stroke-dashoffset:10000; animation:draw 8s ease-in-out 0s forwards; }
#entreprise #mains.headroom--not-top svg circle{ opacity: 0; animation:dot 0.1s ease-in-out 4.2s forwards; }
#entreprise #etapes .slider{ position: relative; }
#entreprise #etapes .swiper-pagination{ display: none; }
#entreprise #etapes .swiper-slide{ counter-increment: index; position: relative; max-width: calc(760px + 5vmin); padding-right: 5vmin; }
#entreprise #etapes .swiper-slide:before{ content: counter(index); font-family: var(--head-font-family); color: transparent; -webkit-text-stroke: 1px #fff; font-weight: 700; font-size: calc(6rem + 5.5vw); white-space: nowrap; position: absolute; left: 0.1em; top: 0; transform: translateY(-48%); line-height: 0.7em; padding-top: 100%; }
#entreprise #etapes .swiper-slide img{ width: 100%; }
#entreprise #etapes .swiper-slide p{ font-style: italic; margin-top: 0.5em; }
#entreprise #fmask{ opacity: .2; }

#main .primes ul,
#main .marques ul{ display: flex; align-items: center; flex-wrap: wrap; margin-left: -3vmin; margin-right: -3vmin; }
#main .primes ul li,
#main .marques ul li{ padding-left: 0; margin-left: 3vmin; margin-right: 3vmin; height: 140px; display: flex; align-items: center; margin-top: 1vmin; margin-bottom: 1vmin; }
#main .primes ul li:before,
#main .marques ul li:before{ content: none; }

#pac-choisir .equipe{ position: relative; left: 50%; transform: translateX(-50%); width: 2560px; max-width: 100vw; min-width: 1200px; }
#pac-choisir .section2.vague>.container:before{ transform: translateX(-55%); }
#pac-choisir .vague>.container:after { left: 50%; }
#pac-choisir .diapos{ overflow: hidden; }
#pac-choisir .diapos-wrapper{ animation: marquee 30s linear infinite; display: flex; margin-bottom: 0; }
#pac-choisir .diapo{ width: 40vw; padding-left: 0; margin: 0; }
#pac-choisir .diapo:before{ content: none; }
#pac-choisir .diapo a{ display: block; cursor: pointer; }
#pac-choisir .diapo a:after{ content: none; }
#pac-choisir .diapo img{ width: 100%; }
#pac-choisir #maintenance .diapos-wrapper{ animation: marquee 20s linear infinite reverse; display: flex; }
#pac-choisir #fmask{ opacity: .2; }

@keyframes marquee {
    from {transform: translateX(0); }
    to {transform: translateX(-50%); }
}

#pac-air-eau .section1-texte{ position: relative; }
#pac-air-eau .section1-texte:before{ content: ''; position: absolute; width: 33%; height: 100%; right: 100%; top: 8vmin; background: url(../themes/ag-energie/assets/img/tournesol.png) no-repeat 50% 100%; background-size: contain; }

#pac-air-air .arbre{ position: relative; }
#pac-air-air .arbre:after{ content: ''; position: absolute; width: 100%; height: 150%; left: 100%; top: -8vmin; background: url(../themes/ag-energie/assets/img/arbre.jpg) no-repeat 80% 100%; background-size: contain; z-index: -1; }

#pac-spe .tertiaire{ margin-top: 20vmin; }
#pac-spe .piscine img{ border-radius: 80% 0% / 50%; border-bottom-right-radius: 40% 20%; margin-left: 2vmin; }
#pac-spe .section1 h2{ margin-bottom: 3vmin; }
#pac-spe .section-texte0{ margin-left: 5vmin; margin-right: 5vmin; }
#pac-spe .section1-texte{ align-items: flex-end; }
#pac-spe .section1-texte p:last-child{ margin-bottom: 0; }
#pac-spe .thermostat img{ border-radius: 0 80% / 50%; border-bottom-left-radius: 40% 20%; transform: translateY(-10vmin); position: relative; z-index: 1; }
#pac-spe .section2-texte{ text-align: right; margin-left: 5vmin; margin-right: 5vmin; margin-top: 20vmin; }
#pac-spe .section2-texte img{ margin-bottom: 10vmin; }
/* #pac-spe .section2-marques{ padding-left: 10%; padding-bottom: 5vmin; }
#pac-spe .section2-marques img{ filter: brightness(0) invert(1); }
#pac-spe .section2-marques ul{ position: relative; display: flex; padding-left: 10%; margin-left: -10%; flex-wrap: wrap; }
#pac-spe .section2-marques ul:before{ content: ''; position: absolute; top: -2px; left: 0; width: 100vw; height: 100%; background-color: var(--bs-body-color); }
#pac-spe .section2-marques ul li{ position: relative; z-index: 1; margin: 1.5vmin 0.5vmin; max-width: 45%; }
#pac-spe .section2-marques ul li:before{ content: none; } */
#pac-spe .section2-radius{ padding-bottom: 3vmin; }
#pac-spe #partenaires{ padding-bottom: 5vmin; }
#pac-spe #partenaires:before,
#pac-spe #partenaires:after { content: ''; height: 68px; position: absolute; bottom: calc(5vmin + 2px); left: 0; width: 100vw; background: var(--bs-body-color); }
#pac-spe #partenaires:after { width: 50vw; min-width: 750px; background: linear-gradient(270deg, rgba(63,81,108,1) 40%, rgba(63,81,108,0) 60%); }
#pac-spe #partenaires h3{ padding-left: 10%; }
#pac-spe .partenaires{ float: none; margin-bottom: 0; height: 68px; overflow: hidden; }
#pac-spe .partenaires:before{ content: none; }
#pac-spe .partenaires ul{ animation: marquee 15s linear reverse infinite; padding-left: 10%; margin-left: -10%; }
#pac-spe .section2-radius:after{ content: ''; pointer-events: none; position: absolute; z-index: 2; width: 60%; height: 0%; padding-top: 100%; bottom: 0; left: -1px; background: url(../themes/ag-energie/assets/img/mask-corner.svg) no-repeat 0 100%; background-size: contain; }
#pac-spe .ombre.btm:before{ width: 100vw; pointer-events: none; height: 150%; }
#pac-spe #fmask{ opacity: .2; }

#entretien-sav #fmask{ background-image: url(../themes/ag-energie/assets/img/logotype.svg) !important; opacity: 0.1; }
#entretien-sav .goutte-tr{ border-radius: 35% / 50% 0 50% 50%; max-width: 50vw; margin-left: auto; margin-right: auto; }

#contact .phone-wrapper{ position: relative; display: inline-block; left: 50%; transform: translateX(-50%); margin-top: calc(var(--containerWidth) * 0.1); }
#contact .phone-wrapper h2{ display: inline; }
#contact .phone-wrapper svg{ position: absolute; right: 100%; width: calc(var(--containerWidth) * 1); max-width: none; min-width: 540px; bottom: 0.85em; margin-right: 0.5em; }
#contact #fmask{ background-image: url(../themes/ag-energie/assets/img/logotype.svg) !important; opacity: 0.1; }

#contact .svg-mask > svg > path[fill="none"]{ display: none; }
#contact .svg-mask > svg > circle{ display: none; }
#contact .phone-wrapper > svg path{ stroke-dasharray:10000; stroke-dashoffset:10000; animation:draw 10s ease-in-out 0.5s forwards; }
#contact .phone-wrapper > svg circle{ opacity: 0; animation:dot 0.1s ease-in-out 3.8s forwards; }

/**
 * Layout
 **/
#page { position:relative; overflow-x: hidden; }

section{ padding-top: 10vmin; padding-bottom: 10vmin; }
section>div{ z-index: 2; position: relative; }

/* Header */
#header{ height: calc( var(--containerWidth) * .5 ); position: relative; display: flex; flex-direction: column; justify-content: space-between; }
#header > *{ position: relative; z-index: 3; }

#menu{ position: relative; z-index: 10; }
#menu .logo{ margin-top: 5vmin; margin-bottom: 0; }
#menu .logo .link{ display: block; }

#menu-toggler { display: none; background: url(../themes/ag-energie/assets/img/burger.svg) no-repeat 50% 50%; text-indent: 200%; white-space: nowrap; overflow: hidden; background-size: contain; padding: 0; width: 50px; min-width: 50px; height: 50px; background-color: var(--bs-body-color); border-radius: 50px; border-top-right-radius: 0; margin-left: 0.5em; }

#menu a{ color: var(--bs-body-color); text-decoration:none; transition: opacity 0.2s ease-out; }
#menu a:hover { text-decoration:none; color: var(--bs-body-color); }

#menu nav{ margin-top: 5vmin; max-width: 1000px; float: right; width: 100%; display: flex; align-items: center; }

#menu-items > ul{ display: flex; }
#menu-items .level-1{ position: relative;  flex-grow: 1; }
#menu-items .level-1 > .menu-item{ padding: 0.5em; font-size: calc(1.1rem + 0.45vw); display: block; width: 100%; position: relative; white-space: nowrap; text-align: center; }
#menu-items .level-1 > .menu-item:before { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--bs-body-color); margin-right: 0.4em; display: inline-block; margin-bottom: 0.15em; }
#menu-items .toggler + ul{ position: absolute; top: 100%; left: 1em; transform: translateY( calc(-100% - 2.5rem - 10vmin) ); transition: transform 0.7s ease-out; }
#menu-items .toggler.open + ul{ transform: translateY( 0 ); }
#menu-items .toggler.last + ul{ left: inherit; right: 0; }
#menu-items .toggler.last + ul .nav-l2{ border-radius: 2em 0 2em 2em; }
#menu-items .level-2 .menu-item{ display: block; white-space: nowrap;  padding: 0.2em 1em; background-color: var(--bs-body-color); color: #fff; opacity: .9; border-radius: 0 2em 2em 2em; margin: 0.1em 0; }
#menu-items .level-2 .menu-item.reverse{ border-radius: 2em 0 2em 2em; margin: 0.1em 0; }
#menu-items .level-2 .menu-item:hover{ opacity: 1; }

#menu #tel { display: block; background: url(../themes/ag-energie/assets/img/tel.svg) no-repeat 50% 50%; text-indent: 200%; white-space: nowrap; overflow: hidden; background-size: contain; padding: 0; width: 50px; min-width: 50px; height: 50px; background-color: var(--bs-body-color); border-radius: 50px; border-top-right-radius: 0; margin-left: 1em; }


#mask{ z-index: 0; position: absolute; width: 100%; min-width: 2560px; height: calc( var(--containerWidth) * .8 - 0.75rem ); left: 50%; top: 0; transform: translateX(-50%); background-size: contain; }
#mask:before{ content: ''; position: absolute; width: 200vw; height: 10px; bottom: -5px; left: 50%; transform: translateX(-50%); background-color: #FFF; z-index: 2; }
.svg-mask{ position: relative; z-index: 0; width: 100%; height: 100%; }
.svg-mask.vague-fall{ background-size: 82%; background-position: right top; }
.svg-mask.vague-fall-r{ background-size: 82%; background-position: left center; }
.svg-mask:before{ content: ''; position: absolute; z-index: 2; width: 100%; height: 100%; left: 0; top: 0; background: linear-gradient(180deg, rgba(255,255,255,0.75) 10%, rgba(255,255,255,0) 40%, rgba(63,81,108,0.7) 90%); }
.svg-mask:after{ content: ''; position: absolute; z-index: 1; width: 100%; height: 100%; left: 0; top: 0; background-color: var(--bs-body-color); opacity: 0.25; }
.svg-mask > svg{ position: relative; z-index: 3; width: 100%; height: 100%; }
.svg-mask > svg > path{ stroke-dasharray:1000; stroke-dashoffset:1000; animation:draw 2s ease-in-out 0.5s forwards; }
.svg-mask > svg > circle{ opacity: 0; animation:dot 0.1s ease-in-out 2.1s forwards; }

    @keyframes draw{ 
        100%{stroke-dashoffset:0;}
    }
    @keyframes dot{
        100%{opacity:1;}
    }

/* Main */
#main{ position: relative; z-index: 2; padding-top: calc(var(--containerWidth) * .022); padding-bottom: 10vmin; }
#main > *{ position: relative; z-index: 1; }

.intro h2{ font-family: var(--bs-body-font-family); color: inherit; font-size: var(--fz35); margin: 0 0 3vmin; text-transform: none; }

#fmask{ position: absolute; z-index: 0; opacity: 0.6; width: 116vw; max-width: 2300px; margin: auto; bottom: 0; height: 22vw; max-height: 450px; background-color: #e7e9ec; background-size: 100% auto; background-position: 50% 2px; left: 50%; transform: translateX(-50%); }
#fmask:before{ content: ''; position: absolute; width: calc(100% + 4px); left: -2px; height: 100%; top: -1px; background: url(../themes/ag-energie/assets/img/footer-infinite-mask.svg) no-repeat 50% 0; background-size: 100% auto; }

/* Footer */
#footer{ position: relative; z-index: 2; background: linear-gradient(-27deg, rgba(63,81,108,1) 0%, rgba(0,150,174,1) 90%); color: #fff; padding-top: 6vw; }
#footer:before{ content: ''; position: absolute; width: 6vw; left: 0; height: 6vw; top: -6vw; z-index: 1; border-radius: 0 0 0 100%; box-shadow: -2vw 2.1vw 0vw 1.9vw var(--bleu); }
#footer .row > div{ display: flex; flex-direction: column; align-items: center; justify-content: center; }
#footer .row > div:not(:first-child){ border-left: 2px solid #fff; }
#footer p{ margin-bottom: 1.5vmin; line-height: 1.2em; }
#footer p:last-child{ margin-bottom: 0; }
#footer a{ color: #fff; opacity: 0.7; text-decoration: none; transition: opacity 0.2s ease-out; }
#footer a:hover{ opacity: 1; }
#footer .secteur img{ margin-bottom: 1vmin; text-align: center; }
#footer .logo{ margin: 0 3vmin; }
#fb{ width: 7vmin; height: 7vmin; max-width: 60px; max-height: 60px; min-width: 40px; min-height: 40px; position: absolute; right: 5vmin; top: -10vmin; }

.menu-legal{ display: flex; align-items: center; justify-content: center; padding: 6vmin 0 1vmin; font-size: 1rem; flex-wrap: wrap; line-height: 1.3em; }
.menu-legal a{ display: block; margin: 0 0.5em; white-space: nowrap; }

/* Forms */
.flex-inline{ display: flex; flex-wrap: wrap; }
.space-between{ align-items: center; justify-content: space-between; }
.form-control{ font-size: var(--bs-body-font-size); border: 0; box-shadow: 0 15px 15px rgba(0,0,0,0.15); border-radius: 27px; }
.form-control:focus { color: var(--bs-body-font-size); background-color: #fff; border: 0 transparent; outline: 0; box-shadow: 0 15px 15px rgba(0,0,0,0.15); }
.form-floating>label{ font-size: var(--bs-body-font-size); font-weight: bold; opacity: 0.3; text-transform: uppercase; padding: 1rem 1.25rem; }
.form-floating>.form-control, 
.form-floating>.form-select { padding-left: 1em; }
.form-floating>.form-control:focus~label, 
.form-floating>.form-control:not(:placeholder-shown)~label, 
.form-floating>.form-select~label{ opacity: 0.3; transform: scale(.85) translateY(-0.6rem) translateX(0.15rem); }
.form-control.is-invalid:focus, 
.was-validated .form-control:invalid:focus { box-shadow: 0 15px 15px rgb(220 53 69 / 25%); }
.invalid-feedback{ margin-left: 1em; display: block; }

.form-btn{ color: var(--bs-body-color); transition: opacity 0.2s ease-out; text-decoration: none; white-space: nowrap; position: relative; display: inherit; }
.form-btn:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 90%; border-bottom: 2.5px solid; transition: all 0.2s ease-out; }
.form-btn:hover { text-decoration:none; color: var(--bs-body-color); }
.form-btn:hover:after { width: 100%; }
.form-btn button{ display: inline; background-color: transparent; border: 0 none; padding: 0; text-transform: uppercase; line-height: 1em; }

.alert { padding: 1rem 1rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.25rem; position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 2; max-width: 750px; max-height: 100%; height: max-content; }
.alert-heading { color: inherit; }
.alert-link { font-weight: 700; }
.alert-dismissible { padding-right: 3rem; }
.alert-dismissible .btn-close { position: absolute; top: 0; right: 0; z-index: 2; padding: 1.25rem 1rem; }

.alert-primary { color: #084298; background-color: #cfe2ff; border-color: #b6d4fe; }
.alert-primary .alert-link { color: #06357a; }
.alert-secondary { color: #41464b; background-color: #e2e3e5; border-color: #d3d6d8; }
.alert-secondary .alert-link { color: #34383c; }
.alert-success { color: #0f5132; background-color: #d1e7dd; border-color: #badbcc; }
.alert-success .alert-link { color: #0c4128; }
.alert-info { color: #055160; background-color: #cff4fc; border-color: #b6effb; }
.alert-info .alert-link { color: #04414d; }
.alert-warning { color: #664d03; background-color: #fff3cd; border-color: #ffecb5; }
.alert-warning .alert-link { color: #523e02; }
.alert-danger { color: #842029; background-color: #f8d7da; border-color: #f5c2c7; }
.alert-danger .alert-link { color: #6a1a21; }
.alert-light { color: #636464; background-color: #fefefe; border-color: #fdfdfe; }
.alert-light .alert-link { color: #4f5050; }
.alert-dark { color: #141619; background-color: #d3d3d4; border-color: #bcbebf; }
.alert-dark .alert-link { color: #101214; }

.alert-dismissible > .close{ border: 0; font-size: 2rem; line-height: 0.6em; background: transparent none; opacity: 0.8; position: absolute; right: 0.5rem;}
.alert-dismissible > .close:hover{ opacity: 1; }

/* Popup */
.popup-fancybox{ max-width: 1200px; line-height: 1.2em; }
.popup-fancybox h2,
.popup-fancybox h3{ margin: 0 0 .5em; }
/* CONTAINER */
body{ --containerWidth: 100%; }
@media (min-width:  576px){ body{ --containerWidth:  540px; } }
@media (min-width:  768px){ body{ --containerWidth:  720px; } }
@media (min-width:  992px){ body{ --containerWidth:  960px; } }
@media (min-width: 1200px){ body{ --containerWidth: 1140px; } }
@media (min-width: 1400px){ body{ --containerWidth: 1320px; } }

/**
 * WIDE
 **/
@media (min-width: 2560px) {
    #header{ height: 25vw; }
    #mask{ height: 41vw; }
    #main{ padding-top: 3vw; }
}

/**
 * XXXL
 **/
@media (min-width: 1920px) {
    body{
        --fz70: 70px;
        --fz44: 44px;
        --fz35: 35px;
        --designWidth: 1920px;
    }
}

@media (max-width: 1919px) {
    .svg-mask{ background-size: auto 100% !important; background-position: center top !important; }
}

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

/**
 * XL
 **/
@media (max-width: 1399px) {
}

/**
 * LG
 **/
@media (max-width: 1199px) {
    #accueil .cGkhmA { display: flex; flex-direction: column; }
    #accueil .huVKUn:first-child .eMVsmS{ transform: none; }
    #accueil .huVKUn:nth-child(2n) .eMVsmS{ transform: none; }
}

/**
 * MD
 **/
@media (max-width: 991px) {
    body:before{ content: ''; opacity: 0; pointer-events: none; position: fixed; z-index: 10; flex-direction: column; background-color: rgb(255 255 255 / 80%); left: 0; top: 0; width: 100vw; height: 100vh; backdrop-filter: blur(3px); transition: all 0.4s ease-out; }
    body.menu-opened:before{ opacity: 1; pointer-events: inherit; }
    body.menu-opened{ overflow-y: hidden; }
    #header{ justify-content: flex-end; }
    #header #menu{ position: fixed; top: 0; width: 100%; }
    #header.not-top #menu{ background: linear-gradient(0deg, rgba(255,255,255, 0) 0, rgba(255, 255 ,255 ,0.85) 40%); }
    #header.not-top.pinned #menu{ transform: translateY(0%); }
    #header.not-top.unpinned #menu{ transform: translateY(-100%); }

    #menu{ padding-top: 2vmin; transition: all .5s ease-out; }
    #menu a{ transition: none; }
    #menu #menu-toggler{ display: block; }
    #menu > div > .row{ justify-content: space-between; align-items: center; flex-wrap: nowrap; }
    #menu > div > .row > *{ flex-shrink: 1; }

    #menu .logo{ margin-top: 0; max-width: 100px; position: relative; z-index: 11; width: 30vw; }
   
    #menu nav{ margin-top: 0; flex-direction: row-reverse; }
    #menu #tel{ position: relative; z-index: 10; background-color: var(--bleu); }
    #menu-toggler{ position: relative; z-index: 10; }
    
    #menu-items{ opacity: 0; pointer-events: none; transition: opacity 0.7s ease-out; position: fixed; z-index: 1; left: 5vmin; top: 120px; width: 90vw; max-height: calc(100vh - 230px); max-width: 360px; margin: auto; right: 5vmin; overflow: hidden; border-radius: 15vmin/15vmin 0 15vmin; }
    #menu-items:after{ content: ''; opacity: 0; pointer-events: none; position: absolute; z-index: 0; width: 100%; height: 100%; left: 0; top: 0px; background-color: #7DC1E4; transition: all 0.7s ease-out; }
    #menu-items ul{ flex-direction: column; max-height: calc(100vh - 230px); overflow-y: scroll; padding: 20px 0; transition: none !important; }
    #menu-toggler.open + #menu-items:before,
    #menu-toggler.open + #menu-items:after,
    #menu-toggler.open + #menu-items{ opacity: 1; pointer-events: inherit; }
    #menu-items .level-1{ z-index: 1; color: #fff; flex-grow: inherit; }
    #menu-items .level-1 > .menu-item { padding: 0.1em; text-align: left; text-indent: 15vmin; font-weight: bold; color: #fff; }
    #menu-items .level-1 > .menu-item:before{ border-color: #fff; }
    #menu-items .level-1 .toggler{ display: none; }
    #menu-items .menu-item.toggler + ul{ position: static; transform: none; }
    #menu-items .level-2 .menu-item{ border-radius: 0; margin: 0; text-transform: uppercase; font-weight: bold; opacity: 1; }
    #menu-items .level-2:nth-child(2n+2) .menu-item{ background-color: var(--bs-body-color); }
    #menu-items .level-2:nth-child(2n+1) .menu-item{ background-color: var(--bleu); }
    #menu-items .level-2:first-child .menu-item{ background-color: #557A98; }
    
    body.menu-opened #footer{ position: fixed; top: 100%; z-index: 10; width: 100%; height: 105px; font-size: 14px; padding-top: 22px; transition: transform 0.7s ease-out 0.2s; transform: translateY(-100%); }
    body.menu-opened #footer a{ opacity: 1; }
    body.menu-opened #footer .row{ flex-wrap: nowrap; max-width: 370px; justify-content: center; margin: auto; }
    body.menu-opened #footer .row > *,
    body.menu-opened #footer .foot-block{ width: auto; }
    body.menu-opened #footer .row > div:first-child{ max-width: 35%; }
    body.menu-opened #footer .logo{ max-width: 100%; position: relative; margin: 0 10px; }
    body.menu-opened #footer .logo:after{ content: ''; position: absolute; width: 0; height: 80%; border-right: 1px solid #fff; right: calc(var(--bs-gutter-x) / -1); top: 10%; }
    body.menu-opened #footer .coords{ margin-bottom: 0; }
    body.menu-opened #footer p{ margin-bottom: 0; }
    body.menu-opened #footer .offset-sm-5,
    body.menu-opened #footer .secteur,
    body.menu-opened #footer .menu-legal,
    body.menu-opened #footer p:nth-child(n+3){ display: none; }
    body.menu-opened #footer .row > div:not(:first-child){ border-left: 0; }
    body.menu-opened #footer #fb { top: -50px; }

    body.menu-opened body:before        { transition: all 0.4s ease-out; }
    body.menu-opened #menu              { transition: all 0.4 sease-out; }
    body.menu-opened #menu-items        { transition: all 0.4s ease-out; }
    body.menu-opened #menu-items:after  { transition: all 0.4s ease-out; }
    body.menu-opened #footer            { transition: transform 0.4s ease-out; }

    #footer{ transition: transform 0.7s ease-out 0.2s; }
    #footer .foot-block{ width: 90%; }
    #footer .coords{ margin-bottom: 3vmin; }
    #footer .secteur img{display: none; }

    #main ol li{ width: 100%; }
    #main ul.bicolore{ flex-wrap: wrap; border-radius: 15vmin; border-top-left-radius: 0; border-bottom-right-radius: 0; }
    #main ul.bicolore li{ width: 50%; flex: inherit; background-color: var(--bleu); }
    #main ul.bicolore li:nth-child(4n),
    #main ul.bicolore li:nth-child(4n+1){ background-color: var(--bs-body-color); }

    #accueil .section2.vague>.container:before{ transform: translateX(0%); }
    #accueil .aside-img{ display: none; }

    #pac-spe .section2-texte { margin-top: 0; }
}

/**
 * SM
 **/
@media (max-width: 767px) {
    #footer .row > div:not(:first-child){ border-left: transparent none; }
    #footer .foot-block { width: 250px; margin-bottom: 5vmin; }
    #footer p { margin-bottom: 3vmin; }

    #accueil .pompes-wrapper:before{ content: none; }
    #accueil .avantage{ margin: 0 5px; font-size: 16px; }
    #accueil .section2.vague>.container:before{ transform: translateX(10%); }

    #entreprise #etapes .swiper-slide:before { transform: translateY(-55%); }

    #pac-spe .piscine img{ display: none; }
    #pac-spe .thermostat img{ max-width: 50%; margin: auto; }
    
    #contact .form-floating>label[for="contact-cp"]{ white-space: nowrap; overflow: hidden; }
    #contact .form-floating>label[for="contact-cp"]:before{ content: 'CP'; margin-right: 100vw; }
}

/**
 * XS
 **/
@media (max-width: 575px) {
    
    body{
        --fz70: 24px;
    }
    
    .row{ --bs-gutter-x: 5vw; }
    #menu{ padding: 5vmin; }

    #header{ height: 60.5vw; }
    .svg-mask{ background-size: auto 70vw !important; }
    #mask{ height: calc(100vw - .75em); }

    .h1 br{ display: none; }
    .intro h2 { text-indent: .8em; }

    #main ul.bicolore li{ font-size: 15px; }

    #accueil .intro{ max-width: none; }
    #accueil .intro:after{ content: none; }

    #entreprise .section1.vague>.container { padding-bottom: 0; }
    #entreprise .section1.vague>.container:before { transform: translateX(-40%); }
    #entreprise .section1 .goutte-bl{ display: none; }
    #entreprise #etapes .swiper-pagination{ display: block; }
    #entreprise .energy .text{ text-align: left; }

    .lax {right: 50%; left: initial;}
    #main ol li:before {display: flex; align-items: center; justify-content: center;}
}


@media (max-width: 485px) {
    
   .vague.top:after {top:-10px;}

}