.eval_colles{
    width: 100%;
    min-height : 75vh;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

@media screen and (max-width:850px){
    #eval_colles{
        flex-direction: column;
    }
}

.colle{
    display: flex;
    flex-direction: column;
    width:30%;
    min-height:100%;
    background-color:var(--colorG);
    align-items: center;
    margin: 10px;
    padding: 5px;
    border-radius: 10px;
    background-color: var(--textBlanc);
}

.colle .NomDeLeleve{
    width:fit-content;
    text-align: center;
    color : var(--colorG);
    padding: 5px;
    padding-left:15px;
    padding-right:15px;
    border-radius: 5px;
    
}

.Sujet, .Eval ,.Edition, .Corr{
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    border: 2px var(--colorG) solid;
    display: inline-block;
    overflow:auto;
    border-radius: 5px;
    padding: 2%;
    font-size: 0.8em;
    width:96%;
    /* Demandé explicitement : le texte du sujet/corrigé (rendu markdown, voir
       js/gestion_markedjsNC.js) s'affichait centré par défaut — align-items/justify-content
       ci-dessus sont sans effet ici (cet élément est en display:inline-block, pas flex/grid) ; le
       vrai centrage venait de text-align:center hérité d'un ancêtre. Aligné à gauche comme un
       document normal — les correctifs ciblés pre/blockquote/ul ci-dessous deviennent redondants
       avec celui-ci mais restent inoffensifs. */
    text-align: left;
    /* Demandé explicitement : interligne un peu plus généreux que le défaut du navigateur (~1.2)
       pour une lecture plus confortable d'un énoncé/corrigé. */
    line-height: 1.6;
}
/* Bug réel corrigé (signalé par l'utilisateur : trop d'espace vertical au-dessus/en dessous de
   "Exercice N") : le line-height:1.6 ci-dessus s'hérite aussi dans les titres ## / ###, dont la
   police est plus grande que le texte courant — sur un titre de ~19px ça donnait une boîte de
   ligne de ~31px (1.6 × 19.2px, vérifié), avec l'excédent réparti au-dessus ET en dessous du texte
   du titre. Resserré spécifiquement pour les titres (convention typographique standard : les
   titres ont normalement un interligne plus serré que le texte courant), sans toucher au confort
   de lecture des paragraphes eux-mêmes. */
.Sujet h1, .Sujet h2, .Sujet h3,
.Corr h1, .Corr h2, .Corr h3 {
    line-height: 1.25;
}
/* Espacement entre paragraphes/exercices (demandé explicitement : "les exercices s'enchaînent
   trop") — le reset global *{margin:0} (stylev2.css) met TOUS les éléments à zéro de marge, donc
   sans ceci, deux blocs qui se suivent (fin d'un exercice, titre du suivant) n'ont aucun espace
   entre eux au-delà de leur simple hauteur de ligne, peu importe les lignes vides dans le markdown
   source (une ligne vide markdown ne crée qu'une coupure de paragraphe, pas un espacement visuel,
   sans marge). Pas d'équivalent "\vspace" à ajouter dans le markdown lui-même : la bonne marge se
   met ici, une fois, pour tout contenu affiché — pas à rajouter à la main dans chaque sujet. */
.Sujet h1, .Sujet h2, .Sujet h3,
.Corr h1, .Corr h2, .Corr h3 {
    margin-top: 1.1em;
}
.Sujet h1:first-child, .Sujet h2:first-child, .Sujet h3:first-child,
.Corr h1:first-child, .Corr h2:first-child, .Corr h3:first-child {
    margin-top: 0;
}
.Sujet p, .Corr p,
.Sujet ul, .Corr ul,
.Sujet ol, .Corr ol {
    margin-bottom: 0.6em;
}
/* Taille par défaut des images markdown (![...](...)) dans un sujet/corrigé — demandé
   explicitement ("réduire la taille de l'image, moitié moins"). Pas de réglage possible au cas par
   cas depuis le markdown lui-même : le HTML brut (<img width="...">) est désactivé par ce rendu
   markdown (échappé en texte plutôt qu'interprété, vérifié) — seule une règle CSS par défaut est
   possible. img{max-width:100%} (stylev2.css) limitait déjà le débordement mais laissait l'image
   remplir presque toute la largeur du bloc ; ramenée à la moitié ici, centrée. */
.Sujet img, .Corr img {
    max-width: 50%;
    height: auto;
    display: block;
    margin: 0.6em auto;
}
.Sujet{
    height:100%;
    margin-bottom: 2%;
}
.Corr{
    height:60%;
}
.Edition{
    height:40%;
    display: none;
}
.Eval{
    height:50%;
}

/* Éléments générés par le rendu markdown (voir js/gestion_markedjsNC.js) à l'intérieur d'un sujet
   ou d'un corrigé — .Sujet/.Corr sont maintenant alignés à gauche par défaut (voir ci-dessus), ces
   règles ne font donc plus que reconfirmer l'alignement à gauche pour ces éléments précis tout en
   leur ajoutant leur propre mise en forme (fond, bordure, retrait...). */
