:root {
    --blue: #3bd7da;
    --indigo: #6610f2;
    --purple: #ac5cea;
    --pink: #f4426e;
    --red: #dc3545;
    --orange: #f8ad41;
    --yellow: #ffc107;
    --green: #33d4bb;
    --teal: #20c997;
    --cyan: #3bd7da;
    --white: #fff;
    --gray: #a9a29a;
    --gray-dark: #91877d;
    --primary: #857f79;
    --secondary: #a9a29a;
    --success: #33d4bb;
    --info: #3bd7da;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #e7e4e2;
    --dark: #91877d;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1400px;    
}

*
{
	margin:0;
	padding:0;
	font-family: "Roboto", sans-serif; /*temporaire: choisire autre police par la suite*/
	font-weight:Thin;
}
/*DIAGNOSTIQUE DES BORDURES
* {
    border: 1px solid red !important;
}
* > * {
    border: 1px solid blue !important;
}
* + * {
    border: 1px solid green !important;
}
*/

body
{
	width:100%;
	background-color: white;
	min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: 0.5rem;
    font-weight: 400;
    line-height: 1.2;
}

select {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}


button 
{
    cursor: pointer;
	font-size: 1em;
}

p
{
	text-align:justify;
	margin-bottom:1em;
	line-height: 1.5em;
	letter-spacing:0.03rem;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

h2
{
	font-size: 1.2rem;
	text-transform: uppercase;
	font-weight: bold;
	margin-bottom:1.2em;
	margin-top: 1.5em;
}

ul li
{
	margin-left:3em;
	line-height: 1.5em;
	display: block;
	display: list-item;
    text-align: -webkit-match-parent;
}

a
{
	text-decoration:none;
}
a:visited
{
	text-decoration: none;
}

a:hover
{
	text-decoration:none;
	color:#e7e4e2;
}
a.grey	
{
	color:#91877d;
}

form
{
	width:100%;
	height:100%;
}

button
{
	border:none;
	background-color: transparent;
}

em 
{
    font-style: italic;
}

/*---- CONSTANT ------------*/
.flag-icon {
	height: 10px;
	margin-right: 5px;
	vertical-align: middle;
}

#entete
{
	font-size:4em;
	text-align:left;
	padding-top:17.5vh;
	display:flex;
	justify-content:space-around;
	width:100%;
	margin:auto;
}

#entete1
{
	padding-top:17.5vh;
	display:flex;
	justify-content:flex-start;
	width:100%;
	margin:auto;
	color:white;
}

.greyTitle
{
	color:#a1a5a8;
	font-size:1.2em;
}
.grey
{
	color:#a1a5a8;
}

.textArea
{
	width:100%;
	border-radius:5px;
	border:#e7e4e2 solid 1px;
	height:200px;
	padding:10px;
}

.inputFloatRight
{
	float: right;

}

.inputFloatLeft
{
	float: left;
	
}

input[type="text"]
{
	width:50%;
	min-width: 200px;
	height:1.5em;
	border-radius:5px;
	border: 1px #e7e4e2 solid;
}

textarea
{
	width:100%;
	min-width: 240px;
	min-height: 100px;
	border-radius:5px;
	border: 1px #e7e4e2 solid;
}

input[type="password"]
{
	max-width:300px;
	min-width:180px;
	width:25%;
	height:1.5em;
	border-radius:5px;
	border: 1px #e7e4e2 solid;
}

input[type=checkbox] 
{
	width: auto 
}

.logo
{
	background-image:url(pics/logo/logo_blanc_vectorise.svg);
	background-size:cover;
	width:35%;
	padding-bottom:35%;
	background-repeat:no-repeat;
}

.centerElement
{
	width:100%;
	display:flex;
	justify-content:space-around;
}

.column
{
	display:flex;
	flex-direction:column;
}

.center
{
	justify-content:center;
}

.around
{
	justify-content:space-around;
}

.title
{
	padding-top: 102px;	
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	padding-left:1.6%;
	max-height: 9vh;
	background-color: white;	
}
	.title h1
	{
		color: #3bd7da;
		font-size: 2rem;
		text-transform: uppercase;
		font-weight: 200;
		margin-top: 20px !important;
	}
	
	.title h2
	{
		font-size: 1rem;
		color: #c2bcb7;
		align-items: uppercase;
		margin-top: 0px !important;
		margin-bottom: 20px !important;
	}

.greyButton
{
	text-transform: uppercase;
    letter-spacing: 0.03rem;
    line-height: 1.7;
	color: #fff;
    background-color: #a9a29a;
    border-color: #a9a29a;
	border-radius: 5px;
	height:30px;
	max-width: 200px;
}
.greyButton:hover
{
	background-color: #857f79;
}
.lightGrey
{
	color:#d1ccc5;
}
.lightGreyButton
{	
	letter-spacing: 0.03rem;
	text-align: center;
	vertical-align: center;
	font-size: large;
	font-weight: 500;
	color: black;
	background-color: #e7e4e2;
	border:lightgray solid 1px;
	border-radius: 5px;
	padding: 10px 15px;
}
.mediumLightGreyButton
{
	
	font-size: 1rem;
	font-weight: 300;
	border-radius: 5px;		
	padding: 10px 20px;
	margin-top: 10px;
	cursor: pointer;
	margin:auto;
	white-space: nowrap;
	letter-spacing: 0.03rem;
	text-align: center;
	vertical-align: center;	
	color: black;
	background-color: #e7e4e2;
	border:lightgray solid 1px;
}
.lightGreyButton:hover, .mediumLightGreyButton:hover
{
	background-color: #c2bcb7;
}
.arrowPosition
{
	position:relative;
	bottom:4px; left:5px;
}
.mediumGrey
{
	color:#847f79;
}
.turquoise
{
	color: rgb(60, 215, 219)!important;
}
.violet
{
	color: rgb(172, 92, 234)!important;
}
.bold
{
	font-weight: bold;
}
.yellow
{
	color: #ffc107 !important;
}
.padding20
{
	padding:20px;
}
.paddingL20
{
	padding-left:20px;
}
.marginR20
{
	margin-right:20px;
}
.marginB15
{
	margin-bottom:15px;
}
.marginT15
{
	margin-top:15px;
}
.marginAuto
{
	margin:auto;
}
.displayFlexLine
{
	display:flex;
}
.displayFlexColumn
{
	display:flex;
	flex-direction:column;
}
.flexAround
{
	justify-content:space-around;
}
.flexBetween
{
	justify-content:space-between;
}
.flexCenter
{
	justify-content:center;
}
.flexVerticalCenter
{
	align-items:center;
}
.halfWidth
{
	width:50%;
	padding: 2%;
}
.bgMediumTurquoise
{
	background-color: rgb(52, 211, 188);
}
.bgTurquoise
{
	background-color: #3cd7db;
}
.bgWhite
{
	background-color: white;
}
.opacity50
{
	opacity:0.5;
}
.white
{
	color:white;
}
.uppercase
{
	text-transform:uppercase;
}
.width100pc
{
	width:100%;
}
.width95pc
{
	width:95%;
}

/*--- TABLES ---*/
table tr
{	
	height:48px;	
}
table, tr, td 
{
    border: none;
}
thead
{
	text-align: left;
}
		/* form visuals */
		
		.formContainer
		{	
			width:50%;
			margin:auto;
			margin-top:10vh;
		}
		
			.inputFormContainer
			{
				display:flex;
				flex-wrap:wrap;
			}
		
			.inputLabel
			{
				align-items:left;
				font-size:1.2em;
				margin-bottom:2vh;
				padding:10px;
			}
			
			.inputInput
			{
				align-items:right;
				padding:10px;
			}
			
			.inputFile
			{
				width:180px;
				height:23px;
				background: turquoise;
				display: inline-block;
				text-align:center;
				font-family: "Roboto", sans-serif;
				font-size:1em;
				padding-top:7px;
				border-radius:5px;
			}
				.inputFile:hover
				{
					color: turquoise;
					border:lightgrey solid 1px;
				}
				.inputFile:active 
				{
					background: #CCF;
				}
				.inputFile :invalid + span 
				{
					color: white;
					font-family: "Roboto", sans-serif;
					font-size:15px;
				}
				.inputFile :valid + span 
				{
					color: white;
					font-family: "Roboto", sans-serif;
					font-size:15px;
				}
	.textCenter
	{
		text-align:center !important;
	}


/*---- TOP MENU ------------*/

#topMenu /*quand c'est une autre page, l'arrière plan est vert*/
{
	width:100%;
	max-height:12vh;	
	position:fixed;
	z-index:98;	
	box-sizing: border-box;	
	background-size:cover;
	background-position: 0% 0%;
	background-color:white;
	margin:auto;
	display:flex;
	justify-content:space-between;
	box-sizing: border-box;
	padding:20px 20px 20px 20px;
	flex-wrap: nowrap;
	min-height: 80px;
}	
#topMenuIndex /*quand c'est la page index, l'arrière plan du menu est transparent*/
{
	width:100%;
	max-height:3cm;
	padding:20px 20px 20px 20px;
	position: absolute;
	top:0;
	left:0;
	z-index:98;
	background-color:transparent;
	display:flex;
	justify-content:space-between;
	margin:auto;
	box-sizing: border-box;
}
	
	#topMenuLeftSide
	{
		max-height: 100%;
		max-width:55%;
		display:flex;
		justify-content:space-between;
	}
		.hamburger-icon 
		{
		color: white;
		font-weight: bold;
		font-size: 1.2em;
		}

	#topMenuRightSide
	{
		height:auto;
		width: auto;
		display:flex;
		justify-content:space-between;
		flex-wrap: nowrap;
		flex-direction: row;
		margin-right: 30px;
		align-items: center;
		border-color: #373737;
	}
		
		
		#whiteLogo
		{
			width: 146px;
			height: 62px;
			background: url(pics/logo/logo-white.png);
  			background-repeat: no-repeat;
  			background-size: contain;
			margin-left: 10px;
			margin-right: 160px;
		}
		
		.menuLink
		{
			display:flex;
			flex-direction:column;
			justify-content:center;
			text-align:left;
		}

		.topMenuLink
		{
			display:flex;
			flex-direction:row;
			justify-content:center;
			align-items: center;
		}
			
			.lienBlanc
			{
				color:white;
				font-size:0.95em;
			}
			#menuCart
			{
				color:white;
			}
			#menuBoutonMonCompte
			{
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 15px;
			}
			#menuBoutonMonCompte:hover
			{				
    			color: white
			}
				#menuBoutonMonCompte a
				{
					color: inherit;
				}
			
			
		.menuDropbtn 
		{
			background-color:transparent;
			display:flex;
			flex-direction:column;
			justify-content:center;
			text-align:left;
			color: white;
			padding: 16px;
			font-size: 1em;
			border: none;
			cursor: pointer;
			position: relative;
			display: flex;
			border-radius:2px;
		}		
		
		.menuDropbtn:hover
		{
			text-decoration:none;
			color:#e7e4e2;
		}		
		
		.menuDropdown-content {
			display: none;
			position: absolute;
			top: 35px;
			background-color: #f9f9f9;
			width: 240px;
			min-width: 240px;
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
			z-index: 1;
			border-radius: 20px;
			max-height: 450px; /* Exemple de hauteur maximale */
			overflow-y: auto; /* Ajout d'une barre de défilement si nécessaire */
		}
			.menuDropdown-content a
			{
				color: grey;
				padding: 16px 16px;
				font-size: 1em;
				text-decoration: none;
				display: block;
			}
			.menuDropdown-content a:hover 
			{
				background-color: transparent;
				font-weight:bold;
			}
			.menuDropbtn:hover .menuDropdown-content 
			{
				display: block;
			}
			.menuDropbtn:hover .menuDropbtn 
			{
				background-color: #3e8e41;
			}		

		#menuBoutonPanier
		{
			background-image: url(pics/logo/PANIER.JPG);
			background-size: cover;
			background-repeat: no-repeat;
			width: 50px;
			height: 40px;
			background-color: transparent;
			margin-right: 30px;
		}
			#panierCountBadge {
				background-color: red;
				color: white;
				font-size: 12px;
				border-radius: 50%;
				padding: 2px 5px;
				position: absolute;
				top: 0;
				right: 0;
				transform: translate(50%, -50%);
			}
		
		
		#menuBoutonMonCompte		
		{
			width: 155px;
			height: 50px;
			border-radius: 15px;
			align-items: center;
		}
		
		.panierArticleLigne
		{
			display:flex;
			justify-content: space-between;
		}
			/* Styliser le bouton de suppression */
			.delete-btn {
				background-color: transparent;
				border: none;
				cursor: pointer;				
			}

			/* Styliser l'icône de la corbeille (fa-trash) */
			.delete-btn i.fa-trash {
				color: grey; /* Couleur initiale en gris */
				font-size: 1em; /* Taille initiale */
				transition: color 0.3s, font-size 0.3s; /* Transition douce pour la couleur et la taille */
				padding: 5px;
			}

			/* Effet de hover sur l'icône de la corbeille */
			.delete-btn:hover i.fa-trash {
				color: red; /* Couleur en rouge au survol */
				font-size: 1.1em; /* Agrandissement de la taille */
				background-color: white;
				border:red solid 1px;
			}


			
		
