/* Version: 1.0 */
/* Auteurs: Sandra et Guillaume */
/* Description: CSS du Bandeau du Site des Roses */

* {
	margin: 0;
	padding: 0;

	box-sizing: border-box;

	outline: none;
	text-decoration: none;
}

/************/
/*
/*** MENU ***/
/*
/************/
.Bandeau
{
	height: 30%;
	width: 80%;

	margin: 5px 0px;

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

	box-sizing: border-box;
}


.First
{
	height: 70%;
	width : 100%;

	margin: 5px 0px;

	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: flex-end;

	box-sizing: border-box;

	position: relative;

	/* background-color: #64B4F6; */
}

/******************************/
/*
/* Lien de Retour vers Accueil */
/*
/******************************/
	.RetourAccueil
	{
		height: 100px;
		width: 100px;
		/* align-self: flex-start; */

		position: absolute;
		left: 0px;

		background-color: #64B4F6;

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

		/* 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: 5px 5px 20px rgba(0,0,0,0.3);
	}
		.Retour
		{
			width: 100%;
			height: 100%;

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

			color: white;
			text-decoration: none;
			opacity: 0.8;

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

			border: none;
			border-radius: 10px;

			/*l'Aptitude "transition" permet de donner de la progression au TEXTSHADOW lors de l'HOVER */
			transition: all 0.3s;
		}
			.Retour:hover,
			.Retour:focus
			{
				box-shadow: 5px 5px 20px 5px rgba(0,0,0,0.3);
			}
			.Retour:hover > p
			{
				text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
			}

/* Ou IMAGE logo des ROSES sur cette même DIV */

			.Image
			{
				width: 100%;
				height: 100%;

				border-radius: 10px;
			}
