/* ============================================================
   Carnet de notes — styles spécifiques au module.
   Réutilise les tokens de couleur/typo, le système de modales/panneau
   latéral, les cartes de liste (.edt-carte), les badges matière
   (.prog-badge-matiere) et les menus dropdown (.prog-menu-dropdown) déjà
   définis dans cahier-journal.css, emploi-du-temps.css et
   programmations.css (chargés avant ce fichier, cf. index.php/carnet.php) :
   on n'y redéfinit que la mise en page propre à ce module (grille notes
   pivotée, boutons de saisie par barème, bilans élèves avec radar/courbes
   SVG natives, réglages systèmes de notation).
   ============================================================ */

/* ---------- Vue liste : carte carnet ---------- */

.cdn-carte .edt-carte-lien {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.cdn-carte-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 8px;
  background: #F0F7F6;
  color: var(--principale);
  font-size: 28px;
}

/* ---------- Vue grille : en-tête + sélecteurs ---------- */

.cdn-grille-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.cdn-select {
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #DDE5E4;
  font-family: var(--font-corps);
  font-weight: 600;
  font-size: 13px;
  color: rgb(0, 15, 68);
  background: #FFFFFF;
  box-sizing: border-box;
}

.cdn-toolbar-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.cdn-toolbar-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid #DDE5E4;
  background: #FFFFFF;
  font-family: var(--font-corps);
  font-weight: 600;
  font-size: 13px;
  color: var(--secondaire);
  cursor: pointer;
}

.cdn-toolbar-btn[hidden] {
  display: none;
}

.cdn-toolbar-btn:hover {
  background: #F0F7F6;
  border-color: var(--principale);
  color: var(--principale);
}

.cdn-toolbar-btn .ph {
  font-size: 16px;
}

/* ---------- Grille de notes (scroll horizontal, colonne prénom figée) ---------- */

.cdn-grille-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border-radius: 10px;
  background: var(--fond);
}

.cdn-grille-table {
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-corps);
}

.cdn-grille-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #FAFDFC;
  border-bottom: 2px solid #DDE5E4;
  padding: 0;
  vertical-align: bottom;
}

.cdn-th-eleve {
  position: sticky !important;
  left: 0;
  z-index: 5 !important;
  background: #FAFDFC;
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  text-align: left;
  padding: 10px 14px !important;
  font-size: 13px;
  color: var(--secondaire);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  border-right: 2px solid #DDE5E4;
}

.cdn-th-eleve .ph {
  margin-left: 4px;
  font-size: 13px;
}

.cdn-th-eval {
  width: 46px;
  min-width: 46px;
  max-width: 46px;
  height: 200px;
  text-align: left;
  padding: 6px 4px 8px !important;
}

/* Transparent (pas #FAFDFC hérité de thead th) : le libellé pivoté
   déborde largement dans les colonnes voisines (texte long, angle
   -90deg), un fond opaque sur chaque <th> masquerait ce débordement dès
   qu'une cellule suivante peint par-dessus (ordre du DOM). Sans
   conséquence visuelle : rien à cacher sous cette zone en scroll
   horizontal (contrairement à cdn-th-eleve, colonne figée à gauche).
   Sélecteur composé pour battre la spécificité de .cdn-grille-table
   thead th (0,1,2) > .cdn-th-eval seul (0,1,0). */
.cdn-grille-table thead th.cdn-th-eval {
  background: var(--fond);
}

.cdn-th-eval-inner {
  display: flex;
  align-items: flex-end;
  height: 100%;
  padding-left: 4px;
}

.cdn-th-eval-label {
  display: block;
  transform: rotate(-90deg) translate(0, 25px);
  transform-origin: bottom left;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: var(--texte);
  cursor: pointer;
}

.cdn-th-eval-sub {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--secondaire);
}

/* Colonne "+ Ajouter évaluation" : dernière colonne d'en-tête, texte
   inline non pivoté (contrairement aux libellés d'évaluation) pour
   rester lisible comme un lien d'action, cf. maquette Teetsh. */
