@import 'css/variables.css';
@import 'css/formulaire_connexion.css';
@import 'css/graphiques_statistiques.css';
@import 'css/cours_td.css';
@import 'css/tableau_ds_related.css';

#bloc_page{
    width: 90%;
    margin: auto;
    font-family : "Trebuchet MS";
    text-align : justify;
    padding : 10px;
}

/*Petit icone en bas à droite*/
	.haut_de_page{
		display: flex;
		flex-direction: column;
		position:fixed;
		right:10px;
		bottom:10px;
	}
	.haut_de_page img{
	width:2em;
}

/*Menu en haut*/
	nav{
		width:100%;
	    border-bottom : 1px var(--main_color) solid;
	    display: flex;
	    flex-wrap: wrap-reverse;
		justify-content: space-between;
		align-items: center;
	}

	.icone_menu{
		height:5em;
	}

	nav ul{
	    list-style-type: none;
	    display: flex;
	    flex-wrap: wrap;
		margin:0;
		padding: 0;
	}

	nav li{	    
		margin: 10px;
	}

	footer nav ul{
	    justify-content: flex-start;
	}

/*Formulaire connexion et enregistrement*/
	
	form{
		text-align: justify;
	}	

	input{
		text-align:center;
	}

	.infoFormulaire{
		display:none;
		font-size:0.5em;
	}

	.remarques_prof_ds{
		color: var(--color_com_prof);
		font-weight: bolder;
		margin-bottom: 5px;
	}
/*Partie principale*/
	/*Contenu principal*/
		article{
			font-size : 1em;
			line-height: 100%;
		}

		a{
			color:var(--main_color);
			text-decoration: none;
		}
		a:hover{
			/*color:var(--secondary_color);
			font-style: italic;*/
			text-shadow: 0px 0px 1px currentColor;
		}

		article li{
			font-size:1em;
		}

		/*article > ul > li  {
			margin-top:10px;
			margin-bottom:5px;
			font-size:1.2em;
			font-weight:bold;
		}*/

		.disclaimer + ul > li{
			font-size:1em;
			/*margin-top:10px;*/
		}

		strong{
			color:var(--color_strong);
			font-weight:bold;
		}
		em{
			color:var(--color_em);
			font-weight: bold;
		}

		h1{
			font-size: 1.4em;
			font-weight : bold;
			padding:0.5em 0em;
			margin:0;
			background-color: var(--main_color_light);
		}

		h2{
			font-size: 1.2em;
			font-weight : bold;
			padding:0.5em 1em;
			margin:0px;
			border-bottom:solid 2px var(--main_color);
			background-color: var(--main_color_light);
		}

		h3{
			font-size: 1.2em;
			font-weight : bold;
			margin-left:-1em;
			margin-top:2em;
			color:var(--secondary_color);
		}

		h4{
			font-size: 1.1em;
			font-weight : bold;
			margin-left:-0.5em;
			margin-top:1em;
			color:var(--secondary_color);
		}

		.disclaimer{
			margin:0em 0.5em;
		    background-color: var(--color_disclaimer_background);
		    box-shadow: 3px 3px 6px var(--color_disclaimer);
		    border-radius: 1px;
		    color: var(--color_disclaimer);
		    padding: 0.5em;
		}

		.bonne_reponse{
			color:var(--color_juste);
			font-weight: bold;
		}
		
		.mauvaise_reponse{
			color:var(--color_erreur);
			font-style: italic;
			font-size:1em;
			text-decoration:line-through;
		}

		.affichage_infos{
			display:grid;
			grid-template-columns: 1fr 1fr;
			gap: 1em;
		}

		.affichage_infos > *{
			align-self: start;
		}

		.rowSelected{
			background-color: var(--color_back_juste); /* Utilise la variable CSS pour la couleur de fond */
    		color: var(--color_juste); /* Vous pouvez également définir la couleur du texte, si nécessaire */
		}

		.rowError{
			background-color: var(--color_back_erreur); /* Utilise la variable CSS pour la couleur de fond */
    		color: var(--color_erreur); /* Vous pouvez également définir la couleur du texte, si nécessaire */
		}

		.chapitre-checkboxes {
			text-align: left; /* Aligne le contenu à gauche */
		}

		.temp-highlight-pos {
			background-color: var(--color_back_juste);
			transition: background-color 0.5s ease;
		}
		.temp-highlight-neg {
			background-color: var(--color_back_erreur);
			transition: background-color 0.5s ease;
		}


		.multi-line-button {
            white-space: pre-wrap; /* Allow line breaks */
        }

		.alignement_droite_gauche_cellule{
			display : flex;
			justify-content: space-between;
		}





		.zone_correction_etudiant{
			position: relative;
		}
		.zoneCorrectionQuestionEtudiant{
			border: 1px solid black
		}

		.zoneCorrectionQuestionEtudiant :first-child{
			font-weight: bolder;
			/*border-bottom : 1px dashed black;*/
			padding: 5px 5px;
		}

		.zoneCorrectionQuestionEtudiant > :not(:first-child){
			text-indent: 1.5em;
			padding-top: 10px;
		}

		.zoneCorrectionQuestionEtudiant > :not(:last-child){
			border-bottom : 1px dashed black;
		}

		.zoneCorrectionQuestionEtudiant div{
			display : flex;
			align-items : center;
			justify-content : space-between;
		}

		button:not(table button) {
			background-color: var(--color_neutral_background);
			border: 2px solid var(--color_em);
			border-radius: 0.5em;
			color: var(--color_em);
			text-align: center;
			font-size: 1em;
			cursor: pointer;
		}
		
		button:not(table button):hover {
			box-shadow: 0 0 1px 1px var(--color_em);
		}
		
		#save_correction_student_side{
			position: sticky; 
			bottom: 10px;
			margin-left: 80%;
		}

		table button {
			background-color: white;
			border: 1px solid black;
			border-radius: 0.5em;
			color: black;
			text-align: center;
			font-size: 0.9em;
			cursor: pointer;
		}
		
		table button:hover {
			box-shadow: 0 0 1px 1px black;
		}

		table button:disabled {
			background-color: whitesmoke;
			border: 1px solid gray;
			color: gray;
			cursor: unset;
		}
		
		table button:disabled:hover {
			box-shadow: none;
		}
		



		.acces_rapide {
			font-size: 0.7em;
			position: fixed;
			top: 10px; /* Distance du haut de la fenêtre */
			right: 5%; /* Distance du côté droit de la fenêtre */
			background-color: white; /* Couleur de fond de la boîte */
			border: 1px solid #ddd; /* Bordure de la boîte */
			padding: 10px; /* Espacement interne de la boîte */
			box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Ombre portée pour un effet flottant */
			z-index: 1000; /* Assurez-vous que la boîte est au-dessus des autres éléments */
		}

		.acces_rapide h2{
			padding : 5px;
			margin : 0;
			background : none;
			border : none;
		}

