@charset "UTF-8";

:root {
    --arrondis-1: 3px;
    --arrondis-2: 8px;
    --arrondis-xl: 100rem;
    --bordure: 1px solid #CCCCCC;
    --bordure-size-1: 1px;
    --bordure-size-2: 2px;
    --bordure-type: solid;
    --bordure-color: #CCCCCC;
    --ombre: 0 0 10px rgba(0, 0, 0, 0.2);
    --ombre-hover: 0 0 20px rgba(0, 0, 0, 0.2);
    --transition-mode: cubic-bezier(0.11, 0.77, 0.36, 0.97);
    --transition: 0.25s all cubic-bezier(0.11, 0.77, 0.36, 0.97);
    --flou: blur(8px) brightness(90%) saturate(0.8);
    --flou-clair: blur(8px) brightness(130%);
    --flou-sombre: blur(8px) brightness(78%);
    --font-size--1: 0.9rem;
    --font-size-1: 1rem;
    --font-size-2: 1.11rem;
    --font-size-3: 1.26rem;
    --font-size-4: 1.4rem;
    --font-size-5: 1.6rem;
    --font-size-6: 1.87rem;
    --font-size-7: 2.4rem;
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 2rem;
    --space-5: 4rem;
  --bleu-l2: #C1CFFF;
  --bleu-l1: #6877FF;
  --bleu: #373cf5;
  --bleu-f1: #0000CC;
  --bleu-f2: #000099;
  --cyan-l2: #B8E6F8;
  --cyan-l1: #67C4E8;
  --cyan: #00ABE0;
  --cyan-f1: #007EA5;
  --cyan-f2: #00597C;
  --turquoise-l2: #ABF1EE;
  --turquoise-l1: #54DED9;
  --turquoise: #07C9C3;
  --turquoise-f1: #13ABA6;
  --turquoise-f2: #07726F;
  --vert-l2: #D6F1C5;
  --vert-l1: #9BCE7A;
  --vert: #4AA528;
  --vert-f1: #3C7F20;
  --vert-f2: #2D591B;
  --chartreuse-l2: #E0EBAF;
  --chartreuse-l1: #BED06B;
  --chartreuse: #9ABA00;
  --chartreuse-f1: #799200;
  --chartreuse-f2: #526700;
  --jaune-l2: #FFE9BE;
  --jaune-l1: #FFD788;
  --jaune: #FFBA31;
  --jaune-f1: #EAA10F;
  --jaune-f2: #B77D08;
  --orange-l2: #FFD7B9;
  --orange-l1: #FFAF73;
  --orange: #FF791F;
  --orange-f1: #BF4D00;
  --orange-f2: #993A00;
  --rouge-l2: #FFCFCF;
  --rouge-l1: #FF8484;
  --rouge: #E33232;
  --rouge-f1: #AF1B1B;
  --rouge-f2: #8F0909;
  --rose-l2: #F6D1E4;
  --rose-l1: #EA94C1;
  --rose: #E52E97;
  --rose-f1: #C11F84;
  --rose-f2: #931161;
  --violet-l2: #E8DBF2;
  --violet-l1: #AB79D3;
  --violet: #A518E2;
  --violet-f1: #700BA2;
  --violet-f2: #511472;
  --brun-l2: #ECCCB6;
  --brun-l1: #C18E6C;
  --brun: #8E4C20;
  --brun-f1: #5B2E15;
  --brun-f2: #411C08;
  --gris-l2: #F2F2F2;
  --gris-l1: #E1E1E1;
  --gris: #BBBBBB;
  --gris-f1: #4D4D4D;
  --gris-f2: #222222;
  --blanc: #fff;
  --noir: #000;
}


/* 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, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, 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;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

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; }

sub, sup {
  /* Specified in % so that the sup/sup is the right size relative to the surrounding text */
  font-size: 75%;
  /* Zero out the line-height so that it doesn't interfere with the positioning that follows */
  line-height: 0;
  /* Where the magic happens: makes all browsers position the sup/sup properly, relative to the surrounding text */
  position: relative;
  /* Note that if you're using Eric Meyer's reset.css, this is already set and you can remove this rule */
  vertical-align: baseline; }

sup {
  /* Move the superscripted text up */
  top: -0.5em; }

sub {
  /* Move the subscripted text down, but only half as far down as the superscript moved up */
  bottom: -0.25em; }

/* END RESET */

body {
  background-color: var(--bleu-l2);
  height: 100%; }

html {
  height: 100%; }

a {
  text-decoration: none; }

#app {
  width: 100%;
  max-width: 932px;
  height: 735px;
  position: relative;
  margin: 0 auto;
  top: 50px;
  overflow: hidden; }

.shadow {
  width: 932px;
  height: 50px;
  margin: 0 auto;
  position: relative;
  top: -50px;
  background-image: url("../assets/shadow-bottom-app@2x.png");
  background-size: 932px 50px;
  opacity: 1;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  -ms-transition-property: opacity;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  pointer-events: none; }

.shadow.hide {
  opacity: 0; }

.page {
  display: none;
  height: 560px;
  top: 75px;
  width: 100%;
  background-color: var(--bleu-l2);
  position: relative;
  margin: 0 auto;
  overflow: hidden; }

#hotelPage.expand, #restaurantPage.expand {
  height: 560px !important; }

#hotelPage, #restaurantPage {
  max-width: 932px;
  height: 0px;
  -moz-transition-property: height;
  -o-transition-property: height;
  -ms-transition-property: height;
  -webkit-transition-property: height;
  transition-property: height;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s; }

.page.displayed {
  display: block; }

.zone {
  -moz-transform: translate(-100%, 0);
  -o-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
  height: 375px;
  width: 100%;
  background-color: transparent;
  top: 0px;
  position: absolute;
  -moz-transition-property: all;
  -o-transition-property: all;
  -ms-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
  -webkit-transition-duration: 0.8s;
  transition-duration: 0.8s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s; }

.zone.notransition {
  -moz-transition-property: all;
  -o-transition-property: all;
  -ms-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0s;
  -o-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -webkit-transition-duration: 0s;
  transition-duration: 0s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s; }

.zone[data-position="left"] {
  -moz-transform: translate(-100%, 0);
  -o-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0); }

.zone[data-position="right"] {
  -moz-transform: translate(100%, 0);
  -o-transform: translate(100%, 0);
  -ms-transform: translate(100%, 0);
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0); }

.zone[data-position="center"] {
  -moz-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0); }

#header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 75px;
  margin: 0 auto; }

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px; }

#homepageFooter, #experienceFooter, #expanderFooter{
  position: relative;
  width: 100%;
  height: 100%;
}

#homepageFooter.hide {
  display: none; }

#experienceFooter {
  display: none; }

#experienceFooter.show {
  display: block; }

.shareBtn {
  width: 30px;
  height: 30px;
  display: inline-block;
  border-radius: 50%;
  cursor: pointer; }

.shareBtn:hover svg circle {
  fill: #00C46F; }

.cciFooterTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--gris-f1);
  text-align: center;
  display: inline-block;
  vertical-align: top;
}

.CCIlinktarget{
  background:  url("../assets/logo-cci-2.png") no-repeat 0 0;
  display: inline-block;
  background-size: 100% 100%;
  width: 202px;
  height: 56px;
  cursor: pointer;
  text-decoration: none;
  margin-top: 10px;
}

.footer_left{
  position: absolute;
  left: 0px;
  top: 50%;
  height: 30px;
  margin-top: 15px;
  transform: translate(0, -50%);
}

.footer_left a{
  margin: 0 16px;
}

.footer_left a.facebookShare, .footer_left a.twitterShare{
  display: inline-block;
  vertical-align: top;
  margin: 0 2px;
  position: relative;
  top: -6px;
}

.footer_left a.methodoBtnTxt, .footer_left a#FooterCookiesBt, .footer_left a#FooterCookiesBtMobile{
  margin: 0 16px 0 0px;
}

.footer_right{
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translate(0, -50%);
}

.AdemeFooterTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--gris-f1);
  text-align: center;
  display: inline-block;
  vertical-align: top;
  background: url("../assets/Endossement_Horiz_Sout-wb.png") no-repeat 0 0;
  width: 112px;
  height: 78px;
  background-size: 100% 100%;
}
.ademelinktarget{
  background:  url("../assets/ademe.svg") no-repeat 0 0;
  display: inline-block;
  background-size: 100% 100%;
  width: 49px;
  height: 56px;
  cursor: pointer;
  text-decoration: none;
  margin-top: 10px;
}

#RightAbout{
  margin: 0 10px 0 16px;
  position: relative;
  top: 40px;
}

.footer_link{
  display: inline-block;
  vertical-align: top;
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #00A140;
  cursor: pointer;
  position: relative;
}
.footer_link:after{
  content: "";
  position: absolute;
  background: #00A140;
  left: 0px;
  width: 100%;
  height: 2px;
  top: 100%;
  margin-top: 2px;
}

.CCILogo {
  width: 160px;
  height: auto;
  position: absolute;
  right: 180px;
  top: 50px;
  cursor: pointer; }

.AdemeLogo {
  width: 40px;
  height: auto;
  float: right;
  cursor: pointer; }

.edfLogo {
  width: 100px;
  height: auto;
  right: 0px;
  position: absolute;
  top: 55px;
  cursor: pointer; }

.CCILogo {
  right: 220px; }

#homepageFooter .edfLogo {
  width: 140px; }

#homepageFooter .AdemeLogo {
  right: 150px; }

#homepageFooter .cciFooterTxt {
  right: 260px; }

#homepageFooter .AdemeFooterTxt {
  right: 50px; }


.CCILogo:hover, .AdemeLogo:hover, .edfLogo:hover {
  opacity: 0.5; }

.conseilContainer {
  width: 230px;
  height: 45px;
  background-color: white;
  position: absolute;
  right: 0px;
  top: 30px;
  border-radius: 10px;
  cursor: pointer; }

.smallShadow {
  width: 250px;
  height: 15px;
  left: -10px;
  margin: 0 auto;
  position: relative;
  top: 30px;
  background-image: url("../assets/shadow-bottom-app@2x.png");
  background-size: 250px 15px;
  opacity: 1; }

.conseilTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #00427c;
  text-align: center;
  display: block;
  position: relative;
  top: 15px; }

.appHeader {
  position: absolute;
  height: 120px;
  width: 100%;
  background-color: white;
  top: 0px; }

.appBody {
  position: absolute;
  top: 120px;
  height: 375px;
  width: 100%;
  background-color: white;
  overflow: hidden; }

.appFooter {
  position: absolute;
  top: 495px;
  display: block;
  height: 560px;
  width: 100%;
  overflow: hidden;
  -moz-transition-property: top;
  -o-transition-property: top;
  -ms-transition-property: top;
  -webkit-transition-property: top;
  transition-property: top;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
  -webkit-transition-duration: 0.8s;
  transition-duration: 0.8s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s; }

.appFooter.expand {
  top: 0px; }

#appTitle {
  cursor: pointer;
  width: 256px;
  height: 73px;
  position: absolute;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  top: -8px; }

#appTitle:hover {
  opacity: 0.5; }

.appBaseline {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 18px;
  text-align: center;
  position: relative;
  top: 0px;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  color: var(--gris-f1); }

.appBaseline.show {
  opacity: 1; }

#appBaseline.hide {
  display: none; }

#headerWrapper {
  position: relative;
  top: 0;
  -moz-transition-property: top;
  -o-transition-property: top;
  -ms-transition-property: top;
  -webkit-transition-property: top;
  transition-property: top;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s; }

#headerWrapper.hide {
  top: -90px; }

#tablet_turn {
  width: 100%;
  height: 100%;
  background-color: var(--bleu-l2);
  position: absolute;
  z-index: 999;
  display: none;
  pointer-events: none; }

#tabletTitle {
  font-family: "Fira Sans", sans-serif;
  font-weight: 100;
  font-size: 42px;
  color: var(--gris-f1);
  text-align: center;
  margin-top: 34px;
  position: relative; }

#tabletBaseline {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: var(--gris-f1);
  text-align: center;
  position: relative;
  margin-top: 10px; }

.tabletAnimationContainer {
  margin-top: 160px;
  position: relative;
  width: 250px;
  height: auto;
  margin: 160px auto 0; }

#tabletInstruction {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: var(--gris-f1);
  text-align: center;
  position: relative;
  margin-top: 18px; }

#tabletInstructionSecond {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: var(--gris-f1);
  text-align: center;
  position: relative;
  margin-top: 10px; }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  #hotelPage, #restaurantPage {
    height: 560px !important; }
  #AdemeLogo {
    top: -20px; }
  #CCILogo {
    top: -20px; } }

#homepage {
  position: relative;
  background-color: var(--bleu-l2); }

#homepageMainLogo {
  background-image: url("../assets/home-hotelrestaurant.svg");
  width: 500px;
  display: block;
  height: 112px;
  background-repeat: no-repeat;
  z-index: 3;
  position: relative;
  left: 50%;
  margin-left: -13px;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  top: 13px;
  transition: top 0.2s ease-in-out; }

.animContainer {
  position: absolute;
  width: 624px;
  height: 300px;
  left: 50%;
  top: -30px;
  z-index: 1;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0); }

.iEfeuilles {
  position: absolute;
  width: 530px;
  height: auto;
  left: 50%;
  top: 9px;
  margin-left: -15px;
  z-index: 1;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  display: none; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .iEfeuilles {
    display: block; }
  .iEfeuilles.hide {
    display: none; }
  .animContainer {
    display: none; } }

#homepageSkyline {
  width: 100%;
  height: 160px;
  background-repeat: repeat-x;
  display: block;
  position: absolute;
  background-image: url("../assets/home-skyline.png");
  background-size: 1353px 160px;
  top: 103px;
  transition: top 0.2s ease-in-out;
  z-index: 1; }

#homepageSkyline.hide {
  display: none; }

#homepageMainTitle {
  width: 322px;
  height: 73px;
  position: relative;
  margin-top: 40px;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  transition: all 0.2s ease-in-out;
  opacity: 1; }

.homepageTransitionContainer {
  opacity: 1;
  transition: all 0.2s ease-in-out; }

.homepageTransitionContainer.transition {
  opacity: 0; }

#homepageMainTitle.transition {
  margin-top: -310px;
  opacity: 0; }

#homepageSkyline.transition {
  top: -150px; }

#homepageMainLogo.transition {
  top: -190px; }

#baseline {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: var(--gris-f1);
  text-align: center;
  display: block;
  margin-top: 20px;
  transition: all 0.2s ease-in-out; }

#interroContainer {
  width: 18px;
  height: 18px;
  background-color: #00C46F;
  border-radius: 50%;
  position: relative;
  left: 50%;
  margin-left: 215px;
  top: -16px;
  cursor: pointer; }