.Sujet pre, .Corr pre {
    text-align: left;
    background-color: rgba(0,0,0,0.06);
    border-radius: 6px;
    padding: 8px 10px;
    overflow-x: auto;
    font-size: 0.9em;
}
.Sujet code, .Corr code {
    font-family: 'Consolas', 'Courier New', monospace;
    background-color: rgba(0,0,0,0.06);
    border-radius: 3px;
    padding: 1px 4px;
}
.Sujet pre code, .Corr pre code {
    background: none;
    padding: 0;
}
.Sujet blockquote, .Corr blockquote {
    text-align: left;
    border-left: 3px solid var(--colorG);
    margin: 8px 0;
    padding: 4px 12px;
    color: var(--enTetePied);
    font-style: italic;
}
.Sujet ul, .Sujet ol, .Corr ul, .Corr ol {
    text-align: left;
    padding-left: 1.6em;
}
textarea[name=editeur]
{
    background-color: var(--textBlanc);
    background-color: #404050;
    color: var(--textBlanc);
    resize : both;
    width : 95%;
    height : 80%;
    font-size: 0.8em;
}

.mon_boutoncolle {
    position: relative; /* Vous pouvez utiliser 'absolute' ou 'fixed' selon vos besoins */
    padding: 5px;
    width: fit-content;
    border-radius: 10px;
    border: 2px solid #24649c;
    text-align: center;
    background-color: #24649c;
    background-image: url('../images/save.svg');
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 10px 5px;
    padding-left: 40px;
    cursor: pointer;
    color: var(--textBlanc);
    margin:auto;
}

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

/* Lien "exemple minimal ..." (voir js/gestion_markedjsNC.js) — discret, en texte cliquable plutôt
   qu'en bouton, même esprit que .creneau-colloscope-voir-plus. Bug réel corrigé (signalé par
   l'utilisateur : "je ne le vois pas") : var(--textBlanc) (= antiquewhite, quasi blanc) convient à
   .creneau-colloscope-voir-plus qui repose sur un fond sombre, mais ici le lien est posé sur le fond
   clair/crème de .Sujet/.Corr — texte quasi invisible dessus. var(--colorG) (le bleu du bouton
   "Sauvegarder et voir" et de la bordure de la carte) contraste correctement sur ce fond clair. */
.exemple-minimal-lien {
    display: block;
    width: fit-content;
    margin: 4px auto 0;
    font-size: 0.8em;
    color: var(--colorG);
    opacity: 0.8;
    text-decoration: underline;
    cursor: pointer;
}
.exemple-minimal-lien:hover {
    opacity: 1;
}

/* Mode édition (voir js/gestion_markedjsNC.js, classe "en-edition" ajoutée/retirée par JS sans
   toucher aux enfants — gererBoutonValider/gererBoutonValiderCorr y accèdent par position,
   children[0]/[1]) : bouton + lien "exemple minimal" toujours entièrement visibles, le textarea se
   contente de l'espace restant au lieu d'un pourcentage fixe qui les poussait hors de la zone
   visible (bug réel signalé : le lien n'apparaissait jamais, caché sous un minuscule scroll
   interne). align-items:stretch écrase le align-items:center hérité de la règle .Sujet/.Corr (sans
   effet d'habitude puisqu'elle est en display:inline-block, mais actif dès qu'on passe en flex ici). */
.Sujet.en-edition, .Corr.en-edition {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.en-edition textarea[name=editeur] {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}
.en-edition .mon_boutoncolle,
.en-edition .exemple-minimal-lien {
    flex: 0 0 auto;
}

#NbEleve{
display: flex;
flex-direction: row;
justify-content: space-around;
}

.nbEleve{
background-color: #24649c;
width: 20px;
text-align: center;
padding: 5px;
border-radius: 4px;
margin : 5px;
color: var(--textBlanc);
}
.nbEleve:hover{
    cursor: pointer;
    background-color: #5196d1;

}

#bandeau_creer_colle{
    width: 100%;
    background-color: #BEBEBE;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}

.bandeau_item{
    padding: 10px;
}
  
  
#Dossiers{
    width: fit-content;
}

#topright {
    height: 100%;
}
.icon{
    height:100%;
    padding: 5px;
    border-radius: 5px;
}
.icon:hover{
    cursor: pointer;
    background-color: var(--textBlanc);
}
.bold {
    font-weight: bold;
}

.ligne-titre-colle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.ligne-titre-colle h1 {
    margin: 0;
}
.ligne-titre-colle .icon {
    /* .icon (plus haut) suppose height:100% d'un parent à hauteur fixe (ex. #topright) : ici la
       ligne de titre n'a pas de hauteur fixe, on donne donc une taille explicite au crayon. */
    height: 1.3em;
    width: 1.3em;
    padding: 4px;
}

#popupModifierTitre .modal-content {
    width: 90%;
    max-width: 500px;
}
#popupModifierTitre input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    font-size: 1em;
    margin: 10px 0;
}



