@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');

html,body {
  height: 100%;
  overflow: auto;
  
  }
  div.shadow {
    position:absolute;
    max-width:30%;
    max-height:30%;
    top:50%;
    left:50%;
    overflow:visible;
}
img.logo {
    position:relative;
    max-width:100%;
    max-height:100%;
    margin-top:-50%;
    margin-left:-50%;
}
.visage {


text-align:center;
position:fixed;
margin: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}



@media screen and (max-width: 992px) {
  #titre {
    display:none;
  }
}
@media screen and (min-width: 992px) {
 .visage {
    width:35%;
    text-align:center;
    margin-left:0px;
    margin-top:80px;
  }
}
@media screen and (max-width: 992px) {
 .visage {
    text-align:center;
    margin-left:0px;
    margin-top:0px;
  }
}
@media only screen and (max-width: 992px) {
	  
.container:hover{
	transform: scale(1.1);
	transition : 2s;
	cursor:pointer;
	
}
}

@media only screen and (min-width: 992px) {
	 
.container:hover{
	transform: scale(0.6);
	transition : 2s;
	cursor:pointer;
	
}
}
.container{
	
	transition : 2s;
}

/*
@media only screen and (min-width: 992px) {
	 #area1_01{
		 transform:scale(0.4);
		 margin-left:0em;
		 margin-top:-3em; 
	}
}

*/
@media only screen and (min-width: 992px) {
	 .container {
		 transform:scale(0.5);
		 margin-top:100px;
		 margin-left:650px;
	}
}
@media only screen and (max-width: 992px) {
	 .container {
	
		 margin-top:-350px;
		 margin-left:450px;
		 transform:scale(1);
	}
}
@media only screen and (max-width: 992px) {
	 .box6 {
	    
		margin-top:-500px;
		margin-right:200px;
	
	}
}


.container {
  display:flex;
  width:50px;
  height:50px;
 
  
}
.container div {
  flex: 1;
}
.container img {
  width:100%;
}


.fleche{

	height: 10px;
	width: 10px;
	margin-top:-35px;
	margin-left:0px;
	z-index:2000; 
}
.areaRotate-background {
	height: 100px;
	width: 100px;
	margin-top:-70px;
	margin-left:-70px; 
	background-image:url("area.png"); 
	background-size:contain;
	background-repeat:no-repeat; 
	-webkit-animation: rotation 2s linear infinite;
    -moz-animation: rotation 2s linear infinite;
    -ms-animation: rotation 2s linear infinite;
	animation-timing-function: linear; 
z-index:0;

}


