:root{
		--gris: #ddd;
		--bleu_sombre :  rgb(42,43,54);
		--rouge_sombre : rgb(199,43,43);
		--rouge :  rgb(191,11,52);
		--vert:rgb(35,199,33);
		--antivert: rgb(244,21,214);
		--bleu: rgb(0,46,155);
	}
	html, body {
	padding: 0;
	margin: 0;

	}

	.card:hover a{
		text-decoration: none;
		color:white;
	}


	.tableau{
		width:100%;
		padding: 25px;
	}

	.header {
	margin: 0;
	}

	#principal 
	{

		font-family: "Trebuchet Ms";
		position: center;
		text-align:center;
		border-radius: 15px;
		width: 85%;
		margin: auto;
		background-color: rgba(255,255,255,1);
		text-align: center;

	}
	@font-face{
		font-family: Hanley;
		src: url(./fonts/hanley.ttf)
	}
	#principal h1{
		font-family: Hanley;
		font-weight:bold;
		font-size: 5em;
	}

	#principal h1,
	h2,h3,h4,h5,h6
	{

		color: white;

		/*background-color: #03F289; */

		padding: 5px;
	margin: auto;

	margin-bottom: 0.4em;
		border-radius: 9px;
		color: rgb(50,50,50);
	width: 100%;
	margin-left: 0px;


	}
	#principal h1{
	/*background-color: #333;*/
	color: var(--bleu_sombre);
	}

	.alternance{
	/*
		Une alternance est un paragraphe sur fond gris de couleur blanche
	*/
		border-radius:13px;

		color: white;
			background-color: rgb(42,43,54);
		width: 100%;
		display: inline-block;
		padding: 40px;
	}

	.liens_droite{
		margin-right: 40px;
		position: absolute;

	display: inline-block;


	}



	/*#principal h1:
	hover	font-size: 2em;
	{
		background: linear-gradient(to bottom right, #03F283, rgb(11, 111, 233));


	}*/
	#droite 
	{
		padding: 1px;
	background-color: rgba(11, 111, 233, 1);
		position: static;
			float : right;

		border-radius: 15px;
		text-align: center;
		width: 21%;
		background-color:  rgb(15, 75, 155);
			background-image: linear-gradient(to bottom right, rgb(19,199,231), blue);



	}
	#droite:hover
	{

	}


	p
	{
		
		font-size: 1.1em;
	font-family: "Helvetica Neue";

	}

	a
	{
		color: white;
		text-decoration: none;
	}

	a:hover
	{
		color: rgb(0, 195, 33);
		text-decoration: underline;
	}


	.miniature
	{
		width: 15em;
	}





	td img
	{
		width: 65%;
			transition: width 1.5s;
	}


	td img:hover
	{
	width: 100%;

	}

	.bouton
	{
		position: center;
			display: inline-block;
		color: white;
	background-color: rgba(11, 111, 233, 1);
		width: 50%;
		padding: 5px;
		color: white;
		background: linear-gradient(to bottom right, rgb(11, 111, 233),  #03F283);

		width: auto;
	}


	#recherche
	{
		font-size: 1.3em;
		border-radius:  13px 13px 13px 13px;
	}
	h3{


		font-family: Arial;
		font-size: 1.6em;
		color: rgb(150,150,150);
	}

	h3:hover{


	/*color: rgb(170,170,170);*/
	}



	#article h2 
	{
		margin-top: 10px;
	}

	.yacque 
	{
		background-image: linear-gradient(to bottom right, rgb(0,199,111), rgb(24,209,11));
		display: inline-block;

			overflow: hidden;
	}
	#menu img{

	overflow: hidden;
	}
	#logo img{
	float: right;;
	position: absolute;;
	height: 50px;
	}

	.logo_petit{
		width: 45px;

	}

	#yacque:hover
	{
		/*background-color: rgb(5,195,13);*/

	}

	#yacque li a:hover
	{
		color: rgb(0, 195, 55);

	}

	p{
		font-size: 1.5em;

	}



	.containner

	{
		padding: 16px;
	}


	input[type=text], input[type=password], input[type="email"],input[type=number],input[type=date]
	{
		position: center;
		width: 70%;
		padding: 15px;
		margin: 5px 0 22px 0;
		display: inline-block;
		border:none;
		background:#F1F1F1;

		border-radius: 10px;
			font-size: 1.1em;
	transition:1s;

	}

	input[type=submit]
	{
			transition : 0.5s;
			border: solid 2px var(--vert);
			background-color: white;
		color: var(--vert);
			border-radius: 5px;
			padding: 10px;
			font-size: 1.1em;

	}

	input[type=submit]:hover
	{
			transition : 0.5s;
			background-color: var(--vert);
	
			color: white;
	}

	input[type=text]:focus, input[type=password]:focus
	{
		background-color: #ddd;
		outline:none;
		border:none;
	}

	hr{
		border: 1px solid #F1F1F1;
		margin-bottom: 25px;
	}
	.code_support{

		background-color: rgb(41,43,54);
		border-radius: 5px 5px 5px 5px;
		color: white;
		text-align: left;
		padding-left: 30px;
		margin: 0;
		overflow-x: scroll;
		overflow: scroll;


	}

	.bouton_inscription
	{
		background-color: rgb(9,145,45);
		color:white;
		padding: 16px 20px;
		margin:8px 0;
		border:none;
	font-size:1.1em;
		width: 100%;
		opacity: 0.9;
		border-radius: 10px;
	}

	.bouton_inscription:hover
	{
		opacity: 1;
	}

	.container label
	{
		font-size:1.1em;
	}

	.logo
	{
		margin-top: 5px;
		margin-bottom: 10px;

	}

	.active
	{
		background-color: red;
	}


	footer{
			background-color: var(--bleu_sombre);
			text-align: center;
			color: white;
			padding-top: 10px;
			padding-bottom: 10px;
			display: block;
	}

	footer li{
		list-style-type: none;
		font-style: none;
		font-size: 1.5em;

	}


	footer li a:hover{
		list-style-type: none;
		font-style: none;
		text-decoration: none;
	}

	.tutoriels td
	{
		border:none;

		padding: 0px;
		margin: 0px;
	}
	.tutoriels td:hover
	{
		background: none;
	}

	.vignette {

		border:solid black;
		width: 30%;

		position: center;
		margin: auto;

		padding: 10px;
	}

	.vignette img{
		width: 55%;
		transition: 1.5s;

	}
	.vignette img:hover{
		width: 100%;
		transition: 1.5s;

	}
	* {
		box-sizing: border-box;
	}
	.column{
		float: left;
		width: 32%;
		padding: 0 10px;
		margin-bottom: 40px;


	}

	.row{
		margin: 0,-5px;
	}

	.row:after{
		content: "";
		display: table;
		clear: both;

	}
	.card h1{
		font-size: 2em;
	}
	.card{
		box-shadow: 20px 5px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
	padding: 16px;

	text-align: center;
	background-color: white;
		transition: 0.4s;
	display: inline-block;
	border: solid 1px;

	color: black;
	overflow: hidden;
		border-radius: 10px;

	}
	.card img{
		width: 100%;
		aspect-ratio: auto;
		max-height: 600px;
	}
	.card:hover{
		box-shadow: 2px 5px 8px 0 rgba(0, 155, 0, 0.2); /* this adds the "card" effect */
		transition: 0.4s;
		background-color: rgb(191,11,52);
		color: white;



	}
	.card .titre{
		font-size: 1em;
	}
	.card img{
		max-width: 100%;

	}	


	.description a
	{
	color: black;}

	.description{
		font-size: 1.1em;
		text-decoration: bold;
		font-style: italic;
	}
	.titre
	{
		font-weight: bold;
			font-size: 1.2em;

	}
	.formulaire input{

		width: 50%;
	}

	.succes {
	color: rgb(0,200,22) ;
	font-weight: bold;
	}
	.erreur{
		color: rgb(239,29,13);
	font-weight: bold;
	}

	.definition{

		background-color: var(--vert);
		padding: 20px;
		color: white;
		width:100%;

		border-radius:13px;
	}

	.theoreme{

		background-color: rgb(193,3,53);
		padding: 20px;
		color: white;
		border-radius:13px;
	}


	.proposition{

		background-color: rgb(13,123,193);
		padding: 20px;
		color: white;
		border-radius:13px;
	}

	.definition::first-letter{
		font-size: 1.9em;
	}
	.proposition::first-letter{
		font-size: 1.9em;
	}

	.theoreme::first-letter{
		font-size: 1.9em;
	}

	.illustration{
		border-radius: 5px;
			display: block;
		width: 100%; 
		max-width: 1000px;
		margin: auto;

	}

	.pseudo{
			transition: 1000ms;
		background-color: rgb(12,221,134);
	}

	textarea{
		font-size: 2.1em;
		width: 70%;
		border:solid 1Px;
		
	}
	textarea:hover{
	}


	.footer textarea{

		border-radius: 10px;
	}

	.ajouterTitre{
			background: #333;

	}

	button{
		border: none;

		background-color: rgb(24,209,11);
		padding: 10px;
		border-radius: 10px;
		font-size: 1.1em;
		margin:4px;

	}
	button:hover{
			background-color: rgb(255,255,255);
			border:green;
			color: green;

	} 
	button a:hover{
		text-decoration: none;
	}
	.button_def{
		background-color: rgb(0,193,163);
	}
	.button_prop{
		background-color: rgb(13,123,193);
	}.button_thm{
		background-color: rgb(193,3,53);
	}


	h2 {
		color: rgb(49,49,49);
	font-weight: bold;
		/*background-color: #03F289; */

	font-family: "Helvetica Neue";
		padding: 5px;
	margin: auto;
	font-size: 2.8em;
		border-radius: 9px;

		/*background: linear-gradient(to bottom right, rgb(11, 111, 233),  #03F283);*/




	}
	h3{
		font-weight: bold;
		font-family: Arial;
		color: rgb(49,49,49);

	}

	h2:hover {

		color: rgb(35,33,35);

	}

	html 
	{
		scroll-behavior: smooth;
	}

	input[type=checkbox]{

		background-color: red;
	}

	.logo{
		width: 350px;
		margin-bottom: 0px;
	}
	.commentaires {
		margin:auto;

			position: center;
			width: 80%;
	}

	@media screen and (max-width: 950px) {

		.alternance{
			border-radius: 0px;

		}

		.commentaires{
		width: 100%;

		}
		html, body {
		padding: 0;
		margin: 0;
		}

		.definition, .proposition, .theoreme, .alternance{
			border-radius: 0;
		}

		.code_support
		{
		border-radius: 0;
			width: 100%;
		}
		.illustration
		{

		display: block;

			width: 100%;
		}
		p
		{
			font-size: 1.3em;
		}
		#principal h1{
			font-size: 2em;
			width: 100%;
			border-radius: 0px;
		}

		#principal{
		margin-top: 7em;
		border-width:  0px;
			border-radius: 0px;
			padding: 0px;
			width: 100%;
				background-color:white;
		background-color: rgba(255,255,255,1);
			text-align: center;
		}
		.column {
			width: 100%;
			display: block;
			margin-bottom: 20px;
		}
		#principal
		{
			width: 100%;
		}
		#principal input{
			width: 100%;
		}

	.yacque{
			float: right;

		}
			#menu li{
			width: 100%;
			overflow: hidden;

		text-align: center;

		}
		#menu {
		font-family: "Trebuchet MS";
			transition: 0.9s;
			overflow-y: scroll;

			height:100px;
			background-color:var(--bleu_sombre);
		}
		#menu:hover
		{
			height:700px;
			transition: 0.9s;
		}
	}
	.commentaire
	{

		width: 100%;
		border-radius: 10px;
		color:red;
		padding: 10px;
		border:solid 4px black;
	}
	.commmentaire:hover{
		color:white;
		transition:1s;
		background-color: var(--bleu_sombre);
	}

	input[type=text], input[type=password], input[type="email"],input[type="number"]
	{
		width: 70%;
		max-width: 400px;
	}


	




	.code {
		font-size: 1.0em;
	}

	.type_var{
		color: rgb(208,52,58);
	}

	#principal li{
			font-size: 1.6em;
		font-family : "Times";

	}
	.type_classe{
		color: rgb(20,212,198);
	}

	.type_preprocesseur{
			color: rgb(200,122,18);

	}
	.type_commentaire{
		color: rgb(20,192,18);
	}

	.variable_declaree{
		color: rgb(20,144,198);

	}
	.auteur{
		border-radius: 10px;
		color: white;
		padding: 1px;
		font-weight: bold;
		background-image: linear-gradient(to bottom right, rgb(19,199,231), blue);
	}

	.commentaire
	{



		color: black;
	display: block;
	margin:auto;

	margin-bottom: 3px;

	position: center;
	text-align: center;
	padding: 1px;
	}



	.commentaires input[type="submit"] {
		width: 70%;
	}
	.zone{
		width: 100%;
		height:10%;
		font-size: 1em;

	}
	a button{
		color: white;
	}

	.indent{
		margin-left:100px;
	}

	.inscription{

		background-image: url("images/silhouette.png");
		background-size: 100%;
		background-repeat: no-repeat;
	}
	.inscription input{
		width: 30em;
	}

	.image_article{
		width: 50%;
		float:left;
	}


	.inscription p{
		color: grey;
	}

	.commentaires{
		text-align: center;
	}

	.math{
		overflow-x:scroll;
	}

	.donner{
		background: linear-gradient(to bottom right, rgb(19,199,231), blue);

	}



	#menu{

		left: 0;
		top:0;
	overflow: hidden;
		font-size: 1.5em;
	background-color: var(--bleu_sombre);
	width: 100%;
	font-family: "Helvetica Neue";



	}
	#menu ul{
		list-style-type: none;
		margin:0;
		padding: 0;


	}

	#menu li{

	display: block;
	float: left;


	}
	#menu li a{
		display: block;
		padding:14px 16px;
		text-decoration: none;

	}

	#menu li:hover{
	background-color: #111;

	}
	input[type=number]
	{
		width: 40%;
	}

	table
	{
		margin: auto;
		border: solid black 1px;
	}
	table td{

		margin: 0;
		padding: 10px;

	}
	table tr{
		border: solid black 1px;
	}
	.tableau{
		overflow-x: scroll;
	}

	input [type ="checkbox"]
	{
		background-color: red;
	}

	.conteneur
	{
		margin-top: 10px;
		display: block;
		position: relative;
		width: 70%;

	}

	.conteneur input[type="checkbox"]{
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
	}

	.encoche{
		position: absolute;
		top: 0;
		left: 0;
		height: 25px;
		width: 25px;
		background-color: #eee;
	}

	.conteneur:hover input ~ .encoche{
		background-color: rgb(19,211,133);
	}

	.encoche:after{
		content:"";
		position: absolute;
		display: none;
	}

	.conteneur input:checked ~ .encoche:after{
		display: block;


	}

	.conteneur .encoche:after{
		left: 9px;
		top: 5px;
		width: 5px;
		height: 10px;
		border: solid grey;
		border-width: 0 3px 3px 0;
		-webkit-transform : rotate(45deg);
		-ms-transform: rotate(45deg);
		transform : rotate(45deg);
	}

	h3{
		font-size: 2.5em;
	}
	h4{
		font-size: 1.8em;
	}
	h5{
		font-size: 1.5em;
	}
	h6{
		font-size: 1em;
	}


	#formulaire_inscription{
		background-color: rgba(129,129,129,100);

		border-radius: 10px;
		padding: 50px;
		box-shadow: 1px;
		display: inline-block;
	}
	#formulaire_inscription p{
		color: white;
	}


	.math{
		font-size: 100em;
		color: red;
	}

	.wrapper
	{
		/*
			on defini un systeme de grille pour afficher plusieurs infos en meme temps
		*/
		display: grid;
		grid-template-columns: repeat(2,1fr);
		grid-gap: 50px;
		width: 30%;
	margin: auto;	
		grid-auto-rows: minmax(100px, auto);	
	}

	.first{
		grid-column: 1;
		grid-row: 1;
	}
	.second{
		grid-column: 2;
		grid-row: 1;
	}

	.exercice {

		border-radius: 7px;
		background-color: rgb(199,119,19);
		background-color: rgb(199,119,19);
		color: white;
		margin-bottom: 31px;
	}

	.exercice h1{
		font-size: 1.9em;
		border-radius: 0px;
		background-color: red;
	}

	.questions{
			margin: 10px;
		list-style-type: none;
	}
	.bouton_exercice
	{
			color: white;
			font-size: 1.3em;
			font-family: "Helvetica";
			margin-bottom: 10px; 
	}
	.num_question{
		border-radius: 100px;
		padding: 5px;
	}
	.correction{
		background-color: rgb(11,123,211);
		padding: 3px;
	}

	.bronto_post{
	background: rgb(1,219,192);
		padding: 0px;
			border: none;
			height: 100%;
			margin-top: 0px;
		border-radius: 0px;
	}

	.bronto_post a:hover{
		background-color:  rgb(12,199,132);
		

	}

	.grand_titre
	{
		font-size: 4em;
		position: absolute;;
		left: 0px;
		padding: 100px;
		border-radius: 0px;



	}
	#principal p{
		text-align:center;
		margin:auto;
		max-width:800px;
	}

	.sombre{
		background-color: rgb(42,43,54);
		color: white;
	}
	@media screen and (min-width: 1200px)
	{
	.bloc_resultats{
		max-width:700px;
	}
	.grille_sept{
			
			display: grid;
			grid-template-columns: repeat(3,1fr);
			grid-gap: 2px;

		}


	}
	@media screen and (min-width: 950px)
	{
		.footer textarea{
			width: 70%;
		}
		.grille_triple{
			display: grid;
			grid-template-columns: repeat(3,1fr);
			grid-gap: 20px;

		}
		.grille_sept{
			display: grid;
			grid-template-columns: repeat(3,1fr);
			grid-gap: 5px;

		}


	}
	#menu li a:hover{

		background-color: white; 
	}

	.article img{
		width: 100%;
		max-width: 500px;
	}


	.article button{
		background-color: white;
		border: var(--vert) solid 3px;
		border-radius: 3px;
		color: var(--vert);
	}
	.article button:hover
	{
		background-color: var(--vert);
		color:white;
	}

	.article h1{
		color: red;
	}

	.article .contact{
		color: var(--bleu);
		border-color: var(--bleu);
	}
	.article .contact:hover{
		background-color: var(--bleu);
	}
	.article .Cancel{
		color: var(--rouge);
		border-color: var(--rouge);
	}
	.article .Cancel:hover{
		background-color: var(--rouge);
	}
	.article textarea{
		background-color: #ddd;
	}
	.jour{
	text-align : center;
	border: solid 1px black;
	}
	#principal a{
	color:rgb(11,97,133);

	}
	.tache{
		padding: 5px;
		transition: 0.4s;

	}

	.tache:hover{
	}
	.done{
		transition: 0.4s;
		background-color : rgb(35,199,33);
		padding: 15px;
		font-weight: bold;
		color:black;
	}
	.done:hover{
		color:black;
	}
	.bouton_rouge{
		transition:0.2s;
		background-color: white;
		color: var(--rouge);
		border : var(--rouge) solid 2px;
	}
	.bouton_rouge:hover{
		transition: 0.5s;
		background-color:var(--rouge);
	}
	.jour{
		transition:0.4s;
	}
	.jour:hover{
		background-color : var(--bleu_sombre);
		color: white;
	}
	.current_day{
		background-color:var(--bleu);
	}
	.grille_sept h1{
		font-family : "Trebuchet MS";
	}
	.heure{
		display:block;
		font-size:0.6em;
		float:left;
	}
	.current_hour{
		background-color: var(--vert);

	}
	.bouton_succes{
		background-color: white;
		border: solid 2px var(--vert);
		color: var(--vert);
	}
	.bouton_echec{
		background-color: white;
	}
	.bouton_echec{
		background-color: white;
		border: solid 2px var(--rouge);
		color: var(--rouge);
	}
	.bouton_succes:hover{
		background-color: var(--vert);
		color:white;
	}.bouton_echec:hover{
		background-color: var(--rouge);
		color:white;
	}



	.bloc_succes{
		color:white;
		background-color: var(--vert);
	}
	.bloc_mystere{
		border:7px white dashed;
		background-color : var(--bleu);
		color:white;
	}
	.bloc_mystere h1{
		color:white;
	}
	.bloc_echec{
		color:white;
		background-color: var(--rouge);
	}

	source{
		width:300px;
	}
	video{
		width: 100%;
		max-width: 900px;
	}
	.mathjax{
		overflow-x: scroll;
		overflow-y:visible;
		}

	.spotlight{
		color:white;
	}
	input[type=text], input[type=password], input[type="email"],input[type="number"]
	{
		width: 100%;
	}
	.footer textarea{
		width: 100%;
	}	


	.zone{
		border: solid 2px;
		border-radius:5px;
		width:70%;
		font-size:2em;
	}

	
.pre_footer{
	background-color: var(--rouge);
	height:300px;
	vertical-align:middle;
}	
.pre_footer h1{
	color:white;
	font-style:italic;
	font-weight:bold;
	font-size:3em;
	text-align: center;
	margin:auto;

}


.bloc_resultats{
	max-height: 500px;
	overflow-y: scroll;
	
}

.bloc_resultats .grille_triple{

	display: grid;
			grid-template-columns: repeat(2,1fr);
			grid-gap: 20px;

}