.cdn-th-eval-ajouter {
  width: auto;
  width: 140px;
  min-width: 140px;
  max-width: 140px;
  max-width: none;
}

.cdn-th-eval-ajouter-label {
  transform: none;
  white-space: nowrap;
  color: var(--principale);
  font-weight: 700;
  max-width: none;
}

.cdn-th-eval-ajouter-label:hover {
  text-decoration: underline;
}

.cdn-cell-ajouter {
  width: auto;
  width: 140px;
  min-width: 140px;
  max-width: 140px;
  max-width: none;
}

.cdn-grille-table tbody td {
  padding: 0;
  border-bottom: 1px solid #EDF3F2;
  text-align: center;
}

.cdn-td-eleve {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--fond);
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  text-align: left !important;
  padding: 8px 14px !important;
  font-weight: 400;
  color: var(--texte);
  border-right: 2px solid #DDE5E4;
  white-space: nowrap;
  font-size: 13px;
}

.cdn-grille-table tbody tr:nth-child(even) .cdn-td-eleve {
  background: #FAFDFC;
}

.cdn-cell {
  width: 46px;
  min-width: 46px;
  max-width: 46px;
  height: 40px;
}

/* ---------- Grille transposée (vue par évaluation) : lignes = évaluations,
   colonnes = élèves — demande explicite, plus lisible pour "qui a eu quoi
   à telle évaluation" que l'inverse. Titre d'évaluation en 1re colonne
   figée (texte normal, non pivoté), noms d'élèves en en-tête de colonne
   (courts, pas besoin de pivoter). ---------- */

.cdn-th-evaluation {
  position: sticky !important;
  left: 0;
  z-index: 5 !important;
  background: var(--fond);
  min-width: 220px;
  text-align: left;
  padding: 10px 14px !important;
  font-size: 13px;
  color: var(--secondaire);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  border-right: 2px solid #DDE5E4;
}

.cdn-th-evaluation .ph {
  margin-left: 4px;
  font-size: 13px;
}

.cdn-th-eleve-colonne {
  width: 90px;
  min-width: 90px;
  max-width: 90px;
  padding: 10px 6px !important;
  font-size: 12px;
  font-weight: 700;
  color: var(--texte);
  text-align: center;
  white-space: normal;
}
.cdn-th-eleve-colonne .cdn-th-eleve-prenom,
.cdn-th-eleve-colonne .cdn-th-eleve-nom {
  display: block;
}
.cdn-th-eleve-colonne .cdn-th-eleve-nom {
  font-weight: 400;
  font-size: 11px;
  color: var(--secondaire);
}

.cdn-td-evaluation {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--fond);
  min-width: 220px;
  text-align: left !important;
  padding: 8px 14px !important;
  font-weight: 400;
  color: var(--texte);
  border-right: 2px solid #DDE5E4;
  font-size: 13px;
}

.cdn-grille-table-transposee tbody tr:nth-child(even) .cdn-td-evaluation {
  background: #FAFDFC;
}