.available{
	display: inline-block;
	color: var(--color_juste);
	background-color: var(--color_back_juste);
}

.availability{
	display: inline-block;
	color: var(--color_com_prof);
	background-color: var(--color_com_prof_background);
}

.noAvailability{
	display: inline-block;
	color: var(--color_erreur);
	background-color: var(--color_back_erreur);
}

.available a, .availability a, .noAvailability a {
    color: black;
}



.zone_file_chapitre img{
	width : 1em;
}



.action_admin{
	display:none;
}

.tableau_formulaire{
	border-collapse: collapse;
	font-size:0.9em;
	display:flex;
	flex-direction: column-reverse;
	align-items: center;
	border:none;
	margin : 0;
}

.tableau_formulaire td, th{
	text-align:center;
	border:none;
}

select{
	max-width : 10em;
}

/*Tableau principaux*/
	table{
		border-collapse: collapse;
		font-size:0.9em;
		/*margin: auto;
		align-items: center;*/
		
	}

	caption{
		font-style: italic;
		caption-side: bottom;
		font-size:0.7em;
	}

	th{
		text-align:center;
	}

	td, th{
		text-align:center;
		border:1px solid black;
		padding:4px;
		/*max-width: 300px;*/
	}

/*Tableau avec figeage volet*/
	.table_figeage_volets{
		overflow: auto;
		max-height : 70vh;
	}
	
	.figeage_ligne{
		position: sticky;
		top: 0;
		background-color: #ffffff;
		padding : 2px;
		border:1px solid black;
		z-index: 2;
	}

	.figeage_colonne{
		position: sticky;
		left: 0;
		background-color: #ffffff;
		padding : 2px;
		border:1px solid black;
		z-index: 1;
	}

/*TABLEAU BAREME*/
	.color_row_via_questionNumber_0{
		background-color: var(--color_table_alternate_0);
		transition: background-color 0.5s ease;
	}
	.color_row_via_questionNumber_1{
		background-color: var(--color_table_alternate_1);
		transition: background-color 0.5s ease;
	}

	
	.table_side_by_side {
		display: flex;
		gap: 1em;
		flex-direction: row;
	}

	.following_table{
		position: sticky;
		top: 10px;
	}


	.zone_items_correction_ds_prof_side div{
		display: flex;
		text-align: left;
		align-items: start;
	}