/* ----------- BOTTOM MENU -----------------*/		

#bottomMenu
{
	width:100%;
	max-width: 100%;
	height:350px;
	display:flex;
	flex-direction: column;
	justify-content:center;
	background-color:#373737;
	color:#e7e4e2;
	box-sizing: border-box;
	padding: 40px 40px 20px 0px;
	font-size: 0.95rem;
}
	.bottomBox
	{
		width:95%;
		display:flex;
		justify-content: space-around;
		flex-wrap: wrap;
		max-height:325px;
		align-items: flex-start;
	}
		.menuLinksBottom
		{			
			width: 25%;
			text-align:left;
			height:325px;
		}

		.bottomMenuWhiteTile
		{
			color:white;
		}

		.lienGrisClair
		{
			color:#e7e4e2;
			margin-bottom: 5px;
		}

		.lienGrisClair:hover
		{
			color: #a9a29a;
		}

		.boutonBottom
		{
			background-color: #4c4a4a;
			color: white;
			padding: 10px 10px 10px 10px;
			border-radius: 15px;
			text-align: center;
			max-width: 240px;
			margin-bottom: 10px;
		}

		.boutonBottom:hover
		{
			background-color: #978f85;
		}

		#faceBookLink
		{
			padding: 0.25rem 0.5rem;
    		font-size: 0.875rem;
    		line-height: 1.5;
    		border-radius: 0.2rem;
			color: #fff;
    		background-color: #3b5998;
    		border-color: #857f79;
			margin-bottom: 10px;
			display:flex;
		}
			#facebookIcon
			{
				background-image: url(pics/logo/Facebook_logo_36x36.svg);
				width: 0.875rem;
				height: 0.875rem;
				background-size: cover;
				padding-top: 5px;
				padding-right: 5px;
				position:relative;
				left: -5px;
			}

		#youTubeLink
		{
			padding: 0.25rem 0.5rem;
			font-size: 0.875rem;
			line-height: 1.5;
			border-radius: 0.2rem;
			background-color: #ff0000;
			color: #fff;
			border-color: #857f79;
			margin-bottom: 10px;
			display: flex;
		}
			#youtubeIcon
			{
				background-image: url(pics/logo/youtube.svg);
				width: 0.875rem;
				height: 0.875rem;
				background-size: cover;
				padding-top: 5px;
				padding-right: 5px;
			}

		.otherSocialMedia
		{
			padding: 0.25rem 0.5rem;
			font-size: 0.875rem;
			line-height: 1.5;
			border-radius: 0.2rem;
			color: #fff;
			background-color: #857f79;
			border-color: #857f79;
			margin-bottom: 10px;
		}


/*------ ACCUEIL --------*/
#sliderContainer
{
	width:100%;
	height:30vh;
	overflow: hidden;
}

#slider
{
	height: 30vh;
	width:500%;
	display:flex;
	flex-direction: row;
	flex-wrap: nowrap;
	
	animation-name: sliderAnimation;
	animation-duration: 40s;
	animation-iteration-count: infinite;
}
	@keyframes sliderAnimation
	{
		0% { transform: translateX(0px); opacity: 0;}
		1% { opacity: 1;}
		19% { opacity: 1; }
		19.99% { transform: translateX(0px); }
		20% { transform: translateX(-20%); opacity:0; }
		21% { opacity:1; }
		39% { opacity:1; }
		39.99% { transform: translateX(-20%); }
		40% { transform: translateX(-40%); opacity:0; }
		41% { opacity:1; }
		59% { opacity:1; }
		59.99% { transform: translateX(-40%); }
		60% { transform: translateX(-60%); opacity: 0;}
		61% { opacity:1; }
		79% { opacity:1; }
		79.99% { transform: translateX(-60%); }
		80% { transform: translateX(-80%); opacity: 0;}
		81% { opacity:1; }
		99% { opacity:1; }
		100% { transform: translateX(-80%); }
	}
