@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Muli:ital,wght@0,500;0,700;1,500&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Philosopher:wght@700&display=swap');


*{
	box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	width: 100%;
	}

#site {
	margin: 0;
	padding: 0;
	font-family: arial;
	font-size: 20px;
	width: 100%;

	display: grid;
	grid-auto-flow: row;
	grid-template-columns: 1fr;
	
	grid-template-areas: 
	" header "
	" nav "
	" vins_gamme "
	" domaine "
	" section "
	" Les_vins "
	" footer ";
	
	color: black;
	font-weight: 500;

	}

/* kit fondu couleur recompense*/

.recompense {
  animation: inherit;
}
.recompense {
  color: hsl(324, 70%, 45%);
  animation: wheelHueColor 6s infinite;
  color: currentColor;
}

@keyframes wheelHueColor {
  from, to { color: hsl(48, 89%, 60%); }
  20%      { color: hsl(192, 3%, 71%); }

 
  40%      { color: hsl(28, 74%, 46%); }
 
  60%      { color: hsl(192, 3%, 71%); }

  80%      { color: hsl(48, 89%, 60%); }
}

/*--------------for JS-----------------*/
.animatePopArticleToLeft {
	animation: popArticleToLeft 1.5s linear;

 }
 @keyframes popArticleToLeft {
	from {
		right: 200px;
	  
	}
	30% {
		right: 225px;
	}
	60% {
		right: 236px;
	}
	to {
		right: 250px;
	}
  }

  .animatePopArticleToRight {
	animation: popArticleToRight 1.5s linear;

 }
 @keyframes popArticleToRight {
	from {
		left: 200px;
	  
	}
	30% {
		left: 225px;
	}
	60% {
		left: 236px;
	}
	to {
		left: 250px;
	}
  }header {
	height: 150px; width: 100%;
	
	grid-area: header;	
	}

	header div {
		height: 100%;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}

	header div a {
		width: 150px; height: auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	header div img {
		transition: width linear 0.3s;
		width: 150px; height: auto;
	}
		header div img:hover {
		transition: width linear 0.3s;
		width: calc(100% + 7px);
	}
/*  .............................................................   */
nav {
	padding: 0; margin: 0 0 20px 0;
	height: auto;

	grid-area: nav;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	}

	#puce_nav{
		margin: 0; padding: 0;
		height: auto; max-width: 600px;

		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		border-bottom: 3px solid #212121;
		position: relative;
	}

		.drapeau {
			position: absolute;
			height: 30px; width: 90px;
			right: -120px;
			top: 30%;

			color: black;
			font-family: 'Philosopher','arial', "Times New Roman", 'Helvetica', 'sans-serif', 'Times';
			font-weight: 700;
			font-size: 20px;
			
		}

			.drapeau img{
				left: 0;
				height: 30px;
				width: auto;
				margin: 0 0 0 10px;
			}

				.drapeau a{
					height: 100%; width: 100%;

					color: black;
					text-decoration: none;
					transition: 0.5s;

					display: flex;
					justify-content: flex-end;
					align-items: center;
				}

					.drapeau a:hover{
						transition: width linear 0.3s;
						width: calc(100% + 7px);
					}

		nav ul {
			height: auto; width: 100%;
			
			margin: 10px 0 10px 0; padding: 0;
			
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
		}

		nav ul li {
			padding: 0;
			list-style: none;
			width: 150px;
			
			font-family: 'Philosopher','arial', "Times New Roman", 'Helvetica', 'sans-serif', 'Times';
			font-weight: 700;
			font-size: 30px;

			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
		}

				nav ul li a {
					color: black;
					text-decoration: none;
					transition: 0.5s;
				}

				nav ul li a:hover {
				color: #8D6E63;
				transition: 0.5s;
				}
/*  .............................................................   */


/* 1280px media  */

@media all and (max-width: 1280px)
{


	nav {
	
	}
	
}

