/*@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap');

*{
  --backgroundCol:rgb(147, 171, 192);
  --textBlanc: antiquewhite;
  --enTetePied : #666;
  --myfontfamily : 'Quicksand', sans-serif;
  --colorG:#24649c;
  --colorGhover:#5196d1;
}

*{
  transition: background-color 0.3s ease; 
  font-family: 'Quicksand', sans-serif;
}

* {margin:0;
  padding:0;
}

body{
  display: flex;
  flex-direction: column; 
  justify-content: space-between;
  width: 100vw;
  min-height:100vh;
  align-items: center;
}

#top, #image, main{
  width:90%;
}

main{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  flex-grow: 1;
  background-color: var(--backgroundCol);
}*/
/* ==============================
   BASE : DESKTOP
============================== */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap');

*{
  --backgroundCol:rgb(147, 171, 192);
  --textBlanc: antiquewhite;
  --enTetePied : #666;
  --myfontfamily : 'Quicksand', sans-serif;
  --colorG:#24649c;
  --colorGhover:#5196d1;
}

*{
  transition: background-color 0.3s ease;
  font-family: 'Quicksand', sans-serif;
  margin:0;
  padding:0;
}

html, body {
  overflow-x: hidden;
}

body{
  display: flex;
  flex-direction: column; 
  justify-content: space-between;
  width: 100vw;
  min-height:100vh;
  align-items: center;
}

#top, #image, main{
  width:90%;
}

main{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  flex-grow: 1;
  background-color: var(--backgroundCol);
}
/* Fin du nouveau début */

#middle{
  display: flex;
  width: 100%;
  align-items:center;
  flex-direction: column;
  vertical-align: middle;
  justify-content: space-around;
}

#top, #top a{
  min-height:40px;
  background-color: var(--enTetePied);
  font-family: 'Quicksand', sans-serif;
  color: var(--textBlanc);
  font-size: 15px;
  display: flex;
  text-decoration: none;
  align-items: center;
  justify-content: space-between;
}


.message-box {
  position: fixed;
  top: 0;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  display: none;
  justify-content: center ;
  align-items: center;
  z-index: 999;
}

.messageR {
  background-color: #FF9999; /* Couleur de fond rouge */
}

.messageV {
  background-color: #99FF99; /* Couleur de fond verte */
}

#message-text {
  color: black; /* Couleur du texte */
  text-align: center;
}

#close-message {
  cursor: pointer;
  margin-left: 10px;
}


.afficher_nom, .afficher_classe{
  display: flex;
  align-items: center;
  flex-direction: row;
  padding-left: 10px;
  padding-right: 10px;
}

.boutontop{
  margin-left:20px;
  padding: 4px;
  min-height:20px;
  font-weight: 700;
  border-radius: 4px;
  border-style: groove;
  border-width: 2px;
  border-color: var(--textBlanc);
}

#rejoindre_classes{
  display: flex;
  width: 80%;
  justify-content: space-around;
  color: var(--textBlanc);
}
.rejoindre_classe{
  width:30%;
  min-height: 40px;
  border-radius: 4px;
  border-width: 8px;
  border-style: solid;
  border-radius: 5px;
  border-color: rgb(119, 150, 177);
  background-color: #24649c;
  background-image: url('../images/porte.png');
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  padding-left: 40px;
  align-items: center;
}
.rejoindre_classe:hover{
  background-color: #5196d1;
  cursor: pointer;
}
.nom_classe{
  font-size: 20px;
}
.nom_prof{
  font-size: 15px;
}

#rejoindre{
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 20px;
}

#image{
  height:300px;
  background-image: url('../images/kelly-sikkema-LFGAatMUDvc-unsplash.jpg');
  background-size : 100% auto;
  background-position-y: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
#titre,#soustitre{
  padding-left:50px;
  font-family: 'Quicksand', sans-serif;
  color: var(--textBlanc);
}

#titre{
  height: 30%;
  max-width: 30%;
  font-weight: 700;
  font-size: 40px;
}
#soustitre{
  height: 60%;
  max-width: 30%;
  font-weight: 500;
  font-size: 20px;
  text-align: justify;
  font-style: italic;
}