/* Styles pour la modale */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
  }
  
  .modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 60%;
  }
  
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
  }

  /* Popup d'attribution/désattribution de sujet (#assignModal) : distingue visuellement les
     colles qui ont déjà un sujet attribué (pas seulement une couleur, un texte l'indique aussi,
     pour rester lisible même sans percevoir la couleur). */
  #listeColles label {
    display: block;
    padding: 4px 6px;
    border-radius: 4px;
  }
  #listeColles label.colle-deja-attribuee {
    background-color: #fdf3d6;
  }
  #listeColles .badge-deja-attribuee {
    color: #9a7b1a;
    font-style: italic;
    font-size: 0.9em;
  }
  /* Groupe avec plus d'élèves que ce sujet n'a de colles individuelles (A/B/C/D...) — certains
     élèves resteraient sans sujet si on assigne tel quel. Rouge/orange, plus alarmant que le badge
     "déjà attribué" (jaune, simple information). */
  #listeColles label.groupe-en-souseffectif-sujet {
    background-color: #fbe1de;
  }
  #listeColles .badge-manque-sujet {
    display: block;
    color: #9a3324;
    font-style: italic;
    font-size: 0.9em;
  }

  /* Styles pour l'arborescence */
  .tree ul {
    list-style-type: none;
    padding-left: 20px;
  }
  
  .tree li {
    cursor: pointer;
  }
  
  .tree li::before {
    content: "▶";
    display: inline-block;
    margin-right: 5px;
  }
  
  .tree li.expanded::before {
    content: "▼";
  }

.colle-terminee-ligne {
  display: block;
  padding: 8px 14px;
  margin: 4px auto;
  width: 80%;
  max-width: 500px;
  border-radius: 8px;
  background-color: var(--colorG);
  color: var(--textBlanc);
  text-decoration: none;
  text-align: center;
}
.colle-terminee-ligne:hover {
  background-color: var(--colorGhover);
}
/* Terminée mais pas encore validée : orange plutôt que vert, pour signaler qu'il reste une action
   à faire (cliquer dessus ramène sur evaluerColle.php pour valider). Une fois validée, redevient
   vert comme les autres liens de ce menu. */
.colle-terminee-ligne.colle-terminee-a-valider {
  background-color: #d98c1e;
}
.colle-terminee-ligne.colle-terminee-a-valider:hover {
  background-color: #c67a10;
}
.colle-terminee-statut {
  font-style: italic;
  font-size: 0.85em;
}

/* ==============================
   Évaluation de la colle (evaluerColle.php)
============================== */

.chrono-bloc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin: 10px auto;
  padding: 10px 24px;
  border-radius: 12px;
  background-color: var(--colorG);
  color: var(--textBlanc);
  transition: background-color 0.4s ease;
}
.chrono-bloc.chrono-orange {
  background-color: #d98c1e;
}
.chrono-bloc.chrono-rouge {
  background-color: #c0392b;
}
.chrono-affichage {
  font-size: 2.4em;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}
.chrono-actions {
  display: flex;
  gap: 14px;
}
.chrono-icone {
  cursor: pointer;
  font-size: 1.6em;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 8px;
  border: 2px solid var(--textBlanc);
}
.chrono-icone:hover {
  background-color: rgba(255,255,255,0.2);
}
.chrono-statut-texte {
  font-size: 0.9em;
  font-style: italic;
}

/* Chrono "par étudiant" (une colonne-eval par élève, voir js/evaluerColle.js) — même logique de
   couleur que .chrono-bloc mais en compact, dans la colonne de l'élève. */
.chrono-eleve {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
  margin: 6px 0;
  padding: 8px;
  border-radius: 10px;
  background-color: var(--colorG);
  color: var(--textBlanc);
  transition: background-color 0.4s ease;
}
.chrono-eleve.chrono-orange {
  background-color: #d98c1e;
}
.chrono-eleve.chrono-rouge {
  background-color: #c0392b;
}
.chrono-eleve-nom {
  font-size: 0.9em;
  font-weight: bold;
}
.chrono-eleve-affichage {
  font-size: 1.6em;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}
.chrono-eleve-sous-texte {
  font-size: 0.8em;
  font-style: italic;
  min-height: 1.1em;
}
.chrono-eleve-demarrer,
.chrono-eleve-fin {
  cursor: pointer;
  padding: 4px 14px;
  border-radius: 8px;
  border: 2px solid var(--textBlanc);
  font-size: 0.85em;
}
.chrono-eleve-demarrer:hover,
.chrono-eleve-fin:hover {
  background-color: rgba(255,255,255,0.2);
}

/* Onglet "Résultats" (menu classe, voir index.php/js/indexMenu.js, src/fct_resultats.php) : liste
   des colles terminées/évaluées visibles, une ligne cliquable par colle, puis compte rendu détaillé
   (réutilise .colonnes-eval/.colonne-eval ci-dessous, en lecture seule). */