/*  .............................................................   */
@media all and (max-width: 1024px)
{

	nav {
	margin: 0 0 30px 0;
	height: auto; width: 100%;
	}

	#puce_nav{
		height: 100%; max-width: 600px;

		border-bottom: none;	
	}
		.drapeau {
			right: 70px;
			top: -120px;
		}

		nav ul {
			height: auto; width: 100%;
		}

		nav ul li {
			
		}


}
/*  .............................................................   */

@media all and (max-width: 600px){

	#puce_nav{
		height: 100%; max-width: 430px;	
	}

		.drapeau {
			right: 20px;
		}

		nav ul {
			height: auto; width: 100%;
		}

		nav ul li {
			max-width: 100px;
			font-size: 20px;
		}
}

/*  .............................................................   */
@media all and (max-width: 410px)
{
	nav ul li {
		max-width: 80px;
		font-size: 18px; 
	}
	.drapeau {
		right: 0px;
	}
}

		#vins_gamme {
		height: 700px; width: 100%;
			
		grid-area: vins_gamme;

		display: flex;
		justify-content: center;
		align-items: center;
		
		font-size: 35px;
		font-family: 'Muli', 'Roboto Condensed', 'arial', "Times New Roman", 'Helvetica', 'sans-serif', 'Times';
		font-weight: 700;
		
	}

		#flex_article{
			margin: 0; padding: 0;
			height: 100%; width: 1200px;			
			
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			overflow: visible;
		}

			.interieur {
				margin: 0 10px;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 260px; height: 650px;

				overflow: visible;		
			}
				

						
					.interieur a {
						position: relative;
						z-index: 1 ;
						height: 100%; width: 100%;
						text-decoration: none;
						overflow: visible;
						display: flex;
						justify-content: center;
						align-items: center;
					}
						
						.interieur img {
							position: absolute;
							height: 650px; width: auto;
							filter: drop-shadow(15px 20px 10px rgb(0,0,0,0.5));
							overflow: visible;
						}
					

						.texte {
							height: 100%; width: 100%;
							transition: opacity 0.5s linear;
							opacity: 0;
							z-index: 2;
							
							display: flex;
							justify-content: center;
							align-items: center;
							text-align: center;
						}
						.texte:hover {
							transition: opacity 0.5s linear;
							opacity: 1;
							text-align: center;
						}
/*  .............................................................   */
/* 1280px media  */

@media all and (max-width: 1280px)
{
	#vins_gamme {
		height: 450px;
	}

			.interieur {
				width: 200px; height: 400px;
				}

					.interieur img {
						width: auto; height: 380px;
					}
}

/*  .............................................................   */
@media all and (max-width: 1024px)
{
		#vins_gamme {
		height: 1050px;
	    }

		#flex_article{	
			width: 600px;	
		}

			.interieur {
				width: 215px; height: 500px;				
			}
			
				.interieur:nth-child(1){
					margin-right: 0;	
				}

				.interieur:nth-child(2){
					margin-right: 0;	
				}

				.interieur:nth-child(3){
					margin-right: 0;	
				}

					.interieur img {
						width: auto; height: 470px;
					}
}

/*  .............................................................   */
@media all and (max-width: 600px)
{

		#vins_gamme {
		height: 750px;
	    }

		#flex_article{	
			width: 400px;	
		}

			.interieur {
				width: 150px; height: 350px;				
			}

				.interieur img {
					width: auto; height: 330px;
				}
					#photo_BB p {
							font-size: 23px;
					}
}