#erreur, #erreurReg, #erreurRej, #erreurCreer{
  color: red;
}
/*
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
.tableContraintesNoBorders{
  border-collapse: collapse;
  table-layout: auto;
}
.tableContraintesNoBorders,  .tableContraintesNoBorders tr, .tableContraintesNoBorders td {
  border: none;
  padding: 5px;}

*/


footer{
  background-color: var(--enTetePied);
  color: var(--textBlanc);
  font-family: 'Quicksand', sans-serif;
  font-weight: 300;
  width:90%;
  height:60px;   /* Hauteur du pied de page */
}

#messOK, #messErreur{
  width: 60%;
  align-items: center;
  font-size: 20px;
  font-family: 'Quicksand', sans-serif;
  font-weight: 300;
}
#messOK{
  color: green;
}
#messErreur{
  color:red;
}

#contenu, .contenu{
  display: flex;
  flex-direction: column;
  width:100%;
  align-items: center;
  justify-items: center;
  font-family: var(--myfontfamily);
}

#Colleurs, 
#contenu {
  box-sizing: border-box; /* pour inclure padding dans la largeur */
  width: 100%;            /* pas plus large que l'écran */
  margin: 0 auto;         /* centré */
  padding: 10px;          /* petites marges intérieures */
}

#navClasse{
  display: flex;
  width:90%;
  flex-direction: row;
  font-size: 20px;
  font-family: 'Quicksand', sans-serif;
  font-weight: 300;
  color: #03052e;
  justify-content: space-between;
  margin: 10px;
  color:var(--textBlanc);
}

.itemClasse{
  min-width: 14vw;
  max-width: 85%;
  text-align: center;
  background-color: #24649c;
  border-radius: 4px;
  border-width: 5px;
  border-style: solid;
  border-radius: 5px;
  border-color: rgb(119, 150, 177);
  border-color: midnightblue;  
  vertical-align: middle;
  padding:5px;
}

.itemClasse:hover{
  background-color: #5196d1;
  cursor: pointer;
}

#TableauBord, #TableauBordErreur{
  width:100%;
  font-size: 20px;
  font-family: 'Quicksand', sans-serif;
  font-weight: 300;
  margin:10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#TableauBord{
  color: #03052e;
}
#TableauBord h1, #titreSection{
  color: darkblue;
  font-weight: bold; 
  text-align: center;
  margin-bottom:10px;
}
#titreSection{
  font-size: 30px;
}

#TableauBordErreur{
  color:red;
}

.boutonContenuSettings, .boutonContenuJoin, .boutonContenuAdd, .boutonContenuEdit, .boutonSimple{
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  min-width:40vw;
  min-height: 60px;
  border-radius: 4px;
  border-width: 4px;
  border-style: solid;
  border-radius: 5px;
  border-color: midnightblue;
  background-color: #24649c;
  background-size: 40px;
  background-repeat: no-repeat;
  background-position: 10px 10px;
  color:var(--textBlanc);
  margin : 20px;
}

.boutonSimple{
  min-width: 0;
  text-wrap: wrap;
}


.boutonContenuSettings{
  background-image: url('../images/settings.png');
}
.boutonContenuJoin{
  background-image: url('../images/porte.png');
}
.boutonContenuAdd{
  background-image: url('../images/plus2.png');
}
.boutonContenuEdit{
  background-image: url('../images/edit.svg');

}
.boutonContenuSettings:hover, .boutonContenuJoin:hover,.boutonContenuAdd:hover,.boutonContenuEdit:hover, .boutonSimple:hover{
  background-color: #5196d1;
  cursor: pointer; 
}
a .boutonContenuSettings{
  text-decoration: none;
}

#topColloscope{
  display: flex;
  flex-direction: row;
  width:80vw;
  justify-content: space-between;
  padding-top: 10px;
  color: var(--textBlanc);
  font-size: 20px;
}