/**********************/
/*
/* Bouton Déconnexion */
/*
/**********************/

	.BnDeco
	{
		width: auto;
		height: 30%;

		margin: 5px 0px;

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

		cursor: pointer;
	}
		.BnD
		{
			height: 100%;
			width: 100%;

			/* padding: 11px; */
			padding: 0.5rem 0.8rem;

			background : linear-gradient(45DEG,#64B4F6,#5AF7B8);

			border: none;
			border-radius: 3px;
			border-left: 1px solid rgba(255,255,255, 0.4);
			border-top: 1px solid rgba(255, 255, 255, 0.4);

			font-size: 0.8rem;
			font-weight: 500;
			color: white;
			text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
			text-align: center;
			text-decoration: none;


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

			transition: all 250ms;
		}
			.BnD:hover
			{
				background : linear-gradient(45DEG,#64B4F6,#5AF7B8);
				background: linear-gradient(45deg,#9997FA, #C2E2FD);

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

/***********************/
/*
/* Bouton Social MEDIA */
/*
/***********************/
.Social
{
	width: auto;
	height: 30%;

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

.fa
{
	height: 30px;
	width: 30px;

	margin: 5px 2px;
	padding: 20px;

	border-radius: 3px;

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

	text-align: center;
	text-decoration: none;

	box-sizing: border-box;

}
	.fa:hover
	{
		opacity: 0.7;
	}

.fa-facebook
{
	background: #3B5998;
	color: white;

	/* position: relative; */
}

	.Bulle
	{
		position: relative;
	}
		/* on génère un élément :after lors du survol et du focus */
		.Bulle:hover:after,
		.Bulle:focus:after
		{
			content: attr(aria-label);

			position: absolute;
			bottom: -2.4em;
			left: 50%;
			transform: translateX(-50%);
			z-index: 1;

			white-space: nowrap;
			background: linear-gradient(45deg, #7471F7, #64B4F6);
			color: white;
			font-size: 0.8rem;

			padding: 5px 14px;
			border-radius: 3px;
		}

		.FBulle
		{
			position: relative;
		}
			/* on génère un élément :after lors du survol et du focus */
			.FBulle:hover:after,
			.FBulle:focus:after
			{
				content: attr(aria-label);

				position: absolute;
				bottom: -1.6em;
				left: 50%;
				transform: translateX(-50%);
				z-index: 1;

				white-space: nowrap;
				background: linear-gradient(45deg, #7471F7, #64B4F6);
				color: white;
				font-size: 0.8rem;

				padding: 3px 7px;
				border-radius: 3px;
			}

.fa-instagram
{
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
	color: white;
}

.fa-linkedin
{
	background: #007bb5;
	color: white;
}

.fa-twitter
{
	background: #55ACEE;
	color: white;
}

.fa-lTree
{
	background-color: #5AF7B8;
	color: white;
}
	.FaLogo
	{
		height: 40px;
		width: 40px;

		border-radius: 3px;
	}

.fa-hello
{
	color: white;
	background: linear-gradient(to top, #2F3060, #4B40CE);
}


/**********************************************/
/*
/* Personnalisation de la Barre de Navigation */
/* et de ses Tuiles */
/*
/********************/

.NavBar
{
	height: 30%;
	width : 100%;

	margin: 5px 0px;

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

	/* background-color: #64B4F6 ; */
	/* border-radius: 3px; */
}

.TuileBandeau
{
	width: auto;
	height: 100%;

	margin-right: 10px;

	border-radius: 3px;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
	.Tuile
	{
		width: 100%;
		height: 100%;

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

		/* padding: 11px;
		box-sizing: border-box; */

		color: white;
		text-decoration: none;
		opacity: 0.8;

		border-radius: 3px;
	}
	/* Définition de la COULEUR de chaque Tuile/Onglet */
		.Nav1
		{
			background: linear-gradient(45deg, #7471F7, #64B4F6);
		}
		.Nav2
		{
			/* background: linear-gradient(45deg, #5AF7B8, #0AE48C); */
			background:  #64B4F6;
		}
		.Nav3
		{
			/* background: linear-gradient(45deg,  #2E2BE6, #524EF2); */
			background: #3F9FEF;
		}
		.Nav4
		{
			/* background: linear-gradient(45deg, #FF8D5D,  #FF1B88); */
			background: #1986E1 ;
		}

		/* Définiton du p de chaque Tuile pour donner de l'espace à la Tuile */
		.Tuile p
		{
			padding: 11px;
			margin: 0px;
		}

		/* Définition de l'HOVER et du FOCUS de ses Tuiles/Onglets */
		.Tuile:hover,
		.Tuile:focus
		{
			background: white;
		}
			.Nav1:hover
			{
				color: #64B4F6;
			}
			.Nav2:hover
			{
				/* color: #0AE48C; */
				color: #64B4F6;
			}
			.Nav3:hover
			{
				/* color: #524EF2; */
				color: #3F9FEF;
			}
			.Nav4:hover
			{
				/* color: #FF1B88; */
				color: #1986E1;
			}

	/******************************/
/******************************/
/*
/* Personnalisation du Footer */
/*
/******************************/
	/******************************/

.Footer
{
	width: 80%;
	height: auto;
	min-height: 70px;

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

	margin-top: 10px;
	margin-bottom: 10px;

	text-align: center;

	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: start;
}
	.FooterRight, .FooterMiddle, .FooterLeft
	{
		padding: 1em;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		/* align-items: start; */
		align-items: center;
		text-align: center;

		font-size: 0.8em;
		font-weight: 500;

		outline: none;
		text-decoration: none;
	}
		.FooterRight p, .FooterMiddle p, .FooterLeft p
		{
			width: 100%;
			text-align: center;
		}
		.Footer .Social .fa
		{
			height: 10px;
			width: 10px;

			margin: 2px 1px;
			padding: 10px;

			border-radius: 50px;
		}

		.Footer .Social .fa .FaLogo
		{
			width: 20px;
			border-radius: 50px;
		}




/*****************/
/* MEDIA QUERIES */
/*****************/

@media screen and (max-width: 600px) {
	.Bandeau
	{
		width: 90%;
	}
	.Footer
	{
		width: 90%;
	}

	.NavBar
	{
	  flex-direction: column;
	  justify-content: center;
	  align-items: stretch;
	}
		.TuileBandeau
		{
			width: 100%;
		}
}