@font-face {
     font-family: 'loveloweb';
     src: url('font/lovelo.eot');
     src: url('font/lovelo.eot?#iefix') format('embedded-opentype'), url('font/lovelo.woff') format('woff');
 }

 @font-face {
     font-family: 'bebasweb';
     src: url('font/bebas.eot');
     src: url('font/bebas.eot?#iefix') format('embedded-opentype'), url('font/bebas.woff') format('woff');
 }

 @font-face {
     font-family: 'clearweb';
     src: url('font/clear.eot');
     src: url('font/clear.eot?#iefix') format('embedded-opentype'), url('font/clear.woff') format('woff');
 }

 * {
     margin: 0;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     outline: none;
 }

 .outline:focus {
     outline: 2px dotted #233;
 }

 footer .outline:focus {
     outline: 2px dotted #fff;
 }

 body {
     font: 1.08em clearweb, sans-serif;
     color: #233;
     background: #fff;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     min-height: 100vh;
 }


 a img {
     border: 0;
 }

 a {
     color: #f77;
     text-decoration: none;
 }

 a:hover {
     color: #fa9;
 }

 ::selection {
     background: #FCA;
     color: #122;
 }

 table {
     width: 100%;
     text-align: left;
 }

 .tableau table {
     border-collapse: collapse;
     width: auto !important;
     min-width: 290px;
 }

 .tableau td {
     background: #C3EEE5;
     padding: 10px;
 }

 .tableau tr:nth-child(2n) td {
     background: #fed;
 }

 .num {
     text-align: right;
 }

 ul,
 ol {
     padding-left: 24px;
     margin-bottom: -15px;
     counter-reset: num;
 }

 ul li {
     list-style: url(img/puce.png);
     padding-bottom: 15px;
 }

 ol li {
     list-style-type: none;
     counter-increment: num;
     padding-bottom: 15px;
 }

 ol li:before {
     content: counter(num);
     color: #C3EEE5;
     font-weight: bold;
     position: absolute;
     margin-left: -24px;
 }

 input[type=submit],
 button,
 .bouton {
     border: .2em solid #FCA;
     background: none;
     color: #FCA;
     font: 1em loveloweb, sans-serif;
     padding: .37em 1.4em .3em;
     cursor: pointer;
     -webkit-transition: background .4s, color .4s;
     -o-transition: background .4s, color .4s;
     transition: background .4s, color .4s;
     display: inline-block;
     text-align: center;
     letter-spacing: .20em;
 }

 input[type=submit]:hover,
 button:hover,
 .bouton:hover {
     background: #FCA;
     color: #fff;
 }

 input[type=text],
 input[type=email],
 input[type=tel],
 textarea,
 select {
     font: 1.3em clear-web, sans-serif;
     background: #C3EEE5;
     color: #233;
     padding: 8px 15px;
     border: 0;
     -webkit-transition: background .4s;
     -o-transition: background .4s;
     transition: background .4s;
     width: 100%
 }

 input[type=text]:focus,
 input[type=email]:focus,
 input[type=tel]:focus,
 textarea:focus,
 select:focus {
     background: #ffece3;
 }

 select,
 label {
     cursor: pointer;
 }

 label {
     display: block;
 }

 input[type=checkbox] {
     margin-bottom: 8px;
 }

 textarea {
     width: 100% !important;
     min-height: 200px;
 }

 #formulaire {
     max-width: 1000px;
 }

 #formulaire input[type=submit] {
     width: 100%;
 }

 #formulaire .col {
     width: 50%;
     float: left;
 }

 #formulaire u {
     font: 1em loveloweb, sans-serif;
     display: block;
     margin-bottom: 3px;
     text-decoration: none;
 }

 .demande {
     border: 0;
     background: #FCA;
     padding: 0px 15px 15px;
     color: #233 !important;
     width: 100%;
     letter-spacing: 0;
 }

 .demande img {
     position: relative;
     top: 8px;
     margin-right: 3px;
 }

 .demande:hover {
     background: #ff7878;
 }

 #page {
     -webkit-box-flex: 1;
     -ms-flex: 1;
     flex: 1;
 }

 .centre {
     width: 980px;
     margin: 0 auto;
 }

 .clear {
     clear: both;
 }

 .flex {
     display: -ms-flex;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
 }

 .ancre {
     position: relative;
     top: -30px;
 }

 .video {
     max-width: 100%;
     padding-bottom: 56.25%;
     height: 0;
     position: relative;
 }

 .video iframe {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
 }

 #header {
     height: 120px;
     padding-top: 15px;
     background: #fff;
     position: relative;
     z-index: 499;
 }

 #logo {
     position: absolute;
     top: 10px;
     left: 15px;
     z-index: 501;
     width: 80px;
 }

 #logo:hover {
     opacity: 0.85;
 }

 #bouton-devis {
     background: url(img/chrono.png) no-repeat;
     position: absolute;
     top: 15px;
     right: 15px;
     padding-left: 24px;
     z-index: 501;
     font: 1.2em loveloweb, sans-serif;
     text-transform: uppercase;
 }

 #menu {
     background: #fff;
     height: 42px;
     position: absolute;
     width: 100%;
     z-index: 500;
     top: 80px;
     text-align: right;
     -webkit-box-shadow: 0 7px 7px rgba(0, 0, 0, .05);
     box-shadow: 0 7px 7px rgba(0, 0, 0, .05);
 }

 .onglet {
     display: inline-block;
     background: #fff;
     font: 1.2em loveloweb, sans-serif;
     text-transform: uppercase;
     color: #233;
     padding: 10px 10px 0 10px;
     height: 42px;
     position: relative;
     z-index: 2;
 }

 .onglet:hover {
     background: #f3fcfa;
 }

 .onglet a {
     color: #233;
 }

 #home {
     position: absolute;
     left: 0;
     opacity: 0;
     background: url(img/rond.png) no-repeat right center;
     width: 45px;
     height: 42px;
     cursor: pointer;
 }

 .deroul {
     background: #FCA;
     width: 300px;
     opacity: 1;
     position: absolute;
     right: 0;
     top: 52px;
     display: none;
     -webkit-box-shadow: 0 7px 7px rgba(34, 17, 68, .05);
     box-shadow: 0 7px 7px rgba(34, 17, 68, .05);
 }

 .deroul a {
     font: .9em clearweb, sans-serif;
     text-transform: none;
     text-align: left;
     width: 100%;
     padding: 15px 10%;
     display: block;
     color: #fff;
 }

 .deroul a:hover {
     background: #ff6d6d;
 }

 #menu-mobile {
     display: none;
 }

 #fermer {
     background: #fff url(img/croix2.png) no-repeat center;
     position: absolute;
     top: 50px;
     right: 0;
     width: 50px;
     height: 50px;
     cursor: pointer;
     z-index: 2;
     display: block;
     -webkit-transition: .5s;
     -o-transition: .5s;
     transition: .5s;
     opacity: .3;
 }

 #fermer:hover {
     opacity: 1;
 }

 #page-video {
     width: 100% !important;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     background: #000;
 }

 #article {
     text-align: justify;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
 }

 #article .bouton {
     margin-top: 10px;
 }

 #page img,
 #pioneer {
     max-width: 100% !important;
     display: block;
 }

 #article h1 {
     font: 5em/1em bebasweb, sans-serif;
     text-transform: uppercase;
     text-align: left;
     padding-bottom: 50px;
 }

 .chapeau {
     font-size: 1.3em;
     font-weight: bold;
     border-left: 7px solid #C3EEE5;
     padding-left: 15px;
 }

 #article h2 {
     font: 2em/1em loveloweb, sans-serif;
     text-transform: uppercase;
     padding-top: 20px;
     margin-bottom: -10px;
     text-align: left;
     color: #233;
 }

 #texte {
     -webkit-box-flex: 1;
     -ms-flex: 1 700px;
     flex: 1 700px;
     padding: 80px 80px;
 }

 #presta {
     -webkit-box-flex: 1;
     -ms-flex: 1 300px;
     flex: 1 300px;
     background: #C3EEE5;
     color: #233;
     padding: 70px 60px;
     text-align: left;
 }

 #presta h2 {
     color: #233;
 }

 #presta td {
     border-bottom: 1px solid #fff;
     padding: 7px 0;
 }

 #presta .bouton {
     color: #233;
     border-color: #233;
 }

 .box {
     background: #C3EEE5;
     background: #FFE5D4;
     padding: 25px 30px 25px;
     max-width: 1000px;
 }

 #bloc {
     display: none;
 }

 .pdf {
     padding-bottom: 140%;
     height: 0;
     position: relative;
 }

 .pdf object {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
 }

 video {
     width: 100% !important;
 }

 .cas {
     display: block;
     height: auto;
     max-width: 400px;
     margin-bottom: 15px;
     background: #ff3b4e;
     position: relative;
 }

 .cas img {
     opacity: .25;
     -webkit-filter: sepia(100%);
     filter: sepia(100%);
     -webkit-transition: .6s;
     -o-transition: .6s;
     transition: .6s;
     width: 100%;
 }

 .cas:hover img {
     -webkit-filter: sepia(0%);
     filter: sepia(0%);
     opacity: 1;
 }

 .reali {
     position: absolute;
     bottom: 15px;
     left: 15px;
     color: #C3EEE5;
     font: 3.5em bebasweb, sans-serif;
     text-align: left;
     opacity: 1;
     -webkit-transition: opacity .4s;
     -o-transition: opacity .4s;
     transition: opacity .4s;
 }

 .cas:hover .reali {
     opacity: 0 !important;
 }

 .reali h3 {
     font: .28em clearweb, sans-serif;
     line-height: 1em;
     text-transform: uppercase;
 }

 .pave {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     text-align: left;
     background: #233;
     padding: 30px 45px 45px 0;
     color: #C3EEE5;
 }

 .icone {
     width: 300px;
     min-height: 170px;
     background-position: center;
     background-repeat: no-repeat;
     background-image: url(img/icone1.png);
 }

 #ico2 {
     background-image: url(img/icone2.png);
 }

 #ico3 {
     background-image: url(img/icone3.png);
 }

 #ico4 {
     background-image: url(img/icone4.png);
 }

 #ico5 {
     background-image: url(img/icone5.png);
 }

 #ico6 {
     background-image: url(img/icone6.png);
 }

 #ico7 {
     background-image: url(img/icone7.png);
 }

 #ico8 {
     background-image: url(img/icone8.png);
 }

 #ico9 {
     background-image: url(img/icone9.png);
 }

 #ico10 {
     background-image: url(img/icone10.png);
 }

 #ico11 {
     background-image: url(img/icone11.png);
 }

 #ico12 {
     background-image: url(img/icone12.png);
 }

 #ico13 {
     background-image: url(img/icone13.png);
 }

 #ico14 {
     background-image: url(img/icone14.png);
 }

 #ico15 {
     background-image: url(img/icone15.png);
 }

 #ico16 {
     background-image: url(img/icone16.png);
 }

 .pave .txt {
     -webkit-box-flex: 1;
     -ms-flex: 1;
     flex: 1;
 }

 .pave .titre {
     font: 2em loveloweb, sans-serif;
     margin-bottom: 10px;
 }

 .triangle {
     background: url(img/bas.png) no-repeat center bottom;
     width: 100%;
     height: 45px;
     margin-bottom: 30px;
 }

 #tarif-web {
     overflow-x: auto;
 }

 #tarif-web table {
     min-width: 850px;
 }

 #tarif-web td {
     text-align: center;
     background: #C3EEE5;
     padding: 12px 5px;
 }

 #tarif-web th {
     text-align: center;
     background: #ffcab0;
     padding: 8px 10px;
     width: 16.66%;
 }

 .tab {
     color: #fff;
     background: #774fb6 !important;
     font-weight: normal;
     padding: 20px 10px !important;
     vertical-align: top;
 }

 #t2 {
     background: #5c3598 !important;
 }

 #t3 {
     background: #3f187a !important;
 }

 #t4 {
     background: #233 !important;
 }

 #t5 {
     background: #230054 !important;
 }

 .tab .titre {
     color: #C3EEE5;
     font: 1em loveloweb, sans-serif;
 }

 .tab .prix {
     color: #C3EEE5;
     font: 2em bebasweb, sans-serif;
     margin-bottom: 5px;
 }

 .ht {
     font-size: .7em;
 }

 .rouge {
     color: #FCA;
 }

 .vide {
     background: none !important;
 }

 td img {
     display: inline !important;
 }

 select {
     background: #C3EEE5;
     font: 1em clearweb, sans-serif;
     color: #233;
     width: 450px;
     padding: 10px 10px;
     border: none;
     -webkit-transition: .3s;
     -o-transition: .3s;
     transition: .3s;
     cursor: pointer;
 }

 select:focus,
 select:hover {
     background: #fed;
 }

 #total {
     color: #FCA;
     margin-bottom: -30px;
     display: block;
 }

 #chiffre {
     font: 6em bebasweb, sans-serif;
     color: #FCA;
 }

 #prix {
     font-size: 1.8em;
 }

 .promo {
     background: #FCA;
     text-align: center;
     font: 1.6em bebasweb, sans-serif;
     color: #fff;
     width: 50px;
     height: 50px;
     padding-top: 11px;
     margin-bottom: 5px;
     border-radius: 25px;
     display: inline-block;
     -webkit-transform: rotateZ(10deg);
     -ms-transform: rotate(10deg);
     transform: rotateZ(10deg);
 }

 @-moz-document url-prefix() {
     .f5 {
         display: none;
     }
 }

 #lecture {
     width: 94px;
     height: 94px;
     background: url(img/lecture.png);
     cursor: pointer;
 }

 #lecture:hover {
     opacity: .85;
 }

 .pause {
     background: url(img/stop.png) !important;
 }

 #footer {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     background: #233;
     color: #C3EEE5;
     text-align: center;
     position: relative;
     z-index: 2;
 }

 #contact,
 #visite {
     -webkit-box-flex: 1;
     -ms-flex: 1 700px;
     flex: 1 700px;
     padding: 60px 15px;
 }

 #contact h2,
 #visite h2 {
     font: 2em loveloweb, sans-serif;
     margin-bottom: 20px;
     position: relative;
 }

 #contact {
     background: url(img/eva.jpg) center 0 no-repeat;
     background-size: cover;
     text-shadow: 0 0 5px #233;
 }

 #tel,
 #email {
     font: 2.5em bebasweb, sans-serif;
 }

 #tel {
     color: #C3EEE5;
 }

 #email {
     color: #FCA;
 }

 .social {
     margin: 8px 5px 0;
     text-align: center;
 }

 .social:hover {
     opacity: .85;
 }

 #blog {
     font: 30px loveloweb, sans-serif;
     text-align: center;
     margin-top: 2px;
 }

 #blog:hover {
     color: #FCA;
 }

 #ma-carte {
     background: #7e6f9b;
     width: 100%;
     height: 500px;
     color: #214;
 }

 #ma-carte button {
     letter-spacing: 0;
 }

 .gm-style-iw {
     width: 250px;
     height: 55px;
 }

 #mention {
     text-align: center;
     background: #122;
     padding: 35px 15px 80px;
 }

 #mention a {
     padding: 0 7px;
     white-space: nowrap;
     color: #8dc;
 }

 #appel {
     background: #8dc;
     color: #122;
     width: 100%;
     padding: 10px 0;
     font: 1.1em loveloweb, sans-serif;
     text-align: center;
     position: fixed;
     bottom: 0;
     z-index: 1000;
     -webkit-box-shadow: 0 -7px 7px rgba(0, 0, 0, .05);
     box-shadow: 0 -7px 7px rgba(0, 0, 0, .05);
     -webkit-transition: .3s;
     -o-transition: .3s;
     transition: .3s;
     -webkit-animation: respire 4s infinite;
     animation: respire 4s infinite;
 }

 @-webkit-keyframes respire {
     0% {
         -webkit-transform: scale(1);
         transform: scale(1);
     }

     50% {
         -webkit-transform: scale(1.15);
         transform: scale(1.15);
     }

     100% {
         -webkit-transform: scale(1);
         transform: scale(1);
     }
 }

 @keyframes respire {
     0% {
         -webkit-transform: scale(1);
         transform: scale(1);
     }

     50% {
         -webkit-transform: scale(1.15);
         transform: scale(1.15);
     }

     100% {
         -webkit-transform: scale(1);
         transform: scale(1);
     }
 }

 #appel:before {
     content: 'Un devis ? Une question ? ';
 }

 #appel:hover {
     font-size: 1.2em;
     -webkit-animation: none;
     animation: none;
 }

 #pix {
     display: none;
 }

 @media (min-width: 1400px) {
     .centre {
         width: 1300px;
     }

     #article h1 {
         font-size: 5em;
     }
 }

 @media (max-width: 1000px) {
     .centre {
         width: 100%;
         padding: 0 15px !important;
     }

     #barre {
         padding-left: 15px;
     }

     #article h1 {
         font-size: 4em;
     }

     #article {
         display: block;
     }

     #texte,
     #presta {
         padding: 40px 15px;
     }

     #mention a {
         display: block;
         text-align: left;
     }
 }

 @media (max-width: 900px) {
     .real {
         width: 50%;
         height: 50%;
     }

     #bas-accueil,
     #play {
         background-size: 50%;
     }

     .pave {
         padding: 10px 20px 25px;
     }

     .icone {
         width: 100%;
     }

     .pave .titre {
         font-size: 1.4em;
     }

     .reali {
         font-size: 2.5em;
     }

     .reali h3 {
         font-size: .35em;
     }

     #tarif-web {
         border-right: 5px solid;
     }
 }

 @media (min-width: 761px) {

     #menu-mobile,
     #burger {
         display: none !important;
     }
 }

 @media (max-width: 760px) {
     #burger {
         position: absolute;
         top: 60px;
         right: 0;
         z-index: 500;
         display: block;
         -webkit-box-flex: 100px;
         -ms-flex: 100px;
         flex: 100px;
         cursor: pointer;
         border: 0;
         padding: 0 !important;
         background: none !important;
     }

     #barres {
         display: block;
         float: right;
         margin-right: 20px;
     }

     .barre {
         display: block;
         background: #233;
         height: 4px;
         width: 32px;
         margin: 6px 0;
         -webkit-transition: .3s;
         -o-transition: .3s;
         transition: .3s;
     }

     .croix #barre1 {
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         -webkit-transform-origin: 0 0;
         -ms-transform-origin: 0 0;
         transform-origin: 0 0;
         position: relative;
         top: 0;
         left: 6px;
     }

     .croix #barre2 {
         width: 0;
         -webkit-transform: translateX(16px);
         -ms-transform: translateX(16px);
         transform: translateX(16px);
     }

     .croix #barre3 {
         -webkit-transform: rotate(-45deg);
         -ms-transform: rotate(-45deg);
         transform: rotate(-45deg);
         -webkit-transform-origin: 0 4px;
         -ms-transform-origin: 0 4px;
         transform-origin: 0 4px;
         position: relative;
         top: 1px;
         left: 6px;
     }

     #header {
         -webkit-box-shadow: 0 7px 7px rgba(34, 17, 68, .10);
         box-shadow: 0 7px 7px rgba(34, 17, 68, .10);
     }

     #menu-mobile {
         -webkit-box-shadow: 0 7px 7px rgba(34, 17, 68, .10);
         box-shadow: 0 7px 7px rgba(34, 17, 68, .10);
         position: relative;
         z-index: 500;
         -ms-flex-wrap: wrap;
         flex-wrap: wrap;
         background: #FCA;
         padding: 10px 0;
     }

     #menu-mobile a {
         display: block;
         -webkit-box-flex: 250px;
         -ms-flex: 250px;
         flex: 250px;
         background: #FCA;
         color: #fff;
         padding: 10px 15px;
     }

     #menu-mobile a:hover {
         background: #f66;
     }

     #menu {
         display: none;
     }

     #formulaire .col {
         width: 100%;
         margin: 10px 0;
     }
 }

 @media (max-width: 600px) {
     .chapeau {
         font-size: 1.2em;
     }

     #texte {
         text-align: left;
     }

     #appel {
         font-size: .9em;
         padding: 10px 0;
     }

     #appel:hover {
         font-size: 1em;
     }
 }

 @media (max-width: 480px) {
     #appel:before {
         content: '';
     }
 }

 @media (max-width: 430px) {

     #contact h2,
     #visite h2 {
         font-size: 1.8em;
     }

     #article h2 {
         font-size: 1.5em;
     }

     #article {
         text-align: left;
     }

     .box {
         padding: 15px;
     }

     #email {
         font-size: 2em;
     }
 }

 @media (max-width: 430px) {
     #article h1 {
         font-size: 3em;
     }
 }

 @media only print {

     #header,
     #menu,
     #etage1,
     #sbook,
     #formulaire,
     #pioneer,
     .ouvrir,
     .bouton,
     .f5,
     .fleche,
     .devis h2,
     #contact h2,
     #visite h2,
     #bouton-devis,
     #barre,
     #info-cookie {
         display: none !important;
     }

     * {
         -webkit-box-shadow: none !important;
         box-shadow: none !important;
     }

     h1 {
         margin-top: 80px !important;
         margin-bottom: 0 !important;
     }

     #page {
         min-height: auto;
     }

     .menu-ouvert {
         display: block;
     }

     #contact,
     #visite {
         padding: 0 !important;
     }
 }

 #covid {
     background: #fff url(img/covid.png) no-repeat right bottom;
     border-top: 1px solid #eee;
     min-height: 100px;
     padding: 35px 230px 30px 20px;
     color: #FCA;
     font-size: 1.4em;
 }


 @media (max-width: 730px) {
     #covid {
         background-position: 0 bottom;
         padding: 15px 15px 110px 15px;

     }
 }