#domaine{
		grid-area: domaine;
		margin: 100px 0 0 0 ; padding: 0;
		width: 100%; height: 600px;
		
		display: flex;
		justify-content: center;
		align-items: center;	
	}

		#domaine_size{
			margin: 0; padding: 0;
			width: 1200px; height: 100%;
			
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
		}

			#partie_1{
				margin: 0; padding: 0;
				width: 1200px; height: 350px;

				display: flex;
				flex-direction: row-reverse;
				justify-content: space-between;
				align-items: center;
			}

				#image_partie_1{
					padding: 0; margin: 0;
					width: 555px; height: 350px;
				}

					#image_partie_1 img{
						width: 555px; height: 350px;
					}

				#texte_partie_1{
					width: 600px; height: 100%;
					margin: 0; padding: 0;

					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
				}
			
			#partie_2{
				margin: 0; padding: 0;
				width: 1200px; height: 220px;

				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}

				#image_partie_2{
					padding: 0; margin: 0;
					width: 645px; height: 220px;
				}

					#image_partie_2 img{
						width: 645px; height: 220px;
					}

				#texte_partie_2{
					width: 510px; height: 100%;
					margin: 0; padding: 25px 0 0 0;

					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
				}


					.texte_h1{
						margin: 0; padding: 0px 0 20px 0;
						width: 100%; height: auto;
						font-size: 26px;
						color: black;
						text-align: center;
						font-size: 35px;
						font-family: 'Philosopher','Roboto Condensed', 'arial', "Times New Roman", 'Helvetica', 'sans-serif', 'Times';
						font-weight: 700;
					}

					.texte_p_1{
						margin: 0; padding: 0;
						width: 100%; height: auto;
						color: black;
						font-weight: 500;
						text-align: justify;	
						font-size: 18px;
						font-family: 'Muli','Raleway', 'arial', "Times New Roman", 'Helvetica', 'sans-serif', 'Times';
						font-weight: 500;	
					}

					.texte_p_2{
						margin: 0; padding: 0;
						width: 100%; height: auto;
						color: black;
						font-weight: 500;
						text-align: justify;
						font-size: 18px;
						font-family: 'Muli','Raleway', 'arial', "Times New Roman", 'Helvetica', 'sans-serif', 'Times';
						font-weight: 500;	
					}

						.texte_p_2 strong{
							font-weight: 700;
						}

					.texte_p_fin{
						padding: 15px 0 0 0;
					}

						.citation {
						margin: 0; padding: 0;
						width: 100%; height: auto;
						color: black;
						text-align: center;
						font-size: 18px;
						font-family: 'Muli','Raleway', 'arial', "Times New Roman", 'Helvetica', 'sans-serif', 'Times';
						font-weight: 700;
						font-style: italic;				
						}

/*  .............................................................   */
@media all and (max-width: 1280px)
{
	#domaine{
		margin: 25px 0 0 0 ;
	}
}

@media all and (max-width: 1024px)
{


/*  .............................................................   */
		#domaine{
			margin: 50px 0 0 0 ;

			height: 1200px;
	    }

		#domaine_size{
			width: 100%;
		}

			#partie_1{
				width: 100%;
				height: 700px;

				flex-direction: column-reverse;
				justify-content: flex-end;
			}

				#image_partie_1{
					width: 100%;
					max-width: 750px;
					height: 100% ;
					max-height: 333px;
					background-image: url(../image/domaine_image_mobile1.jpg);
					background-size: 100% 100%;
					background-repeat: no-repeat;
					background-position: center;

					display: flex;
					justify-content: center;

				}

					#image_partie_1 img{
						width: 0;
						max-width: 0;
						height: 0;
						display: none;
					} 


				#texte_partie_1{
					width: 720px;
					height: 350px;
					margin: 0 0 20px 0;
				}
			
			#partie_2{
				width: 100%; height: 520px;

				flex-direction: column-reverse;
				justify-content: flex-end;
			}

				#image_partie_2{
					margin: 10px 0 0 0;
					width: 100%; height: auto;

					display: flex;
					justify-content: center;
				}

					#image_partie_2 img{
						width: 100%; max-width: 750px;
						height: auto;
					}

				#texte_partie_2{
					width: 720px; height: 220px;
					margin: 15px 0 0 0; padding: 0;
				}

					.texte_p_1{
						font-size: 20px;
					}

					.texte_p_2{
						font-size: 20px;	
					}

					.texte_p_fin{
						font-size: 20px;
					}

						.citation {
							font-size: 20px;				
						}
}


