:root {
	--bleu-clair: #AEE8FE;
	--bleu-fonce: #01327F;

}

@font-face {
	font-family: "Freshman";
	src: url(../IMG/Freshman.ttf) format("truetype");
}

/*-----------------------------------GLOBAL-----------------------------------------*/
body {
	background-color: black;
	font-family: "Freshman", serif;
}

div {
	display: flex;
	flex: 1;
}

.colonne {
	flex-direction: column;
}

img {
	width: 100%;	
	min-height: 0;
	min-width: 0;
	aspect-ratio: attr(width) / attr(height);
	height: auto;
}

#page {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.contenu {
	flex-direction: column;
	padding: 5vh 0;
	width: 100%;
	align-items: center;
}

#contenu {
	flex: 10;
	width: 100%;
	background-color: white;
	justify-content: center;
	display: flex;
	flex-direction: column;
}

.reduit {
	width: 75%;
	flex-direction: column;
}

.centrer {
	align-items: center;
	justify-content: center;
	margin: 5% 0;
}

.sansMarge {
	margin: 0;
}

.demi {
	flex: 0.5;
}

.tiers {
	flex: 0.3;
}

.centrerTableau {
	text-align: center;
}
h1{
	color: var(--bleu-clair);
}
/*-----------------------------------HEADER-----------------------------------------*/
header {
	flex: 1;
	display: flex;
	width: 100%;
	z-index: 20;
	background-image: url("../IMG/herbevertebottom.png");
	background-position-y: bottom;
	background-repeat: repeat no-repeat;
}

.logo {
	flex-direction: column;
	align-self: center;
}

.titreEntete {
	width: 100%;
	align-items: center;
	font-size: 2em;
	font-family: "Freshman", serif;
}

.entete {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 5;
	align-items: center;
}

.reseau {
	justify-content: flex-end;
	flex: 0.8;
	max-width: 6vw;
	flex-direction: column;
}

/*************************NAV**************************/
nav {
	width: 100%;
}

#use {
	color: white;
	font-size: 2em;
	font-family: "Freshman", 'Macondo Swash Caps';
	display: flex;
	justify-content: center;
	flex: 3;
	align-self: flex-end;
}


.icon {
	flex: 0.3;
	margin: 0 1vw;
}

/*-----------------------------------FOOTER-----------------------------------------*/
footer {
	flex: 2;
	width: 100%;
	background-color: var(--bleu-clair);
	display: flex;
	justify-content: center;
	padding-top: 5vh;
	padding-bottom: 5vh;
}


/*-----------------------------------Accueil-----------------------------------------*/
.paragraphe {
	background-color: white;
	margin-bottom: 0.2%;
}

.titre {
	flex: 2;
	background-color: var(--bleu-clair);
	margin: 0.4%;
	padding: 1%;
	align-self: center;
	font-weight: bold;
	border: white solid 10px;
}

.detail {
	flex: 5;
	display: flex;
	padding: 1%;
}

iframe {
	border: none;
	overflow: hidden;
	width: 100%;
}

/*-----------------------------------Divers----------------------------------------------*/
#imgTravaux {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}


/****************COMITE *****************/
.case {
	flex-direction: column;
	color: white;
	padding: 2vw;
}

.info {
	flex: 0.2;
	align-self: center;
	margin: 2vh 0;
	flex-direction: column;
}

.caseRole {
	background-color: var(--bleu-clair);
	font-size: 1.5em;
	font-weight: bold;
	color: black;
	width: 100%;
	justify-content: center;
	padding: 0.5vw 0;
}

.NomPrenom,
.Phrase,
.Tel {
	justify-content: center;
	text-align: center;
	font-size: 0.8em;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.espaceHorizon {
	padding-bottom: 2vh;
}

.rubrique {
	flex: 5;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/****************PHOTO *****************/
.photo {
	margin: 1vw;
}

.carroussel,
.imgcarroussel {
	flex-wrap: wrap;
	overflow: hidden;
	flex: 2;
}

.carroussel {
	position: absolute;
	top: 0;
	width: 100%;
}

.imgcarroussel {
	margin: 0.5vw;
	min-height: 0;
	min-width: 0;
	aspect-ratio: attr(width) / attr(height);
	height: auto;
}

h2,
h3 {
	color: white;
	font-family: monospace;
}

footer >div >h2 {
	color: black;
}

h3 {
	font-weight: unset;
}

/*********************Bouton Back to Top ********************/
#Haut {
	display: none;
	/* Hidden by default */
	position: fixed;
	/* Fixed/sticky position */
	bottom: 20px;
	/* Place the button at the bottom of the page */
	right: 30px;
	/* Place the button 30px from the right */
	z-index: 99;
	/* Make sure it does not overlap */
	border: none;
	/* Remove borders */
	outline: none;
	/* Remove outline */
	background-color: var(--bleu-fonce);
	/* Set a background color */
	color: white;
	/* Text color */
	cursor: pointer;
	/* Add a mouse pointer on hover */
	padding: 15px;
	/* Some padding */
	border-radius: 10px;
	/* Rounded corners */
	font-size: 18px;
	/* Increase font size */
}

#Haut:hover {
	background-color: #555;
	/* Add a dark-grey background on hover */
	transform: scale(1.1);
}

/************************************ Clic sur image*****************/

#grandePhoto {
	display: none;
	position: fixed;
	top: 5vh;
	left: 5vw;
	justify-content: center;
	width: 95vw;
	height: 95vh;
}

#grandePhoto img {
	width: unset;
	height: 100%;
}

#cadre {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: white;
	opacity: 0.7;
}

/*************************ANIMATION ******************/
.bouton:hover {
	transform: scale(1.1);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
	background-color: var(--bleu-fonce);
}

.bouton {
	transition: all 0.5s;
}

.portrait {
	animation: 3s alternate slidein;
}

.uneImage {
	animation: 3s alternate slideout;
}

/*********** La bleue *******************/
video{
	height: 25vh;
}

@keyframes slidein {
	from {
		width: 200%;
		margin-left: -50%;
		margin-right: 50%;
	}

	to {
		width: 100%;
		margin-left: 0%;
		margin-right: 0%;
	}
}

@keyframes slideout {
	from {
		width: 20%;
	}

	to {
		width: 100%;
	}
}