.cdn-td-evaluation-titre {
  cursor: pointer;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cdn-td-evaluation-titre:hover {
  color: var(--principale);
  text-decoration: underline;
}

.cdn-td-evaluation-ajouter {
  padding: 10px 14px !important;
  text-align: left;
  font-weight: 700;
  color: var(--principale);
  cursor: pointer;
}

.cdn-td-evaluation-ajouter:hover {
  text-decoration: underline;
}

/* Cellule de grille = texte coloré seul (pas de pastille de fond), cf.
   maquette Teetsh : la couleur porte l'information, pas un badge. */
.cdn-cell-value {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 28px;
  margin: 0 auto;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: var(--texte);
  background: transparent;
}

.cdn-cell-value:hover {
  text-decoration: underline;
}

.cdn-cell-abs {
  color: #A9B4B2;
  font-size: 11px;
  font-weight: 600;
  font-style: italic;
}

.cdn-cell-empty {
  width: 30px;
  height: 22px;
  background: #FFFFFF;
  border: 1px solid #E0E6E5;
  border-radius: 4px;
  cursor: pointer;
}

.cdn-cell-empty:hover {
  border-color: var(--principale);
}

/* Palette de niveau NA/PA/A/D, texte seul — mêmes valeurs que les
   classes bouton cdn-note-btn-na/pa/a/d (cf. classeCouleurNiveau() dans
   carnet-de-notes.js), déclinées ici sans fond pour l'affichage en
   grille (cf. classeCelluleNiveau()). */
.cdn-cell-niveau-na { color: #D9534F; }
.cdn-cell-niveau-pa { color: #E8933A; }
.cdn-cell-niveau-a { color: #7CC576; }
.cdn-cell-niveau-d { color: #2E7D46; }

/* Couleurs de niveau (LSU-like, réutilisées pour toute échelle à 4-7
   niveaux) : dégradé rouge -> orange -> vert clair -> vert foncé, calculé
   côté JS selon la position relative du niveau dans son barème (cf.
   niveauCouleur() dans carnet-de-notes.js) plutôt que des classes fixes,
   pour s'adapter à un nombre de niveaux variable (4 pour LSU, 7 pour
   NA/PA/A+, N pour un barème personnalisé).
   Les couleurs par défaut ci-dessous servent de repli / d'exemple. */
.cdn-niveau-0 { background: #F6C6C6; color: #8A2323; }
.cdn-niveau-1 { background: #FBDDB0; color: #8A5A12; }
.cdn-niveau-2 { background: #E3EFB8; color: #5A6B1B; }
.cdn-niveau-3 { background: #C3E6C3; color: #256A2A; }

/* ---------- Modale "Gérer liste évaluations" (arborescence) ---------- */

.cdn-arbo-modal .modal-box {
  max-width: 1100px;
  height: 80vh;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.cdn-arbo-sidebar {
  border-right: 1px solid #E5EFEE;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cdn-arbo-niveau-groupe {
  display: flex;
  flex-direction: column;
}

.cdn-arbo-niveau-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-radius: 6px;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 13px;
  color: rgb(0, 15, 68);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cdn-arbo-niveau-header:hover {
  background: #F0F7F6;
}

.cdn-arbo-niveau-caret {
  transition: transform 0.15s ease;
  font-size: 13px;
}

.cdn-arbo-niveau-caret.is-ouvert {
  transform: rotate(90deg);
}

.cdn-arbo-niveau-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 6px;
}

.cdn-arbo-niveau-body[hidden] {
  display: none;
}

.cdn-arbo-noeud-caret {
  transition: transform 0.15s ease;
  font-size: 11px;
  flex-shrink: 0;
}

.cdn-arbo-noeud-caret.is-ouvert {
  transform: rotate(90deg);
}

.cdn-arbo-noeud-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cdn-arbo-noeud-body[hidden] {
  display: none;
}

.cdn-arbo-matiere,
.cdn-arbo-domaine,
.cdn-arbo-eval {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  font-family: var(--font-corps);
  font-size: 13px;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}

.cdn-arbo-matiere { font-weight: 700; }

.cdn-arbo-matiere-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
}
.cdn-arbo-domaine { padding-left: 20px; font-weight: 600; color: var(--secondaire); }
.cdn-arbo-eval { padding-left: 34px; }
.cdn-arbo-eval:hover, .cdn-arbo-domaine:hover, .cdn-arbo-matiere:hover { background: #F0F7F6; }
.cdn-arbo-eval.is-active { background: var(--principale); color: #FFFFFF; }

.cdn-arbo-ajouter-btn {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px dashed #C9DEDC;
  border-radius: 8px;
  background: transparent;
  font-family: var(--font-corps);
  font-size: 13px;
  font-weight: 600;
  color: var(--secondaire);
  cursor: pointer;
  flex-shrink: 0;
}

#cdn-evaluations-ajouter-btn {
  background: #FFFFFF;
}

.cdn-arbo-ajouter-btn:hover {
  border-color: var(--principale);
  color: var(--principale);
}

.cdn-arbo-corps {
  overflow-y: auto;
  padding: 20px 24px;
}

.cdn-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-corps);
  font-size: 13px;
  color: var(--secondaire);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.cdn-breadcrumb .ph {
  font-size: 14px;
}

.cdn-breadcrumb-sep {
  opacity: 0.5;
}

.cdn-breadcrumb-current {
  font-weight: 700;
  color: var(--texte);
}

.cdn-breadcrumb-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* ---------- Page dédiée "Gérer la liste des évaluations" (evaluations.php) ---------- */

.cdn-evaluations-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.cdn-evaluations-retour-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid #DDE5E4;
  border-radius: 10px;
  background: #FFFFFF;
  font-family: var(--font-corps);
  font-weight: 600;
  font-size: 14px;
  color: var(--texte);
  text-decoration: none;
  flex-shrink: 0;
}

.cdn-evaluations-retour-btn:hover {
  background: #F0F7F6;
}

.cdn-evaluations-titre-bloc {
  text-align: center;
  flex: 1;
}

.cdn-evaluations-titre-bloc h1 {
  font-family: var(--font-titre);
  font-weight: 900;
  font-size: 32px;
  color: rgb(0, 15, 68);
  margin: 0;
}

.cdn-evaluations-titre-bloc .week-nav-subtitle {
  margin: 2px 0 0;
}

.cdn-evaluations-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: start;
  border-top: 1px solid #E5EFEE;
  padding-top: 20px;
}

.cdn-evaluations-sidebar {
  background: #FFFFFF;
  border: 1px solid #E5EFEE;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 145px);
  overflow: hidden;
}

.cdn-evaluations-sidebar-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 10px;
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 13px;
  color: var(--secondaire);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cdn-evaluations-sidebar-tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  min-height: 0;
}

.cdn-evaluations-corps {
  background: #FFFFFF;
  border: 1px solid #E5EFEE;
  border-radius: 12px;
  padding: 24px 28px;
  min-height: 400px;
}

.cdn-eval-titre-h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-titre);
  font-weight: 900;
  font-size: 28px;
  color: rgb(0, 15, 68);
  margin: 0 0 20px;
}

.cdn-eval-titre-h1 button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--secondaire);
  cursor: pointer;
  flex-shrink: 0;
}

.cdn-eval-titre-h1 button:hover {
  background: #F0F7F6;
  color: var(--principale);
}

/* ---------- Détail évaluation ---------- */

.cdn-eval-infos-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.cdn-eval-champ-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 6px;
}