#topColgauche, #topColdroite{
  display: flex;
  flex-direction: column;
  border:4px solid rgb(119, 150, 177);
  font-family: 'Quicksand', sans-serif;
  font-weight: 300;
  border-radius: 8px;
  min-height:40px;  
  background-size: 40px;
  background-repeat: no-repeat;
  padding:5px;
  background-position: 5px 5px;  
  padding-left: 40px;
}

#topColgauche{
  background-image: url('../images/gauche.png');
}
#topColdroite{
  background-image: url('../images/droite.png');
}
#topColdroite:hover,#topColgauche:hover{
  cursor: pointer;
  background-color: #24649c;
}


.partieContrainte{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
}

.titre, .titreContrainte{
  font-family: 'Quicksand', sans-serif;
  font-size: 1.5rem;
  width: 60vw;
  text-align: center;
  font-weight: bold;
  padding: 10px;
}

.titre{
  color:  var(--colorG);
}

.titreContrainte{
  color: darkblue;
  margin:10px;
  border-radius: 8px;
  border : solid var(--colorGhover) 2px;
  background-color: var(--colorG);
  background-image: url('../images/expand.svg');
  background-repeat: no-repeat;
  background-position-x: 90% ;
  background-size: 60px;
}

.titreContrainte:hover{
  background-color: var(--colorGhover);
  cursor: pointer;
}

.sous-titre{
  font-family: 'Quicksand', sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  color:#24649c;
  padding: 10px;
}

.notice{
  font-family: 'Quicksand', sans-serif;
  font-size: 1rem;
  color:#24649c;
  padding: 10px;
  width: 80%;
}

#faisable{
  color:green;
}

#infaisable{
  color:red;
}

#wait{
  color:gray;
}

.warning{
  color:rgb(255, 68, 0);
  font-weight: bold;
}

.partie{
  display: flex;
  flex-direction: row;
  align-items: center;
}

.souspartie, .competence{
  padding-left: 20px;
  display: flex;
  flex-direction: row;
}
.competence{
  font-style: italic;
}

.suppNotation:hover{
  cursor: pointer;
}

#nb_points{
  display: flex;
  flex-direction: row;
  align-items: center;
}


#evalColleEntries,#evalColleEdit,#AjouterColleChamp{
  /*display: none;*/
  flex-direction: column;
}
.hidden {
  display: none !important;
}


#AjouterColleChamp{
  justify-content: space-around;
  text-align: center;
  display: inline-block;
  width:40vw;

}

.colle0, .colle1, .colle2, .colle3, .colle4 {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 40vw;
  min-height: 60px;
  border-width: 4px;
  border-radius: 5px;
  color: var(--textBlanc);
  margin: 20px;
  transition: background-color 0.3s ease; /* Animation de transition */
  position: relative;
}

.colle0 {
  background-color: #FF7F00;
}

.colle1 {
  background-color: #1FA055;
}

.colle2 {
  background-color: #DE3163;
}

.colle3 {
  background-color: #689D71;
}

.colle4 {
  background-color: #9E9E9E;
}

/* Styles au survol */
.colle1:hover {
  background-color: #36D575;
}

.colle2:hover {
  background-color: #FF6C8E;
}

.colle3:hover {
  background-color: #8FD2A4;
}

.colle4:hover {
  background-color: #BEBEBE;
}


.supprimer-colle {
  position: absolute;
  background-color: #24649c;
  border-radius: 100%;
  top: -20px;
  right: -20px;
  width: 40px; /* Ajustez la largeur de l'image */
  height: 40px; /* Ajustez la hauteur de l'image */
  background-image: url('../images/delete.png'); /* Remplacez le chemin */
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
}

.supprimer-colle:hover {
  background-color: #5196d1;
}

.eleve-cadre {
  border: 2px solid var(--textBlanc);
  width: 20%;
  padding: 8px;
  margin: 8px 0;
  display: flex;
  justify-content: space-between;
}

.elevesColle{
  display: flex;
  flex-direction: row;
  font-size: 12px;
  justify-content: space-around;
}
.supprimer-eleve {
  color: red;
  width:150%;
  cursor: pointer;
  text-decoration: none;
}
.supprimer-eleve:hover {
  font-weight: bold;
}

