body /* --- Page -- */
			{	
				margin: 0 auto;
				padding: 0px;	
				max-width: 100%;
				max-height: 100%;	
				background: #fff;
				text-decoration: none;
				
				
			}	
			
		/* ------------------------------- */	
		/* ------------------------------- */	
		/* ---------  CARROUSEL  --------- */	
		/* ------------------------------- */	
		/* ------------------------------- */	

		#carousel 
			{
				display: block;
				width: 98%;
				height: 302px;
				position: relative;
				margin: auto;
				transform: translateY(-0%);
				overflow: hidden;
			}

		.carousel-image 
			{
				height: auto;
				max-height: 300px;
				position: absolute;
				left: 50%;
				border-radius: 5%;
				box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
				border-bottom: solid 2px #f00;

			}
			
		/* --- CARROUSEL RES -------- */
			
		#carouselres
			{
				display: block;
				width: 98%;
				height: 302px;
				position: relative;
				margin: auto;
				transform: translateY(-0%);
				overflow: hidden;
			}

		.carouselres-image 
			{
				height: auto;
				max-height: 300px;
				position: absolute;
				left: 50%;
				border-radius: 5%;
				box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
				border-bottom: solid 2px #f00;
			}
			
		/* ------------------------------- */
		/* ------------------------------- */
		/* ------ Carousel-image --------- */
		/* ------------------------------- */
		/* ------------------------------- */

		#carousel-image-0 
			{
				transform: translateX(-50%) translateX(-120%) scale(0.6);
				filter: brightness(40%);
				z-index: 1;
			}

		#carousel-image-1 
			{
				transform: translateX(-50%) translateX(-80%) scale(0.8);
				filter: brightness(65%);
				opacity: 1;
				z-index: 2;
			}

		#carousel-image-2 
			{
				transform: translateX(-50%) scale(1);
				filter: brightness(100%);
				opacity: 1;
				z-index: 3;
			}

		#carousel-image-3 
			{
				transform: translateX(-50%) translateX(80%) scale(0.8);
				filter: brightness(65%);
				opacity: 1;
				z-index: 2;
			}

		#carousel-image-4 
			{
				transform: translateX(-50%) translateX(120%) scale(0.6);
				filter: brightness(40%);
				opacity: 1;
				z-index: 1;
			}

		#carousel-image-5 
			{
				transform: translateX(-50%) scale(1.5);
				filter: brightness(40%);
				opacity: 0;
				z-index: 1;
			}
			
		/* --- Carousel-image RES ----------------- */

		#carouselres-image-0 
			{
				transform: translateX(-50%) translateX(-120%) scale(0.6);
				filter: brightness(40%);
				z-index: 1;
			}

		#carouselres-image-1 
			{
				transform: translateX(-50%) translateX(-80%) scale(0.8);
				filter: brightness(65%);
				opacity: 1;
				z-index: 2;
			}

		#carouselres-image-2 
			{
				transform: translateX(-50%) scale(1);
				filter: brightness(100%);
				opacity: 1;
				z-index: 3;
			}

		#carouselres-image-3 
			{
				transform: translateX(-50%) translateX(80%) scale(0.8);
				filter: brightness(65%);
				opacity: 1;
				z-index: 2;
			}

		#carouselres-image-4 
			{
				transform: translateX(-50%) translateX(120%) scale(0.6);
				filter: brightness(40%);
				opacity: 1;
				z-index: 1;
			}

		#carouselres-image-5 
			{
				transform: translateX(-50%) scale(1.5);
				filter: brightness(40%);
				opacity: 0;
				z-index: 1;
			}
			
		/* ------------------------------- */

		/* Forward */
		.mv0to5 
			{
				animation: 0.3s ease-out mv0to5;
				animation-iteration-count: 1;
				animation-fill-mode: forwards;
			}

		.mv5to4 
			{
				animation: 0.3s ease-out mv5to4;
				animation-iteration-count: 1;
				animation-fill-mode: forwards;
			}

		.mv4to3 
			{
				animation: 0.3s ease-out mv4to3;
				animation-iteration-count: 1;
				animation-fill-mode: forwards;
			}

		.mv3to2 
			{
				animation: 0.3s ease-out mv3to2;
				animation-iteration-count: 1;
				animation-fill-mode: forwards;
			}

		.mv2to1 
			{
				animation: 0.3s ease-out mv2to1;
				animation-iteration-count: 1;
				animation-fill-mode: forwards;
			}

		.mv1to0 
			{
				animation: 0.3s ease-out mv1to0;
				animation-iteration-count: 1;
				animation-fill-mode: forwards;
			}
			
		/* ------------------------------- */

		/* Backward */
		.mv0to1 
			{
				animation: 0.3s ease-out mv0to1;
				animation-iteration-count: 1;
				animation-fill-mode: forwards;
			}

		.mv1to2 
			{
				animation: 0.3s ease-out mv1to2;
				animation-iteration-count: 1;
				animation-fill-mode: forwards;
			}

		.mv2to3 
			{
				animation: 0.3s ease-out mv2to3;
				animation-iteration-count: 1;
				animation-fill-mode: forwards;
			}

		.mv3to4 
			{
				animation: 0.3s ease-out mv3to4;
				animation-iteration-count: 1;
				animation-fill-mode: forwards;
			}

		.mv4to5 
			{
				animation: 0.3s ease-out mv4to5;
				animation-iteration-count: 1;
				animation-fill-mode: forwards;
			}

		.mv5to0 
			{
				animation: 0.3s ease-out mv5to0;
				animation-iteration-count: 1;
				animation-fill-mode: forwards;
			}
			
		/* ------------------------------- */

		@keyframes mv0to5 
			{
				0% { transform: translateX(-50%) translateX(-120%) scale(0.6); filter: brightness(40%); opacity: 1; z-index: 2}
				20% { opacity: 0; }
				100% { transform: translateX(-50%) scale(0.6);  filter: brightness(40%); opacity: 0; z-index:1}
			}
		
		@keyframes mv5to4 
			{
				0% { transform: translateX(-50%) scale(0.6);  filter: brightness(40%); opacity: 0; z-index:1 }    
				80% { opacity: 0;}
				100% { transform: translateX(-50%) translateX(120%) scale(0.6);  filter: brightness(40%); opacity: 1; z-index: 2 }
			}
		
		@keyframes mv4to3 
			{
				0% { transform: translateX(-50%) translateX(120%) scale(0.6); filter: brightness(40%); opacity: 1; z-index: 2; }
				100% { transform: translateX(-50%) translateX(80%) scale(0.8); filter: brightness(65%); opacity: 1; z-index: 3; }
			}
		
		@keyframes mv3to2 
			{
				0% { transform: translateX(-50%) translateX(80%) scale(0.8); filter: brightness(65%); opacity: 1; z-index: 3; }
				30% { opacity: 1; z-index: 4;}
				100% { transform: translateX(-50%) translateX(0%) scale(1); filter: brightness(100%); opacity: 1; z-index: 4; }
			}
		
		@keyframes mv2to1 
			{
				0% { transform: translateX(-50%) translateX(0%) scale(1); filter: brightness(100%); opacity: 1; z-index: 4; }    
				100% { transform: translateX(-50%) translateX(-80%) scale(0.8); filter: brightness(65%); opacity: 1; z-index: 3; }
			}
		
		@keyframes mv1to0 
			{
				0% { transform: translateX(-50%) translateX(-80%) scale(0.8); filter: brightness(65%); opacity:1; z-index:3; }        
				100% { transform: translateX(-50%) translateX(-120%) scale(0.6); filter: brightness(40%); opacity:1; z-index:2; }
			}

		/* ------------------------------- */

		@keyframes mv0to1 
			{    
				0% { transform: translateX(-50%) translateX(-120%) scale(0.6); filter: brightness(40%); opacity:1; z-index:2; }
				100% { transform: translateX(-50%) translateX(-80%) scale(0.8); filter: brightness(65%); opacity:1; z-index:3; }    
			}
		
		@keyframes mv1to2 
			{
				0% { transform: translateX(-50%) translateX(-80%) scale(0.8); filter: brightness(65%); opacity:1; z-index:3; }
				30% { opacity:1; z-index:4;}
				100% { transform: translateX(-50%) translateX(0%) scale(1); filter: brightness(100%); opacity:1; z-index:4; }    
			}
		
		@keyframes mv2to3 
			{    
				0% { transform: translateX(-50%) translateX(0%) scale(1); filter: brightness(100%); opacity:1; z-index:4; }
				100% { transform: translateX(-50%) translateX(80%) scale(0.8); filter: brightness(65%); opacity:1; z-index:3; }
			}
		
		@keyframes mv3to4 
			{    
				0% { transform: translateX(-50%) translateX(80%) scale(0.8); filter: brightness(65%); opacity:1; z-index:3; }
				100% { transform: translateX(-50%) translateX(120%) scale(0.6); filter: brightness(40%); opacity:1; z-index:2; }
			}
		
		@keyframes mv4to5 
			{    
				0% { transform: translateX(-50%) translateX(120%) scale(0.6);  filter: brightness(40%); opacity:1; z-index:2 }
				20% {opacity:0;}
				100% { transform: translateX(-50%) scale(0.6);  filter: brightness(40%); opacity: 0; z-index:1 }
			}
		
		@keyframes mv5to0 
			{
				0% { transform: translateX(-50%) scale(0.6);  filter: brightness(40%); opacity: 0; z-index:1}    
				80% {opacity:0;}
				100% { transform: translateX(-50%) translateX(-120%) scale(0.6);  filter: brightness(40%); opacity: 1; z-index:2}    
			}
			
		/* ------------------------------- */	

		#defilanim-1 /*-- INDEX --*/
			{
				margin-top: 15px;
			}	
						
		.defilanimtexte-1
			{	
				display: block;
				border: solid 0px #f00;
				text-align: center;
			}
			
		/* ------------------------------- */	

		#defilanim-2 /*-- INDEX --*/
			{
				margin-top: 15px;
			}	
						
		.defilanimtexte-2
			{	
				display: block;
				border: solid 0px #f00;
				text-align: center;
			}
			
		/* ------------------------------- */		
			
		.hautpage
			{	
				font-family: verdana, arial;
				font-size: 14px;
				font-weight: normal;
				font-style: italic;
				color: #202166;
				text-decoration: none;			
			}	
			
		/* ------------------------------- */			
			
		.imgbase1	
			{				
				border-radius: 5px 5px;		
				width: 200px;
			}		
			
		.imgbase1res
			{				
				width: 80%;
			}	
			
		/* ------------------------------- */		
			
		.imgbase2	
			{				
				border-radius: 15px;	
				border-bottom: solid 2px #e00;
				width: 400px;
			}		
			
		.imgbase2res	
			{				
				border-radius: 15px;	
				border-bottom: solid 2px #e00;
				width: 90%;
			}		
			
		/* ------------------------------- */		
			
		.imgbase3	
			{				
				border-radius: 5px 5px;	
				width: 400px;
			}		
			
		.imgbase3res	
			{				
				border-radius: 5px 5px;	
				width: 70%;
			}	
			
		/* ------------------------------- */		
			
		.imgbase4	
			{				
				border-radius: 15px;	
				border-bottom: solid 2px #e00;
				width: 100%;
			}		
			
		.imgbase4res	
			{				
				border-radius: 15px;	
				border-bottom: solid 2px #e00;
				width: 96%;
			}		
			
		/* ------------------------------- */		
			
		.imgbase3	
			{				
				border-radius: 15px;	
				border-bottom: solid 2px #e00;
				width: 300px;
			}		
			
		.imgbase3res	
			{				
				border-radius: 15px;	
				border-bottom: solid 2px #e00;
				width: 50%;
			}	
			
	/* ------------------------------ */		
			
		.logo	
			{				
				width: 150px;
				padding: 10px;
			}
			
		.logores	
			{	
				width: 180px;
			}
			
		/* ------------------------------- */
		/* ------------------------------- */			
		/* ------------ MAIL ------------- */			
		/* ------------------------------- */			
		/* ------------------------------- */								

			.letter-image 
			{
				position: relative;
				top: 50%;
				left: 50%;
				width: 200px;
				height: 200px;
				-webkit-transform: translate(-50%, -50%);
				-moz-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				cursor: pointer;
				color: #088;
				text-align: right;
				font-family: verdana;
				font-size: 12px;
				text-align: center;
			}

			.animated-mail
			{
				position: absolute;
				height: 150px;
				width: 200px;
				-webkit-transition: .4s;
				-moz-transition: .4s;
				transition: .4s;
				
				.body {
					position: absolute;
					bottom: 0;
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 0 0 100px 200px;
					border-color: transparent transparent #e95f55 transparent; /* -- Inférieur droit-- */
					z-index: 2;
				}
				
				.top-fold {
					position: absolute;
					top: 50px;
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 50px 100px 0 100px;
					-webkit-transform-origin: 50% 0%;
					-webkit-transition: transform .4s .4s, z-index .2s .4s;
					-moz-transform-origin: 50% 0%;
					-moz-transition: transform .4s .4s, z-index .2s .4s;
					transform-origin: 50% 0%;
					transition: transform .4s .4s, z-index .2s .4s;
					border-color: #cf4a43 transparent transparent transparent; /* -- Haut-- */
					z-index: 2;
				}
				
				.back-fold {
					position: absolute;
					bottom: 0;
					width: 200px;
					height: 100px;
					background: #900; /* -- Intérieur -- */
					z-index: 0;
				}
				
				.left-fold {
					position: absolute;
					bottom: 0;
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 50px 0 50px 100px;
					border-color: transparent transparent transparent #e15349;
					z-index: 2;
				}
				
				.letter {
					left: 20px;
					bottom: 0px;
					position: absolute;
					width: 160px;
					height: 60px;
					background: white;
					z-index: 1;
					overflow: hidden;
					-webkit-transition: .4s .2s;
					-moz-transition: .4s .2s;
					transition: .4s .2s;
					
					.letter-border {
						height: 10px;
						width: 100%;
				  background: repeating-linear-gradient(
					-45deg,
					#cb5a5e,
					#cb5a5e 8px,
					transparent 8px,
					transparent 18px
				  );
					}
					
					.letter-title { /* -- Barre supérieure -- */
						margin-top: 10px;
						margin-left: 5px;
						height: 10px;
						width: 20%;
						background: #cb5a5e;
					}
					.letter-context { /* -- Barre inférieure -- */
						margin-top: 10px;
						margin-left: 5px;
						height: 10px;
						width: 10%;
						background: #cb5a5e;
					}
					
					.letter-stamp {
						margin-top: 30px;
						margin-left: 120px;
						border-radius: 100%;
						height: 30px;
						width: 30px;
						background: #cb5a5e;
						opacity: 0.3;
					}
				}
			}

			.shadow {
				position: absolute;
				top: 200px;
				left: 50%;
				width: 400px;
				height: 30px;
				transition: .4s;
				transform: translateX(-50%);
				-webkit-transition: .4s;
				-webkit-transform: translateX(-50%);
				-moz-transition: .4s;
				-moz-transform: translateX(-50%);
				
				border-radius: 100%;
				background: radial-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.0), rgba(0,0,0,0.0));
			}

				.letter-image:hover {
					.animated-mail {
						transform: translateY(50px);
						-webkit-transform: translateY(50px);
						-moz-transform: translateY(50px);
					}
					
					.animated-mail .top-fold {
						transition: transform .4s, z-index .2s;
						transform: rotateX(180deg);
						-webkit-transition: transform .4s, z-index .2s;
						-webkit-transform: rotateX(180deg);
						-moz-transition: transform .4s, z-index .2s;
						-moz-transform: rotateX(180deg);
						z-index: 0;
					}
					
					.animated-mail .letter {
						height: 180px;
					}
					
					.shadow {
						width: 250px;
					}
				}
			
	/* ------------------------------ */		

	@media screen and (min-width: 1070px) 
		{
			
	/* ---------- Zones de page ------------ */
		
			#haut	
			{	
				position: relative;
				margin: auto;
				max-width: 100%;
				border-bottom: solid 2px #e00;
			}
			
			#hautres /*!-- Mobile */
			{	
				display: none;
			}	
			
		/* ------------------------------- */	
			
			#menures /*!-- Mobile */
			{	
				display: none;
			}	
			
		/* ------------------------------- */	
			
			#entet
			{	
				display: block;
			}					
			
			#entetres /*!-- Mobile */
			{	
				display: none;
			}	
			
		/* ------------------------------- */			
			
			#bas	
			{	
				margin: auto;
				max-width: 98%;
				padding-top: 10px;			
			}		
			
			#basres /*!-- Mobile */
			
			{	
				display: none;
			}				
			
	/* ---------- Menu ------------ */		
					
			.boutonmenusel
			{	
				font-family: verdana, arial;
				font-size: 16px;
				color: #c00;
				background-color: #ccc;
				font-weight: bold;	
				text-decoration: none;
				
				display: block;
				text-align: center;
				padding-top: 10px;
				padding-bottom: 10px;
				vertical-align: middle;
				border: solid 1px #666;
				border-bottom: solid 1px #200;
				border-radius: 7px;
			}
			
			.boutonmenu
			{		
				font-family: verdana, arial;
				font-size: 16px;
				color: #099;
				border: solid 1px #999;
				border-right: solid 1px #200;
				border-bottom: solid 1px #200;
				font-weight: bold;	
				text-decoration: none;
				
				display: block;
				text-align: center;
				padding-top: 10px;
				padding-bottom: 10px;
				vertical-align: middle;
				border-radius: 7px;
	}
			.boutonmenu:hover,
			.boutonmenu:focus,
			.boutonmenu:active 
			{
				font-family: verdana, arial;
				font-size: 16px;
				color: #00f;
				background-color: #9f9;
				font-weight: bold;	
				text-decoration: none;
				
				display: block;
				text-align: center;
				padding-top: 10px;
				padding-bottom: 10px;
				vertical-align: middle;
				border: solid 1px #999;
				border-bottom: solid 1px #f00;
				border-radius: 7px;

			}
		}

	/* ----------------------------------- */
	/* --------- AFFICHAGE MOBILE -------- */
	/* ----------------------------------- */
	
	@media screen and (max-width: 1069px) 
		{		
		
	/* ---------- Zones de page ------------ */
	
			#haut
			{	
				display: none;
			}	
			
			#hautres	
			{	
				display: block;	
				margin: auto;
				max-width: auto;
				padding-top: 10px;			
				border-bottom: solid 2px #e00;
			}	
			
		/* ------------------------------- */	
			
			#menures
			{	
				display: block;
			}		
			
		/* ------------------------------- */		
			
			#entet	
			{	
				display: none;
			}					
			
			#entetres
			{	
				display: block;
				max-width: 100%;
			}		
			
		/* ------------------------------- */		
			
			#bas
			
			{	
				display: none;
			}			
			
			#basres	
			{	
				margin: auto;
				max-width: 100%;
				padding-top: 10px;	
			}

		
		} 
		
	/* ---------- Navbar MENU Mobile ---------- */	
						
			.menuburg /* Menu Burger */
			{	
				display: block; 
				position: fixed;
				
				width: 40px;
				margin: 10px;
				right: 2px;
				top: 2px;
				
				border-radius: 15%;
				z-index: 1;
			}				
			
			.navliens /* Liens Menu Burger */
			{	
				top: 0px;
				left: 0;
				position: fixed;					
				background-color: rgba(0, 0, 0, 0.450);
				backdrop-filter: blur(10px);			
				width: 100%;
				height: 100vh;	
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: -100%;
				transition: all 0.5s ease;
				z-index: 15;
			}	
			
			.navbar .navliens ul li /* Liens non sélectionnés */
			{
				margin: 4px 5px;
				margin: 15px 0;	
				font-family: verdana, arial;
				color: #ffb755;
				padding: 10px;
				font-size: 30px;	
			}

			.navbar .navliens ul li.active a /* Liens sélectionnés */
			{	
				display: inline-block;
				text-align: center;
				vertical-align: middle;
				padding: 10px 30px;
				font-family: verdana, arial;
				font-size: 30px;
				background-color: rgba(255, 255, 255, 0.3);
				color: #900;
				border-radius: 10%;
				text-decoration: none;
			}	
			
			.navliens.mobilmenu
			{
				margin-left: 0;
			}