.box5{
	grid-column:1/4;
	grid-row:1/2; 
	text-align:center; 
	z-index:200
	
	
	 
}
@-webkit-keyframes rotation {
    0%   { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rotation {
    0%   { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(360deg); }
}
@-ms-keyframes rotation {
    0%   { -ms-transform: rotate(0deg); }
    100% { -ms-transform: rotate(360deg); }
}
.button1 {
   background-image: linear-gradient(135deg, #008aff, #86d472);
   border-radius: 50px;
	width:50px;
	height:50px; 
   box-sizing: border-box;
   color: #ffffff;
   display: block;
   position: relative;
   text-decoration: none;
	text-align:center!important; 
  align-items: center;
   z-index: 2;
  cursor: pointer;
	transition-duration:1.5s; 
	transform: scale(1);
	margin-top:0em;
	margin-left:6em;
	 
 }
.button1:hover {
  
	transition-duration:1.5s; 
	transform: scale(1.2);
 }




.grid {
	display:grid;
	grid-template-columns:1fr ;
	justify-items:center;
	align-items:center;
	margin:0;
	padding:0;
	width:100%; 
	height:100%; 
	font-family: 'Poiret One', cursive;
	overflow-x: hidden;
	
	
	
	}




 @media screen and (min-width: 992px) {
	 .grid{
		 max-width: 50%;
		 height: 50%;
		 margin-left:20em;
		 margin-top:5em; 
	}
}
 @media screen and (max-width: 992px) {
	 .effect{
		 max-width: 100%;
		 height: 100%;
		 margin-left:0em;
		 margin-top:-10em;
		
	}
} 
 @media screen and (min-width: 992px) {
	 .effect{
		 max-width: 100%;
		 height: 100%;
		 margin-left:0em;
		 margin-top:-2em; 
	}
} 
  @media screen and (min-width: 992px) {
	 .font_menu{
		 font-size:90%; 
		 text-align:center; 
		
	}
}




	

body {
  color: black;
  overflow-x: hidden; 
	background:black;
	font-family: 'Poiret One', cursive;
	
	
}

.effect {
  color: white;
  overflow-x: hidden;
	font-size:5vh; 
	
	 
}

label .menu {
  background: white;
  border-bottom-left-radius: 100%;
  -webkit-transition: .5s ease-in-out;
	-moz-transition:.5s ease-in-out;
    -o-transition:.5s ease-in-out;
    -ms-transition:.5s ease-in-out;
  transition: .5s ease-in-out;
  box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF;
  cursor: pointer;
	max-width:100%;
}
@media screen and (min-width: 992px) {
label .menu {
  position: absolute;
  right: 0px;
  top: -50px;
  z-index: 100;
  width: 200px;
 height:200px;

}
}

 @media screen and (max-width: 992px) {
     label .menu {
  position: absolute;
  right: 0px;
  top: -100px;
  z-index: 100;
  width: 350px;
 height:400px; 
}
}
 @media screen and (min-width: 992px) {
label .hamburger {
  position: absolute;
  top: 105px;
  left: 120px;
  width: 30px;
  height: 2px;
   max-width: 100%;
		
	}
}

 @media screen and (max-width: 992px) {
label .hamburger {
  position: absolute;
  top: 215px;
  left: 200px;
  height: 6px;
  width: 15%;
		
	}
}
label .hamburger {
  background: black;
  display: block;
  -webkit-transform-origin: center;
	-moz-transform-origin: center;
    -o-transform-origin: center;
    -ms-transform-origin: center;
  transform-origin: center;
  -webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
	
}

label .hamburger:after, label .hamburger:before {
  -webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  content:"";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: black;
	max-width: 100%;
}

label .hamburger:before { top: -10px; }

label .hamburger:after { bottom: -10px; }

 @media screen and (max-width: 992px) {
label .hamburger:before { top: -20px; }}

 @media screen and (max-width: 992px) {
label .hamburger:after { bottom: -20px; }}

label input { display: none !important; }

label input:checked + .menu {
  box-shadow: 0 0 0 100vw white, 0 0 0 100vh white;
  border-radius:0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
 
  
}

label input:checked + .menu .hamburger {
  -webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  
}

label input:checked + .menu .hamburger:after {
  -webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
	
  transform: rotate(90deg);
  bottom: 0;
   
  
}

label input:checked + .menu .hamburger:before {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 0;
	
  
  
}

label input:checked + .menu + ul { display:block}
label ul {
  z-index: 2000;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display:block!important; 
  -webkit-transition: .25s 0s ease-in-out;
  transition: .25s 0s ease-in-out;
	
}


label a {
  margin-bottom: 1em;
  display: block;
  text-decoration: none;
	font-size:2em;
	min-font-size: 2em;
	color:black!important;
	 visibility: visible;
  
}







.grid3 {
	display:grid;
	align-items:center;
	margin:0;
	padding:0;
	 
	}

img {
	width:100%;
	}





li{
	color:black !important; 
	list-style-type: none;
	text-align: center;
	
	
	transition: 1s;
	font-size: 3.5vw !important;
	
}

li:hover{
	
	
	transition-duration:1.5s; 
	transform: scale(1.2);
	color:  black !important;
	
}

.font_menu {
	font-family: 'Poiret One', cursive;
	color:  black; 
}

.font_menu:hover {
	transition: 0.5s;
	color:  black; 
	
}

.box1{
	grid-column:1/2;
	grid-row:1/2;
	z-index:0;
	text-align:center!important; 
	margin-left:0em;
	margin-right:2em; 
	margin-top:0em; 
	
	
	}


.box3{
	grid-column:1/2;
	grid-row:2/2;
	font-size: 2vw;
	margin-bottom:6em;
	z-index:10;
	text-align:center; 
	
	width:50%; 
	
	}

.box4{
	grid-column:1/2;
	grid-row:3/3;
	margin-left:0em;
	z-index:10;
	text-align:center; 
	
	}


 .blog-slider {
	 width: 95%;
	 position: relative;
	 max-width: 800px;
	 background: #fff;
	 box-shadow: 0px 14px 80px rgba(0, 0, 0, 0.2);
	 
	 border-radius: 60px;
	 height: 400px;
	 transition: all 0.3s;
	  font-family: 'poiret-one';
	  
	 
}
 @media screen and (max-width: 992px) {
	 .blog-slider {
		 max-width: 800px;
		
		  min-height: 400px;
		 height: auto;
		 margin:-1000px auto;
		
	}
}
 @media screen and (min-width: 992px) {
	 .blog-slider {
		 min-height: 400px;
		 height: auto;
		 margin :-250px auto;
		 width:50%; 
	}
}

 @media screen and (max-height: 500px) and (min-width: 992px) {
	 .blog-slider {
		 height: 350px;
	}
}
 .blog-slider__item {
	 display: flex;
	 align-items: center;
}
 @media screen and (max-width: 768px) {
	 .blog-slider__item {
		 flex-direction: column;
	}
}
 @media screen and (max-width: 992px) {
	 .blog-slider__item {
		 flex-direction: column;
	}
}
 .blog-slider__item.swiper-slide-active .blog-slider__img img {
	 opacity: 1;
	 transition-delay: 0.3s;
}
.blog-slider__item.swiper-slide-active .blog-slider__img1 video {
	 opacity: 1;
	 transition-delay: 0.3s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > * {
	 opacity: 1;
	 transform: none;
	 
	
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(1) {
	 transition-delay: 0.3s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(2) {
	 transition-delay: 0.4s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(3) {
	 transition-delay: 0.5s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(4) {
	 transition-delay: 0.6s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(5) {
	 transition-delay: 0.7s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(6) {
	 transition-delay: 0.8s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(7) {
	 transition-delay: 0.9s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(8) {
	 transition-delay: 1s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(9) {
	 transition-delay: 1.1s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(10) {
	 transition-delay: 1.2s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(11) {
	 transition-delay: 1.3s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(12) {
	 transition-delay: 1.4s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(13) {
	 transition-delay: 1.5s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(14) {
	 transition-delay: 1.6s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(15) {
	 transition-delay: 1.7s;
}
 .blog-slider__img {
	 width: 300px;
	 flex-shrink: 0;
	 height: 300px;
	 box-shadow: 4px 13px 30px 1px  rgba(0, 0, 0, 0.2);
	 border-radius: 60px;
	 transform: translateX(-80px);
	margin-top:25px;
	 overflow: hidden;
	
}
 .blog-slider__img:after {
	 content: '';
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 border-radius: 20px;
	 opacity: 0.8;
}


 .blog-slider__img img {
	 width: 100%;
	 height: 100%;
	 object-fit: cover;
	 display: block;
	 opacity: 0;
	 transition: all 0.3s;
	 
}

.blog-slider__img1 video {
	 width: 100%;
	 height: 100%;
	 object-fit: cover;
	 display: block;
	 opacity: 0;
	 transition: all 0.3s;
	  
	  	
}

/* .blog-slider__img1:after {
	 content: '';
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	  border-radius: 20px;
	 opacity: 0.8;
}*/ 
 .blog-slider__img1 {
	 width: 300px;
	 flex-shrink: 0; 
	 height: 300px;
	 box-shadow: 4px 13px 30px 1px  rgba(0, 0, 0, 0.2);
	 
	 transform: translateX(-80px);
	 margin-top:25px;
	
}

 

/* .blog-slider__img1:after {
	 content: '';
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	  border-radius: 20px;
	 opacity: 0.8;
}*/ 
 
 @media screen and (max-width: 768px) {
	 .blog-slider__img {
		 transform: translateY(-50%);
		 width: 90%;
	}
}

 @media screen and (min-width: 992px) {
	 .blog-slider__img {
		 transform: translateY(-50%);
		 transform:translateX(-50%);
		 width: 50%;
		 height:50%;
	}
}
 @media screen and (max-width:992px) {
	 .blog-slider__img {
		 transform: translateY(-50%);
		 width: 100%;
		 height:100%;
	}
}


@media screen and (min-width: 992px) {
	 .blog-slider__img1 {
		 transform: translateY(-50%);
		 transform:translateX(-50%);
		 width: 50%;
		 height:50%; 
	}
}
 @media screen and (max-width:992px) {
	 .blog-slider__img1 {
		 transform: translateY(-50%);
		 width: 100%;
		 height:100%;
	}
}

 .blog-slider__content {
	 padding-right: 25px;
}
 @media screen and (max-width: 768px) {
	 .blog-slider__content {
		 margin-top: -80px;
		 text-align: center;
		 padding: 0 30px;
		 width:100%; 
	}
}
 @media screen and (max-width: 992px) {
	 .blog-slider__content {
		 margin-top: -80px;
		 text-align: center;
		 padding: 0 30px;
		 width:100%; 
	}
}

 @media screen and (max-width: 576px) {
	 .blog-slider__content {
		 padding: 0 30px;
	}
}

 @media screen and (min-width: 992px) {
	 .blog-slider__content {
		 padding: 0 30px;
	}
}
 .blog-slider__content > * {
	 opacity: 0;
	 transform: translateY(25px);
	 transition: all 0.4s;
}
 .blog-slider__code {
	 color: black;
	 margin-bottom: 15px;
	 display: block;
	 font-weight: 500;
	 
}


 .blog-slider__title {
	 font-size: 5vh;
	 font-weight: 2000;
	 color: black;
	 margin-bottom: 20px;
	 font-family: 'Poiret One', cursive;
}

@media screen and (max-width: 992px) {
 .blog-slider__title {
	 font-size: 5vh;
	 font-weight: 2000;
	 color: black;
	 margin-top: -250px;
	 font-family: 'Poiret One', cursive;
}}

@media screen and (min-width: 992px) {
 .blog-slider__title {
	 font-size: 2.5vh;
	 font-weight: 2000;
	 color: black;
	 margin-top: 0px;
	 font-family: 'Poiret One', cursive;
}}
@media screen and (min-width: 992px) {
 .blog-slider__content > * {
	 opacity: 0;
	 margin-left:-150px;
	 transition: all 0.4s;
}}
@media screen and (min-width: 992px) {
 .blog-slider__text {
	 color: black;
	 margin-bottom: 0px;
	 line-height: 1.5em;
	 font-size: 1vh;
	 font-family: 'Poiret One', cursive;
	 text-align:left;
}}
 /*.blog-slider__button {
	 display: inline-flex;
	 background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
	 padding: 15px 35px;
	 border-radius: 50px;
	 color: #fff;
	 box-shadow: 0px 14px 80px rgba(252, 56, 56, 0.4);
	 text-decoration: none;
	 font-weight: 500;
	 justify-content: center;
	 text-align: center;
	 letter-spacing: 1px;
}*/
 @media screen and (max-width: 576px) {
	 .blog-slider__button {
		 width: 100%;
	}
}
 .blog-slider .swiper-container-horizontal > .swiper-pagination-bullets, .blog-slider .swiper-pagination-custom, .blog-slider .swiper-pagination-fraction {
	 bottom: 10px;
	 left: 0;
	 width: 100%;
}
 .blog-slider__pagination {
	 position: absolute;
	 z-index: 21;
	 right: 20px;
	 width: 11px !important;
	 text-align: center;
	 left: auto !important;
	 top: 50%;
	 bottom: auto !important;
	 transform: translateY(-50%);
}
 @media screen and (max-width: 768px) {
	 .blog-slider__pagination {
		 transform: translateX(-50%);
		 left: 50% !important;
		 top: 205px;
		 width: 100% !important;
		 display: flex;
		 justify-content: center;
		 align-items: center;
	}
}
 @media screen and (max-width: 992px) {
	 .blog-slider__pagination {
		 transform: translateX(-50%);
		 left: 50% !important;
		 top: 450px;
		 width: 100% !important;
		 display: flex;
		 justify-content: center;
		 align-items: center;
	}
}
 .blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
	 margin: 8px 0;
}
 @media screen and (max-width: 768px) {
	 .blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
		 margin: 0 5px;
	}
}

 @media screen and (max-width: 992px) {
	 .blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
		 margin: 0 5px;
	}
}
 .blog-slider__pagination .swiper-pagination-bullet {
	 width: 11px;
	 height: 11px;
	 display: block;
	 border-radius: 10px;
	 background: black;
	 opacity: 0.2;
	 transition: all 0.3s;
}
 .blog-slider__pagination .swiper-pagination-bullet-active {
	 opacity: 1;
	 background: black;
	 height: 30px;
	 box-shadow: 0px 0px 20px rgba(252, 56, 56, 0.3);
}
 @media screen and (max-width: 768px) {
	 .blog-slider__pagination .swiper-pagination-bullet-active {
		 height: 11px;
		 width: 30px;
	}
}
 
  @media screen and (max-width:992px) {
	 .blog-slider__pagination .swiper-pagination-bullet-active {
		 height: 22px;
		 width: 60px;
	}
}




/*.footer-distributed{
	background-color: black;
	
	box-sizing: border-box;
	width: 100%;
	text-align: left;
	

	padding:0;
	margin:0; 
}

.footer-distributed .footer-left p{
	color:  #8f9296;
	font-size: 1em;
	
	margin: 0;
}

/* Footer links */

.footer-distributed{
	background-color: black;

	box-sizing: border-box;
	width: 100%;
	text-align: left;
	
	

	padding: 45px 50px;
}

.footer-distributed .footer-left p{
	color:  #8f9296;
	font-size: 14px;
	font-family: 'Poiret One', cursive;
	margin: 0;
}

/* Footer links */

.footer-distributed p.footer-links{
	font-size:18px;
	font-weight: bold;
	
	color:  #ffffff;
	margin: 0 0 10px;
	padding: 0;
}

.footer-distributed p.footer-links a{
	display:inline-block;
	line-height: 1.8;
	text-decoration: none;
	color:  inherit;
}

.footer-distributed .footer-right{
	float: right;
	margin-top: 6px;
	max-width: 180px;
}

.footer-distributed .footer-right a{
	display: inline-block;
	width: 35px;
	height: 35px;
	background-color:  #33383b;
	border-radius: 50px;

	font-size: 20px;
	color: #ffffff;
	
	line-height: 35px;

	margin-left: 3px;
}


/* If you don't want the footer to be responsive, remove these media queries */

@media (max-width: 600px) {

	.footer-distributed .footer-left,
	.footer-distributed .footer-right{
		text-align: center;
		font-family: 'poiret-one'; 
	}

	.footer-distributed .footer-right{
		float: none;
		margin: 0 auto 20px;
	}

	.footer-distributed .footer-left p.footer-links{
		line-height: 1.8;
	}
}