.remarque{
  font-style: italic;
  color: #666;
}

.boutonColle0{
  align-self: center;
  padding:2px;
  margin:3px;
  display: flex;
  width:fit-content;
  border : 2px solid var(--textBlanc);
  color : var(--textBlanc);
  font-weight: bold;
  border-radius: 8px;
  text-decoration: none; /* Retire le souligné du lien */
  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */
}

.boutonColle0:hover{
  cursor: pointer;
  background-color: #FFA84D;
}

.traitHorizontal {
  margin: 20px 0;
  border: none;
  border-top: 8px solid var(--textBlanc);
}

.ligne_contraintes {
  display: flex;
  flex-direction: row;
  align-items: center; /* Aligner les éléments verticalement au centre */
  width: 100%;
  justify-content: space-between;
  border: var(--colorG) 4px solid;
  border-radius: 8px;
  margin-bottom: 10px;
}

.ligne_contraintesG {
  width : 40%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 70%;
}
.ligneCB{
  border-radius: 4px;
  border: 3px solid var(--colorG);
}
.ligne_contraintesM{
  width: 30%;
}
.ligne_contraintesF{
  width: 40%;
  padding-left: 10px;
}

#affichageColloscope, #affichageSuppContraintes, .affichageColloscope, #affichageListesColloscopes{
  width:85vw;
  overflow-x: scroll;
  scrollbar-width: 20px;
}

#affichageListesColloscopes {
  display: flex;
  justify-content: center; /* Centre les boîtes dans le conteneur parent */
  flex-wrap: wrap; /* Les boîtes passent à la ligne si nécessaire */
  gap: 20px; /* Espacement entre les boîtes */
  align-items: center;
}

.boite_actions{
  display: flex;
  justify-content: center; /* Centre le contenu horizontalement */
  align-items: center; /* Centre le contenu verticalement */
  padding: 10px;
  border-radius: 5px;
  width: 100%; /* Largeur de chaque boîte en fonction de l'espace disponible */
}

.boite_colloscope {
  display: flex;
  align-items: center;
  border: 3px solid #03052e;
  padding: 10px;
  background-color: #f8f8f8;
  border-radius: 5px;
  width: 60%; /* Largeur de chaque boîte en fonction de l'espace disponible */
}

.boite_colloscope_sel {
  display: flex;
  align-items: center;
  border: 3px solid green;
  padding: 10px;
  background-color: lightgreen;
  border-radius: 5px;
  width: 60%; /* Largeur de chaque boîte en fonction de l'espace disponible */
}

.colloscope-nom {
  flex-grow: 1; /* Le nom occupe tout l'espace disponible */
  margin-right: 20px; /* Espace entre le nom et les boutons */
  font-size: 16px;
  color: #333;
}

.actions {
  display: flex;
  align-items: center;
  gap: 10px; /* Espacement entre les actions */
}

.actions .btn {
  padding: 5px 10px;
  background-color: #03052e;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}



.actions .selectionne:hover {
  background-color: green; /* Légère variation de la couleur de fond au survol */
}



.actions .btn:hover {
  background-color: #050780; /* Couleur de survol */
}

.actions .select {
  width: 20px;
  height: 20px;
  cursor: pointer;
}



input[type='number']{
  width: 30px;
} 


#dossier_tree ul, #dossier_tree li {
  list-style: none;
}
/* Styles pour les icônes de dossiers et de fichiers */
.folder-icon, .file-icon {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}

/* Styles pour les dossiers ouverts et fermés */
.folder-closed {
  background-image: url('../images/folder.svg');
}

.folder-open {
  background-image: url('../images/folder_open.svg');
}

.folder-new {
  background-image: url('../images/create_new_folder.svg');
  font-size: 80%;
}

.file {
  background-image: url('../images/draft.svg');
  font-style: italic;
  font-size: 80%;
}
/* Style par défaut pour les dossiers */
.folder {
  cursor: pointer;
  padding-left: 20px; /* Pour l'indentation */
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 16px; /* Taille de l'icône */
}

