.A {background:var(--A); padding: 8px; color: var(--fonce)}
.B {background:var(--B); padding: 8px; color: var(--fonce)}
.C {background:var(--C); padding: 8px; color: var(--fonce)}
.D {background:var(--D); padding: 8px; color: var(--fonce)}
.S {background:var(--survol); padding: 8px; color: var(--bgcolor)}

body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background-color:var(--bgcolor);
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	color: black;
	width: 100%;
	min-width: 480px; /* Empêche le contenu de rétrécir sous 320px */

}

.container {
	margin-top: 50px;
	margin-bottom: 20px;
	margin-right: 20px;
	margin-left: 20px;
	background-color: #ffffff;
	padding: 40px;
	border-radius: 20px;
	box-shadow: 0 10px 25px rgba(0,0,0,0.05);
	border: 2px solid var(--clair);
	text-align: center;
	width: 100%;
}

table {
	width: 100%;
	border-collapse: collapse;
	background-color:white;
}

tr:first-child {
	/* Ajoutez ici les styles que vous souhaitez appliquer à la première colonne */
	background-color: var(--survol);
	font-weight: bold;
	color: white;
	height: 40px;
	text-align: center;
}

/* Version courte (shorthand) : 12px haut/bas, 15px gauche/droite */
th, td {
	padding: 12px 15px;
}

tr:nth-child(even){
	background-color: var(--clair);
}


h1 {
	color: var(--survol);  
	text-align: center;
}

h2 { 
	color: var(--survol);  
} 

h2.mat {
	border-left: 8px  solid var(--gris);
	padding: 6px;
	border-radius: 5px;
}

h2.mat--moy {
	border-left: 8px  solid var(--moyenne);
}

h2.mat--supp {
	border-left: 8px  solid var(--supp);
}

h2.mat--inf {
	border-left: 8px  solid var(--DS);
}


h3 { 
	color: var(--survol); 
	margin-left: 30px; /* Ajustez la valeur selon votre besoin */
} 

li {
	margin-left: 70px; /* Ajustez la valeur selon votre besoin */
}

.num {
	color: var(--DS);
	font-weight: bold;
	padding: 10px; 
}

/* Règle de base pour toutes les images */
img {
	height: auto;
	display: block;
	margin: 10px;
	margin-left: auto;
	margin-right: auto;
}

/* Règle appliquée uniquement aux images de plus de 1000px */
img.large-image {
	max-width: 1000px;
	width: 100%;
	cursor: zoom-in;
	transition: max-width 0.3s ease, width 0.3s ease;
}

/* État lors du clic sur une image large */
img.large-image.is-zoomed {
	max-width: none !important;
	width: auto !important;
	cursor: zoom-out;
}

.im_reponse {
	border: 2px solid var(--supp);
	margin: 10px;
}

.im_source {
	border: 2px solid var(--survol);
	margin: 10px;
}

/* Réponses */
.question-block { border: 1px solid #ccc; padding: 20px; margin-bottom: 30px; border-radius: 8px; font-family: sans-serif; }
.input-group { 
	place-items: center;
	display: flex; 
	flex-direction: column; 
	gap: 10px; 
}
/* Style pour le textarea */
.reponse-input { 
	margin-top: 10px;
	width: 100%; 
	padding: 10px; 
	box-sizing: border-box; /* Important pour que le padding ne dépasse pas */
	resize: vertical;      /* Permet à l'utilisateur d'agrandir la zone en hauteur */
	font-family: inherit;
}
.reponse-input--valid {
	border: 2px solid var(--supp);
}
.feedback-zone { margin-top: 0px; font-size: 0.9em; color: #555; }
.reponse { 
	align-items: center; 
	width: 300px;
	margin-top: 0px;
	padding: 10px 20px; 
	cursor: pointer; 
	border: none; 
	border-radius: 4px; 
	widows: 200px;
	border: 2px solid var(--survol);
}
/*-------*/


select, input, button,textarea {
	width: 100%;
	padding: 12px;
	margin: 10px 0;
	border-radius: 10px;
	box-sizing: border-box;
	border: 2px solid var(--survol);
	color: black;
}

button {
	background-color: var(--bouton); 
	font-weight: bold;
	cursor: pointer;
	transition: 0.3s;
	text-align: center;
}

button:hover {
	background-color: var(--survol); 
	color: white;
	transform: scale(1.01);
	z-index: 10;
}

.vert-btn {
	border: 2px solid rgb(0, 154, 62);
	background-color: var(--A); /* Rose pastel */
}

.vert-btn:hover {
	background-color: rgb(0, 154, 62); /* Rose pastel */
}

.logout-btn {
	border: 2px solid rgb(255, 81, 81);
	background-color: #ffcfcc; /* Rose pastel */
}

.logout-btn:hover {
	background-color: rgb(255, 81, 81);
}

.message {
	color: #ff8b94;
	font-size: 0.9em;
}

/* Style pour la grille de liens */
.menu-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
	gap: 15px;
	margin-top: 20px;
}
.menu-grid a {
	text-decoration: none;
}

.menu-grid button {
	background-color: var(--bouton); 
	border: 2px solid var(--survol);
	color: var(--fonce);
	padding: 15px;
	font-size: 0.9em;
}

.menu-grid button:hover {
	background-color: var(--survol);
	color: white;
}

/* Style spécifique pour le bouton "spécial" */
/* On utilise l'ancien style + le nouveau pour l'écraser */
.menu-grid button.btn-alt {
	background-color: var(--clair);
	border-color: var(--gris);
}

.menu-grid button.btn-alt:hover {
	background-color: var(--fond);
	color: white;
	
}

.menu-grid button.btn-result {
	background-color: var(--clair);
	border-color: var(--gris);
	cursor: auto;

}

.menu-grid button.btn-result:hover {
	color: var(--fonce);
}

/* Style pour le bouton de déconnexion en bas */
.logout-container {
	margin-top: 30px;
	border-top: 1px solid #eee;
	padding-top: 20px;
}

a {
	text-decoration: none;
}

div {
	margin: 5px;
}

/* Style en plus pour la progression */

.chapter-block {
	margin-bottom: 40px;
	padding: 20px;
	background-color: var(--clair);
	border-radius: 15px;
	border: 1px solid #eee;
}

.chapter-title {
	font-size: 1.5em;
	color: var(--bouton);
	margin-bottom: 15px;
	border-bottom: 2px solid #a8dadc;
	padding-bottom: 10px;
}

.sub-item-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 
	gap: 15px;
	margin-top: 20px;
}