/*  .............................................................   */
@media all and (max-width: 600px){

		#domaine{
		height: 1100px;	
	    }

			#partie_1{
				height: 650px;
			}

				#image_partie_1{
					max-width: 450px;
					max-height: 200px;
				}

					#image_partie_1 img{
						width: 0;
						max-width: 0;
						height: 0;
						display: none;
					}

				#texte_partie_1{
					width: 420px;
					height: 400px;
				}
			
			#partie_2{
				width: 100%;
				height: 500px;
			}

				#image_partie_2{
					width: 100%; height: 154px;
				}

					#image_partie_2 img{
						width: 100%;
						max-width: 450px;
						height: auto;
					}

				#texte_partie_2{
					width: 420px; height: 280px;
					padding: 0px 0 0 0;
				}

					.texte_h1{
						padding: 0px 0 20px 0;
						width: 100%;
					}

					.texte_p_1{
						width: 100%;
						height: auto;
						font-size: 18px;
					}

					.texte_p_2{
						margin: 15px 0 0 0;

						width: 100%;
						height: auto;
						font-size: 18px;
					}

					.texte_p_fin{
						padding: 15px 0 0 0;
						font-size: 18px;
					}

						.citation {
						width: 100%;
						height: auto;
						font-size: 18px;						
						}
}

section {
	margin: 0;
	height: 500px; width: 100%;
	font-size: 25px;
	
	font-weight: 700;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
				
	grid-area: section;

	background-image: url(../image/citation_coq_verre5.png);
	background-repeat: no-repeat;
	background-size: auto auto;
	background-position: center;
	}

		#section_center{
			height: 100%; width: 1200px;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
	
			#texte_section{
				height: 150px; width: 760px;
				margin: 0;

				font-size: 22px;
				font-family: 'Muli' ,'Raleway', 'arial', "Times New Roman", 'Helvetica', 'sans-serif', 'Times';
				font-weight: 500;
				color: black;

				display: flex;
				justify-content: center;
				align-items: center;
			}

			#texte_section p {
				margin: 0; padding: 0;
				text-align: center;
			}
/*  .............................................................   */
@media all and (max-width: 1024px)
{
section {
	height: 300px;

	background-image: url(../image/coq_ombre_160px_05.png);
	background-position: left;	
	}

		#section_center{
			background-image: url(../image/verre_160px_05.png);
			background-repeat: no-repeat;
			background-size: auto auto;
			background-position: right;

			width: 100%;
			}
	
			#texte_section{
				height: 250px; width: 750px;
			}
}

/*  .............................................................   */