.liste-resultats {
  width: 96%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ligne-resultat {
  background-color: var(--textBlanc);
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  cursor: pointer;
}
.ligne-resultat:hover, .ligne-resultat:focus {
  box-shadow: 0 1px 8px rgba(0,0,0,0.4);
  outline: none;
}
.resultat-entete {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-weight: bold;
  margin-bottom: 6px;
}
.resultat-statut {
  font-weight: normal;
  font-size: 0.85em;
  padding: 2px 8px;
  border-radius: 10px;
  background-color: var(--colorG);
  color: var(--textBlanc);
}
.resultat-eleves {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 0.9em;
}
.lien-retour-resultats {
  width: fit-content;
  margin: 0 auto 12px;
  cursor: pointer;
  text-decoration: underline;
  color: var(--colorG);
}
.compte-rendu-colle h2 {
  text-align: center;
}
.compte-rendu-colleur {
  text-align: center;
  margin-bottom: 10px;
}
.compte-rendu-bilan {
  width: 90%;
  margin: 0 auto 14px;
  background-color: rgba(0,0,0,0.06);
  border-radius: 6px;
  padding: 8px 12px;
}
.colonne-eval-readonly {
  cursor: default;
}
.resultat-note-globale {
  font-weight: bold;
  text-align: center;
  margin-bottom: 6px;
}
.remarque-lecture {
  margin-top: 8px;
  font-size: 0.9em;
  background-color: rgba(0,0,0,0.06);
  border-radius: 6px;
  padding: 6px 10px;
}

.colonnes-eval {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: flex-start;
  width: 96%;
  margin: 0 auto;
}
.colonne-eval {
  flex: 1 1 280px;
  max-width: 420px;
  min-width: 260px;
  background-color: var(--textBlanc);
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.colonne-eval.colonne-en-glissement {
  opacity: 0.4;
}
.colonne-eval-poignee {
  cursor: grab;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  margin-bottom: 8px;
  background-color: var(--colorG);
  color: var(--textBlanc);
  border-radius: 6px;
}
.colonne-eval-poignee-nom {
  flex: 1 1 auto;
  text-align: center;
}
.colonne-agrandir-btn {
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 1.1em;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
}
.colonne-agrandir-btn:hover {
  background-color: rgba(255,255,255,0.25);
}

.colonne-agrandie-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.55);
  z-index: 998;
}
.colonne-agrandie-overlay.visible {
  display: block;
}
.colonne-eval--agrandie {
  position: fixed;
  top: 5vh;
  left: 10%;
  width: 80%;
  max-width: 80%;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 999;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}

.repliable {
  margin-bottom: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
}
.repliable-titre {
  cursor: pointer;
  background-color: #eee;
  padding: 4px 8px;
  font-weight: bold;
  font-size: 0.9em;
  user-select: none;
}
.repliable-titre:hover {
  background-color: #ddd;
}
.repliable-titre.replie-titre::after {
  content: " (replié)";
  font-weight: normal;
  font-style: italic;
  font-size: 0.85em;
}
.repliable-contenu {
  padding: 8px;
  max-height: 320px;
  overflow-y: auto;
}
.repliable-contenu.replie {
  display: none;
}

.grille-evaluation {
  position: relative;
  padding: 6px 4px;
  margin-top: 10px;
}
.reperes-verticaux {
  position: absolute;
  top: 0;
  bottom: 22px; /* laisse la place aux libellés du bas, non traversés par les pointillés */
  left: 0;
  right: 0;
  pointer-events: none;
}
.reperes-verticaux .repere {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px dashed #999;
}
.partie-eval-titre {
  font-weight: bold;
  margin-top: 8px;
  color: var(--colorG);
}
.souspartie-eval-titre {
  font-weight: bold;
  font-style: italic;
  font-size: 0.85em;
  margin-top: 6px;
  color: #555;
}
.competence-eval {
  margin: 6px 0;
  position: relative;
}
.competence-eval-entete {
  display: flex;
  justify-content: space-between;
  font-size: 0.85em;
}
.competence-eval-bareme {
  color: #666;
}
.curseur-eval {
  width: 100%;
  box-sizing: border-box;
  height: 22px;            /* zone de prise plus haute : plus facile d'attraper le point */
  cursor: grab;
  accent-color: var(--colorG);
  touch-action: pan-y;     /* tactile : le glissement horizontal déplace le point, pas la page */
}
.curseur-eval:active {
  cursor: grabbing;
}
.curseur-eval:disabled {
  cursor: default;
}
.curseur-eval[data-vide="1"] {
  outline: 2px solid #d98c1e;
  border-radius: 4px;
}
.ligne-curseur-eval {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ligne-curseur-eval .curseur-eval {
  flex: 1 1 auto;
}
.ne-eval-label {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.75em;
  color: #666;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.note-eval {
  width: 90px;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid #999;
}
.note-eval-vide {
  border-color: #d98c1e;
  outline: 2px solid #d98c1e;
}
.commentaire-eval {
  width: 100%;
  box-sizing: border-box;
  margin-top: 3px;
  font-size: 0.8em;
  resize: vertical;
}
.labels-reperes {
  display: flex;
  justify-content: space-between;
  font-size: 0.7em;
  font-style: italic;
  color: #666;
  margin-top: 4px;
}
.labels-reperes span {
  flex: 1;
  text-align: center;
}

.note-calculee {
  margin-top: 10px;
  font-weight: bold;
  text-align: center;
  font-size: 1.1em;
  color: var(--colorG);
}

/* Note manuelle (colle sans grille de notation, voir evaluerColle.php) — champ libre plutôt qu'un
   calcul automatique, demandé explicitement. */
.note-manuelle-bloc {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: bold;
}
.note-manuelle-bloc input {
  width: 60px;
  text-align: center;
  border-radius: 4px;
  border: 1px solid #ccc;
  padding: 3px;
}

/* Note brute (avant arrondi au 0,5 supérieur) affichée à titre indicatif à côté de la note
   réellement stockée — demandé explicitement, "en petit en gris". */
.note-calculee-brute {
  font-weight: normal;
  font-size: 0.75em;
  color: #888;
}

.remarques-eval {
  margin-top: 10px;
}
.remarques-eval label {
  display: block;
  font-size: 0.85em;
  font-weight: bold;
  margin-top: 6px;
}
.remarques-eval textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid #999;
  padding: 4px;
  resize: vertical;
}

