#vivier
{
	background-color: var(--bleu);
	color:var(--blanc);
	padding:10px;
	text-align: center;
	font-size: min(3vw, 1.3em);
}

#titrevivier
{
	font-size: 1.2em;
	font-weight: 600;
}

button.ensavoirplus
{
	position:absolute;
	font-size: 20px;
	border:1px solid #000000;
	border-radius:20px;
	color: var(--rouge);
	padding-left:40px;	
	padding-right:50px;
	transition:500ms;
	display:flex;
	
	img.information
	{
		left:5px;
		bottom:3px;
		position:absolute;
		height:80%
	}
	
	img.pointeur
	{
		position:absolute;
		right:15px;
		height:30px;
		
	}
}

button.ensavoirplus:hover
{
	background-color:var(--blanc);
}

#decouvrezProgramme
{
	text-align: center;
	margin-top:15px;
}

.decouvrez {
	background-color: var(--bleuciel);
	width: 45vw;
	min-width:250px;
	max-width:450px;
	margin-left:1vw;
	margin-right:1vw;
	display: inline-block;
	vertical-align: top;
	color: var(--bleu);
	font-size: min(3vw,1.2em);
	font-weight: 600;
	position: relative;
	min-height: 233px;
	margin: 1vh 1vw;
	
	button.ensavoirplus
	{
		position:absolute;
		bottom:15px;
		left:10px;
	}
}

.decouvrez img.imagedecouvrez {	
	max-height: 80%;
	position: absolute;
	right: 0px;
	bottom: 0px;
}



#inscriptionvisio
{
	width:80%;
	margin:auto;
	border:1px solid #000000;
	padding:15px;
	position:relative;
	margin-top:10px;

	#inscriptiontexte
	{
		color:var(--bleu);
		display:inline-block;
		vertical-align: top;
		width:70%;
		
		.titreinscripton
		{
			font-size:min(3vw,1.3em);
			font-weight: 600;
		}
		
		p{
			margin-top:20px;
			font-size: min(2vw,1.2em);
		}
	}	
	
	#inscriptionimage
	{
		display:inline-block;
		vertical-align: top;	
		width:29%;
	}
  	
  	button.ensavoirplus
  	{
  		bottom:30px;
  	}
}

#qui
{
	margin-top:20px;
	display:flex;
	justify-content: center;	
	gap:3vw;
	
	.gauche,
	.droite
	{
		display:inline-block;
		vertical-align: top;
		width:49%;
	}
	
	.droite img
	{
	width:100%;
	}
	
	.titreQui
	{
		font-size:min(3vw, 1.6em);
		color:var(--bleu);
		font-weight: 600;
	}
	
}


.quivalidation
{
	display:inline-block;
	vertical-align: top;
	border:1px solid #000000;
	padding:15px;
	max-width:40%;
}  		
  		
 .boutonrouge
 {
 	display:block;
 	padding:10px;
 	font-size: min(6vw,1.8em);
 	font-weight: 600;
 	color:var(--blanc);
 	background-color: var(--rouge);
 	margin:10px auto;
 	border:none;
 	border-radius:15px;
 	min-width: 250px;
 	height:70px;
 	
 	img
 	{
 		height:90%;
 		margin-right:15px;
 	}
 	
 }  	

 .boutonrouge:hover
 {
 	cursor:pointer;
 }  
 
 .boutonrouge img {
	display: inline-block;
	vertical-align: middle;
}

.boutonrouge span {
	display: inline-block;
	vertical-align: middle;
}
 
 #qualiopi,
 #coordonnees
 {
 display:inline-block;
 vertical-align:top;	
 }
 #pied
 {
 	text-align: left;
 }
 
  #qualiopi { width:220px;}
 #coordonnees { width:calc(100vw - 225px);}
 
 #piedLiens
 {
 	list-style: none;
 	margin:0px;
 	padding:0px;
 	display:flex;
 	flex-direction: row;
 	gap:5vw;
 	justify-content: center;
 }
 
 @media (max-width:450px)
 {
	 #titrevivier {
		font-size: 1.4em;
		font-weight: 600;
	}
 
 	#vivier p
 	{
 		font-size: 16px;
 	}
 	 
 	#qui 
 	{
	 display: block; 
	}
		
	.quivalidation {
	display: block;
	padding: 15px;
	max-width: initial;
	margin:1vw;
		}
	
	.decouvrez
	{
		width:95vw;
		display:block;
		margin:10px auto;
		font-size: min(5vw,1.2em);
		text-align: center;
		height:auto;
		
	
		img.imagedecouvrez
		{
			position:initial;
			height:170px;
			display:block;
			margin:auto;
		}
		
		button.ensavoirplus 
		{
			position: relative;
			display: block;
			margin: auto;
			margin-top: 25px;
			
		}
		
		
 	}
 	
 	#inscriptionvisio 
	{
		width: 95%;

		#inscriptiontexte 
		{			
			display: block; 
			width:95%;
		
		
			.titreinscripton 
			{
				font-size: 5vw;
				text-align: center;
			}
		
			p {
				margin-top: 10px;
				font-size: 4vw;
				display: block;
				margin: auto;
				text-align: justify;
			}
			
			
		}
		
		#inscriptionimage 
		{				
			width: auto;
			height: 120px;				
			display: block;
			margin: auto;
		}
		
		button.ensavoirplus {
			position: relative;
			display: block;
			margin: auto;
			margin-top: 40px;
		}
	}
	#qui
	{	
			.titreQui 
			{
				font-size: 5vw;
				text-align: center;
			}
			
			.droite, .gauche
			{
				width:95%;
				display:block;
				margin:auto;
				text-align: justify;
			}
			p
			{
				font-size: 0.9em
			}
	}	
	
	.boutonrouge 
	{
	font-size: 4.5vw;
	height:auto;
	img
	{height:30px}
}

	#qualiopi, #coordonnees
	{
		display:block;

	}
	
	#qualiopi
	{
		height:80px;
		text-align: center;
		width:100%;
		img{
		height:100%
		}
	}
	
	#coordonnees
	{
		width:100%;
		margin-top:10px;
		margin-bottom:10px;
		font-size: 3vw;
		padding:10px;
	}
	
	#piedLiens
	{
		display:block;
		text-align:center;
		
		li
		{
			display:block;
			font-size: 4vw;
			width:100%;
			margin:auto;
			margin-bottom:5px;
		}
	}
 }