@media all and (max-width: 600px)
{
			#texte_section{
				height: 250px; width: 420px;
			}
}

	#Les_vins {
		grid-area: Les_vins;

		margin: 0 ; padding: 0;
		height: 2000px; width: 100%;

		display: flex;
		justify-content: center;

		font-size: 18px;
		font-weight: 500;
	}

		#flex_Les_vins {		
			height: 100%; width: 100%;

			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;

			background-image: url(../image/backgroudJustLine.png);
			background-repeat: no-repeat;
			background-size: auto auto;
			background-position: center;
		}

			.Les_vins_taille  {
				height: 300px; width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

				.Les_vins_taille p {
					margin: 0 0 5px 5px; padding: 0px;
					font-size: 16px;
					font-family: 'Muli','Raleway', 'arial', "Times New Roman", 'Helvetica', 'sans-serif', 'Times';
					font-weight: 500;
					color: black;
					
					text-align: justify;	
				}

				.Les_vins_taille strong {
					padding: 0; margin: 0;
		
					color: #A7987D;
					font-size: 20px;
					font-family: 'Philosopher','Roboto Condensed', 'arial', "Times New Roman", 'Helvetica', 'sans-serif', 'Times';
					font-weight: 700;
				}

				.Les_vins_taille h1 {
					margin: 0 0 5px 5px;	

					font-size: 35px;
					font-family: 'Philosopher','Roboto Condensed', 'arial', "Times New Roman", 'Helvetica', 'sans-serif', 'Times';
					font-weight: 700;
				}

					.recompense {
					padding: 0; margin: 0;
				
					color: #FDD835;
					font-size: 20px;
					font-family: 'Muli','Roboto Condensed', 'arial', "Times New Roman", 'Helvetica', 'sans-serif', 'Times';
					font-weight: 700;
					}
					

					.chapeau_vins{
						font-family: 'Muli','Roboto Condensed', 'arial', "Times New Roman", 'Helvetica', 'sans-serif', 'Times';
						font-weight: 500;
						font-style: italic;
					}


					.bouteille_les_vins_g {
						padding: 0; margin: 0;
						position: absolute;

						width: 91px; height: auto;
						top: 0px;
						right: 250px;
					}

						.bouteille_les_vins_g img {
						width: 100%; height: 100%;
						}

					.bouteille_les_vins_d {
						padding: 0; margin: 0;
						position: absolute;

						width: 91px; height: auto;
						top: 0px;
						left: 250px;
					}

						.bouteille_les_vins_d img {
						width: 100%; height: 100%;
						}

							.separation_texte1{
								width: 405px; height: 300px;
							}

							.separation_texte2{
								padding: 40px 0 0 0 ;
								width: 405px; height: 300px;
							}

			/* color..*/
			.Les_vins_taille > div{
				width: 100%; height: 300px;
				
				display: flex;
				justify-content: center;
				align-items: center;
			}

				/* cuvee..   pair*/
				.Les_vins_taille:nth-child(even) > div > div{ 
					position: relative;

					width: 1200px; height: 300px;
					
					display: flex;
					justify-content: flex-end;
					align-items: center;
				}

				/* cuvee..    impair*/
				.Les_vins_taille:nth-child(odd) > div > div{ 
					position: relative;

					width: 1200px; height: 300px;
					
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}
						/* cuvee.._texte*/
						.Les_vins_taille .cuvee_texte{
						width: 850px; height: 300px;
						
						
						display: flex;
						justify-content: space-between;
						align-items: center;
						}


						#cuvee50_texte strong {
							color: #7D3C98;
						}

							#cuvee50_texte h1{
								color: #7D3C98;
							}

						#cuvee70_texte strong {
							color: #7B241C;
						}

							#cuvee70_texte h1{
								color: #7B241C;
							}

						#medaille_argent {
						margin: 0; padding: 0;

						position: absolute; 
						height: 75px; width: 75px;
						right: 10px;
						bottom: -50px;
						}

						 #medaille_argent img {
							height: 100%; width: 100%;
						 }

						#cuvee90_texte strong {
							color: #A93226;
						}

							#cuvee90_texte h1{
								color: #A93226;
							}

						#medaille_bronze {
						margin: 0; padding: 0;

						position: absolute;
						height: 75px; width: 75px;
						left: 750px;
						bottom: -50px;
						}

						 #medaille_bronze img {
						 	height: 100%; width: 100%;
						 }

				    	#BourgogneBlanc_texte strong {
							color: #1E8449;
						}

							#BourgogneBlanc_texte h1{
								color: #1E8449;
							}


	#boxFloatingImage {
		position: absolute;
		height:inherit; width: 1200px;
		overflow: visible;
	}
	
		#boxFloatingImage .floatingImg {
			width: auto; height: 80px;
			position: absolute;
			overflow: visible;
			filter: drop-shadow(15px 20px 10px rgb(0,0,0,0.5));
		}

			#boxFloatingImage .floatingImg:nth-child(1) {
				transform: rotate(25deg);
				top: 160px;
				right: 150px;
				z-index: 1;
			}
			#boxFloatingImage .floatingImg:nth-child(2) {
				transform: rotate(-15deg);
				top: 315px;
				right: 75px;
			}
			#boxFloatingImage .floatingImg:nth-child(3) {
				transform: rotate(15deg);
				top: 475px;
				right: 165px;
			}
			#boxFloatingImage .floatingImg:nth-child(4) {
				transform: rotate(-15deg);
				top: 510px;
				right: 485px;
			}
			#boxFloatingImage .floatingImg:nth-child(5) {
				transform: rotate(15deg);
				top: 430px;
				left: 400px;
			}
			#boxFloatingImage .floatingImg:nth-child(6) {
				transform: rotate(-15deg);
				top: 505px;
				left: 100px;
			}
			#boxFloatingImage .floatingImg:nth-child(7) {
				transform: rotate(15deg);
				top: 870px;
				left: 65px;
			}
			#boxFloatingImage .floatingImg:nth-child(8) {
				transform: rotate(-15deg);
				top: 990px;
				left: 165px;
			}
			#boxFloatingImage .floatingImg:nth-child(9) {
				transform: rotate(25deg);
				bottom: 910px;
				left: 420px;
			}
			#boxFloatingImage .floatingImg:nth-child(10) {
				transform: rotate(-15deg);
				top: 915px;
				right: 450px;
			}
			#boxFloatingImage .floatingImg:nth-child(11) {
				transform: rotate(0deg);
				top: 945px;
				right: 155px;
			}
			#boxFloatingImage .floatingImg:nth-child(12) {
				transform: rotate(15deg);
				top: 1065px;
				right: 35px;
			}
			#boxFloatingImage .floatingImg:nth-child(13) {
				transform: rotate(-15deg);
				top: 1410px;
				right: 105px;
			}
			#boxFloatingImage .floatingImg:nth-child(14) {
				transform: rotate(15deg);
				top: 1495px;
				right: 305px;
			}
			#boxFloatingImage .floatingImg:nth-child(15) {
				transform: rotate(-15deg);
				top: 1510px;
				right: 505px;
			}
			#boxFloatingImage .floatingImg:nth-child(16) {
				transform: rotate(15deg);
				top: 1455px;
				left: 305px;
			}
			#boxFloatingImage .floatingImg:nth-child(17) {
				transform: rotate(-25deg);
				top: 1525px;
				left: 100px;
			}
			#boxFloatingImage .floatingImg:nth-child(18) {
				transform: rotate(15deg);
				top: 1735px;
				left: 20px;
			}

		#boxFloatingImage .staticImg {
			width: auto; height: 65px;
			position: absolute;
			overflow:visible;
			filter: drop-shadow(10px 10px 10px rgb(0,0,0,0.5));
		}

			#boxFloatingImage .staticImg:nth-child(19) {
				top: 75px;
				height: 90px;
				right: 85px;
				z-index: 2;
				padding-bottom: 25px;
			}
			#boxFloatingImage .staticImg:nth-child(20) {
				top: 425px;
				right: 345px;
			}
			#boxFloatingImage .staticImg:nth-child(21) {
				top: 715px;
				left: 100px;
			}
			#boxFloatingImage .staticImg:nth-child(22) {
				top: 965px;
				left: 530px;
			}
			#boxFloatingImage .staticImg:nth-child(23) {
				top: 1190px;
				right: 90px;
			}
			#boxFloatingImage .staticImg:nth-child(24) {
				top: 1485px;
				left: 480px;
			}
			#boxFloatingImage .staticImg:nth-child(25) {
				top: 1860px;
				left: 90px;
			}

	.bandeForMobile {
		display: none;
	}

	.blockforfloting {
		display: none;
	}	