#homepageIntroduction {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--gris-f1);
  text-align: center;
  display: block;
  margin-top: 8px;
  line-height: 18px; }

#homepageQuestion {
  font-family: "Fira Sans", sans-serif;
  font-weight: 100;
  font-size: 24px;
  color: var(--gris-f1);
  text-align: center;
  display: block;
  position: absolute;
  width: 100%;
  top: 340px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out,top 0.4s ease-in-out;
  pointer-events: none; }

#homepageQuestion.transition {
  top: 660px;
  opacity: 0 !important; }

#homepageQuestion.fade {
  opacity: 1; }

.homepage_section {
  display: none;
  height: 560px; }

.homepage_section.display {
  display: block; }

.homebtn {
  cursor: pointer; }

.box {
  cursor: pointer; }

.home_chemin_btn {
  width: 107px;
  height: 107px;
  border-radius: 50%;
  background-color: #E9505F;
  position: absolute;
  top: 400px;
  left: 50%;
  transform-style: preserve-3d;
  perspective: 500px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-transform: translate(-50%, 0) rotateY(-180deg);
  -o-transform: translate(-50%, 0) rotateY(-180deg);
  -ms-transform: translate(-50%, 0) rotateY(-180deg);
  -webkit-transform: translate(-50%, 0) rotateY(-180deg);
  transform: translate(-50%, 0) rotateY(-180deg);
  transition: all 0.5s linear,top 0.4s ease-in-out,opacity 0.2s linear;
  cursor: pointer;
  opacity: 1; }

.home_chemin_btn.flip:hover {
  -moz-transform: translate(-50%, 0) rotateY(0deg) scale(1.05);
  -o-transform: translate(-50%, 0) rotateY(0deg) scale(1.05);
  -ms-transform: translate(-50%, 0) rotateY(0deg) scale(1.05);
  -webkit-transform: translate(-50%, 0) rotateY(0deg) scale(1.05);
  transform: translate(-50%, 0) rotateY(0deg) scale(1.05); }

.home_chemin_btn.transition {
  top: 560px;
  opacity: 0; }

.home_chemin_btn.flip {
  -moz-transform: translate(-50%, 0) rotateY(0deg) scale(0.99);
  -o-transform: translate(-50%, 0) rotateY(0deg) scale(0.99);
  -ms-transform: translate(-50%, 0) rotateY(0deg) scale(0.99);
  -webkit-transform: translate(-50%, 0) rotateY(0deg) scale(0.99);
  transform: translate(-50%, 0) rotateY(0deg) scale(0.99); }

.home_chemin_btn.pop {
  animation: pop 0.5s;
  animation-timing-function: ease-in-out; }

@keyframes pop {
  0% {
    transform: translate(-50%, 0) scale(1); }
  25% {
    transform: translate(-50%, 0) scale(0.95); }
  50% {
    transform: translate(-50%, 0) scale(1); }
  75% {
    transform: translate(-50%, 0) scale(1.05); }
  100% {
    transform: translate(-50%, 0) scale(1); } }

.home_chemin_btn_txt {
  position: absolute;
  top: 50%;
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: var(--gris-f1);
  top: 440px;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  opacity: 0;
  transition: opacity 0.3s ease-in-out, top 0.4s ease-in-out; }

.home_chemin_btn_txt.transition {
  top: 560px;
  opacity: 0 !important; }

.home_chemin_btn_txt.fade {
  opacity: 1; }

.btn_txt_hotel {
  margin-left: -190px; }

.btn_txt_restaurant {
  margin-left: 220px; }

.home_chemin_btn[data-chemin="hotel"] {
  margin-left: -60px; }

.home_chemin_btn[data-chemin="hotel"]:after {
  content: url("../assets/home-picto-hotel.svg"); }

.home_chemin_btn[data-chemin="restaurant"] {
  margin-left: 60px; }

.home_chemin_btn[data-chemin="restaurant"]:after {
  content: url("../assets/home-picto-restaurant.svg"); }

.illustration {
  width: 280px;
  height: 240px;
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -140px;
  top: 575px;
  transition: top 0.5s ease-in-out;
  -webkit-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.25); }

.illustration.show {
  top: 40px; }

#restaurantIllustration {
  -moz-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg); }

#hotelIllustration {
  -moz-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg); }

.btnAnnuleHomepage {
  width: 35px;
  height: 35px;
  background-color: #157874;
  left: 50%;
  position: absolute;
  border-radius: 50%;
  background-image: url("../assets/homepage-close.svg");
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: 8px 8px;
  cursor: pointer;
  opacity: 0;
  display: none;
  transition: opacity 0.3s ease-in-out; }

.btnAnnuleHomepage.show {
  opacity: 1; }

#hotelAnnule {
  top: 35px;
  margin-left: 90px; }

#restaurantAnnule {
  top: 55px;
  margin-left: 110px; }

.formTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 24px;
  position: relative;
  color: var(--gris-f1); }

.firstPartWrapper {
  display: block;
  position: absolute;
  top: 560px;
  width: 100%;
  text-align: center;
  transition: top 0.5s ease-in-out; }

.firstPartWrapper.show {
  top: 310px; }

.secondPartWrapper {
  display: block;
  position: absolute;
  top: 720px;
  width: 100%;
  text-align: center;
  transition: top 0.5s ease-in-out; }

.secondPartWrapper.show {
  top: 370px; }

.homepageInput {
  background-image: none;
  background-color: transparent;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 170px;
  height: 48px;
  border: 3px solid white;
  border-radius: 10px;
  margin-left: 10px;
  margin-right: 10px;
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: #00C46F;
  text-align: center; }

.homepageInput::-webkit-outer-spin-button,
.homepageInput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; }

.homepageInput:focus {
  border: 3px solid #00C46F;
  outline: none; }

.homepageInput::-webkit-input-placeholder {
  color: #00C46F;
  opacity: 0.3; }