.slider20
{
	min-width: 20%;
	height: auto;
}
	.sliderElement
	{
		height:30vh;
		width:100%;
	}
	/*slider1*/
	#sliderColipainLayer0
	{
		background-image:url(pics/bg/slider/colipain.jpg);
		background-size: cover;
		background-color: white;
		background-position: 0% 50%;
		z-index: 1;
		position: relative;
		top:0;
		left:0;
	}
	/*#sliderColipainLayer1
	{
		background-color: white;
		background-position: 0% 25%;
		z-index: 2;
		clip-path: polygon(0% 0%, 100% 0%, 100% 25%, 0% 25%);
		position: relative;
		top:-45vh;
	}*/
	#sliderColipainLayer2
	{
		background-image:linear-gradient(to right, rgba(35, 193, 200, 0.95), hsla(178, 57%, 61%, 0.8));
		background-color: transparent;	
		z-index: 2;
		clip-path: polygon(0% 0%, 67% 0%, 50% 100%, 0% 100%);
		position: relative;
		top:-30vh; /*-90vh si on réactive layer 1*/
	}
	/*slider2*/
	#sliderCoursAdulteLayer0
	{
		background-image:url(pics/bg/slider/cours-adultes.jpg);
		background-size: cover;
		background-color: white;
		background-position: 0% 25%;
		z-index: 1;
		position: relative;
		top:0;
	}
	/*#sliderCoursAdulteLayer1
	{
		background-color: white;
		background-position: 0% 25%;
		z-index: 2;
		clip-path: polygon(0% 0%, 100% 0%, 100% 25%, 0% 25%);
		position: relative;
		top:-45vh;
	}*/
	#sliderCoursAdulteLayer2
	{
		background-image:linear-gradient(to right, rgb(255, 0, 0,0.95), rgb(255, 165, 0,0.8));
		background-color: transparent;
		z-index: 2;
		clip-path: polygon(0% 0%, 67% 0%, 50% 100%, 0% 100%);
		position: relative;
		top:-30vh; /*-90vh si on réactive layer 1*/
	}
	/*slider3*/
	#sliderCoursEnfantsLayer0
	{
		background-image:url(pics/bg/slider/cours-enfants.jpg);
		background-size: cover;
		background-color: white;
		background-position: 0% 25%;
		z-index: 1;
		position: relative;
		top:0;
	}
	/*#sliderCoursEnfantsLayer1
	{
		background-color: white;
		background-position: 0% 25%;
		z-index: 2;
		clip-path: polygon(0% 0%, 100% 0%, 100% 25%, 0% 25%);
		position: relative;
		top:-45vh;
	}*/
	#sliderCoursEnfantsLayer2
	{
		background-image:linear-gradient(to right, rgb(255, 0, 0,0.95), rgb(255, 165, 0,0.8));
		background-color: transparent;
		z-index: 2;
		clip-path: polygon(0% 0%, 67% 0%, 50% 100%, 0% 100%);
		position: relative;
		top:-30vh; /*-90vh si on réactive layer 1*/
	}
	/*slider4*/
	#sliderStagesEnfantsLayer0
	{
		background-image:url(pics/bg/slider/stages-enfants.jpg);
		background-size: cover;
		background-color: white;
		background-position: 0% 25%;
		z-index: 1;
		position: relative;
		top:0;
	}
	/*#sliderStagesEnfantsLayer1
	{
		background-color: white;
		background-position: 0% 25%;
		z-index: 2;
		clip-path: polygon(0% 0%, 100% 0%, 100% 25%, 0% 25%);
		position: relative;
		top:-45vh;
	}*/
	#sliderStagesEnfantsLayer2
	{
		background-image:linear-gradient(to right, rgba(35, 193, 200, 0.95), hsla(178, 57%, 61%, 0.8));
		background-color: transparent;
		background-position: 0% 25%;
		z-index: 2;
		clip-path: polygon(0% 0%, 67% 0%, 50% 100%, 0% 100%);
		position: relative;
		top:-30vh; /*-90vh si on réactive layer 1*/
	}
	/*slider5*/
	#sliderEvenementsLayer0
	{
		background-image:url(pics/bg/slider/evenements.jpg);
		background-size: cover;
		background-color: white;
		background-position: 0% 25%;
		z-index: 1;
		position: relative;
		top:0;
	}
	/*#sliderEvenementsLayer1
	{
		background-color: white;
		background-position: 0% 25%;
		z-index: 2;
		clip-path: polygon(0% 0%, 100% 0%, 100% 25%, 0% 25%);
		position: relative;
		top:-45vh;
	}*/
	#sliderEvenementsLayer2
	{
		background-image:linear-gradient(to right, rgb(102, 16, 242, 0.95), rgb(172, 92, 234, 0.8));
		background-color: transparent;
		background-position: 0% 25%;
		z-index: 2;
		clip-path: polygon(0% 0%, 67% 0%, 50% 100%, 0% 100%);
		position: relative;
		top:-30vh; /*-90vh si on réactive layer 1*/
	}
		.sliderMessage
		{
			Color:white;
			display:flex;
			flex-direction: column;
			justify-content: center;
			z-index: 5;
			height: 100%;
			margin-left: 30px;
		}
			.sliderTitle
			{
				font-size: 2rem;
    			font-weight: 700;
    			letter-spacing: -0.04rem;
    			text-transform: none;
				margin-bottom: 0.5rem;
    			line-height: 1.2;
				padding-top: 60px;
			}
			.sliderComm
			{
				font-size: 1.2rem;
				margin-top: 0;
   				margin-bottom: 1rem;
			}
			.sliderBtnBox
			{
				display: flex;
				justify-content: space-between;
				width:60%;
			}
				.sliderBtn
				{
					border: 1px solid #ffffff;
					color: #FFF;
					letter-spacing: 0.03rem;
					background: none;
					text-transform: uppercase;
					line-height: 1.7;
					width: 240px;
					border-radius: 15px;
					padding: 10px 10px 10px 10px;
					font-size: 1rem;
					font-weight: 400;
					display: flex;
					justify-content: center;
				}
				.sliderBtn:hover
				{
					opacity: 50%;
				}
				#sliderBtnWhiteArrow
				{
					background-image: url(pics/logo/right_arrow_icon.png);
					background-position: center;
					background-repeat: no-repeat;
					background-size: contain;
					z-index: 5;
					width: 1rem;
					height: 1rem;
					padding-top: 9px;
					padding-left: 3px;
				}
				
			.sliderTirets
			{
				display:flex;
				justify-content: flex-start;
				max-width: 240px;
				font-weight: bold;
				font-size: 20pt;
				padding-top: 5px;
			}
				.btnTransparent
				{
					opacity: 50%;
					border: none;
					background: none;
					font-weight: bold;
					font-size: 20pt;
					color: #FFF;
				}
				.btnTransparent:hover
				{
					opacity: 100%;
				}	

	#sliderChevron
	{
		width: 100%;
		height:100%;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	#sliderNextWhiteArrow
	{
		background-color: transparent;
		background-image: url(pics/logo/right_arrow_icon.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		z-index: 6;
		width: 2rem;
		height: 2rem;
		opacity: 50%;
	}
	#sliderNextWhiteArrow:hover
	{
		opacity: 100%;
	}


/*indexActualites*/
#actualites
{
	display:flex;
	flex-direction: column;
	width:100%;
	background-color: white;	
	align-items: center;
}
	.sectionTitle
	{
		width: 240px;
		height: 9vh;
		display:flex;
		margin: auto;
		justify-content: space-around;
		font-family: "Roboto", sans-serif;
		font-size: 1.5rem;
		font-weight: thin;
		color: #857f79;
		text-transform: uppercase;
		align-items: center;
	}
	.indexActuContainer
	{
		display:flex;	
		flex-wrap: wrap;	
		justify-content: space-around;
		background-color: white;
		width: 100%;
		margin-bottom: 4vh;
	}
		.indexActuItem
		{
			min-width:240px;
			width:50%;
			height:100%;
			min-height:20vh;
			display:flex;
			flex-wrap: wrap;
			justify-content: space-around;
			margin-bottom: 4vh;
		}
			.indexActuItemImg
			{
				width:40%;
				min-width:300px;
				height: 100%;
				max-height: 100%;
				border-radius: 10px;				
			}
			.indexActuItemTextShell
			{
				width: 60%;
				height: 100%;
				min-height: 20vh;
				display:flex;
				flex-direction: column;
				justify-content: space-between;
			}
				.indexActuItemTitle
				{
					font-family: "Roboto", sans-serif;
					font-size: 1.5rem;
					font-weight: thin;
					color: #857f79;
					text-transform: uppercase;
				}
				.indexActuItemPublishDate
				{
					font-family: "Roboto", sans-serif;
					font-size: 1rem;
					font-weight: thin;
					color: #857f79;
					text-transform: uppercase;
				}
				.indexActuItemComm
				{
					font-family: "Roboto", sans-serif;
					font-size: 1rem;
					font-weight: thin;
					color: #857f79;
				}
				.indexActuItemTextShell a
				{
					font-family: "Roboto", sans-serif;
					font-size: 1rem;
					font-weight: thin;
					color:#33d4bb;				
				}
				.indexActuItemTextShell a:hover
				{
					color: #5d5955;
				}

/* indexVignettes */

#indexQuatreVignettesContainer
{
	width:100%;
	min-width: 240px;
	display:flex;
	flex-wrap:wrap;
	background-color: rgb(255, 255, 255);
	padding-top: 102px;
}
	.indexVignette
	{
		width:25%;
		min-width: 240px;
		height: 45vh;
		display: flex;
		flex-direction: column;
		background-color: white;
		color: grey;
	}
	.indexVignette:hover
	{
		background: linear-gradient(180deg, hsla(0, 0%, 22%, 1) 0%, hsla(0, 0%, 22%, 1) 20%, rgba(255,255,255,1) 100%);
		color: white;
	}
	.indexVignette:hover .indexVignettePic
	{
		filter: grayscale(100%);
		transform: translate(0, 10px);
		transition: all .3s ease-out;
	}
		.indexVignetteBordSup
		{
			width: 100%;
			height: 25%;
			background-color: transparent;
			display: flex;			
		}				
			.indexVignetteLogoCadre
			{
				width:20%;
				height:100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
				.indexVignetteLogo
				{
					width:40%;
					height:40%;
					background-position: center;
					background-repeat: no-repeat;
					background-color: transparent;
					background-size: contain;
					padding:10px;
				}
			.indexVignetteTextCadre
			{
				width:80%;
				height:100%;
				display: flex;
				align-items: center;
				text-align: left;
			}
				.indexVignetteText
				{
					display: flex;
					height:60%;
					width:100%;
					justify-content: space-between;
					flex-direction: column;
				}
					.indexVignetteTitre
					{
						font-size: 1.25rem;
						text-transform: uppercase;
					}					
					.indexVignetteDescr
					{
						font-size: 0.9rem;											
					}
		.indexVignettePic
		{
			width: 90%;
			height: 75%;
			background-position: center;
			background-repeat: no-repeat;
			background-color: transparent;
			background-size: cover;
			margin: auto;
			border-radius: 10px;
			margin-bottom: 5%;
		}
		/*.indexVignettePic:hover
		{
			filter: grayscale(100%);
			transform: translate(0, 10px);
			transition: all .3s ease-out;
		}*/

/* ---- ACTUALITES ----*/

#actuHeadline
{
	padding-top: 102px;
}
#actuHeadline2 /*pour le chanhgement de titre dans admin/actualites*/
{
	padding-top: 15px;
}

	.actuTitle
	{
		padding:25px 30px 25px 30px;
		background:white;
	}
		.actuTitle1
		{
			color:#3bd7da;
			font-size: 1.8rem;
			font-weight: 300;
			font-stretch: condensed;
			text-transform: uppercase;
		}
		.actuDate
		{
			text-transform: uppercase;
			color: #c2bcb7;
			font-size: 1rem;
			font-weight: 300;
		}
#actuContent
{
	background-color: #e7e4e2;
	width:100%;
	padding: 20px 30px 20px 30px;
	box-sizing: border-box;
}
#actuContent h2
{
	color:#3bd7da;
}
#actuContent h5
{
	color: #a9a29a !important;
	text-transform: uppercase;
	font-size: 1.25rem;
	font-weight: 500;
    line-height: 1.2;
	display: block;
    margin-block-start: 1.67em;
    margin-block-end: 1.67em;
}
	.actuContainer1
	{
		background-color: white;
		padding: 20px 20px 20px 20px;
		border-radius: 10px;
		font-family: "Roboto", sans-serif;
		font-size: 0.95rem;
		font-weight: 300;
		line-height: 1.5;
		color: #857f79;
		text-align: left;
		letter-spacing: 0.01rem;
		height: auto;
	}
	.actuContainer h2::before
	{
		content: '\F105';
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		font-style: normal;
		font-variant: normal;
		margin: 0px 10px 0px 0px;
		text-decoration: none;
		color: #cecac5;
	}
	.actuContainer1:after 
	{
		content: "";
		display: table;
		clear: both;
	}
	.actuContainer1 a
	{
		color: #857f79;
    	text-decoration: none;
    	background-color: transparent;
		border-bottom: 1px solid #e7e4e2;
	}
	.actuContainer1 a::after
	{
		content: '\F35D';
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		font-style: normal;
		margin: 0px 0px 0px 5px;
		text-decoration: none;
		color: #cecac5;
	}
	.actuContainer1 em
	{
		color: #3bd7da;
		text-transform: uppercase;
		font-weight: 500;
    	line-height: 1.2;
		font-size: 1.2rem;
	}
	.actuContainer1 em::before
	{
		content: '\F105';
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		font-style: normal;
		font-variant: normal;
		margin: 0px 10px 0px 0px;
		text-decoration: none;
		color: #cecac5;
	}
		.actuImage
		{
			width: 35%;
			height: 40vh;
			background-size: cover;
			background-repeat: no-repeat;
			float:right;
			margin-left: 40px;
			margin-bottom: 40px;
			border-radius: 15px;
		}

/*---- ACCES FORM ---- A effacer une fois que le site sera fini --- */

#accessBG
{
	background-image:url('pics/bg/part/accueil/temp/cb48ea2e-9854-45c6-9f86-ea3b9732a828.webp');
	width:100%;
	height:100vh;
	background-size:cover;
	background-position: 50%;		
}

#accessForm
{
	width:80%;
	height:50vh;
	margin:auto;
	background-color:rgba(255,255,255,0.8);
	display:flex;
	flex-direction:column;
	justify-content:space-around;
	position: relative;
	top:25vh;
}
	#accessFields
	{
		display:flex;
		flex-direction:column;
		justify-content:space-around;
		max-width:500px;
		min-width:240px;
		padding-left:5%;
		padding-top:5%;
		margin:auto;
	}
		.formField
		{
			max-width:500px;
			min-width:220px;
			display: flex;
			justify-content:space-between;
		}

/*--- PORTAL ---*/

#portal
{
	background-image:url('pics/bg/full/fantasy-2861107_1920.jpg');
	background-size:cover;
	background-repeat:no-repeat;
	height:100vh;
}
	.mainWrapper
	{
		background-color:rgba(255,255,255,0.8);
		width:60%;
		height:50vh;
		margin-top:200px;
		margin:auto;
		min-width:200px;
		padding:20px;
	}
	
/* formLogin */

#formLoginBackground
{
	background-color: #f4efe9;
}
	#formLoginContainer
	{
		height: 750px;
		width:100%;
		display:flex;
		flex-wrap: wrap;
		justify-content:space-around;
		padding:20px 30px;
		box-sizing: border-box;
	}
		.formLoginHalfLeft
		{
			width:50%;
			height:440px;
			background-color: transparent;
			display:flex;
			justify-content: flex-start;					
		}

		.formLoginHalfRight
		{
			width:50%;
			height:440px;
			background-color: transparent;
			display:flex;
			justify-content: flex-end;
		}
			.formLoginHalfChild
			{
				width:98%;
				height:100%;
				background-color: white;
				border-radius: 10px;						
			}
				.formLoginTitle
				{
					background-color: #857f79;
					color: white;
					padding: 0.75rem 1.25rem;
					border-top-left-radius:     10px;
					border-top-right-radius:    10px;
				}
				.formLoginContent
				{
					padding:25px;
					color:#857f79!important;
				}
					.formLoginChoices
					{
						display:flex;
						width: 100%;
						justify-content:space-around;
						margin:auto;
						padding-top: 20px;
					}

		#formLoginAstuces
		{
			margin-top: 20px;
			width:100%;
			height:250px;
			background-color: white;
			border-radius: 10px;
		}

/* COMPTE */

.linenBackground
{
	background-color: #f4efe9;
}
	.mainContainer
	{
		width:100%;
		display:flex;
		flex-wrap: wrap;
		justify-content:space-around;
		padding:20px 30px;
		box-sizing: border-box;
	}
		.fullLine
		{
			margin-top: 20px;
			width:100%;
			min-height: 50px;
		}
			.turqoiseButton
			{
				background-color: #3bd7da;
				color: white;
				border-radius: 10px;
				padding: 10px;
				min-width: 240px;
				min-height: 48px;
				margin-right: 8px;
			}
			.whiteButton
			{
				background-color: white;
				color: #a9a29a;
				border-radius: 10px;
				padding: 10px;
				min-width: 240px;
				min-height: 48px;
				margin-right: 8px;
			}
			.whiteButton:hover
			{
				background-color: #857f79;
				color: white;
			}
			.greyButton
			{
				background-color: #92897e;
				color: white;
				border-radius: 10px;
				padding: 10px;
				min-width: 240px;
				min-height: 48px;
				margin-right: 8px;
			}
			.greyOnWhite
			{
				background-color: white;
				color: #92897e;
			}
			.roundBorder
			{
				border-radius: 10px;
			}
		
		
/* FORM actu */

#formActuContainer
{
	width: 50%;
	margin: auto;
	position:relative;
	top:150px;
}
	#formActu
	{
		margin-bottom: 300px;
	}


/*------ INSCIPTION ----*/

#inscriptionBG
{
	background-image:url('pics/bg/part/accueil/temp/trolley-2203329_1920_pixabay_PublicCo.jpg');
	width:100%;
	height:100vh;
	background-size:cover;
}

#inscriptionForm
{
	width:80%;
	height:80vh;
	margin:auto;
	background-color:rgba(255,255,255,0.8);
	display:flex;
	flex-direction:column;
	justify-content:space-around;
}
/*--- COMPTE ---*/

#mediumNav
{
	height: 80px;
	width: 100%;
	background-color: #ebe4dc;
	color: #9d958c;
	display:flex;
	justify-content:center;
	flex-direction: column;
}
	#mediumNavCenter
	{
		display: flex;		
		width: 40%;
		margin: auto;
		justify-content: space-around;
	}
	#mediumNavCenter a
	{
		color: #9d958c;
	}
	#mediumNavCenter a:hover
	{
		color: #857f79;
		font-weight: 600;
	}

/*---MENU ADMIN---*/

#menuAdmin
{
	width: 100%;
	height: 55px;
	background-color: #ffffff;
	color: #9d958c;
	display:flex;
	flex-direction: column;
	justify-content: space-around;	
}
	#menuAdminLine
	{
		display: flex;		
		width: 100%;
	}
		.menuDropbtnAdmin
		{
			background-color:transparent;
			display:flex;
			flex-direction:column;
			justify-content:center;
			text-align:left;
			color: #6d6a6d;
			padding: 16px;
			font-size: 1em;
			border: none;
			cursor: pointer;
			position: relative;
			display: flex;
			border-radius:2px;
		}
		.menuDropbtnAdmin:hover
		{
			text-decoration:none;
			color:black;
		}	
			.menuDropbtnAdmin a
			{
				color: #6d6a6d;
				text-decoration:none;
			}
			.menuDropbtnAdmin a:hover
			{
				color:black;
			}			
			.menuDropbtnAdmin:hover .menuDropdown-content 
			{
				display: block;
			}
			.menuDropbtnAdmin:hover .menuDropbtn 
			{
				background-color: #3e8e41;
			}	
			
/*---HEADER ADMIN---*/
#headerAdmin
{
	background-color: #33d3c7;
	width: 100%;
	color: white;
	height: 57px;
	display: flex;
}
	#headerAdminColipain
	{		
		color:white;
		text-decoration:none;
	}
	
	#headerAdminLeft
	{
		width: 50%;
		height: 100%;
		display: flex;
		align-items: center;
	}
	#logoWhiteTree
	{
		width: 30px;
		height: 30px;
		margin: 3px 0px 0px 10px;
		background-image: url('pics/logo/logo-white.svg');
		margin-left: 30px;
		margin-right: 25px;
	}
	#headerAdminColipain
	{
		font-size:1.3rem; 
		position:relative; 
		top:5px;
	}
	#headerAdminRight
	{
		width: 50%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-right: 30px;
	}
		#adminHeaderUserDropBtn
		{
			background-color:transparent;
			display:flex;
			color: lightgrey;
			padding: 16px;
			font-size: 1em;
			border: none;
			cursor: pointer;
			position: relative;			
		}
		#adminHeaderAvatar
		{
			width: 30px;
			height: 30px;
			background-size:cover;
			background-position:center;
			border-radius: 50%;
			margin-top:10px;
		}
		#menuMail
		{
			color:white;
			margin-left: 20px;
		}
		#menuWrite
		{
			color:white;
			margin-left: 20px;
		}
		
/*---ADMIN---*/
.fullWhiteSmoke
{
	background-color: #f1f0ee;
	width: 100%;
	min-height: 100vh;
}
	.adminContent
	{
		width:98%;
		padding-top: 30px;
		margin:auto;
	}
		.adminTitle
		{
			font-size: 1.5rem;
			font-weight: 200;
			color: #6c6a6b;
			margin-bottom: 30px;
			height: 60px;
		}
		.adminAcceuilDashboard
		{
			display: flex;
			justify-content: space-between;
			margin-bottom: 15px;
			height:235px;
			width:100%;
		}
			.adminAcceuilDashboardItemL
			{
				background-color: white;
				width:90%;
				height:100%;
				border-radius: 5px;				
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				margin-right:30px;
			}
			.adminAcceuilDashboardItemR
			{
				background-color: white;
				width:90%;
				height:100%;
				border-radius: 5px;				
				display: flex;
				flex-direction: column;
				justify-content: space-around;
			}
				.adminAcceuilDashboardItemTitle
				{
					font-size: 1rem;
					font-weight: 200;
					color: #b2b2b3;
					margin-left: 15px;					
				}
				.adminAcceuilDashboardItemLine
				{
					display:flex;
					justify-content: space-between;
					font-size: 1rem;
				}	
					.adminAcceuilDashboardItemRef
					{
						color:#6c6a6b;
						font-weight: 200;
						margin-left: 15px;					
					}
					.adminAcceuilDashboardItemLineValueTurquoise
					{
						background-color:#33d3c7;
						color:white;
						font-weight: 500;
						height: 21px;
						border-radius: 5px;
						padding:5px 5px 0px 5px;
						margin-right: 15px;
					}
					.adminAcceuilDashboardItemLineValueRed
					{
						background-color:#dc3547;
						color:white;
						font-weight: 500;
						height: 21px;
						border-radius: 5px;
						padding:5px 5px 0px 5px;
						margin-right: 15px;
					}
					.adminAcceuilDashboardItemLineValueYellow
					{
						background-color:#fec107;
						color:white;
						font-weight: 500;
						height: 21px;
						border-radius: 5px;
						padding:5px 5px 0px 5px;
						margin-right: 15px;
					}
					.adminAcceuilDashboardItemLineValueGrey
					{
						background-color:#6c6a6b;
						color:white;
						font-weight: 500;
						height: 21px;
						border-radius: 5px;
						padding:5px 5px 0px 5px;
						margin-right: 15px;
					}
					.adminAcceuilDashboardItemLineValueGreen
					{
						background-color:#27a844;
						color:white;
						font-weight: 500;
						height: 21px;
						border-radius: 5px;
						padding:5px 5px 0px 5px;
						margin-right: 15px;
					}	
					.adminAcceuilDashboardItemLineValueWhite
					{
						color:#6c6a6b;
						font-weight: 200;
						height: 21px;
						border-radius: 5px;
						padding:5px 5px 0px 5px;
						margin-right: 15px;
					}	

/*Admin: Mes données*/

.adminFormMesDonneesTable
{
	width: 100%;
	
}
	.adminFormMesDonneesTableTitle
	{
		font-size: 1rem;
		font-weight: 200;
		color: #6c6a6b;
		width: 30%;				
	}
	.adminFormMesDonneesTableInput
	{
		width: 60%;
	}
		.adminFormMesDonneesTableInput input, .adminFormMesDonneesTableInput select, .adminFormMesDonneesTableInput
		{
			min-width: 100%;
			height: 30px;			
			border-radius: 5px;
			padding: 0px 5px;
			font-size: 1rem;
			font-weight: 200;
			color: #6c6a6b;
		}
		.adminFormMesDonneesTableInput input:focus
		{
			outline: none;
			border: 1px solid #33d3c7;
		}
		.adminFormMesDonneesTableInput input:disabled
		{
			background-color: #f2f2f2;
		}	
			.radio
			{
				display: flex;
				justify-content: flex-start;
				width: 150px;
			}
				.radio input
				{
					width: 20px;
					height: 20px;
					margin-right: -50px;
				}
				.radio label
				{
					font-size: 1rem;
					font-weight: 200;
					color: #6c6a6b;
				}
		.whiteOnGreenBtn
		{
			background-color: #27a844;
			color: white;
			font-size: 1.5rem;
			font-weight: 300;
			border-radius: 5px;
			border-color: #27a844;
			border-width: 3px;
			padding: 10px 20px;
			margin-top: 10px;
			cursor: pointer;
			margin:auto;
			white-space: nowrap;
		}
			.whiteOnGreenBtn:hover
			{
				background-color: #1e7e34;
			}
		.mediumWhiteOnPurpleBtn
		{
			background-color: #a16ae8;
			color: white !important;
			font-size: 1rem;
			font-weight: 300;
			border-radius: 5px;
			border-color: #a16ae8;
			border-width: 3px;
			padding: 10px 20px;
			margin-top: 10px;
			cursor: pointer;
			margin:auto;
			white-space: nowrap;
		}
			.mediumWhiteOnPurpleBtn:hover
			{
				background-color: white;
				color: #a16ae8 !important;
			}
		.mediumWhiteOnGreenBtn
		{
			background-color: #27a844;
			color: white;
			font-size: 1rem;
			font-weight: 300;
			border-radius: 5px;
			border-color: #27a844;
			border-width: 3px;
			padding: 10px 20px;
			margin-top: 10px;
			cursor: pointer;
			margin:auto;
			white-space: nowrap;
		}
			.meidiumWhiteOnGreenBtn:hover
			{
				background-color: #1e7e34;
			}
		.greyOnWhite
		{
			background-color: white;
			color: #6c6a6b;
			font-size: 1.5rem;
			font-weight: 300;
			border-radius: 5px;
			border-color: #6c6a6b;
			border-width: 3px;
			padding: 10px 20px;
			margin-top: 10px;
			cursor: pointer;
			margin:auto;
			white-space: nowrap;
		}
			.greyOnWhite:hover
			{
				background-color: #f2f2f2;
			}
		.mediumGreyOnWhite
		{
			background-color: white;
			color: #6c6a6b;
			font-size: 1rem;
			font-weight: 300;
			border-radius: 5px;
			border-color: #6c6a6b;
			border-width: 3px;
			padding: 10px 20px;
			margin-top: 10px;
			cursor: pointer;
			margin:auto;
			white-space: nowrap;
		}
			.mediumGreyOnWhite:hover
			{
				background-color: #f2f2f2;
			}
		.whiteOnYellowBtn
		{
			background-color: #fec107;
			color: white;
			font-size: 1.5rem;
			font-weight: 300;
			border-radius: 5px;
			border-color: #fec107;
			border-width: 3px;
			padding: 10px 20px;
			margin-top: 10px;
			cursor: pointer;
			margin:auto;
			white-space: nowrap;
		}
			.whiteOnYellowBtn:hover
			{
				background-color: #d39e00;
			}
		.mediumWhiteOnYellowBtn
		{
			background-color: #fec107;
			color: white;
			font-size: 1rem;
			font-weight: 300;
			border-radius: 5px;
			border: solid 2px #fec107;			
			padding: 10px 20px;
			margin-top: 10px;
			cursor: pointer;
			margin:auto;
			white-space: nowrap;
		}
			.mediumWhiteOnYellowBtn:hover
			{
				background-color: #d39e00;
			}
		.mediumWhiteOnRedBtn
		{
			background-color: #e74c3c;
			color: white;
			font-size: 1rem;
			font-weight: 300;
			border-radius: 5px;
			border: solid 2px #e74c3c;			
			padding: 10px 20px;
			margin-top: 10px;
			cursor: pointer;
			margin:auto;
			white-space: nowrap;
		}
			.mediumWhiteOnRedBtn:hover
			{
				background-color: #c0392b;
			}
		.whiteOnTurquoiseBtn
		{
			background-color: #33d3c7;
			color: white;
			font-size: 1.5rem;
			font-weight: 300;
			border-radius: 5px;
			border-color: #33d3c7;
			border-width: 3px;
			padding: 10px 20px;
			margin-top: 10px;
			cursor: pointer;
			margin:auto;
			white-space: nowrap;
		}
			.whiteOnTurquoiseBtn:hover
			{
				background-color: #1ea99a;
			}
		.mediumWhiteOnTurquoiseBtn
		{
			background-color: #33d3c7;
			color: white;
			font-size: 1rem;
			font-weight: 300;
			border-radius: 5px;
			border-color: #33d3c7;
			border-width: 3px;
			padding: 10px 20px;
			margin-top: 10px;
			cursor: pointer;
			margin:auto;
			white-space: nowrap;
		}
			.mediumWhiteOnTurquoiseBtn:hover
			{
				background-color: #1ea99a;
			}
		.whiteOnRedBtn
		{
			background-color: #e74c3c;
			color: white;
			font-size: 1.5rem;
			font-weight: 300;
			border-radius: 5px;
			border-color: #e74c3c;
			border-width: 3px;
			padding: 10px 20px;
			margin-top: 10px;
			cursor: pointer;
			margin:auto;
			white-space: nowrap;
		}
			.whiteOnRedBtn:hover
			{
				background-color: #b03a2e;
			}
		.mediumWhiteOnRedBtn
		{
			background-color: #e74c3c;
			color: white;
			font-size: 1rem;
			font-weight: 300;
			border-radius: 5px;
			border-color: #e74c3c;
			border-width: 3px;
			padding: 10px 20px;
			margin-top: 10px;
			cursor: pointer;
			margin:auto;
			white-space: nowrap;
		}
			.mediumWhiteOnRedBtn:hover
			{
				background-color: #b03a2e;
			}
		.whiteOnGreyBtn
		{
			background-color: hsla(28, 8%, 63%, 1);
			color: white;
			font-size: 1.5rem;
			font-weight: 300;
			border-radius: 5px;
			border-color: hsla(28, 8%, 63%, 1);
			border-width: 3px;
			padding: 10px 20px;
			margin-top: 10px;
			cursor: pointer;
			margin:auto;
			white-space: nowrap;
		}
			.whiteOnGreyBtn:hover
			{
				background-color: hsla(28, 8%, 53%, 1);
			}
		.mediumWhiteOnGreyBtn
		{
			background-color: hsla(28, 8%, 63%, 1);
			color: white;
			font-size: 1rem;
			font-weight: 300;
			border-radius: 5px;
			border-color: hsla(28, 8%, 63%, 1);
			border-width: 3px;
			padding: 10px 20px;
			margin-top: 10px;
			cursor: pointer;
			margin:auto;
			white-space: nowrap;
		}
			.mediumWhiteOnGreyBtn:hover
			{
				background-color: hsla(28, 8%, 53%, 1);
			}
		.whiteOnFramboiseBtn
		{
			background-color: hsla(345, 88%, 61%, 1);
			color: white;
			font-size: 1.5rem;
			font-weight: 300;
			border-radius: 5px;
			border-color: hsla(345, 88%, 61%, 1);
			border-width: 3px;
			padding: 10px 20px;
			margin-top: 10px;
			cursor: pointer;
			margin:auto;
			white-space: nowrap;
		}		
			.whiteOnFramboiseBtn:hover
			{
				background-color: hsla(345, 88%, 61%, 0.9);
			}
		.greyOnGreyBtn
		{
			background-color: #e8e4e1;
			color: #847f79;
			font-size: 1.5rem;
			font-weight: 300;
			border-radius: 5px;			
			border-width: 3px;
			padding: 10px 20px;			
			cursor: pointer;
			margin:auto;
			white-space: nowrap;
		}
			.greyOnGreyBtn:hover
			{				
				/*color: turquoise;*/
				color:#3bd7da;
			}
		.mediumGreyOnGreyBtn
		{
			background-color: #e8e4e1;
			color: #847f79;
			font-size: 1rem;
			font-weight: 300;
			border-radius: 5px;			
			border-width: 3px;
			padding: 10px 20px;			
			cursor: pointer;
			margin:auto;
			white-space: nowrap;
		}
			.mediumGreyOnGreyBtn:hover
			{				
				color:#3bd7da;
			}
		.mediumWhiteOnFramboiseBtn
		{
			background-color: hsla(345, 88%, 61%, 1);
			color: white;
			font-size: 1rem;
			font-weight: 300;
			border-radius: 5px;
			border-color: hsla(345, 88%, 61%, 1);
			border-width: 3px;
			padding: 10px 20px;
			margin-top: 10px;
			cursor: pointer;
			margin:auto;
			white-space: nowrap;
		}
			.mediumWhiteOnFramboiseBtn:hover
			{
				background-color: hsla(345, 88%, 61%, 0.9);
			}
		.textFramboise
		{
			color: hsla(345, 88%, 61%, 1) !important;
		}
	#adminMesDonneesValidate
	{
		margin: auto;
	}
		input.checkbox30px
		{
			width: 30px;
			height: 30px;
			border:1px solid lightgray;
		}
	.roundPic180px
	{
		width: 180px;
		height: 180px;
		border-radius: 50%;
		background-position: 50%;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.errorMessage
	{
		color: red;
		font-size: 1rem;
		font-weight: 200;
	}

	.successMessage
	{
		color: green;
		font-size: 1rem;
		font-weight: 200;
	}

/* ADMIN CALENDRIER*/
.agendaShell
{
	width: 100%;
	display: flex;
}
	.agendaCorpus
	{
		width:80%;
		min-width: 240px;
		padding-right: 30px;
	}
	#agendaFiltres
	{
		width:20%;
		min-width: 240px;
		line-height: 1em;		
	}
		.agendaTopStrip
		{
			display: flex;
			justify-content: space-between;
		}
			.agendaFIltreCheckbox
			{
				height:20px;
			}

/* admin: holidays (congés) */
.titleAndButtons
{
	display:flex; 
	justify-content:space-between;
}

.adminTable
{
	width:100%;
	background-color: white;
	border-radius: 5px;
	color:grey;
}
	.adminTable td
	{
		text-align: left;
		padding-left:40px;
	}
	.greyLine
	{
		background-color: #f1f0ee;
	}

/* admin: outils IT/requêtes SQL */
#sqlRequestCore
{
	width:100%;
	display:flex;
}
	.width33percent
	{
		width:33.3%;
	}

/* admin: actualités */
.greyLink
{
	color:grey;
}
	.greyLink:hover
	{
		color: #33d3c7;
	}
	.greyLink:active
	{
		color: #33d3c7;
	}
	.greyLink:visited
	{
		color: grey;
	}

.bigTextArea
{
	width:100%;
	height: 250px;
}
.mediumTextArea
{
	width:50%;
	height: 150px;
}
.actuPicListContainer
{
	width:100%;
	display:flex;
	flex-wrap:wrap;
}
	.actuPicList
	{
		width:15%; 
		height:15vh; 
		background-size:contain; 
		background-repeat:no-repeat;
	}

/*COURS PRESENTATION*/
.logoActivity
{
	width:25px;
	height:25px;
	background-size:contain;
	background-repeat:no-repeat;
}
.coursTitle1
{
	color:hsla(355, 79%, 65%, 1);
	font-size: 1.8rem;
	font-weight: 300;
	font-stretch: condensed;
	text-transform: uppercase;
	display:flex;
}
.coursContainer1
{
	background-color: transparent;
	border-radius: 10px;
	font-family: "Roboto", sans-serif;
	font-size: 0.95rem;
	font-weight: 300;
	line-height: 1.5;
	color: #857f79;
	text-align: left;
	letter-spacing: 0.01rem;
	height: auto;
	display: flex;
}
	.coursSliderWindow
	{
		height:45vh;
		width:40%;
		min-width: 200px;
		overflow: hidden;
		flex-wrap: nowrap;
		border-radius: 10px;
		background-color: transparent;
		z-index: 3;
	}
		.coursSliderLanguette
		{
			height:100%;
			width:500%;
			display:flex;
			flex-wrap: nowrap;
			z-index: 2;

			animation-name: sliderAnimation;
			animation-duration: 40s;
			animation-iteration-count: infinite;
		}
		.coursSliderLanguette:hover
		{
			animation-play-state: paused;
		}
			.coursSliderImg
			{
				height:100%;
				width:20%;
				background-size: cover;
			}
	.coursContent
	{		
		width:60%;
		padding: 0px 0px 0px 30px;
		box-sizing: border-box;
	}
	.coursContent h3
	{
		color:hsla(355, 79%, 65%, 1);
	}
	.coursContent h5
	{
		text-transform: uppercase;
		font-size: 1.25rem;
		font-weight: 500;
		line-height: 1.2;
		display: block;
		margin-block-start: 1.67em;
		margin-block-end: 1.67em;
	}

	.coursContent a
	{
		color: #857f79;
		text-decoration: none;
	}
	.coursContent a:hover
	{
		color: #33d3c7;
	}

	.coursContent p
	{
		color: #857f79;
	}

	.autresActusContainer
	{
		width:100%;
		display:flex;
		gap:25px;
		justify-content: space-evenly;
		flex-wrap:wrap;
		margin-bottom: 2em;
		padding-left: 30px;
		padding-right: 30px;
		box-sizing: border-box;
		overflow: auto;
	}
		.autresActusElement
		{
			width:20%;
			min-width:200px;
			box-sizing: border-box;
			display:flex;
			flex-direction: column;
			flex-grow: 1;
			justify-content:space-between;
			font-size: 1rem !important;
			font-weight: 300 !important;
			color:grey;			
		}
		.autresActusElement p
		{
			font-size: 0.8rem !important;			
		}
		.autresActusElement strong
		{
			font-size: 0.8rem !important;
		}
		.autresActusElement a
		{
			font-size: 0.8rem !important;
			color:grey;
		}
		.autresActusElement h6
		{
			font-size: 0.9rem !important;
			color:hsla(355, 79%, 65%, 1) !important;
			text-transform: uppercase;
		}
			.autresActusPic
			{
				width:100%;
				min-width: 200px;
				min-height: 100px;
				aspect-ratio: 16/9;
				background-color: black;
				background-size:cover;
				background-repeat:no-repeat;
				background-position: center;
				border-radius: 10px;
				margin-bottom: 10px;				
			}
			.autresActusContent
			{
				max-height: 100px;
				min-height: 100px;
				overflow: hidden;
				margin-bottom: 5px;
			}

.presentationVideos
{
	display:flex;
	height:60vh;
	flex-grow: 1;
}
	.presentationEmbeddedVideo
	{
		aspect-ratio: 16/9;
		height:100%;
	}
	.presentationVideoRight
	{
		height:100%;
		display:flex;		
		flex-direction:column;
		gap:10px;
		color:white;
		flex-grow: 1;
		padding-right: 50px;
		padding-left: 50px;
		box-sizing: border-box;
		font-weight: 200;
		overflow:auto;
	}
	
		.presentationVideoRightElement
		{
			min-height:50px;
			height: 100px;
			min-width: 200px;
			width:auto;
			display:flex;			
			flex-wrap: wrap;
			gap	: 25px;			
		}
			.presentationEmbeddedVideoSmall
			{
				aspect-ratio: 16/9;
				width:180px;
				border-radius: 5px;
			}
			.presentationEmbeddedVideoSmall img
			{
				width:100%;
				height:100%;
				border-radius: 5px;
				object-fit:contain;
			}
			.presentationVideoRightElementText
			{
				display:flex;
				flex-direction:column;
				justify-content:space-around;
			}
			.presentationVideoRightElementText p
			{
				color:rgba(255,255,255,0.3);
			}
			.presentationCoursLien
			{
				color:white;
				text-decoration: none;
				font-weight: 300;
			}
.topDecalage
{
	padding-top: 2em;	
}
.coursListContainer
{
	box-sizing: border-box;
	width: auto;	
	padding:30px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	background-color: hsla(33, 33%, 94%, 1);
}
	.coursListElement
	{
		min-width: 200px;
		width:24%;
		box-sizing: border-box;
		display:flex;
		flex-direction:column;
		justify-content:space-between;
		font-size: 1rem !important;
		font-weight: 300 !important;
		background-color: white;
		border-radius: 10px;	
		margin-bottom: 30px;
		cursor: pointer;
	}
	.coursListElement h3
	{
		padding: 20px 20px 0 20px;	
	}
	.coursListElementImg
	{
		width:100%;
		min-width: 200px;
		min-height: 100px;
		aspect-ratio: 16/9;
		background-color: white;
		background-size:cover;
		background-repeat:no-repeat;
		background-position: center;
		border-radius: 10px 10px 0 0;
	}
	.coursListElementImg:hover
	{
		opacity: 0.8;
	}
	.coursListElementText
	{
		display:flex;
		flex-direction:column;
		justify-content:space-between;
		color: hsla(36, 2%, 51%, 1);
		padding:20px;
	}

/*---- Tarification---*/
#btnCreerRegle
{
	margin: 0 0 0.8em 0.8em;
}

.rule td
{
	padding:0 2em 0 2em;
}

/*PAGE USERS*/

#dashboard-3
{
	display:flex;	
	justify-content:space-between;
	flex-wrap: wrap;
	height: 5em;
	margin-bottom: 4em;
}
	.dashboard-3-Element
	{
		height: 100%;
		width: 30%;
		overflow: hidden;
		border-radius: 5px;
		display: flex;
		justify-content: space-between;
		padding: 1em 0em 1em 1em;
	}

	.dashboard-6-Element
	{
		height: 100%;
		width: 15%;
		overflow: hidden;
		border-radius: 5px;
		display: flex;
		justify-content: space-between;
		padding: 1em 0em 1em 1em;
	}
		#usersCount
		{
			background-color: hsla(176, 65%, 51%, 1);
			color: white;
		}
		#activeUsersCount
		{
			background-color: white;
			color: hsla(176, 65%, 51%, 1);
		}
		#userTotalBalance
		{
			background-color: white;
			color: hsla(0, 0%, 42%, 1);
		}
		.profileAAnalyser
		{
			background-color: rgb(220, 53, 70);
			color: white;
		}
		.entretienAEvaluer
		{
			background-color: rgb(39, 168, 68);
			color: white;
		}
	
	.dashboardSubElement
	{
		display: flex;
		flex-direction: column;
		justify-content: space-between;		
	}
	.dashboardLogo
	{
		opacity: 0.3;
		font-weight: bold;
		font-size: 5em;
		position:relative;
		left: 0.1em;
	}
.usersPageNumbers
{
	display:flex;
	/*centrer*/		
	justify-content:center;
	margin-bottom: 2em;
}
.passwordValidationIcon 
{
	display: none;
}
  .passwordValidationIcon.valid 
  {
	display: inline-block;
	color: green;
  }
  .passwordValidationIcon.invalid 
  {
	display: inline-block;
	color: red;
  }
  
.tabAvatar
{
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-size: cover;
	background-color: #33d3c7;
	margin-left:auto; 
	margin-right:auto;
}

/* PAGE SIGNUP */
.signupContainer
{
	background-color: white;
	padding: 20px 20px 20px 20px;
	border-radius: 10px;
	font-size: 0.95rem;
	font-weight: 300;
	line-height: 1.5;
	color: #857f79;
	text-align: left;
	letter-spacing: 0.01rem;
	height: 160vh;
}

.phylactere 
{
    position: absolute;
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 5px;
    padding: 5px;
    font-size: 12px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

  .invalid .phylactere {
    color: #FF0000;
  }

  .valid .phylactere {
    color: #00CC00;
  }

/* PAGE USER */
.userEditBtn
{
	display:flex;
	width: 100%;
	/*centrer*/
	justify-content:center;
	gap:10px;
	margin-bottom: 2em;
	margin-top: 1em;	
}
.userDataContainer
{
	background-color: white;
	margin: auto;
	width: 100%;
	margin-top: 1em;
	margin-bottom: 1em;
	height: 160px;
	padding:1em;
	display:flex;
	justify-content: space-between;
	box-sizing:border-box;
}
	.userData
	{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		color: hsla(36, 2%, 51%, 1);
		width: 50%;
	}
		.userData td
		{
			padding: 0.2em;
			line-height: 1;
		}

/* PAGE AGENDA */
.scheduleTable
{
	width:100%;
	background-color: white;
	border-radius: 5px;
	color:grey;
	margin-top: 1em;
	margin-bottom: 1em;
	table-layout: fixed;
}
	.scheduleTable td, .scheduleTable th
	{
		text-align: center;		
		/*table border color 1px grey*/
		border: 1px solid #e6e6e6;
	}
	
/* PAGE ACTIVITY */	
.coursScheduleContainer
{
	width:100%;
	height: 10vh;
	display:flex;
	justify-content:flex-start;
	background-color: #e8e4e1;
	box-sizing: border-box;
}
	#coursScheduleContainerClock
	{
		width:5%;
		height:100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color:white;
	}
	.coursScheduleContainerText
	{
		/*centrer le texte en verticale et en horizontal*/
		width:auto;
		height:100%;
		display:flex;
		justify-content:center;
		align-items: center;
		background-color: #e8e4e1;
		color: #747270;
		padding-left: 2em;
		padding-right: 2em;
	}
	.coursScheduleContainerText:hover
	{
		background-color: #cfcac6;
		color:#747270;
		cursor: pointer;
	}
	.coursScheduleContainerTextSelected
	{
		background-color: white;
		width:auto;
		height:100%;
		display:flex;
		justify-content:center;
		align-items: center;
		padding-left: 2em;
		padding-right: 2em;
	}

.activityFiche
{
	width:100%;	
	background-color: #f4efe9;
	padding: 30px 25px 30px 25px;
	display: flex;
	box-sizing: border-box;
	flex-wrap: wrap;
	box-sizing: border-box;
}
	.activityFicheContainer1
	{
		display:flex;
		gap:30px;
		width:100%;
	}
		.activityPicture
		{
			min-width: 30%;
			height: 40vh;
			border-radius: 15px;
			background-size: cover;
		}
	.activityFicheContainer12
	{
		color:#847f79;
		max-height: 40vh;		
	}
		.activityFicheContainer12 table tr,
		.activityFicheContainer12 table td 
		{
			max-height: 15px;
		}

	
	.activityFicheContainer2
	{
		width:100%;
		display: flex;
		flex-direction: column;
		gap: 30px;
	}
	.activityFicheContainer22
	{
		background-color: white;
		border-radius: 15px;
		width:100%;
		min-height: 22vh;
		display: flex;	
		justify-content: space-between;
		padding:25px;
		box-sizing: border-box;		
		flex-wrap: wrap;
	}
		.yearReservation
		{
			max-width: 50%;
			height:100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
			.yearReservationStatus
			{				
				color:white;
				font: 1.2em sans-serif;
				font-weight: 300;
				text-align: center;
				border-radius: 5px;
				min-width: 250px;
				display: flex;				
			}
			.yearReservationStatus:hover 
			{
				filter: brightness(80%);
			}
			
			.button {
				padding: 10px 20px;
				border: none;
				background-color: #007bff;
				color: white;
				border-radius: 5px;
				transition: transform 200ms ease-in-out; /* Durée plus longue pour la transition */
				cursor: pointer; /* Pour indiquer qu'il s'agit d'un bouton cliquable */
			}
			
			.button:active {
				animation: clickEffect 200ms ease-in-out; /* Durée plus longue pour l'animation */
			}
			
			@keyframes clickEffect {
				0% {
					transform: scale(1);
				}
				50% {
					transform: scale(0.9); /* Échelle plus prononcée pour l'enfoncement */
				}
				100% {
					transform: scale(1);
				}
			}
			
			
				.yearReservationStatusValid
				{
					height: 20px;
					border-radius: 5px 0 0 5px;
					padding:10px;
					color:white;
					text-transform: uppercase;
					border:none;
					font-size: 0.9em;
				}				
				.yearReservationStatusValid input[type="submit"] 
				{
					height:100%;		
				}
				.yearReservationStatusPrice
				{
					height:20px;
					border-radius: 0 5px 5px 0;
					background-color: #a9a29a;
					padding:10px;
				}
	#titreTarifs
	{
		margin-top: 60px;
	}

	.descriptionActivite
	{
		display: flex;
		gap: 30px;
		box-sizing: border-box;
		background-color: #f4efe9;
		margin-top: 30px;
	}
		.descriptionActiviteInfosGauche
		{
			max-width:70%;			
			display: flex;
			flex-direction: column;
			gap: 30px;
			box-sizing: border-box;
		}
		.descriptionActiviteInfosDroite
		{
			width:30%;			
			display: flex;
			flex-direction: column;
			gap: 30px;
		}
			.descriptionActiviteInfosContainer
			{
				background-color: white;
				padding: 25px;
				box-sizing: border-box;
				border-radius: 15px;
			}
				.descriptionActiviteInfosTitre
				{
					margin-bottom: 25px;
				}
				.descriptionActiviteInfosTexte
				{
					color:#847f79;
					font-size: 0.9em;
				}
			.collapse
			{
				display: none;								
			}
			a[data-toggle="collapse"] strong,
			a[data-toggle="collapse"]:visited strong,
			.selector {
				color: #7b8186; /* La couleur grise que vous souhaitez */				
			}			
			a[data-toggle="collapse"]:active strong 
			{
				color: rgba(123, 129, 134, 0.8); /* La couleur grise que vous souhaitez */
				margin-bottom: 5px;
			}
			a[data-toggle="collapse"]:hover strong			
			{
				color: #7b8186;								
			}

	.otherActivity
	{
		display: flex;
		width:30%;
		height:30%;	
	}
		.twoStagesTotal
		{
			margin-right: 1em;
		}
		.twoStageInfo
		{
			font-size: 0.9em;
			color:#a9a29a;
		}

.preview-container {
	position: relative;
	display: inline-block;
}
.preview-container img {
	max-width: 100%;
	height: auto;
}
.coordinates {
	display: block;
	margin-top: 10px;
}

/*ACTIVITIES GRID*/
#searchBar
{
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-bottom: 15px;
}
	#recherche 
	{
		height: 27px;
	}

	.availabilitiesLabels
	{
		width:30%;
		display: flex;
		justify-content: space-between;
		gap:10px;
	}		

/* PAGE VALIDER PANIER */
.panierContainer
{
	background-color: white;	
	border-radius: 10px;
	font-size: 0.95rem;
	font-weight: 300;
	line-height: 1.5;
	color: #857f79;
	text-align: left;
	letter-spacing: 0.01rem;
	width:100%;
}
	.panierTitle 
	{
		background-color: #fbf8f3;
		border-radius: 10px 10px 0 0;
		padding: 20px;
		display: flex;
		align-items: center;
		font-weight: bold;
	}

	.validationArticleLigne 
	{
		background-color: #fdf9f6;
		border-bottom: 1px solid #eee;
		min-height: 100px;
		padding:10px;
	}

		.panierArticleImage div {
			width: 50px; /* Ou la taille que vous préférez */
			height: 50px; /* Ou la taille que vous préférez */
			background-size: cover;
			background-position: center;
			border-radius: 50%; /* Pour faire l'image ronde */
		}
		.validationLineText
		{
			display:flex;
			justify-content:space-around;
			flex-direction: column;
		}
		a.collapsed {
			color:#848788;
		}

/*----pages infos pratiques-FAQ----*/
.lightGreyBG
{
	background-color: #f4efe9;
}

#navigationInfosFAQ
{
	width:100%;
	padding:30px;
	display:flex;
	justify-content:flex-start;
	/*goutière 8px entre les éléments*/
	gap:8px;
	background-color: #f4efe9;
	box-sizing: border-box;
}

#informationsInsciptions
{
	width:100%;
	box-sizing: border-box;
	background-color: white;
	padding: 30px;
	margin-bottom: 25px;
}

.marginL30px
{
	margin-left:30px;
}
.paddingB30px
{
	padding-bottom:30px;
}
.marginB30px
{
	margin-bottom:30px;
}
	.infosTitle
	{
		color:turquoise;
		font-size: 1.2rem;
		font-weight: 150;
	}
	#category37
	{
		margin: 30px;
	}
		.cms-content
		{
			font-size: 0.9rem;
			font-weight: 300;
			line-height: 1.5;
			color: #857f79;
			text-align: left;
			letter-spacing: 0.01rem;
			margin-top: 10px;
			margin-bottom: 15px;
		}

/*------- Page Mes disponibilités ----- */

#dispoCommunication
{
	width:100%;
	border-radius: 5px;
	background-color: #d0ecf0;
	color:grey;
	padding: 20px;
}

.loader 
{
    border: 5px solid #f3f3f3; /* Light grey background */
    border-top: 5px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
    display: none; /* Hidden by default */
}

@keyframes spin 
{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.block {
    display: block;  /* Chaque input avec cette classe sera sur sa propre ligne */
    width: 100%;     /* Prend toute la largeur de son conteneur */
    margin-top: 5px; /* Ajoute un peu d'espace entre les boutons */
}

.dispoTable
{
	border-collapse: separate;  /* Nécessaire si vous utilisez border-spacing */
	border-spacing: 5px 10px;     /* Espacement entre les rangées */
	width: 100%;                /* Assurez-vous que la table utilise toute la largeur si nécessaire */
}	
	.dispoChoice td 
	{
		background-color: white;
		padding: 10px;
	}
	.dispoResult
	{
		text-align: center;    /* Centrage horizontal */
		vertical-align: middle; /* Centrage vertical */
	}

/*___PAGE TICKETS___*/

.ticket-list {
	width: 80%;
	margin: 20px auto;
}
.ticket {
	border: 1px solid #ccc;
	padding: 10px;
	margin: 10px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.ticket button {
	margin-left: 10px;
}
.add-ticket {
	margin: 20px auto;
	width: 80%;
	padding: 10px;
	border: 1px solid #ccc;
}
.filter-buttons {
	margin-bottom: 20px;
	text-align: center;
}
.filter-buttons button {
	margin: 0 10px;
}

/*Page devenir-animateur*/
#devenirAnimateurLogoHandshake
{
	color:#44cbcf;
	min-width: 250px;
	/*centrer le texte en largeur et en hauteur*/
	display:flex;
	justify-content:center;
	align-items:center;	
}

#devenirAnimateurContainer
{
	width:100%;	
	background-color: white;
	padding: 30px;
	box-sizing: border-box;
}
	/*les balises p dedans sont en color:#44cbcf;*/
	#devenirAnimateurContainer p
	{
		color:#44cbcf;
	}
	/*les li dedans sont en couleur : #847f79*/
	#devenirAnimateurContainer li
	{
		color:#847f79;
	}

#devenirAnimateurButton
{
	background-color: #f4efe9;
	width: 100%;
	padding: 60px;
	/*centrer les éléments*/
	display:flex;
	justify-content:center;
	align-items:center;
	/*enlever le débord lié au padding 60*/
	box-sizing: border-box;
}

#devenirAnimateurImage
{
	width:100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	/*background image src pics/bg/enfants.jpg*/
	background-image: url('pics/bg/enfants.jpg');
	height:40vh;
}

/* page contact */

#contactContent
{
	background-color: #e7e4e2;
	width:100%;
	padding: 30px;
	box-sizing: border-box;
	display:flex;
}

#contactContainer
{
	width:100%;	
	background-color: white;
	padding: 30px;
	box-sizing: border-box;
	display: flex;
	/*goûtière 20px;*/
	gap:20px;
}	
	#contactContainer p
	{
		color:#847f79;
		/*pas de décoration*/
		text-decoration: none;
	}

#contactContainer a,
#contactContainer li
{
	color:#847f79;
}
	/*hover turquoise*/
	#contactContainer a:hover
	{
		color:#33d3c7;
	}

	.contactLocation
	{
		width: 50%;
		min-width: 200px;
		background-color: #f6efe9;
		padding:20px;
		box-sizing: border-box;
	}

	.contactImage {
		width: 100%;
		min-width: 200px;
		height: 300px; /* Ajustez selon vos besoins */
		background-size: contain; /* ou 'contain' selon votre préférence */
		background-repeat: no-repeat;
		background-position: center;
		margin-bottom: 30px;
	}
	
/*--page animateur Form--*/
#applicationBackGround
{
	background-color: #f1f0ee;
	width:100%;
	padding: 30px;
	box-sizing: border-box;
	display:flex;
	justify-content:center;
	/*je veux forcer la fonte roboto*/
	font-family: "Roboto", sans-serif;
	font-weight: 100;	
}
	#applicationConrainer
	{
		width:60%;	
		box-sizing: border-box;
	}
		#applicationConrainer p
		{
			color:#847f79;
		}
		#applicationConrainer a
		{
			color:#847f79;
		}
		#applicationConrainer a:hover
		{
			color:#33d3c7;
		}
		#blockTitre
		{
			margin: 40px 10px;
			display: flex;
			gap:30px;
			flex-wrap: wrap;
		}
			.applicationLogo {
				width: 15%;
				padding-top: 15%; /* Hauteur égale à la largeur pour un ratio 1:1 */
				background-size: cover;
				background-repeat: no-repeat;
				background-image: url('pics/logo/logo.svg');
				position: relative; /* Pour un bon comportement de positionnement avec des éléments enfants */
				height: 0; /* Pour que la hauteur soit définie uniquement par le padding */
			}
		
			.applicationTitle
			{
				color:#6b6b6b;
				font-size: 1.35em;
				font-weight: 300;
				font-stretch: condensed;				
				display:flex;
				flex-direction: column;
				justify-content:center;
				align-items:center;	
				width: 70%;	
			}
		.applicationTurquoiseBand
		{
			background-color: #32ccc0;
			height: 20px;
			width: 100%;
			margin: 20px 0;
			color: white;
			font-size: 1em;
			padding: 15px;;
			/*coins arrondis*/
			border-radius: 5px;
		}
		.applicationInfosList
		{
			color:#6b6b6b;
		}
		.applicationYellowBand
		{
			background-color: #fff3cd;
			height: 20px;
			width: 100%;
			margin: 20px 0;
			color: #82713d;
			font-size: 1em;
			padding: 15px;;
			/*coins arrondis*/
			border-radius: 5px;
		}

/* Historique*/

#historiqueContent
{
	background-color: #f4efe9;
	width:100%;
	padding: 30px;
	box-sizing: border-box;
	display:flex;
	
}
	.historiqueText
	{
		width: 100%;
		min-width: 200px;
		background-color: white;
		padding:20px;
		box-sizing: border-box;
		border-radius: 10px;
		color: #84837f;
	}
		.historiqueTitle
		{
			color:#3fc8ce;
			font-size: 1.5em;
			font-weight: 300;
			width: 100%;
			margin: 20px 0;
		}
		.historiqueImg
		{
			/*en float left*/
			float:left;
			margin-right: 20px;
		}
	
	


/*a ajouter 
---------

- les images de l'accueil seront dans la base de donnée
	- créer une colonne id
	- créer une colonne name
	- créer une colonne image-position
	- créer une colonne lien => dans le formulaire faut générer
- les text de l'accueil seront également dans la base de donnée
- créer un formulaire pour mdifier les images et le contenu avec un placeholder qui reprendra les éléments dans la base de donnée
- créer un formulaire pour la zone administrateur
- faire les media-queries
- ajouter une google font
- créer l'ouverture de la base de donnée
- s'occuper de la prise du domaine
- s'occuper de faire le contrat smart sur le nom de Morgane
- trouver les requêtes - 

*/

/* exception pour google chrome */

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .movieBlockLeft
	{
		position:relative;
		right:1px;
	}
}

/* Media queries */

@media only screen and (max-width: 1600px)  /* 1600 PX */
{
	#movieDatePicContainer
	{
		width:35%;
	}
	
	#artistePicContainer
	{
		width:35%;
	}
	
	#realisateurPicContainer
	{
		width:35%;
	}
}


@media only screen and (max-width: 1500px)  /* 1500 PX */
{
	#whiteLogo
	{
		margin-right: 50px;
		position: relative;
		bottom:15px;
	}
	
	.indexActuItem
	{		
		height: 28vh;		
	}

	#indexQuatreVignettesContainer
	{
		padding-top:79px;
	}
	.indexVignetteText
	{
		height:60%;		
	}
	.indexVignette
	{
		height: 50vh;
	}
	.indexActuItemImg
	{				
		min-width:240px;								
	}
	.title
	{
		padding-top: 97px;
	}

	.autresActusElement
	{
		width: 30%;
	}

	.autresActusContainer
	{
		height: 100vh;
	}

	.mediumWhiteOnGreenBtn, .mediumWhiteOnBlueBtn, .mediumWhiteOnOrangeBtn, .mediumWhiteOnGreyBtn, .mediumWhiteOnRedBtn, .mediumWhiteOnTurquoiseBtn, .mediumWhiteOnYellowBtn, .mediumWhiteOnFramboiseBtn, .mediumWhiteOnPurpleBtn, .mediumWhiteOnBlackBtn
	{
		font-size: 0.9rem;		
		border-width: 1px;
		padding: 5px 10px;
		margin-top: 5px;
	}

	.menuDropbtnAdmin
		{
			padding: 10px;
			font-size: 0.9em;
		}
	
	.actuTitle
	{
		padding:0px 30px 0px 30px;
		background:white;
	}
}


@media only screen and (max-width: 1388px)  /* 1388 PX */
{
	.lienBlanc
	{
		font-size:0.8em;
	}

	.menuDropbtn 
	{		
		font-size: 0.8em;		
	}
	/*changer le padding et le margin des différénets btn par 5px*/
	.whiteOnFramboiseBtn.whiteOnGreenBtn.whiteOnBlueBtn.whiteOnOrangeBtn.whiteOnGreyBtn.whiteOnRedBtn.whiteOnTurquoiseBtn.whiteOnYellowBtn.whiteOnPurpleBtn.whiteOnBlackBtn
	{
		padding: 2px 5px;
		margin: 0.5em 0.5em 0.5em 0.5em;
		/*police plus petite*/
		font-size: 0.5em;
		white-space: nowrap;
	}	
	.mediumGreyOnWhiteBtn.mediumGreyOnBlackBtn.mediumGreyOnBlueBtn.mediumGreyOnGreenBtn.mediumGreyOnOrangeBtn.mediumGreyOnPurpleBtn.mediumGreyOnRedBtn.mediumGreyOnTurquoiseBtn.mediumGreyOnYellowBtn.mediumGreyOnFramboiseBtn
	{
		padding: 2px 5px;
		margin: 0.5em 0.5em 0.5em 0.5em;
		/*police plus petite*/
		font-size: 0.5em;
	}	
}

@media only screen and (max-width: 980px)  /* 920 PX */
{
	.indexVignette
	{
		height: 50vh;
		width: 50%;
	}

	.autresActusElement
	{
		width: 30%;
	}
}

@media only screen and (max-width: 781px)  /* 781 PX */
{
	
}

@media (min-width: 768px) 
{
    .hamburger-icon {
        display: none;
    }    
}

@media screen and (max-width: 767px) 
{   
    #topMenuLeftSide
	{
		flex-direction: column;
		background-color: rgba(63, 201, 206, 1);
		height: 250px;
		order: 1;
		width: auto;
		visibility: hidden;
	}
	#topMenuLeftSide:hover
	{
		visibility: visible;
	}
	
	.hamburger-menu 
	{
        display: block;
        margin-bottom: 10px;
    }

	.hamburger-icon:hover + #topMenuLeftSide
	{
		visibility: visible;
	}

	.logo-container {
		order: 2;
		width: auto;
	}

	#topMenuRightSide
	{
		order: 3;
		width: auto;
	}

	.menuDropdown-content
	{
		position:absolute;
		left: 100px;
		top:0px;
	}

	.indexVignette
	{
		height: 50vh;
		width: 100%;
	}
}