#Navigation_dossier{
  display:flex;
  flex-direction: row;
  width: 100%;
  font-size: small;
  justify-content: space-around;
}

#Dossier_bandeau_gauche{
  display:block;
  padding:5px;
  border-radius: 5px;
  border:#24649c solid 2px;
  height: fit-content;
  width: 40%; /* Définir la largeur à 50% du parent */
  overflow-x: auto; /* Ajouter une barre de défilement horizontale en cas de dépassement */
  white-space: nowrap; /* Empêcher le texte de se plier à la ligne */
}

#Dossier_bandeau_droit{
    display:block;
    padding:5px;
    border-radius: 5px;
    border:#24649c solid 2px;
    height: fit-content;
    width: 40%; /* Définir la largeur à 50% du parent */
    overflow-x: auto; /* Ajouter une barre de défilement horizontale en cas de dépassement */
    white-space: nowrap; /* Empêcher le texte de se plier à la ligne */}
  

.context-menu {
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
}

.context-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.context-menu li {
    padding: 10px;
    cursor: pointer;
}

.context-menu li:hover {
    background-color: #f0f0f0;
}


/* ==============================
   LISTE ÉTUDIANTS
============================== */

#listeEtudiants {
  display: flex;
  flex-direction: column;
  font-style: italic;
  font-size: 14px; /* réduit un peu pour plus de lisibilité */
}

.Etudiant {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;   /* permet de revenir à la ligne si ça déborde */
  align-items: center;
  gap: 8px; /* espace homogène entre colonnes */
  margin-bottom: 6px;
}

.nom {
  font-weight: bold;
  flex: 0 0 15%;
  margin: 0 10px;
  word-wrap: break-word;
}

.star {
  width: 50px;
}

.mail {
  color: lightblue;
  min-width: 100px;
  word-wrap: break-word;
}

.option {
  color: darkblue;
  min-width: 100px;
  margin-left: 5px;
}

/* Largeurs générales */
.largeur100,
.largeur60 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.largeur100 {
  width: 100%;
}

.largeur60 {
  width: 60%;
  align-self: center;
}

.largeur80bloque {
  width: 80%;
  overflow-x: auto;
  scrollbar-width: thin;
}

/* Checkboxes */
.arbo-checkbox {
  width: 16px;
  height: 16px;
}


/* ==============================
   GROUPES & SEMAINES
============================== */

#Groupes, 
#AffSemaines,
#ElevesSansGroupe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 80%;
  font-family: var(--myfontfamily);
}

.groupe,
.geleve {
  background-color: var(--colorG);
  color: var(--textBlanc);
  padding: 10px;
  border-radius: 10px;
  text-align: center;
  transition: background-color 0.2s ease;
}

.groupe {
  width: 200px;
  margin: 10px;
}

.geleve {
  max-width: 200px;
  margin: 5px;
  cursor: pointer;
}

.groupe:hover,
.geleve:hover {
  background-color: var(--colorGhover);
}

/* Capacités de groupe */
.capa {
  display: flex;
  justify-content: space-between;
  border-bottom: 3px solid var(--colorGhover);
  font-weight: bold;
}

.groupeNom {
  font-size: 1.2em;
  padding-bottom: 10px;
}

/* Semaines */
.semaines {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.semOui, 
.semNon {
  padding: 4px 6px;
  border-radius: 6px;
  max-width : 50px;
  min-height:80px;
  text-align: center;
  overflow-wrap: break-word;
  transition: background-color 0.2s ease;
}

.semOui {
  background-color: var(--colorG);
  color: var(--textBlanc);
}

.semNon {
  background-color: lightgray;
  color: darkgray;
}

.semNon:hover, 
.semOui:hover {
  background-color: var(--colorGhover);
  cursor: pointer;
}

.semOui h1,
.semNon h1 {
  margin: 0;
  font-size: 16px;
}

/* Indicateurs */
#nb1 {
  display: flex;
  flex-wrap: wrap;
}

#nb0, 
#nb {
  font-family: var(--myfontfamily);
  font-size: 18px;
  color: var(--colorG);
}