.homepageInput::-moz-placeholder {
  color: #00C46F; }

.homepageInput:-ms-input-placeholder {
  color: #00C46F; }

.homepageInput:-moz-placeholder {
  color: #00C46F; }

.homepageInput.wrong {
  color: #E9505F;
  border: 3px solid #E9505F; }

.homepageInput.wrong:focus {
  border: 3px solid #E9505F;
  outline: none; }

.homepageInput.wrong::-webkit-input-placeholder {
  color: #E9505F; }

.homepageInput.wrong::-moz-placeholder {
  color: #E9505F; }

.homepageInput.wrong:-ms-input-placeholder {
  color: #E9505F; }

.homepageInput.wrong:-moz-placeholder {
  color: #E9505F; }

.ui-autocomplete {
  width: 226px;
  height: 231px;
  overflow: scroll;
  border-radius: 10px; }

.ui-menu-item {
  color: var(--gris-f1);
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  position: relative;
  display: block;
  padding-top: 5px;
  padding-bottom: 5px; }

.ui-menu-item div {
  background-color: white !important;
  border-color: white !important;
  color: var(--gris-f1) !important; }

.ui-menu-item:hover div {
  background-color: var(--gris-f1) !important;
  border-color: var(--gris-f1) !important;
  color: white !important; }

.ui-menu-item:after {
  content: "";
  width: 190px;
  height: 2px;
  background-color: var(--gris-f1);
  position: absolute;
  top: 100%;
  left: 5px; }

.autocomplete_commune {
  min-width: 230px;
  width: auto; }

.homepage_info_btn {
  width: 170px;
  height: 48px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #b2c7ce;
  display: block;
  position: absolute;
  top: 565px;
  left: 50%;
  margin-left: -85px;
  border-radius: 10px;
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: white;
  text-align: center;
  padding-top: 17px;
  transition: top 0.5s ease-in-out;
  text-transform: uppercase; }

.homepage_info_btn.active {
  background-color: #E9505F;
  cursor: pointer; }

.homepage_info_btn.show {
  top: 440px; }

#hotel_number_input {
  -moz-appearance: textfield; }

#restaurant_number_input {
  -moz-appearance: textfield; }


.zoneHeader.hide {
  display: none; }

.homeHeader.hide {
  display: none; }

.zoneInfoContainer {
  display: block;
  width: 100%;
  height: 100px;
  position: relative;
  top: 0px;
  -moz-transition-property: all;
  -o-transition-property: all;
  -ms-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s; }

.zoneInfoContainer.hide {
  top: -20px;
  opacity: 0; }

.homeHeaderTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--gris-f1);
  top: 35px;
  position: relative;
  display: block;
  text-align: center;
  line-height: 20px; }

.zoneName {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 24px;
  text-align: center;
  display: block;
  position: relative;
  top: 35px; }

.zoneName[data-zone="chambre"] {
  color: #7B84E0; }

.zoneName[data-zone="bain"] {
  color: #25AEC1; }

.zoneName[data-zone="exterieur"] {
  color: #738F1C; }

.zoneName[data-zone="reception"] {
  color: #F2A100; }

.zoneName[data-zone="technique"] {
  color: #EA592C; }

.zoneName[data-zone="cuisine"] {
  color: #EA592C; }

.zoneName[data-zone="salle"] {
  color: #F2A100; }

.zoneName[data-zone="sanitaire"] {
  color: #25AEC1; }

.zoneNombreAction {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  position: absolute;
  left: 50%;
  top: 76px;
  margin-left: -80px;
  color: var(--gris-f1);
  line-height: 28px;
  padding: 0 0 0 9px; }

.zoneNombreActionNombre {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #E9505F;
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: white;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 7px 0px 0px 9px;
  position: absolute;
  left: 50%;
  margin-left: -106px;
  top: 76px; }

.homeReturnBtn {
  width: 32px;
  height: 32px;
  position: absolute;
  left: 20px;
  top: 0px;
  cursor: pointer; }

.returnContainer {
  display: block;
  width: 200px;
  height: 55px;
  position: absolute;
  top: 40px;
  cursor: pointer; }

.returnContainer:hover .homeReturnBtn:after {
  background-image: url("../assets/button-back-hover.svg"); }

.returnContainer:hover .homeReturnTxt {
  color: #00C46F; }

.homeReturnBtn:after {
  content: "";
  position: absolute;
  width: 32px;
  height: 32px;
  background-image: url("../assets/button-back.svg"); }

.homeReturnTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #b2c7ce;
  position: absolute;
  left: 60px;
  top: 0px;
  line-height: 16px; }

.item[data-display="hide"] {
  display: none; }

.item[data-display="display"] {
  display: block; }

.btAmelio {
  cursor: pointer; }

.btAmelio use {
  -moz-transition-property: fill;
  -o-transition-property: fill;
  -ms-transition-property: fill;
  -webkit-transition-property: fill;
  transition-property: fill;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s; }

.btAmelio[data-display="unselected"] use, .btAmelio[data-display="unselected"] .use {
  -webkit-animation: scale 0.5s infinite alternate;
  -moz-animation: scale 0.5s infinite alternate;
  -o-animation: scale 0.5s infinite alternate;
  animation: scale 0.5s infinite alternate;
  transform-origin: 15px 15px;
  -moz-transform-origin: 15px 15px; }

use {
  fill: #ff505c; }

.btAmelio[data-display="selected"] use {
  fill: #00C46F; }

.btAmelio[data-display="selected"] .tocolored {
  fill: #00C46F !important; }

use svg {
  fill: inherit; }

.btAmelio use > svg {
  fill: yellow !important; }

.btAmelio[data-animation="scale"] use, .btAmelio[data-animation="scale"] .use {
  -webkit-animation: bouton 0.4s infinite;
  -moz-animation: bouton 0.4s infinite;
  -o-animation: bouton 0.4s infinite;
  animation: bouton 0.4s infinite;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  transform-origin: 15px 15px;
  -moz-transform-origin: 15px 15px; }

.porte-parent {
  perspective: 2200px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-box: fill-box; }

.zone[data-zone="chambre"] #porte-bain .porte {
  -moz-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  transform-box: fill-box; }

.zone[data-zone="chambre"] #porte-reception .porte {
  -moz-transform-origin: 100% 50%;
  transform-origin: 100% 50%; }

.zone[data-zone="bain"] #porte-chambre .porte {
  -moz-transform-origin: 0% 50%;
  transform-origin: 0% 50%; }

.zone[data-zone="reception"] #porte-technique .porte {
  -moz-transform-origin: 0% 50%;
  transform-origin: 0% 50%; }

.zone[data-zone="reception"] #porte-exterieur .porte {
  -moz-transform-origin: 0% 50%;
  transform-origin: 0% 50%; }

.zone[data-zone="cuisine"] #porte-salle .porte {
  -moz-transform-origin: 100% 50%;
  transform-origin: 100% 50%; }

.zone[data-zone="technique"] #porte-reception .porte {
  -moz-transform-origin: 0% 50%;
  transform-origin: 0% 50%; }

.zone[data-zone="sanitaire"] #porte-salle .porte {
  -moz-transform-origin: 0% 50%;
  transform-origin: 0% 50%; }

.zone[data-zone="salle"] #porte-sanitaire .porte {
  -moz-transform-origin: 0% 50%;
  transform-origin: 0% 50%; }

.zone[data-zone="salle"] #porte-cuisine .porte {
  -moz-transform-origin: 0% 50%;
  transform-origin: 0% 50%; }

.porte {
  transform: rotateY(0deg);
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
  transform-box: fill-box;
  cursor: pointer; }

.porte.left.int:hover {
  -moz-transform: rotateY(30deg);
  -o-transform: rotateY(30deg);
  -ms-transform: rotateY(30deg);
  -webkit-transform: rotateY(30deg);
  transform: rotateY(30deg);
  -moz-transition-property: all;
  -o-transition-property: all;
  -ms-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s; }

.porte.right.int:hover {
  -moz-transform: rotateY(30deg);
  -o-transform: rotateY(30deg);
  -ms-transform: rotateY(30deg);
  -webkit-transform: rotateY(30deg);
  transform: rotateY(30deg);
  -moz-transition-property: all;
  -o-transition-property: all;
  -ms-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s; }

.porte.left.ext:hover {
  -moz-transform: translate(-20px, 0);
  -o-transform: translate(-20px, 0);
  -ms-transform: translate(-20px, 0);
  -webkit-transform: translate(-20px, 0);
  transform: translate(-20px, 0);
  -moz-transition-property: all;
  -o-transition-property: all;
  -ms-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s; }

.porte.right.ext:hover {
  -moz-transform: translate(20px, 0);
  -o-transform: translate(20px, 0);
  -ms-transform: translate(20px, 0);
  -webkit-transform: translate(20px, 0);
  transform: translate(20px, 0);
  -moz-transition-property: all;
  -o-transition-property: all;
  -ms-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s; }

.goto {
  cursor: pointer; }

#goto-chambre {
  transition: all 0.3s ease-in-out;
  -moz-transform-origin: 650px 150px;
  transform-origin: 650px 150px; }

#goto-chambre:hover {
  transform: scale(1.05); }

/*
.appFooter:after{
	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 15px 0 15px;
	border-color: #ffffff transparent transparent transparent;
	position: absolute;
	left:50%;
	top:0;
	@include transform(translate(-50%,0));
} */
.appFooter.expand:after {
  top: 50px;
  border-width: 15px 15px 0 15px;
  z-index: 999;
  -moz-transform: translate(-50%, 0) rotate(180deg);
  -o-transform: translate(-50%, 0) rotate(180deg);
  -ms-transform: translate(-50%, 0) rotate(180deg);
  -webkit-transform: translate(-50%, 0) rotate(180deg);
  transform: translate(-50%, 0) rotate(180deg); }

.textNoAction {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: white;
  position: relative;
  display: block;
  text-align: center;
  top: 20px; }

.noActionContainer {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 65px;
  cursor: pointer;
  background: #05a660;
  background: -moz-linear-gradient(top, #05a660 0%, #00c46f 30%);
  background: -webkit-linear-gradient(top, #05a660 0%, #00c46f 30%);
  background: linear-gradient(to bottom, #05a660 0%, #00c46f 30%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05a660', endColorstr='#00c46f',GradientType=0 ); }

.noActionContainer.hide {
  display: none; }

.actionFooterContainer {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 65px;
  cursor: pointer;
  background: #05a660;
  background: -moz-linear-gradient(top, #05a660 0%, #00c46f 30%);
  background: -webkit-linear-gradient(top, #05a660 0%, #00c46f 30%);
  background: linear-gradient(to bottom, #05a660 0%, #00c46f 30%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05a660', endColorstr='#00c46f',GradientType=0 ); }

.actionFooterContainer.display {
  display: block; }

.retourContainer {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 65px;
  background: #05a660;
  background: -moz-linear-gradient(bottom, #05a660 0%, #00c46f 30%);
  background: -webkit-linear-gradient(bottom, #05a660 0%, #00c46f 30%);
  background: linear-gradient(to top, #05a660 0%, #00c46f 30%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05a660', endColorstr='#00c46f',GradientType=0 ); }

.retourContainer.display {
  display: block; }

.retourTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #fff;
  position: relative;
  display: block;
  text-align: right;
  top: 25px;
  margin-right: 70px;
  cursor: pointer; }

.retourFlecheContainer {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  position: absolute;
  background-color: #fff;
  overflow: hidden;
  cursor: pointer;
  right: 25px;
  top: 15px; }

.retourFleche {
  background-image: url("../assets/button-up-reverse.svg");
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  top: 0px;
  position: absolute;
  background-repeat: no-repeat; }

.retourFlecheContainer:hover .retourFleche {
  -webkit-animation: defile-reverse 1s infinite;
  -moz-animation: defile-reverse 1s infinite;
  -o-animation: defile-reverse 1s infinite;
  animation: defile-reverse 1s infinite; }

.moneyNumber {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--gris-f1);
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  top: 25px;
  display: inline-block; }

.moneyNumber:after {
  content: "économisés";
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: var(--gris-f1);
  margin-left: 5px; }

.actionsCounterContainer {
  width: 240px;
  height: 32px;
  background-color: white;
  position: absolute;
  top: 65px;
  right: 25px;
  display: block;
  opacity: 0;
  border-radius: 32px;
  transition: all 0.5s ease-in-out; }

.actionsCounterContainer.show {
  top: 15px;
  opacity: 1; }

.actionsCounterContainer.jump {
  -webkit-animation: bounce 0.5s infinite;
  -moz-animation: bounce 0.5s infinite;
  -o-animation: bounce 0.5s infinite;
  animation: bounce 0.5s infinite;
  animation-timing-function: default; }

.actionNumber {
  display: block;
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #00C46F;
  position: relative;
  left: 10px;
  top: 8px;
  display: inline-block; }

.footerActionTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #00C46F;
  top: 8px;
  margin-left: 10px;
  position: relative;
  display: inline-block; }

.actionFlecheContainer {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  position: absolute;
  background-color: #00C46F;
  right: 5px;
  top: 5px;
  overflow: hidden;
  cursor: pointer; }

.actionFleche {
  background-image: url("../assets/button-down.svg");
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  top: 0px;
  position: absolute;
  background-repeat: no-repeat; }

.actionFooterContainer:hover .actionFleche {
  -webkit-animation: defile 1s infinite;
  -moz-animation: defile 1s infinite;
  -o-animation: defile 1s infinite;
  animation: defile 1s infinite; }

.tabBtn {
  width: 206px;
  height: 42px;
  background-color: white;
  position: absolute;
  bottom: 0;
  left: 50%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  cursor: default; }

.actionTabBtn {
  -moz-transform: translate(-100%, 0);
  -o-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
  margin-left: -5px; }

.economieTabBtn {
  -moz-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  margin-left: 5px; }

.tabTxt {
  display: block;
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--gris-f1);
  position: relative;
  top: 10px;
  display: block;
  text-align: center; }

.tabBtn.inactive {
  background: linear-gradient(to top, #ccc 0%, #fff 50%) repeat scroll 0 0;
  height: 43px;
  width: 207px;
  border-radius: 5px 5px 0 0;
  cursor: pointer; }

.tabBtn.inactive .tabTxt {
  opacity: 0.4; }

.conseilLink {
  display: none; }

.conseilLink.show {
  display: block; }

.bilanWrapper {
  width: 100%;
  height: 495px;
  display: block;
  position: relative;
  background-color: white;
  top: 65px;
  overflow: hidden; }

.toggleContainer {
  width: 100%;
  height: 65px;
  top: 0;
  position: relative; }

.toggleBtnOuter {
  width: 44px;
  height: 24px;
  display: block;
  background-color: var(--gris-f1);
  border-radius: 20px;
  left: 50%;
  position: relative;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  top: 25px;
  cursor: pointer; }

.toggleBtnInner {
  width: 18px;
  height: 18px;
  position: relative;
  background-color: #00C46F;
  border-radius: 50%;
  position: relative;
  left: 3px;
  top: 3px;
  -moz-transition-property: left;
  -o-transition-property: left;
  -ms-transition-property: left;
  -webkit-transition-property: left;
  transition-property: left;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  -ms-transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s; }

.toggleBtnInner.toggled {
  left: 23px; }

.toggleTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--gris-f1);
  top: 28px;
  position: absolute;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  -ms-transition-property: opacity;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  -ms-transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s; }

.toggleTxt.notactive {
  opacity: 0.3; }

.toggleActionTxt {
  margin-left: -90px; }

.toggleBilanTxt {
  margin-left: 115px; }

.actionCaseContainer {
  width: 100%;
  height: 400px;
  display: block;
  position: absolute;
  overflow: scroll;
  left: 0;
  display: none;
  padding-top: 20px; }

.actionCaseContainer.hide {
  display: block; }

.bilanContainer {
  width: 100%;
  height: 415px;
  display: block;
  position: absolute;
  overflow: scroll;
  left: 0;
  overflow: hidden;
  padding-top: 30px; }

.bilanContainer.show {
  display: none; }

.actionCaseWrapper {
  width: 100%;
  height: auto;
  overflow: hidden; }

.ancreTemoinContainer {
  display: none !important; }

.ancreTemoinContainer.hide {
  display: none !important; }

.ancreImg {
  width: 22px;
  height: auto;
  position: absolute;
  left: 35px;
  top: 8px; }

.ancreTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--gris-f1);
  position: absolute;
  left: 65px;
  top: 12px; }

.mailBtn {
  width: 230px;
  height: 48px;
  background-color: #E9505F;
  position: absolute;
  border-radius: 10px 10px 10px 10px;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 0);
  cursor: pointer;
  transition: all 0.5s ease-in-out; }

.mailBtn.change {
  width: 108px;
  margin-left: 136px;
  border-radius: 0px 10px 10px 0;
}

.mailBtn.validate {
  background-color: #0b413a; }

.mailBtnTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: white;
  position: relative;
  display: block;
  text-align: center;
  top: 17px;
  margin-left: 25px; }

.mailBtnValidate {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: white;
  position: relative;
  display: none;
  text-align: center;
  top: 17px; }

.mailCheck {
  width: 17px;
  height: auto;
  position: absolute;
  right: 60px;
  top: 15px;
  display: none; }

.mailLogo {
  width: 19px;
  height: 13px;
  position: absolute;
  left: 15px;
  top: 17px; }

.mailBtn.change .mailLogo {
  display: none; }

.mailBtn.loading .mailLogo {
  display: none; }

.mailBtn.validate .mailLogo {
  display: none; }

.mailBtn.validate .mailCheck {
  display: block; }

.mailBtn.validate .mailBtnValidate {
  display: block; }

.mailBtn.change .mailBtnTxt {
  display: none; }

.mailSendTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: white;
  position: relative;
  display: none;
  text-align: center;
  top: 17px; }

.mailBtn.change .mailSendTxt {
  display: block; }

.mailBtn.loading .mailBtnTxt {
  display: none; }

.mailLoader {
  width: 20px;
  height: 20px;
  position: relative;
  left: 50%;
  margin-left: -10px;
  top: 15px;
  -webkit-animation: loading 2s infinite;
  -moz-animation: loading 2s infinite;
  -o-animation: loading 2s infinite;
  animation: loading 2s infinite;
  display: none; }

.mailLoader.show {
  display: block; }

.mailInput {
  background-image: none;
  background-color: transparent;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 268px;
  height: 48px;
  border: 3px solid #97DBD6;
  border-radius: 10px 0 0 10px;
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #0b413a;
  text-align: center;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, 0);
  margin-left: -52px;
  display: block;
  border-right: 0px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none; }

.mailInput.show {
  opacity: 1;
  pointer-events: all; }

.mailInput::-webkit-outer-spin-button,
.mailInput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; }

.mailInput:focus {
  outline: none;
  border-color: #E9505F; }

.mailInput::-webkit-input-placeholder {
  color: #97DBD6; }

.mailInput::-moz-placeholder {
  color: #97DBD6; }

.mailInput:-ms-input-placeholder {
  color: #97DBD6; }

.mailInput:-moz-placeholder {
  color: #97DBD6; }

.firstRow {
  width: 100%;
  min-height: 175px;
  margin-bottom: 5px;
  padding-left: 175px;
  display: table;
  clear: both; }

.secondRow {
  width: 100%;
  min-height: 175px;
  display: table;
  padding-left: 30px;
  clear: both; }

.secondRow.addBlank {
  margin-bottom: 100px; }

.restaurantBilanWrapper .secondRow {
  padding-left: 325px; }

.actionCase {
  width: 285px;
  min-height: 175px;
  border-radius: 10px;
  position: relative;
  margin-right: 10px;
  display: block;
  float: left;
  display: table-cell; }

.actionCase.bainCase {
  background-color: #B0E2EE; }

.actionCase.chambreCase {
  background-color: #D7D3F0; }

.actionCase.exterieurCase {
  background-color: #DBEDB9; }

.actionCase.receptionCase {
  background-color: #FEE9A3; }

.actionCase.techniqueCase {
  background-color: #FFD7BF; }

.actionCase.salleCase {
  background-color: #FEE9A3; }

.actionCase.sanitaireCase {
  background-color: #B0E2EE; }

.actionCase.cuisineCase {
  margin-top: 5px;
  background-color: #FFD7BF; }

.zoneTitleCase {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 17px;
  display: block;
  text-align: center;
  top: 15px;
  cursor: pointer;
  position: relative; }

.actionNumberContainerCase {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  position: absolute;
  top: 7px;
  right: 45px; }

.actionNumberCase {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 17px;
  position: absolute;
  left: 8px;
  top: 6px; }

.actionCase.bainCase .zoneTitleCase {
  color: #25AEC1; }

.actionCase.chambreCase .zoneTitleCase {
  color: #7B84E0; }

.actionCase.exterieurCase .zoneTitleCase {
  color: #738F1C; }

.actionCase.receptionCase .zoneTitleCase {
  color: #F2A100; }

.actionCase.techniqueCase .zoneTitleCase {
  color: #EA592C; }

.actionCase.salleCase .zoneTitleCase {
  color: #F2A100; }

.actionCase.sanitaireCase .zoneTitleCase {
  color: #25AEC1; }

.actionCase.cuisineCase .zoneTitleCase {
  color: #EA592C; }

.actionCase.empty .actionNumberContainerCase {
  background-color: white; }

.actionCase.full .actionNumberContainerCase {
  background-color: #00C46F; }

.actionCase.full .actionNumberCase {
  color: white; }

.actionCase.bainCase.empty .actionNumberCase {
  color: #25AEC1; }

.actionCase.chambreCase.empty .actionNumberCase {
  color: #7B84E0; }

.actionCase.exterieurCase.empty .actionNumberCase {
  color: #738F1C; }

.actionCase.receptionCase.empty .actionNumberCase {
  color: #F2A100; }

.actionCase.techniqueCase.empty .actionNumberCase {
  color: #EA592C; }

.actionCase.salleCase.empty .actionNumberCase {
  color: #F2A100; }

.actionCase.sanitaireCase.empty .actionNumberCase {
  color: #25AEC1; }

.actionCase.cuisineCase.empty .actionNumberCase {
  color: #EA592C; }

.actionCase.full .emptyCaseBtn {
  display: none; }

.actionCase.empty .emptyCaseBtn {
  display: block;
  width: 170px;
  height: 33px;
  background-color: white;
  border-radius: 5px;
  position: relative;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  cursor: pointer;
  top: 60px; }

.emptyBtnTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 11px;
  color: var(--gris-f1);
  position: relative;
  display: block;
  text-align: center;
  top: 10px; }

.actionCase.empty .fullCaseContainer {
  display: none; }

.actionCase.full .fullCaseContainer {
  display: block;
  position: relative;
  top: 0px;
  margin-top: 30px;
  margin-bottom: 10px;
  max-width: 208px;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  display: table; }

.actionListItem {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--gris-f1);
  display: block;
  margin-bottom: 5px;
  line-height: 14px;
  position: relative; }

.actionListItem:before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
  top: 4px;
  left: -10px;
  background-color: var(--gris-f1); }

.bilanActionsTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #00C46F;
  display: block;
  text-align: center;
  line-height: 20px;
  position: relative;
  margin-bottom: 20px; }

.bilanResumeTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #00C46F;
  display: block;
  text-align: center;
  line-height: 20px;
  position: relative;
  margin-bottom: 20px; }

.bilanPictoWrapper {
  display: block;
  width: 100%;
  height: 175px;
  position: relative;
  top: 15px; 
  text-align: center;
}

.bilanEnergyCase {
  display: inline-block;
  width: 150px;
  height: 175px;
  position: relative;
  margin: 0px; }

.bilanEnergyCase.hide {
  display: none; }

.pictoEnergy {
  width: 109px;
  height: 109px;
  border-radius: 50%;
  position: relative;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  cursor: pointer; }

.energyTitle {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  display: block;
  text-align: center;
  color: var(--gris-f1);
  position: relative;
  top: 10px; }

.energyEconomieValue {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  display: block;
  text-align: center;
  position: relative;
  top: 15px; }

.energyMoneyValue {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--gris-f1);
  display: block;
  text-align: center;
  position: relative;
  top: 20px; }

.bilanEnergyCase[data-energy="eau"] .pictoEnergy {
  background-image: url("../assets/result-water.svg"); }

.bilanEnergyCase[data-energy="eau"] .energyEconomieValue {
  color: #25AEC1; }

.bilanEnergyCase[data-energy="eau ACV"] .pictoEnergy {
  background-image: url("../assets/result-water_acv.svg"); }

.bilanEnergyCase[data-energy="eau ACV"] .energyEconomieValue {
  color: #9640BF; }

.bilanEnergyCase[data-energy="electricite"] .pictoEnergy {
  background-image: url("../assets/result-electricity.svg"); }

.bilanEnergyCase[data-energy="electricite"] .energyEconomieValue {
  color: #EA592C; }

.bilanEnergyCase[data-energy="fioul"] .pictoEnergy {
  background-image: url("../assets/result-fuel.svg"); }

.bilanEnergyCase[data-energy="fioul"] .energyEconomieValue {
  color: #7B84E0; }

.bilanEnergyCase[data-energy="gaz"] .pictoEnergy {
  background-image: url("../assets/result-gas.svg"); }

.bilanEnergyCase[data-energy="gaz"] .energyEconomieValue {
  color: #F2A100; }

  .bilanEnergyCase[data-energy="eau"] .energyEconomieValue {
  color: #F2A100; }

.bilanEnergyCase[data-energy="autres"] .pictoEnergy {
  background-image: url("../assets/result-other.svg"); }

.bilanEnergyCase[data-energy="autres"] .energyEconomieValue {
  color: #738F1C; }

.economieTotalContainer {
  width: 307px;
  height: 83px;
  border-radius: 10px;
  background-color: #00C46F;
  display: block;
  position: relative;
  top: 50px;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0); }

.economieTotalTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: white;
  display: block;
  text-align: center;
  position: relative;
  top: 15px; }

.economieTotalValue {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 30px;
  color: white;
  display: block;
  text-align: center;
  position: relative;
  top: 25px; }

#expander {
  width: 100%;
  max-width: 932px;
  height: 0px;
  background-color: white;
  position: absolute;
  top: 685px;
  z-index: 9;
  transition: height 0.5s ease-in-out;
  margin: 0 auto;
  left: 50%;
  transform: translate(-50%, 0);
  overflow: hidden; }

#expander.expand {
  height: auto;
  min-height: 100px;
  margin-bottom: 150px; }

#expander.legal {
  height: auto;
  min-height: 675px; }

#expanderFooter {
  position: relative;
  background-color: var(--bleu-l2);
  height: 100px;
}

#legalContainer {
  background-color: white;
  width: 380px;
  transition: height 0.5s ease-in-out;
  height: 0px;
  position: relative;
  display: block;
  margin: 0 auto;
  overflow: hidden;
  top: 15px; }

#legalContainer.show {
  height: 1080px; }

#temoignageContainer {
  width: 100%;
  height: auto;
  min-height: 410px;
  background-color: #ecf9f8;
  margin-top: 80px;
  display: none !important;
}

.legalQuestion {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--gris-f1);
  padding-left: 25px;
  position: relative;
  line-height: 19px; }

.legalQuestion2 {
  top: 10px;
  width: 90%; }

.legalQuestion2.error {
  color: #E9505F; }

.tickerContainer2.error {
  border-color: #E9505F; }

.tickerContainer {
  width: 16px;
  height: 16px;
  border: 2px solid var(--gris-f1);
  position: absolute;
  top: 0;
  border-radius: 3px;
  cursor: pointer; }

.tickerContainer2 {
  top: 45px; }

#legalTitle {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--gris-f1);
  opacity: 0.7;
  margin-top: 25px; }

#legalTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: var(--gris-f1);
  margin-top: 10px;
  line-height: 14px; }

#legalTxt a {
  color: #00C46F; }

#legalTxt .padded{
  padding-left: 30px;
  display: block;
}

.ticker {
  display: none; }

.ticker.show {
  display: block; }

#temoignageBorder {
  width: 100%;
  height: 18px;
  background-image: url(../assets/background-decoration.png);
  background-repeat: repeat-x;
  background-size: 19px 18px;
  top: -18px;
  position: relative; }

#temoignagePictoContainer {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background-image: url(../assets/pict-other-trash.svg);
  left: 50%;
  position: relative;
  transform: translate(-50%, 0);
  top: -60px; }

#temoignagePictoContainer.eau {
  background-image: url(../assets/pict-water.svg); }

#temoignagePictoContainer.electricite {
  background-image: url(../assets/pict-electricity.svg); }

#temoignagePictoContainer.dechet {
  background-image: url(../assets/pict-other-trash.svg); }

#temoignagePictoContainer.gaz {
  background-image: url(../assets/pict-gas.svg); }

#temoignagePictoContainer.fioul {
  background-image: url(../assets/pict-fuel.svg); }

#temoignagePictoContainer.autre {
  background-image: url(../assets/pict-other-soapShampoo.svg); }

#temoinEtab {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #00C46F;
  position: relative;
  top: -50px;
  text-align: center; }

#temoinLoc {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--gris-f1);
  position: relative;
  top: -45px;
  text-align: center; }

#temoinTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 100;
  font-size: 20px;
  color: var(--gris-f1);
  position: relative;
  top: -20px;
  max-width: 440px;
  left: 50%;
  transform: translate(-50%, 0);
  display: block;
  text-align: left;
  line-height: 25px;
  opacity: 1;
  transition: margin-left 0.8s ease-in-out, opacity 0.5s ease-in-out; }

#temoinTxt.translate {
  margin-left: -100px;
  opacity: 0; }

#temoinTxt.translateBack {
  margin-left: 100px;
  opacity: 0; }

#temoinFlecheContainer {
  position: relative;
  width: 75px;
  height: 40px;
  left: 50%;
  transform: translate(-50%, 0); }

#temoinTxt.notransition {
  transition: margin-left 0s ease-in-out, opacity 0s ease-in-out; }

#temoinTxt.fromleft {
  margin-left: 100px; }

#temoinTxt.fromright {
  margin-left: -100px; }

.temoinArrow {
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  background-image: url(../assets/button-up.svg);
  cursor: pointer; }

.backArrow {
  left: 0px;
  transform: rotate(90deg); }

.nextArrow {
  left: 10px;
  transform: rotate(-90deg); }

.quote {
  width: 42px;
  height: auto;
  position: relative;
  left: 50%; }

.upperQuote {
  margin-left: -270px;
  top: -20px; }

.bottomQuote {
  transform: rotate(180deg);
  margin-left: 200px;
  top: -30px; }

#temoignageHeaderContainer {
  opacity: 1;
  transition: opacity 0.3s linear; }

#temoignageHeaderContainer.hide {
  opacity: 0; }

.box {
  transform-origin: center center;
  -moz-transform-origin: center center;
  transition: all 0.2s linear; }

.box[data-etat="inflate"] {
  animation: jump 0.8s infinite;
  animation-timing-function: linear; }

.tooltip {
  position: absolute;
  width: 252px;
  min-height: 300px;
  height: 310px;
  padding: 15px;
  display: block;
  background-color: white;
  z-index: 1;
  left: 50%;
  top: 50%;
  -webkit-box-shadow: 0 6px 20px 0 #727272;
  box-shadow: 0 6px 20px 0 #727272;
  display: block;
  opacity: 0;
  transform-style: preserve-3d;
  perspective: 500px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate(-50%, -50%) rotateY(-180deg) translateZ(0);
  -moz-transition-property: all;
  -o-transition-property: all;
  -ms-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s; }

.tooltip.display {
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(0) scale(1);
  opacity: 1; }

.tooltip[data-energies="3"]{
  height: auto;
}

.tooltip[data-item="serviette"]{
  height: 340px;
}

/*
_::-webkit-full-page-media, _:future, :root .tooltip {
  @include transform(translate(-50%,150px) rotateY(-180deg) translateZ(0) scale(0.99));
}

_::-webkit-full-page-media, _:future, :root .tooltip.display {
  @include transform(translate(-50%,150px) rotateY(0deg) translateZ(0) scale(0.99));
}

*/
.tooltipCloseBtn {
  width: 18px;
  height: 18px;
  position: absolute;
  right: 15px;
  top: 19px;
  cursor: pointer; }

.itemName {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 17px;
  position: relative;
  color: #7b84e0; }

.actionContainer {
  width: 100%;
  position: relative;
  top: 0px;
  margin-top: 10px;
  height: auto;
  display: block; }

.tooltip[data-zone="chambre"] .itemName {
  color: #7B84E0; }

.tooltip[data-zone="chambre"] .tooltipCloseBtn line {
  stroke: #7B84E0; }

.tooltip[data-zone="bain"] .itemName {
  color: #25AEC1; }

.tooltip[data-zone="bain"] .tooltipCloseBtn line {
  stroke: #25AEC1; }

.tooltip[data-zone="exterieur"] .itemName {
  color: #738F1C; }

.tooltip[data-zone="exterieur"] .tooltipCloseBtn line {
  stroke: #738F1C; }

.tooltip[data-zone="reception"] .itemName {
  color: #F2A100; }

.tooltip[data-zone="reception"] .tooltipCloseBtn line {
  stroke: #F2A100; }

.tooltip[data-zone="technique"] .itemName {
  color: #EA592C; }

.tooltip[data-zone="technique"] .tooltipCloseBtn line {
  stroke: #EA592C; }

.tooltip[data-zone="cuisine"] .itemName {
  color: #EA592C; }

.tooltip[data-zone="cuisine"] .tooltipCloseBtn line {
  stroke: #EA592C; }

.tooltip[data-zone="salle"] .itemName {
  color: #F2A100; }

.tooltip[data-zone="salle"] .tooltipCloseBtn line {
  stroke: #F2A100; }

.tooltip[data-zone="sanitaire"] .itemName {
  color: #25AEC1; }

.tooltip[data-zone="sanitaire"] .tooltipCloseBtn line {
  stroke: #25AEC1; }

.tooltip[data-state="form"] .actionContainer {
  display: none; }

.actionTitle {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 12px;
  position: relative;
  color: var(--gris-f1);
  left: 0px;
  top: 0px; }

.actionTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  position: relative;
  line-height: 15px;
  color: var(--gris-f1);
  left: 0px;
  top: 0px;
  display: block;
  margin-bottom: 2px;
  max-width: 250px; }

.energyTxtContainer {
  display: block;
  position: relative;
  left: 0px; }

.secondEnergyTxtContainer, .thirdEnergyTxtContainer {
  left: 0px;
  display: none; }

.secondEnergyTxtContainer.display,  .thirdEnergyTxtContainer.display{
  display: block; }

.energyIcon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: relative;
  left: 0px;
  top: 0px;
  display: inline-block;
  background-size: 100% 100%;
}

.energyIcon[data-energy='eau'] {
  background-image: url("../assets/pict-water.svg"); }

.energyIcon[data-energy='electricite'] {
  background-image: url("../assets/pict-electricity.svg"); }

.energyIcon[data-energy='fioul'] {
  background-image: url("../assets/pict-fuel.svg"); }

.energyIcon[data-energy='gaz'] {
  background-image: url("../assets/pict-gas.svg"); }

.energyIcon[data-energy='savon'] {
  background-image: url("../assets/pict-other-soapShampoo.svg"); }

.energyIcon[data-energy='dechet'] {
  background-image: url("../assets/pict-other-trash.svg"); }

.energyIcon[data-energy='carbone'] {
  background-image: url("../assets/pict-other-trash.svg"); }

  .energyIcon[data-energy='eau ACV'] {
  background-image: url("../assets/pict-water_acv.svg"); }

.energyName {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--gris-f1);
  margin-left: 5px;
  top: -5px;
  position: relative;
  display: inline-block; }

.energyValue {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  top: -5px;
  position: relative;
  font-size: 12px;
  color: var(--gris-f1);
  display: inline-block; }

.energyUnit {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 12px;
  position: relative;
  top: -5px;
  color: var(--gris-f1);
  display: inline-block; }

.changeEnergyLink {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #00C46F;
  text-decoration: underline;
  top: -5px;
  position: relative;
  margin-left: 10px;
  cursor: pointer;
  display: none; }

.changeEnergyLink.display {
  display: inline-block; }

.tooltip[data-state="form"] .evolutionContainer {
  display: none; }

.evolutionContainer {
  display: block;
  background-color: #ecf9f8;
  width: 282px;
  height: 100px;
  margin-top: 5px;
  position: relative;
  padding-top: 10px;
  left: -15px;
  padding-bottom: 10px; }

.evolutionContainerData {
  display: block; }

.evolutionContainerNoData {
  display: none; }

.evolutionContainerData.nodata {
  display: none; }

.evolutionContainerNoData.nodata {
  display: block; }

.evolutionTitle {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 12px;
  position: relative;
  color: var(--gris-f1);
  left: 15px;
  top: 0px;
  display: block;
  margin-bottom: 3px; }

.evolutionContainerNoData .evolutionTitle {
  text-align: center;
  display: block;
  left: 0;
  top: 45px; }

.evolutionActuel {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  position: relative;
  color: var(--gris-f1);
  left: 15px;
  top: 0px;
  display: block;
  margin-bottom: 3px; }

.evolutionAvenir {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  position: relative;
  color: var(--gris-f1);
  left: 15px;
  top: 0px;
  display: block;
  margin-top: 5px;
  margin-bottom: 3px; }

.evolBarActuel {
  width: 240px;
  height: 20px;
  background-color: #257563;
  border-radius: 20px;
  position: relative;
  top: 0px;
  left: 15px; }

.evolBarActuelTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 11px;
  color: white;
  position: relative;
  display: block;
  text-align: center;
  top: 4px; }

.evolBarAvenir {
  width: 240px;
  height: 20px;
  background-color: #00C46F;
  border-radius: 20px;
  position: relative;
  top: 0px;
  left: 15px; }

.evolBarAvenirMarker {
  position: relative;
  height: 20px;
  background-color: #257563;
  left: 0;
  width: 50px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px; }

.evolBarAvenirRest {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 11px;
  color: #257563;
  position: relative;
  display: inline-block;
  text-align: center;
  top: 0px;
  left: 10px; }

.evolBarAvenirEco {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 11px;
  color: #00C46F;
  position: relative;
  display: block;
  text-align: right;
  top: -13px;
  right: 10px; }

.valideBtn {
  width: 200px;
  height: 33px;
  background-color: #E9505F;
  position: relative;
  border-radius: 5px;
  margin-top: 10px;
  left: 50%; 
  transform: translate(-50%, 0);
}

.valideBtn.checked {
  background-color: white;
  opacity: 1; }

/*

.valideBtn.checked:hover{
	background-color: $selectedGreen;
	opacity: 1;
}

.valideBtn:hover{
	-webkit-animation: scale-once 0.5s;
    -moz-animation: scale-once 0.5s;
    -o-animation: scale-once 0.5s;
    animation:scale-once 0.5s;
    animation-fill-mode: forwards;
}

.valideBtn.checked:hover .annuleBtnTxt{
	display: none;
}

.valideBtn.checked:hover .remettreBtnTxt{
	display: block;
}

*/
.valideBtn.checked .valideBtnTxt {
  display: none; }

.valideBtn.checked .annuleBtnTxt {
  display: block; }

.valideBtnTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 11px;
  color: white;
  position: relative;
  display: block;
  text-align: center;
  top: 10px;
  cursor: pointer; }

.annuleBtnTxt {
  display: none;
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #00C46F;
  position: relative;
  text-align: center;
  top: 10px;
  cursor: pointer;
  text-decoration: underline; }

.remettreBtnTxt {
  display: none;
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 11px;
  color: white;
  position: relative;
  text-align: center;
  top: 10px;
  cursor: pointer; }

.tooltip[data-state="form"] .valideBtn {
  opacity: 0.3;
  background-color: #00C46F;
  pointer-events: none; }

.energyFormContainer {
  display: none; }

.tooltip[data-state="form"] .energyFormContainer {
  display: block;
  width: 245px;
  height: 200px;
  background-color: #FEE9A3;
  position: relative;
  left: 50%;
  border-radius: 5px;
  transform: translate(-50%, 0px);
  overflow: hidden; 
  margin: 15px 0;
}

.energyQuestion {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--gris-f1);
  position: relative;
  display: block;
  text-align: center;
  top: 30px;
  margin-bottom: 40px; }

.energySelectContainer {
  display: block;
  position: relative;
  width: 100%;
  height: 20px;
  margin-bottom: 10px; }

.energySelectButton {
  width: 14px;
  height: 15px;
  border: 1px solid var(--gris-f1);
  border-radius: 50%;
  display: inline-block;
  margin-left: 35px;
  cursor: pointer; }

.energyProposed.hide {
  display: none; }

.energySelectButton.hide {
  display: none; }

.energySelectContainer.hide {
  display: none; }

.energySelectButton.check:after {
  content: "";
  width: 10px;
  height: 10px;
  display: block;
  background-color: var(--gris-f1);
  border-radius: 50%;
  left: 50%;
  position: relative;
  -moz-transform: translate(-50%, 2.5px);
  -o-transform: translate(-50%, 2.5px);
  -ms-transform: translate(-50%, 2.5px);
  -webkit-transform: translate(-50%, 2.5px);
  transform: translate(-50%, 2.5px); }

.energySelectButton:hover:after {
  content: "";
  width: 10px;
  height: 10px;
  display: block;
  background-color: var(--gris-f1);
  border-radius: 50%;
  left: 50%;
  position: relative;
  -moz-transform: translate(-50%, 2.5px);
  -o-transform: translate(-50%, 2.5px);
  -ms-transform: translate(-50%, 2.5px);
  -webkit-transform: translate(-50%, 2.5px);
  transform: translate(-50%, 2.5px); }

.energyProposed {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--gris-f1);
  display: inline-block;
  top: -5px;
  position: relative;
  margin-left: 0px;
  cursor: pointer; }

.energySelectBtn {
  width: 105px;
  height: 27px;
  background-color: white;
  border-radius: 5px;
  position: relative;
  left: 50%;
  -moz-transform: translate(-50%, 5px);
  -o-transform: translate(-50%, 5px);
  -ms-transform: translate(-50%, 5px);
  -webkit-transform: translate(-50%, 5px);
  transform: translate(-50%, 5px); }

.energySelectBtnTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 11px;
  color: var(--gris-f1);
  display: block;
  text-align: center;
  top: 8px;
  position: relative;
  opacity: 0.3; }

.energySelectBtn.active {
  pointer-events: all;
  cursor: pointer; }

.energySelectBtn.active .energySelectBtnTxt {
  opacity: 1; }

.helper {
  position: fixed;
  width: 220px;
  height: 55px;
  display: block;
  background-color: white;
  z-index: 1;
  left: 50%;
  top: 100px;
  display: none;
  pointer-events: none;
  -webkit-box-shadow: 0 6px 20px 0 #727272;
  box-shadow: 0 6px 20px 0 #727272; }

.helper.show {
  display: block; }

.helperItem {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 12px;
  position: absolute;
  top: 10px;
  left: 10px;
  color: #7b84e0; }

.potentiel {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 10px;
  position: absolute;
  top: 30px;
  left: 10px;
  color: #257563; }

.starsContainer {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  top: 25px;
  left: 60px; }

.star {
  width: 18px;
  height: 16px;
  display: inline-block;
  background-image: url("../assets/level-on.svg"); }

.star.off {
  background-image: url("../assets/level-off.svg"); }

.helperItem[data-zone="chambre"] {
  color: #7B84E0; }

.helperItem[data-zone="bain"] {
  color: #25AEC1; }

.helperItem[data-zone="exterieur"] {
  color: #738F1C; }

.helperItem[data-zone="reception"] {
  color: #F2A100; }

.helperItem[data-zone="technique"] {
  color: #EA592C; }

.helperItem[data-zone="cuisine"] {
  color: #EA592C; }

.helperItem[data-zone="salle"] {
  color: #F2A100; }

.helperItem[data-zone="sanitaire"] {
  color: #25AEC1; }

.helperItem[data-zone="sanitaire"] .tooltipCloseBtn line {
  color: #25AEC1; }

@-webkit-keyframes defile {
  0% {
    transform: translate(0, -20px);
    transform: translate(0, -20px); }
  100% {
    transform: translate(0, 20px);
    transform: translate(0, 20px); } }

@-moz-keyframes defile {
  0% {
    -ms-transform: translate(0, -20px);
    transform: translate(0, -20px); }
  100% {
    -ms-transform: translate(0, 20px);
    transform: translate(0, 20px); } }

@-o-keyframes defile {
  0% {
    transform: translate(0, -20px);
    transform: translate(0, -20px); }
  100% {
    transform: translate(0, 20px);
    transform: translate(0, 20px); } }

@keyframes defile {
  0% {
    transform: translate(0, -20px);
    transform: translate(0, -20px); }
  100% {
    transform: translate(0, 20px);
    transform: translate(0, 20px); } }

@-webkit-keyframes loading {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@-moz-keyframes loading {
  0% {
    -ms-transform: rotate(0deg); }
  100% {
    -ms-transform: rotate(360deg); } }

@-o-keyframes loading {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes loading {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@-webkit-keyframes defile-reverse {
  0% {
    -ms-transform: translate(0, 35px);
    transform: translate(0, 35px); }
  100% {
    -ms-transform: translate(0, -35px);
    transform: translate(0, -35px); } }

@-moz-keyframes defile-reverse {
  0% {
    -ms-transform: translate(0, 35px);
    transform: translate(0, 35px); }
  100% {
    -ms-transform: translate(0, -35px);
    transform: translate(0, -35px); } }

@-o-keyframes defile-reverse {
  0% {
    -ms-transform: translate(0, 35px);
    transform: translate(0, 35px); }
  100% {
    -ms-transform: translate(0, -35px);
    transform: translate(0, -35px); } }

@keyframes defile-reverse {
  0% {
    -ms-transform: translate(0, 35px);
    transform: translate(0, 35px); }
  100% {
    -ms-transform: translate(0, -35px);
    transform: translate(0, -35px); } }

@-webkit-keyframes jump {
  0% {
    -ms-transform: translate(0, 0px);
    transform: translate(0, 0px); }
  25% {
    -ms-transform: translate(0, -5px);
    transform: translate(0, -5px); }
  50% {
    -ms-transform: translate(0, 0px);
    transform: translate(0, 0px); }
  75% {
    -ms-transform: translate(0, 5px);
    transform: translate(0, 5px); } }

@-moz-keyframes jump {
  0% {
    -ms-transform: translate(0, 0px);
    transform: translate(0, 0px); }
  25% {
    -ms-transform: translate(0, -5px);
    transform: translate(0, -5px); }
  50% {
    -ms-transform: translate(0, 0px);
    transform: translate(0, 0px); }
  75% {
    -ms-transform: translate(0, 5px);
    transform: translate(0, 5px); } }

@-o-keyframes jump {
  0% {
    -ms-transform: translate(0, 0px);
    transform: translate(0, 0px); }
  25% {
    -ms-transform: translate(0, -5px);
    transform: translate(0, -5px); }
  50% {
    -ms-transform: translate(0, 0px);
    transform: translate(0, 0px); }
  75% {
    -ms-transform: translate(0, 5px);
    transform: translate(0, 5px); } }

@keyframes jump {
  0% {
    -ms-transform: translate(0, 0px);
    transform: translate(0, 0px); }
  25% {
    -ms-transform: translate(0, -5px);
    transform: translate(0, -5px); }
  50% {
    -ms-transform: translate(0, 0px);
    transform: translate(0, 0px); }
  75% {
    -ms-transform: translate(0, 5px);
    transform: translate(0, 5px); } }

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(0); }
  25% {
    -webkit-transform: translateY(-2px); }
  50% {
    -webkit-transform: translateY(0px); }
  75% {
    -webkit-transform: translateY(2px); }
  100% {
    -webkit-transform: translateY(0px); } }

@keyframes bounce {
  0% {
    transform: translateY(0); }
  25% {
    transform: translateY(-2px); }
  50% {
    transform: translateY(0px); }
  75% {
    transform: translateY(2px); }
  100% {
    transform: translateY(0px); } }

@-webkit-keyframes breath {
  0% {
    transform: scale(1, 1); }
  50% {
    transform: scale(1, 1.1); }
  100% {
    transform: scale(1, 1); } }

@-moz-keyframes breath {
  0% {
    transform: scale(1, 1); }
  50% {
    transform: scale(1, 1.1); }
  100% {
    transform: scale(1, 1); } }

@-o-keyframes breath {
  0% {
    transform: scale(1, 1); }
  50% {
    transform: scale(1, 1.1); }
  100% {
    transform: scale(1, 1); } }

@keyframes breath {
  0% {
    transform: scale(1, 1); }
  50% {
    transform: scale(1, 1.1); }
  100% {
    transform: scale(1, 1); } }

@-webkit-keyframes smoke {
  0% {
    transform: translate(0, 0); }
  100% {
    transform: translate(25px, -43.5px); } }

@-moz-keyframes smoke {
  0% {
    transform: translate(0, 0); }
  100% {
    transform: translate(25px, -43.5px); } }

@-o-keyframes smoke {
  0% {
    transform: translate(0, 0); }
  100% {
    transform: translate(25px, -43.5px); } }

@keyframes smoke {
  0% {
    transform: translate(0, 0); }
  100% {
    transform: translate(25px, -43.5px); } }

@-webkit-keyframes cut {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(0.85, 1); }
  100% {
    transform: scale(1); } }

@-moz-keyframes cut {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(0.85, 1); }
  100% {
    transform: scale(1); } }

@-o-keyframes cut {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(0.85, 1); }
  100% {
    transform: scale(1); } }

@keyframes cut {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(0.85, 1); }
  100% {
    transform: scale(1); } }

@-webkit-keyframes scale {
  0% {
    -ms-transform: scale(1);
    transform: scale(1); }
  100% {
    -ms-transform: scale(1.2);
    transform: scale(1.2); } }

@-moz-keyframes scale {
  0% {
    -ms-transform: scale(1);
    transform: scale(1); }
  100% {
    -ms-transform: scale(1.2);
    transform: scale(1.2); } }

@-o-keyframes scale {
  0% {
    -ms-transform: scale(1);
    transform: scale(1); }
  100% {
    -ms-transform: scale(1.2);
    transform: scale(1.2); } }

@keyframes scale {
  0% {
    -ms-transform: scale(1);
    transform: scale(1); }
  100% {
    -ms-transform: scale(1.2);
    transform: scale(1.2); } }

@-webkit-keyframes scale-once {
  0% {
    -ms-transform: scale(1);
    transform: scale(1); }
  100% {
    -ms-transform: scale(1.05);
    transform: scale(1.05); } }

@-moz-keyframes scale-once {
  0% {
    -ms-transform: scale(1);
    transform: scale(1); }
  100% {
    -ms-transform: scale(1.05);
    transform: scale(1.05); } }

@-o-keyframes scale-once {
  0% {
    -ms-transform: scale(1);
    transform: scale(1); }
  100% {
    -ms-transform: scale(1.05);
    transform: scale(1.05); } }

@keyframes scale-once {
  0% {
    -ms-transform: scale(1);
    transform: scale(1); }
  100% {
    -ms-transform: scale(1.05);
    transform: scale(1.05); } }

@-webkit-keyframes rotate {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@-moz-keyframes rotate {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@-o-keyframes rotate {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes rotate {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@-webkit-keyframes moveArm {
  0% {
    transform: translate(1px, 0); }
  50% {
    transform: translate(-4px, 0); }
  100% {
    transform: translate(1px, 0); } }

@-moz-keyframes moveArm {
  0% {
    transform: translate(1px, 0); }
  50% {
    transform: translate(-4px, 0); }
  100% {
    transform: translate(1px, 0); } }

@-o-keyframes moveArm {
  0% {
    transform: translate(1px, 0); }
  50% {
    transform: translate(-4px, 0); }
  100% {
    transform: translate(1px, 0); } }

@keyframes moveArm {
  0% {
    transform: translate(1px, 0); }
  50% {
    transform: translate(-4px, 0); }
  100% {
    transform: translate(1px, 0); } }

@-webkit-keyframes baille {
  0% {
    transform: rotate(30deg); }
  20% {
    transform: rotate(0deg); }
  30% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(30deg); }
  100% {
    transform: rotate(30deg); } }

@-moz-keyframes baille {
  0% {
    transform: rotate(30deg); }
  20% {
    transform: rotate(0deg); }
  30% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(30deg); }
  100% {
    transform: rotate(30deg); } }

@-o-keyframes baille {
  0% {
    transform: rotate(30deg); }
  20% {
    transform: rotate(0deg); }
  30% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(30deg); }
  100% {
    transform: rotate(30deg); } }

@keyframes baille {
  0% {
    transform: rotate(30deg); }
  20% {
    transform: rotate(0deg); }
  30% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(30deg); }
  100% {
    transform: rotate(30deg); } }

@-webkit-keyframes mouth {
  0% {
    transform: scale(0.4); }
  20% {
    transform: scale(1); }
  30% {
    transform: scale(1); }
  50% {
    transform: scale(0.4); }
  100% {
    transform: scale(0.4); } }

@-moz-keyframes mouth {
  0% {
    transform: scale(0.4); }
  20% {
    transform: scale(1); }
  30% {
    transform: scale(1); }
  50% {
    transform: scale(0.4); }
  100% {
    transform: scale(0.4); } }

@-o-keyframes mouth {
  0% {
    transform: scale(0.4); }
  20% {
    transform: scale(1); }
  30% {
    transform: scale(1); }
  50% {
    transform: scale(0.4); }
  100% {
    transform: scale(0.4); } }

@keyframes mouth {
  0% {
    transform: scale(0.4); }
  20% {
    transform: scale(1); }
  30% {
    transform: scale(1); }
  50% {
    transform: scale(0.4); }
  100% {
    transform: scale(0.4); } }

@-webkit-keyframes anim-lavelinge {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@-moz-keyframes anim-lavelinge {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@-o-keyframes anim-lavelinge {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes anim-lavelinge {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@-webkit-keyframes nage {
  0% {
    transform: translate(-120px, 0); }
  25% {
    transform: translate(-40px, 0); }
  50% {
    transform: translate(40px, 0); }
  75% {
    transform: translate(-40px, 0); }
  100% {
    transform: translate(-120px, 0); } }

@-moz-keyframes nage {
  0% {
    transform: translate(-120px, 0); }
  25% {
    transform: translate(-40px, 0); }
  50% {
    transform: translate(40px, 0); }
  75% {
    transform: translate(-40px, 0); }
  100% {
    transform: translate(-120px, 0); } }

@-o-keyframes nage {
  0% {
    transform: translate(-120px, 0); }
  25% {
    transform: translate(-40px, 0); }
  50% {
    transform: translate(40px, 0); }
  75% {
    transform: translate(-40px, 0); }
  100% {
    transform: translate(-120px, 0); } }

@keyframes nage {
  0% {
    transform: translate(-120px, 0) scaleX(1); }
  25% {
    transform: translate(-40px, 0) scaleX(1); }
  50% {
    transform: translate(40px, 0) scaleX(1); }
  50.001% {
    transform: translate(40px, 0) scaleX(-1); }
  75% {
    transform: translate(-40px, 0) scaleX(-1); }
  100% {
    transform: translate(-120px, 0) scaleX(-1); } }

@-webkit-keyframes bouton {
  0% {
    transform: scale(1); }
  20% {
    transform: scale(0.7); }
  50% {
    transform: scale(1.4); }
  80% {
    transform: scale(0.8); }
  100% {
    transform: scale(1); } }

@-moz-keyframes bouton {
  0% {
    transform: scale(1); }
  20% {
    transform: scale(0.7); }
  50% {
    transform: scale(1.4); }
  80% {
    transform: scale(0.8); }
  100% {
    transform: scale(1); } }

@-o-keyframes bouton {
  0% {
    transform: scale(1); }
  20% {
    transform: scale(0.7); }
  50% {
    transform: scale(1.4); }
  80% {
    transform: scale(0.8); }
  100% {
    transform: scale(1); } }

@keyframes bouton {
  0% {
    transform: scale(1); }
  20% {
    transform: scale(0.7); }
  50% {
    transform: scale(1.4); }
  80% {
    transform: scale(0.8); }
  100% {
    transform: scale(1); } }

@-webkit-keyframes anim-tete-salle {
  0% {
    transform: rotate(10deg); }
  40% {
    transform: rotate(10deg); }
  60% {
    transform: rotate(-5deg); }
  80% {
    transform: rotate(-5deg); }
  100% {
    transform: rotate(10deg); } }

@-moz-keyframes anim-tete-salle {
  0% {
    transform: rotate(10deg); }
  40% {
    transform: rotate(10deg); }
  60% {
    transform: rotate(-5deg); }
  80% {
    transform: rotate(-5deg); }
  100% {
    transform: rotate(10deg); } }

@-o-keyframes anim-tete-salle {
  0% {
    transform: rotate(10deg); }
  40% {
    transform: rotate(10deg); }
  60% {
    transform: rotate(-5deg); }
  80% {
    transform: rotate(-5deg); }
  100% {
    transform: rotate(10deg); } }

@keyframes anim-tete-salle {
  0% {
    transform: rotate(10deg); }
  40% {
    transform: rotate(10deg); }
  60% {
    transform: rotate(-5deg); }
  80% {
    transform: rotate(-5deg); }
  100% {
    transform: rotate(10deg); } }

@-webkit-keyframes anim-bouche-salle {
  0% {
    transform: rotate(10deg); }
  40% {
    transform: rotate(10deg); }
  60% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(10deg); } }

@-moz-keyframes anim-bouche-salle {
  0% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(10deg); }
  100% {
    transform: rotate(0deg); } }

@-o-keyframes anim-bouche-salle {
  0% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(10deg); }
  100% {
    transform: rotate(0deg); } }

@keyframes anim-bouche-salle {
  0% {
    transform: scale(1, 0.6); }
  40% {
    transform: scale(1, 0.6); }
  55% {
    transform: scale(1); }
  65% {
    transform: scale(1, 0.6); }
  70% {
    transform: scale(1); }
  75% {
    transform: scale(1, 0.6); }
  100% {
    transform: scale(1, 0.6); } }

@-webkit-keyframes anim-bras-sanitaires {
  0% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(10deg); }
  100% {
    transform: rotate(0deg); } }

@-moz-keyframes anim-bras-sanitaires {
  0% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(10deg); }
  100% {
    transform: rotate(0deg); } }

@-o-keyframes anim-bras-sanitaires {
  0% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(10deg); }
  100% {
    transform: rotate(0deg); } }

@keyframes anim-bras-sanitaires {
  0% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(10deg); }
  100% {
    transform: rotate(0deg); } }

@-webkit-keyframes moveNuageA {
  0% {
    transform: translate(0, 0); }
  50% {
    transform: translate(155px, 0); }
  100% {
    transform: translate(0, 0); } }

@-moz-keyframes moveNuageA {
  0% {
    transform: translate(0, 0); }
  50% {
    transform: translate(155px, 0); }
  100% {
    transform: translate(0, 0); } }

@-o-keyframes moveNuageA {
  0% {
    transform: translate(0, 0); }
  50% {
    transform: translate(155px, 0); }
  100% {
    transform: translate(0, 0); } }

@keyframes moveNuageA {
  0% {
    transform: translate(0, 0); }
  50% {
    transform: translate(155px, 0); }
  100% {
    transform: translate(0, 0); } }

@-webkit-keyframes moveNuageB {
  0% {
    transform: translate(0, 0); }
  50% {
    transform: translate(50px, 0); }
  100% {
    transform: translate(0, 0); } }

@-moz-keyframes moveNuageB {
  0% {
    transform: translate(0, 0); }
  50% {
    transform: translate(50px, 0); }
  100% {
    transform: translate(0, 0); } }

@-o-keyframes moveNuageB {
  0% {
    transform: translate(0, 0); }
  50% {
    transform: translate(50px, 0); }
  100% {
    transform: translate(0, 0); } }

@keyframes moveNuageB {
  0% {
    transform: translate(0, 0); }
  50% {
    transform: translate(50px, 0); }
  100% {
    transform: translate(0, 0); } }

.mainWrapper {
  display: block;
  width: 800px;
  height: 400px;
  position: relative; }

.mainWrapper #nageur {
  display: block;
  -webkit-animation: nage 6s infinite;
  -moz-animation: nage 6s infinite;
  -o-animation: nage 6s infinite;
  animation: nage 6s infinite;
  animation-timing-function: ease-out;
  transform-origin: 258px 332px; }

.mainWrapper #item-fumee {
  display: block;
  -webkit-animation: smoke 2s infinite;
  -moz-animation: smoke 2s infinite;
  -o-animation: smoke 2s infinite;
  animation: smoke 2s infinite;
  animation-timing-function: linear; }

.mainWrapper #item-bras-cuisinierA {
  display: block;
  -webkit-animation: cut 1s infinite;
  -moz-animation: cut 1s infinite;
  -o-animation: cut 1s infinite;
  animation: cut 1s infinite;
  animation-timing-function: default;
  transform-origin: 737px 189px; }

.mainWrapper #couverture {
  -webkit-animation: breath 2s infinite;
  -moz-animation: breath 2s infinite;
  -o-animation: breath 2s infinite;
  animation: breath 2s infinite;
  transform-origin: 0px 220px; }

.mainWrapper .item-vmc.new {
  -webkit-animation: rotate 2s infinite;
  -moz-animation: rotate 2s infinite;
  -o-animation: rotate 2s infinite;
  animation: rotate 2s infinite;
  animation-timing-function: linear;
  transform-origin: 460px 88px; }

.mainWrapper #bras {
  display: block;
  -webkit-animation: moveArm 1s infinite;
  -moz-animation: moveArm 1s infinite;
  -o-animation: moveArm 1s infinite;
  animation: moveArm 1s infinite;
  animation-timing-function: default; }

.mainWrapper #atable-bras {
  display: block;
  -webkit-animation: baille 4s infinite;
  -moz-animation: baille 4s infinite;
  -o-animation: baille 4s infinite;
  animation: baille 4s infinite;
  transform-origin: 156px 252px;
  animation-timing-function: default; }

.mainWrapper #atable-bouche {
  display: block;
  -webkit-animation: mouth 4s infinite;
  -moz-animation: mouth 4s infinite;
  -o-animation: mouth 4s infinite;
  animation: mouth 4s infinite;
  transform-origin: 166px 217px;
  animation-timing-function: default; }

.mainWrapper #anim-lavelinge-1 {
  -webkit-animation: anim-lavelinge 2s infinite;
  -moz-animation: anim-lavelinge 2s infinite;
  -o-animation: anim-lavelinge 2s infinite;
  animation: anim-lavelinge 2s infinite;
  animation-timing-function: linear;
  transform-origin: 665px 272px; }

.mainWrapper #anim-lavelinge-2 {
  -webkit-animation: anim-lavelinge 2s infinite;
  -moz-animation: anim-lavelinge 2s infinite;
  -o-animation: anim-lavelinge 2s infinite;
  animation: anim-lavelinge 2s infinite;
  animation-timing-function: linear;
  transform-origin: 756px 272px; }

.mainWrapper #anim-bouche-salle {
  display: block;
  -webkit-animation: anim-bouche-salle 4s infinite;
  -moz-animation: anim-bouche-salle 4s infinite;
  -o-animation: anim-bouche-salle 4s infinite;
  animation: anim-bouche-salle 4s infinite;
  animation-timing-function: default;
  transform-origin: 143px 203px; }

.mainWrapper #anim-tete-salle {
  display: block;
  -webkit-animation: anim-tete-salle 4s infinite;
  -moz-animation: anim-tete-salle 4s infinite;
  -o-animation: anim-tete-salle 4s infinite;
  animation: anim-tete-salle 4s infinite;
  animation-timing-function: default;
  transform-origin: 120px 200px; }

.mainWrapper #anim-bras-sanitaires {
  display: block;
  -webkit-animation: anim-bras-sanitaires 2s infinite;
  -moz-animation: anim-bras-sanitaires 2s infinite;
  -o-animation: anim-bras-sanitaires 2s infinite;
  animation: anim-bras-sanitaires 2s infinite;
  animation-timing-function: default;
  transform-origin: 386px 169px; }

.mainWrapper #nuageA {
  -webkit-animation: moveNuageA 20s infinite;
  -moz-animation: moveNuageA 20s infinite;
  -o-animation: moveNuageA 20s infinite;
  animation: moveNuageA 20s infinite;
  animation-timing-function: cubic-bezier(0.27, 0, 0.79, 0.99); }

.mainWrapper #nuageB {
  -webkit-animation: moveNuageB 20s infinite;
  -moz-animation: moveNuageB 20s infinite;
  -o-animation: moveNuageB 20s infinite;
  animation: moveNuageB 20s infinite;
  animation-timing-function: cubic-bezier(0.27, 0, 0.79, 0.99); }

#mobileContainer {
  width: 100%;
  height: 100%;
  min-height: 550px;
  background-color: var(--bleu-l2);
  display: none;
  margin: 0;
  padding: 0; }

#homepageMobile {
  width: 100%;
  height: 100%; }

#homepageMobile.hide {
  display: none; }

#homeMobileHeader {
  width: 100%;
  height: 145px;
  z-index: 9; }

#homepageMobileLogo {
  width: 95%;
  height: auto;
  max-width: 500px;
  left: 50%;
  position: relative;
  transform: translate(-50%, 0);
  top: 0px; }

#homepageMobileSkyline {
  width: 200%;
  height: auto;
  position: absolute;
  left: 0;
  top: -5px;
  max-width: 1050px; }