.bilan-general-bloc {
  width: 90%;
  max-width: 700px;
  margin: 20px auto;
}
.bilan-general-bloc label {
  display: block;
  font-weight: bold;
  margin-bottom: 4px;
}
.bilan-general-bloc textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid #999;
  padding: 8px;
  resize: vertical;
}

.sujet-incorrect-btn {
  display: block;
  width: fit-content;
  margin-left: auto;
  cursor: pointer;
  font-size: 0.75em;
  color: #666;
  border: 1px solid #999;
  border-radius: 10px;
  padding: 2px 8px;
  margin-top: 4px;
}
.sujet-incorrect-btn:hover {
  background-color: #eee;
}

.info-critere {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 100%;
  border: 1px solid #999;
  color: #666;
  font-size: 0.7em;
  font-style: normal;
  font-weight: normal;
  cursor: help;
  vertical-align: middle;
}

.lettres-sujet-eval-boites {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 12px 0;
}
.lettre-sujet-eval-choix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--colorG);
  border-radius: 6px;
  color: var(--colorG);
  font-weight: bold;
  font-size: 1.1em;
  cursor: pointer;
}
.lettre-sujet-eval-choix:hover {
  background-color: var(--colorG);
  color: var(--textBlanc);
}

.notice-verrouillee {
  background-color: #fdf1e0;
  border-left: 4px solid #d98c1e;
  color: #7a4e0a;
  font-weight: bold;
}

/* ==============================
   Codes de la classe (colloscope.php, réservé aux responsables de la classe)
   ============================== */
.codes-classe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 10px auto;
  width: 96%;
}
.code-classe-item {
  background-color: var(--textBlanc);
  border-radius: 8px;
  padding: 8px 14px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.code-classe-label {
  display: block;
  font-size: 0.75em;
  color: #666;
}
.code-classe-label em {
  font-style: italic;
}
.code-classe-valeur {
  display: block;
  font-family: monospace;
  font-size: 1.1em;
  font-weight: bold;
  letter-spacing: 1px;
  color: var(--colorG);
}

/* Colle "validée par l'administration" : grise, signale que rien ne peut plus bouger (au-delà
   même de la validation habituelle du colleur). */
.colle-terminee-ligne.colle-terminee-validee-admin {
  background-color: #888;
}
.colle-terminee-ligne.colle-terminee-validee-admin:hover {
  background-color: #777;
}

/* Créneaux du colloscope proposés dans "Ajouter une colle" (bouton +) */
.creneaux-colloscope {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 90%;
  max-width: 600px;
  margin: 8px auto;
}
.creneau-colloscope-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background-color: rgba(255,255,255,0.1);
  border: 1px solid var(--textBlanc);
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--textBlanc);
}
.creneau-colloscope-info {
  font-size: 0.9em;
}
.creneau-colloscope-ajouter {
  cursor: pointer;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--textBlanc);
  border-radius: 100%;
  font-weight: bold;
  font-size: 1.1em;
}
.creneau-colloscope-ajouter:hover {
  background-color: rgba(255,255,255,0.25);
}
.creneau-colloscope-tout {
  margin: 10px auto 0;
}

/* Demandé explicitement : discret, en texte cliquable plutôt qu'en bouton plein — comme le "Lire la
   suite..." d'un message WhatsApp trop long. Ne reprend donc PAS .boutonSimple (voir la génération
   PHP, afficher_creneaux_colloscope() dans src/evalColles.php). */
.creneau-colloscope-voir-plus {
  display: inline-block;
  margin: 6px 4px 0;
  font-size: 0.85em;
  color: var(--textBlanc);
  opacity: 0.7;
  text-decoration: underline;
  cursor: pointer;
}
.creneau-colloscope-voir-plus:hover {
  opacity: 1;
}

/* Marqueur "cette colle vient du colloscope" (sur la carte de la colle, "Rejoindre la colle") */
.badge-colloscope {
  font-size: 0.75em;
  text-align: center;
  opacity: 0.85;
}

/* Ligne "Colles terminées" d'un AUTRE colleur, vue par l'administration : même habillage que
   .colle-terminee-ligne mais pas un lien (pas de survol "cliquable", pas d'ouverture de la
   notation) — juste éventuellement un bouton de validation inline. */