#nb {
  font-weight: bold;
}


/* ==============================
   FORMULAIRES
============================== */

/* === Formulaire principal === */
.form_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgb(119, 150, 177);
  border: 0px solid royalblue;  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  max-width: 600px;
  margin: 20px auto;
  font-family: var(--myfontfamily);
  /*color: var(--textBlanc);*/
}

/* === Titres et headings du formulaire === */
.form_container_headings {
  font-size: 1.2rem;
  color: #03052e;
  margin-bottom: 15px;
  text-align: center;  
  position: relative;

}
.form_container_headings img{
  vertical-align: middle;
}

#register{
  display:none;
}

#register, #login{
  color: #03052e;
}
/* === Inputs et selects centrés === */
.form_container_inputs {
  width: 80%;              /* largeur relative au formulaire */
  max-width: 400px;        /* limite maximale */
  margin: 10px auto;       /* centre horizontalement */
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--colorGhover);
  font-size: 14px;
  text-align: center;      /* centre le texte à l'intérieur */
  box-sizing: border-box;
  display: block;
}

/* === Boutons centrés === */
.form_container_button {
  margin: 15px auto 0 auto;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background-color: var(--colorG);
  color: var(--textBlanc);
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: block;
}

.form_container_button:hover {
  background-color: var(--colorGhover);
}

/* === Radio / Checkbox groupes === */
.form_container_radio, .ligneCB {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 8px 0;
}

.mon_bouton{
  width:60%;
  padding:15px;
  margin:15px;
  text-align: center;
  text-wrap: wrap;
  word-wrap: break-word;
  box-sizing: border-box;
}


.mon_bouton{
  background-color: #24649c;
  cursor: pointer;
  color: var(--textBlanc);
  font-size: 1.1rem;
}
.mon_bouton:hover{
  background-color: #5196d1;
}

/* === Messages et liens secondaires === */
.form_container_changer {
  margin-top: 12px;
  font-size: 13px;
  text-align: center;
}

.form_container_changer a {
  color: var(--textBlanc);
  text-decoration: underline;
}

.form_container_changer a:hover {
  color:var(--colorG);
}


/* === Liste d'étudiants === */
#listeEtudiants{
  display: flex;
  flex-direction: column;
  font-style: italic;
  font-size: 15px;
}

#listeEtudiants .Etudiant{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

#listeEtudiants .star{
  width: 50px;
  flex: 0 0 50px;
  text-align: center;
}

#listeEtudiants .nom{
  font-weight: bold;
  margin: 0 10px;
  width: 15%;
  overflow-wrap: anywhere;
}

#listeEtudiants .mail{
  color: var(--colorGhover);
  min-width: 100px;
  overflow-wrap: anywhere;
}

#listeEtudiants .option{
  color: var(--colorG);
  min-width: 100px;
  margin-left: 5px;
  overflow-wrap: anywhere;
}