#mobileAppTitle {
  z-index: 9;
  display: block;
  position: absolute;
  top: 45px;
  width: 80%;
  opacity: 1;
  transform: translate(-50%, 0);
  left: 50%;
  transition: all 0.4s ease-in-out;
  max-width: 375px; }

#mobileAppTitle.resize {
  top: 25px; }

#mobileAppTitle.change {
  width: 60%; }

#mobileAppTitle.leave {
  top: -70px;
  opacity: 0; }

.homepageSection {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  z-index: 1;
  opacity: 1;
  transition: all 0.4s ease-in-out; }

.homepageSection.hide {
  display: none; }

.homepageSection.translate-in {
  top: 0px !important;
  opacity: 1 !important; }

#mobileBaseline {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: var(--gris-f1);
  text-align: center;
  display: block;
  position: relative;
  top: 0px;
  margin-top: 20px;
  width: 100%;
  line-height: 20px; }

#mobileHomeTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--gris-f1);
  text-align: center;
  display: block;
  position: relative;
  top: 0px;
  margin-top: 10px;
  width: 85%;
  max-width: 280px;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  line-height: 18px; }

#btnBeginHome {
  width: 160px;
  height: 50px;
  background-color: #00C46F;
  position: relative;
  top:0px;
  margin-top: 10px;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  border-radius: 25px; }

#btnBeginHomeTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: white;
  text-align: center;
  position: relative;
  line-height: 16px;
  top: 16px; }

#homepageMobileAccueil {
  overflow: hidden;
  position: relative;
  height: auto;
}

#homepageMobileAccueil.translate {
  top: -100px !important;
  opacity: 0 !important; }

#homepageMobileChemin.translate {
  top: -100px !important;
  opacity: 0 !important; }

#homepageMobileChemin {
  display: none;
  top: 250px;
  opacity: 0;
  height: auto;
  position: relative;
}

#homepageMobileChemin.show {
  display: block; }

#mobileHomeQuestion {
  font-family: "Fira Sans", sans-serif;
  font-weight: 100;
  font-size: 24px;
  color: var(--gris-f1);
  top: 0px;
  margin-top: 30px;
  position: relative;
  text-align: center; }

#mobileHomeBtnContainer {
  width: 250px;
  height: 100px;
  position: relative;
  top: 0px;
  margin-top: 20px;
  left: 50%;
  transform: translate(-50%, 0);
  opacity: 0;
  transition: opacity 0.3s ease-in-out; }

#mobileHomeBtnContainer.show {
  opacity: 1; }

.mobileHomeBtn {
  width: 80px;
  height: 80px;
  border-radius: 100%;
  background-color: #E9505F;
  position: relative;
  top: 0px;
  display: inline-block;
  margin-right: 20px;
  margin-left: 20px; }