.cdn-checkbox-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-corps);
  font-size: 13px;
  color: var(--texte);
}

.cdn-checkbox-field-disabled {
  color: #A9B4B2;
}

.cdn-checkbox-hint {
  font-size: 11px;
  color: var(--secondaire);
  opacity: 0.8;
}

.cdn-notes-table-wrap {
  overflow-x: auto;
}

.cdn-notes-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-corps);
}

.cdn-notes-table th {
  text-align: left;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--secondaire);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 2px solid #DDE5E4;
}

.cdn-notes-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #EDF3F2;
  font-size: 14px;
}

.cdn-notes-table-moyenne {
  font-weight: 800;
  color: var(--principale);
}

.cdn-note-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cdn-note-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  background: #FFFFFF;
  border: 1px solid #E5EFEE;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 15, 68, 0.12);
  padding: 8px;
  width: max-content;
  max-width: 220px;
}

.cdn-note-btn {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #DDE5E4;
  background: #FFFFFF;
  font-family: var(--font-corps);
  font-size: 12px;
  font-weight: 700;
  color: var(--texte);
  cursor: pointer;
}

.cdn-note-btn:hover {
  border-color: var(--principale);
}

.cdn-note-btn.is-selected {
  background: var(--principale);
  border-color: var(--principale);
  color: #FFFFFF;
}