.progression-card {
	padding: 15px;
	background-color: #fff;
	border-radius: 15px;
	border-left: 8px solid var(--gris); 
	width: calc(100% - 30px); /* largeur maximale ou une autre valeur */
}

/* Couleurs spécifiques pour les types */
.progression-card--cours { border-left: 8px solid var(--cours);}
.progression-card--exercice {border-left: 8px solid var(--exercice);}
.progression-card--quizz {border-left: 8px solid var(--quizz);}
.progression-card--evaluation {border-left: 8px solid var(--DS);}
.progression-card--supp {border-left: 8px solid var(--supp);}
.progression-card--moyenne {border-left: 8px solid var(--moyenne);}
.progression-card--public {border-left: 8px solid var(--bouton);}

/* Style du calendrier */
.calendar-container {
	max-width: 1000px;
	margin: auto;
	background: var(--clair);
	padding: 20px;
	border-radius: 15px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.calendar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.nav-btn {
	border: 2px solid var(--survol);
	background-color: var(--bouton);
	color:var(--fonce);
	padding: 10px 20px;
	border-radius: 10px;
	cursor: pointer;
	font-weight: bold;
}

.nav-btn:hover {
	background-color: var(--survol); 
	color: white;
}

.calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 10px;
}

.day-box {
	border: 2px solid var(--survol);
	border-radius: 10px;
	min-height: 100px;
	padding: 10px;
	position: relative;
	transition: 0.3s;
}

.day-box:hover {
	transform: scale(1.05);
	z-index: 10;
}

.day-header {
	font-weight: bold;
	font-size: 0.8em;
	border-bottom: 1px solid var(--gris);
	margin-bottom: 5px;
	padding-bottom: 5px;
	text-align: center;
}

/* Couleurs */
.free { background-color: var(--clair);} /* Bleu très clair */
.occupied { background-color: var(--survol); color: white; border: 2px solid black;} /* Bleu foncé */
.today { background-color: var(--bouton); }
.vacances { background-color: rgb(210, 240, 210); border: 2px solid black;}
.infosday {font-size: 0.6em;}

/* HEADER AVEC LA LISTE DES QUESTIONS */
	/* Bandeau fixe */
#header{
	position:fixed;
	top:0;left:70px;right:0;
	height:36px;
	background:var(--fond);
	color:white;
	display:flex;
	justify-content:center;   /* centre horizontalement */
	align-items:center;       /* centre verticalement */
	z-index:1000;
}

#LUT{
	position:fixed;
	top:0;left:0;right:0;
	height:36px;
	width: 70px;
	background:var(--fonce);
	color:white;
	display:flex;
	justify-content:left;   /* centre horizontalement */
	align-items:center;       /* centre verticalement */
	z-index:1100;
}

#question-list{
	list-style:none;
	display:flex;
}

/* Couleurs des questions */
.note {
	margin:2px;
	padding : 5px;
	color: var(--fond);
	background: var(--E);
	font-weight: bold;
	cursor: pointer;
}
.note--A {
	background: var(--A);
}
.note--B {
	background: var(--B);
}  
.note--C {
	background: var(--C);
}  
.note--D {
	background: var(--D);
} 
.note--E {
	background: var(--E);
}

div.correction {
	border-left: 8px solid var(--E);
	margin-left: 5px;
	padding: 5px; 
}

div.correction--A {
	border-left: 8px  solid var(--A);
}
div.correction--B {
	border-left: 8px  solid var(--B);
}  
div.correction--C {
	border-left: 8px  solid var(--C);
}  
div.correction--D {
	border-left: 8px  solid var(--D);
} 
div.correction--E {
	border-left: 8px  solid var(--E);
}

span.rep {
	display: none;
}

/* --- STYLE DE L'HORLOGE --- */
#horloge-fixe {
	/* Positionnement : en haut à droite */
	position: fixed;
	top: 60px;
	right: 30px;
	z-index: 9999; /* S'assure que l'horloge passe au-dessus de tout le reste */

	/* Design visuel */
	background-color: var(--fond); /* Fond noir légèrement transparent */
	color: var(--A); /* Couleur vert "digital" (style rétro) */
	padding: 10px 20px;
	border-radius: 8px;
	font-family: 'Courier New', Courier, monospace; /* Police mono-espace pour éviter que les chiffres bougent */
	font-size: 24px;
	font-weight: bold;
	box-shadow: 0 4px 10px rgba(0,0,0,0.5);
	pointer-events: none; /* L'horloge ne gêne pas le clic sur les éléments dessous */
}