/*  .............................................................   */
@media all and (max-width: 1024px)
{

	#Les_vins {
		height: auto; 
	}

		#flex_Les_vins {		
			justify-content: flex-start;

			background-image: none;	
		}

			.Les_vins_taille  {
				height: auto;
				margin: 0 0 30px 0;
				align-items: flex-start;
				overflow: visible;
			}

				.Les_vins_taille p {
					font-size: 18px;
				}

				.Les_vins_taille strong {
					font-size: 22px;
				}

				.Les_vins_taille h1 {
					font-size: 40px;
				}

					.recompense {
					font-size: 22px;
					}

					.bouteille_les_vins_g {
						width: 100px; height: auto;
						top: 50px;
						right: 40px;
					}

					.bouteille_les_vins_d {
						width: 100px; height: auto;
						top: 50px;
						left: unset;
						right: 40px;	
					}

						.separation_texte1{
								padding: 0; margin: 0 0 0 20px;
								width: 570px; height: auto;
							}

							.separation_texte2{
								padding: 0; margin: 0 0 0 20px;
								width: 570px; height: auto;
							}

			/* color..*/
			.Les_vins_taille > div{
				align-items: flex-start;
				overflow: visible;
			}

					.Les_vins_taille:nth-child(odd) > div > div{ 
						width: 750px; height: auto;
						
						display: flex;
						flex-direction: column;
						justify-content: flex-end;
						align-items: flex-start;
						overflow: visible;
					}

					.Les_vins_taille:nth-child(even) > div > div{ 
						width: 750px; height: auto;
						
						display: flex;
						flex-direction: column;
						justify-content: flex-end;
						align-items: flex-start;
						overflow: visible;
					}

			/* cuvee.._texte*/
			.Les_vins_taille .cuvee_texte{
			width: 600px; height: auto;
			
			flex-direction: column;
			justify-content: flex-start;	
			}

			#color_50{
				height: auto;
				/*background-image: url(../image/bande_1_mobile.png);*/
			}

			#color_70{
				height: auto;
				/*background-image: url(../image/bande_2_mobile.png);*/
			}


						#medaille_argent {
						position: absolute;	
						right: 60px;
						bottom: 150px;
						}

			#color_90{
				height: auto;		
				/*background-image: url(../image/bande_3_mobile.png);*/		
			}

						#medaille_bronze {
						height: 100px; width: 100px;
						position: absolute;	
						right: 40px;
						bottom: 150px;
						left: unset;		
						}
						
					#color_BB{
				height: auto;
				/*background-image: url(../image/bande_4_mobile.png);*/	
				}


						
	#boxFloatingImage {
		display: none;
	}

	.bandeForMobile {
		display: block;
		width: 650px; height: auto;
		margin-left: auto;
		margin-right: auto;
	}

	.blockforfloting{
		display: block;
		position: absolute;
		height: 50%; width: 100%;
	}

		#flex_Les_vins .floatingImgMobile {
			width: auto; height: 50px;
			position: absolute;
			overflow: visible;
			filter: drop-shadow(15px 20px 10px rgb(0,0,0,0.5));
		}	
		#flex_Les_vins .staticImgMobile {
			width: auto; height: 30px;
			position: absolute;
			overflow: visible;
			filter: drop-shadow(10px 10px 10px rgb(0,0,0,0.5));
		}	
			
				#flex_Les_vins .floatingImgMobile:nth-child(1) {
					transform: rotate(-15deg); 
					bottom: 30px;
					left: 190px;
				}
				#flex_Les_vins .floatingImgMobile:nth-child(2) {
					transform: rotate(15deg); 
					bottom: 65px;
					left: 355px;
				}	
				#flex_Les_vins .floatingImgMobile:nth-child(3) {
					transform: rotate(-15deg); 
					bottom: 30px;
					left: 530px;
				}		

				#flex_Les_vins .staticImgMobile:nth-child(4) {
					transform: rotate(-15deg); 
					bottom: 20px;
					left: 65px;
				}
				#flex_Les_vins .staticImgMobile:nth-child(5) {
					transform: rotate(-15deg); 
					bottom: 20px;
					right: 75px;
				}	

				#flex_Les_vins .serviceImg {
					left: 500px !important;
				}



}

