/* Version: 1.0 */
/* Auteurs: Sandra et Guillaume */
/* Description: CSS de la Page d'Accueil du Site des Roses */

html
{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

body
{
	/* height: 100%; */
	width: 100%;
	margin: 0;
	padding: 0;

	background-color: white;

	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	
	font-family: Arial, Helvetica, sans-serif;
}

::selection
{
	background: #64B4F6;
	color: #5AF7B8;
}

* {
	margin: 0;
	padding: 0;

	box-sizing: border-box;

	outline: none;
	text-decoration: none;
}
	
/*******************************************************/
/*******************************************************/
/*******************************************************/



/*******************************/
/*
/* Conception de la Structure */ 
/* de la Page d'Accueil */
/*
/******************************/

.CoeurAccueil
{
	/* height: 100%; */
	width: 80%;

	box-sizing: border-box;
	
	display: flex;
	flex-direction: row;

	/* margin-bottom: 5px; */

	/* flex-wrap: wrap; */
}

	.Colonne_G
	{
		flex: 30%;
		max-width: 350px;

		background-color:#C8C7FD ;

		border-radius: 10px;

		padding: 1.5rem 1.2rem;
		margin-right: 5px;
		/* box-sizing: border-box; */

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

		z-index: -2;
	}

	.Milieu
	{
		flex: 70%;

		background-color: #C2E2FD;

		border-radius: 10px;

		padding: 1.5rem;
		margin-left: 5px;
		box-sizing: border-box;

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

/* .Footer
{
	width: 80%;
	height: 70px;

	border-radius: 10px;
	background-color: #BEFDE4;

	margin-top: 5px;
	margin-bottom: 10px;;
} */

/************************************/
/*
/* Interieur de la Colonnes Gauche */
/* Idée de réaliser comme un dialogue de Annonces Admin? */
/*
/*********************************************************/
.AnnonceAdmin
{
	position: relative;
}

	/* TITRE des Annonces */
	.Titre
	{
		/*color: white;*/
		color:#4f6182;
		font-weight: 500;
		font-size: 1.5rem;

		text-shadow: 2px 2px 4px rgba(0,0,0,0.3); 
		
		opacity: 0.8;

		margin-bottom: 1rem;
	}

	.BlocAnnonce
	{
		/* height: 200px; */
		height: auto;
		min-height: 20%;
		
		padding: 1rem;
		margin-bottom: 10px;
	
		border-radius: 15px;

		/* Ajout de luminosité */
		border-left: 1px solid rgba(255,255,255,0.3) ;
		border-top: 1px solid rgba(255,255,255,0.3) ;
		
		/* Effet qui permet d'ajouter un filtre aux élements "en dessous de NOUS" */
		/* Gradation du Blur : #JeSuisFlouDERRIERE - #JeSuisNetDEVANT */
		background: rgba(255,255,255,0.3);
		backdrop-filter: blur(10px);
		/* -webkit-backdrop-filter: blur(10px); */

		box-shadow: 10px 10px 30px -5px rgba(0,0,0,0.3);

		/*color: white;*/
		color:#4f6182;
		font-size: 0.9rem;
	}

	.drop
	{
		position: absolute;

		background: rgba(255,255,255,0.3);
		backdrop-filter: blur(10px);
		/* -webkit-backdrop-filter: blur(10px); */
		
		border-left: 1px solid rgba(255,255,255,0.3) ;
		border-top: 1px solid rgba(255,255,255,0.3) ;
		border-radius: 10px;

		box-shadow: 10px 10px 60px -8px rgba(0,0,0,0.3);

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
		.drop-1
		{
			height: 60px;
			width: 60px;

			top: 10px;
			left: -40px;

			z-index: -1;
		}

	/***********************/
/***********************/
/*
/* Bloc pour l'Affiche */
/*
/***********************/
	/***********************/

.BlocAffiche
{
	border-radius: 10px;

	/* Ajout de luminosité */
	border-left: 1px solid rgba(255,255,255,0.3) ;
	border-top: 1px solid rgba(255,255,255,0.3) ;
	
	/* background: rgba(255,255,255,0.3); */
	/* backdrop-filter: blur(10px); */
	/* -webkit-backdrop-filter: blur(10px); */

	box-shadow: 10px 10px 30px -5px rgba(0,0,0,0.3);
}
	.Affiche
	{
		width: calc(100% - 1px);
		height: calc(100% - 1px);

		border-radius: 10px;
	}

	/***********************/
/***********************/
/*
/* Bloc Map */
/*
/***********************/
	/***********************/
.Map
{
	width: 100%;
}

iframe
{
	width: 100%;
	margin-bottom: 2em;

	border-radius: 10px;
}

.MapTitle
{
	/*color: white;*/
	color:#4f6182;
	font-weight: 500;
	font-size: 1.5rem;

	text-shadow: 2px 2px 4px rgba(0,0,0,0.3); 
	
	opacity: 0.8;

	margin-bottom: 2rem;

	position: relative;
}
	.MapTitle::before
	{
		content :"";
		position: absolute;
		left: 0;
		bottom: -5px;

		height: 4px;
		width: 30%;
		background: linear-gradient(45DEG,#9997FA, #C2E2FD);
		background : linear-gradient(45DEG,#64B4F6,#5AF7B8);
	}

.MapText
{
	width: 100%;

	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: flex-start;
	flex-wrap: wrap;
}
	.MapSamedi, .MapDimanche
	{
		width: auto;
		min-width: 200px;
		height: 250px;

		padding: 0.8rem;
		margin: 0.8rem 5px;

		/*color: white;*/
		color:#4f6182;
		font-weight: 500;
		font-size: 1rem;

		text-shadow: 2px 2px 4px rgba(0,0,0,0.3); 

		border-radius: 10px;
		border-left: 1px solid rgba(255,255,255,0.3) ;
		border-top: 1px solid rgba(255,255,255,0.3) ;
	
		box-shadow: 10px 10px 30px -5px rgba(0,0,0,0.3);
		
		opacity: 0.8;

	}
		.MapSamedi h2, .MapDimanche h2
		{
			/*color: white;
			color: #7471F7;*/
			color:#4f6182;

			font-weight: 500;
			font-size: 1.1rem;

			text-shadow: 2px 2px 4px rgba(0,0,0,0.3); 
			
			opacity: 0.8;

			margin-bottom: 1.3rem;

			position: relative;
		}
			.MapSamedi h2::before, .MapDimanche h2::before
			{
				content :"";
				position: absolute;
				left: 0;
				bottom: -5px;
		
				height: 2px;
				width: 30%;
				background: linear-gradient(45DEG,#9997FA, #C2E2FD);
			}

/*******************************************************/
/*******************************************************/
/*******************************************************/

@media screen and (max-width: 1080px) {
	.CoeurAccueil 
	{   
		width: 90%;
	}
}


@media screen and (max-width: 600px) {
	.CoeurAccueil 
	{   
		width: 90%;
		flex-direction: column;
		margin-bottom: 0px;
	}
		.Colonne_G
		{
			max-width: none;
			margin: 5px 0;
		}
		.Milieu
		{
			margin: 5px 0;
		}
}

@media screen and (max-width: 500px) {
	
	.MapText
	{
		flex-wrap: wrap;
		justify-content: center;
	}
		.MapSamedi
		{
			margin-bottom: 10px;
		}
}