.cdn-note-btn-abs.is-selected,
.cdn-note-btn-ne.is-selected {
  background: #8A9491;
  border-color: #8A9491;
}

.cdn-note-btn-na.is-selected {
  background: #D9534F;
  border-color: #D9534F;
}

.cdn-note-btn-pa.is-selected {
  background: #E8933A;
  border-color: #E8933A;
}

.cdn-note-btn-a.is-selected {
  background: #7CC576;
  border-color: #7CC576;
}

.cdn-note-btn-d.is-selected {
  background: #2E7D46;
  border-color: #2E7D46;
}

.cdn-note-numerique-input {
  width: 60px;
  padding: 4px 6px;
  border: 1px solid #DDE5E4;
  border-radius: 6px;
  font-family: var(--font-corps);
  font-size: 13px;
  text-align: center;
}

/* ---------- Bilans élèves ---------- */

.cdn-bilans-wrapper {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  flex: 1;
  min-height: 0;
}

.cdn-bilans-wrapper[hidden] {
  display: none;
}

.cdn-bilans-eleves-liste {
  overflow-y: auto;
  border: 1px solid #E5EFEE;
  border-radius: 10px;
  background: #FFFFFF;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cdn-bilans-eleve-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: var(--font-corps);
  font-size: 13px;
  font-weight: 400;
  color: var(--texte);
  cursor: pointer;
}

.cdn-bilans-eleve-btn:hover {
  background: #F0F7F6;
}

.cdn-bilans-eleve-btn.is-active {
  background: var(--principale);
  color: #FFFFFF;
}

.cdn-bilans-corps {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cdn-bilans-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cdn-bilans-header h2 {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 22px;
  color: rgb(0, 15, 68);
  margin: 0;
}

.cdn-bilans-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid #E5EFEE;
}

.cdn-bilans-tab {
  padding: 8px 16px;
  border: none;
  background: transparent;
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 13px;
  color: var(--secondaire);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}

.cdn-bilans-tab.is-active {
  color: var(--principale);
  border-bottom-color: var(--principale);
}

.cdn-bilan-appreciation-link {
  border: none;
  background: transparent;
  color: var(--secondaire);
  font-family: var(--font-corps);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.cdn-bilan-appreciation-link:hover {
  color: var(--principale);
}

.cdn-bilan-badge-matiere {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  margin-right: 6px;
  white-space: nowrap;
}

.cdn-bilan-appreciation-text {
  font-size: 12px;
  color: var(--texte);
  opacity: 0.85;
}

.cdn-matiere-bloc {
  border: 1px solid #E5EFEE;
  border-radius: 10px;
  overflow: hidden;
}

.cdn-matiere-bloc-header {
  padding: 8px 14px;
  font-family: var(--font-corps);
  font-weight: 800;
  font-size: 14px;
}

.cdn-domaine-bloc {
  padding: 12px 14px;
  border-top: 1px solid #EDF3F2;
}

.cdn-domaine-bloc-titre {
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 14px;
  color: var(--texte);
  margin: 0 0 4px;
}

.cdn-domaine-competences {
  font-size: 12px;
  color: var(--secondaire);
  margin: 0 0 8px;
}

.cdn-domaine-moyennes {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: var(--secondaire);
  margin-bottom: 8px;
}

.cdn-domaine-moyennes strong {
  color: var(--texte);
}

.cdn-sparkline-wrap {
  width: 100%;
  overflow-x: auto;
}

.cdn-radar-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.cdn-radar-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-corps);
  font-size: 13px;
  color: var(--texte);
}

.cdn-radar-svg-wrap {
  display: flex;
  justify-content: center;
}

.cdn-radar-legend {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 8px;
  font-family: var(--font-corps);
  font-size: 12px;
}

.cdn-radar-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cdn-radar-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* ---------- Réglages > Systèmes de notation ---------- */