/* Changement de style quand la case est cochée */
/*input[type="checkbox"] {
    accent-color: var(--color_juste);
    border: 2px solid #ccc; 
    border-radius: 4px;
    transition: accent-color 1s ease;
}
input[type="checkbox"]:checked {
    accent-color: var(--color_juste); 
    background-color: #e8f5e9; 
    transition: background-color 1s ease;
}*/



/*Pied de page*/
footer
{
	border-top:solid;
	border-width:1px;
	border-color:var(--main_color);
	clear:both;
}
footer li
{
	font-size : 0.5em;
	margin-right:10px;
}

/*
@media all and (max-width: 900px){

	#bloc_page
	{
		width:95%;
		margin:auto;
		padding:10px;
		border:none;
		border-radius: 0;
		box-shadow: none;
	}

	.haut_de_page img
	{
		width:50px;
		height:50px;
	}

	header
	{
		padding:0;
		flex-direction: column;
		flex-wrap:nowrap;
		font-size: 0.8em;
	}
	nav ul
	{
	    flex-direction: row;
	    flex-wrap: wrap;
	    justify-content: flex-start;
	}

	.mini_menu_niveau *//* on gère l'aspect global de la boite qui va contenir les themes et sous themes dans la partie supérieure*/
/*	{
		max-height: none;
	    background-color: #EEF4F9;
	    box-shadow: 3px 3px 6px #82B0D3;
	    border-radius: 5px;
	    margin:10px;
	    padding-bottom: 10px;
	    flex-direction: column;
	}

	.mini_menu_niveau .menu_theme
	{
		display: flex;
		flex-direction: column;
	}
	.mini_menu_niveau .ensemble
	{
		display: flex;
		justify-content: space-around;
		align-items: flex-start;
		flex-direction: row;
	}
	.mini_menu_niveau .menu_sous_theme
	{
		max-height: none;
		flex-direction: column;
		justify-content: flex-start;
		flex-wrap: nowrap;
	}

	.mini_menu_niveau .theme img
	{
		min-width:120px;
		max-width:120px;
	}
	.mini_menu_niveau .theme_pris img
	{
		min-width:120px;
		max-width:120px;
	}

	.mini_menu_niveau .sous_theme img
	{
		min-width:40px;
		max-width:40px;
	}
	.mini_menu_niveau .sous_theme_pris img
	{
		min-width:40px;
		max-width:40px;
	}

	.statistiques_centre
	{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.nouveaute
	{
		max-width: 100%;
		float:none;
	}

	footer
	{
		margin-top:10px;
	}
	footer ul
	{
		flex-direction: row;
		justify-content: flex-start;
		margin:0;
		font-size:1.1em;
	}
	footer p
	{
		font-size : 0.5em;
		color: #548CB7;
		font-style:italic;
		padding:0;
	}


	.mini_menu
	{
		margin:0 20px;
	}

	.mini_menu dt

	{
	    font-size:1em;
	}

	.mini_menu dd
	{
		font-style:italic;
		margin-bottom : 20px;
		margin-left: 0px;
	}

	.coming_soon
	{
		display:none;
	}

	td, th
	{
		text-indent: 0;
	}

	.question_eleve
	{
		font-size: 1.1em;
		background-image: none;
		padding:20px;
	}

	.attention
	{
		font-size:1.1em;
		background-image: none;
		padding:20px;
	}

	.contenu
	{
		word-wrap: break-word;
	}

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

	.entrainement:nth-child(1)
	{
		width:80%;
	    float:none;
	    margin: auto;
	    margin-top:40px;
	    margin-bottom: 10px;
	    font-size:1em;
	    order: 2;
	}
	.entrainement:nth-child(2)
	{
		width:80%;
	    float:none;
	    margin: auto;
	    margin-bottom: 10px;
	    font-size:1em;
	    order: 3;
	}
	.image_reponse
	{
		flex-wrap: wrap;
	}

	.mise_en_situation_sous_theme
	{
		flex-direction: column;
		align-items: center;
	}
	.fil_rouge, .complement, .objectifs, .organisation
	{
		width:85%;
	}

	.introduction_sous_theme
	{
		display:flex;
		flex-direction: column;
		
	}
	.introduction_sous_theme .objectifs:nth-child(2)
	{
		align-self: center;
		order:10;
	}

	.mise_en_situation_sous_theme .documents
	{
		flex-direction: column;
	}

}*/