body
{	background-color: #F7EFF9;
	text-align: justify;
}

main
{	width: 880px;
	margin: 80px auto;
	background-color: var(--couleur_fond_clair);
	padding: 20px;
}

h1
{	scroll-margin-top: 80px;	/* permet de placer le haut de la séance à 100px sous header lorsqu’on y va via une ancre */
	border-bottom: 4px solid var(--couleur_texte);
}

#\31 , #\32 
{	margin-top: 60px;
}


.introduction .blocs
{	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: 30px 80px 300px 300px;
	grid-template-areas: 	"no no"
				"b0 b0"
				"b1 b2"
				"b3 b4";
	text-align: center;
	font-size: 1.5em;
}





.introduction .note
{	grid-area: no;
	color:grey;
	font-size:x-small;
	text-align:right;
}



.introduction .bloc0
{	grid-area: b0;
	background-color: #1c58d9;
	width: 100%;
	height: 70px;
	margin-bottom: 10px;	
}
.introduction .bloc0 a
{	text-decoration: none;
	display: inline-block;
	width: 100%;
	height: 100%;
	color: white;
	font-size: 2rem;
	font-weight: bold;
}
.introduction .bloc0:hover a
{	background-color: #2d519d;
	color: #afafd7;
}

.introduction .bloc1
{	grid-area: b1;
	background-color: lightblue;
	margin: 0 5px 5px 0;
}
.introduction .bloc2
{	grid-area: b2;
	background-color: lightyellow;
	margin: 0 0 5px 5px;
}
.introduction .bloc3
{	grid-area: b3;
	background-color: #f0e0f0;
	margin: 0 5px 5px 0;
}
.introduction .bloc4
{	grid-area: b4;
	background-color: #a1e6a1;
	margin: 0 0 5px 5px;
}
.introduction h3
{	font-size: 1.8em;
}








.inscription h3
{	border-bottom: 1px solid var(--couleur_texte);
	margin-top: 40px;
	text-align: center;
}

.inscription .mel_id
{	text-align: center;
	margin-bottom: 15px;
}
.inscription .mel_id .gauche
{	color: grey;
	background-color: #EEE;
	width: 400px;
	margin: auto;	
}
.inscription .mel_id .droit
{	padding-left: 30px;
}
.inscription .petit
{	font-size: smaller;
}















.inscription .cadre
{	width: 100%;
	margin: auto;
	height: 180px;
	background-color: #2d519d;
	color: yellow;
	text-align: center;
}

.inscription .cadre .texte_permanent
{	height: 50px;
	font-size: 2em;
}

.cadre a, .cadre .texte_non_permanent
{	display: inline-block;
	height: 40px;
	width: 400px;
	background-color: #fddd43;
	border-color: yellow;
	border-style: outset;
	border-radius: 10px;
	padding-top: 15px;
	color: #0037ac;
	text-decoration: none;
	font-weight: bold;
	font-size: x-large;
}
.cadre a:hover
{	border-color: black;
}
.cadre .texte_non_permanent
{	margin-top: 50px;
}







.fleche-bas
{	width: 0;
	height: 0;
	margin: auto;
	border-right: 32px solid transparent;
	border-left: 32px solid transparent;
	border-top: 40px solid #fddd43;
}












.apparu
{	display:none;
}

.cadre.deployable:hover
{	height: 950px;
	width: 100%;
	cursor: context-menu;
}

.cadre:hover .texte_non_permanent, .cadre:hover .fleche-bas
{	display:none;
}
.cadre:hover .apparu
{	display:block;
}
.apparu div
{	text-align: center;
	color:#DDD
}

.cadre:hover iframe
{	height: 900px;
	width: calc(100% - 2px);
	border: 1px solid #2d519d;
	margin-top: 50px;
}



.inscription span
{	background-color: #EEE;
	color: #777;
	padding: 2px 6px;
	border: 1px solid #777;
}
.inscription span.bleu
{	background-color: #2d519d;
	color: #EFEFEF;
	padding: 2px 6px;
}
.inscription li
{	margin-bottom: 15px;
}





.utilisation .connexion
{	text-align: center;
}

.utilisation .connexion h2
{	background-color: gray;
	border-radius: 10px 10px 0 0;
	margin-bottom: 0;
}
.utilisation .connexion .sous_h2
{	background-color: lightgrey;
	margin-top: 0;
	padding-top: 30px;
	padding-bottom: 30px;
	text-align: center;
}

.utilisation .connexion .web a
{	display: block;
	text-decoration: none;
	padding: 40px;
	background-color: #2d519d;
	width: 40%;
	margin: auto;
	border-radius: 10px;
	font-size: xx-large;
	color: yellow;	
}
.utilisation .connexion .OS
{	width: 50%;
	margin: 30px auto 0;
	background-color: beige;
	padding: 10px;
}
.utilisation .connexion .app
{	display: inline-block;
}
.utilisation .connexion .app img
{	height: 8em;
	border-radius: 20px;
	border: 1px solid gray;
	padding: 5px;
	background-color: #DDD;
}

.titre_final
{	margin-top: 80px;
	text-align: center;
	border-top: 4px solid var(--couleur_texte);
	border-bottom: 0;
	margin-top: 80px;
	padding-top: 30px;
}

footer
{	display: grid;
}



@media screen and (max-width: 980px)
{	body
	{	width: 100%;
		/*font-size:26px;
		color:green;*/
	}
	main
	{	width: calc(98% - 60px);
		padding: 0 30px;
	}
	.introduction .note
	{	font-size:medium;
	}
	.introduction h3
	{	font-size: 2.2em;
	}
	
	.cadre.deployable:hover
	{	width: calc(100% + 60px);
		position: relative;
		left: -30px;
	}
	.cadre:hover iframe
	{	width: calc(100% - 2.5px);
	}
	.apparu div
	{	font-size: larger;
	}
	.utilisation .connexion .web a
	{	width: 60%;
	}
	
}