.mobileHomeBtn.bounce {
  animation: popMobile 0.5s;
  animation-timing-function: ease-in-out; }

@keyframes popMobile {
  0% {
    transform: scale(1); }
  25% {
    transform: scale(0.95); }
  50% {
    transform: scale(1); }
  75% {
    transform: scale(1.05); }
  100% {
    transform: scale(1); } }

.mobileHomeBtnTxt {
  position: absolute;
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--gris-f1);
  margin-left: 15px;
  top: 90px; }

#restaurantBtnTxt {
  right: 0;
  margin-right: -10px; }

#restaurantHomeBtn:after {
  content: url("../assets/home-picto-restaurant.svg"); }

#hotelHomeBtn:after {
  content: url("../assets/home-picto-hotel.svg"); }

.homepageMobileNumber {
  display: none;
  top: 0px;
  opacity: 0;
  position: relative;
  height: auto;
  margin-top: -20px;
}

.homepageMobileNumber.translate {
  top: -100% !important;
  opacity: 0 !important; }

.homepageMobileNumber.show {
  display: block; }

.mobileIllustration {
  width: 62%;
  max-width: 250px;
  height: auto;
  position: relative;
  top: 0px;
  left: 50%; }

#mobileHotelIllustration {
  -moz-transform: translate(-50%, 0) rotate(-5deg);
  -o-transform: translate(-50%, 0) rotate(-5deg);
  -ms-transform: translate(-50%, 0) rotate(-5deg);
  -webkit-transform: translate(-50%, 0) rotate(-5deg);
  transform: translate(-50%, 0) rotate(-5deg); }

