*
{
	border: 0px solid blue;
	padding: 0px;
	margin: 0px;

	--theme-main-color: #ff0011;
}

html, body
{
	width: 100%;
	height: 100%;

	background: url(rays.jpg) no-repeat center center fixed;
	background-size: cover;

	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: space-around;

	font-family: "calibri";
}

.colonne
{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-content: space-around;
	text-align: center;
}

.ligne
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-content: space-around;
	text-align: center;
}

.cellule
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-content: space-around;
	text-align: center;
}

#fenetre
{
	z-index: 10;

	position: fixed;
	top: 0px;
	left: 0px;

	height: 100%;
	width: 100%;
}

	#barre-superieure
	{
		width: 100%;
		max-height: 64px;

		background-color: black;
		opacity: 0.9;
	}

		#logo-zone
		{
			min-width: 64px;
			min-height: 64px;

			margin: 5px;

			background-size: cover; 
			background-position: center center; 
			background-repeat: no-repeat; 
			background-image: url('zozor.png');
		}

		#info-zone
		{
			margin: 5px;
		}

		#navigation-zone
		{
			margin: 5px;
		}

			.lien-navigation
			{
				margin-left: 30px;
				margin-right: 30px;
				color: white;
				text-decoration: unset ;

				font-size: large;
				font-variant: small-caps;
				font-weight: bold;
			}

#page
{
	z-index: 0;

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-content: space-around;

	height: 100%;
	width: 100%;
}

	#en-tete-de-page
	{
		height: 64px;
		width: 100%;

		background-color: var(--theme-color);
		opacity: 1;
	}

	#contenu-de-page
	{
		height: 100%;
		width: 100%;

		background-color: var(--theme-color);
		opacity: 0.75;
	}

	#pied-de-page
	{
		position: absolute;
		bottom: -256px;
		left: 0px;
		
		height: 256px;
		width: 100%;

		background-color: black;
		opacity: 1;
	}

#bandeau
{
	z-index: 10;

	position: fixed;
	top: 40%;
	left: 0px;

	height: 20%;
	width: 100%;

	min-height: 128px;

	background: var(--theme-main-color);
	opacity: 0.75;

	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-around;
	align-content: space-around;
}

	#mention-bandeau
	{
		font-size: xx-large;
		font-weight: bold;
		color: white;
	}

	#bouton-bandeau
	{
		color: black;
		text-decoration: none;
		margin: 5px;
		padding: 5px;
		border: 1px solid black;
		border-radius: 5px;
		background-color: white;
		opacity: 0.9;
	}

	#bouton-bandeau:hover
	{
		opacity: 1;
	}