/*  .............................................................   */
@media all and (max-width: 600px)
{

	#Les_vins {
		height: auto;
	}

				.Les_vins_taille p {
					font-size: 16px;
				}

				.Les_vins_taille strong {
					font-size: 20px;
				}

				.Les_vins_taille h1 {
					font-size: 35px;
				}

				.recompense {
					font-size: 20px;
					}

					.bouteille_les_vins_g {
						width: 75px; height: auto;
						top: 50px;
						right: 10px;	
					}

					.bouteille_les_vins_d {
						width: 75px; height: auto;
						top: 50px;
						right: 10px;	
					}

						.separation_texte1{
								padding: 0; margin: 0 0 10px 10px;
								width: 345px; height: auto;
							}

							.separation_texte2{
								padding: 0; margin: 0 0 0 10px;
								width: 345px; height: auto;
							}

			/* cuvee ..*/
			.Les_vins_taille:nth-child(odd) > div > div{ 
				width: 450px; height: auto;
			}

			.Les_vins_taille:nth-child(even) > div > div{ 
				width: 450px; height: auto;
			}

				/* cuvee.._texte*/
				.Les_vins_taille .cuvee_texte{
					width: 345px; height: auto;	
	
				}

						#medaille_argent {
							height: auto; width: 75px;
							position: absolute;	
							right: 10px;
							top: unset;
							bottom: 90px;
						}


						#medaille_bronze {
							height: auto; width: 75px;
							right: 10px;
							top: unset;
							bottom: 80px;
						}

	.bandeForMobile {
		width: 400px; height: auto;		
	}

		#flex_Les_vins .floatingImgMobile {
			width: auto; height: 35px;

			filter: drop-shadow(8px 10px 10px rgb(0,0,0,0.5));
		}	
		#flex_Les_vins .staticImgMobile {
			width: auto; height: 25px;

			filter: drop-shadow(5px 5px 5px rgb(0,0,0,0.5));
		}	
			
				#flex_Les_vins .floatingImgMobile:nth-child(1) {
					transform: rotate(-15deg); 
					padding-right: 10px;
					bottom: 15px;
					left: 105px;
				}
				#flex_Les_vins .floatingImgMobile:nth-child(2) {
					transform: rotate(15deg); 
					bottom: 40px;
					left: 215px;
				}	
				#flex_Les_vins .floatingImgMobile:nth-child(3) {
					transform: rotate(-15deg); 
					bottom: 15px;
					left: 310px;
				}		

				#flex_Les_vins .staticImgMobile:nth-child(4) {
					transform: rotate(-15deg); 
					bottom: 5px;
					left: 25px;
				}
				#flex_Les_vins .staticImgMobile:nth-child(5) {
					transform: rotate(-15deg); 
					bottom: 5px;
					right: 30px;
				}	

				#flex_Les_vins .serviceImg {
					left: 300px !important;
				}






}