.colle-terminee-non-cliquable {
  cursor: default;
}
.valider-admin-inline {
  display: inline-block;
  cursor: pointer;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--textBlanc);
  font-size: 0.8em;
}
.valider-admin-inline:hover {
  background-color: rgba(255,255,255,0.2);
}

/* Nom de la classe + codes de partage (index.php, avant "Paramètres de la classe") */
.infos-classe {
  width: 96%;
  margin: 10px auto;
  text-align: center;
}
.nom-classe-ligne {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1.3em;
  font-weight: bold;
  color: var(--textBlanc);
}
.modifier-nom-classe {
  cursor: pointer;
  font-size: 0.7em;
  opacity: 0.85;
}
.modifier-nom-classe:hover {
  opacity: 1;
}
#formRenommerClasse {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 8px auto;
}
#formRenommerClasse input {
  max-width: 280px;
}
/* Page d'accueil (non connecté) : choix du type d'accès (colleur/élève/administration) */
.acces-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 10px 0;
}
.acces-bouton {
  padding: 10px 22px;
  border-radius: 8px;
  border: 2px solid #24649c;
  background-color: var(--textBlanc);
  color: #24649c;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}
.acces-bouton:hover {
  background-color: #eef4fa;
}
.acces-bouton-actif {
  background-color: #24649c;
  color: var(--textBlanc);
}

/* Bouton dédié plutôt que .mon_bouton (60% de large + gros padding, beaucoup trop imposant à côté
   d'un simple champ texte inline). */
.bouton-renommer-classe {
  padding: 6px 14px;
  font-size: 0.95rem;
  border-radius: 6px;
  border: none;
  background-color: #24649c;
  color: var(--textBlanc);
  cursor: pointer;
}
.bouton-renommer-classe:hover {
  background-color: #5196d1;
}

/* ======================================================================================
   Éléments d'un sujet (labo des sujets : preparerColle.php, js/elements_labo.js)
   ====================================================================================== */
.colonne-elements { align-items: stretch; }
.colonne-elements .NomDeLeleve { align-self: center; font-weight: bold; }

.elements-liste { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.elements-vide { text-align: center; color: #888; font-size: 0.85em; padding: 14px 6px; }

.element-carte {
  background: #fff;
  border: 1px solid #c9b99a;
  border-left: 5px solid var(--colorG);
  border-radius: 6px;
  padding: 6px 8px;
  text-align: left;            /* sinon hérité "center" d'un ancêtre */
  font-size: 0.85em;
  line-height: 1.5;
  box-sizing: border-box;
}
.element-carte.type-1 { border-left-color: #b8860b; }
.element-carte.type-3 { border-left-color: #6a9a5a; }

.element-entete { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.element-libelle { font-weight: bold; color: var(--colorG); }
.element-actions { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.element-action {
  cursor: pointer; user-select: none; padding: 1px 5px; border-radius: 4px; color: #555; font-size: 0.95em;
}
.element-action:hover { background: var(--colorG); color: #fff; }
.element-action.danger:hover { background: #b02a2a; }
.element-action.inactif { opacity: 0.25; pointer-events: none; }
.element-deplacer-vers { font-size: 0.8em; max-width: 52px; border: 1px solid #ccc; border-radius: 4px; background: #fff; cursor: pointer; }

.element-corps p, .element-corrige-corps p { margin-bottom: 0.5em; }
.element-corps ul, .element-corps ol, .element-corrige-corps ul, .element-corrige-corps ol { padding-left: 1.4em; margin-bottom: 0.5em; }
.element-corps h1, .element-corps h2, .element-corps h3 { line-height: 1.25; margin: 0.6em 0 0.3em; font-size: 1.05em; }
.element-corps img, .element-corrige-corps img { max-width: 60%; height: auto; display: block; margin: 0.4em auto; }

.element-corrige { margin-top: 4px; background: rgba(0,0,0,0.04); border-radius: 4px; padding: 3px 6px; }
.element-corrige summary { cursor: pointer; font-weight: bold; color: #555; }
.element-corrige-corps { margin-top: 4px; }

.element-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.element-tag { font-size: 0.75em; padding: 1px 7px; border-radius: 10px; background: #e6e0d2; color: #444; }
.element-tag.tag-chapitre { background: #dbe8f5; color: #1d4f7c; }
.element-tag.tag-attente { background: #f7e7c4; color: #7a5a00; font-style: italic; }
.element-tag.tag-filiere { background: #e4efe0; color: #3b6a2a; }
.element-tag.tag-d1 { background: #e4efe0; } .element-tag.tag-d2 { background: #eef0d0; }
.element-tag.tag-d3 { background: #f7e7c4; } .element-tag.tag-d4 { background: #f5d3c0; } .element-tag.tag-d5 { background: #efc0c0; }
.element-auteur { font-size: 0.75em; color: #777; margin-top: 4px; font-style: italic; }

/* Bouton + entouré (ajouter un élément) */
.element-ajouter {
  align-self: center;
  width: 38px; height: 38px; line-height: 34px;
  border: 2px solid var(--colorG); border-radius: 50%;
  text-align: center; font-size: 26px; font-weight: bold; color: var(--colorG);
  cursor: pointer; user-select: none; margin: 4px 0 6px;
  transition: background-color 0.15s, color 0.15s;
}
.element-ajouter:hover, .element-ajouter:focus { background: var(--colorG); color: #fff; outline: none; }

/* Popups */
.popup-element-contenu { width: 92%; max-width: 480px; box-sizing: border-box; border-radius: 8px; text-align: left; font-size: 0.95em; }
.popup-element-contenu.large { max-width: 760px; }
.popup-element-contenu h3 { margin-bottom: 10px; }
.popup-aide { color: #666; font-size: 0.85em; margin: 6px 0; }
.choix-type { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 14px; }
.choix-type-bouton { text-align: center; cursor: pointer; }
.element-champ { margin: 12px 0; }
.element-champ > label { display: block; font-weight: bold; margin-bottom: 4px; }
.element-proprietes-titre { margin-top: 18px; border-top: 1px solid #ddd; padding-top: 10px; }
.groupe-boutons { display: flex; flex-wrap: wrap; gap: 6px; }
.bouton-choix {
  cursor: pointer; user-select: none; padding: 4px 11px; border-radius: 14px; border: 1px solid #aaa; background: #fff; font-size: 0.9em;
}
.bouton-choix:hover { border-color: var(--colorG); }
.bouton-choix.actif { background: var(--colorG); border-color: var(--colorG); color: #fff; }
.filiere-groupe { margin: 5px 0; }
.filiere-groupe-nom { display: block; font-size: 0.78em; color: #777; margin-bottom: 2px; }
.champ-markdown { margin: 10px 0; }
.champ-markdown-entete { display: flex; justify-content: space-between; align-items: center; }
.champ-markdown-entete label { font-weight: bold; }
.element-apercu-bascule { color: var(--colorG); text-decoration: underline; cursor: pointer; font-size: 0.85em; }
.element-textarea { width: 100%; box-sizing: border-box; font-family: Consolas, 'Courier New', monospace; font-size: 0.9em; padding: 6px; border: 1px solid #aaa; border-radius: 4px; resize: vertical; }
.element-apercu { border: 1px dashed #aaa; border-radius: 4px; padding: 6px 8px; min-height: 4em; background: #fff; line-height: 1.5; }
.element-apercu p { margin-bottom: 0.5em; }
.element-select-chapitre, .element-nouveau-chapitre, .banque-filtres select, .banque-filtres input { padding: 5px; border: 1px solid #aaa; border-radius: 4px; max-width: 100%; box-sizing: border-box; }
.element-nouveau-ligne { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.element-boutons { margin-top: 16px; text-align: center; }
.element-enregistrer { display: inline-block; cursor: pointer; }

.banque-filtres { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.banque-resultats { max-height: 55vh; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.banque-element { border: 1px solid #ccc; border-radius: 6px; padding: 6px 8px; background: #fff; }
.banque-entete { font-size: 0.8em; color: #666; margin-bottom: 4px; }
.banque-apercu { font-size: 0.9em; line-height: 1.45; max-height: 9em; overflow: hidden; }
.banque-apercu p { margin-bottom: 0.4em; }
.banque-actions { text-align: right; margin-top: 4px; }
.banque-actions .boutonSimple { display: inline-block; cursor: pointer; }

/* Visionneuse d'éléments sur la page d'évaluation (js/elements_eval.js) */
.elements-viewer { width: 100%; margin: 6px 0; text-align: left; box-sizing: border-box; }
.ev-nav { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--colorG); color: var(--textBlanc); border-radius: 6px; padding: 4px 8px; }
.ev-titre { flex: 1 1 auto; text-align: center; font-weight: bold; font-size: 0.9em; }
.ev-fleche { cursor: pointer; user-select: none; padding: 2px 8px; border-radius: 4px; }
.ev-fleche:hover { background: rgba(255,255,255,0.25); }
.ev-fleche.inactif { opacity: 0.3; pointer-events: none; }
.ev-bascule { cursor: pointer; font-size: 0.75em; text-decoration: underline; white-space: nowrap; user-select: none; }
.ev-puces { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 6px 0 2px; }
.ev-puce { cursor: pointer; user-select: none; min-width: 22px; text-align: center; font-size: 0.8em; padding: 1px 4px; border-radius: 11px; border: 1px solid var(--colorG); color: var(--colorG); }
.ev-puce.actif { background: var(--colorG); color: #fff; }
.ev-zone { margin-top: 6px; font-size: 0.9em; line-height: 1.5; }
.ev-element-entete { font-weight: bold; color: var(--colorG); margin: 10px 0 2px; border-bottom: 1px solid #ddd; }
.ev-element p { margin-bottom: 0.5em; }
.ev-element ul, .ev-element ol { padding-left: 1.4em; margin-bottom: 0.5em; }
.ev-element img { max-width: 60%; height: auto; display: block; margin: 0.4em auto; }

/* ======================================================================================
   Police des formules et du texte des énoncés (markdown rendu)
   ====================================================================================== */
/* Bug : la règle globale *{font-family:Quicksand} (stylev2.css) s'applique à CHAQUE élément, y compris à
   l'intérieur d'une formule KaTeX — chiffres, opérateurs, parenthèses s'affichaient donc en Quicksand au
   lieu de la police mathématique (KaTeX_Main, style Computer Modern), mélangés aux lettres en KaTeX_Math.
   "html .katex *" (spécificité supérieure à *) rend la main à .katex, sans écraser les classes de police
   propres à KaTeX (.katex .mathnormal, .textbf...), plus spécifiques encore. */
html .katex * { font-family: inherit; }
html .katex { font-family: KaTeX_Main, 'Times New Roman', serif; }

/* Texte des énoncés/corrigés : police à empattements proche d'un document LaTeX, en harmonie avec les
   formules (au lieu de Quicksand, une police sans empattements arrondie). Sélecteurs simples (liste de
   balises) : la règle globale *{font-family} oblige à cibler les balises une à une, et on évite ainsi
   d'atteindre l'intérieur des formules KaTeX (spans), qui gardent leur propre police. */
.element-corps,
.element-corps p,
.element-corps li,
.element-corps ul,
.element-corps ol,
.element-corps h1,
.element-corps h2,
.element-corps h3,
.element-corps h4,
.element-corps blockquote,
.element-corps em,
.element-corps strong,
.element-corps a,
.element-corps td,
.element-corps th,
.element-corps summary,
.element-corrige-corps,
.element-corrige-corps p,
.element-corrige-corps li,
.element-corrige-corps ul,
.element-corrige-corps ol,
.element-corrige-corps h1,
.element-corrige-corps h2,
.element-corrige-corps h3,
.element-corrige-corps h4,
.element-corrige-corps blockquote,
.element-corrige-corps em,
.element-corrige-corps strong,
.element-corrige-corps a,
.element-corrige-corps td,
.element-corrige-corps th,
.element-corrige-corps summary,
.ev-element,
.ev-element p,
.ev-element li,
.ev-element ul,
.ev-element ol,
.ev-element h1,
.ev-element h2,
.ev-element h3,
.ev-element h4,
.ev-element blockquote,
.ev-element em,
.ev-element strong,
.ev-element a,
.ev-element td,
.ev-element th,
.ev-element summary,
.banque-apercu,
.banque-apercu p,
.banque-apercu li,
.banque-apercu ul,
.banque-apercu ol,
.banque-apercu h1,
.banque-apercu h2,
.banque-apercu h3,
.banque-apercu h4,
.banque-apercu blockquote,
.banque-apercu em,
.banque-apercu strong,
.banque-apercu a,
.banque-apercu td,
.banque-apercu th,
.banque-apercu summary,
.element-apercu,
.element-apercu p,
.element-apercu li,
.element-apercu ul,
.element-apercu ol,
.element-apercu h1,
.element-apercu h2,
.element-apercu h3,
.element-apercu h4,
.element-apercu blockquote,
.element-apercu em,
.element-apercu strong,
.element-apercu a,
.element-apercu td,
.element-apercu th,
.element-apercu summary,
.cadre,
.cadre p,
.cadre li,
.cadre ul,
.cadre ol,
.cadre h1,
.cadre h2,
.cadre h3,
.cadre h4,
.cadre blockquote,
.cadre em,
.cadre strong,
.cadre a,
.cadre td,
.cadre th,
.cadre summary {
  font-family: 'Latin Modern Roman', 'CMU Serif', Cambria, 'Times New Roman', Georgia, serif;
}
.element-corps, .element-corrige-corps, .ev-element, .banque-apercu { font-size: 1.02em; }


/* ======================================================================================
   Matériel supplémentaire (colonne "Matériel supplémentaire" du labo, preparerColle.php) et ajout à un étudiant (evaluerColle.php)
   ====================================================================================== */
/* Colonne "Matériel supplémentaire" : toujours affichée, à droite des sujets A/B/C... */
.colonne-materiel { align-items: stretch; }
.colonne-materiel .NomDeLeleve { align-self: center; font-weight: bold; }
.materiel-aide { text-align: center; color: #666; font-size: 0.85em; margin: 2px 8px 10px; line-height: 1.8; }

/* Évaluation : bouton "＋ Matériel", fenêtre de choix, éléments ajoutés pour l'étudiant */
.ev-materiel-btn { cursor: pointer; font-size: 0.75em; white-space: nowrap; user-select: none; background: rgba(255,255,255,0.22); border-radius: 10px; padding: 1px 8px; }
.ev-materiel-btn:hover { background: rgba(255,255,255,0.4); }
.ev-supp-etiquette { display: inline-block; font-size: 0.75em; background: #e4efe0; color: #3b6a2a; border-radius: 10px; padding: 1px 8px; margin-bottom: 4px; }
.ev-supp-retirer { cursor: pointer; font-size: 0.78em; color: #b02a2a; text-decoration: underline; margin-top: 4px; display: inline-block; user-select: none; }
.ev-puce.supp { border-style: dashed; }
.materiel-choix-liste { max-height: 55vh; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.materiel-choix-liste .boutonSimple { display: inline-block; width: auto; height: auto; min-width: 0; padding: 5px 14px; font-size: 0.9em; white-space: nowrap; }