.cdn-reglages-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.cdn-systemes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.cdn-systeme-carte {
  border: 1px solid #E5EFEE;
  border-radius: 10px;
  padding: 16px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cdn-systeme-carte-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cdn-systeme-nom {
  font-family: var(--font-corps);
  font-weight: 800;
  font-size: 15px;
  color: var(--texte);
}

.cdn-systeme-badge-predefini {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--secondaire);
  background: #EDEFF2;
  padding: 2px 8px;
  border-radius: 999px;
}

.cdn-systeme-niveaux-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cdn-systeme-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
}

.cdn-systeme-actions button {
  flex: 1;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #DDE5E4;
  background: #FFFFFF;
  font-family: var(--font-corps);
  font-size: 12px;
  font-weight: 600;
  color: var(--secondaire);
  cursor: pointer;
}

.cdn-systeme-actions button:hover {
  background: #F0F7F6;
  color: var(--principale);
}

.cdn-systeme-actions button.confirm-delete {
  background: var(--alerte);
  color: #FFFFFF;
  border-color: var(--alerte);
}

.cdn-niveau-edit-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cdn-niveau-edit-row input[type="text"] {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #DDE5E4;
  border-radius: 6px;
  font-family: var(--font-corps);
  font-size: 13px;
  margin-top: 10px;
}

.cdn-niveau-edit-row input[type="number"] {
  width: 70px;
  padding: 6px 8px;
  border: 1px solid #DDE5E4;
  border-radius: 6px;
  font-family: var(--font-corps);
  font-size: 13px;
}

.cdn-niveau-edit-remove {
  border: none;
  background: transparent;
  color: var(--secondaire);
  cursor: pointer;
  flex-shrink: 0;
}

.cdn-niveau-edit-remove:hover {
  color: var(--alerte);
}

.cdn-type-choix {
  display: flex;
  gap: 12px;
}

.cdn-evaluations-page h2{
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 18px;
  color: #000000;
  margin: 17px 0 10px;
}

.cdn-evaluations-page h2 i{
  margin-right:8px;
}

.cdn-evaluations-page section{
  margin-top: 20px;
}

.cdn-evaluations-page .cdn-checkbox-field{
  font-weight: 400;
}

.cdn-eval-infos-row .cdn-eval-champ-row{
  gap: 0;
}


#cdn-bilan-print-only {
  display: none;
}

.cdn-bilan-print-radar-titre {
  margin-top: 24px;
}

@media print {
  .app-sidebar { display: none; }

  /* Aperçu PDF bilan élève (imprimerBilanEleve) : n'imprime que ce bloc
     (nom > tableau évaluations > radar), reconstruit à l'impression pour
     ne pas dépendre de l'onglet actuellement affiché à l'écran. */
  body:has(#cdn-bilan-print-only:not(:empty)) .app-content > *:not(#cdn-bilan-print-only) {
    display: none !important;
  }
  #cdn-bilan-print-only:not(:empty) {
    display: block;
  }

  /* Grille carnet (imprimerGrilleCarnet) : le carnet peut avoir des
     dizaines d'évaluations, largement plus qu'une page A4 ne peut afficher
     en colonnes — découpé en blocs de 10 évaluations (cf. JS), chaque bloc
     imprimé comme un tableau complet démarrant sur une nouvelle page,
     plutôt qu'un unique tableau trop large dont Chrome rognerait les
     colonnes en trop. Paysage appliqué globalement (@page ne peut pas être
     conditionné à un sélecteur) : sans effet néfaste sur l'aperçu bilan
     élève, qui tient aussi bien en paysage qu'en portrait. */
  @page {
    size: landscape;
    margin: 10mm;
  }
  .cdn-print-grille-table {
    table-layout: auto;
    font-size: 11px;
  }
  .cdn-print-grille-table th,
  .cdn-print-grille-table td {
    padding: 4px 6px;
    white-space: normal;
  }
  .cdn-print-grille-bloc {
    page-break-after: always;
    break-after: page;
  }
  .cdn-print-grille-bloc:last-child {
    page-break-after: auto;
    break-after: auto;
  }
}