@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800&display=swap');

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?wltqew');
  src:  url('../fonts/icomoon.eot?wltqew#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?wltqew') format('truetype'),
    url('../fonts/icomoon.woff?wltqew') format('woff'),
    url('../fonts/icomoon.svg?wltqew#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


.icon-arrow-down:before{content:"\e900";}
.icon-arrow-left:before{content:"\e901";}
.icon-arrow-right:before{content:"\e902";}
.icon-arrow-up:before{content:"\e903";}
.icon-facebook:before{content:"\e904";}
.icon-instagram:before{content:"\e905";}
.icon-phone:before{content:"\e906";}
.icon-twitter:before{content:"\e907";}
.icon-youtube:before{content:"\e908";}


*, *:before, *:after{box-sizing: inherit; outline: none;}
a, a:hover, a:focus, a:active, a:visited {outline: none;}
html{text-size-adjust: 100%;box-sizing: border-box; overflow-x:hidden; width:100%;}
body{font-family: 'Open Sans', sans-serif; background-color:#fff;font-size:15px;color: #222; overflow-x:hidden; width:100%;}

*::selection{background:#333;color:#ffffff;}
*::-moz-selection{background:#333;color:#ffffff;}
*::-webkit-selection{background:#333;color:#ffffff;}
*::-khtml-selection{background:#333;color:#ffffff;}
*::-o-selection{background:#333;color:#ffffff;}

.clear{*zoom:1;}
.clear:before, .clear:after{display: table; content : "";}
.clear:after{clear : both;}
hr.clear{height: 0;}
img {border: none;  max-width: 100%; width: 100%;  height: auto;}


header, main, footer{width: 100%;}
#loadPage{position: fixed; top:0; left:0; z-index: 9999; width: 100%; height: 100%; background-color: #222; justify-content: center; align-items: center; display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;}
#loadPage img{width: 260px;}

.at-mail:before{content:'@'; font-style: normal; font-weight: 900;}
.swiper-slide{display:flex;align-items:center;overflow:hidden;flex:1 0 auto;height:100%;}
.swiper-wrapper{display:flex;flex-wrap:nowrap;height:100%;}

/**************** CONTENT ***************/

.contentPage{padding:8em 0;}
.title{font-size: 28px; text-transform: uppercase; font-weight: 900; letter-spacing: 5px; line-height: 1.1;}
.subtitle{text-transform: uppercase; letter-spacing: 2px; font-weight: 900; font-size: 16px; text-shadow: 1px 1px 0 #fff, 2px 2px 0 #e63323;}
.small-title{}
.paragraphe{font-size: 15px; line-height: 1.7; margin-top: 2em; color:#333;}
.paragraphe strong{font-size: 15px; line-height: 1.8; margin-top: 2em; color:#111; font-weight: 700;}
.paragraphe.p-white{color:#ddd;}
.paragraphe.p-white strong{color:#fff; font-weight: 700;}
.important{}
.list li{position: relative; padding-left: 1em; color:#000;}
.list li:before{content:''; position: absolute; top:8px; left:0; width: 6px; height: 6px; background: #e63323;}
.btn{display: inline-block; text-transform: uppercase; padding:0.7em 4em 0.7em 1.5em; line-height: 1.2; letter-spacing: 4px; background: #fff; color:#e63323; font-size: 22px; font-weight: 900; margin-top: 0.5em; transition:0.3s;}
.btn span{color:#222; transition:0.3s;}
.btn span i{font-size: 12px; margin-left: 10px; position: relative; top:-2px;}
.btn:hover{background: #e63323; color:#fff;}
.small-link{color:#e63323;}
.fluid-container{width: 100%; padding:0 80px;}
.redShape{background: #e63323; filter:brightness(1.7); opacity: 0.8; position: absolute; mix-blend-mode: multiply; box-shadow: 0 0 10px 2px rgba(0,0,0,0.4);}
.redShape:before{content:''; background: #fff; width: 100%; height: 100%; position: absolute; opacity: 0; animation:redShape 2s infinite alternate; -webkit-animation:redShape 2s infinite alternate;}
.info-error{background:red; color: #fff; padding: 6px 12px;}
.info-valid{background:lime; color: #000; padding: 6px 12px;}
.btn-gris{position: relative; cursor:not-allowed;}
.btn-gris:hover{background: #fff; color:#e63323;}
.btn-gris:after{content:''; position: absolute; top:0; left:0; width: 100%; height: 100%; background: #000; opacity: 0.5;}
.backBtn{text-align: center; padding-top: 6em;}
.backBtn .btn{padding:0.8em 1.5em; background: #eee;}
.backBtn .btn:hover{background: #e63323;}
.maintenance{display: block; max-width: 600px; margin:0 auto; text-align: center; padding:6em 1em 4em 1em; font-size: 18px; font-weight: bold;}
button{border:none; font-family: 'Open Sans', sans-serif; text-align: left;}

@keyframes redShape{
  0%{opacity: 0.2;}100%{opacity: 0;}
}

@-webkit-keyframes redShape{
  0%{opacity: 0.2;}100%{opacity: 0;}
}

/**************** HEADER ****************/

header{position: fixed; top:0; left:0; z-index:99; transition:0.2s;}
#headerTop{background-color: #fff; padding:0.4em; color:#333; position: fixed; z-index: 99; top:0; left:0; width: 80px; height: 100%; transition: 0.5s;}
#headerTop h1{position: absolute; transform-origin: 0 0; transform: rotate(-90deg); font-weight: 700; color:#b4b4b4; font-size: 12px; letter-spacing: 4px; bottom:40px; left:30px; width: 600px;}
#headerBottom{background-color: transparent; padding:2em 1em; transition: 0.5s;}
.fixed-header #headerBottom{background-color: rgba(15,15,15,0.9); padding:1em;}
.fixed-header #headerTop{background: rgba(255,255,255,0.05); /*box-shadow: 0 1px 3px rgba(0,0,0,0.2);*/}
#logo{margin-left: 80px;}
#logo img{/*width: auto;*/ width: 144px; transition: 0.5s;}

.fixed-header #logo img{width: 80px;}

.contact-header{position: absolute; top:0; right: 0; transform: rotate(-90deg) translateX(-5.5em); text-transform: uppercase; font-size: 15px; letter-spacing: 10px; font-weight: 700; overflow: hidden; width: 270px; height: 60px; transition:0.5s;}
.mail-header{color:#fff; position: relative; top:0; left:60px; padding:20px 30px; transition:0.2s; background: #222;}
.phone-header{background: #fff; color:#333; transition:0.2s; position: relative; padding:26px 16px 26px 26px; position: relative; top:21px; left:-4px;}
.mail-header:hover{background: #e63323;}
.phone-header:hover{background: #e63323; color:#fff;}

.fixed-header .contact-header{transform: none; top:24px; right: -10px;}

@media screen and (max-width: 1199px) {
  #headerTop{position: relative; top:0; left:0; width: 100%; height: 20px; transition: 0s;}
  .fixed-header header{top:-20px;}
  #headerTop h1{transform: none; position: relative; bottom:3px; left:0; letter-spacing: 1px; font-weight: 500; font-size: 10px;}
  #logo{margin-left: 10px;}
  #logo img{/*width: auto;*/ width: 120px; transition: 0.5s;}
  .fixed-header #logo img{width: 70px;}
  .contact-header{display: none;}
}

@media screen and (max-width: 575px) {
  #headerTop h1{bottom:3px; left:0; letter-spacing: 0.5px; font-size: 9px;}
  #logo{margin-left: 0px; padding:0;}
  #logo img{/*width: auto;*/ width: 80px; transition: 0.5s;}
  .fixed-header #logo img{width: 50px;}
  #headerBottom{padding:1em 0.5em;}
}

/***************** MENU *****************/

/*#nav{display: flex; justify-content: flex-end; align-items: center; height: 100%;}
#nav ul{display: inline-block;}
#nav ul li{display: inline; padding:0.6em 0.2em; position: relative;}
#nav ul li a{color:#333; padding:0.6em 0.4em; transition:0.3s;}
#nav ul li a:hover{color:#ff0000;}
#nav ul li a i{font-style: normal; position: relative; top:-6px; font-weight: bold;}
#nav ul li a.active{color:#ff0000; background-color: #ddd;}

#nav ul li ul{display: none; position: absolute; bottom:0; transform: translateY(100%); left:0; padding:0.6em 0; min-width: 200px; background-color: #ccc;}
#nav ul li ul li{display: block; padding:0.2em 0;}
#nav ul li ul li a{padding:0.4em 0.8em; display: inline-block; width: 100%;}
#nav ul li ul li a:hover{background-color: #330000;}*/

/* MENU MOBILE */

#navBtn{padding:0.5em; transition:0.3s; position: absolute; z-index: 9999; top:0; left:0; width: 80px; color:#e63323; font-size: 12px; text-transform: uppercase; font-weight: 700; letter-spacing: 6px; background: #fff; height: 200px; border-bottom: 1px solid #ddd}
#navBtn span:nth-child(1){display: block; width: 100%; height: 100%; position: relative;}
#navBtn span:nth-child(1):before{display: block; content:attr(data-menu); position: absolute; bottom:20px; left:3px; transform:rotate(-90deg) translateX(50%);}
#navBtn span:nth-child(1):after{display: none; content:attr(data-fermer); position: absolute; bottom:14px; left:-8px; transform:rotate(-90deg) translateX(50%);}
#navBtn span:nth-child(2){display: block; width: 30px; height: 36px; position: absolute; top:50px; left:25px;}
#navBtn span:nth-child(2) i{height: 2px; background: #333; display: block; position: relative;}
#navBtn span:nth-child(2) i:nth-child(1){width: 22px; top:0; left:0; transition: 0.2s;}
#navBtn span:nth-child(2) i:nth-child(2){width: 30px; top:5px; left:0; transition: 0.2s;}
#navBtn span:nth-child(2) i:nth-child(3){width: 22px; top:10px; left:8px; transition: 0.2s;}
#navBtn:hover span:nth-child(2) i:nth-child(1){left:8px;}
#navBtn:hover span:nth-child(2) i:nth-child(3){left:0;}
#navBtn:hover{box-shadow: inset 0 -4px 10px #ccc;}

#navBtn.active{background-color: #222; border-color: #000;}
#navBtn.active span:nth-child(2) i{background-color: #fff;}
#navBtn.active span:nth-child(1):before{display: none;}
#navBtn.active span:nth-child(1):after{display: block;}
#navBtn.active:hover{box-shadow: inset 0 -4px 10px #111;}

#navMobile{position:fixed; top:0; left:0; z-index: 999; transform: translateX(-100%); overflow: hidden; width:100%; height: 100%; background-color: #292929; transition: 0.3s ease-in-out; align-items: center; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;}
#navMobile.active{transform: translateX(0);}
#navMobile ul{width: 100%; height: 100%; justify-content: space-around; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;}
#navMobile ul li{overflow: hidden; position: relative; z-index: 1; height: 100%; display: block; width: 100%; transition:0.3s;}
#navMobile ul li span.navImg{transition:0.3s; filter: saturate(0); position: absolute; z-index: 1; width: 100%; height: 100%; display: block; background: center no-repeat; -webkit-background-size: cover; background-size: cover;}
#navMobile ul li a{width: 100%; height: 100%;}
#navMobile ul li a span.textNav{position: absolute; z-index: 2; top:50%; left:50%; transform: rotate(-90deg) translateX(-50%); transform-origin: 0 50%; color:#fff; font-weight: 700; text-shadow: 0 0 12px #000; padding:0.3em; transition:0.3s; display:block; font-size:30px; text-transform: uppercase; letter-spacing: 3px; text-align: center;}
#navMobile ul li a:hover span.textNav{color:#e63323;}
#navMobile ul li a:hover span.navImg{transform:scale(1.2); filter: saturate(1);}
#navMobile ul li a span.navImg:after{content:''; top:0; left:0; position: absolute; width: 100%; height: 100%; background: #000; opacity: 0.5; transition: 0.5s;}
#navMobile ul li.active a span.navImg:after{opacity:0;}
#navMobile ul li.active{width: 140%; z-index: 2; box-shadow: 0 0 8px 8px rgba(0,0,0,0.5);}

/*#navMobile ul li ul{position: fixed; width: 100%; height: 100%; background: #222; top:0; left:0; transform: translateX(-100%); transition: 0.3s; justify-content: center; align-items: center; flex-direction: column; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;}
#navMobile ul li ul.active{transform: translateX(0%);}
#navMobile ul li ul li{display: inline-block;}
#navMobile ul li ul li a{}
#navMobile ul li ul li a:hover{}
#navMobile ul li ul li a i{left:-6px;}*/

@media screen and (max-width: 1199px) {
  #navBtn{left:initial; right: 0; top:50px; width: 170px; height: 70px; border:none;}
  .fixed-header #navBtn{left:initial; right: 0; top:34px; width: 170px; height: 70px;}
  #navBtn span:nth-child(1):before{bottom:16px; left:70px; transform:none;}
  #navBtn span:nth-child(1):after{bottom:16px; left:66px; transform:none;}
  #navBtn span:nth-child(2){top:30px;}
}

@media screen and (max-width: 991px) {
  #navMobile ul{flex-direction: column; align-items: center; justify-content: center;}
  #navMobile ul li a span.textNav{font-size: 20px; transform:none; position: relative; left:0;}
  #navMobile ul li{height: auto;}
  #navMobile ul li span.navImg{display: none;}
  #navMobile ul li.active{width: 100%;}
}

@media screen and (max-width: 575px) {
  #navBtn{top:40px; width: 150px; height: 50px;}
  .fixed-header #navBtn{top:34px; width: 150px; height: 50px; background: transparent;}
  #navBtn span:nth-child(1):before{bottom:8px; left:70px; transform:none;}
  #navBtn span:nth-child(1):after{bottom:9px; left:58px; transform:none;}
  #navBtn span:nth-child(2){top:20px;}
  #navBtn:hover, #navBtn.active:hover{box-shadow: none;}
  .fixed-header #navBtn span:nth-child(2) i{background: #fff;}
  #navMobile ul li a span.textNav{text-align: left; font-size: 18px; padding:0.5em 0 0.5em 1.5em;}
}

/**************** SLIDER ****************/

#slider{width: calc(100% - 80px); height: 940px; position: relative; top:0; left: 80px; overflow: hidden;}
#slider .video:before{content:''; width: 100%; height: 100%; position: absolute; top:0; left:0; z-index: 1; background: url('../img/motif.png') repeat;}
#slider h2{color:#fff; position: absolute; top:50%; left:15%; z-index: 2; line-height: 1; font-size: 28px; text-transform: uppercase; letter-spacing: 3px; font-weight: 900;}
#slider h2 span{color:transparent; font-size: 138px; letter-spacing: 10px; display: inline-block; -webkit-background-clip: text; background-clip: text; background-position:10%; position: relative; background-size: cover; background-image: url('../img/text-video.gif');}
#slider .nav-slider{position: absolute; bottom:2em; right:2em; z-index: 2;}
#slider .nav-slider .btn{background: rgba(255,255,255,0.7);}
#slider .nav-slider .btn:nth-child(2){margin-left: 1em;}
#slider .nav-slider .btn:hover{background: #e63323; color:#fff;}
#slider #scrollDown{position: absolute; z-index: 2; bottom:-30px; left:13px; width: 60px; height: 60px; background: #222; transform: rotate(-45deg); overflow: hidden;}
#slider #scrollDown a{color:#222; padding: 40px; background: #fff; transform: rotate(45deg); display: inline-block; position: relative; top:-26px; left:-6px; transition: 0.3s;}
#slider #scrollDown a:hover{background: #222; color:#fff;}

@media screen and (max-width: 1399px) {
  #slider{height: 800px;}
}

@media screen and (max-width: 1199px) {
  #slider{width:100%; left:0; height: 650px;}
  #slider h2{font-size: 20px;}
  #slider h2 span{font-size: 90px;}
}

@media screen and (max-width: 991px) {
  #slider{height: 500px;}
  #slider h2 span{font-size: 70px;}
  #slider .nav-slider{bottom:1.5em; right:1.5em;}
}

@media screen and (max-width: 767px) {
  #slider{height: 420px;}
}

@media screen and (max-width: 575px) {
  #slider{height: 380px;}
  #slider h2{font-size: 15px; top:50%; left:50%; transform: translate(-50%);}
  #slider h2 span{font-size: 40px; letter-spacing: 8px;}
  #slider .nav-slider{bottom:4em; right:0; width: 100%; justify-content: center; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;}
  #slider #scrollDown{width: 40px; height: 40px; bottom:-20px; left:9px;}
  #slider #scrollDown a{top:-33px; left:-19px;}
}

/*VIDEO*/

.video:after{content:''; background: #000; position: absolute; top:0; left:0; width: 100%; height: 100%; opacity: 0.3;}

.video{overflow: hidden; position: absolute; top: 0; right: 0; bottom: 0; left: 0;}

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

/* 1. Pas de support d'object-fit */
@media (min-aspect-ratio: 16 / 9) {
  .video > video {
    height: 300%;
    top: -100%; } }
@media (max-aspect-ratio: 16 / 9) {
  .video > video {
    width: 300%;
    left: -100%; } }
/* 2. En cas de support d'object-fit, écrase en (1) */
@supports (object-fit: cover) {
  .video > video {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover; } }

/**************** HEADERS ***************/

.titleHeader{width: calc(100% - 80px); height: 300px; position: relative; top:0; left: 80px; overflow: hidden;}
.titleHeader > div{animation:bgHeader 6s 0.8s; -webkit-animation:bgHeader 6s 0.8s; position: absolute; top:0; left:0; width: 100%; height: 100%; background: no-repeat center; -webkit-background-size: cover; background-size: cover;}
.titleHeader > div:before{content:''; width: 100%; height: 100%; position: absolute; top:0; left:0; z-index: 1; background: url('../img/motif.png') repeat;}
.titleHeader h2{position: absolute; top:50%; left:50%; transform: translate(-50%); color:#fff; z-index: 2; font-weight: 900; text-transform: uppercase; font-size: 36px; text-shadow: 4px 4px 0 #000;}
.titleHeader h2 span:nth-child(1){animation:titleHeader 3s 1s; -webkit-animation:titleHeader 3s 1s; position: relative; top:-0.35em; left:1.5em;}
.titleHeader h2 span:nth-child(3){animation:titleHeaderSpan 3s 1s; -webkit-animation:titleHeaderSpan 3s 1s; color:#e63323; position: relative; top:0.35em; left:-1.5em;}
.titleHeader h2 br{display: none;}

@keyframes bgHeader{
  0%{transform: scale(1.25);}
  100%{transform: scale(1);}
}

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

@keyframes titleHeader{
  0%{left:0;}
  100%{left:1.5em;}
}

@-webkit-keyframes titleHeader{
  0%{left:0;}
  100%{left:1.5em;}
}

@keyframes titleHeaderSpan{
  0%{left:0;}
  100%{left:-1.5em;}
}

@-webkit-keyframes titleHeaderSpan{
  0%{left:0;}
  100%{left:-1.5em;}
}

@media screen and (max-width: 1260px) {
  .titleHeader{width:100%; left:0; height: 200px;}
  .titleHeader h2{font-size: 20px;}
}

@media screen and (max-width: 767px) {
  .titleHeader h2{text-align: center; text-shadow: 2px 2px 5px #000, -1px -1px 4px #000, 0 0 16px #000;}
  .titleHeader h2 span:nth-child(1), .titleHeader h2 span:nth-child(3){top:0; animation: none; left:0;}
  .titleHeader h2 br{display: inline;}
}

@media screen and (max-width: 575px) {
  .titleHeader h2{top:calc(50% + 20px); display: block; width: 100%;}
}

/**************** BIENVENUE ***************/

.bienvenuePage{padding:60px; background: #e63323;}
.bienvenuePage .imgAccueil{padding:0; position: relative;}
.bienvenuePage .imgAccueil img{position: absolute; top:0; left:0; width: 95%; max-width: 900px; box-shadow: 0 0 10px 2px rgba(0,0,0,0.4);}
.bienvenuePage .imgAccueil .redShape{top:90px; left:-90px; width: 450px; height: 460px; border-left: 30px solid #fff;}

.bienvenuePage .signature{font-size: 20px; color:#fff; font-weight: 700; text-align: right; margin-top: 3em;}
.bienvenuePage .textAccueil{padding-left: 5em; padding-right: 5.8em;}
.bienvenuePage .textAccueil p:nth-child(2){margin-top: 5em;}
.bienvenuePage .textAccueil p:last-child{text-align: right; margin-top: 3em;}
.bienvenuePage .textAccueil .btn{text-align: left;}
.bienvenuePage .textAccueil .btn:hover{background: #222; color:#e63323;}
.bienvenuePage .textAccueil .btn:hover span{color:#fff;}

.bienvenuePage .title{position: absolute; top:-85px; color:#e63323;}
.bienvenuePage .title span{position: relative; left:30px; color:#fff;}

@media screen and (max-width: 1699px) {
  .bienvenuePage .textAccueil p:nth-child(2){margin-top: 3em;}
  .bienvenuePage .textAccueil{padding-left: 3em; padding-right: 1.5em;}
  .bienvenuePage .signature{font-size: 18px; margin-top: 2em;}
  .bienvenuePage .textAccueil p:last-child{margin-top: 2em;}
  .bienvenuePage .imgAccueil img{width: 97%; top:10px;}
}

@media screen and (max-width: 1199px) {
  .bienvenuePage{padding:50px;}
  .bienvenuePage .textAccueil p:nth-child(2){margin-top: 1.5em;}
  .bienvenuePage .textAccueil{padding-left: 2em; padding-right: 0;}
  .bienvenuePage .title{top:-71px;}
  .bienvenuePage .imgAccueil .redShape{left:-80px; height: 440px;}
}

@media screen and (max-width: 991px) {
  .bienvenuePage .imgAccueil img{width: 100%; top:0; position: relative;}
  .bienvenuePage{padding:50px;}
  .bienvenuePage .textAccueil p:nth-child(2){margin-top: 1.5em;}
  .bienvenuePage .textAccueil{padding-left: 2em; padding-right: 0;}
  .bienvenuePage .title{top:-71px;}
  .bienvenuePage .imgAccueil .redShape{left:-80px; height: 300px;}
}

@media screen and (max-width: 767px) {
  .bienvenuePage{padding:40px;}
  .bienvenuePage .textAccueil p:nth-child(2){margin-top: 1.5em;}
  .bienvenuePage .imgAccueil .redShape{left:-70px; height: 300px;}
}

@media screen and (max-width: 690px) {
  .bienvenuePage .imgAccueil img{width: 100%; top:0; position: relative;}
  .bienvenuePage{padding:40px;}
  .bienvenuePage .textAccueil p:nth-child(2){margin-top: 1.5em;}
  .bienvenuePage .textAccueil{padding-left: 2em; padding-right: 0;}
  .bienvenuePage .imgAccueil .redShape{left:-70px; top:10%; width:300px; height: 250px;}
}

@media screen and (max-width: 690px) {
  .bienvenuePage{padding:30px;}
  .bienvenuePage .textAccueil{padding-left: 0; padding-right: 0;}
  .bienvenuePage .title{top:-62px; left:20px;}
  .bienvenuePage .imgAccueil .redShape{left:-60px; top:15%; width:300px; height: 140px;}
}

@media screen and (max-width: 400px) {
  .bienvenuePage .title{top:-50px; left:-10px; width:300px; letter-spacing: 2px; font-size: 17px;}
  .bienvenuePage .imgAccueil .redShape{left:-60px; top:15%; width:300px; height: 100px;}
  .bienvenuePage .textAccueil .paragraphe{font-size: 14px;}
}





/**************** LAST ACTU ***************/

.lastActuPage{padding:60px; background: #333; position: relative;}
.lastActuPage:before{content:''; width: 450px; height: 100%; top:0; right: 240px; position: absolute; background: #222;}
.lastActuPage .imgLastActu{position: absolute; top:-20px; right:30px; width: 100%; max-width: 480px; height: calc(100% + 40px); max-height: 800px; box-shadow: 0 0 10px 2px rgba(0,0,0,0.4); -webkit-background-size: cover; background-size: cover;}
.lastActuPage .redShape{bottom:-30px; right:-30px; width: 480px; height: 480px; border-bottom: 30px solid #fff; border-right: 30px solid #fff; mix-blend-mode: normal;}

.lastActuPage .title{position: absolute; top:-25px; color:#333;}
.lastActuPage .title span{position: relative; left:130px; color:#fff;}
.lastActuPage .titleActu{position: absolute; bottom:0; left:5%; transform-origin: 0% 100%; transform: rotate(-90deg) translateY(100%); /*mix-blend-mode: luminosity;*/ color:#fff; text-transform: uppercase; letter-spacing: 6px; font-size: 66px; line-height: 1.1; font-weight: 300; margin:0; padding:0; display: block;}
.lastActuPage .titleActu span{position: relative; left:104px;}
.lastActuPage .titleActuMobile{display: none; color:#fff; text-transform: uppercase; font-size: 22px; font-weight: 900; letter-spacing: 2px; margin-top: 2em; text-shadow: 2px 2px 0px #e63323;}
.lastActuPage .paragraphe:nth-child(1){margin-top: 5em;}
.lastActuPage .calendrier{color:#fff; font-weight: 700; line-height: 1.4;}
.lastActuPage .btn{margin-top: 4em;}


.lastActuPage .swiper-last-actu{position: relative; overflow-x:hidden;}
.lastActuPage .swiper-slide{transition: 1s;}
.lastActuPage .swiper-slide:not(.swiper-slide-active){filter: blur(10px); opacity: 0.8;}
.lastActuNav{position: absolute; z-index: 2; bottom:100px; right: 10px; width: 70px; height: 100px;}
.lastActuNav .swiper-last-actu-prev, .swiper-last-actu-next{display: block; width: 100%; height: 50px; color:#fff; position: absolute; transition: 0.3s; cursor: pointer; justify-content: center; align-items: center; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;}
.lastActuNav .swiper-last-actu-prev:hover, .swiper-last-actu-next:hover{color:#333;}
.lastActuNav .swiper-last-actu-prev{top:50px; left:0;}
.lastActuNav .swiper-last-actu-next{top:0; right: 0;}

.swiper-last-actu-pagination{counter-reset: nav; position: absolute; bottom: 10px; right: 750px; z-index: 2;}
.swiper-last-actu-pagination .swiper-pagination-bullet{display: block; margin:70px 0; width: 80px; height: 1px; cursor:pointer; transition:1s; position: relative;}
.swiper-last-actu-pagination .swiper-pagination-bullet:after{content:''; position: absolute; top:0; left:0; width: 0; height: 100%; background-color: #e63323; transition:1s;}
.swiper-last-actu-pagination .swiper-pagination-bullet-active:after{width: 100%;}
.swiper-last-actu-pagination .swiper-pagination-bullet:before{counter-increment: nav; content: counter(nav); font-weight: 700; font-family: 'Times New Roman', serif; position: absolute; top:-28px; left:130px; color:#fff; font-size: 48px; transition: 0.2s;}
.swiper-last-actu-pagination .swiper-pagination-bullet-active:before{color:#e63323;}
.swiper-last-actu-pagination .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover:before{color:#e63323;}


@media screen and (min-width: 1200px) and (max-width: 1599px) {
  .lastActuPage .col-12.col-xl-4, .lastActuPage .col-12.col-xl-8{max-width: 50%; width: 100%; -ms-flex:0 0 50%; flex:0 0 50%;}
}

@media screen and (max-width: 1750px) {
  .swiper-last-actu-pagination .swiper-pagination-bullet:after{display: none;}
}

@media screen and (max-width: 1599px) {
  .lastActuPage .titleActu{display: none;}
  .lastActuPage .titleActuMobile{display: block;}
}

@media screen and (max-width: 1399px) {
  .swiper-last-actu-pagination .swiper-pagination-bullet{display: none;}
  .lastActuPage p.paragraphe{max-width: 90%;}
}

@media screen and (max-width: 1699px) {

}

@media screen and (max-width: 1199px) {
  .lastActuPage .imgLastActu{position: absolute; width: 400px; height: 600px; transform: translateY(-100%); z-index: -1;}
  .lastActuPage .imgLastActu:after{content:''; position: absolute; top:0; left:0; width: 100%; height: 100%; background: #000; opacity: 0.8;}
  .lastActuPage .title{top:-20px;}
}

@media screen and (max-width: 991px) {
  .lastActuPage .imgLastActu{display: none;}
  .lastActuPage .redShape{width: 200px; height: 200px;}
  .lastActuNav{bottom: 36px; right: 42px;}
}

@media screen and (max-width: 767px) {
  .lastActuPage{padding:20px 20px 50px 20px;}
}

@media screen and (max-width: 575px) {
  .lastActuPage{padding:20px 0 70px 0;}
  .lastActuPage .title{top:-15px;}
  .lastActuPage .title span{left:4em;}
  .lastActuPage .titleActuMobile{font-size: 16px;}
  .lastActuPage p.paragraphe{max-width: 100%; font-size: 14px; line-height: 1.4;}
  .containerLastActu{background: #333;}
  .lastActuPage .redShape{display: none;}
  .lastActuNav{bottom: 0px; right: 50%; transform: translateX(50%); width:120px; height: 48px; background: #222;}
  .lastActuNav .swiper-last-actu-prev{top:0; left:10px; width: 50px;}
  .lastActuNav .swiper-last-actu-next{top:0; right: 10px; width: 50px;}
  .lastActuNav .swiper-last-actu-prev:hover, .lastActuNav .swiper-last-actu-next:hover{color:#fff;}
  .containerLastActu .col-12.col-xl-4 p:last-child{text-align: center;}
  .containerLastActu .col-12.col-xl-4 p:last-child .btn{text-align: left;}
}


/**************** LAST ACTU ***************/

.lastWorkTop{padding:80px 60px 200px 60px; background: #333; position: relative;}
.lastWorkTop .redShape{top:0; right:20%; transform: translateY(-50%); width: 80px; height: 80px; border-top: 40px solid #fff; mix-blend-mode: normal;}
.lastWorkTop .title{position: absolute; top:-25px; color:#333;}
.lastWorkTop .title span{position: relative; left:130px; color:#fff;}
.lastWorkTop .paragraphe{max-width: 800px; margin-top: 1em;}

.lastWorkBottom{padding:0 60px; margin-top: -140px; position: relative; z-index: 2; justify-content: space-between; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;}

.actu{background: #fff; margin:0.5em 0.5em; max-width: 440px; width: 100%; box-shadow: 0 0 14px rgba(0,0,0,0.4);}
.actu-text{padding:3em;}
.actu .btn{background: #e63323; color:#fff; width: 100%; padding-right: 1em;}
.actu .btn:hover{background:#333; color:#e63323;}
.actu .btn:hover span{color:#fff;}
.actu .title-actu{font-size: 18px; text-transform: uppercase; font-weight: 700; letter-spacing:2px; position: relative;}
.actu .title-actu:before{content:''; width: 30px; height: 2px; position: absolute; background: #111; top:calc(50% - 1px); left:-3em;}
.actu .title-actu:after{content:''; width: 30px; height: 2px; position: absolute; background: #e63323; top:calc(50% + 1px); left:-3.2em;}

@media screen and (max-width: 1199px) {
  .lastWorkTop .title{top:-20px;}
  .lastWorkTop .title span{left:100px;}
  .lastWorkBottom{padding:0 30px;}
  .lastWorkBottom .actu:last-child{display: none;}
}

@media screen and (max-width: 991px) {
  .lastWorkBottom .btn{padding-top: 1em; padding-bottom: 1em; padding-left: 1em; line-height: 1.2;}
}

@media screen and (max-width: 767px) {
  .lastWorkTop{padding:70px 30px 200px 30px;}
  .lastWorkBottom{flex-direction: column; align-items: center; justify-content: center;}
  .lastWorkBottom .actu{margin-bottom: 2em;}
}

@media screen and (max-width: 575px) {
  .lastWorkTop .title{top:-15px; z-index: 2;}
  .lastWorkTop .title span{left:50px;}
  .lastWorkTop{padding:50px 20px 170px 20px;}
  .lastWorkBottom{padding:0 20px;}
  .actu-text{padding:2em 1em 2em 2em;}
  .actu .title-actu:before{left:-2.5em;}
  .actu .title-actu:after{left:-2.7em;}
}

/****************** FILTER ******************/

.realisationsPage .mix{display: none;}
#filterContainer{overflow: hidden;}

/*REALISATIONS*/

.realisationsPage ul{margin:0 0 3em 0; justify-content: center; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;}
.realisationsPage ul li{display: inline; position: relative; font-weight: 700; color:#777; padding:0.2em 0.4em; margin:0 0.8em; cursor:pointer; text-transform: uppercase;}
.realisationsPage ul li:not(.active):hover{color:#111;}
.realisationsPage ul li.active{color: #e63323;}
.realisationsPage ul li:before, .realisationsPage ul li:after{content:''; position: absolute; width: 10px; height: 5px; opacity:0; transition:0.3s;} 
.realisationsPage ul li:before{bottom:4px; left:4px; background: #e63323;}
.realisationsPage ul li:after{top:4px; right: 4px; background: #000;}
.realisationsPage ul li.active:before{bottom:-4px; left:-2px; opacity: 1;}
.realisationsPage ul li.active:after{top:-4px; right: -2px; opacity: 1;}

.realisationsPage .mix{padding:2.5em;}
.content-realisations{position: relative; text-align: center; color:#fff; overflow: hidden; box-shadow: 0 0 5px rgba(0,0,0,0.2);}
.content-realisations img{transform: scale(1); transition:0.5s;}
.content-realisations:hover img{transform: scale(1.2); transition:2s;}
.content-realisations .descr-real{position: absolute; top:5%; left:5%; width:90%; height: 90%; padding:4em 1em 1em 1em; background-color: rgba(0,0,0,0.85); opacity:0; -webkit-transform:scale(0.5); transform:scale(0.5); transition:0.5s; overflow: hidden; text-align: center; flex-direction: column; justify-content: space-between; align-items: center; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;}
.content-realisations:hover .descr-real{opacity:1; -webkit-transform:scale(1); transform:scale(1);}
.content-realisations .descr-real h3{font-size: 26px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; transition:0.4s; opacity:0;}
.content-realisations .descr-real p.paragraphe{transform: translateY(100%); transition:0.4s 0.2s; opacity:0;}
.content-realisations:hover .descr-real h3{opacity:1;}
.content-realisations:hover .descr-real p.paragraphe{opacity:1; transform: translateY(0);}
.content-realisations .descr-real .btn{width: 100%; text-align: left; padding-left: 1em; padding-right: 1em;}

@media screen and (max-width: 1449px) {
  .realisationsPage .container{padding: 0 6em;}
  .realisationsPage .mix{padding:1.5em;}
}

@media screen and (max-width: 991px) {
  .realisationsPage .container{padding: 0 1.5em;}
}

@media screen and (max-width: 767px) {
  .realisationsPage .container{padding: 0 7em;}
}

@media screen and (max-width: 575px) {
  .realisationsPage .container{padding: 0 1em;}
  .content-realisations .descr-real h3{font-size: 18px;}
  .realisationsPage ul li{margin:0 0.3em; font-size: 13px;}
}

@media screen and (max-device-width:991px){
  .content-realisations .descr-real{opacity:1;  transform: scale(1); height: auto; top:initial; bottom:3.5%; padding:1em;}
  .content-realisations .descr-real p.paragraphe{display: none;}
  .content-realisations .descr-real h3{opacity:1; margin-bottom: 0.5em;}
}

/****************** SPECTACLES ******************/

.spectaclePage{padding-left:80px; padding-right:80px;}
.spectaclePresentation{width: 100%; height: 700px; position: relative; z-index: 1;}
.spectaclePresentation span{width: 100%; height: 100%; display: block; background: center no-repeat; -webkit-background-size: cover; background-size: cover;}
.spectaclePresentation .redShape{width: 400px; height: 120px; top:100px; right: 40px; background: #e63323;}

.contentSpectacleTexte{padding:0 3em;}
.spectacleTexte{padding:3em 1em; background: #f5f5f5; box-shadow: 0 0 10px rgba(0,0,0,0.3); margin-top: -120px; position: relative; z-index: 2; border-top: 10px solid #e63323;}
.spectacleTexte .paragraphe{font-size: 13px;}
.spectacleTexte .col-12{padding:0 2.5em;}

.spectacleInfos{font-size: 12px; border:1px solid #e63323; padding:1em; background: #fff;}
.spectacleInfos p.paragraphe{margin:0;}
.spectacleInfos h3{font-size: 14px; color:#000; font-weight: 700; margin-bottom: 1em;}
.spectacleInfos span{display: inline-block; width: 100%; border-bottom: 1px solid #ccc; color:#555; padding:3px 0;}
.spectacleInfos span b{color:#222;}
.spectacleInfos span:last-of-type{border:none;}

.spectacleNav{margin-top: 2em; justify-content: space-around; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;}
.spectacleNav .btn{background: #e63323; color:#fff; padding:0.5em 1em;}
.spectacleNav .btn:hover{background: #222; color:#fff;}
.spectacleNav .btn:hover span{color:#e63323;}

.invisibleImg{width: 0; height: 0; opacity: 0; margin:0; padding:0;}

.responsive-container{position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;}
.responsive-container iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.infosLivre div:last-of-type, .infosFilm div:last-of-type{margin-top: 2em;}

.videosMin{margin-top: 5em; padding:0 1em; align-items: center; justify-content: center; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;}
.videosMin a{position: relative; max-width: 240px; width: 100%; display: block; margin:1em;}
.videosMin a:before{content:''; transition: 0.3s; position: absolute; top:0; left:0; z-index: 1; background: #000; opacity: 0.4; width: 100%; height: 100%;}
.videosMin a:after{content:''; transition: 0.3s; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); z-index: 2; background:url('../img/play-circle') center no-repeat; width: 40px; height: 40px; -webkit-background-size: contain; background-size: contain;}
.videosMin a:hover:before{opacity: 0;}
.videosMin a:hover:after{transform: translate(-50%,-50%) scale(1.1);}

@media screen and (max-width: 1499px) {
  .spectacleTexte{padding:3em 0;}
  .spectacleTexte .col-12{padding:0 1.5em;}
  .spectacleNav .btn{font-size: 18px;}
}

@media screen and (max-width: 1199px) {
  .spectaclePage{padding-left:2.5em; padding-right:2.5em;}
  .spectacleInfos{margin-top: 3em;}
  .spectaclePresentation{width: 100%; height: 500px;}
  .spectacleTexte{padding:3em 1em;}
  .spectacleNav .btn{font-size: 16px; letter-spacing: 2px;}
}

@media screen and (max-width: 991px) {
  .spectaclePage{padding-left:2em; padding-right:2em;}
  .spectacleTexte .col-12{margin-top: 3em;}
  .spectacleInfos{margin-top: 0;}
  .spectaclePresentation{height: 400px;}
  .spectacleTexte{padding:1em 1em 3em 1em;}
  .spectacleNav .btn{font-size: 14px; letter-spacing: 1px;}
  .spectacleNav .btn i{font-size: 10px;}
}

@media screen and (max-width: 767px) {
  .spectacleTexte p.paragraphe{line-height: 1.5;}
  .spectaclePresentation .redShape{display: none;}
  .spectacleNav{flex-direction: column; align-items: center;}
  .spectacleNav .btn{width: 250px; font-size: 16px; letter-spacing: 2px; margin-top: 1em;}
}

@media screen and (max-width: 575px) {
  .contentSpectacleTexte{padding:0 1.2em;}
  .spectaclePresentation{height: 250px;}
  .spectacleTexte{margin-top: -60px; padding:0em 0em 2em 0em;}
}

/****************** EQUIPE ******************/

.contentEquipe{margin-bottom: 200px;}
.equipe{width: 100%; height: 400px; position: relative; padding:0; margin:0;}
.profil{display: block; position: absolute; width: 400px; height: 400px; z-index: 2;}
.name-equipe{display: block; position: absolute; z-index: 2; width: 300px; height: 300px; padding:2em; color:#fff; box-shadow: 0 0 10px rgba(0,0,0,0.5);}
.name-equipe:after{content:''; position: absolute; top:-40px; width: 40px; height: 40px; box-shadow: 0 0 10px rgba(0,0,0,0.5);}
.name-equipe h3{font-weight: 700; font-size: 22px; letter-spacing: 2px; margin-bottom: 1em;}
.name-equipe p{letter-spacing: 1px;}
.bio{display: none; width: calc(100% - 460px);}
.bio p.paragraphe{color:#fff;}
.closeBio{display: none; position: fixed; z-index: 99999; top:20px; right: 20px; padding:10px; background: #e63323; color:#fff; font-weight: 700; letter-spacing: 2px;}

.equipe.active{position: fixed; top:0; left:0; width: 100%; height: 100%; background: #222; overflow-y:auto; padding:120px 90px; z-index: 99999; justify-content:space-between; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;}
.equipe.active .profil{ position: relative; }
.equipe.active .name-equipe{display: none;}
.equipe.active .bio{display: block;}
.equipe.active .closeBio{display: block;}

.equ1 .profil{ top:0; left:0;}
.equ1 .name-equipe{background: #e63323; top:300px; left:300px; text-align: left;}
.equ1 .name-equipe:after{background: #333; right: -40px;}
.equ2 .profil{ top:0; right:0;}
.equ2 .name-equipe{background: #222; top:300px; right:300px; text-align: right;}
.equ2 .name-equipe:after{background: #e63323; left:-40px;}

.equ1 .btn, .equ2 .btn{padding:1em; width: 100%; position: absolute; bottom:2em; left:0;}
.equ1 .btn{text-align: left;}
.equ2 .btn{text-align: right;}

.equ1 .btn:hover{background: #333;}
.equ1 .btn:hover{color: #e63323;}
.equ1 .btn:hover span{color: #fff;}
.equ2 .btn:hover{background: #e63323;}
.equ2 .btn:hover{color: #333;}
.equ2 .btn:hover span{color: #fff;}

body.noScroll{overflow: hidden;}

@media screen and (max-width: 1099px) {
  .equipe{height: 500px;}
  .equ1 .name-equipe{top:120px; left:0;}
  .equ2 .name-equipe{top:120px; right:0;}
  .equipe.active{flex-direction: column; padding:4em;}
  .bio{display: none; width: 100%;}
}

@media screen and (max-width: 767px) {
  .equipe{height: 620px;}
  .equ1 .profil, .equ2 .profil{ top:0; left:0;}
  .equ1 .name-equipe{top:340px; left:30px; width: calc(100% - 80px);}
  .equ2 .name-equipe{top:340px; left:60px; width: calc(100% - 80px);}
  .name-equipe{height: 230px;}
  .equ1 .btn, .equ2 .btn{bottom:1em;}
}

@media screen and (max-width: 460px) {
  .contentEquipe{margin-bottom: 0;}
  .equipe{height: auto; margin-bottom: 3em;}
  .equ1 .profil, .equ2 .profil{position: relative; width: 100%; height: auto;}
  .equ1 .name-equipe, .equ2 .name-equipe{margin-top: -2em; padding:1em; position: relative; top:0px; left:30px; width: calc(100% - 60px);}
  .name-equipe{height: 210px;}
  .equ1 .btn, .equ2 .btn{bottom:1em;}
  .name-equipe h3{font-size: 16px;}
  .equipe.active{padding:1.3em;}
}


/****************** AGENDA ******************/

.agendaSpectacle{max-width: 1200px; width:100%; margin:0 auto; padding-left: 80px;}
.agendaTitle{color: #e63323; font-weight: 900; font-size: 20px; text-transform: uppercase; margin-top: 4em;}
.agendaDescr{color:#777;}
.agendaPlace strong{font-weight: 700; font-size: 17px;}
.agendaPlace, .agendaDate{position: relative; padding-left: 24px;}
.agendaPlace img, .agendaDate img{position: absolute; top:2px; left:0; width: 16px;}
.agendaPlace img{width: 14px;}

@media screen and (max-width: 991px) {
  .agendaSpectacle{padding: 0 1em; margin-top: -2em;}
  .agendaTitle{margin-top: 4em;}
}

@media screen and (max-width: 575px) {
  .agendaTitle{font-size: 17px;}
}


/****************** PRODUIT ******************/

.produitsPage .col-12{margin-bottom: 2em;}
.produit{background: #f5f5f5; margin-top: 2em; height: 100%;}
.info-produit h3{font-size: 19px; font-weight: 700; margin-top: 1em;}
.info-produit{padding:1em;}
.info-produit form{margin-top: 1em; width:100%;}
.info-produit form input[type="image"]{width: 100%; max-width: 180px; transition:0.2s;}
.info-produit form input[type="image"]:hover{box-shadow: 0 0 6px rgba(0,0,0,0.8); transform: scale(1.02);}
.prix{font-size: 20px; font-weight: 700; color:#e63323; margin-top: 1em;}
.prix b{color:#222;}
.prix-reduit{margin-left: 8px; color:#888; font-size: 16px; text-decoration:line-through; font-weight: 500;}
.cgv a{font-size: 14px; color:#e63323; text-decoration: underline;}
#cgv{display: none; width: 100%; height: 100%; z-index: 999; position: fixed; background: rgba(0,0,0,0.98); overflow-y: scroll; color:#fff; padding:3em 0;}
#cgv.active{display: block;}
#cgv .paragraphe{color:#aaa; margin-bottom: 4em;}
#cgv #closeCgv{cursor:pointer; position: fixed; top:20px; right:40px; background: #e63323; padding:10px 20px; color:#fff; font-weight: 700;}
.img-produit{border:1px solid #eee;}

#popup-valid, #popup-annul{background: rgba(0,0,0,0.5); font-size: 17px; color:#fff; font-weight: 700; position: fixed; top:0; left:0; width: 100%; height:100%; display: none; align-items: center; justify-content: center; z-index: 99999; text-align: center; flex-direction: column;}
#popup-valid div{padding:2em; background: rgba(30,160,30, 0.9); max-width: 360px;}
#popup-annul div{padding:2em; background: rgba(200,50,50, 0.9); max-width: 360px;}
#popup-valid.active, #popup-annul.active{display: flex;}
#popup-valid .btn, #popup-annul .btn{margin-top: 1.3em;}

/****************** CONTACT ******************/

.contactPage{margin-top: 4em; padding:3em 0.8em 6em 0.8em; position: relative; background: url(../img/contact.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover; flex-direction: column; align-items: center; justify-content: center; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;}
.contactPage .title{line-height: 26px; top:-26px; position: absolute; font-size: 36px;}
.contactPage .title span{color:#fff; margin-left: 2.8em;}
.contactPage form{max-width:800px; padding:2em 1em; background: #fff;}
.contactPage form label{text-transform: uppercase; font-weight: 700; letter-spacing: 2px; font-size: 14px; margin:0.4em 0 0.4em 0; display: inline-block;}
.contactPage form input, .contactPage form textarea{width:100%; padding:8px 8px; background: #fff; margin: 0 0 1em 0; border:1px solid #333;}
.contactPage form textarea{height: 170px;}
.contactPage form button.btn{border:0; background: #e63323; color:#fff; font-size: 17px; padding:20px 5px 16px 5px; width: 100%; text-align: center; letter-spacing: 2px;}
.contactPage form button.btn i{font-size: 10px;}
.contactPage form button.btn:hover{background: #222; color:#fff;}
.contactPage form button.btn:hover span{color:#e63323;}

.contactInfos{color:#fff; position: relative; letter-spacing: 2px; text-align: center; font-size: 14px; padding:60px 0 60px 0;}
.contactInfos:before, .contactInfos:after{content:''; position: absolute; left:50%; width: 1px; height: 50px; background: #fff;}
.contactInfos:before{top:0;}
.contactInfos:after{bottom:0;}
.contactInfos a{color:#fff; font-weight: 700; letter-spacing: 3px; font-size: 17px; display: inline-block; margin-top: 0.2em;}
.contactInfos i.at-mail:before{font-weight: 500;}
.contactInfos span, .contactInfos a{cursor:pointer; transition: 0.3s; display: inline-block;}
.contactInfos span:hover, .contactInfos a:hover{color:#e63323; transform: scale(1.1); text-shadow: 0 0 4px rgba(0,0,0,0.5);}

@media screen and (max-width: 575px) {
  .contactPage .title{font-size: 28px;}
  .contactPage form button.btn{font-size: 13px;}
  .contactPage form{padding:2em 0.6em; background: transparent;}
  .contactPage form label{color: #eee;}
}

/**************** FOOTER ****************/

.footerTop{position: relative; background:#333; font-size: 14px; padding:4em 0; color:#777;}
.footerTop:before{content:''; position: absolute; top:0; left:0; width: 80px; height: 100%; background: #282828;}
.footerTop .container{padding: 0 6em; justify-content: space-between; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;}
.footerTop .titleFooter{color:#fff; font-size: 15px; font-weight: 700; margin-bottom: 1.5em; text-transform: uppercase; letter-spacing: 2px;}
.footerTop li{padding:2px 0;}
.footerTop a{color:#ccc; letter-spacing: 1px; transition:0.2s;}
.footerTop a:hover{color:#e63323; letter-spacing: 1px;}
.footerTop .socialNav{margin-bottom: 4em;}
.footerTop .socialNav a{font-size: 24px; margin-right: 1em;}
.footerTop .partners{width: 270px; margin-bottom: 2em; justify-content: space-between; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;}
.footerTop .partners img{width: auto;}

.footerBottom{position: relative; background:#222; height: 60px; font-size: 14px; padding:0 7em; color:#777; align-items: center; justify-content: space-between; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;}
.footerBottom:before{content:''; position: absolute; top:0; left:0; width: 80px; height: 100%; background: #161616;}
.footerBottom p{margin: 0;}
.footerBottom p span, .footerBottom p a{color:#e63323;}
.footerBottom p a:hover{color:#fff;}
.footerBottom a.scrollTo{background: #111; height: 100%; width: 60px; color:#fff; display: block; text-align: center; padding-top: 20px; font-size: 16px; transition:0.3s;}
.footerBottom a.scrollTo:hover{background: #e63323;}

@media screen and (max-width: 1199px) {
  .footerBottom{padding:0 2em;}
  .footerBottom:before{display: none;}
  .footerTop:before{display: none;}
}

@media screen and (max-width: 991px) {
  .footerTop .container{padding: 0 2em;}
}

@media screen and (max-width: 767px) {
  .footerTop .container{flex-direction: column; align-items: center; text-align: center;}
  .footerTop .container div:first-child{display: none;}
  .footerTop .container div:last-child:not(.partners){margin-top: 4em;}
  .footerTop .socialNav a{margin-left: 0.5em; margin-right: 0.5em;}
  .footerTop .partners{justify-content: space-around;}
}

@media screen and (max-width: 640px) {
  .footerBottom{flex-direction: column; justify-content: center; align-items: flex-start;}
  .footerBottom a.scrollTo{position: absolute;right: 0; top:0;}
}

@media screen and (max-width: 360px) {
  .footerBottom{font-size: 13px; letter-spacing: -0.2px;}
  .footerBottom a.scrollTo{width: 54px;}
}

/****************** MQ ******************/


@media screen and (max-width: 1199px) {
  .btn{padding:0.5em 2em 0.5em 1em; font-size: 20px;}
  .fluid-container{width: 100%; padding:0 50px;}
  .title{font-size: 24px; letter-spacing: 4px; line-height: 1;}
}

@media screen and (max-device-width:991px){}

@media screen and (max-width: 991px) {
  .btn{padding:0.4em 1.8em 0.4em 0.9em; font-size: 19px; letter-spacing: 3px; line-height: 1.1;}
}

@media screen and (max-width: 767px) {
  .contentPage{padding:5em 0;}
  .fluid-container{width: 100%; padding:0 20px;}
}

@media screen and (max-width: 575px) {
  #navMobile ul li a{font-size:22px;}
  .btn{padding:0.4em 0.9em 0.4em 0.9em; font-size: 15px; letter-spacing: 2px;}
  .btn span i{font-size: 10px; top: 0px; margin-left:4px;}
  .title{font-size: 18px; letter-spacing: 3px; line-height: 1;}
  .backBtn{padding-top: 4em;}
}









/*HARI*/
#slider-presse{height: 400px; position: relative; padding: 0 3em; display: flex; justify-content: center}
.swiper-slide-home-presse{position: relative; height: 100%;max-width: 1440px; overflow: hidden; padding: 1em}
.swiper-slide-home-presse .swiper-slide{display: flex; justify-content: center; align-items: center;flex-direction: column}

.swiper-slide-home-presse-prev, .swiper-slide-home-presse-next{display: block; width: 50px; height: 50px; background: #000; color:#fff; z-index: 2; position: absolute; top:50%; transform: translateY(-50%); transition: 0.3s; cursor: pointer; justify-content: center; align-items: center; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;}
.swiper-slide-home-presse-prev:hover, .swiper-slide-home-presse-next:hover{background: red;}
.swiper-slide-home-presse-prev{left:0;}
.swiper-slide-home-presse-next{right:0;}

.swiper-slide-home-presse-pagination{position: absolute; left:50%; transform: translateX(-50%); z-index: 2;}
.swiper-slide-home-presse-pagination .swiper-pagination-bullet{display: inline-block; margin:0 10px; width: 10px; height: 10px; background: #000; cursor:pointer; transition:1s; position: relative;}
.swiper-slide-home-presse-pagination .swiper-pagination-bullet-active{background: red;}

.swiper-slide h2{padding: 0 2em;margin-top: 1em; text-align: center}

.mb-2{margin-bottom: 2em !important}
.mb-4{margin-bottom: 4em !important}
.mt-8{margin-top: 8em !important}

.pressePage .subtitle{padding-top: 2em;}
.pressePage .container {padding-bottom: 3em}
.mention-legale {padding-top: 20em}
.passageRadio .col-12{margin-top: 0;}

@media (max-width: 425px) {
  .passageRadio .col-12{padding: 0 1em;}
  .swiper-slide-home-presse-prev, .swiper-slide-home-presse-next{display: none}
}

@media (max-width: 1199px) {
  .swiper-slide-home-presse-prev, .swiper-slide-home-presse-next{width: 35px; height: 35px}
  #slider-presse .icon-arrow-left:before {font-size: 14px;}
  #slider-presse .icon-arrow-right:before {font-size: 14px;}
}

.column{width:70%;height:200px;overflow:hidden}
.column-2{float:left;width:15%;padding:.1em}
.modal{display:none;position:fixed;z-index:9999;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000}
.modal-content{position:relative;background-color:#fefefe;margin:auto;padding:0;width:90%;max-width:1200px}
.close{color:#d2232a;position:absolute;top:10px;right:25px;font-size:35px;font-weight:700}
.close:hover,.close:focus{color:#999;text-decoration:none;cursor:pointer}
.mySlides{display:none}
.prev,.next{cursor:pointer;position:absolute;top:50%;width:auto;padding:16px;margin-top:-50px;color:#fff;font-weight:700;font-size:20px;transition:.6s ease;border-radius:0 3px 3px 0;user-select:none;-webkit-user-select:none}
.next{right:0;border-radius:3px 0 0 3px}
.prev:hover,.next:hover{background-color:rgba(0,0,0,0.8)}
.numbertext{color:#f2f2f2;font-size:12px;padding:8px 12px;position:absolute;top:0}
.caption-container{text-align:center;background-color:#000;padding:1em 1em 5em;color:#fff}
img.demo{opacity:.6;max-height:200px}
.active,.demo:hover{opacity:1}
img.hover-shadow{transition:.3s}
.hover-shadow:hover{cursor: pointer;}
#myModal .column-2 img:hover{cursor: pointer}
.content-send{
  display: flex;
  flex-direction: column;
}

.ckeditor ul {padding-left: 16px;}
.ckeditor li {list-style-type: disc}
@media (min-width: 650px) {
  .content-send{flex-direction: row;justify-content: space-between}
}