/* === Helpers largeur === */
.largeur100{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.largeur60{
  width: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  text-align: center;
}

.largeur80bloque{
  width: 80%;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: auto;
}

/* === Checkboxes arborescence === */
.arbo-checkbox {
  width: 16px;
  height: 16px;
}

.Creneauxcolle {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;   /* passage à la ligne si nécessaire */
  background-color: var(--colorG);
  width: 100%;
  max-width: 100%;
  border-radius: 8px;
  margin: 10px;
  justify-content: flex-start;
  font-family: var(--myfontfamily);
  color: var(--textBlanc);
  padding: 5px 10px;
  gap: 5px;
  box-sizing: border-box; /* inclut padding dans la largeur totale */
}

.editable {
    cursor: pointer;
    text-decoration: underline dotted; /* souligné en pointillés */
}

.editable:hover {
    color: gray;       /* bleu plus foncé au survol */
    text-decoration: underline solid;
}

.suppcolle, .suppcollenoclic{
  font-style: italic;
  width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.suppcolle:hover{
  background-color: var(--colorGhover);
  cursor: pointer;
}

.nomColleur{
  width: 120px;
}

.mat, .jour{
  width: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.heure, .duree{
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* === Contraintes === */
#contraintesAff{
  display: flex;
  flex-direction: column;
  font-family: var(--myfontfamily);
  justify-content: flex-start;
  gap: 5px;
}

.ligneContrainte{
  display: flex;
  flex-direction: row;
  gap: 10px;
}

/* === Tableau colloscope === */
.colloscope {
  border-collapse: collapse;
  table-layout: auto;
  width: 100%;
  font-size: 12px; /* taille uniforme et réduite */
}

/* Bordures visibles uniquement pour le colloscope */
.colloscope, 
.colloscope th, 
.colloscope td {
  border: 1px solid black;
}

/* Cellules */
.colloscope th,
.colloscope td {
  padding: 4px 6px;        /* réduit mais lisible */
  text-align: center;      /* tout centré horizontalement par défaut */
  vertical-align: middle;  /* tout centré verticalement */
  white-space: nowrap;     /* évite les retours à la ligne forcés */
}
/* Cellules semaine (en-tête plus compact) */
/* En-tête (première ligne) */
.colloscope tr:first-child td {
  background-color: #24649c;
  color: white;
  font-weight: bold;
  font-size: 13px; /* légèrement plus grand pour les titres */
}

.colloscope tr:first-child td.semaine {
  font-size: 1em;        /* plus petit que les autres cellules */
  white-space: normal;    /* autorise le retour à la ligne */
  line-height: 1.2;       /* réduit l’interligne */
  word-wrap: break-word;  /* coupe si nécessaire */
  padding: 2px 4px;       /* encore plus compact */
  width: 30px;
  font-weight: normal;
}
.colloscope td.group {
  font-size: 1em;        /* plus petit que les autres cellules */
  white-space: normal;    /* autorise le retour à la ligne */
  line-height: 1.2;       /* réduit l’interligne */
  word-wrap: break-word;  /* coupe si nécessaire */
  padding: 3px 5px;       /* encore plus compact */
  width: 30px;
}

/* Variante sans bordures (si tu veux garder la logique de .tableContraintesNoBorders) */
.colloscope.tableContraintesNoBorders,
.colloscope.tableContraintesNoBorders tr,
.colloscope.tableContraintesNoBorders td {
  border: none;
  padding: 4px 6px;
}

/* Alignement gauche forcé si besoin */
.colloscope td.align_gauche {
  text-align: left;
}


/* ==============================
   ADAPTATION SMARTPHONE
============================== */
@media screen and (max-width: 768px) {
  body {
    font-size: 12px;
  }

  #top, #image, main, footer {
    width: 100%;
  }
  main{
        overflow-x: auto;   /* permet le scroll horizontal */
  }
  #image {
    height: 180px;
    background-size: cover;
    background-position: center;
  }
  #titre {
    font-size: 18px;
    max-width: 80%;
  }
  #soustitre {
    font-size: 12px;
    max-width: 80%;
  }

  #rejoindre_classes {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .rejoindre_classe {
    width: 90%;
    margin-bottom: 15px;
    padding-left: 20px;
  }

  #navClasse {
    flex-direction: column;
    gap: 10px;
    align-items: center; /* centre les enfants horizontalement */
  }
  .itemClasse {
    width: 100%;
  }

  .boutonContenuSettings,
  .boutonContenuJoin,
  .boutonContenuAdd,
  .boutonContenuEdit,
  .boutonSimple {
    min-width: auto;
    width: 90%;
    font-size: 12px;
    padding: 10px;
  }

  a.boutonContenuSettings {
    text-decoration: none !important;
  }

  table {
    display: block;
    overflow-x: auto;
    width: 100%;
  }

  .elevesColle {
    flex-direction: column;
    font-size: 10px;
  }

  .groupe, .geleve {
    width: 100%;
    max-width: none;
  }

  #Navigation_dossier {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  #Dossier_bandeau_gauche,
  #Dossier_bandeau_droit {
    width: 90%;
  }
  #contenu,.contenu {
    transform: scale(0.9);
    transform-origin: top center;
  }

}