#mobileRestaurantIllustration {
  -moz-transform: translate(-50%, 0) rotate(5deg);
  -o-transform: translate(-50%, 0) rotate(5deg);
  -ms-transform: translate(-50%, 0) rotate(5deg);
  -webkit-transform: translate(-50%, 0) rotate(5deg);
  transform: translate(-50%, 0) rotate(5deg); }

.mobileBtnAnnule {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #157874;
  background-image: url("../assets/homepage-close.svg");
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-position: 5px 5px;
  position: absolute;
  display: none; }

.hotelMobileBtnAnnule {
  left: 68%;
  top: 110px; }

.restaurantMobileBtnAnnule {
  left: 74%;
  top: 115px; }

.mobileNumberInputQuestion {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--gris-f1);
  position: relative;
  top: 0px;
  margin-top: 20px;
  text-align: center;
  width: 100%;
  line-height: 20px; }

.mobileNumberInputQuestionSuite {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--gris-f1);
  position: absolute;
  top: 270px;
  left: 50%;
  margin-left: -20px;
  margin-top: 0px;
  max-width: 160px; }

.mobileNumberConsigne {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--gris-f1);
  text-align: center;
  top: 0px;
  margin-top: 20px;
  position: relative; }

.validateNumberBtn {
  width: 153px;
  height: 43px;
  background-color: #E9505F;
  border-radius: 10px;
  position: relative;
  top: 0px;
  margin-top: 20px;
  left: 50%;
  transform: translate(-50%, 0); }

.validateNumberTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: white;
  position: relative;
  text-align: center;
  top: 15px; }

.homepageMobileInput {
  background-image: none;
  background-color: white;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 100px;
  height: 35px;
  border: 0px solid white;
  border-radius: 10px;
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #00C46F;
  text-align: center;
  position: relative;
  top: 0px;
  margin-top: 20px;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  margin-left: -80px; }

.homepageMobileInput::-webkit-outer-spin-button,
.homepageMobileInput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; }

.homepageMobileInput:focus {
  border: 2px solid #00C46F;
  outline: none; }

.homepageMobileInput::-webkit-input-placeholder {
  color: #00C46F; }

.homepageMobileInput::-moz-placeholder {
  color: #00C46F; }

.homepageMobileInput:-ms-input-placeholder {
  color: #00C46F; }

.homepageMobileInput:-moz-placeholder {
  color: #00C46F; }

.homepageMobileInput.wrong {
  color: #E9505F;
  border: 2px solid #E9505F; }

.homepageMobileInput.wrong:focus {
  border: 2px solid #E9505F;
  outline: none; }

.homepageMobileInput.wrong::-webkit-input-placeholder {
  color: #E9505F; }

.homepageMobileInput.wrong::-moz-placeholder {
  color: #E9505F; }

.homepageMobileInput.wrong:-ms-input-placeholder {
  color: #E9505F; }

.homepageMobileInput.wrong:-moz-placeholder {
  color: #E9505F; }

#homepageRecap {
  display: none;
  top: 0px;
  position: relative;
  height: auto;
  opacity: 0;
  overflow: hidden; }

#homepageRecap.translate {
  top: -100px !important;
  opacity: 0 !important; }

#homepageRecap.show {
  display: block; }

.recapTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--gris-f1);
  position: relative;
  top: 0px;
  text-align: center; }

.recapNumberContainer {
  max-width: 110px;
  height: 35px;
  background-color: white;
  border-radius: 10px;
  position: relative;
  top: 0px;
  margin-top: 10px;
  left: 50%;
  transform: translate(-50%, 0);
  margin-left: -80px; }

.recapNumber {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #00C46F;
  text-align: center;
  position: relative;
  top: 8px; }

.recapTxtFin {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--gris-f1);
  position: absolute;
  top: 53px;
  width: 200px;
  text-align: center;
  left: 50%;
  transform: translate(-50%, 0);
  margin-left: 55px; }

.actionNumberMobileContainer {
  width: 260px;
  height: 160px;
  background-color: white;
  position: relative;
  top: 0px;
  margin-top: 20px;
  left: 50%;
  transform: translate(-50%, 0); }

.actionNumberMobileContainerShadow {
  width: 280px;
  top: 0px;
  height: 25px;
  margin: 0 auto;
  position: relative;
  background-image: url("../assets/shadow-bottom-app@2x.png");
  background-size: 280px 25px;
  opacity: 1;
  pointer-events: none; }

.quitHomeMobile {
  width: 153px;
  height: 43px;
  background-color: #E9505F;
  border-radius: 10px;
  position: relative;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0); }

.quitHomeMobileTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: white;
  position: relative;
  text-align: center;
  top: 15px; }

.actionNumberTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--gris-f1);
  position: relative; }

.actionNumberTxtpart1 {
  text-align: center;
  top: 22px; }

.actionNumberTxtpart2 {
  top: 40px;
  left: 55px; }

.actionNumberTxtpart3 {
  top: 40px;
  left: 10px;
  text-align: center;
  line-height: 22px; }

.numberActionMobileBubble {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #00C46F;
  position: absolute;
  top: 35px;
  left: 15px; }

.numberActionMobile {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: white;
  position: relative;
  text-align: center;
  top: 7px; }

.appMobile {
  width: 100%;
  height: 100%;
  display: none;
  overflow: hidden; }

.appMobile.show {
  display: block; }

.appContainer {
  width: 82%;
  max-width: 500px;
  height: 80%;
  background-color: white;
  position: absolute;
  left: 50%;
  top: 40px;
  opacity: 1;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  transition: all 0.8s ease-in-out; }

.appContainer.hide {
  left: -100%;
  opacity: 0; }

.appContainer:after {
  width: 107%;
  bottom: -40px;
  height: 40px;
  position: absolute;
  background-image: url("../assets/shadow-bottom-app@2x.png");
  content: "";
  margin-left: -4%;
  background-size: 100% 40px;
  opacity: 1;
  z-index: 1;
  pointer-events: none; }

.btnNextMobile {
  width: 58px;
  height: 58px;
  background-color: #E9505F;
  border-radius: 100%;
  position: absolute;
  bottom: -28px;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  z-index: 2; }

.itemLegendMobile {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--gris-f1);
  position: absolute;
  bottom: 100px;
  left: 50%;
  width: 100%;
  text-align: center;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0); }

.mobileEconomieContainer {
  width: 155px;
  height: 45px;
  background-color: #00C46F;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  bottom: 45px; }

.economieMobileTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: white;
  position: relative;
  text-align: center;
  top: 11px;
  transition: opacity 0.3s ease-in-out; }

.economieMobileTxt.hide {
  opacity: 0; }

.appCartoucheContainer {
  width: 70px;
  height: 35px;
  background-color: #25AEC1;
  position: relative;
  left: 50%;
  top: -18px;
  -moz-transform: translate(-50%, 0px);
  -o-transform: translate(-50%, 0px);
  -ms-transform: translate(-50%, 0px);
  -webkit-transform: translate(-50%, 0px);
  transform: translate(-50%, 0px);
  border-radius: 20px;
  opacity: 1;
  transition: opacity 0.3s ease-in-out; }

.appCartoucheContainer.hide {
  opacity: 0; }

.appCartoucheNumber {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: white;
  position: relative;
  text-align: center;
  top: 8px; }

.appLieuTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #25AEC1;
  position: relative;
  top: 0px;
  text-align: center;
  transition: opacity 0.3s ease-in-out; }

.appLieuTxt.hide {
  opacity: 0; }

.MobileItemWrapper {
  width: 100%;
  height: auto;
  top: 0px;
  bottom: 140px;
  position: fixed;
  overflow: hidden; }

.mobileItem {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.8s ease-in-out, left 0.8s ease-in-out;
  opacity: 1; }

.itemAnimContainer {
  width: 75%;
  height: auto;
  position: relative;
  left: 50%;
  top: 0px;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  top: 20px; }

.mobilItemTxtContainer {
  width: 100%;
  height: auto;
  position: relative; }

.mobileItemTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: var(--gris-f1);
  max-width: 190px;
  text-align: center;
  position: relative;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  top: 20px;
  line-height: 24px; }

.itemAnimContainer svg {
  transform-origin: center center;
  transform: scale(1); }

.mobileItem.hide {
  left: 100%;
  opacity: 0; }

.mobileItem.notransition {
  transition: all 0s ease-in-out; }

.mobileItem.leave {
  left: -100%;
  opacity: 0; }

.mobileItem.show {
  left: 0;
  opacity: 1; }

.mobileBilanContainer {
  width: 82%;
  max-width: 500px;
  height: 80%;
  background-color: white;
  position: relative;
  left: 50%;
  top: 100%;
  opacity: 0;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  transition: all 0.8s ease-in-out;
  border-box: box-sizing; }

.mobileBilanContainer:after {
  width: 107%;
  bottom: -40px;
  height: 40px;
  position: absolute;
  background-image: url("../assets/shadow-bottom-app@2x.png");
  content: "";
  margin-left: -34%;
  background-size: 100% 40px;
  opacity: 1;
  z-index: 1;
  pointer-events: none; }

.mobileBilanContainer.show {
  top: 40px;
  opacity: 1; }

.mobileBilanTitre {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--gris-f1);
  position: relative;
  text-align: center;
  top: 20px; }

.mobileBilanNumberContainer {
  width: 220px;
  height: 50px;
  border: 2px solid #00C46F;
  box-sizing: border-box;
  border-radius: 7px;
  position: relative;
  top: 40px;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0); }

.mobileBilanNumber {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 30px;
  color: #00C46F;
  position: relative;
  top: 8px;
  text-align: center; }

.mobileBilanNumberTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #00C46F;
  position: relative;
  top: 50px;
  text-align: center; }

.mobileInvitation {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--gris-f1);
  position: relative;
  text-align: center;
  top: 60px;
  max-width: 240px;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0); }

.mobileDeviceTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #00C46F;
  position: relative;
  text-align: center;
  top: 70px; }

.mobileImgDevice {
  width: 30%;
  height: auto;
  position: relative;
  top: 85px;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0); }

.mobileDeviceInvit {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--gris-f1);
  position: absolute;
  text-align: center;
  bottom: 50px;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0); }

.mobileMailBtn {
  width: 100px;
  height: 100px;
  background-color: #E9505F;
  border-radius: 100%;
  position: absolute;
  bottom: -60px;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
  z-index: 2;
  pointer-events: all; }

.mobileMailBtn.hide {
  display: none;
  pointer-events: none; }

.mobileMailImg {
  width: 55px;
  height: auto;
  position: absolute;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  top: 30px; }

.mobileMailContainer {
  width: 82%;
  max-width: 500px;
  height: 0px;
  background-color: white;
  position: absolute;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  transition: all 0.8s ease-in-out;
  bottom: 70px;
  overflow: hidden;
  pointer-events: none; }

.mobileMailContainer.show {
  height: 1380px;
  top: 80%;
  pointer-events: all; }

.mobileMailInput {
  background-image: none;
  background-color: transparent;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 220px;
  height: 43px;
  border: 3px solid #97DBD6;
  border-radius: 10px;
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #0b413a;
  text-align: center;
  position: relative;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  display: block;
  opacity: 1;
  transition: opacity 0.3s ease-in-out; }

.mobileMailInput.show {
  opacity: 1; }

.mobileMailInput::-webkit-outer-spin-button,
.mobileMailInput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; }

.mobileMailInput:focus {
  outline: none; }