footer {
	padding: 0; margin: 20px 0 0 0;
	
	grid-area: footer;
	height: auto; width: 100%;

	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;

	font-size: 17px; 
	font-weight: 700;
	color: black;
	}	
	
		#puce_footer{
			margin: 0 0 15px 0; padding: 0;
			height: auto; max-width: 600px;

			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

		}
		
			#puce_footer ul {
				height: auto; width: 100%;
			
				margin: 10px 0 10px 0; padding: 0;
				
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
			}

				#puce_footer ul li{
					padding: 0;
					list-style: none;
					width: 140px;

					font-size: 17px; 
					font-family: 'Philosopher', 'arial', "Times New Roman", 'Helvetica', 'sans-serif', 'Times';
					font-weight: 700;

					display: flex;
					justify-content: center;
					align-items: center;
				}


				#puce_footer ul li a {
					text-decoration: none;
					color: black;
					transition: 0.5s;
				}

					#puce_footer ul li a:hover {
					color: #8D6E63;
					transition: 0.5s;
				}

			#copyright {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 0px;
			}

			.mentions_legales a {
				height: 35px;
				text-decoration: none;
				color: black;
				font-size: 15px;
				font-family: 'Muli','Raleway', 'arial', "Times New Roman", 'Helvetica', 'sans-serif', 'Times';
				font-weight: 700;
			}

				.mentions_legales p {
					padding: 0; margin: 0;
					color: black;
				}

					.mentions_legales p:hover{
						color: #A7987D;
						transition: 0.5s ;
					}

			footer img{
				height: 35px;
				width: auto;
			}

/*  .............................................................   */
@media all and (max-width: 1024px)
{
	
		#puce_footer{
			height: 100%; max-width: 600px;
		}

			#puce_footer ul {
				height: auto; width: 100%;
			}

				#contact h1{
					font-size: 35px;
				}

				#contact p{
					font-size: 20px;
				}
}

/*  .............................................................   */
@media all and (max-width: 600px)
{

		#puce_footer{
			height: 100%; max-width: 430px;	
		}
		
			#puce_footer ul {
				height: auto; width: 100%;
			}
				#puce_footer ul li {
				max-width: 100px;
				font-size: 17px; 
				}

			#contact h1{
				font-size: 30px;
			}

			#contact p{
				font-size: 15px;
			}

}

/*  .............................................................   */
@media all and (max-width: 410px)
{
	#puce_footer ul li {
				max-width: 80px;
				font-size: 16px; 
				}
}