/*******************************/
/*** STYLE CSS MOBILE FIRST ***/
/*****************************/

/*** GÉNÉRAL ***/

*, *:before, *:after {box-sizing: border-box;}

body{margin: 0; padding: 0; font-family: 'Lato', sans-serif; font-size: 16px; color: #222222; background-color: #222222;}

a{text-decoration: none; color: #00a99d; transition: all 0.2s ease 0s;}
a:hover,
a:active{text-decoration: underline; color: #000000;}

p{margin: 0 0 5px;}

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

h1{font-weight: normal; margin: 0;}

h2{margin: 0px 0px 18px; color: rgb(238, 238, 238); font-size: 1.6em;}
h2 span{background-color: #00a99d; padding-right: 5px;}
h2:after{content: ""; width: 100%; height: 2px; background-color: #EEEEEE; display: block; margin-top: -8px;}

h3{margin: 0px 0px 15px; text-align: center; font-size: 1.4em; text-transform: uppercase;}
h4{margin: 0 0px 15px; text-align: center; font-size: 1.2em; letter-spacing: 1px; text-transform: uppercase;}

.btn{position: relative; z-index: 5; word-break: break-all; display: block; text-align: center; transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; margin: 5px auto; background-color: #222222; color: #EEE; border: 0 none; border-radius: 3px; letter-spacing: 0.2px; max-width: 300px; width: 70%; text-transform: uppercase; padding: 9px 10px 8px; font-size: 15px; font-weight: normal; cursor: pointer;}
.btn:hover{background-color: #EEEEEE; color: #222222; text-decoration: none;}
.btn:before,
.btn:after{box-sizing: initial; content: ""; width: 0; height: 100%; border: 2px solid transparent; display: block; position: absolute; z-index: 2; top: -2px;}
.btn:before{left: -2px; border-radius: 5px 0 0 5px;}
.btn:after{right: -2px; border-radius: 0 5px 5px 0;}
.btn:active{background-color: #CCCCCC;}

/*** TÉLÉPHONE DESKTOP ***/
.phone-container-top,
.phone-container-middle,
.nav-container-middle,
.phone-container-bottom,
.phone-container,
.desktop-bloc{display: none;}

/*** BARRES DE FONCTIONS ***/

.languette{position: fixed; bottom: 0; z-index: 500; width: 100%; transition: all 0.2s ease 0s;}
.languette .languette-zone{display: none}
.languette .functionbar{width: 100%; background-color: rgba(0,0,0,0.5); padding-top: 5px; min-height: 50px;}
.languette .functionbar ul{padding: 0 10px; min-width: 210px; width: 80%; margin: 0 auto;}
.languette .functionbar ul:after{content: ""; display: block; clear: both;}
.languette .functionbar ul li{width: 33.33%; float: left; text-align: center; font-size: 10px;}
.languette .functionbar ul li a{color: #f0f0f0; display: block; height: 45px; padding: 10px 0;}
.languette .functionbar ul li a span{font-size: 0; display: none;}
.languette .functionbar ul li a svg{display: block; height: 22px; fill: #EEEEEE; margin: 0 auto;}

/*** HEADER + MENU ***/

header{position: relative;}

.topbar{width: 100%; height: 56px; position: fixed; z-index: 10; top: 0; background-color: #222222; color: #EEEEEE; padding: 8px 12px;}
.topbar:after{content: ""; display: block; clear: both;}

.topbar .Logo-Site{float: left; line-height: 0; margin-top: 1px;}
.topbar .Logo-Site:after{content: ""; display: block; clear: both;}

.topbar .Menu-Btn{float: right;}
.topbar .Menu-Btn span,
.topbar .Menu-Btn span::before,
.topbar .Menu-Btn span::after{background: #EEEEEE;}

#menu{position: absolute; top: 0; z-index: 5; display: none; min-height: 100vh; padding-bottom: 70px; width: 100%;}
.background-menu{position: fixed; width: 100%; height: 100%; top: 0;  background-color: #00a99d; display: none; z-index: 1;}

#menu a{color: #EEEEEE;}
#menu a:hover{text-decoration: none; color: #222222;}

#menu .Logo-Menu{display: block; background-color: #222222; text-align: center; padding: 20px;}
#menu .Logo-Menu img{max-width: 220px; width: 90%; height: auto;}

#menu .description-site{font-size: 16px; line-height: 1.4; text-align: center; width: 80%; margin: 25px auto 20px; color: #EEEEEE; text-transform: uppercase; letter-spacing: 1px;}

#menu nav{text-align: center; font-size: 20px; padding: 10px;}
#menu nav ul li{letter-spacing: 0.5px; margin: 10px 0;}
#menu nav ul li a:hover:before{content: "["; position: absolute;}
#menu nav ul li a:hover:after{content: "]"; position: absolute;}

#menu ul.list-social{text-align: center; padding: 15px 10px 0; position: relative;}
#menu ul.list-social:before{content: ""; display: block; position: absolute; top: 0; width: 100px; height: 1px; background-color: #EEEEEE; left: 50%; margin-left: -50px;}
#menu ul.list-social li{display: inline-block; margin: 10px 3px 0;}
#menu ul.list-social li a svg{min-height: 20px;}
#menu ul.list-social li a svg .facebookmenu,
#menu ul.list-social li a svg .twittermenu {fill: #EEEEEE;}
#menu ul.list-social li a path{transition: all 0.2s ease 0s;}
#menu ul.list-social li a.twitter:hover .twittermenu,
#menu ul.list-social li a.facebook:hover .facebookmenu {fill: #222222;}

.menuactif #menu,
.menuactif .background-menu{display: block;}
.menuactif .topbar{background-color: transparent;}
.menuactif .topbar .Logo-Site{display: none;}

/*** CONTENU ***/

section{}

section article{position: relative;}
section article .fp-tableCell{padding: 70px 10px 50px;}
section article:nth-child(even){background-color: #00a99d; color: #EEEEEE;}
section article:nth-child(odd){background-color: #f0f0f0; color: #333333;}
section article:nth-child(even) p,
section article:nth-child(odd) p{font-weight: normal; font-size: 1.15em; line-height: 1.4em;}
section article em{text-align: center; font-size: 15px; margin: 15px auto; display: block; width: 90%;}

section article#introduction{background: url("../img/Accueil.jpg") no-repeat center center transparent; background-size: cover;}
section article#introduction .tcon-indicator{position: absolute; bottom: 80px; right: 25px;}
section article#introduction .IntroText{position: absolute; bottom: 80px; font-size: 26px; color: #EEEEEE; width: 75%;}
section article#introduction .IntroText span{background-color: rgba(0,169,157,0.6); word-wrap: break-word; word-break: break-all; padding: 40px 3px 0; margin-top: 5px; display: block; float: left; line-height: 42px; overflow: hidden; height: 42px; transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s;}

section article:nth-child(odd) .fp-controlArrow.fp-prev{border-color: transparent #00a99d transparent transparent;}
section article:nth-child(odd) .fp-controlArrow.fp-next{border-color: transparent transparent transparent #00a99d;}
section article:nth-child(even) .fp-controlArrow.fp-prev{border-color: transparent #f0f0f0 transparent transparent;}
section article:nth-child(even) .fp-controlArrow.fp-next{border-color: transparent transparent transparent #f0f0f0;}
section article .fp-slidesContainer .slide .fp-tableCell{padding-left: 65px; padding-right: 65px;}

section article:nth-child(odd) .slide h2 span{background-color: #f0f0f0; padding-right: 5px; color: #333333;}
section article:nth-child(odd) .slide h2:after{background-color: #333333;}
section article:nth-child(even) .slide h2 span{background-color: #00a99d; padding-right: 5px;}

section article .slide {text-align: center;}
section article .slide .intro {text-align: left;} 

/*** SCHEMA ***/

.schema{max-width: 400px; width: 85%; margin: 15px auto 0; display: block;} 
#avantages #slide1 .schema{width: 70%;}

ul.technos{display: inline-block; text-align: center;}
ul.technos li{border: 0 none; position: relative; width: 22%; display: inline-block; margin: 2%;}
ul.technos li img{width: 100%; margin-bottom: 5px; -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: 0.75; transition: all 0.2s ease 0s;}
ul.technos li img:hover{-webkit-filter: grayscale(0%); filter: grayscale(0%); opacity: 1;}
ul.technos li span {display: block; text-align: center; font-family: 'Lato', sans-serif; font-size: 12px; letter-spacing:2px; text-transform: uppercase;}



/*******************/
/*** ANIMATIONS ***/
/*****************/

/*** BOUTONS ***/
.btn:hover:before{-webkit-animation: btnleft 500ms 1 linear; animation: btnleft 500ms 1 linear; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;}

@-webkit-keyframes btnleft {
  0% {width: 0;}
  20% {border-top: 2px solid #222222; border-left: 2px solid #222222; border-bottom: 2px solid #222222; border-right: 0px none !important;}
  100% {width: 50%; border-top: 2px solid #222222; border-left: 2px solid #222222; border-bottom: 2px solid #222222; border-right: 0px none !important;}
}

@keyframes btnleft {
  0% {width: 0;}
  20% {border-top: 2px solid #222222; border-left: 2px solid #222222; border-bottom: 2px solid #222222; border-right: 0px none !important;}
  100% {width: 50%; border-top: 2px solid #222222; border-left: 2px solid #222222; border-bottom: 2px solid #222222; border-right: 0px none !important;}
}

.btn:hover:after{-webkit-animation: btnright 500ms 1 linear; animation: btnright 500ms 1 linear; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;}

@-webkit-keyframes btnright {
  0% {width: 0;}
  20% {border-top: 2px solid #222222; border-right: 2px solid #222222; border-bottom: 2px solid #222222; border-left: 0px none !important;}
  100% {width: 50%; border-top: 2px solid #222222; border-right: 2px solid #222222; border-bottom: 2px solid #222222; border-left: 0px none !important;}
}

@keyframes btnright {
  0% {width: 0;}
  20% {border-top: 2px solid #222222; border-right: 2px solid #222222; border-bottom: 2px solid #222222; border-left: 0px none !important;}
  100% {width: 50%; border-top: 2px solid #222222; border-right: 2px solid #222222; border-bottom: 2px solid #222222; border-left: 0px none !important;}
}

/*** MENU : CHEVRON GAUCHE ***/
nav ul li a:hover:before{-webkit-animation: chevbefore 800ms infinite linear; animation: chevbefore 800ms infinite linear;}

@-webkit-keyframes chevbefore {
  0% {margin-left: -15px;}
  50% {margin-left: -20px;}
  100% {margin-left: -15px;}
}

@keyframes chevbefore {
  0% {margin-left: -15px;}
  50% {margin-left: -20px;}
  100% {margin-left: -15px;}
}

/*** MENU : CHEVRON DROIT ***/
nav ul li a:hover:after{-webkit-animation: chevafter 800ms infinite linear; animation: chevafter 800ms infinite linear;}

@-webkit-keyframes chevafter {
  0% {margin-left: 5px;}
  50% {margin-left: 12px;}
  100% {margin-left: 5px;}
}

@keyframes chevafter {
  0% {margin-left: 5px;}
  50% {margin-left: 10px;}
  100% {margin-left: 5px;}
}

/*** TEXTE D'INTRO ***/
section article#introduction .IntroText span{-webkit-animation: introtext 700ms 1 linear; animation: introtext 700ms 1 linear;  animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;}

@-webkit-keyframes introtext {
  0% {padding-top: 50px;}
  100% {padding-top: 0;}
}

@keyframes introtext {
  0% {padding-top: 50px;}
  100% {padding-top: 0;}
}

/*** BARRE H2 ***/
h2:after{-webkit-animation: hdeuxanim 1s 1 linear; animation: hdeuxanim 1s 1 linear;  animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;}

@-webkit-keyframes hdeuxanim {
  0% {width: 0;}
  100% {width: 100%;}
}

@keyframes hdeuxanim {
  0% {width: 0;}
  100% {width: 100%;}
}

/*** FUNCTION BAR ***/
a:hover #btntotop {-webkit-animation: btntotop 800ms 2 linear; animation: btntotop 800ms 2 linear;  animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;}

@-webkit-keyframes btntotop {
  0% {margin-top:0;}
  33% {margin-top:3px;}
  66% {margin-top:-5px;}
  100% {margin-top:0;}
}

@keyframes btntotop {
  0% {margin-top:0;}
  33% {margin-top:3px;}
  66% {margin-top:-5px;}
  100% {margin-top:0;}
}

a:hover #btncontact {-webkit-animation: btncontact 800ms 2 linear; animation: btncontact 800ms 2 linear;  animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;}

@-webkit-keyframes btncontact {
  0% {-webkit-transform: scale(1,1)}
  33% {-webkit-transform: scale(0.9,0.9)}
  66% {-webkit-transform: scale(1.1,1.1)}
  100% {-webkit-transform: scale(1,1)}
}

@keyframes btncontact {
  0% {transform: scale(1,1)}
  33% {transform: scale(0.9,0.9)}
  66% {transform: scale(1.1,1.1)}
  100% {transform: scale(1,1)}
}

a:hover #btntelephone{-webkit-animation: btntelephone 800ms 2 linear; animation: btntelephone 800ms  2 linear;  animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;}

@-webkit-keyframes btntelephone {
  0% {-webkit-transform: rotate(0deg);}
  33% {-webkit-transform: rotate(-8deg);}
  66% {-webkit-transform: rotate(20deg);}
  100% {-webkit-transform: rotate(0deg);}
}

@keyframes btntelephone {
  0% {transform: rotate(0deg);}
  33% {transform: rotate(-8deg);}
  66% {transform: rotate(20deg);}
  100% {transform: rotate(0deg);}
}

/*******************/
/*** RESPONSIVE ***/
/*****************/

/*** TÉLÉPHONE DESKTOP ***/
@media screen and (min-width: 1024px) and (min-height: 800px) {

  ::-webkit-scrollbar {display: none;}
  .site-container {-ms-overflow-style: none;}

  body{background-color: #00a99d;}
  .site-container{width: 350px; height: 599px; background-color: #222222; position: fixed; top: 50%; margin-top: -300px; left: 100px; z-index: 300; overflow: scroll;}
  .fullpage-wrapper{width: 350px; height: 599px;}
  
  .phone-container-top{display:block; height: 20px; width: 370px; background-color: #111111; border-radius: 20px 20px 0 0; position: fixed; z-index: 150; left: 90px; top: 50%; margin-top: -320px;}
  .phone-container-top:before{content: "Site optimisé pour mobile !"; color: #EEEEEE; width: 370px; text-align: center; display: block; margin-top: -40px; font-size: 26px; letter-spacing: 0.5px;}
  .phone-container-middle{display:block; height: 600px; width: 370px; background-color: #111111; position: fixed; z-index: 0; left: 90px; bottom: 50%; margin-bottom: -300px;}
  .phone-container-bottom{display:block; height: 70px; width: 370px; background-color: #111111; border-radius: 0 0 20px 20px; position: fixed; z-index: 500; left: 90px; bottom: 50%; margin-bottom: -370px;}
  .phone-container-bottom:after{content:""; position: absolute; width: 40px; height: 10px; border-radius: 5px; content: ""; background-color: #333; top: 30px; left: 50%; margin-left: -20px;}

  .nav-container-middle{display:block; position: fixed; top: 50%; left: 55px; margin-top: -50px; z-index: 300;}
  .nav-container-middle li a{color: #EEEEEE;}
  .nav-container-middle li a:hover{text-decoration: none;}
  .nav-container-middle li a:before{content: "•"; font-size: 20px; opacity: 0.7;}
  .nav-container-middle li a:hover:before{content: "▾"; font-size: 20px; opacity: 1;}
  .nav-container-middle li.current a:before{color:"#FFFFFF"; opacity: 1;}
  .nav-container-middle li a span{font-size: 0;}

  .desktop-bloc {display:block; width: 500px;position: fixed; right: 5%; top: 50%; margin-top: -200px;}
  .desktop-bloc svg{width: 400px; float: right;}
  .desktop-bloc .st0{fill:#FFFFFF;}
  .desktop-bloc .st1{fill:#222222;}
  .desktop-bloc .st2{fill:#FFFFFF;}
  .desktop-bloc p{display: block; clear: both; text-align: right; color: #EEEEEE; font-size: 28px; padding-top: 18px; line-height: 1.4; font-weight: 100;}
  .desktop-bloc p strong{font-size: 22px; letter-spacing: 2px; text-transform: uppercase;}
  .desktop-bloc .Contact-Desktop{margin: 0; display: inline-block; width: 200px;}
  .desktop-bloc ul.list-social{text-align: center; width: 120px; float: right; display: block; position: relative; margin-top: 28px; padding-top: 28px; border-top: 1px solid #EEEEEE;}
  .desktop-bloc ul.list-social li{display: inline; float: right; text-align: right; margin-left: 20px;}
  .desktop-bloc ul.list-social li a svg{min-height: 25px; width: auto;}
  .desktop-bloc ul.list-social li a svg .facebookmenu,
  .desktop-bloc ul.list-social li a svg .twittermenu {fill: #EEEEEE;}
  .desktop-bloc ul.list-social li a path{transition: all 0.2s ease 0s;}
  .desktop-bloc ul.list-social li a.twitter:hover .twittermenu,
  .desktop-bloc ul.list-social li a.facebook:hover .facebookmenu {fill: #222222;}

  .topbar{left: 100px; width: 350px; z-index: 200; top: 50%; margin-top: -300px;}
  .topbar #menu{width: 350px; z-index: 190; min-height: auto;}
  #menu{min-height: 600px;}
  .background-menu {width: 350px; height: 600px; top: 50%; margin-top: -300px;}
  .languette {left: 100px; width: 350px; z-index: 200; top: 50%; margin-top: 257px; position: fixed; bottom: auto;}
  .languette:hover {margin-top: 215px;}
  .languette .languette-zone{display:block; width: 40px; border-radius: 5px 5px 0 0; height: 37px; margin: 0 auto; line-height: 25px; vertical-align: bottom; padding: 10px 10px 0; background-color: rgba(0,0,0,0.5);}

  section article {height: 600px; padding: 70px 10px 40px; overflow: scroll;}
  section article .slider-bloc{min-height: 430px;}
}

@media screen and (min-width: 700px) and (max-width: 1024px) and (min-height: 980px) and (max-height: 1500px) {
  h2 {margin: 0px 0px 25px; font-size: 1.9em;}
  h3 {font-size: 1.6em;}
  h4 {font-size: 1.3em;}
  .functionbar ul li a {height: 55px; padding: 15px 0;}
  .functionbar ul li a svg {height: 25px;}
  #menu .Logo-Menu img {max-width: 270px;}
  #menu .description-site {font-size: 18px; width: 60%;}
  section article {padding: 76px 25px 30px;}
  section article .slider-bloc {padding: 25px;}
  section article#introduction .IntroText {font-size: 36px; width: 55%;}
  section article#introduction .IntroText span {line-height: 50px; height: 50px;}
  section article:nth-child(2n) p,
  section article:nth-child(2n+1) p {font-weight: normal; font-size: 1.3em; line-height: 1.4em;}
  section article .slider-bloc {min-height: 80vmax;}
  footer {padding: 15px 10px 70px;}
}