.mobileMailInput::-webkit-input-placeholder {
  color: #97DBD6; }

.mobileMailInput::-moz-placeholder {
  color: #97DBD6; }

.mobileMailInput:-ms-input-placeholder {
  color: #97DBD6; }

.mobileMailInput:-moz-placeholder {
  color: #97DBD6; }

.mobileMailSendBtn {
  width: 153px;
  height: 43px;
  background-color: #E9505F;
  border-radius: 15px;
  top: 15px;
  position: relative;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  transition: all 0.4s ease-in-out; }

.mobileMailSendBtn.loading {
  background-color: var(--gris-f1); }

.mobileMailSendBtn.loading .mobileMailSendBtnTxt {
  display: none; }

.mobileMailSendBtn.loading .mobileMailLoader {
  display: block; }

.mobileMailSendBtn.send {
  background-color: #00C46F; }

.mobileMailSendBtn.send .mobileMailLoader {
  display: none; }

.mobileMailSendBtn.send .mobileMailSendBtnTxtValidate {
  display: block; }

.mobileMailLoader {
  width: 20px;
  height: 20px;
  position: relative;
  left: 50%;
  margin-left: -10px;
  top: 10px;
  -webkit-animation: loading 2s infinite;
  -moz-animation: loading 2s infinite;
  -o-animation: loading 2s infinite;
  animation: loading 2s infinite;
  display: none; }

.mobileMailSendBtnTxtValidate {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: white;
  position: relative;
  text-align: center;
  top: 13px;
  display: none; }

.mobileMailSendBtnTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: white;
  position: relative;
  text-align: center;
  top: 13px; }

.mobileTickerContainer {
  width: 16px;
  height: 16px;
  border: 2px solid var(--gris-f1);
  position: relative;
  top: 30px;
  border-radius: 3px;
  cursor: pointer;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  margin-left: -90px; }

.mobileTickerContainer.error {
  border-color: #E9505F; }

.mobileTicker {
  display: none; }

.mobileTicker.show {
  display: block; }

.mobileCGU {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: var(--gris-f1);
  left: 50%;
  position: relative;
  max-width: 180px;
  top: 10px;
  line-height: 15px;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  margin-left: 20px; }

.mobileCGU.error {
  color: #E9505F; }

.mobileLegalContainer {
  background-color: #ecf9f8;
  width: 100%;
  height: 730px;
  position: relative;
  top: 25px; }

.mobileLegalContainer:after {
  width: 107%;
  bottom: -30px;
  height: 30px;
  position: absolute;
  background-image: url("../assets/shadow-bottom-app@2x.png");
  content: "";
  margin-left: -4%;
  background-size: 100% 30px;
  opacity: 1;
  z-index: 1;
  pointer-events: none; }

.mobileLegalBorder {
  width: 100%;
  height: 18px;
  background-image: url(../assets/background-decoration.png);
  background-repeat: repeat-x;
  background-size: 19px 18px;
  position: relative;
  top: 25px; }

.mobileMentionTitre {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: var(--gris-f1);
  top: 10px;
  position: relative;
  max-width: 250px;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0); }

.mobileMentionTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--gris-f1);
  top: 20px;
  position: relative;
  line-height: 16px;
  max-width: 250px;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0); }

.mobileMentionTxt br {
  line-height: 20px; }

.mobileMentionTxt a {
  color: #00C46F; }

.mobileMailFooterContainer {
  width: 100%;
  height: 340px;
  position: relative;
  top: 25px;
  background-color: var(--bleu-l2);
  z-index: 2; }

.mobileMailLogoContainer {
  width: 100%;
  position: relative;
  overflow: hidden;
  height: 100%; }

.mobileMailLogoAdeme {
  width: 40px;
  height: 100%;
  position: relative;
  position: absolute;
  top: -76px;
  left: 50%;
  transform: translate(-50%, 0);
  margin-left: 20px; }

#mobileMailLogoEdf {
  width: 60px;
  height: 100%;
  position: relative;
  position: absolute;
  top: -76px;
  left: 50%;
  transform: translate(-50%, 0);
  margin-left: 75px; }

.mobileMailLogoCCI {
  width: 130px;
  height: 100%;
  position: absolute;
  top: -123px;
  left: 50%;
  transform: translate(-50%, 0);
  margin-left: 55px; }

.mobileMailFooterLink {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #00A140;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  cursor: pointer;
  top: 120px; }

.mobileMailFooterFilet {
  width: 95px;
  height: 2px;
  background-color: #00A140;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  top: 135px; }

#mobileFooter {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  opacity: 1;
  transition: all 0.4s ease-in-out;
  z-index: 2;
  margin-top: 80px;
}

#mobileFooter .footer_left, #mobileFooter .footer_right, .mobileMailLogoContainer .footer_left, .mobileMailLogoContainer .footer_right{
  position: relative;
  width: 100%;
  right: auto;
  height: auto;
  top: auto;
  transform:  translate(0,0);
  text-align: center;
}

#mobileFooter .footer_right, .mobileMailLogoContainer .footer_right{
  margin-top: 20px;
  padding-bottom: 10px;
}

#mobileFooter .footer_left .link_container, #mobileFooter .footer_right .link_container, .mobileMailLogoContainer .footer_left .link_container, .mobileMailLogoContainer .footer_right .link_container{
  width: 100%;
  display: block;
  margin-top: 10px;
}

#mobileFooter #RightAbout, .mobileMailLogoContainer #RightAbout{
  top: 0px;
  margin: 0px 0 20px;
}

#mobileFooter.leave {
  bottom: -110px;
  opacity: 0; }

#mobileLogoContainer {
  width: 100%;
  position: relative;
  overflow: hidden;
  height: 100%; }

.mobileFooterCCITxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--gris-f1);
  position: absolute;
  left: 0;
  top: 10px;
  left: 50%;
  transform: translate(-65px, 0);
  margin-left: -55px; }

#mobileLogoCCI {
  width: 130px;
  height: 100%;
  position: absolute;
  top: -48px;
  left: 50%;
  transform: translate(-50%, 0);
  margin-left: 55px; }

.mobileMailFooterContainer #mobileLogoCCI {
  top: -120px; }

.mobileFooterAdmemeTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--gris-f1);
  position: absolute;
  left: 0;
  top: 60px;
  left: 50%;
  transform: translate(-65px, 0);
  margin-left: -75px; }

#mobileLogoAdeme {
  width: 40px;
  height: 100%;
  position: relative;
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0);
  margin-left: -0px; }

.mobileMailFooterContainer #mobileLogoAdeme {
  top: -70px; }

#mobileLogoEdf {
  width: 100px;
  height: 100%;
  position: relative;
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0);
  margin-left: 80px; }

.mobileMailFooterContainer #mobileLogoEdf {
  top: -70px; }

#mobileFooterLink {
}

#mobileFooterFilet {
  width: 120px;
  height: 2px;
  background-color: #00A140;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 5px; }

.overlayMobile {
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 100;
  display: block;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out; }

.overlayMobile.show {
  pointer-events: all;
  opacity: 1;
  height: 320%; }

.overlayMobile.showBig {
  pointer-events: all;
  opacity: 1;
  height: 390%; }

.mobileMethodoContainer {
  display: none; }

.mobileMentionContainer {
  display: none; }

.overlayMobile.show .mobileMethodoContainer {
  display: block; }

.overlayMobile.showBig .mobileMentionContainer {
  display: block; }

.mobileMethodoTitle {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #257563;
  top: 30px;
  position: relative;
  text-align: center;
  display: block; }

.mobileMentionTitle {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #257563;
  top: 30px;
  margin-top: 30px;
  position: relative;
  text-align: center;
  display: block; }

.mobileMethodoTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--gris-f1);
  max-width: 290px;
  position: relative;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  display: block;
  top: 30px;
  line-height: 16px;
  margin-top: 15px; }

.mobileMethodoTab {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--gris-f1);
  max-width: 270px;
  position: relative;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  margin-left: 10px;
  display: block;
  top: 30px;
  line-height: 16px;
  margin-top: 15px; }

.mobileMethodoCloseBtn {
  width: 36px;
  height: 36px;
  position: absolute;
  right: 25px;
  cursor: pointer;
  top: 10px; }

.mobileMentionTitle {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #257563;
  top: 30px;
  margin-top: 30px;
  position: relative;
  text-align: center;
  display: block; }

.mobileMentionTab {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--gris-f1);
  max-width: 280px;
  position: relative;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  margin-left: 10px;
  display: block;
  top: 30px;
  line-height: 16px;
  margin-top: 0px; }

.mobilePopin {
  width: 90%;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  height: 215px;
  border-radius: 10px;
  top: 50%;
  margin-top: -100px;
  background-color: white;
  z-index: 100;
  display: block;
  position: fixed;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
  -webkit-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.25); }

.mobilePopin.show {
  pointer-events: all;
  opacity: 1; }

.mobilePopinImg {
  width: 80px;
  height: auto;
  position: absolute;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0); }

.mobilePopinTitle {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 22px;
  top: 70px;
  color: var(--gris-f1);
  position: relative;
  text-align: center; }

.mobilePopinTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: var(--gris-f1);
  position: relative;
  text-align: center;
  top: 80px; }

.mobilePopinNote {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 13px;
  color: var(--gris-f1);
  position: relative;
  text-align: center;
  top: 100px; }

.mobilePopinCloseBtn {
  width: 36px;
  height: 36px;
  position: absolute;
  right: 25px;
  cursor: pointer;
  top: 10px; }

#overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(11, 65, 58, 0.5);
  z-index: 100;
  display: block;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out; }

#overlay.show_big {
  opacity: 1;
  pointer-events: all;
  height: 190%; }

#overlay.show_middle {
  opacity: 1;
  pointer-events: all;
  height: 150%; }

#overlay.show_little {
  opacity: 1;
  pointer-events: all; }

#methodoContainer {
  width: 660px;
  height: 550px;
  background-color: white;
  position: relative;
  margin: 0 auto;
  top: 100px;
  border-radius: 10px;
  display: none;
  overflow: scroll; }

#methodoContainer.show {
  display: block; }

.methodoTitle {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--gris-f1);
  top: 30px;
  position: relative;
  text-align: center;
  display: block; }

.mentionTitle {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--gris-f1);
  top: 30px;
  margin-top: 30px;
  position: relative;
  text-align: center;
  display: block; }

.methodoTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--gris-f1);
  max-width: 555px;
  position: relative;
  left: 40px;
  display: block;
  top: 30px;
  line-height: 16px;
  margin-top: 15px; }

.methodoTab {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--gris-f1);
  max-width: 515px;
  position: relative;
  left: 80px;
  display: block;
  top: 30px;
  line-height: 16px;
  margin-top: 15px; }

.methodoTable{
  display: inline-block;
  vertical-align: top;
  border-collapse: collapse;
}

.methodoTable td{
  border:  1px solid;
  padding:  5px 10px;
}

.table_etoiles{
  margin-left: 20px;
}

.methodoTable td.cell_etoiles{
  width: 120px;
}

.mentionTab {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--gris-f1);
  max-width: 515px;
  position: relative;
  left: 80px;
  display: block;
  top: 30px;
  line-height: 16px;
  margin-top: 0px; }

.lastMethodoTxt {
  margin-bottom: 80px; }

.tabBold {
  font-weight: 600; }

.tabItal {
  font-family: "Fira Sans", sans-serif; }

#methodoLink {
  color: #00C46F;
  text-decoration: underline;
  cursor: pointer; }

.methodoCloseBtn {
  width: 36px;
  height: 36px;
  position: absolute;
  right: 25px;
  cursor: pointer;
  top: 10px; 
  z-index: 1000;
}

#mentionCloseBtn {
  width: 36px;
  height: 36px;
  position: absolute;
  right: 25px;
  cursor: pointer;
  top: 10px; }

#mentionContainer {
  width: 660px;
  height: 550px;
  background-color: white;
  position: relative;
  margin: 0 auto;
  top: 100px;
  border-radius: 10px;
  display: none;
  overflow: scroll; }

#mentionContainer.show {
  display: block; }

.mentionHider {
  width: 660px;
  height: 20px;
  position: absolute;
  background-color: white;
  z-index: 100;
  left: 50%;
  transform: translate(-50%, 0);
  display: none; }

.mentionHider.show {
  display: block; }

.bottomMentionHider {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  top: 630px; }

.topMentionHider {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  top: 100px; }

.mailPopinContainer {
  width: 415px;
  height: 480px;
  background-color: white;
  position: fixed;
  border-radius: 20px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
  pointer-events: none; 
  font-family: "Fira Sans", sans-serif;
  color: var(--gris-f1);
  text-align: center;
}

.mailPopinContainer.show {
  opacity: 1;
  pointer-events: all; }

.mailPopinImg_container{
  position: relative;
  height: 100px;
  width: 100%;
}

.mailPopinImg {
  width: 100px;
  height: auto;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  top: 0px; 
  background:  #fff;
}

.mailPopinImg_container:before{
  content: "";
  position: absolute;
  left: 50%;
  width: 300px;
  top:  50%;
  height: 1px;
  background-color: var(--gris-f1);
  transform: translate(-50%, -50%);
}

.popinTitle {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--gris-f1);
  position: relative;
  text-align: center;
  margin-top: -20px;
}

.popinTxt {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 22px;
  color: var(--gris-f1);
  position: relative;
  text-align: center;
  margin-top: 8px;
}

.popinTxtSuite {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  margin-top: 8px;
  color: var(--gris-f1);
  position: relative;
  text-align: center; }

.popin_disclaimer{
  font-size: 17px;
  line-height: 20px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--gris-f1);
  width: 300px;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
}

.disclaimer_small{
  font-size: 13px;
  line-height: 13px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: block;
}

.disclaimer_vsmall{
  font-size: 11px;
  line-height: 12px;
  margin-top: 5px;
}

.mailPopinContainer .methodoCloseBtn{
  right: 10px;
  top: 6px;
}

.popin_disclaimer .CCIlinktarget{
  margin-top: 5px;
}

#CookieConsentBlock{
    position: fixed;
    left: 0px;
    font-family: 'Roboto', sans-serif;
    bottom: 0px;
    height: auto;
    background: #362E09;
    z-index: 200000000;
    width: 100%;
    display: none;
    text-align: center;
}

#CookieConsentBlock *{
  box-sizing: border-box;
 }

#CookieConsentBlock ul, #CookieConsentBlock li{
  list-style: disc;
}
#CookieConsentBlock .block_wrapper{
    display: inline-block;
    text-align: left;
    width: 100%;
    max-width: 1200px;
    padding: 20px;
    position: relative;
}
#CookieConsentBlock[data-displayed="displayed"]{
    display: block;
}
#CookieConsentBlock .block_text{
    color: #fff;
    position: relative;
    max-width: 70%;
    font-size: 14px;
    line-height: 17px;
}
#CookieConsentBlock .block_text a{
    color: #fff;
    cursor: pointer;
    text-decoration: underline;
}
#CookieConsentBlock .block_text li{
    margin-bottom: 10px;
}
#CookieConsentBlock .block_buttons{
    position: absolute;
    right: 40px;
    top: 20px;
    transform:translate(0, 0);
}
#CookieConsentBlock .block_buttons .block_bt{
    width: 124px;
    display: inline-block;
    background: #009EE0;
    height: 24px;
    line-height: 24px;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    padding-left: 10px;
    position: relative;
    margin-left: 6px;
    font-size: 14px;
    font-weight: 700;
}
#CookieConsentBlock .block_buttons .block_bt:after{
    position: absolute;
    right: 0px;
    top: 50%;
    transform:translate(0, -50%);
    content: "";
}
.block_bt.bt_accept:after{
    background:url("../assets/icon-btn-valid-white.svg") no-repeat center center transparent;
    background-size: 100% 100%;
    width: 24px;
    height: 24px;
}
.block_bt.bt_refuse:after{
    background:url("../assets/icon-btn-close-white.svg") no-repeat center center transparent;
    background-size: 100% 100%;
    width: 38px;
    height: 38px;
}