/************/
/*
/*** MENU ***/
/*
/************/
.BlocSecteur
{
	height: 100%;
	width: 20%;
	padding: 0px;
	margin: 0px;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
	color: white;
	
	 /* background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red); */
	 background: linear-gradient(to right,var(--Rouge) 20%,var(--Mauve));
		-webkit-background-clip: text;
		-moz-background-clip: text;
		background-clip: text;
     color: transparent;
	  
	  /* background-color: purple; */
}

	.Logo
	{
		/* background-color: green; */
		
		height: 90%;
		width: 100%;
		
		background-image: url("../images/LogoRose_T.png");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}

	.BlocSecteur p
	{
		
		padding: 0px;
		margin: 0px;
		
		font-size: 1.5em;
	}

.BandeauRose
{
	height : 40%;
	width : 80%;
	
	/* background-color: green; */
	
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
	
	border-bottom: 3px solid var(--Rose);
	border-top: 3px solid var(--Rose);

	font-size: 1.1em;
	
}
	.TuileBandeau
	{
		width: calc(100% / 6);
		height: 100%;
		/*Diviser par le nombre de Tuile*/
	}

		.Tuile
		{
			text-decoration: none;
			color : var(--Rose);
			
			/* background-color: blue; */
						
			display: flex;
			justify-content: center;
			align-items: center;
			
			width: 100%;
			height: 100%;
		}

			.Tuile:hover 
			{
				background-color: var(--Rose);
				color : white;
			}

		.Active /* Pour la tuile de la page active */
		{
			text-decoration: none;
			border-bottom: 8px solid RoyalBlue;
			/* outline: 3px solid RoyalBlue; */
			/* box-sizing: border-box; */
			
			color : RoyalBlue;
			font-weight: bold;
			font-size: 1.4em;
			
			display: flex;
			justify-content: center;
			align-items: center;
			
			width: 100%;
			height: 100%;
		}
		
	.Bandeau p
	{	
		margin:0px;
	}

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

@media screen and (max-width: 1000px)
{
	.BlocSecteur
	{
		/* flex-direction: row; */
		
		height: 100%;
		width: 100%;
		
		margin-top: 2px;
	}
		.Logo
		{
			height: 100px;
			width: 100px;
		}
		.BlocSecteur p
		{
			/* font-size: 1em; */
		}
	.BandeauRose
	{
		flex-direction: column;
		
		height:auto;
		width: 100%;
		
		font-size: 0.8em;
	}

		.TuileBandeau
		{
			width: 100%;
			height: auto;
		}
			.Tuile
			{			
				width: 100%;
				height: auto;
			}
			.Active /* Pour la tuile de la page active */
			{
				width: 100%;
				height: auto;
			}
}