* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Base font-size fluide : grandit avec la largeur de viewport pour que tout
   ce qui est en em/rem se redimensionne avec l'écran. Bornes 14-18 px pour
   garder des UI lisibles sur petits écrans sans devenir énormes en 4K. */
html {
  font-size: clamp(14px, 0.5vw + 12px, 18px);
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  height: 100dvh;
  height: 100vh; /* fallback pour navigateurs sans dvh */
  max-height: 100dvh;
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: 0;
}
@supports (height: 100dvh) {
  body { height: 100dvh; max-height: 100dvh; }
}

/* ===== RUBAN ===== */
.ribbon {
  background: linear-gradient(to bottom, #f5f5f5, #efefef);
  border-bottom: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 0;
  margin: 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.ribbon-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 12px;
  background: #f8f8f8;
  border-bottom: 1px solid #d9d9d9;
  min-height: 24px;
}

.ribbon-tabs {
  display: flex;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
}

/* Champ de recherche plein-texte mail dans le ruban, calé à droite avant
 * le bouton de pliage. Visible sur toutes les sections — la soumission
 * bascule auto sur le webmail. */
.ribbon-search {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  padding: 2px 6px;
  margin-right: 8px;
  min-width: 200px;
  max-width: 320px;
}
.ribbon-search-icon { color: #888; font-size: .8em; }
.ribbon-search-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: .82em;
  width: 100%;
  padding: 2px 0;
  color: #333;
}
.ribbon-search-input::placeholder { color: #aaa; }

.ribbon-tab {
  background: none;
  border: none;
  padding: 4px 14px;
  cursor: pointer;
  font-size: 0.78em;
  font-weight: 500;
  color: #333;
  position: relative;
  transition: all 0.2s ease;
}

.ribbon-tab:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Onglet actif : très visible — fond plein bleu, texte blanc, bordure
   inférieure marquée. Démarcation nette du reste de la barre. */
.ribbon-tab.active {
  color: #fff;
  background: #2e75b6;
  font-weight: 700;
  border-bottom: 3px solid #1f4e7a;
  box-shadow: 0 -2px 6px rgba(46, 117, 182, 0.25);
}
.ribbon-tab.active:hover {
  background: #2e75b6;  /* pas d'effet hover quand déjà actif */
}

.ribbon-tab-logout {
  color: #a93226;
  margin-left: 16px;
}

.ribbon-tab-logout:hover {
  background: rgba(169, 50, 38, 0.07) !important;
  color: #922b21;
}

.ribbon-toggle {
  background: none;
  border: 1px solid #ccc;
  padding: 4px 8px;
  cursor: pointer;
  color: #333;
  font-size: 0.8em;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}

.ribbon-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
}

.ribbon-toggle.collapsed {
  transform: rotate(180deg);
}

.ribbon-content {
  display: flex;
  gap: 12px;
  padding: 4px 12px;
  background: #f5f5f5;
  flex-wrap: wrap;
  max-height: 80px;
  overflow: hidden;
  transition: max-height 0.3s ease;
  align-items: flex-start;
}

.ribbon-content.collapsed {
  max-height: 0;
  padding: 0;
  overflow: hidden;
}

.ribbon-group {
  display: none;
  flex-wrap: wrap;
  gap: 8px;

}

.ribbon-group.active {
  display: flex;
}

.group-section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
  padding-right: 12px;
  border-right: 1px solid #d9d9d9;
  width: fit-content;
  align-content: flex-start;
}

.group-section:last-child {
  border-right: none;
  padding-right: 0;
}

.group-title {
  font-size: 0.65em;
  color: #666;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-basis: 100%;
  /* Le titre ne doit pas dicter la largeur du group-section :
     width:0 + min-width:0 + flex-grow:1 → le groupe s'ajuste aux boutons,
     le titre s'aligne dessus (ellipsis si trop long). */
  width: 0;
  min-width: 0;
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.ribbon-button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: #e8e8e8;
  border: 1px solid #bfbfbf;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 3px;
  font-size: 0.78em;
  color: #333;
  transition: all 0.2s ease;
  min-width: 50px;
  width: auto;
  flex: 0 0 auto;
  text-align: center;
}

.ribbon-button:hover {
  background: #d9d9d9;
  border-color: #a6a6a6;
}

.ribbon-button i {
  font-size: 1.25em;
}

.ribbon-button span {
  font-size: 0.78em;
  white-space: nowrap;
}

.ribbon-select {
  padding: 3px 4px;
  border: 1px solid #bfbfbf;
  border-radius: 2px;
  background: white;
  font-size: 0.75em;
  cursor: pointer;
  height: 22px;
}

/* ===== CONTENU PRINCIPAL ===== */
.page-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 28px 0;
  overflow: hidden;
}
/* Mode pleine page (Agenda, Webmail) : pas de marge ni de gradient,
 * tout l'écran sert au contenu. */
body.full-bleed-section .page-content { padding: 0; }
body.full-bleed-section .page-section { gap: 0; }
body.full-bleed-section .page-title  { display: none; }
body.full-bleed-section #mainTableContainer {
  height: 100%; width: 100%;
  padding-bottom: 0; /* annule le 16px par défaut qui laissait passer le fond violet */
}
body.full-bleed-section .agday-wrap,
body.full-bleed-section .agweek-wrap,
body.full-bleed-section .agenda-section {
  max-width: none; margin: 0; padding: 0;
  width: 100%; height: 100%;
}
/* Aucun arrondi, aucune bordure extérieure sur les grilles plein écran */
body.full-bleed-section .agweek-toolbar,
body.full-bleed-section .agday-toolbar,
body.full-bleed-section .agweek-body,
body.full-bleed-section .agday-grid,
body.full-bleed-section .agweek-header,
body.full-bleed-section .agweek-allday-row,
body.full-bleed-section .agday-allday {
  border-radius: 0;
  border-left: none;
  border-right: none;
}
body.full-bleed-section .agweek-body,
body.full-bleed-section .agday-grid {
  border-bottom: none;
}
/* Webmail plein écran : pas de bordure ni d'arrondi, et le wrapper
 * remplit totalement la page (le parent .page-content a déjà padding 0). */
body.full-bleed-section .webmail-layout {
  border: none; border-radius: 0;
  height: 100%; width: 100%;
}

/* Spinner superposé sur la vue Agenda pendant les navigations
 * prev/next semaine : on garde la grille précédente affichée. */
.agenda-loading-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.35);
  z-index: 9000;
  color: #4a5568;
  pointer-events: none;
}

.page-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Mode "tout afficher" : en-têtes restent collés sous ruban + toolbar ── */
body.dt-mode-expanded .dt-th {
  top: var(--dt-thead-top, 0px);
  z-index: 100;
}

.page-title {
  flex-shrink: 0;          /* le titre ne rétrécit pas */
  font-size: 1.1em;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  margin: 0;
}

/* Conteneur du tableau : occupe tout l'espace restant */
#mainTableContainer {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 16px;    /* espace sous le pied de pagination */
}

/* Le DataTable hérite de la hauteur et défile en interne */
#mainTableContainer .dt-wrapper {
  flex: 1;
  min-height: 0;
}

#mainTableContainer .dt-scroll-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;        /* seules les lignes du tableau défilent */
}


h1 {
  color: #333;
  margin-bottom: 20px;
  font-size: 2em;
}

p {
  color: #666;
  line-height: 1.6;
  font-size: 1.1em;
  margin-bottom: 15px;
}

strong {
  color: #667eea;
  font-weight: 600;
}

/* ===== FENÊTRES (classe Modal) ===== */
.win-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}

.win {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  max-width: 95vw;
  max-height: 90vh;
}

/* En-tête — zone de drag */
.win-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 8px 14px;
  background: linear-gradient(to bottom, #dce8f8, #c8d9ef);
  border-bottom: 1px solid #a8bedb;
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
  border-radius: 6px 6px 0 0;
}

.win-title {
  font-size: 0.84em;
  font-weight: 600;
  color: #1a3a5c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win-close {
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  color: #4a6080;
  font-size: 0.75em;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 8px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.win-close:hover {
  background: #c0392b;
  color: #fff;
  border-color: #a93226;
}

/* Corps scrollable */
.win-body {
  flex: 1;
  padding: 18px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

/* Pied de page */
.win-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 12px;
  border-top: 1px solid #e0e0e0;
  background: #f7f8fa;
  flex-shrink: 0;
  border-radius: 0 0 6px 6px;
}

/* ── Poignées de redimensionnement (8 directions) ── */
.win-rz {
  position: absolute;
  z-index: 10;
}

/* Bords */
.win-rz-n  { top: 0;    left: 6px;    right: 6px;   height: 4px; cursor: n-resize; }
.win-rz-s  { bottom: 0; left: 6px;    right: 6px;   height: 4px; cursor: s-resize; }
.win-rz-e  { right: 0;  top: 6px;     bottom: 6px;  width:  4px; cursor: e-resize; }
.win-rz-w  { left: 0;   top: 6px;     bottom: 6px;  width:  4px; cursor: w-resize; }

/* Coins */
.win-rz-ne { top: 0;    right: 0;  width: 10px; height: 10px; cursor: ne-resize; }
.win-rz-nw { top: 0;    left: 0;   width: 10px; height: 10px; cursor: nw-resize; }
.win-rz-se { bottom: 0; right: 0;  width: 10px; height: 10px; cursor: se-resize; }
.win-rz-sw { bottom: 0; left: 0;   width: 10px; height: 10px; cursor: sw-resize; }

/* Boutons */
.win-btn {
  padding: 6px 16px;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  background: #f0f0f0;
  color: #444;
  font-size: 0.82em;
  cursor: pointer;
  transition: background 0.15s;
}

.win-btn:hover {
  background: #e2e2e2;
}

.win-btn-primary {
  background: #2e75b6;
  border-color: #2567a0;
  color: #fff;
  font-weight: 600;
}

.win-btn-primary:hover:not(:disabled) {
  background: #1d5a8c;
}

.win-btn-primary:disabled {
  background: #a0b8d8;
  border-color: #8daecf;
  cursor: not-allowed;
}

.win-btn-danger {
  background: #c0392b;
  border-color: #a93324;
  color: #fff;
  font-weight: 600;
}
.win-btn-danger:hover:not(:disabled) { background: #a93324; }

.win-btn-import {
  background: #eef4fb;
  border: 1px dashed #2e75b6;
  color: #2e75b6;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.win-btn-import:hover:not(:disabled) {
  background: #d6e7f7;
  border-color: #1d5a8c;
}

/* Modale de confirmation custom */
.custom-confirm-body {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 8px 4px;
}
.custom-confirm-body > i.fas {
  font-size: 28px;
  color: #2e75b6;
  flex: 0 0 auto;
  margin-top: 2px;
}
.custom-confirm-body > i.fa-exclamation-triangle { color: #c0392b; }
.custom-alert-error  > i.fas { color: #c0392b; }
.custom-alert-success> i.fas { color: #27ae60; }
.custom-alert-warning> i.fas { color: #d68910; }
.custom-confirm-msg {
  font-size: 14px;
  line-height: 1.5;
  color: #2c3e50;
}

/* Dropzone */
.dropzone {
  border: 2px dashed #b0b8c9;
  border-radius: 8px;
  padding: 28px 20px 20px;
  text-align: center;
  background: #f8f9fb;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
}

.dropzone:hover,
.dropzone.dragover {
  border-color: #2e75b6;
  background: #eef4fb;
}

.dropzone.has-file {
  border-color: #28a745;
  background: #f0faf2;
}

.dropzone-icon {
  font-size: 2em;
  color: #8899b0;
  margin-bottom: 8px;
}

.dropzone.has-file .dropzone-icon {
  color: #28a745;
}

.dropzone-text {
  font-size: 0.85em;
  color: #555;
  margin-bottom: 4px;
}

.dropzone-or {
  font-size: 0.75em;
  color: #999;
  margin-bottom: 8px;
}

.dropzone-hint {
  font-size: 0.7em;
  color: #aaa;
  margin-top: 8px;
}

.btn-browse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  border: 1px dashed #2e75b6;
  border-radius: 4px;
  background: #eef4fb;
  color: #2e75b6;
  font-size: 0.82em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-browse::before {
  content: '\f56f'; font-family: 'Font Awesome 5 Free'; font-weight: 900;
  font-size: 1em;
}

.btn-browse:hover {
  background: #d6e7f7;
  border-color: #1d5a8c;
}

.file-selected {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.8em;
  color: #28a745;
  font-weight: 600;
}

/* ─── Modale Import OGE ─────────────────────────────────────────── */
.oge-import-body {
  display: flex; flex-direction: column; gap: 14px;
}
.oge-help {
  background: #eaf2fb;
  border: 1px solid #c6dcef;
  border-left: 4px solid #2e75b6;
  border-radius: 4px;
  padding: 10px 14px 10px 12px;
  font-size: 12.5px;
  color: #1a3556;
  line-height: 1.5;
}
.oge-help-title {
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 13px;
}
.oge-help-title i { margin-right: 4px; color: #2e75b6; }
.oge-help-steps {
  margin: 0;
  padding-left: 22px;
}
.oge-help-steps li { margin-bottom: 3px; }
.oge-help-steps ul {
  margin: 4px 0;
  padding-left: 18px;
}
.oge-help-steps code {
  background: #fff;
  padding: 1px 5px;
  border: 1px solid #d6e0eb;
  border-radius: 3px;
  font-size: 11.5px;
  color: #1a3556;
}
.oge-file-clear {
  border: none;
  background: transparent;
  color: #6b7a8c;
  width: 20px; height: 20px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  font-size: 10px;
}
.oge-file-clear:hover { background: #c0392b; color: #fff; }

/* ─── Affectation des stages (3 tuiles) ───────────────────────────── */
.afs-body {
  display: flex; flex-direction: column;
  gap: 14px;
  /* `flex: 1 1 auto` + `min-height: 0` : permet de remplir .win-body
   * (qui est elle-même `display: flex; flex-direction: column`) et de
   * laisser le scroll interne aux tuiles plutôt qu'à .win-body. */
  flex: 1 1 auto;
  min-height: 0;
}
.afs-controls {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  background: #f7f9fc;
  border: 1px solid #d6e0eb;
  border-radius: 4px;
}
.afs-niveau-label { font-size: 13px; color: #6b7a8c; font-weight: 600; }
.afs-niveau-select {
  padding: 4px 8px; font-size: 13px;
  border: 1px solid #d6e0eb; border-radius: 3px;
  background: #fff;
}
.afs-mill {
  margin-left: auto;
  font-size: 12px; color: #6b7a8c;
}
.afs-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  /* La grille prend toute la hauteur restante du .afs-body, qui lui-même
   * remplit .win-body (flex). `min-height: 0` autorise le shrink dans le
   * flex parent pour que `.afs-tile-body { overflow-y: auto }` déclenche
   * son scroll quand le contenu dépasse. */
  flex: 1 1 auto;
  min-height: 0;
}
.afs-tile {
  display: flex; flex-direction: column;
  background: #f7f9fc;
  border: 1px solid #d6e0eb;
  border-radius: 4px;
  overflow: hidden;
  min-height: 0;
}
.afs-tile-header {
  padding: 8px 10px;
  background: #eaf2fb;
  border-bottom: 1px solid #d6e0eb;
  font-size: 13px; font-weight: 600;
  color: #1a3556;
  display: flex; align-items: center; gap: 6px;
}
.afs-tile-header i { color: #2e75b6; }
.afs-tile-count {
  margin-left: auto;
  font-size: 11px; font-weight: 500;
  color: #6b7a8c;
  background: #fff;
  padding: 1px 6px;
  border-radius: 10px;
  border: 1px solid #d6e0eb;
}
.afs-tile-search {
  margin: 6px 8px;
  padding: 4px 8px;
  border: 1px solid #d6e0eb;
  border-radius: 3px;
  font-size: 12px;
}
.afs-tile-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 6px 0;
}
.afs-tile-body::after {
  content: ''; display: block; height: 12px; flex-shrink: 0;
}
.afs-tile.afs-drop-over { background: #d6e6f4; }
.afs-tile.afs-drop-over .afs-tile-body { background: #cfe1f5; }

.afs-empty {
  padding: 18px 12px;
  text-align: center;
  font-size: 12px;
  color: #6b7a8c;
  font-style: italic;
}

/* Lignes enseignants */
.afs-tuteur {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  color: #1a3556;
  transition: background .12s;
}
.afs-tuteur:hover  { background: #eaf2fb; }
.afs-tuteur.active { background: #2e75b6; color: #fff; }
.afs-tuteur.active * { color: #fff !important; }
.afs-tuteur.active .afs-tuteur-count { background: rgba(255,255,255,0.25); color: #fff; border-color: transparent; }
.afs-tuteur-name { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.afs-tuteur-count {
  font-size: 11px;
  background: #fff;
  padding: 1px 7px;
  border-radius: 10px;
  border: 1px solid #d6e0eb;
}

/* Lignes étudiants (tuiles 2 et 3) */
.afs-etu {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px;
  margin-bottom: 2px;
  background: #fff;
  border: 1px solid #e0e6ee;
  border-radius: 3px;
  cursor: grab;
  font-size: 13px;
  color: #1a3556;
  transition: background .12s, border-color .12s;
}
.afs-etu:hover { background: #f5f9fd; border-color: #b8d0e6; }
.afs-etu.afs-dragging { opacity: 0.35; cursor: grabbing; }
.afs-etu-name { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.afs-etu-dipl {
  font-size: 10px;
  color: #6b7a8c;
  background: #f0f3f8;
  padding: 1px 5px;
  border-radius: 8px;
}
.afs-etu-btn {
  border: none;
  background: transparent;
  width: 22px; height: 22px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.afs-etu-btn-add { color: #27ae60; }
.afs-etu-btn-add:hover { background: #27ae60; color: #fff; }
.afs-etu-btn-rm  { color: #c0392b; }
.afs-etu-btn-rm:hover  { background: #c0392b; color: #fff; }

/* ─── Pillule Pstage dans le reader + modale convention ────────────── */
/* Le slot vit dans .wm-reader-actions (à gauche des boutons Répondre /
 * Non lu / Supprimer du bloc Expéditeur). Vide → invisible. */
.wm-pstage-pill-slot { display: inline-flex; align-items: center; }
.wm-pstage-pill-slot:empty { display: none; }
.wm-pstage-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  margin-right: 4px;
  transition: filter .12s, transform .12s;
}
.wm-pstage-pill:hover { filter: brightness(0.95); }
.wm-pstage-loading { background: #eaf2fb; color: #2e75b6; border-color: #c6dcef; cursor: progress; }
.wm-pstage-pill-todo {
  background: #fdecea; color: #c0392b; border-color: #f4b7b0;
}
.wm-pstage-pill-todo:hover { background: #c0392b; color: #fff; }
.wm-pstage-pill-saved {
  background: #d4edda; color: #1e8449; border-color: #abe2bb;
}
.wm-pstage-pill-saved:hover { background: #27ae60; color: #fff; }
/* Pillule "ordre de mission à valider" (détecté par contenu dans un mail) */
.wm-om-pill {
  background: #fff3e0; color: #b9770e; border-color: #f3d39b;
}
.wm-om-pill:hover { background: #e8920c; color: #fff; }

/* Variante de la pillule Pstage pour la liste des mails — plus compacte,
 * partage les couleurs avec celles du reader (.wm-pstage-pill-todo/saved). */
.wm-pstage-list-pill {
  cursor: pointer;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid transparent;
}
.wm-pstage-list-pill.wm-pstage-list-todo {
  background: #fdecea; color: #c0392b; border-color: #f4b7b0;
}
.wm-pstage-list-pill.wm-pstage-list-todo:hover { background: #c0392b; color: #fff; }
.wm-pstage-list-pill.wm-pstage-list-saved {
  background: #d4edda; color: #1e8449; border-color: #abe2bb;
}
.wm-pstage-list-pill.wm-pstage-list-saved:hover { background: #27ae60; color: #fff; }

/* ─── Section Entreprises (master / détail avec onglets) ─────────── */
.ent-section {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 12px;
  height: calc(100vh - 200px);
  min-height: 480px;
}
.ent-list-pane {
  display: flex; flex-direction: column;
  background: #f7f9fc;
  border: 1px solid #d6e0eb;
  border-radius: 4px;
  overflow: hidden;
  min-height: 0;
}
.ent-list-header {
  display: flex; gap: 6px; padding: 8px;
  border-bottom: 1px solid #d6e0eb;
  background: #fff;
}
.ent-search {
  flex: 1 1 auto;
  padding: 5px 10px;
  border: 1px solid #d6e0eb; border-radius: 3px;
  font-size: 13px;
}
.ent-btn-new {
  padding: 5px 10px;
}
.ent-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 6px;
  min-height: 0;
}
.ent-item {
  padding: 8px 10px;
  border-radius: 3px;
  border: 1px solid #e0e6ee;
  background: #fff;
  margin-bottom: 4px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.ent-item:hover { background: #eaf2fb; border-color: #b8d0e6; }
.ent-item.active { background: #2e75b6; color: #fff; border-color: #1a5280; }
.ent-item-name {
  font-weight: 600; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ent-item-meta {
  display: flex; gap: 10px;
  margin-top: 4px; font-size: 11px;
  color: #6b7a8c;
}
.ent-item.active .ent-item-meta { color: rgba(255,255,255,0.85); }
.ent-item-meta i { margin-right: 3px; }
.ent-empty {
  padding: 16px; text-align: center; color: #6b7a8c;
  font-size: 13px; font-style: italic;
}
.ent-detail-pane {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid #d6e0eb;
  border-radius: 4px;
  overflow: hidden;
  min-height: 0;
}
.ent-empty-detail {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; color: #6b7a8c;
}
.ent-detail-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #e8eef5;
  background: #f6f9fc;
}
.ent-detail-title {
  margin: 0;
  font-size: 18px; color: #1a3556;
}
.ent-detail-sub {
  font-size: 12px; color: #6b7a8c;
  margin-top: 4px;
}
.ent-detail-actions { display: flex; gap: 6px; }
.ent-tabs {
  display: flex; gap: 0;
  background: #f7f9fc;
  border-bottom: 1px solid #d6e0eb;
}
.ent-tab {
  border: none; background: transparent;
  padding: 8px 16px;
  font-size: 13px; font-weight: 600;
  color: #6b7a8c;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .12s, border-color .12s;
}
.ent-tab:hover { color: #1a3556; }
.ent-tab.active {
  color: #2e75b6; border-bottom-color: #2e75b6;
  background: #fff;
}
.ent-tab-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 16px;
  min-height: 0;
}
.ent-infos { display: grid; gap: 6px; }
.ent-info-row { display: flex; gap: 12px; }
.ent-info-row-block { flex-direction: column; gap: 4px; }
.ent-info-label {
  flex: 0 0 110px;
  font-size: 12px; color: #6b7a8c; font-weight: 600;
}
.ent-info-value { font-size: 13px; color: #1a3556; word-break: break-word; }
.ent-info-notes {
  font-family: inherit; font-size: 13px; color: #1a3556;
  white-space: pre-wrap;
  background: #f7f9fc;
  border: 1px solid #d6e0eb; border-radius: 3px;
  padding: 8px 10px; margin: 0;
}
.ent-toolbar {
  display: flex; gap: 6px;
  margin-bottom: 10px;
}
.ent-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.ent-table th {
  text-align: left; padding: 6px 8px;
  background: #f7f9fc;
  color: #6b7a8c; font-weight: 600;
  border-bottom: 2px solid #d6e0eb;
  font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
}
.ent-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #f0f3f8;
}
.ent-table tr:hover td { background: #f5f9fd; }
.ent-col-actions { width: 70px; text-align: right; }
.ent-col-stages { text-align: center; width: 70px; }
.ent-row-btn {
  border: none; background: transparent;
  color: #6b7a8c; cursor: pointer;
  padding: 3px 6px; border-radius: 3px;
  font-size: 12px;
}
.ent-row-edit:hover { background: #eaf2fb; color: #2e75b6; }
.ent-row-del:hover  { background: #fdecea; color: #c0392b; }
.ent-statut {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px; font-weight: 600;
}
.ent-statut-proposee { background: #eaf2fb; color: #2e75b6; }
.ent-statut-pourvue  { background: #d4edda; color: #1e8449; }
.ent-statut-archivee { background: #f0f3f8; color: #6b7a8c; }

/* ─── Mes stagiaires (cards par niveau) ────────────────────────────── */
.ms-section {
  display: flex; flex-direction: column;
  gap: 14px;
  height: 100%;
  min-height: 0;
  /* La section elle-même ne scroll pas : l'en-tête (titre + sélecteur)
   * reste fixé en haut, le scroll est délégué à `.ms-cards`. */
  overflow: hidden;
}
.ms-header { flex: 0 0 auto; }
.ms-cards {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: 14px;
  padding-right: 6px;
  padding-bottom: 16px;
}
.ms-header {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; color: #1a3556;
  padding-bottom: 6px;
}
.ms-header i { color: #2e75b6; }
.ms-total {
  margin-left: auto;
  font-size: 12px; font-weight: 500; color: #6b7a8c;
  background: #f0f3f8; padding: 2px 10px; border-radius: 10px;
}
.ms-mill-select {
  padding: 3px 8px;
  font-size: 13px;
  border: 1px solid #d6e0eb;
  border-radius: 3px;
  background: #fff;
  margin-left: 4px;
}
.ms-card {
  background: #fff;
  border: 1px solid #d6e0eb;
  border-radius: 6px;
  overflow: hidden;
  /* Empêche le flex de rétrécir la card pour la faire rentrer dans la
   * hauteur de .ms-section (sinon avec `overflow: hidden` on perd les
   * lignes basses). La section parent prend en charge le scroll. */
  flex: 0 0 auto;
}
.ms-card-header {
  width: 100%;
  padding: 10px 14px;
  background: linear-gradient(180deg, #eaf2fb 0%, #d6e6f4 100%);
  border: none;
  border-bottom: 1px solid #c6dcef;
  font-size: 14px; font-weight: 700; color: #1a3556;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
}
.ms-card-header:hover { background: linear-gradient(180deg, #d6e6f4 0%, #c6dcef 100%); }
.ms-card-chevron {
  font-size: 11px; color: #2e75b6;
  transition: transform .12s;
  width: 14px;
}
.ms-card-title { flex: 0 1 auto; }
.ms-card.ms-collapsed .ms-card-header { border-bottom-color: transparent; }
.ms-card.ms-collapsed .ms-card-body { display: none; }
.ms-card-body { /* conteneur de la table déroulante */ }
.ms-card-count {
  margin-left: auto;
  font-size: 11px; font-weight: 500; color: #2e75b6;
  background: #fff; padding: 1px 8px; border-radius: 10px;
  border: 1px solid #b8d0e6;
}
.ms-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.ms-table th {
  text-align: left; padding: 8px 12px;
  background: #f7f9fc; color: #6b7a8c; font-weight: 600;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid #e0e6ee;
}
.ms-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f0f3f8;
  vertical-align: top;
}
.ms-table tr:last-child td { border-bottom: none; }
.ms-table tr.ms-saved td { background: #e8f5e9 !important; transition: background .7s; }

/* Bouton Évaluation par ligne */
.ms-eval-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; font-size: 12px;
  background: #fff; color: #1a56db;
  border: 1px solid #b8d0ee; border-radius: 4px;
  cursor: pointer;
}
.ms-eval-btn:hover { background: #eef4ff; }
.ms-eval-btn.ms-eval-done {
  background: #d4edda; color: #155724; border-color: #c3e6cb;
}
.ms-eval-btn.ms-eval-partial {
  background: #fff3cd; color: #856404; border-color: #ffeeba;
}

/* Actions évaluation (bouton modale + bouton fichier) */
.ms-eval-actions { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.ms-eval-file-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; font-size: 11.5px;
  background: #fff; color: #6b7a8c;
  border: 1px solid #cbd5e1; border-radius: 4px;
  cursor: pointer;
}
.ms-eval-file-btn:hover { background: #f1f5f9; color: #475569; }
.ms-eval-file-btn.ms-eval-file-loaded {
  background: #e0e7ff; color: #1a3a6e; border-color: #a5b8e8;
}
.ms-eval-file-btn.ms-eval-file-loaded:hover { background: #c7d2fe; }

/* Modale fichier évaluation */
.stage-eval-file-modal { display: flex; flex-direction: column; gap: 16px; }
.stage-eval-file-status {
  padding: 10px 14px; border-radius: 6px;
  font-size: 13px; display: flex; align-items: center; gap: 10px;
}
.stage-eval-file-status-ok {
  background: #e0e7ff; color: #1a3a6e; border: 1px solid #a5b8e8;
}
.stage-eval-file-status-empty {
  background: #f1f5f9; color: #6b7a8c; border: 1px solid #cbd5e1;
}
.stage-eval-file-status-ok { justify-content: space-between; }
.stage-eval-file-view {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; font-size: 12px;
  background: #fff; color: #1a56db;
  border: 1px solid #b8d0ee; border-radius: 4px;
  text-decoration: none;
}
.stage-eval-file-view:hover { background: #eef4ff; }
.stage-eval-file-drop { min-height: 180px; }
.stage-eval-file-drop.dropzone-disabled {
  opacity: 0.5; pointer-events: none;
  background: #f8fafc; border-color: #cbd5e1;
}
.stage-eval-file-drop.dropzone-disabled .btn-browse { cursor: not-allowed; }

/* Bloc "fichier sélectionné en attente" */
.stage-eval-pending {
  padding: 10px 14px; border-radius: 6px;
  background: #fffbea; color: #856404; border: 1px solid #f5c542;
  font-size: 13px; display: flex; align-items: center; gap: 10px;
  margin-top: 12px;
}
.stage-eval-pending-size { color: #b08a1a; font-size: 11.5px; margin-left: 4px; }

/* Liste de fichiers (multi) */
.stage-eval-files-list {
  border: 1px solid #e2e8f0; border-radius: 6px;
  background: #fff; max-height: 280px; overflow-y: auto;
}
.stage-eval-files-empty {
  padding: 20px; text-align: center;
  color: #6b7a8c; font-style: italic; font-size: 13px;
}
.stage-eval-file-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
}
.stage-eval-file-item:last-child { border-bottom: none; }
.stage-eval-file-item:hover { background: #f8fafc; }
.stage-eval-file-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.stage-eval-file-info .fa-file { color: #1a56db; }
.stage-eval-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-eval-file-date { color: #94a3b8; font-size: 11px; flex-shrink: 0; }
.stage-eval-file-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.stage-eval-file-del {
  background: transparent; border: 1px solid transparent;
  color: #c0392b; cursor: pointer; padding: 4px 8px; border-radius: 3px; font-size: 12px;
}
.stage-eval-file-del:hover { background: #fdecea; border-color: #c0392b; }

/* Modale d'évaluation */
.stage-eval-modal { font-size: 13px; }
.stage-eval-head {
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}
.stage-eval-sub { margin-left: 10px; color: #6b7a8c; font-size: 12px; }
.stage-eval-meta { color: #6b7a8c; font-size: 11.5px; margin-top: 4px; font-style: italic; }

.stage-eval-grid {
  width: 100%; border-collapse: collapse; margin-bottom: 14px;
}
.stage-eval-grid th {
  background: #eef4ff; color: #1a56db; font-weight: 600;
  padding: 6px 4px; border: 1px solid #c7d8f5;
  text-align: center; font-size: 11px;
}
.stage-eval-grid th:first-child { background: transparent; border: none; }
.stage-eval-crit {
  padding: 6px 10px; border: 1px solid #e2e8f0;
  font-weight: 500; color: #2c3e50;
  background: #f8fafc;
}
.stage-eval-cell {
  padding: 8px; border: 1px solid #e2e8f0;
  text-align: center; cursor: pointer;
  background: #fff;
}
.stage-eval-cell:hover { background: #eef4ff; }
.stage-eval-cell-sel { background: #c4e0ff !important; }
.stage-eval-cell input[type="radio"] { cursor: pointer; pointer-events: none; transform: scale(1.2); }

.stage-eval-row { margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.stage-eval-row label { font-weight: 600; color: #2c3e50; min-width: 200px; }
.stage-eval-row input[type="number"] {
  width: 90px; padding: 5px 8px;
  border: 1px solid #b8d0ee; border-radius: 4px;
}
.stage-eval-commentaires { flex-direction: column; align-items: stretch; }
.stage-eval-commentaires label { min-width: 0; }
.stage-eval-commentaires textarea {
  width: 100%; padding: 8px; resize: vertical;
  border: 1px solid #b8d0ee; border-radius: 4px;
  font-family: inherit; font-size: 13px;
}

.stage-eval-notes {
  display: flex; gap: 16px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid #e2e8f0;
}
.stage-eval-note {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 10px; border: 1px solid #b8d0ee; border-radius: 6px;
  background: #f5f9ff;
}
.stage-eval-note-label { font-size: 11px; color: #6b7a8c; text-transform: uppercase; font-weight: 600; }
.stage-eval-note-val { font-size: 28px; font-weight: 700; color: #1a3a6e; margin-top: 4px; }
.stage-eval-note-suffix { font-size: 11px; color: #6b7a8c; }
.stage-eval-note-finale { background: #e8f5e9; border-color: #6ed089; }
.stage-eval-note-finale .stage-eval-note-val { color: #155724; }
.ms-etu-name { font-weight: 600; color: #1a3556; }
.ms-diplome {
  display: inline-block;
  font-size: 10px;
  color: #6b7a8c;
  background: #f0f3f8;
  padding: 1px 6px;
  border-radius: 8px;
  margin-top: 3px;
}
.ms-etu-mail { font-size: 11px; margin-top: 4px; }
.ms-etu-mail a { color: #2e75b6; text-decoration: none; }
.ms-etu-mail a:hover { text-decoration: underline; }
.ms-conv-cell { min-width: 160px; }
.ms-no-conv {
  font-size: 12px; color: #6b7a8c; font-style: italic;
}
.ms-conv-btn {
  background: #eaf2fb; color: #2e75b6;
  border: 1px solid #c6dcef; border-radius: 4px;
  padding: 4px 10px; cursor: pointer;
  font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
}
.ms-conv-btn:hover { background: #2e75b6; color: #fff; }
.ms-contact-cell { min-width: 200px; font-size: 12px; line-height: 1.4; }
.ms-contact-cell a { color: #2e75b6; text-decoration: none; }
.ms-contact-cell a:hover { text-decoration: underline; }
.ms-entreprise {
  font-weight: 600; color: #1a3556;
  margin-bottom: 2px;
}
.ms-rdv-cell { width: 160px; }
.ms-rdv-cell .ff-date { width: 100%; }
.ms-rdv-cell .ff-date-input { font-size: 12px; }
.ms-note-cell { min-width: 200px; }
.ms-note-input {
  width: 100%;
  padding: 5px 8px;
  font-size: 12px; font-family: inherit;
  border: 1px solid #d6e0eb; border-radius: 3px;
  resize: vertical;
}
.ms-note-input:focus {
  outline: none; border-color: #2e75b6;
  box-shadow: 0 0 0 2px rgba(46,117,182,0.15);
}
.ms-empty {
  text-align: center; padding: 48px 20px;
  color: #6b7a8c;
}
.ms-empty p { margin: 10px 0; }

/* Modale convention */
.conv-body { display: flex; flex-direction: column; gap: 14px; }
.conv-section {
  background: #f7f9fc;
  border: 1px solid #d6e0eb;
  border-radius: 4px;
  padding: 10px 12px;
}
.conv-section-title {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: #2e75b6; font-weight: 700;
  margin-bottom: 8px;
}
.conv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 14px;
}
.conv-field { display: flex; flex-direction: column; gap: 3px; }
.conv-field-wide { grid-column: span 2; margin-top: 8px; }
.conv-field-label {
  font-size: 11px; color: #6b7a8c; font-weight: 600;
}
.conv-field-input {
  padding: 5px 8px;
  border: 1px solid #d6e0eb; border-radius: 3px;
  font-size: 13px; font-family: inherit;
  background: #fff;
}
.conv-field-input:focus {
  outline: none; border-color: #2e75b6;
  box-shadow: 0 0 0 2px rgba(46,117,182,0.15);
}
.conv-field-input[readonly] {
  background: #f0f3f8; color: #6b7a8c;
}
/* Le widget FormField.date (.ff-date) est lui-même un div, on retire le
 * `border` hérité de .conv-field-input pour que seul l'input interne le
 * porte (cohérent avec le visuel des autres FormField dans le projet). */
.conv-field-input.conv-date-widget {
  border: none;
  background: transparent;
  padding: 0;
}
textarea.conv-field-input { resize: vertical; min-height: 50px; }
.conv-error {
  background: #fdecea; border: 1px solid #f4b7b0; color: #c0392b;
  padding: 8px 12px; border-radius: 4px; font-size: 13px;
}
.conv-fk-hint {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 3px;
  font-size: 12.5px;
  background: #d4edda; color: #1e8449; border: 1px solid #abe2bb;
}
.conv-fk-hint i { margin-right: 4px; }
.conv-fk-hint.conv-fk-hint-new {
  background: #eaf2fb; color: #2e75b6; border-color: #c6dcef;
}
.conv-warning {
  background: #fff5e0; border: 1px solid #f0d39d; color: #8a5a00;
  padding: 8px 12px; border-radius: 4px; font-size: 12.5px;
  line-height: 1.4;
}
.conv-warning i { margin-right: 6px; color: #b6772b; }
.conv-warning code {
  background: #fff; padding: 0 4px; border-radius: 2px;
  border: 1px solid #f0d39d;
  font-family: monospace; font-size: 11px;
}

/* Bandeau info : convention extraite du PDF joint */
.conv-info {
  display: flex; align-items: flex-start; gap: 8px;
  background: #eaf4fd; border: 1px solid #b9dcf6; color: #155a8a;
  padding: 8px 12px; border-radius: 4px; font-size: 12.5px;
  line-height: 1.4;
}
.conv-info i { margin-top: 2px; color: #1f6fb5; }
.conv-info code {
  background: #fff; padding: 0 4px; border-radius: 2px;
  border: 1px solid #b9dcf6;
  font-family: monospace; font-size: 11px;
}

/* Séparateur CSV */
.separator-section {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fffbe6;
  border: 1px solid #ffe58f;
  border-radius: 6px;
  padding: 10px 14px;
}

.separator-label {
  font-size: 0.8em;
  color: #555;
  white-space: nowrap;
}

.separator-select {
  padding: 4px 8px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  font-size: 0.8em;
  background: white;
  cursor: pointer;
}

/* Résultat import */
.import-result {
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 0.82em;
  line-height: 1.5;
}

.import-result.success {
  background: #f0faf2;
  border: 1px solid #b7dfc4;
  color: #1a6e30;
}

.import-result.error {
  background: #fff3f3;
  border: 1px solid #f5b7b7;
  color: #c0392b;
}

.import-result.loading {
  background: #f0f4ff;
  border: 1px solid #c5d0f5;
  color: #2e75b6;
  display: flex;
  align-items: center;
  gap: 10px;
}

.import-result .error-list {
  margin-top: 6px;
  padding-left: 16px;
}

.import-result .error-list li {
  font-size: 0.9em;
  color: #a93226;
}

/* Les anciens .btn-cancel / .btn-import sont remplacés par .win-btn / .win-btn-primary */

/* Spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #c5d0f5;
  border-top-color: #2e75b6;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* ===== CHARGES ADMINISTRATIVES ===== */

.charges-list-wrap {
  min-height: 24px;
  margin-bottom: 6px;
}

.charges-loading,
.charges-empty {
  font-size: 0.82em;
  color: #aaa;
  font-style: italic;
}

.charge-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #eef2ff;
  border: 1px solid #c7d0f5;
  border-radius: 4px;
  padding: 4px 6px 4px 10px;
  margin-bottom: 4px;
  font-size: 0.84em;
}

.charge-delete-btn {
  background: none;
  border: none;
  color: #c0392b;
  cursor: pointer;
  font-size: 1.15em;
  line-height: 1;
  padding: 0 3px;
  flex-shrink: 0;
  transition: color 0.15s;
}

.charge-delete-btn:hover:not(:disabled) {
  color: #922b21;
}

.charges-add-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.charges-add-btn {
  white-space: nowrap;
  padding: 6px 10px;
  font-size: 0.82em;
}

/* ===== ÉCRAN DE CONNEXION ===== */

.login-screen {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
}

.login-screen.hidden {
  display: none;
}

.login-card {
  background: white;
  border-radius: 12px;
  padding: 36px 40px;
  width: 360px;
  max-width: 90vw;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.login-logo {
  text-align: center;
  margin-bottom: 12px;
  color: #2e75b6;
}

.login-logo i {
  font-size: 2.4em;
}

.login-logo h1 {
  font-size: 1.3em;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-top: 4px;
  color: #2e75b6;
}

.login-title {
  text-align: center;
  font-size: 1em;
  color: #666;
  margin-bottom: 24px;
  font-weight: 500;
}

.login-field {
  margin-bottom: 14px;
}

.login-field label {
  display: block;
  font-size: 0.8em;
  color: #555;
  margin-bottom: 5px;
  font-weight: 600;
}

.login-field .ff-host { display: block; }
.login-field input,
.login-field select,
.login-field .ff-select {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #ddd;
  border-radius: 6px;
  font-size: 0.93em;
  font-family: inherit;
  transition: border-color 0.2s;
  outline: none;
  background: #fff;
  box-sizing: border-box;
}

.login-field input:focus,
.login-field select:focus,
.login-field .ff-select:focus-within {
  border-color: #2e75b6;
  box-shadow: 0 0 0 3px rgba(46, 117, 182, 0.12);
}

.login-create-mill-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 7px 10px;
  background: #fff;
  color: #2e75b6;
  border: 1.5px dashed #2e75b6;
  border-radius: 6px;
  font-size: 0.85em;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-style 0.15s;
}

.login-create-mill-btn:hover {
  background: #2e75b6;
  color: #fff;
  border-style: solid;
}

.login-create-mill-btn i {
  margin-right: 4px;
}

/* Modale "Nouveau millésime" — section de reprise + tableau des blocs */
.newmill-section {
  margin-top: 14px;
  border-top: 1px solid #eee;
  padding-top: 14px;
}
.newmill-section-title {
  font-weight: 600;
  font-size: 0.92em;
  color: #333;
  margin-bottom: 10px;
}
.newmill-blocks {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.newmill-block-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px;
  cursor: pointer;
  font-size: 0.82em;
  color: #333;
  text-align: left;
  border-radius: 3px;
}
.newmill-block-row:hover {
  background: #f5f8fb;
}
/* Override de .dt-edit-ctrl input { width: 100% } qui étire les checkboxes */
.newmill-block-row input[type="checkbox"].newmill-cb {
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  accent-color: #2e75b6;
  cursor: pointer;
}
.newmill-block-row .newmill-block-text {
  flex: 1;
  line-height: 1.35;
}
.newmill-block-row .newmill-block-text em {
  font-style: italic;
  color: #777;
  font-size: 0.92em;
}
.newmill-no-source {
  font-size: 11px;
  opacity: 0.7;
  font-style: italic;
}

/* Pillule millésime actif (dans la modale de gestion, après l'année) */
.mill-active-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 10px;
  background: #1a56db;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Badge millésime permanent dans le ruban — calé à droite (margin-left: auto
 * dans un flex container), visuel discret pour ne pas concurrencer les onglets
 * principaux. */
.millesime-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;     /* pousse à droite ; À propos / Logout suivent */
  margin-right: 8px;
  padding: 2px 9px;
  background: #e2e8f0;
  color: #1e293b;
  border: 1px solid #94a3b8;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.millesime-badge:hover {
  background: #dbe7f5;
  color: #1f4e7a;
  border-color: #2e75b6;
}
.millesime-badge:active {
  transform: scale(0.97);
}
.millesime-badge i {
  font-size: 10px;
  opacity: 0.75;
}

.login-error {
  color: #c0392b;
  font-size: 0.82em;
  background: #fdf0ee;
  border-left: 3px solid #c0392b;
  padding: 7px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.login-btn {
  width: 100%;
  padding: 11px;
  background: #2e75b6;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.97em;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 4px;
}

.login-btn:hover:not(:disabled) {
  background: #1a5276;
}

.login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.login-forgot { text-align: center; margin-top: 10px; }
.login-forgot a { font-size: 12px; color: #2e75b6; text-decoration: none; }
.login-forgot a:hover { text-decoration: underline; }
.login-totp-info { font-size: 13px; color: #555; line-height: 1.5; margin-bottom: 14px; }
.login-trust { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #666; margin: 8px 0; cursor: pointer; }
.login-trust input { cursor: pointer; }

/* ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .container {
    padding: 30px;
    margin-top: 20px;
  }

  h1 {
    font-size: 1.5em;
  }

  p {
    font-size: 1em;
  }

  .ribbon-tabs {
    flex-wrap: wrap;
  }

  .group-section {
    flex-direction: row;
    padding-right: 8px;
  }

  .group-title {
    display: none;
  }
}

/* ===== RESPONSABILITÉS ===== */

.resp-split {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 12px;
}

.resp-panel {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.resp-panel-left {
  width: 280px;
  flex-shrink: 0;
}

.resp-panel-right {
  flex: 1;
  min-height: 0;
}

.resp-panel-header {
  padding: 8px 12px;
  background: linear-gradient(to bottom, #f0f0f0, #e8e8e8);
  border-bottom: 1px solid #d0d0d0;
  font-weight: 600;
  font-size: 12px;
  color: #444;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.resp-search {
  width: 100%;
  border: none;
  border-bottom: 1px solid #e0e0e0;
  padding: 7px 12px;
  font-size: 12px;
  outline: none;
  background: #fafafa;
  flex-shrink: 0;
}

.resp-search:focus {
  background: #fff;
  border-bottom-color: #2e75b6;
}

.resp-user-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.resp-user-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f2f2f2;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.1s;
}

.resp-user-item:hover {
  background: #eef2fb;
}

.resp-user-item.active {
  background: #1565C0;
  color: #fff;
}

.resp-user-civ {
  font-size: 11px;
  opacity: 0.65;
  min-width: 28px;
}

.resp-user-item.active .resp-user-civ {
  opacity: 0.8;
}

.resp-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  gap: 8px;
  border-bottom: 1px solid #e8eaf0;
  flex-shrink: 0;
  background: #f8f9fc;
}

.resp-filter-group {
  display: flex;
  gap: 4px;
}

.resp-filter-btn {
  padding: 3px 9px;
  font-size: 11px;
  border: 1px solid #c5cae9;
  border-radius: 12px;
  background: #fff;
  color: #555;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.resp-filter-btn:hover  { background: #e8eaf6; }
.resp-filter-btn.active { background: #1565C0; color: #fff; border-color: #1565C0; }

.resp-uncheckall {
  padding: 3px 9px;
  font-size: 11px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background: #fff;
  color: #c62828;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.resp-uncheckall:hover { background: #ffebee; border-color: #c62828; }

.resp-status {
  padding: 4px 14px;
  font-size: 11px;
  color: #888;
  min-height: 22px;
  flex-shrink: 0;
  border-bottom: 1px solid #f0f0f0;
}

.resp-status.saving { color: #1565C0; }
.resp-status.saved  { color: #2e7d32; }
.resp-status.error  { color: #c62828; }

.resp-charges-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 4px 0;
}

.resp-charge-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid #f2f2f2;
  cursor: pointer;
  transition: background 0.1s;
}

/* Sous-panel formations pour Responsable de formation (sous le libellé) */
.resp-formations-panel {
  flex: 1 1 100%;
  margin-left: 26px;   /* aligne avec le label */
  padding: 6px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.resp-formations-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.resp-formations-empty,
.resp-formations-loading {
  font-size: 12px; color: #6b7a8c; font-style: italic;
}
.resp-formation-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 10px;
  background: #eaf2fb;
  border: 1px solid #c6dcef;
  color: #1f5d99;
  border-radius: 12px;
  font-size: 12px;
  white-space: nowrap;
}
.resp-formation-del {
  border: none; background: transparent;
  color: #1f5d99; font-size: 16px; line-height: 1;
  cursor: pointer; padding: 0 4px;
}
.resp-formation-del:hover { color: #c0392b; }
.resp-formation-add-btn {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff; color: #1f5d99;
  border: 1px dashed #c6dcef;
  border-radius: 12px;
  padding: 3px 12px;
  font-size: 12px; cursor: pointer;
  font-family: inherit;
}
.resp-formation-add-btn:hover { background: #f0f7ff; border-style: solid; }
.resp-formation-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: #f7f9fc; padding: 8px 10px; border-radius: 6px;
  border: 1px solid #e1e8f0;
}
.resp-formation-form-ok,
.resp-formation-form-cancel {
  padding: 4px 12px; border-radius: 4px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit;
}
.resp-formation-form-ok {
  background: #2e75b6; color: #fff; border: 1px solid #2e75b6;
}
.resp-formation-form-ok:hover:not(:disabled) { background: #1f5d99; }
.resp-formation-form-ok:disabled { background: #c6dcef; border-color: #c6dcef; cursor: not-allowed; }
.resp-formation-form-cancel {
  background: #fff; color: #4a5568; border: 1px solid #d6e0eb;
}
.resp-formation-form-cancel:hover { background: #eef3f9; }

.resp-charge-item:hover {
  background: #f5f7ff;
}

.resp-charge-item input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: #1565C0;
  flex-shrink: 0;
}

.resp-charge-item label {
  cursor: pointer;
  font-size: 13px;
  flex: 1;
  user-select: none;
}

.resp-empty {
  color: #aaa;
  font-size: 12px;
  text-align: center;
  padding: 32px 20px;
  font-style: italic;
}

/* ── Parcours panel droit ── */
.parc-right-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid #e8eaf0;
  flex-shrink: 0;
  background: #f8f9fc;
  gap: 8px;
}
.parc-right-toolbar span {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.parc-dt-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.parc-dt-container .dt-wrapper {
  flex: 1;
  min-height: 0;
}

.parc-dt-container .dt-scroll-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* ===== MATIÈRES — barre de filtres ===== */

.mat-filters {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 7px 12px;
  background: #f7f8fa;
  border-bottom: 1px solid #d0d5dd;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.mat-filter-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mat-filter-label {
  font-size: 11px;
  font-weight: 600;
  color: #666;
  margin-right: 4px;
  white-space: nowrap;
}

.mat-filter-btn {
  padding: 3px 10px;
  font-size: 11px;
  border: 1px solid #c8cdd5;
  border-radius: 12px;
  background: #fff;
  color: #444;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.mat-filter-btn:hover {
  background: #e8edf4;
  border-color: #2e75b6;
}

.mat-filter-btn.active {
  background: #2e75b6;
  color: #fff;
  border-color: #2e75b6;
}

/* Zone DataTable à l'intérieur du conteneur filtré */
.mat-dt-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ── Layout matières vertical ───────────────────────────────────────── */
.mat-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
}

.mat-select-encart {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  padding: 10px 14px;
}

.mat-filter-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mat-filter-item label {
  font-size: 11px;
  font-weight: 600;
  color: #666;
  white-space: nowrap;
}

.mat-filter-select {
  height: 30px;
  border: 1px solid #c8cdd5;
  border-radius: 5px;
  padding: 0 8px;
  font-size: 12px;
  color: #222;
  background: #fff;
  cursor: pointer;
  min-width: 120px;
  display: flex;
  align-items: center;
}

.mat-filter-item--lg .mat-filter-select {
  min-width: 280px;
}

.mat-dt-encart {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  overflow: hidden;
}

.mat-dt-encart .dt-wrapper    { flex: 1; min-height: 0; }
.mat-dt-encart .dt-scroll-wrap { flex: 1; min-height: 0; overflow-y: auto; }

/* ── Onglets formulaire utilisateur ─────────────────────────────────── */
.form-tabs {
  display: flex;
  border-bottom: 2px solid #dde2ea;
  margin-bottom: 14px;
}
.form-tab-btn {
  padding: 7px 18px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-size: 0.93rem;
  color: #555;
  font-weight: 500;
  transition: color .15s, border-color .15s;
}
.form-tab-btn:hover { color: #2e75b6; }
.form-tab-btn.active { color: #2e75b6; border-bottom-color: #2e75b6; }
.form-tab-btn:disabled { color: #bbb; cursor: not-allowed; }
.form-tab-btn.muted { color: #bbb; cursor: pointer; }
.form-tab-btn.muted:hover { color: #999; }

.form-tab-panel { display: none; }
/* Le panneau actif reprend le même espacement que .dt-edit-form */
.form-tab-panel.active { display: flex; flex-direction: column; gap: 12px; }
/* Supprime le margin-bottom des onglets quand le panneau est directement adjacent */
.form-tabs { margin-bottom: 4px; }

.form-tab-msg {
  font-size: 0.82rem;
  color: #e67e22;
  min-height: 1.1em;
  padding: 0 2px 6px;
}

/* ── Lien "Modifier le mot de passe" ───────────────────────────────── */
.fu-mdp-toggle-link {
  font-size: 0.85em;
  color: #2e75b6;
  text-decoration: none;
  display: inline-block;
  padding: 4px 0;
}
.fu-mdp-toggle-link:hover { text-decoration: underline; }

/* ── Miniature signature existante ─────────────────────────────────── */
.sig-current-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #f7f9fc;
  border: 1px solid #dde2ea;
  border-radius: 6px;
}
.sig-del-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.sig-btn-delete { color: #888; border-color: #dde2ea; }
.sig-btn-delete:hover { color: #c0392b; border-color: #c0392b; background: #fdf0ee; }
/* Confirm : vert DataTable */
.sig-confirm-btn {
  color: #1a6e30;
  background: #d4edda;
  border-color: #b7dfc4;
}
.sig-confirm-btn:hover { background: #1a6e30; color: #fff; border-color: #1a6e30; }
/* Annuler : trois points gris foncé, style neutre */
.sig-cancel-btn {
  color: #444;
  background: #f0f2f5;
  border-color: #c8cdd5;
  letter-spacing: 1px;
  font-size: 0.75rem;
}
.sig-cancel-btn:hover { background: #e2e6ea; color: #222; }
.sig-current-label {
  font-size: 0.8rem;
  color: #666;
  white-space: nowrap;
  margin: 0;
}
#fu-sig-current-img {
  max-height: 60px;
  max-width: 200px;
  border: 1px solid #c8cdd5;
  border-radius: 3px;
  background: #fff;
  padding: 2px;
  object-fit: contain;
}

/* ── Dropzone signature ──────────────────────────────────────────────── */
.sig-dropzone {
  border: 2px dashed #adb8c8;
  border-radius: 8px;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  background: #f7f9fc;
  color: #6b7a8d;
  font-size: 0.9rem;
}
.sig-dropzone:hover, .sig-dropzone.dragover {
  border-color: #2e75b6;
  background: #eef3fa;
}
.sig-dropzone i { font-size: 2rem; margin-bottom: 8px; display: block; color: #adb8c8; }
.sig-dropzone.dragover i, .sig-dropzone:hover i { color: #2e75b6; }

.sig-preview-wrap {
  display: none;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
}
.sig-preview-wrap.visible { display: flex; }
.sig-crop-container {
  flex: 1 1 auto;
  min-width: 288px;
  height: 252px;
  background: #222;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sig-crop-container img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}
.sig-crop-container img {
  display: block;
  max-width: 100%;
}
/* Colonne de droite : boutons + status */
.sig-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 130px;
}
.sig-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sig-btn {
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #f0f2f5;
  cursor: pointer;
  font-size: 0.83rem;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.sig-btn:hover { background: #e2e8f0; }
.sig-btn.primary { background: #2e75b6; color: #fff; border-color: #2e75b6; }
.sig-btn.primary:hover { background: #245f94; }
.sig-status { font-size: 0.82rem; color: #555; min-height: 1.2em; }
.sig-status.ok  { color: #2a8a3e; }
.sig-status.err { color: #c0392b; }

/* ── Mode transparence signature ── */
.sig-transparency-wrap {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px; border: 2px solid #2e75b6;
  border-radius: 8px; background: #f3f6fa;
  margin-top: 12px;
}
.sig-trans-msg {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; line-height: 1.45;
}
.sig-trans-msg > i {
  flex: 0 0 auto; font-size: 22px; color: #2e75b6; margin-top: 2px;
}
.sig-trans-canvas {
  width: 100%; max-width: 600px; height: 180px;
  border: 1px dashed #aab8c8; border-radius: 6px;
  background: repeating-conic-gradient(#eef2f6 0% 25%, #fff 0% 50%) 0 0/16px 16px;
  cursor: crosshair;
  align-self: center;
}
.sig-trans-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
}
.sig-trans-tolerance {
  display: flex; align-items: center; gap: 6px; font-size: 12px; color: #555;
  margin-right: auto;
}
.sig-trans-tolerance input[type="range"] { width: 100px; }
/* Boutons disabled : aspect "muted" plus marqué */
.sig-btn.primary:disabled,
.sig-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.form-tabs.locked .form-tab-btn,
.form-tab-panel.locked {
  pointer-events: none; opacity: 0.4;
}

/* ===== ORDRES DE MISSION ===== */

.om-panel-viewer {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.om-panel-right {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.om-viewer-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #e8e8e8;
  border-radius: 4px;
}

.om-viewer-wrap .resp-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.om-viewer-iframe {
  flex: 1;
  min-height: 0;
  width: 100%;
  border: none;
  border-radius: 4px;
}

.om-upload-zone {
  padding: 12px;
  flex-shrink: 0;
}

.om-dropzone {
  padding: 16px 12px 12px;
}

.om-list-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.om-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.om-item-name {
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.om-item-meta {
  font-size: 10px;
  opacity: 0.65;
  margin-top: 2px;
}

.om-list-item.active .om-item-meta {
  opacity: 0.8;
}

.om-delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #aaa;
  padding: 4px 6px;
  border-radius: 3px;
  font-size: 12px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.om-delete-btn:hover {
  color: #c0392b;
  background: rgba(192, 57, 43, 0.08);
}

.om-list-item.active .om-delete-btn {
  color: rgba(255, 255, 255, 0.6);
}

.om-list-item.active .om-delete-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

.om-item-dest {
  font-size: 11px;
  opacity: 0.75;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.om-info-bar {
  flex-shrink: 0;
  background: #f0f4f8;
  border-bottom: 1px solid #d0d8e0;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.5;
}

.om-info-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
}

.om-info-label {
  font-weight: 600;
  color: #555;
}

.om-info-sep {
  color: #ccc;
  margin: 0 4px;
}

.om-info-bar small {
  color: #888;
}

/* Boutons Valider / Refuser dans le header du viewer */
.om-header-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

.om-validation-status {
  margin-left: auto;
}

.om-btn {
  padding: 3px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  transition: all 0.15s;
}

.om-btn-accord {
  color: #27ae60;
  border-color: #27ae60;
}

.om-btn-accord:hover {
  background: #27ae60;
  color: #fff;
}

.om-btn-refus {
  color: #c0392b;
  border-color: #c0392b;
}

.om-btn-refus:hover {
  background: #c0392b;
  color: #fff;
}

/* Badges validation */
.om-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
}

.om-badge-accord {
  background: #d5f5e3;
  color: #1e8449;
}

.om-badge-refus {
  background: #fadbd8;
  color: #922b21;
}

.om-badge-sm {
  font-size: 10px;
  vertical-align: middle;
}

.om-badge-sm.om-badge-accord {
  color: #27ae60;
  background: none;
}

.om-badge-sm.om-badge-refus {
  color: #c0392b;
  background: none;
}

.om-badge-sm.om-badge-envoye {
  color: #2980b9;
  background: none;
}

.om-badge-envoye {
  background: #d6eaf8;
  color: #2471a3;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.om-btn-send {
  color: #2980b9;
  border: 1px solid #2980b9;
  background: transparent;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 6px;
  transition: background .15s, color .15s;
}

.om-btn-send:hover {
  background: #2980b9;
  color: #fff;
}

.om-btn-send:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* ── Compte mail (modale) ──────────────────────────────────────────── */
.cm-btn-outline { color: #2e75b6; border-color: #2e75b6; }
.cm-btn-outline:hover { background: rgba(46,117,182,.08); }
.cm-btn-secondary { color: #c0392b; border-color: #c0392b; }
.cm-btn-secondary:hover { background: rgba(192,57,43,.07); }

/* Toggle SSL */
.cm-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.cm-toggle input { display: none; }
.cm-toggle-slider {
  width: 38px; height: 20px;
  background: #ccc; border-radius: 10px;
  position: relative; transition: background .2s;
}
.cm-toggle-slider::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  background: #fff; border-radius: 50%;
  top: 2px; left: 2px;
  transition: transform .2s;
}
.cm-toggle input:checked + .cm-toggle-slider { background: #27ae60; }
.cm-toggle input:checked + .cm-toggle-slider::after { transform: translateX(18px); }
.cm-toggle-label { font-size: .88em; color: #555; }

/* Hint + messages */
.cm-hint { font-size: .82em; color: #7f8c8d; padding: 4px 0; }
.cm-hint i { margin-right: 4px; }
.cm-msg { font-size: .85em; padding: 6px 0; color: #c0392b; }
.cm-msg-ok { color: #27ae60; }

/* Résultat test */
.cm-test-result {
  max-width: 560px; width: 100%;
  margin-top: 12px; padding: 10px 16px;
  border-radius: 6px; font-size: .88em; font-weight: 500;
}
.cm-test-loading { background: #eaf2f8; color: #2e75b6; }
.cm-test-success { background: #d5f5e3; color: #1e8449; }
.cm-test-error   { background: #fadbd8; color: #922b21; }

/* ─── Comptes mail multi (modale) ───────────────────────────────── */
.cm-layout {
  display: flex;
  height: 100%;
  min-height: 420px;
}
.cm-sidebar {
  flex: 0 0 240px;
  background: #f7f9fc;
  border-right: 1px solid #d6e0eb;
  display: flex;
  flex-direction: column;
  padding: 12px 10px;
  gap: 10px;
}
.cm-sidebar-header {
  font-size: .78em;
  text-transform: uppercase;
  color: #6b7785;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 0 4px;
}
.cm-account-list {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cm-account-item {
  position: relative;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  background: #fff;
  border: 1px solid #e0e6ee;
  transition: background .12s, border-color .12s;
}
.cm-account-item:hover { background: #eaf2f8; }
.cm-account-item.active {
  background: #d6e6f4;
  border-color: #2e75b6;
}
.cm-account-title {
  font-size: .9em;
  font-weight: 600;
  color: #2c3e50;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cm-account-sub {
  font-size: .78em;
  color: #6b7785;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cm-account-empty {
  font-size: .85em;
  color: #6b7785;
  padding: 12px;
  font-style: italic;
}
.cm-default-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: .72em;
  color: #b8860b;
  background: #fef9e7;
  border: 1px solid #f6e58d;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
}
.cm-default-badge i { margin-right: 2px; }
.cm-add-btn {
  width: 100%;
  justify-content: center;
}
.cm-form-pane {
  flex: 1 1 auto;
  padding: 16px 20px;
  overflow-y: auto;
}

/* ─── SAGHE Import Wizard ─────────────────────────────────────────────── */
.saghe-wizard { display: flex; flex-direction: column; gap: 0; }
.saghe-steps {
  display: flex; gap: 0; border-bottom: 2px solid #e0e0e0; margin-bottom: 16px;
}
.saghe-step {
  flex: 1; text-align: center; padding: 10px 8px; font-size: 13px; font-weight: 600;
  color: #999; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all .2s;
}
.saghe-step.active { color: #4a90d9; border-bottom-color: #4a90d9; }
.saghe-step.done   { color: #27ae60; border-bottom-color: #27ae60; }

.saghe-body { min-height: 300px; max-height: 60vh; overflow-y: auto; }

.saghe-footer {
  display: flex; gap: 8px; justify-content: flex-end; padding-top: 12px;
  border-top: 1px solid #e0e0e0; margin-top: 12px;
}

.saghe-dropzone {
  border: 2px dashed #bbb; border-radius: 12px; padding: 48px 24px;
  text-align: center; cursor: pointer; transition: all .2s;
}
.saghe-dropzone:hover, .saghe-dropzone.dragover {
  border-color: #4a90d9; background: #f0f6ff;
}

.saghe-table-wrap { max-height: 45vh; overflow: auto; border: 1px solid #e0e0e0; border-radius: 6px; }
.saghe-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.saghe-table th {
  position: sticky; top: 0; background: #f5f5f5; padding: 8px 6px;
  text-align: left; border-bottom: 2px solid #ddd; font-weight: 600; white-space: nowrap;
}
.saghe-table td { padding: 6px; border-bottom: 1px solid #eee; }
.saghe-table tr:hover { background: #e8f0fe; }

.saghe-match-code td:first-child { border-left: 3px solid #27ae60; }
.saghe-match-name td:first-child { border-left: 3px solid #f39c12; }
.saghe-match-none td:first-child { border-left: 3px solid #c0392b; }

.saghe-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;
}
.saghe-badge-ok     { background: #d5f5e3; color: #1e8449; }
.saghe-badge-create { background: #fdebd0; color: #935116; }

.saghe-select {
  padding: 3px 6px; border: 1px solid #ccc; border-radius: 4px; font-size: 12px; max-width: 200px;
}
.saghe-input {
  padding: 3px 6px; border: 1px solid #ccc; border-radius: 4px; font-size: 12px;
}

.saghe-stat-card {
  background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; text-align: center;
}
.saghe-stat-num { font-size: 28px; font-weight: 700; color: #4a90d9; }
.saghe-stat-label { font-size: 12px; color: #666; margin-top: 4px; }

/* ─── DataTable searchable select (panel fixed) ──────────────────── */
.dt-ss-panel {
  position: fixed; z-index: 99999;
  background: #fff; border: 1px solid #4a90d9;
  border-radius: 0 0 6px 6px; box-shadow: 0 6px 20px rgba(0,0,0,.25);
  max-width: 350px;
}
.dt-ss-input {
  display: block; width: 100%; padding: 7px 10px; border: none; border-bottom: 1px solid #ddd;
  font-size: 13px; outline: none; box-sizing: border-box;
}
.dt-ss-list { max-height: 250px; overflow-y: auto; }
.dt-ss-item { display: flex; align-items: center; padding: 5px 10px; font-size: 13px; cursor: pointer; }
.dt-ss-item:hover { background: #e8f0fe; }
.dt-ss-active { background: #d6eaf8; font-weight: 600; }

/* ─── Affectation groupes élèves ──────────────────────────────────── */
.aff-grp-section {
  display: flex; flex: 1; min-height: 0; gap: 12px;
}
.aff-grp-left {
  width: 260px; flex-shrink: 0; display: flex; flex-direction: column;
  background: rgba(255,255,255,0.95); border: 1px solid rgba(0,0,0,0.15);
  border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); overflow: hidden;
}
.aff-grp-list { flex: 1; overflow-y: auto; }
.aff-grp-item {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 12px;
  cursor: pointer; border-bottom: 1px solid #eee;
}
.aff-grp-item:hover { background: #f0f6ff; }
.aff-grp-item.active { background: #d6eaf8; border-left: 3px solid #2980b9; }
.aff-grp-right {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  background: rgba(255,255,255,0.95); border: 1px solid rgba(0,0,0,0.15);
  border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); overflow: hidden;
}
.aff-grp-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 16px; overflow: hidden; }
.aff-grp-header { flex-shrink: 0; margin-bottom: 12px; }
.aff-grp-header h3 { margin: 0; color: #2c3e50; }
.aff-grp-split { display: flex; gap: 16px; flex: 1; min-height: 0; }
.aff-grp-members, .aff-grp-available {
  flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0;
}
.aff-grp-subtitle {
  flex-shrink: 0;
  font-size: 12px; font-weight: 700; color: #555; text-transform: uppercase;
  padding: 4px 0; margin-bottom: 6px; border-bottom: 1px solid #ddd;
}
.aff-grp-member-list, .aff-grp-avail-list {
  flex: 1; overflow-y: auto; min-height: 0;
}
.aff-grp-student {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px;
  border-bottom: 1px solid #f0f0f0; font-size: 13px;
}
.aff-grp-student:hover { background: #fafafa; }
.aff-grp-student span:first-child { flex: 1; }
.aff-grp-remove {
  background: none; border: none; color: #c0392b; cursor: pointer;
  font-size: 12px; padding: 2px 6px; border-radius: 4px;
}
.aff-grp-remove:hover { background: #f8d7da; }
.aff-grp-add-btn {
  background: none; border: none; color: #27ae60; cursor: pointer;
  font-size: 12px; padding: 2px 6px; border-radius: 4px;
}
.aff-grp-add-btn:hover { background: #d4edda; }

/* ─── Resp International — destinations en colonnes ───────────────── */
.ri-dest-row {
  display: flex; align-items: center; gap: 4px; padding: 4px 8px;
  border-bottom: 1px solid #f0f0f0; font-size: 12px; cursor: default;
}
.ri-dest-row:hover { background: #fafafa; }
.ri-col-flag { width: 24px; flex-shrink: 0; text-align: center; }
.ri-col-pays { width: 100px; flex-shrink: 0; font-weight: 600; }
.ri-col-ville { width: 100px; flex-shrink: 0; }
.ri-col-univ { flex: 1; color: #555; }
.ri-header-row { display: flex; align-items: center; justify-content: space-between; }

/* ─── Import Étudiants — Sélection diplômes ──────────────────────── */
.import-dipl-list {
  max-height: 300px; overflow-y: auto;
  border: 1px solid #ddd; border-radius: 6px; padding: 4px 0;
}
.import-dipl-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  cursor: pointer; font-size: 13px;
}
.import-dipl-item:hover { background: #f0f6ff; }
.import-dipl-item input { cursor: pointer; }
.import-dipl-item span:first-of-type { flex: 1; }
.import-dipl-count {
  background: #e0e0e0; color: #555; font-size: 11px; font-weight: 600;
  padding: 1px 8px; border-radius: 10px;
}

/* ─── Fiche Étudiant ─────────────────────────────────────────────── */
.etu-fiche { padding: 4px 0; }
.etu-fiche-header { margin-bottom: 16px; }
.etu-fiche-name { font-size: 20px; font-weight: 700; color: #2c3e50; }
.etu-fiche-code { font-size: 13px; color: #666; margin-top: 2px; }
.etu-fiche-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-bottom: 16px;
}
.etu-fiche-item { padding: 2px 0; }
.etu-fiche-label { font-size: 11px; font-weight: 600; color: #888; text-transform: uppercase; }
.etu-fiche-value { font-size: 14px; color: #2c3e50; }
.etu-fiche-apogee { font-size: 12px; color: #888; margin-bottom: 16px; }
.etu-parcours-badge {
  display: inline-block; padding: 2px 10px; border-radius: 12px;
  font-size: 11px; font-weight: 600; color: #fff; letter-spacing: 0.3px;
}
.etu-fiche-section-title {
  font-size: 14px; font-weight: 700; color: #2c3e50;
  padding: 8px 0 4px; border-bottom: 2px solid #888; margin-bottom: 8px;
}

/* ─── Service Enseignant ──────────────────────────────────────────── */
.svc-ens-section {
  padding: 16px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.svc-ens-picker { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.svc-ens-picker-left { display: flex; align-items: center; }
.svc-ens-picker-actions { display: flex; gap: 8px; flex-wrap: nowrap; }
#svcEnsAddBtn, #svcEnsPrintBtn { white-space: nowrap; }
#svcEnsAddBtn:disabled, #svcEnsPrintBtn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Services formation — ligne sélecteurs */
.svc-form-picker-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.svc-form-picker-row > span[id^="svcFormParcoursWrap"] {
  display: inline-flex; align-items: center; gap: 6px;
}
.svc-form-info-row {
  font-size: 12px;
  color: #6b7a8c;
  margin-bottom: 12px;
  min-height: 1em;
}

/* Services formation — tableau enseignants */
.svc-form-table { font-size: 12px; border-collapse: collapse; width: 100%; }
.svc-form-table .svc-form-row { cursor: default; }
.svc-form-table .svc-form-row:hover { background: #f5f9ff; }
.svc-form-table .svc-form-expand {
  text-align: center; cursor: pointer; color: #6b7a8c;
  width: 24px; user-select: none;
}
.svc-form-table .svc-form-expand:hover { background: #eef4ff; color: #1a56db; }
.svc-form-table .svc-form-expand i { font-size: 10px; transition: transform 0.15s ease; }
.svc-form-table tr.svc-form-row-expanded .svc-form-expand i { transform: rotate(90deg); }
.svc-form-table tr.svc-form-row-expanded { background: #f5f9ff; }

/* Pillules de statut de validation (services) */
.svc-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: filter 0.1s ease;
}
.svc-pill:hover:not(:disabled) { filter: brightness(0.95); }
.svc-pill:disabled { opacity: 0.6; cursor: wait; }
.svc-pill-valide {
  background: #d4edda;
  color: #155724;
  border-color: #c3e6cb;
}
.svc-pill-brouillon {
  background: #fff3cd;
  color: #856404;
  border-color: #ffeeba;
}

/* Inputs éditables des heures en détail Services formation */
.svc-form-edit {
  width: 100%; box-sizing: border-box;
  border: 1px solid transparent; background: transparent;
  text-align: right; font: inherit; font-weight: 600;
  color: #1a3a6e; padding: 2px 4px; border-radius: 2px;
}
.svc-form-edit:hover { background: #fff; border-color: #b8d0ee; }
.svc-form-edit:focus {
  outline: none; background: #fff; border-color: #1a56db;
  box-shadow: 0 0 0 2px rgba(26,86,219,0.18);
}
.svc-form-edit.svc-form-saving { background: #fffbea; border-color: #f5c542; }
.svc-form-edit.svc-form-error  { background: #fdecea; border-color: #c0392b; color: #c0392b; }

/* Boutons retrait enseignant / matière */
.svc-form-del-teacher, .svc-form-del-mat {
  background: transparent; border: 1px solid transparent;
  color: #c0392b; cursor: pointer; padding: 2px 6px;
  border-radius: 3px; font-size: 11px;
}
.svc-form-del-teacher:hover, .svc-form-del-mat:hover {
  background: #fdecea; border-color: #c0392b;
}

/* Libellé matière cliquable pour swap */
.svc-form-mat-name {
  cursor: pointer; padding: 1px 4px; border-radius: 3px;
  border: 1px solid transparent; display: inline-block;
}
.svc-form-mat-name:hover {
  background: #fff; border-color: #b8d0ee; color: #1a3a6e;
}
/* Variante placeholder pour les lignes vides d'ajout */
.svc-form-mat-placeholder,
.svc-form-teacher-placeholder {
  color: #6b7a8c; font-style: italic; font-weight: 500;
  cursor: pointer; padding: 1px 4px; border-radius: 3px;
  border: 1px solid transparent; display: inline-block;
}
.svc-form-mat-placeholder:hover,
.svc-form-teacher-placeholder:hover {
  color: #1a56db; background: #fff; border-color: #b8d0ee;
}
/* Inputs désactivés (avant choix de matière sur ligne d'ajout) */
.svc-form-new-edit:disabled {
  color: #ccc; background: #f6f8fa; cursor: not-allowed;
}

/* Panneau autocomplete matière (positionné absolute par JS) */
.svc-form-mat-panel {
  position: absolute; z-index: 1000;
  background: #fff; border: 1px solid #b8d0ee; border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  font-size: 11.5px; padding: 4px;
}
.svc-form-mat-search {
  width: 100%; box-sizing: border-box;
  padding: 4px 6px; border: 1px solid #d4dce6;
  border-radius: 3px; font: inherit; outline: none;
}
.svc-form-mat-search:focus { border-color: #1a56db; }
.svc-form-mat-list { max-height: 260px; overflow-y: auto; margin-top: 4px; }
.svc-form-mat-opt {
  padding: 4px 8px; cursor: pointer; color: #1a3a6e;
  white-space: nowrap; border-radius: 2px;
}
.svc-form-mat-opt:hover { background: #e8f0fe; }
.svc-form-mat-opt.is-selected { background: #eef4ff; font-weight: 600; }
.svc-form-mat-opt.is-empty {
  color: #999; font-style: italic; cursor: default;
}
.svc-form-mat-opt.is-empty:hover { background: transparent; }

/* Impression : ne garder que la fiche service-enseignant.
   On utilise visibility (et non display) pour ne pas casser la chaîne
   d'ancêtres : tout est masqué, sauf #svcEnsContent et ses descendants.
   #svcEnsContent est repositionné en haut de la page pour ne pas hériter
   d'éventuels offset de ses ancêtres. */
@media print {
  body.svc-ens-printing * { visibility: hidden !important; }
  body.svc-ens-printing #svcEnsContent,
  body.svc-ens-printing #svcEnsContent * { visibility: visible !important; }
  body.svc-ens-printing #svcEnsContent {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important;
    background: #fff !important;
    color: #000 !important;
    overflow: visible !important;
  }
  /* Cacher les boutons d'action */
  body.svc-ens-printing .svc-ens-row .svc-ens-act-cell,
  body.svc-ens-printing .svc-ens-act-col { display: none !important; }
  /* Table occupe toute la largeur, colonnes chiffres réduites */
  body.svc-ens-printing .svc-ens-section,
  body.svc-ens-printing .svc-ens-year,
  body.svc-ens-printing .svc-ens-formation { width: 100% !important; max-width: none !important; }
  body.svc-ens-printing .svc-ens-table { width: 100% !important; table-layout: fixed !important; }
  body.svc-ens-printing .svc-num-col { width: 36px !important; }
  body.svc-ens-printing .svc-ens-table th,
  body.svc-ens-printing .svc-ens-table td { font-size: 9px !important; padding: 2px 4px !important; }
  /* Sauts de page propres */
  body.svc-ens-printing .svc-ens-formation { page-break-inside: avoid; }
  body.svc-ens-printing tr { page-break-inside: avoid; }
}

/* Modale de saisie / édition de services */
.saisie-svc-form { display: flex; flex-direction: column; gap: 14px; }
.saisie-svc-filters { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.saisie-svc-filters label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 12px; }
.saisie-svc-filters .saghe-select { min-width: 160px; }
.saisie-svc-table-wrap { border: 1px solid #e0e0e0; border-radius: 6px; max-height: 50vh; overflow: auto; }
.saisie-svc-empty { padding: 24px; text-align: center; color: #888; font-style: italic; }
.saisie-svc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.saisie-svc-table th { background: #f3f3f3; text-align: left; padding: 8px; border-bottom: 2px solid #ddd; font-weight: 600; }
.saisie-svc-table td { padding: 4px 6px; border-bottom: 1px solid #eee; }
.saisie-svc-table tr:hover td { background: #fafafa; }
.saisie-svc-table .saisie-svc-num { text-align: right; width: 70px; padding-right: 0; }
.saisie-svc-table .saisie-svc-act { width: 36px; text-align: center; }
.saisie-svc-table .saisie-svc-act-multi {
  width: 64px; text-align: center; white-space: nowrap;
}
.saisie-svc-detail {
  border: none; background: transparent; color: #2e75b6; cursor: pointer;
  padding: 4px 6px; border-radius: 4px; transition: background 0.12s;
}
.saisie-svc-detail:hover { background: #eaf3fb; }
.saisie-svc-detail:disabled {
  opacity: 0.3; cursor: not-allowed; background: transparent;
}

/* Modale "demande de dépassement" : attente, aperçu PDF, actions */
.depass-wait {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 60px 20px; text-align: center;
}
.depass-wait > i.fas { font-size: 48px; color: #2e75b6; }
.depass-wait-msg strong { font-size: 15px; }
.depass-wait-msg small { color: #666; line-height: 1.6; display: block; margin-top: 6px; }

.depass-error {
  display: flex; align-items: center; gap: 12px;
  padding: 24px; background: #fdecea; border-left: 4px solid #c0392b;
  border-radius: 4px; color: #922b21;
}
.depass-error i { font-size: 24px; color: #c0392b; }

.depass-layout {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 16px;
  height: 100%;
  min-height: 480px;
}
.depass-preview {
  width: 100%; height: 100%;
  border: 1px solid #d6e0eb; border-radius: 6px;
  background: #f7f9fc;
}
.depass-actions {
  display: flex; flex-direction: column; gap: 10px;
}
.depass-summary {
  background: #f3f6fa; border: 1px solid #d6e0eb;
  border-radius: 6px; padding: 10px 12px; margin-bottom: 4px;
}
.depass-summary-row {
  display: flex; justify-content: space-between; font-size: 12px;
  padding: 2px 0;
}
.depass-summary-row strong { color: #c0392b; }
.depass-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 12px; text-decoration: none; cursor: pointer;
}
.win-btn-validate {
  background: #27ae60 !important; color: #fff !important;
  border-color: #1e8449 !important;
}
.win-btn-validate:hover:not(:disabled) {
  background: #1e8449 !important;
}
.depass-status {
  margin-top: 8px; padding: 8px 10px; font-size: 12px;
  border-radius: 4px; background: #f3f6fa; border-left: 3px solid #2e75b6;
  display: flex; align-items: center; gap: 6px;
}
.depass-status-ok    { background: #eafaf1; border-left-color: #27ae60; }
.depass-status-error { background: #fdecea; border-left-color: #c0392b; color: #922b21; }

/* ── Webmail : layout split avec diviseur draggable ── */
.webmail-layout {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  background: #fff;
  border: 1px solid #d6e0eb;
  border-radius: 6px;
  overflow: hidden;
}
.webmail-left {
  flex: 0 0 20%;
  min-width: 160px;
  background: #f7f9fc;
  border-right: 1px solid #d6e0eb;
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.webmail-account-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: #fff;
  border-bottom: 1px solid #d6e0eb;
  flex: 0 0 auto;
}
.webmail-account-label {
  font-size: .8em;
  color: #6b7785;
  font-weight: 600;
}
.webmail-account-select {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 6px;
  font-size: .88em;
  border: 1px solid #d6e0eb;
  border-radius: 3px;
  background: #fff;
}
.webmail-folders-host {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px;
}
.webmail-right {
  flex: 1 1 auto;
  min-width: 200px;
  overflow-y: auto;
  padding: 16px;
}
.webmail-divider {
  flex: 0 0 5px;
  background: #e0e6ee;
  cursor: col-resize;
  position: relative;
  transition: background 0.15s;
}
.webmail-divider:hover, .webmail-divider:active { background: #2e75b6; }
.webmail-divider::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 1px; height: 32px;
  background: #b0bcc9;
}
.webmail-placeholder {
  padding: 24px; text-align: center; color: #888; font-size: 13px;
}
.webmail-placeholder i { display: block; font-size: 36px; opacity: 0.4; margin-bottom: 10px; }
.webmail-error {
  padding: 12px; background: #fdecea; border-left: 3px solid #c0392b;
  color: #922b21; font-size: 12px; border-radius: 4px;
}
.webmail-error i { margin-right: 6px; }

/* Liste des dossiers IMAP */
.webmail-folder-list { display: flex; flex-direction: column; gap: 1px; margin: -12px; }

/* Bouton "+" à droite de chaque dossier (créer sous-dossier).
   Caché par défaut, apparaît au survol de la ligne. */
.webmail-folder .webmail-folder-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wm-folder-add-btn, .wm-folder-del-btn {
  background: transparent; border: 1px solid transparent;
  cursor: pointer;
  padding: 2px 5px; font-size: 11px; border-radius: 3px;
  margin-left: 0; opacity: 0; flex-shrink: 0;
  transition: opacity 0.15s, background 0.15s;
}
.wm-folder-add-btn { color: #6b7a8c; }
.wm-folder-del-btn { color: #c0392b; }
.webmail-folder:hover .wm-folder-add-btn,
.webmail-folder:hover .wm-folder-del-btn { opacity: 1; }
.wm-folder-add-btn:hover { background: #eef4ff; border-color: #b8d0ee; color: #1a56db; }
.wm-folder-del-btn:hover { background: #fdecea; border-color: #c0392b; }

/* Menu contextuel sur clic-droit d'un dossier */
.wm-folder-ctxmenu {
  position: fixed; z-index: 1500;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 4px 0; min-width: 180px;
}
.wm-folder-ctxmenu button {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 6px 12px; border: none; background: transparent;
  text-align: left; font-size: 13px; cursor: pointer;
  color: #1a3a6e;
}
.wm-folder-ctxmenu button:hover { background: #eef4ff; }
.wm-folder-ctxmenu button[data-action="del"] { color: #c0392b; }
.wm-folder-ctxmenu button[data-action="del"]:hover { background: #fdecea; }
.webmail-folder {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; font-size: 13px; cursor: pointer;
  border-left: 3px solid transparent;
  user-select: none;
  color: #2c3e50;
  transition: background 0.12s;
}
.webmail-folder:hover { background: #e8eef5; }
.webmail-folder.active {
  background: #eaf3fb; border-left-color: #2e75b6;
  font-weight: 600; color: #1a3556;
}
.webmail-folder > i.fas:not(.webmail-chevron) { color: #6b7a8c; width: 16px; text-align: center; }
.webmail-folder.active > i.fas:not(.webmail-chevron) { color: #2e75b6; }
.webmail-folder span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Liste des messages */
.webmail-message-list {
  display: flex; flex-direction: column;
  margin: -16px;
}
.webmail-message {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #eef2f6;
  cursor: pointer;
  transition: background 0.12s;
}
.webmail-message:hover { background: #dde7f2; }
.webmail-message.wm-unread { background: #f3f8fd; }
.webmail-message.wm-unread:hover { background: #c9d9ec; }
.webmail-message.wm-unread .wm-subject { font-weight: 600; color: #1a3556; }
/* État sélectionné : un seul mail à la fois, partout (inbox, recherche,
   corbeille…). Bord gauche bleu marqué + fond accentué. */
.webmail-message.wm-selected,
.webmail-message.wm-selected:hover {
  background: #b8d4f0;
  box-shadow: inset 4px 0 0 #1a56db;
}
.webmail-message.wm-selected.wm-unread .wm-subject { color: #0d2845; }

/* Étoile IMAP \Flagged (Zimbra) */
.wm-star {
  background: transparent; border: none; cursor: pointer;
  padding: 2px 4px; color: #cbd5e1; font-size: 13px;
}
.wm-star:hover { color: #f59e0b; }
.wm-star.wm-star-on { color: #f59e0b; }

/* Pastille couleur personnelle (clic = ouvre picker) */
.wm-color-dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid #cbd5e1;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform 0.12s;
}
.wm-color-dot:hover { transform: scale(1.2); }
.wm-color-dot.wm-color-red    { background: #dc2626; border-color: #b91c1c; }
.wm-color-dot.wm-color-orange { background: #f97316; border-color: #ea580c; }
.wm-color-dot.wm-color-yellow { background: #facc15; border-color: #ca8a04; }
.wm-color-dot.wm-color-green  { background: #16a34a; border-color: #15803d; }
.wm-color-dot.wm-color-blue   { background: #2563eb; border-color: #1d4ed8; }
.wm-color-dot.wm-color-purple { background: #9333ea; border-color: #7e22ce; }
.wm-color-dot.wm-color-gray   { background: #6b7280; border-color: #4b5563; }

/* Popup du sélecteur de couleur */
.wm-color-picker {
  position: absolute; z-index: 1500;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 6px;
  display: flex; gap: 6px;
}
.wm-color-picker .wm-color-dot { width: 18px; height: 18px; }
.wm-color-picker-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid #cbd5e1; cursor: pointer;
  color: #94a3b8; font-size: 11px;
  background: #fff;
}
.wm-color-picker-clear:hover { color: #475569; border-color: #475569; }
.wm-flags {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 4px;
  min-width: 20px;
}
.wm-flag {
  font-size: 11px;
  width: 16px; text-align: center;
}
.wm-flag-answered { color: #2e75b6; }
.wm-flag-forwarded { color: #7a4ea3; }
.wm-main { flex: 1 1 auto; min-width: 0; }
.wm-subject {
  font-size: 14px; color: #2c3e50;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wm-from {
  font-size: 12px; color: #6b7a8c;
  margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wm-right {
  display: flex; align-items: center; gap: 8px;
  flex: 0 0 auto;
}
.wm-clip { color: #6b7a8c; font-size: 13px; }
.wm-date {
  font-size: 12px; color: #6b7a8c;
  min-width: 60px; text-align: right;
}
.wm-row-btn {
  border: none; background: transparent; color: #b0bcc9;
  cursor: pointer; padding: 4px 6px; border-radius: 4px;
  font-size: 13px; opacity: 0;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
}
.webmail-message:hover .wm-row-btn { opacity: 1; }
.wm-toggle-seen:hover { color: #2e75b6; background: #eaf2fb; }
.wm-archive:hover     { color: #c0392b; background: #fdecea; }
.wm-row-btn:disabled,
.wm-row-btn.wm-archive-pending {
  opacity: 1;
  color: #b0bcc9; background: transparent;
  cursor: progress; pointer-events: none;
}


/* États drag-and-drop */
.webmail-message { user-select: none; }
.webmail-message.wm-dragging { opacity: 0.35; }
.wm-ghost {
  /* Ghost cloné par dragdrop.js — rendu opaque + ombre forte */
  background: #fff !important;
  border: 1px solid #d6e0eb !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
}

/* === Éditeur IUT (TipTap) ============================================ */
.iutedit {
  display: flex; flex-direction: column;
  border: 1px solid #d6e0eb; border-radius: 6px;
  background: #fff;
}
.iutedit-toolbar {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px; background: #f6f9fc;
  border-bottom: 1px solid #e8eef5;
  border-radius: 6px 6px 0 0;
}
.iutedit-tb-group {
  display: flex; gap: 2px; align-items: center;
  padding-right: 6px; border-right: 1px solid #dfe6ee;
}
.iutedit-tb-group:last-child { border-right: none; padding-right: 0; }
.iutedit-tb-btn {
  border: 1px solid transparent; background: transparent; cursor: pointer;
  padding: 5px 8px; border-radius: 4px; color: #2c3e50;
  font-size: 13px; min-width: 30px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
}
.iutedit-tb-btn:hover { background: #e3e8ee; border-color: #c5d3e2; }
.iutedit-tb-btn.active { background: #d8e6f5; border-color: #b7c8de; }
.iutedit-tb-font, .iutedit-tb-size {
  height: 28px; padding: 2px 6px; border: 1px solid #d6e0eb; border-radius: 4px;
  background: #fff; font-size: 12.5px;
}
.iutedit-tb-font { min-width: 110px; }
.iutedit-tb-size { min-width: 70px; }
.iutedit-tb-color {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer; padding: 3px 6px; border-radius: 4px;
  background: transparent; border: none;
  min-width: 28px;
  transition: background .12s;
}
.iutedit-tb-color:hover { background: #e3e8ee; }
.iutedit-tb-color > i { font-size: 13px; color: #2c3e50; line-height: 1; }
.iutedit-tb-color-bar {
  display: block;
  width: 18px; height: 4px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
}
/* Bar transparente / vide : motif damier pour montrer l'absence de couleur */
.iutedit-tb-color-bar:not([style*="background"]) {
  background: repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 0 0/8px 8px;
}

.iutedit-content-wrap {
  position: relative;
  background: #fff;
  border-radius: 0 0 6px 6px;
  /* Le scroll vit sur le wrap (comme `.pe-pages-container` dans Froogle),
   * pas sur la zone éditeur elle-même. C'est crucial : avec overflow:auto
   * directement sur `.iutedit-content`, l'apparition de la scrollbar lors
   * d'événements de tableau provoque un reflow qui agrandit les rangées. */
  max-height: 70vh; overflow-y: auto;
}
.iutedit-content {
  position: relative;
  min-height: 260px;
  padding: 14px 18px;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 14px; line-height: 1.5; color: #2c3e50;
}
.iutedit-content .ProseMirror {
  outline: none; min-height: 230px;
}
.iutedit-content .ProseMirror p { margin: 0 0 8px; }
.iutedit-content .ProseMirror p:last-child { margin-bottom: 0; }
/* Dans une cellule de tableau, le <p> est sans marge basse : TipTap
 * peut insérer un widget (column-resize-handle) après lui, ce qui
 * "désactive" :last-child et ferait grandir la rangée de 8 px.
 * !important pour battre `.iutedit-content .ProseMirror p`. */
.iutedit-content td > p, .iutedit-content th > p { margin-bottom: 0 !important; }

/* === Tableaux : copie verbatim des règles de Froogle (page-editor.css),
 *     adaptées au scope `.iutedit-content` (équivalent de `.pe-page`).
 *     Aucune valeur n'est modifiée pour rester fidèle au comportement
 *     Froogle (poignées, redim. de colonne, menus, cercle de format).
 * ===================================================================== */
.iutedit-content table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  margin: 6pt 0;
}
.iutedit-content td, .iutedit-content th {
  border: none;
  padding: 6px 8px;
  vertical-align: top;
  min-width: 40px;
  position: relative;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
/* Mode éditeur : bordure pointillée légère comme repère (remplacée par
 * la bordure inline lorsque l'utilisateur en applique). */
.iutedit-content .ProseMirror[contenteditable="true"] td,
.iutedit-content .ProseMirror[contenteditable="true"] th {
  border: 1px dashed #d0d0d0;
}
.iutedit-content table.iutedit-no-borders td,
.iutedit-content table.iutedit-no-borders th { border: none; }
.iutedit-content th { font-weight: bold; }
.iutedit-content .selectedCell { background-color: #d4e6ff; }
.iutedit-content .column-resize-handle {
  position: absolute;
  right: -2px; top: 0; bottom: 0;
  width: 3px;
  background-color: #4a9eff;
  pointer-events: none;
  z-index: 1;
}
.iutedit-content .resize-cursor { cursor: col-resize; }

/* Table — espace haut/bas pour accueillir les poignées col/ligne */
.iutedit-content table { margin-top: 18px; margin-bottom: 18px; }

/* Bouton supprimer (coin haut-gauche du tableau) */
.pe-table-delete-btn {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #999;
  font-size: 11px;
  cursor: pointer;
  z-index: 10;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.pe-table-delete-btn:hover {
  background: #fde8e8;
  color: #c62828;
  border-color: #ef9a9a;
}

/* Poignées col/ligne au survol */
.pe-table-col-handle, .pe-table-row-handle {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
  z-index: 5;
  color: #888;
  font-size: 11px;
  letter-spacing: 1px;
  transition: background 0.15s;
}
.pe-table-col-handle:hover, .pe-table-row-handle:hover {
  background: #e0e0e0;
  color: #555;
}
.pe-table-col-handle { height: 14px; }
.pe-table-row-handle { width: 14px; }

/* Boutons + (ajouter ligne/colonne) */
.pe-table-add-handle {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
  z-index: 5;
  color: #888;
  font-size: 13px;
  font-weight: bold;
  transition: background 0.15s;
}
.pe-table-add-handle:hover { background: #e0e0e0; color: #555; }
.pe-table-add-col { width: 14px; }
.pe-table-add-row { height: 14px; }

/* Menus déroulants au clic sur une poignée */
.pe-table-handle-menu {
  position: absolute;
  z-index: 10;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  padding: 4px 0;
  min-width: 180px;
  font-size: 13px;
}
.pe-table-handle-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  color: #333;
  white-space: nowrap;
}
.pe-table-handle-menu-item:hover { background: #f5f5f5; }
.pe-table-handle-menu-item i { width: 16px; text-align: center; font-size: 12px; color: #888; }
.pe-table-handle-menu-item.pe-danger { color: #d44; }
.pe-table-handle-menu-item.pe-danger i { color: #d44; }
.pe-table-handle-menu-item.pe-danger:hover { background: #fef0f0; }

/* Liseré bleu autour de la cellule active */
.pe-cell-hover-overlay {
  position: absolute;
  display: none;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px #1a73e8;
  z-index: 5;
}

/* Cercle "format de cellule" sur la bordure droite */
.pe-table-cell-handle {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #1a73e8;
  cursor: pointer;
  z-index: 6;
  transition: width 0.15s ease, height 0.15s ease, margin 0.15s ease;
  overflow: hidden;
}
.pe-cell-handle-icon {
  font-size: 0;
  color: #fff;
  line-height: 1;
  transition: font-size 0.15s ease;
}
.pe-table-cell-handle:hover {
  width: 20px; height: 20px;
  margin-left: -5px;
  margin-top: -5px;
}
.pe-table-cell-handle:hover .pe-cell-handle-icon { font-size: 11px; }

/* Image inline avec poignées de redimensionnement */
.iutedit-img-wrap {
  position: relative; display: inline-block;
  margin: 2px; vertical-align: middle;
  line-height: 0;
}
/* Pendant un drag, l'image peut être plus large que sa cellule. On la
 * laisse déborder visuellement (sinon le ratio devient incohérent) et
 * on s'assure que les poignées et le wrap restent au-dessus des cellules
 * voisines pour rester cliquables. */
.iutedit-img-wrap.ProseMirror-selectednode { z-index: 50; }
.iutedit-img-wrap.iutedit-img-center { display: block; margin: 8px auto; }
.iutedit-img-wrap.iutedit-img-right  { display: block; margin: 8px 0 8px auto; }
.iutedit-img-wrap.iutedit-img-left   { display: block; margin: 8px auto 8px 0; }
.iutedit-img-wrap img { display: block; max-width: 100%; }
.iutedit-img-wrap.ProseMirror-selectednode { outline: 2px solid #2e75b6; outline-offset: 1px; }
.iutedit-img-handle {
  position: absolute;
  width: 10px; height: 10px;
  background: #fff;
  border: 2px solid #2e75b6;
  border-radius: 2px;
  box-sizing: border-box;
  display: none;
}
.iutedit-img-wrap.ProseMirror-selectednode .iutedit-img-handle { display: block; }
.iutedit-img-handle-nw { top: -6px;    left: -6px;     cursor: nwse-resize; }
.iutedit-img-handle-n  { top: -6px;    left: 50%;      transform: translateX(-50%); cursor: ns-resize; }
.iutedit-img-handle-ne { top: -6px;    right: -6px;    cursor: nesw-resize; }
.iutedit-img-handle-e  { top: 50%;     right: -6px;    transform: translateY(-50%); cursor: ew-resize; }
.iutedit-img-handle-se { bottom: -6px; right: -6px;    cursor: nwse-resize; }
.iutedit-img-handle-s  { bottom: -6px; left: 50%;      transform: translateX(-50%); cursor: ns-resize; }
.iutedit-img-handle-sw { bottom: -6px; left: -6px;     cursor: nesw-resize; }
.iutedit-img-handle-w  { top: 50%;     left: -6px;     transform: translateY(-50%); cursor: ew-resize; }

/* Container modal de signature */
.sig-editor-container { padding: 4px; }

/* === Modale "détail du calcul de la ligne" (svc-ens row click) ======== */
.line-detail-head {
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid #e8eef5;
}
.line-detail-mat   { font-size: 15px; font-weight: 600; color: #1a3556; }
.line-detail-meta  { font-size: 12px; color: #6b7a8c; margin-top: 4px; }
.line-detail-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.line-detail-table th {
  background: #f6f9fc; text-align: left; padding: 8px 10px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: #6b7a8c; font-weight: 600;
  border-bottom: 1px solid #e8eef5;
}
.line-detail-table td {
  padding: 8px 10px; border-bottom: 1px solid #f0f3f7;
  color: #2c3e50;
}
.line-detail-table tr:hover td { background: #fafcfe; }
.line-detail-table .line-detail-totrow td {
  border-top: 2px solid #d6e0eb; background: #f6f9fc;
}
.line-detail-th {
  display: inline-block; padding: 2px 8px;
  background: #eaf2fb; border: 1px solid #d6e0eb; border-radius: 999px;
  font-size: 11px; font-weight: 600; color: #1a3556;
}
.line-detail-note {
  margin-top: 12px; padding: 8px 12px;
  background: #fafcfe; border-left: 3px solid #4a9eff; border-radius: 3px;
  font-size: 12px; color: #6b7a8c; line-height: 1.5;
}

/* === Modale d'envoi par mail des fiches de service ==================== */
.fsmail-pre {
  padding: 10px 12px;
  background: #f6f9fc; border: 1px solid #e8eef5; border-radius: 6px;
  font-size: 13px; color: #1a3556; margin-bottom: 14px;
}
.fsmail-form { display: flex; flex-direction: column; gap: 14px; }
.fsmail-row { display: flex; flex-direction: column; gap: 6px; }
.fsmail-row-inline { flex-direction: row; align-items: center; }
.fsmail-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: #6b7a8c; font-weight: 600;
}
.fsmail-input, .fsmail-textarea, .fsmail-select {
  border: 1px solid #d6e0eb; border-radius: 4px;
  padding: 7px 10px; font-size: 13.5px; font-family: inherit;
  background: #fff;
}
.fsmail-textarea { min-height: 150px; resize: vertical; line-height: 1.45; }
.fsmail-select { min-width: 200px; }
.fsmail-hint { color: #6b7a8c; font-size: 11.5px; line-height: 1.5; }
.fsmail-hint code {
  background: #eef3f8; padding: 1px 5px; border-radius: 3px;
  color: #1a3556; font-size: 11px;
}
.fsmail-scope { display: flex; flex-direction: column; gap: 8px; }
.fsmail-radio {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13.5px; color: #2c3e50;
}
.fsmail-radio input[type="radio"]:disabled + span { color: #b0b0b0; cursor: not-allowed; }
.fsmail-radio em { color: #b0b0b0; font-size: 12px; }
.fsmail-check {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; font-size: 13.5px; color: #2c3e50;
}
.fsmail-history {
  border: 1px solid #e8eef5; border-radius: 6px;
  padding: 10px 12px; background: #fafcfe;
}
.fsmail-history-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: #6b7a8c; font-weight: 600; margin-bottom: 6px;
}
.fsmail-history-body { font-size: 13px; color: #2c3e50; line-height: 1.5; }
.fsmail-read-ok      { color: #27ae60; font-weight: 600; }
.fsmail-read-pending { color: #e67e22; font-weight: 600; }

/* === Agenda Zimbra : vue calendrier quotidien ======================= */
.agday-wrap { max-width: 960px; margin: 0 auto; }
.agday-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: #f6f9fc;
  border: 1px solid #e8eef5; border-radius: 6px 6px 0 0;
  border-bottom: none;
}
.agday-nav-btn, .agday-today-btn {
  border: 1px solid #d6e0eb; background: #fff; cursor: pointer;
  padding: 5px 10px; border-radius: 4px; font-size: 13px; color: #1a3556;
}
.agday-nav-btn:hover, .agday-today-btn:hover { background: #eaf2fb; }
.agday-title {
  flex: 1; font-size: 14px; font-weight: 600; color: #1a3556;
  text-align: center; text-transform: capitalize;
}
.agday-pick {
  border: 1px solid #d6e0eb; padding: 4px 8px; border-radius: 4px;
  font-size: 12.5px; color: #2c3e50;
}
.agday-allday {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; background: #fff;
  border: 1px solid #e8eef5; border-top: none;
  min-height: 28px;
}
.agday-allday-label { font-size: 11px; color: #6b7a8c; min-width: 60px; }
.agday-allday-list { display: flex; flex-wrap: wrap; gap: 6px; }
.agday-allday-item {
  display: inline-block; padding: 2px 8px;
  background: #eaf2fb; border: 1px solid #d6e0eb; border-radius: 999px;
  font-size: 11.5px; color: #1a3556; cursor: pointer;
}
.agday-allday-item:hover { background: #d8e6f5; }
.agday-grid {
  position: relative; background: #fff;
  border: 1px solid #e8eef5; border-top: none; border-radius: 0 0 6px 6px;
  overflow: hidden;
}
.agday-hour-label {
  position: absolute; left: 0; width: 60px;
  text-align: right; padding-right: 8px;
  font-size: 11px; color: #98a4b3;
  transform: translateY(-50%);
}
.agday-hour-line {
  position: absolute; left: 70px; right: 0;
  border-top: 1px solid #f0f3f7;
}
.agday-now {
  position: absolute; left: 70px; right: 0;
  border-top: 2px solid #c0392b; z-index: 2; pointer-events: none;
}
.agday-now::before {
  content: ''; position: absolute; left: -5px; top: -5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #c0392b;
}
.agday-event {
  position: absolute;
  padding: 4px 8px; background: #eaf2fb;
  border-left: 3px solid #2e75b6; border-radius: 3px;
  font-size: 11.5px; color: #1a3556;
  cursor: pointer; overflow: hidden;
  transition: background 0.12s, box-shadow 0.12s;
  box-sizing: border-box;
}
.agday-event:hover { background: #d8e6f5; box-shadow: 0 2px 6px rgba(0,0,0,0.1); z-index: 3; filter: brightness(0.96); }
.agday-event-time { font-weight: 600; }
.agday-event-title { margin-top: 2px; line-height: 1.25; }
.agday-event-loc {
  margin-top: 2px; font-size: 10.5px; color: #6b7a8c;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* === Agenda Zimbra : vue semaine ==================================== */
.agweek-wrap { max-width: 100%; margin: 0; display: flex; flex-direction: column; height: 100%; }
.agweek-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: #f6f9fc;
  border: 1px solid #e8eef5; border-radius: 6px 6px 0 0; border-bottom: none;
}
.agweek-nav-btn, .agweek-today-btn {
  border: 1px solid #d6e0eb; background: #fff; cursor: pointer;
  padding: 5px 10px; border-radius: 4px; font-size: 13px; color: #1a3556;
}
.agweek-nav-btn:hover, .agweek-today-btn:hover { background: #eaf2fb; }
.agweek-title {
  flex: 1; font-size: 14px; font-weight: 600; color: #1a3556;
  text-align: center; text-transform: capitalize;
}
.agweek-pick {
  border: 1px solid #d6e0eb; padding: 4px 8px; border-radius: 4px;
  font-size: 12.5px; color: #2c3e50;
}

.agweek-header {
  display: grid; grid-template-columns: 60px repeat(7, 1fr);
  background: #fafcfe; border: 1px solid #e8eef5; border-bottom: none;
}
.agweek-header-gutter { background: #f6f9fc; }
.agweek-col-head {
  padding: 6px 4px; text-align: center;
  border-left: 1px solid #e8eef5;
}
.agweek-col-head-day {
  font-size: 11px; color: #6b7a8c; text-transform: uppercase;
  letter-spacing: 0.04em; font-weight: 600;
}
.agweek-col-head-num { font-size: 16px; font-weight: 600; color: #1a3556; margin-top: 2px; }
.agweek-col-head-today .agweek-col-head-num {
  background: #c0392b; color: #fff; border-radius: 50%;
  display: inline-block; width: 28px; height: 28px; line-height: 28px;
}

.agweek-allday-row {
  display: grid; grid-template-columns: 60px 1fr;
  background: #fff; border: 1px solid #e8eef5; border-top: none;
  min-height: 28px;
}
.agweek-allday-label {
  font-size: 11px; color: #6b7a8c;
  padding: 4px 8px; display: flex; align-items: center; justify-content: flex-end;
  background: #f6f9fc;
}
.agweek-allday-cells {
  display: grid; grid-template-columns: repeat(7, 1fr);
}
.agweek-allday-cell {
  border-left: 1px solid #e8eef5; padding: 4px;
  display: flex; flex-wrap: wrap; gap: 3px; align-content: flex-start;
}
.agweek-allday-item {
  display: inline-block; padding: 1px 6px;
  background: #eaf2fb; border: 1px solid #d6e0eb; border-radius: 999px;
  font-size: 10.5px; color: #1a3556; cursor: pointer;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agweek-allday-item:hover { background: #d8e6f5; }

.agweek-body {
  display: flex;
  border: 1px solid #e8eef5; border-radius: 0 0 6px 6px; border-top: none;
  background: #fff;
  flex: 1; min-height: 0; overflow-y: auto;
}
.agweek-gutter {
  position: relative; flex: 0 0 60px;
  background: #f6f9fc; border-right: 1px solid #e8eef5;
}
.agweek-hour-label {
  position: absolute; left: 0; width: 100%;
  text-align: right; padding-right: 6px;
  font-size: 10.5px; color: #98a4b3;
  transform: translateY(-50%);
}
.agweek-hour-line { display: none; } /* lignes affichées dans la grid */
.agweek-grid {
  position: relative; flex: 1 1 auto;
  display: grid; grid-template-columns: repeat(7, 1fr);
}
.agweek-grid-line {
  position: absolute; left: 0; right: 0;
  border-top: 1px solid #f0f3f7; pointer-events: none;
}
.agweek-col {
  position: relative; border-left: 1px solid #e8eef5;
  height: 100%; cursor: copy;
}
.agweek-col:first-child { border-left: none; }
.agweek-col-today { background: rgba(192, 57, 43, 0.03); }
.agweek-now {
  position: absolute; left: 0; right: 0;
  border-top: 2px solid #c0392b; z-index: 2; pointer-events: none;
}
.agweek-event {
  position: absolute;
  padding: 2px 5px; background: #eaf2fb;
  border-left: 2px solid #2e75b6; border-radius: 2px;
  font-size: 10.5px; color: #1a3556;
  cursor: pointer; overflow: hidden; box-sizing: border-box;
  transition: background 0.12s, box-shadow 0.12s;
}
.agweek-event:hover { background: #d8e6f5; box-shadow: 0 2px 6px rgba(0,0,0,0.12); z-index: 3; filter: brightness(0.96); }
.agweek-event-time { font-weight: 600; font-size: 10px; }
.agweek-event-title {
  margin-top: 1px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* === Agenda Zimbra : vue liste ====================================== */
.agenda-section { max-width: 960px; margin: 0 auto; }
.agenda-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; background: #f6f9fc; border: 1px solid #e8eef5;
  border-radius: 6px; margin-bottom: 14px;
}
.agenda-period { font-size: 13px; font-weight: 600; color: #1a3556; }
.agenda-count  { font-size: 12px; color: #6b7a8c; }
.agenda-empty {
  padding: 40px; text-align: center; color: #98a4b3;
  background: #fafcfe; border: 1px dashed #d6e0eb; border-radius: 6px;
}
.agenda-empty i { font-size: 32px; margin-bottom: 10px; display: block; opacity: 0.5; }
.agenda-day { margin-bottom: 18px; }
.agenda-day-title {
  font-size: 13px; font-weight: 600; color: #1a3556;
  border-bottom: 1px solid #d6e0eb; padding: 4px 0; margin-bottom: 6px;
  text-transform: capitalize;
}
.agenda-day-today .agenda-day-title { color: #c0392b; border-bottom-color: #c0392b; }
.agenda-today-badge {
  display: inline-block; padding: 1px 8px; background: #c0392b; color: #fff;
  font-size: 10px; border-radius: 999px; margin-left: 6px;
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.agenda-events { display: flex; flex-direction: column; gap: 4px; }
.agenda-event {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 8px 12px; background: #fff; border: 1px solid #e8eef5;
  border-radius: 5px; cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.agenda-event:hover { background: #f6f9fc; border-color: #c5d3e2; }
.agenda-event-time {
  flex: 0 0 110px; font-size: 12px; font-weight: 600; color: #1a3556;
}
.agenda-event-body { flex: 1 1 auto; min-width: 0; }
.agenda-event-title { font-size: 14px; color: #2c3e50; font-weight: 500; }
.agenda-event-loc, .agenda-event-org {
  font-size: 11.5px; color: #6b7a8c; margin-top: 3px;
}
.agenda-event-loc i, .agenda-event-org i {
  font-size: 10px; margin-right: 4px; color: #98a4b3;
}
.agenda-detail-when {
  font-size: 13px; font-weight: 600; color: #1a3556;
  margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #e8eef5;
}
.agenda-detail-row {
  font-size: 13px; color: #2c3e50; margin: 6px 0;
}
.agenda-detail-row i { width: 18px; color: #6b7a8c; }
.agenda-detail-desc {
  margin-top: 10px; padding: 10px; background: #fafcfe;
  border: 1px solid #e8eef5; border-radius: 4px;
  font-size: 12.5px; color: #2c3e50; line-height: 1.5;
  max-height: 240px; overflow-y: auto;
}

/* === Étapes calendaires ============================================= */
.etape-bar {
  height: 20px; border-radius: 3px; font-size: 11px; font-weight: 500;
  padding: 0 8px; cursor: pointer; display: flex; align-items: center; gap: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  position: relative; color: #fff; margin: 1px 2px;
}
.etape-bar::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(255,255,255,0.18) 3px, rgba(255,255,255,0.18) 6px);
}
.etape-bar i.fa-flag { font-size: 9px; opacity: .8; }
.etape-type-rentree         { background: #27ae60; }
.etape-type-semestre        { background: #2980b9; }
.etape-type-stage           { background: #e67e22; }
.etape-type-sous_commission { background: #8e44ad; }
.etape-type-jury            { background: #c0392b; }
.etape-type-soutenance      { background: #00897b; }
.etape-type-portes_ouvertes { background: #f9a825; color: #333; }
.etape-type-conges          { background: #546e7a; }
.etape-type-autre           { background: #6d4c41; }
.etape-bars-row { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px 4px; min-height: 0; }
/* Chips type sélecteur */
.etape-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px;
  border-radius: 16px; cursor: pointer; border: 2px solid transparent;
  font-size: 12px; font-weight: 500; color: #fff; transition: box-shadow .15s, border-color .15s;
}
.etape-chip:hover { box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.etape-chip.active { border-color: #fff; box-shadow: 0 0 0 3px rgba(0,0,0,.15); }
/* Liste gestion */
.etape-list-row { display: flex; align-items: center; gap: 10px; padding: 3px 8px; border-bottom: 1px solid #eee; font-size: 13px; }
.etape-list-row:hover { background: #f8f9fb; }
.etape-list-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; color: #fff; }
.etape-list-titre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etape-list-dates { color: #6b7a8c; font-size: 12px; white-space: nowrap; }
.etape-list-scope { color: #98a4b3; font-size: 11px; white-space: nowrap; }
.etape-list-actions { display: flex; gap: 4px; }
.etape-list-actions button { background: none; border: none; cursor: pointer; color: #6b7a8c; padding: 2px 6px; }
.etape-list-actions button:hover { color: #2e75b6; }

/* === Tableau de bord d'accueil ======================================= */
.dash-wrap {
  padding: 20px; height: 100%; overflow-y: auto;
}
.dash-hello {
  font-size: 20px; font-weight: 700; color: #fff;
  margin-bottom: 20px; text-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.dash-millesime {
  display: inline-flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  border-radius: 10px; padding: 14px 28px;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  font-size: 28px; font-weight: 800; color: #2e75b6;
  cursor: pointer; margin-bottom: 16px;
  transition: background .15s, box-shadow .15s, transform .1s;
}
.dash-millesime:hover {
  background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.15);
  transform: translateY(-2px);
}
.dash-millesime i { font-size: 24px; opacity: .7; }
.dash-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.dash-group {
  background: rgba(255,255,255,.92); border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  padding: 14px 16px; backdrop-filter: blur(6px);
}
.dash-group-header {
  font-size: 14px; font-weight: 700; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.dash-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-tile {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 8px;
  background: #f4f6f9; border: 1px solid #e2e8f0;
  font-size: 13px; font-weight: 500; color: #2c3e50;
  transition: background .15s, box-shadow .15s, transform .1s;
  overflow: hidden; min-width: 0;
}
.dash-tile:hover:not(.dash-tile-soon) {
  background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transform: translateY(-1px);
}
.dash-tile-soon {
  opacity: .45; cursor: default;
}
.dash-tile-muted {
  opacity: .4; cursor: default; pointer-events: none;
}

/* ── Bulle info Conforme ──────────────────────────────────────────── */
.svc-conforme-bubble {
  position: absolute; top: 100%; left: 0; z-index: 100;
  margin-top: 8px; width: 380px;
}
.svc-conforme-bubble-arrow {
  width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-bottom: 8px solid #2e75b6; margin-left: 20px;
}
.svc-conforme-bubble-content {
  background: #fff; border: 2px solid #2e75b6; border-radius: 8px;
  padding: 14px; font-size: 12px; line-height: 1.5; color: #2c3e50;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

/* ── Signalement anomalie service ──────────────────────────────────── */
.svc-ens-row.svc-ens-anomalie { background: #fdebd0 !important; }
.svc-ens-row.svc-ens-anomalie td { border-color: #e8a838 !important; }
.svc-ens-row.svc-ens-anomalie td:first-child::after {
  content: '\f05e'; font-family: 'Font Awesome 5 Free'; font-weight: 900;
  color: #e74c3c; margin-left: 6px; font-size: 12px;
}
.dash-tile-icon { font-size: 16px; flex-shrink: 0; }
.dash-tile-label { overflow: hidden; text-overflow: ellipsis; }
.dash-tile-badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  background: #e2e8f0; color: #6b7a8c; padding: 1px 6px;
  border-radius: 8px; letter-spacing: .03em;
}
/* Responsive dashboard */
@media (max-width: 900px) {
  .dash-wrap { padding: 12px; }
  .dash-hello { font-size: 17px; margin-bottom: 12px; }
  .dash-millesime { font-size: 22px; padding: 10px 20px; margin-bottom: 12px; }
  .dash-millesime i { font-size: 18px; }
  .dash-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
  .dash-group { padding: 10px 12px; }
  .dash-group-header { font-size: 13px; margin-bottom: 6px; }
  .dash-tiles { gap: 5px; }
  .dash-tile { padding: 6px 10px; font-size: 12px; gap: 6px; }
  .dash-tile-icon { font-size: 14px; }
}
@media (max-width: 600px) {
  .dash-wrap { padding: 8px; }
  .dash-hello { font-size: 15px; margin-bottom: 8px; }
  .dash-millesime { font-size: 18px; padding: 8px 14px; gap: 8px; margin-bottom: 8px; }
  .dash-millesime i { font-size: 15px; }
  .dash-grid { grid-template-columns: 1fr; gap: 8px; }
  .dash-group { padding: 8px 10px; }
  .dash-group-header { font-size: 12px; margin-bottom: 4px; }
  .dash-tile { padding: 5px 8px; font-size: 11px; gap: 5px; }
  .dash-tile-icon { font-size: 12px; }
  .dash-tile-label { white-space: normal; }
}

/* === Groupes dans services formation ================================= */
.svc-grp-cell { min-width: 100px; white-space: normal !important; overflow: visible !important; }
.svc-ens-table { table-layout: fixed; }
.svc-ens-table td, .svc-ens-table th { overflow: hidden; text-overflow: ellipsis; }
.svc-ens-table td.svc-ens-grp-cell { overflow: visible; white-space: normal; }
.svc-num-col { width: 58px; }
.svc-ens-grp-cell { white-space: normal; }
.svc-grp-col-mon { }
@media print {
  .svc-grp-col-mon { width: 0 !important; max-width: 0 !important; padding: 0 !important; border: none !important; overflow: hidden !important; }
  td.svc-grp-col-mon, th.svc-grp-col-mon, td.svc-ens-grp-cell { width: 0 !important; max-width: 0 !important; padding: 0 !important; border: none !important; overflow: hidden !important; line-height: 0 !important; }
  td.svc-ens-grp-cell *, th.svc-grp-col-mon * { display: none !important; }
}
.svc-grp-pills { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 2px; }
.svc-grp-pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px; border-radius: 10px; font-size: 10px; font-weight: 600;
  cursor: pointer; transition: opacity .15s;
}
.svc-grp-pill:hover { opacity: .7; }
.svc-grp-pill-x { font-size: 8px; opacity: .6; }
.svc-grp-td { background: #d6eaf8; color: #1a5276; }
.svc-grp-tp { background: #fde8d0; color: #9c5a1e; }
.svc-grp-input {
  width: 70px; border: 1px solid #ddd; border-radius: 4px;
  padding: 2px 6px; font-size: 10px; outline: none;
  cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s;
}
.svc-grp-input:hover { background: #e8f0fe; border-color: #2e75b6; box-shadow: 0 1px 3px rgba(46,117,182,.2); }
.svc-grp-input:focus { background: #fff; border-color: #2e75b6; box-shadow: 0 0 0 2px rgba(46,117,182,.15); cursor: text; }
.svc-grp-dropdown {
  background: #fff; border: 1px solid #d0d7e2; border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.15); max-height: 240px; overflow-y: auto;
  padding: 4px 0;
}
.svc-grp-option {
  padding: 4px 10px; font-size: 11px; cursor: pointer;
  transition: background .1s;
}
.svc-grp-option:hover { background: #f0f6ff; }
.svc-grp-option-special { font-weight: 700; font-style: italic; }
.svc-grp-option-more { font-weight: 600; color: #2e75b6; border-top: 1px solid #e2e8f0; margin-top: 2px; }
.svc-grp-option-more:hover { background: #eef3fa; }
.sgm-check { border: 1px solid #ddd; transition: opacity .15s; }
.sgm-check:hover:not(.sgm-used) { box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.sgm-used { opacity: .45; cursor: default !important; }

/* === Mes groupes (lecture seule) ===================================== */
.mg-sidebar {
  width: 200px; flex-shrink: 0; display: flex; flex-direction: column;
  background: rgba(255,255,255,.95); border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.1); padding: 14px;
}
.mg-content {
  flex: 1; min-height: 0; min-width: 0; overflow-y: auto;
  background: rgba(255,255,255,.95); border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.1); padding: 16px;
}
.mg-table { width: auto; max-width: 750px; margin: 0 auto; border-collapse: collapse; font-size: 13px; }
.mg-table th {
  text-align: left; padding: 4px 10px; background: #f0f2f5;
  font-size: 12px; font-weight: 600; color: #4a5568;
  border-bottom: 2px solid #dce1e8; position: sticky; top: 0;
  white-space: nowrap;
}
.mg-table td { padding: 3px 10px; border-bottom: 1px solid #eee; color: #2c3e50; white-space: nowrap; }
.mg-table td:first-child, .mg-table th:first-child { min-width: 140px; }
.mg-table td:nth-child(2), .mg-table th:nth-child(2) { min-width: 120px; }
.mg-table tbody tr:nth-child(even) td { background: #f8fafc; }
.mg-table tbody tr:hover td { background: #eef3fa; }
.mg-print-header {
  text-align: center; font-size: 16px; font-weight: 700; color: #2c3e50;
  padding: 28px 8px 8px;
}
.mg-print-count {
  text-align: center; font-size: 12px; color: #6b7a8c;
  padding: 0 8px 24px;
}
.mg-print-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 8px 12px; border: none; border-radius: 6px;
  background: #c5cdd6; color: #fff; font-size: 13px; font-weight: 600;
  cursor: not-allowed; transition: background .2s, box-shadow .2s;
  margin-top: 16px;
}
.mg-print-btn:not(:disabled) {
  background: #2e75b6; cursor: pointer;
}
.mg-print-btn:not(:disabled):hover { background: #245d94; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
@media print {
  @page { margin: 10mm 15mm; size: auto; }
  body * { visibility: hidden !important; }
  #mgPrintZone, #mgPrintZone * { visibility: visible !important; }
  #mgPrintZone {
    position: absolute; left: 0; top: 0; width: 100%;
    background: #fff; padding: 5mm;
    box-sizing: border-box;
  }
  .mg-print-date { display: block !important; }
  .mg-table { width: 100%; max-width: none; }
  .mg-table th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mg-table tbody tr:nth-child(even) td { background: #f5f5f5 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mg-sidebar, .mg-print-btn { display: none !important; }
}
.dash-stats { margin-bottom: 8px; }

/* === Lecteur de mail : overlay + panneau slide-in =================== */
.wm-reader-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 30, 45, 0.32);
  z-index: 9500;
  display: block;
}
.wm-reader-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(880px, 70vw);
  background: #fff;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.22);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.22s ease-out;
}
.wm-reader-panel.wm-reader-open { transform: translateX(0); }
.wm-reader-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid #e8eef5;
  background: #f6f9fc;
}
.wm-reader-subject {
  flex: 1 1 auto; font-size: 17px; color: #1a3556; line-height: 1.35;
  word-break: break-word;
}
.wm-reader-subject strong { font-weight: 700; }
.wm-reader-close {
  border: none; background: transparent; cursor: pointer;
  color: #6b7a8c; font-size: 18px; padding: 4px 8px; border-radius: 4px;
}
.wm-reader-close:hover { background: #e8eef5; color: #c0392b; }
.wm-reader-body {
  flex: 1 1 auto; overflow-y: auto; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.wm-reader-meta {
  display: flex; flex-direction: column; gap: 10px;
}
.wm-reader-block {
  /* Libellé "Expéditeur" / "Destinataire" aligné sur la même ligne que
   * les pillules, ces dernières s'enroulant si nécessaire. */
  display: flex; align-items: flex-start; gap: 10px;
  position: relative; /* Ancre du bouton "Supprimer" (Expéditeur uniquement) */
}
.wm-reader-block-title {
  flex: 0 0 auto;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: #6b7a8c; font-weight: 600;
  padding-top: 5px;
  min-width: 96px;
}
/* Sur le bloc Expéditeur, le titre + le bouton "Supprimer" partagent la même
 * ligne via flex. Le bouton est ensuite poussé à droite. Les pillules
 * passent en dessous grâce à `flex-wrap: wrap` sur le bloc parent. */
.wm-reader-block-title-row {
  flex: 0 0 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.wm-reader-block-title-row .wm-reader-block-title {
  padding-top: 0;
}
.wm-reader-block:has(.wm-reader-block-title-row) {
  flex-wrap: wrap;
}
.wm-reader-actions {
  display: inline-flex; gap: 6px; align-items: center;
}
.wm-reader-action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-size: 12px; font-weight: 600;
  color: #2e75b6;
  background: #fff;
  border: 1px solid #d6e0eb;
  border-radius: 4px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.wm-reader-action-btn:hover { background: #2e75b6; color: #fff; border-color: #2e75b6; }
.wm-reader-action-btn.wm-reader-delete-btn { color: #c0392b; border-color: #e7b9b3; }
.wm-reader-action-btn.wm-reader-delete-btn:hover { background: #c0392b; color: #fff; border-color: #c0392b; }
.wm-reader-action-btn:disabled,
.wm-reader-action-pending { opacity: .5; cursor: progress; pointer-events: none; }
.wm-reader-block > .wm-pills,
.wm-reader-block > em { flex: 1 1 auto; }
.wm-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.wm-pills-list, .wm-pills-list-full {
  display: flex; flex-wrap: wrap; gap: 6px; width: 100%;
}
.wm-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: #eaf2fb; color: #1a3556;
  border: 1px solid #d6e0eb; border-radius: 999px;
  font-size: 12.5px; cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.wm-pill:hover { background: #d8e6f5; border-color: #b7c8de; }
.wm-pill i { font-size: 10px; color: #6b7a8c; }
.wm-pill-more, .wm-pill-less { background: #f0f3f7; }
.wm-pill-more:hover, .wm-pill-less:hover { background: #e3e8ee; }

.wm-reader-attachments {
  display: flex; flex-direction: column; gap: 4px;
  background: #f6f9fc; border: 1px solid #e8eef5; border-radius: 6px;
  padding: 10px 12px;
}
.wm-attach-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; font-size: 13px;
  border: 1px solid transparent; border-radius: 5px;
  color: #2c3e50; text-decoration: none;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.wm-attach-item:hover {
  background: #f4f9ff; border-color: #c6dcef;
  text-decoration: none;
}
.wm-attach-item > i { color: #6b7a8c; }
.wm-attach-name { flex: 1 1 auto; color: #2c3e50; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-attach-size { color: #6b7a8c; font-size: 12px; }
.wm-attach-dl {
  opacity: 0; transition: opacity .12s;
  color: #2e75b6 !important; font-size: 12px;
}
.wm-attach-item:hover .wm-attach-dl { opacity: 1; }

.wm-reader-iframe {
  width: 100%; min-height: 200px;
  border: 1px solid #e8eef5; border-radius: 6px;
  background: #fff;
}

/* Chevron accordéon (parent dépliable) */
.webmail-chevron {
  width: 12px; text-align: center; font-size: 10px;
  color: #6b7a8c; cursor: pointer; padding: 4px;
  margin-right: -2px;
  transition: transform 0.12s;
}
.webmail-chevron:hover { color: #2e75b6; }
.webmail-chevron-pad { display: inline-block; width: 12px; }

/* Bouton "imprimer" sur chaque ligne du tableau cumul */
.cumul-print-btn {
  border: none;
  background: transparent;
  color: #2e75b6;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  transition: background 0.12s, color 0.12s;
}
.cumul-print-btn:hover {
  background: #2e75b6;
  color: #fff;
}

/* Barre d'actions au-dessus du tableau Cumul */
.cumul-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 0 12px 0;
  flex-wrap: wrap;
}

.cumul-last-import {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: #2c3e50;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  border: 1px solid #d6e0eb;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  line-height: 1;
}
.cumul-last-import i { color: #2e75b6; font-size: 14px; }
.cumul-last-import .cumul-last-import-label { color: #6b7a8c; }
.cumul-last-import strong { color: #1a3556; font-weight: 600; }
.cumul-last-import .cumul-last-import-time {
  color: #6b7a8c; font-size: 12px;
}
/* État "trop vieux" (> 30 jours) : accent orangé */
.cumul-last-import-stale {
  background: #fff5e6;
  border-color: #f0c987;
}
.cumul-last-import-stale i { color: #d68910; }
/* État "aucun import" : alerte rouge */
.cumul-last-import-empty {
  background: #fdecea;
  border-color: #e6a8a0;
  color: #922b21;
}
.cumul-last-import-empty i { color: #c0392b; }

/* Modale "import quotités SAGHE" sur l'écran cumul */
.lim-import { display: flex; flex-direction: column; gap: 14px; }
.lim-import-howto { font-size: 13px; }
.lim-import-howto code {
  background: #f3f3f3; padding: 1px 4px; border-radius: 3px;
  font-family: monospace; font-size: 12px;
}
.lim-import-drop {
  border: 2px dashed #c8d6e5;
  border-radius: 8px;
  padding: 28px 18px;
  text-align: center;
  cursor: pointer;
  background: #fafbfc;
  transition: background 0.12s, border-color 0.12s;
}
.lim-import-drop:hover,
.lim-import-drop-over {
  background: #eaf3fb;
  border-color: #2e75b6;
}
.lim-import-status {
  padding: 12px 14px;
  border-radius: 6px;
  background: #f3f6fa;
  border-left: 3px solid #2e75b6;
  font-size: 13px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.lim-import-success { background: #eafaf1; border-left-color: #27ae60; }
.lim-import-error   { background: #fdecea; border-left-color: #c0392b; }

/* Corbeille dans la modale "détail matière" en mode editable */
.mvr-detail-del {
  border: none; background: transparent; color: #c0392b; cursor: pointer;
  padding: 4px 6px; border-radius: 4px; transition: background 0.12s;
}
.mvr-detail-del:hover { background: #fdecea; }
.mvr-detail-del:disabled { opacity: 0.5; cursor: wait; }
.saisie-svc-table .saisie-svc-mat {
  width: 100%; max-width: none; box-sizing: border-box;
}
.saisie-svc-input {
  width: 100%; box-sizing: border-box;
  padding: 4px 6px; border: 1px solid #ccc; border-radius: 4px;
  font-size: 13px; text-align: right;
}
.saisie-svc-input:focus { border-color: #2e75b6; outline: none; }
.saisie-svc-htd { font-weight: 600; color: #2e75b6; }
.saisie-svc-del {
  border: none; background: transparent; color: #c0392b; cursor: pointer;
  padding: 4px 6px; border-radius: 4px; transition: background 0.12s;
}
.saisie-svc-del:hover { background: #fdecea; }
.saisie-svc-error {
  color: #c0392b; background: #fdecea; padding: 8px 12px; border-radius: 4px;
  font-size: 12px; border-left: 3px solid #c0392b;
}
.svc-ens-header { margin-bottom: 20px; }
.svc-ens-name { font-size: 20px; font-weight: 700; color: #2c3e50; }
.svc-ens-info { font-size: 13px; color: #666; margin: 4px 0 12px; }
.svc-ens-totals { display: flex; gap: 10px; flex-wrap: wrap; }
.svc-ens-total-card {
  background: #fff; border: 1px solid #ddd; border-radius: 8px;
  padding: 12px 18px; text-align: center; min-width: 80px;
}
.svc-ens-total-num { font-size: 22px; font-weight: 700; color: #2c3e50; }
.svc-ens-total-label { font-size: 11px; color: #666; margin-top: 2px; }
.svc-ens-total-htd { border-color: #27ae60; background: #f0faf4; }
.svc-ens-total-htd .svc-ens-total-num { color: #1e8449; }
.svc-ens-total-max { border-color: #999; background: #fff; }
.svc-ens-total-max .svc-ens-total-num { font-size: 16px; color: #333; }
.svc-ens-warning {
  margin-top: 10px; padding: 8px 14px; border-radius: 6px;
  background: #f8d7da; color: #721c24; font-size: 13px; font-weight: 600;
}
.svc-ens-formation { margin-bottom: 20px; }
.svc-ens-formation-title {
  font-size: 16px; font-weight: 700; color: #2c3e50;
  padding: 8px 0; border-bottom: 2px solid #888; margin-bottom: 10px;
}
.svc-ens-year { margin-bottom: 14px; }
.svc-ens-year-title {
  font-size: 13px; font-weight: 600; color: #555;
  padding: 4px 0; margin-bottom: 6px;
}
.svc-ens-subtotal td { background: #f5f5f5; border-top: 2px solid #ddd; }

.svc-form-mat-row td { padding-top: 6px !important; padding-bottom: 6px !important; }
.svc-form-mat-row:nth-child(even) td { background: #e6eefa; }
/* === Service Workflow (parcours d'étape) ============================= */
.svc-wf-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 0; padding: 12px 16px; margin-bottom: 8px;
}
.svc-wf-step {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 80px;
}
.svc-wf-dot {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #e2e8f0; color: #98a4b3; font-size: 14px;
  transition: all .2s;
}
.svc-wf-step.done .svc-wf-dot { background: #27ae60; color: #fff; }
.svc-wf-step.active .svc-wf-dot { background: #2e75b6; color: #fff; box-shadow: 0 0 0 4px rgba(46,117,182,.2); }
.svc-wf-label { font-size: 11px; font-weight: 600; color: #98a4b3; }
.svc-wf-step.done .svc-wf-label { color: #27ae60; }
.svc-wf-step.active .svc-wf-label { color: #2e75b6; }
.svc-wf-line {
  flex: 0 0 40px; height: 2px; background: #e2e8f0;
  align-self: center; margin-bottom: 18px;
}
.svc-wf-step.done + .svc-wf-line { background: #27ae60; }
.svc-wf-warning {
  padding: 8px 16px; margin: 0 0 8px; border-radius: 6px;
  background: #fef3e2; border: 1px solid #f9d89c; color: #92600a;
  font-size: 13px; font-weight: 500;
}
.svc-wf-warning i { margin-right: 6px; }
.dash-tile-badge-alert {
  background: #e74c3c; color: #fff; animation: dash-badge-pulse 1.5s infinite;
}
@keyframes dash-badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .6; }
}

/* ── Tuile urgente (profil) ── */
.dash-tile-urgent {
  animation: dash-tile-glow 2s ease-in-out infinite;
  border: 2px solid #e67e22 !important;
}
@keyframes dash-tile-glow {
  0%, 100% { box-shadow: 0 0 4px rgba(230,126,34,0.3); }
  50% { box-shadow: 0 0 14px rgba(230,126,34,0.7); }
}
.dash-tile-badge-urgent {
  background: #e67e22; color: #fff; font-size: 10px;
  animation: dash-badge-pulse 1.5s infinite;
}

/* ── Modale Profil ── */
.profil-form { display: flex; flex-direction: column; gap: 12px; padding: 4px 8px; }
.profil-alert {
  background: #fff3cd; border: 1px solid #ffc107; border-radius: 6px;
  padding: 10px 14px; font-size: 13px; color: #856404; line-height: 1.5;
}
.profil-alert i { color: #e67e22; margin-right: 6px; }
.profil-field { display: flex; flex-direction: column; gap: 3px; }
.profil-field-label { font-size: 12px; font-weight: 600; color: #555; }
.profil-field input { padding: 6px 10px; border: 1px solid #ccd; border-radius: 4px; font-size: 13px; }
.profil-field input:focus { border-color: #2e75b6; outline: none; box-shadow: 0 0 0 2px rgba(46,117,182,0.15); }
.profil-pwd-wrap { display: flex; align-items: center; gap: 0; }
.profil-pwd-wrap input { flex: 1; border-radius: 4px 0 0 4px; border-right: none; }
.profil-pwd-toggle {
  background: #f0f0f0; border: 1px solid #ccd; border-left: none; border-radius: 0 4px 4px 0;
  padding: 6px 10px; cursor: pointer; color: #888; font-size: 13px;
}
.profil-pwd-toggle:hover { background: #e0e0e0; color: #555; }
.profil-rules { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.profil-rule { font-size: 11px; color: #999; display: flex; align-items: center; gap: 5px; }
.profil-rule i { font-size: 8px; }
.profil-rule-ok { color: #27ae60; }
.profil-rule-ok i { font-size: 11px; }
.profil-rule-fail { color: #e74c3c; }
.profil-rule-fail i { font-size: 11px; }
.profil-error { background: #fde8e8; border: 1px solid #e74c3c; border-radius: 4px; padding: 8px 12px; font-size: 12px; color: #c0392b; }

/* ── Bouton voir service dans workflow ── */
.wf-view-svc-btn {
  background: none; border: 1px solid #d0d7e2; border-radius: 4px;
  padding: 3px 7px; cursor: pointer; color: #2e75b6; font-size: 12px;
  margin-right: 6px; flex-shrink: 0; transition: background .15s, color .15s;
}
.wf-view-svc-btn:hover { background: #2e75b6; color: #fff; }
.svc-modal-wrap { max-height: 70vh; overflow-y: auto; padding: 0 4px; }

/* ── Toggle infos perso ── */
.fu-perso-toggle {
  padding: 8px 0; margin: 4px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee;
}

/* ── TOTP Setup ── */
.totp-setup { padding: 10px; font-size: 13px; line-height: 1.5; }
.totp-step { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.totp-step-num {
  width: 24px; height: 24px; border-radius: 50%; background: #2e75b6; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.totp-step-text { font-size: 13px; color: #444; }
.totp-qr { text-align: center; margin: 10px 0; }
.totp-secret { text-align: center; margin-bottom: 14px; }
.totp-backup-codes {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  background: #f8f9fa; padding: 12px; border-radius: 6px; border: 1px solid #e0e0e0;
}
.totp-backup-codes code {
  text-align: center; padding: 6px; background: #fff; border: 1px solid #ddd;
  border-radius: 4px; font-size: 13px; font-weight: 600; letter-spacing: 1px;
}

/* ── Modale envoi proposition workflow ── */
.wf-proposal-modal { padding: 14px; font-size: 13px; line-height: 1.6; }
.wf-proposal-fields { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.wf-proposal-label { font-weight: 600; font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
.wf-proposal-label input { padding: 5px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; }
.wf-proposal-mail-section { margin-top: 14px; border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; }
.wf-proposal-mail-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: #f4f6f8; border-bottom: 1px solid #e0e0e0;
}
.wf-proposal-mail-title { font-size: 12px; font-weight: 600; color: #555; }
.wf-proposal-mail-title i { margin-right: 5px; }
.wf-proposal-mail-actions { display: flex; gap: 6px; }
.wf-proposal-body {
  min-height: 180px; max-height: 300px; overflow-y: auto; padding: 12px;
  font-size: 13px; line-height: 1.6; border: none; outline: none;
}
.wf-proposal-body:focus { background: #fffef5; }
.wf-proposal-body p { margin: 0 0 8px 0; }
.wf-proposal-vars {
  padding: 6px 12px; background: #f8f9fa; border-top: 1px solid #e0e0e0;
  font-size: 11px; color: #888;
}
.wf-proposal-vars code {
  background: #e8e8e8; padding: 1px 5px; border-radius: 3px; font-size: 11px; color: #555;
}
.win-btn-small { padding: 3px 10px; font-size: 11px; }
.svc-ens-grp-inline { white-space: nowrap; }
/* Colonne d'actions (détail + corbeille au survol) sur les lignes de service enseignant */
.svc-ens-table .svc-ens-act-col,
.svc-ens-table .svc-ens-act-cell {
  width: 64px;
  padding: 0 4px;
  text-align: center;
  white-space: nowrap;
}
.svc-ens-row .svc-ens-detail-btn {
  border: none;
  background: transparent;
  color: #2e75b6;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1;
  visibility: hidden;
  transition: background 0.12s;
}
.svc-ens-row:hover .svc-ens-detail-btn { visibility: visible; }
.svc-ens-row .svc-ens-detail-btn:hover { background: #eaf3fb; }
.svc-ens-row .svc-ens-del-btn {
  border: none;
  background: transparent;
  color: #c0392b;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1;
  visibility: hidden;
  transition: background 0.12s;
}
.svc-ens-row:hover .svc-ens-del-btn,
.svc-ens-row .svc-ens-del-btn-confirm {
  visibility: visible;
}
.svc-ens-row .svc-ens-del-btn:hover {
  background: #fdecea;
}
.svc-ens-row .svc-ens-del-btn-confirm {
  background: #27ae60;
  color: #fff;
}
.svc-ens-row .svc-ens-del-btn-confirm:hover {
  background: #1e8449;
}
.svc-ens-row-confirm > td {
  background: #fdecea !important;
}
.svc-ens-type-header td {
  background: #eee; font-weight: 600; font-size: 11px; color: #555;
  text-transform: uppercase; letter-spacing: 0.5px; padding: 5px 6px;
  border-top: 1px solid #ccc;
}
.svc-type-badge {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font-size: 11px; font-weight: 600; text-align: center; min-width: 30px;
}
.svc-type-cm  { background: #d5f5e3; color: #1e8449; }
.svc-type-cmi { background: #d4efdf; color: #1e8449; }
.svc-type-td  { background: #d6eaf8; color: #2471a3; }
.svc-type-tp  { background: #fdebd0; color: #935116; }
.svc-cycle-ok   { color: #27ae60; font-weight: 600; }
.svc-cycle-prev { color: #f39c12; }

/* ─── Maquette vs Réel ────────────────────────────────────────────── */
.mvr-section {
  padding: 16px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  overflow-y: auto; flex: 1; min-height: 0;
}
.mvr-picker { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.mvr-picker label { font-weight: 600; font-size: 12px; color: #4a5568; }
.mvr-checkbox-label { display:flex; align-items:center; gap:4px; cursor:pointer; font-size:13px; }
.mvr-checkbox-label input { cursor:pointer; }
.mvr-groups-summary { margin-bottom: 20px; padding: 12px; background: #f8f9fa; border-radius: 6px; }
.mvr-groups-cards { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.mvr-grp-card {
  background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 10px 14px; min-width: 160px;
}
.mvr-grp-title { font-weight: 700; font-size: 13px; margin-bottom: 6px; color: #2c3e50; }
.mvr-grp-line { font-size: 12px; color: #555; padding: 1px 0; }
.mvr-year { margin-bottom: 20px; }
.mvr-year-title {
  font-size: 16px; font-weight: 700; color: #2c3e50;
  padding: 8px 0; border-bottom: 2px solid #888; margin-bottom: 10px;
}
.mvr-sem { margin-bottom: 14px; }
.mvr-sem-title { font-size: 13px; font-weight: 600; color: #555; padding: 4px 0; margin-bottom: 6px; }
.mvr-subheader th { font-size: 10px; color: #888; font-weight: 500; border-bottom: 1px solid #ddd; padding: 2px 6px; }
.mvr-over { color: #c0392b; }
.mvr-under { color: #e67e22; }
.mvr-ok { color: #27ae60; }
tr.mvr-over td:first-child { border-left: 3px solid #c0392b; }
tr.mvr-under td:first-child { border-left: 3px solid #e67e22; }
tr.mvr-over td, tr.mvr-under td { color: #333; }
tr.mvr-over td.mvr-over, tr.mvr-under td.mvr-under,
tr.mvr-over td.mvr-ok, tr.mvr-under td.mvr-ok { color: revert; }
td.mvr-over { color: #c0392b !important; }
td.mvr-under { color: #e67e22 !important; }
td.mvr-ok { color: #27ae60 !important; }
.mvr-grand-total {
  display: flex; gap: 24px; align-items: center; padding: 14px 16px;
  background: #f0f0f0; border-radius: 6px; margin-top: 16px; font-size: 14px;
}
.mvr-grand-total span:first-child { font-weight: 700; }
tr.mvr-row { cursor: pointer; }
tr.mvr-row:hover td { background: #e8f0fe; }
.mvr-detail-totals { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.mvr-table {
  font-size: 12px; border-collapse: collapse;
  width: 100%; table-layout: fixed;
}
.mvr-table td, .mvr-table th { overflow: hidden; text-overflow: ellipsis; }
.mvr-table td:nth-child(2) { white-space: normal; word-break: break-word; }
.mvr-th-group { text-align: center; font-weight: 700; }
.mvr-th-theo { background: #e8f0fe; color: #1a56db; border-bottom: 3px solid #1a56db; }
.mvr-th-reel { background: #fef3e2; color: #92400e; border-bottom: 3px solid #d97706; }
.mvr-col-theo { background: #f5f9ff; }
.mvr-col-reel { background: #fffbf5; }
.mvr-col-theo + .mvr-col-reel,
th.mvr-th-reel:first-of-type { border-left: 2px solid #bbb; }
.mvr-cell-over { color: #c0392b; font-weight: 600; }
.mvr-cell-under { color: #e67e22; font-weight: 600; }
/* Separator between theo and reel blocks (col 9 after expand column) */
.mvr-table td.mvr-col-reel:nth-child(9),
.mvr-table th:nth-child(9) { border-left: 2px solid #bbb; }

/* Expand icon column */
.mvr-table th.mvr-th-expand { width: 24px; padding: 4px 2px; background: #fafbfc; }
.mvr-table td.mvr-expand-cell {
  width: 24px; padding: 4px 2px; text-align: center;
  cursor: pointer; color: #6b7a8c;
  user-select: none;
}
.mvr-table td.mvr-expand-cell:hover { background: #eef4ff; color: #1a56db; }
.mvr-table .mvr-expand-icon {
  font-size: 11px;
  transition: transform 0.15s ease;
}
.mvr-table tr.mvr-row-expanded .mvr-expand-icon { transform: rotate(90deg); }
.mvr-table tr.mvr-row-expanded { background: #f5f9ff; }

/* Inline teacher rows : intégrées directement dans le tableau parent,
   alignées sur les colonnes (nom dans Matière, CM/TD/TP dans Réel).
   Fond bleu clair pour bien les distinguer du tableau principal. */
.mvr-table tr.mvr-teacher-row > td {
  background: #e8f0fe;
  font-size: 11.5px;
  padding: 2px 6px;
  border-top: 1px solid #c7d8f5;
}
.mvr-table tr.mvr-teacher-row > td:first-child {
  border-left: 3px solid #4a90d9;
  background: #d6e4fa;
}
/* Indicateur de statut (validé / brouillon / mixte) — discret mais lisible.
   La couleur de la bordure gauche reprend le code couleur du statut, et un
   petit point coloré confirme l'information dans la cellule. */
.mvr-table tr.mvr-teacher-row[data-statut="valide"]    > td:first-child { border-left-color: #16a34a; }
.mvr-table tr.mvr-teacher-row[data-statut="brouillon"] > td:first-child { border-left-color: #f59e0b; }
.mvr-table tr.mvr-teacher-row[data-statut="mixte"]     > td:first-child {
  border-left-color: transparent;
  border-image: linear-gradient(to bottom, #16a34a 50%, #f59e0b 50%) 1;
}
.mvr-status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  vertical-align: middle; cursor: help;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
  margin-right: 6px;
}
.mvr-status-valide    { background: #16a34a; }
.mvr-status-brouillon { background: #f59e0b; }
.mvr-status-mixte     {
  background: linear-gradient(to right, #16a34a 50%, #f59e0b 50%);
}
.mvr-table tr.mvr-teacher-row .mvr-teacher-name {
  /* Aligne la pastille avec le bord gauche du texte des matières du parent
     (qui a 6px de padding via .saghe-table td). */
  padding: 0 6px;
  color: #1a56db;
  font-style: italic;
  display: flex; align-items: center; gap: 6px;
}
.mvr-table tr.mvr-teacher-row .mvr-teacher-name .mvr-teacher-input {
  flex: 1; width: auto; min-width: 0;
}
.mvr-table tr.mvr-teacher-row .mvr-teacher-name .mvr-status-dot {
  flex: 0 0 auto;
  margin-right: 0;
}
/* Cellule enseignant : input identique aux autres cellules éditables, mais
   aligné à gauche (texte plutôt qu'un nombre). */
.mvr-table tr.mvr-teacher-row .mvr-teacher-input {
  text-align: left;
  font-style: italic;
  color: #1a56db;
  font-weight: 600;
}

/* Panneau d'autocomplete (positionné en absolute par le JS sous l'input) */
.mvr-teacher-panel {
  position: absolute;
  z-index: 1000;
  background: #fff;
  border: 1px solid #b8d0ee;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  max-height: 260px;
  overflow-y: auto;
  font-size: 12px;
  padding: 2px 0;
}
.mvr-teacher-opt {
  padding: 4px 12px;
  cursor: pointer;
  color: #1a3a6e;
  white-space: nowrap;
}
.mvr-teacher-opt:hover { background: #e8f0fe; }
.mvr-teacher-opt.is-selected {
  background: #eef4ff;
  font-weight: 600;
}
.mvr-teacher-opt.is-empty {
  color: #999;
  font-style: italic;
  cursor: default;
}
.mvr-teacher-opt.is-empty:hover { background: transparent; }
.mvr-table tr.mvr-teacher-row .mvr-teacher-cmi {
  font-size: 10px;
  color: #6b7a8c;
  font-style: italic;
  margin-left: 4px;
}

/* Cellules éditables — style Excel-ish */
.mvr-table input.mvr-edit-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid transparent;
  background: transparent;
  text-align: right;
  font: inherit;
  color: #1a3a6e;
  font-weight: 600;
  padding: 2px 4px;
  border-radius: 2px;
}
.mvr-table input.mvr-edit-input:hover {
  background: #fff;
  border-color: #b8d0ee;
}
.mvr-table input.mvr-edit-input:focus {
  outline: none;
  background: #fff;
  border-color: #1a56db;
  box-shadow: 0 0 0 2px rgba(26,86,219,0.18);
}
.mvr-table input.mvr-edit-input.mvr-input-saving {
  background: #fffbea;
  border-color: #f5c542;
}
.mvr-table input.mvr-edit-input.mvr-input-error {
  background: #fdecea;
  border-color: #c0392b;
  color: #c0392b;
}
.mvr-table tr.mvr-teacher-row .mvr-teacher-total {
  font-weight: 700;
  color: #1a3a6e;
}
.mvr-table button.mvr-teacher-del {
  background: transparent;
  border: 1px solid transparent;
  color: #c0392b;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  transition: background 0.1s ease;
}
.mvr-table button.mvr-teacher-del:hover {
  background: #fdecea;
  border-color: #c0392b;
}

/* ─── Service Import Cards ────────────────────────────────────────── */
.svc-import-section { padding: 16px; }
.svc-import-cards { display: flex; gap: 20px; flex-wrap: wrap; }
.svc-import-card {
  flex: 1; min-width: 280px; max-width: 400px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 24px; text-align: center;
  transition: box-shadow .2s;
}
.svc-import-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); }
.svc-import-card-icon { font-size: 36px; color: #555; margin-bottom: 12px; }
.svc-import-card-title { font-size: 15px; font-weight: 700; color: #2c3e50; margin-bottom: 8px; }
.svc-import-card-desc { font-size: 12px; color: #666; line-height: 1.5; }

/* ─── Searchable Select (SAGHE users) ─────────────────────────────── */
.saghe-searchable-select {
  position: relative; display: inline-block; width: 220px;
}
.saghe-search-input {
  width: 100%; padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px;
  font-size: 12px;
}
.saghe-search-input.saghe-search-selected {
  background: #d5f5e3; border-color: #27ae60; font-weight: 600;
}
.saghe-search-list {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  max-height: 200px; overflow-y: auto; background: #fff;
  border: 1px solid #ccc; border-top: none; border-radius: 0 0 4px 4px;
  z-index: 200; box-shadow: 0 4px 8px rgba(0,0,0,.15);
}
.saghe-search-item {
  padding: 5px 8px; font-size: 12px; cursor: pointer;
}
.saghe-search-item:hover { background: #e8f0fe; }
.saghe-search-create { font-weight: 600; color: #c0392b; border-bottom: 1px solid #eee; }

/* ─── Import Maquette ─────────────────────────────────────────────── */
.maq-params {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px;
}
.maq-field label {
  display: block; font-size: 12px; font-weight: 600; color: #555; margin-bottom: 4px;
}
.maq-field select { padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; }
.maq-ff-select { width: 100%; }
.pe-cpk-tab-bar {
  display: flex;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 4px;
}
.pe-cpk-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 6px 16px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
}
.pe-cpk-tab:hover { color: var(--primary); }
.pe-cpk-tab.pe-cpk-tab-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}
.pe-cpk-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* 80-color palette grid */
.pe-cpk-pal-grid {
  display: grid;
  grid-template-columns: repeat(10, 28px);
  gap: 10px;
  padding: 4px;
}
.pe-cpk-pal-cell {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .1s, border-color .1s;
}
.pe-cpk-pal-cell:hover { transform: scale(1.15); border-color: #999; }
.pe-cpk-pal-cell.selected {
  border-color: #fff;
  box-shadow: 0 0 0 3px var(--primary, #0f9d58), 0 0 8px rgba(0,0,0,0.4);
  transform: scale(1.2);
  z-index: 1;
  position: relative;
}

/* Ligne palette + témoin couleur sélectionnée */
.pe-cpk-pal-top {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.pe-cpk-pal-preview-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  min-width: 80px;
}
.pe-cpk-pal-preview-label {
  font-size: 11px;
  color: var(--text-muted, #666);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pe-cpk-pal-preview-swatch {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  border: 1px solid #ccc;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 1px 3px rgba(0,0,0,0.15);
}
.pe-cpk-pal-preview-hex {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #222);
}

/* Custom color picker modal */
.pe-cpk {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px;
}
.pe-cpk-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.pe-cpk-sl-wrap {
  position: relative;
  width: 256px;
  height: 256px;
  cursor: crosshair;
  border: 1px solid #ccc;
  flex-shrink: 0;
}
.pe-cpk-sl {
  display: block;
  width: 256px;
  height: 256px;
}
.pe-cpk-sl-cursor {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(0,0,0,0.6);
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.pe-cpk-hue-wrap {
  position: relative;
  width: 20px;
  height: 256px;
  cursor: pointer;
  border: 1px solid #ccc;
  flex-shrink: 0;
}
.pe-cpk-hue {
  display: block;
  width: 20px;
  height: 256px;
}
.pe-cpk-hue-cursor {
  position: absolute;
  left: -2px;
  right: -2px;
  height: 4px;
  background: #fff;
  border: 1px solid #333;
  pointer-events: none;
  transform: translateY(-50%);
}
.pe-cpk-right {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 8px;
  align-items: center;
  align-self: flex-end;
}
.pe-cpk-preview-col {
  display: contents;
}
.pe-cpk-preview-label {
  font-size: 11px;
  color: #666;
  text-align: right;
}
.pe-cpk-preview {
  width: 48px;
  height: 48px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.pe-cpk-input-group {
  display: contents;
}
.pe-cpk-input-group label {
  font-size: 12px;
  color: #666;
  text-align: right;
}
.pe-cpk-input-group input {
  width: 52px;
  height: 26px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 13px;
}
.pe-cpk-hex-group input {
  width: 72px;
}
.pe-cpk-recent {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pe-cpk-recent-label {
  font-size: 12px;
  color: #555;
}
.pe-cpk-recent-grid {
  display: flex;
  gap: 4px;
}
.pe-cpk-recent-cell {
  width: 24px;
  height: 24px;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
}
.pe-cpk-recent-cell:hover {
  border-color: #666;
  transform: scale(1.1);
}
.pe-cpk-recent-grid {
  padding: 4px;
  gap: 10px !important;
}
.pe-cpk-recent-cell.selected {
  border-color: #fff;
  box-shadow: 0 0 0 3px var(--primary, #0f9d58), 0 0 8px rgba(0,0,0,0.4);
  transform: scale(1.2);
  position: relative;
  z-index: 1;
}

/* Bouton "Aucune couleur" (option allowNone du ColorPicker) */
.pe-cpk-none-btn {
  align-self: flex-start;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid #d0d3d6;
  border-radius: 4px;
  color: #444;
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 8px;
  transition: background .1s, border-color .1s;
}
.pe-cpk-none-btn:hover { background: #e8f0fe; border-color: #0b5cd8; color: #0b5cd8; }
.pe-cpk-none-btn.is-selected {
  background: #e8f0fe;
  border-color: var(--primary, #0f9d58);
  color: var(--primary, #0f9d58);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   FormField — date / time / calendar (copié depuis Getskills2)
   ═══════════════════════════════════════════════════════════════ */
/* ─── FormField.select (dropdown personnalisée) ──────────────────── */
.ff-select {
  position: relative;
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 6px;
  min-width: 0;
  padding: 5px 10px;
  border: 1px solid #d0d7e2;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  color: #1a3556;
  user-select: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ff-select:hover { border-color: #b6c4d6; }
.ff-select.is-open,
.ff-select:focus-within { border-color: #2e75b6; box-shadow: 0 0 0 2px rgba(46,117,182,.12); outline: none; }
.ff-select.is-disabled { background: #f5f7fa; color: #99a4b3; cursor: not-allowed; }
.ff-select-display {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.ff-select-arrow {
  flex: 0 0 auto; color: #6b7a8c; font-size: 11px;
  transition: transform 0.15s;
}
.ff-select.is-open .ff-select-arrow { transform: rotate(180deg); color: #2e75b6; }

.ff-select-panel {
  /* position/left/top/width sont posés en inline par FormField._positionPanel */
  background: #fff;
  border: 1px solid #d0d7e2;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
  max-height: 280px; overflow-y: auto;
  padding: 4px 0;
}
.ff-select-search {
  padding: 6px 8px; border-bottom: 1px solid #eef2f7;
  position: sticky; top: 0; background: #fff; z-index: 1;
}
.ff-select-search-input {
  width: 100%; padding: 4px 8px;
  border: 1px solid #d6e0eb; border-radius: 4px;
  font-size: 12px; outline: none;
}
.ff-select-search-input:focus { border-color: #2e75b6; }
.ff-select-option {
  padding: 6px 12px; cursor: pointer; font-size: 13px;
  color: #1a3556; line-height: 1.3;
}
.ff-select-option:hover { background: #eaf2fb; }
.ff-select-option.is-selected { background: #d4e6f8; font-weight: 600; }

.ff-date {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d0d7e2;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  width: 140px; max-width: 140px;
  transition: border-color 0.15s;
}
.ff-date:focus-within {
  border-color: #2e75b6;
  box-shadow: 0 0 0 2px rgba(46,117,182,.12);
}
.ff-date.is-disabled {
  background: #f0f4f9;
  opacity: 0.6;
  pointer-events: none;
}
.ff-date-input {
  border: none;
  outline: none;
  padding: 5px 6px;
  font-size: 13px;
  font-family: inherit;
  color: #1a3556;
  background: transparent;
  width: 100%;
  min-width: 0;
}
.ff-date-input::placeholder { color: #99a4b3; }
.ff-date-btn {
  border: none;
  background: #eef2f7;
  padding: 6px 8px;
  cursor: pointer;
  color: #4a5568;
  font-size: 14px;
  flex-shrink: 0;
  transition: background 0.12s;
}
.ff-date-btn:hover { background: #dde4ec; }

.ff-time {
  display: inline-flex; align-items: center; gap: 2px;
  background: #fff;
  border: 1px solid #d0d7e2; border-radius: 6px;
  padding: 4px 6px;
}
.ff-time-col { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.ff-time-btn {
  border: none; background: none; color: #99a4b3;
  cursor: pointer; padding: 0; line-height: 1; font-size: 9px;
  width: 28px; height: 14px; display: flex; align-items: center; justify-content: center;
  border-radius: 3px; transition: background 0.12s, color 0.12s;
}
.ff-time-btn:hover { background: #eaf2fb; color: #2e75b6; }
.ff-time-btn:active { background: #d4e6f8; }
.ff-time-digit {
  width: 28px; text-align: center; border: none; outline: none;
  font-size: 15px; font-weight: 600; font-family: inherit;
  color: #1a3556; background: transparent;
  padding: 0; line-height: 1.2;
}
.ff-time-digit:focus { background: #eaf2fb; border-radius: 3px; }
.ff-time-sep {
  font-size: 16px; font-weight: 700; color: #4a5568;
  padding: 0 1px; align-self: center; margin-top: 1px;
}
.ff-time.is-disabled { opacity: .5; pointer-events: none; }

.ff-cal-panel {
  background: #fff;
  border: 1px solid #d0d7e2;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.14);
  padding: 10px;
  width: 260px;
  user-select: none;
}
.ff-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ff-cal-nav {
  border: none; background: none;
  font-size: 18px; cursor: pointer; padding: 2px 8px;
  color: #4a5568; border-radius: 4px;
  transition: background 0.12s;
}
.ff-cal-nav:hover { background: #eef2f7; }
.ff-cal-title { font-size: 14px; font-weight: 600; text-transform: capitalize; color: #1a3556; }
.ff-cal-days, .ff-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
}
.ff-cal-dayname { font-size: 11px; color: #99a4b3; font-weight: 600; padding: 4px 0; }
.ff-cal-cell {
  padding: 5px 0; font-size: 13px; cursor: pointer;
  border-radius: 4px; transition: background 0.1s; color: #1a3556;
}
.ff-cal-cell:hover { background: #eef2f7; }
.ff-cal-cell.is-today { font-weight: 700; color: #2e75b6; }
.ff-cal-cell.is-selected { background: #2e75b6; color: #fff; font-weight: 600; }
.ff-cal-cell.is-selected:hover { background: #1f5d99; }
.ff-cal-empty { cursor: default; }

/* ee-field-error highlight pour FormField.setError */
.ee-field-error { border-color: #c0392b !important; box-shadow: 0 0 0 2px rgba(192,57,43,.12) !important; }

/* OM Inbox : panneau plein écran à 2 colonnes
   (gauche = données/validation, droite = visualisation OM pleine hauteur).
   On élargit le panneau vers la gauche pour loger la colonne de contrôles. */
.om-inbox-panel { width: min(1320px, 95vw); padding: 0; }
.om-inbox-split {
  flex: 1 1 auto;
  display: flex; flex-direction: row;
  height: 100%; min-height: 0; width: 100%;
}
.om-inbox-left {
  flex: 0 0 420px; width: 420px;
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid #e1e8f0; background: #fafcff;
}
.om-inbox-left .wm-reader-head {
  flex: 0 0 auto;
  border-bottom: 1px solid #e8eef5;
}
.om-inbox-left-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column;
}
/* La visualisation occupe tout le reste, sur toute la hauteur du panneau. */
.om-inbox-panel .om-viewer-wrap {
  flex: 1 1 auto; min-width: 0; height: 100%;
  border-radius: 0; background: #525659;
}
.om-inbox-panel .om-viewer-iframe { width: 100%; height: 100%; border: none; border-radius: 0; }
/* En colonne, les actions s'empilent et restent visibles en bas du volet gauche. */
.om-inbox-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 12px; border-top: 1px solid #e8eef5;
  margin-top: auto;
}
.om-inbox-actions .om-btn { display: inline-flex; align-items: center; gap: 6px; }
/* Colonne étroite (420px) : libellé au-dessus du champ, champs pleine largeur. */
.om-inbox-left .om-inbox-recipient,
.om-inbox-left .om-inbox-cc {
  flex-direction: column; align-items: stretch; gap: 4px;
}
.om-inbox-left .om-recipient-field,
.om-inbox-left .om-cc-field { max-width: none; }
/* Boutons d'action : taille = contenu + padding, alignés côte à côte
   (retour à la ligne automatique si la largeur du volet ne suffit pas). */
.om-inbox-left .om-inbox-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
.om-inbox-left .om-inbox-actions .om-btn { flex: 0 0 auto; }
.om-status-accord { color: #1f8a45; font-weight: 600; }
.om-status-refus  { color: #c0392b; font-weight: 600; }
.om-status-sent   { color: #2e75b6; font-weight: 600; }
.om-btn-cancel {
  background: #fff; color: #6b7a8c; border: 1px solid #d6e0eb;
  padding: 6px 12px; border-radius: 4px; cursor: pointer;
  font-size: 13px; display: inline-flex; align-items: center; gap: 6px;
}
.om-btn-cancel:hover { background: #fff5e0; color: #b6772b; border-color: #f0d39d; }
.om-btn-cancel:disabled { opacity: .55; cursor: progress; }

/* Champ destinataire avec autocomplétion */
.om-inbox-recipient {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid #e8eef5;
}
.om-recipient-label {
  font-size: 12px; color: #6b7a8c; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  flex: 0 0 auto;
}
.om-recipient-field { flex: 1 1 auto; position: relative; max-width: 520px; }
.om-recipient-field input {
  width: 100%; padding: 5px 8px;
  border: 1px solid #d6e0eb; border-radius: 4px;
  font-size: 13px; outline: none;
}
.om-recipient-field input:focus {
  border-color: #2e75b6; box-shadow: 0 0 0 2px rgba(46,117,182,.12);
}
.om-recipient-cc {
  flex: 0 0 auto;
  font-size: 12px; color: #6b7a8c; font-style: italic;
}
.om-recipient-suggest {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0;
  background: #fff; border: 1px solid #d0d7e2;
  border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  max-height: 260px; overflow-y: auto;
  z-index: 10;
}
.om-recipient-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; cursor: pointer;
  border-bottom: 1px solid #eef2f7;
}
.om-recipient-item:last-child { border-bottom: none; }
.om-recipient-item:hover,
.om-recipient-item.is-active { background: #eaf2fb; }
.om-recipient-name  { font-size: 13px; color: #1a3556; font-weight: 600; flex: 0 0 auto; }
.om-recipient-email { font-size: 12px; color: #6b7a8c; flex: 1 1 auto; text-align: right; }
.om-recipient-empty {
  padding: 8px 10px; font-size: 12px; color: #6b7a8c; font-style: italic;
}

/* Champ Cc du panneau OM (tokenfield : chips + saisie dans la même boîte) */
.om-inbox-cc {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid #e8eef5;
}
.om-cc-field { flex: 1 1 auto; position: relative; max-width: 520px; }
.om-cc-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  padding: 4px 6px; min-height: 30px;
  border: 1px solid #d6e0eb; border-radius: 4px; background: #fff;
  cursor: text;
}
.om-cc-box:focus-within { border-color: #2e75b6; box-shadow: 0 0 0 2px rgba(46,117,182,.12); }
/* display:contents → les chips deviennent des items flex de .om-cc-box,
   et s'alignent donc en ligne avec l'input qui les suit. */
.om-cc-chips { display: contents; }
.om-cc-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 12px;
  background: #eaf2fb; color: #2e75b6; border: 1px solid #c6dcef;
  font-size: 12px; white-space: nowrap;
}
.om-cc-chip-fixed { background: #eef2f7; color: #5a6b7d; border-color: #d6e0eb; }
.om-cc-chip-fixed i { font-size: 9px; opacity: .7; }
.om-cc-chip-del {
  border: none; background: transparent; cursor: pointer;
  color: #2e75b6; font-size: 15px; line-height: 1; padding: 0;
}
.om-cc-chip-del:hover { color: #c0392b; }
.om-cc-inlineinput {
  flex: 1 1 120px; min-width: 120px;
  border: none; outline: none; padding: 3px 2px;
  font-size: 13px; background: transparent;
}

/* Équipe administrative */
.ea-add-form, .ea-add-role {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px; border-bottom: 1px solid #e8eef5; background: #f6f9fc;
}
.ea-input {
  flex: 1 1 110px; min-width: 100px;
  padding: 5px 8px; border: 1px solid #d6e0eb; border-radius: 4px;
  font-size: 13px; outline: none;
}
.ea-input:focus { border-color: #2e75b6; box-shadow: 0 0 0 2px rgba(46,117,182,.12); }
.ea-input-compo { flex: 0 0 80px; }
.ea-input-com   { flex: 2 1 200px; }
.ea-member-list, .ea-role-mgmt-list { overflow-y: auto; flex: 1 1 auto; }
.ea-member-meta { font-size: 11px; color: #6b7a8c; }
.ea-member-roles { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.ea-role-pill {
  display: inline-block; padding: 1px 8px;
  background: #eaf2fb; color: #2e75b6;
  border: 1px solid #c6dcef; border-radius: 10px;
  font-size: 11px; font-weight: 600;
}
.ea-role-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid #eef2f7; cursor: pointer;
}
.ea-role-row:hover { background: #f4f9ff; }
.ea-role-row input { flex: 0 0 auto; }
.ea-role-lib { flex: 0 0 auto; font-size: 13px; color: #1a3556; }
.ea-role-com { flex: 1 1 auto; font-size: 12px; color: #6b7a8c; font-style: italic; }
.ea-role-mgmt-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-bottom: 1px solid #eef2f7;
}
.ea-del-btn {
  background: transparent; border: 1px solid transparent;
  color: #6b7a8c; cursor: pointer; padding: 4px 8px; border-radius: 4px;
  flex: 0 0 auto;
}
.ea-del-btn:hover { background: #fdecea; color: #c0392b; border-color: #f4b7b0; }
#omInboxValStatus {
  margin-left: auto;
  font-size: 13px; font-style: italic;
  color: #6b7a8c;
}
#omInboxValStatus .om-status-accord,
#omInboxValStatus .om-status-refus,
#omInboxValStatus .om-status-sent { font-style: normal; }
.om-inbox-panel #omInboxInfoBar {
  margin: 0; padding: 10px 14px;
  border-bottom: 1px solid #e8eef5; background: #f6f9fc;
  font-size: 13px; line-height: 1.5;
}
.om-inbox-panel #omInboxInfoBar > div { margin-bottom: 2px; }

/* ═══════════════════════════════════════════════════════════════
   WEBMAIL COMPOSE — panneau slide-in (mirror du reader)
   ═══════════════════════════════════════════════════════════════ */
.wm-compose-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 30, 45, 0.32);
  z-index: 9600;
  display: block;
}
.wm-compose-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(960px, 56vw);
  background: #fff;
  box-shadow: -10px 0 36px rgba(0, 0, 0, 0.24);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.24s cubic-bezier(.2,.7,.2,1);
}
.wm-compose-panel.wm-compose-open { transform: translateX(0); }

.wm-compose-head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid #e8eef5;
  background: #f6f9fc;
}
.wm-compose-title {
  flex: 1 1 auto;
  font-size: 15px; font-weight: 600; color: #1a3556;
}
.wm-compose-close {
  border: none; background: transparent; cursor: pointer;
  color: #6b7a8c; font-size: 18px; padding: 4px 8px; border-radius: 4px;
}
.wm-compose-close:hover { background: #e8eef5; color: #c0392b; }

/* Segmented control HTML / Texte */
.wm-compose-mode-switch {
  display: inline-flex; background: #eef2f7; padding: 3px; border-radius: 8px;
  border: 1px solid #dde4ec;
}
.wm-compose-mode {
  border: none; background: transparent;
  padding: 5px 12px; font-size: 12px; font-weight: 600;
  color: #4a5568; cursor: pointer; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .12s, color .12s, box-shadow .12s;
}
.wm-compose-mode:hover { color: #1a3556; }
.wm-compose-mode.is-active {
  background: #fff; color: #1a3556;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

/* Formulaire */
.wm-compose-form {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 20px 4px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
}
.wm-compose-form.wm-compose-dragging { outline: 2px dashed #2e75b6; outline-offset: -8px; background: #f4f9ff; }
.wm-compose-dropzone-hint {
  display: none;
  padding: 8px 12px; margin-top: 6px;
  background: #f4f9ff; border: 1px dashed #b8d0e6; border-radius: 6px;
  color: #6b7a8c; font-size: 12px; text-align: center;
}
.wm-compose-form.wm-compose-dragging .wm-compose-dropzone-hint { display: block; }

.wm-compose-row {
  display: flex; align-items: flex-start; gap: 10px;
  border-bottom: 1px solid #eef2f7;
  padding: 6px 0;
}
.wm-compose-label {
  flex: 0 0 60px;
  font-size: 12px; font-weight: 600; color: #6b7a8c;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding-top: 6px;
}
.wm-compose-rowtools {
  display: inline-flex; gap: 4px; align-self: center;
}
.wm-compose-toggle {
  background: transparent; border: 1px solid transparent;
  color: #6b7a8c; cursor: pointer; padding: 2px 8px;
  font-size: 12px; font-weight: 600; border-radius: 4px;
  transition: background .12s, color .12s, border-color .12s;
}
.wm-compose-toggle:hover { background: #eef2f7; color: #1a3556; }
.wm-compose-toggle.is-active {
  color: #2e75b6; border-color: #b8d0e6; background: #f4f9ff;
}

/* Chip field (destinataires) */
.wm-compose-chipfield {
  flex: 1 1 auto;
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 3px 4px;
  min-height: 30px;
  border-radius: 4px;
  cursor: text;
  align-items: center;
  position: relative; /* ancre de la dropdown d'autocomplétion */
}

/* Dropdown d'autocomplétion sur les chip inputs (À / Cc / Cci) */
.wm-compose-ac-dropdown {
  position: absolute;
  left: 0; right: 0; top: 100%;
  margin-top: 2px;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #d6e0eb;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  z-index: 120;
}
.wm-compose-ac-item {
  padding: 7px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f0f3f8;
}
.wm-compose-ac-item:last-child { border-bottom: none; }
.wm-compose-ac-item.active { background: #eaf2fb; }
.wm-compose-ac-item:hover  { background: #f5f9fd; }
.wm-compose-ac-item.active:hover { background: #d6e6f4; }
.wm-compose-ac-name {
  font-size: 13px; font-weight: 600; color: #1a3556;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wm-compose-ac-mail {
  font-size: 12px; color: #6b7a8c;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wm-compose-chipfield:focus-within { background: #f8fafd; }
.wm-compose-chipinput {
  border: none; outline: none; flex: 1 1 120px;
  min-width: 120px; padding: 4px 2px;
  font-size: 13px; color: #1a3556; background: transparent;
}
.wm-compose-chipinput::placeholder { color: #b0bac8; }
.wm-compose-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #eaf2fb; color: #1a3556;
  border: 1px solid #c6dcef;
  padding: 2px 4px 2px 9px;
  border-radius: 14px;
  font-size: 12px; line-height: 1;
  max-width: 100%;
}
.wm-compose-chip-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.wm-compose-chip-x {
  border: none; background: transparent;
  color: #4a5568; cursor: pointer;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 9px;
}
.wm-compose-chip-x:hover { background: #c0392b; color: #fff; }
.wm-compose-chip-invalid {
  background: #fdecea; border-color: #f4b7b0; color: #c0392b;
}

/* Objet */
.wm-compose-subject-input {
  flex: 1 1 auto;
  border: none; outline: none; background: transparent;
  font-size: 14px; color: #1a3556; padding: 6px 2px;
  font-weight: 500;
}

/* Body */
.wm-compose-body {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  min-height: 280px;
  padding-top: 4px;
}
.wm-compose-editor { flex: 1 1 auto; min-height: 280px; display: flex; flex-direction: column; }
.wm-compose-editor .iutedit { flex: 1 1 auto; display: flex; flex-direction: column; }
.wm-compose-editor .iutedit-content-wrap { flex: 1 1 auto; min-height: 220px; }
.wm-compose-body-text {
  flex: 1 1 auto;
  min-height: 280px;
  border: 1px solid #e0e7ef;
  border-radius: 6px;
  padding: 12px 14px;
  font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: 14px; line-height: 1.55;
  color: #1a3556; resize: vertical;
  outline: none;
}
.wm-compose-body-text:focus { border-color: #2e75b6; box-shadow: 0 0 0 2px rgba(46,117,182,.12); }

/* Pièces jointes */
.wm-compose-attachments {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 4px 0;
  border-bottom: 1px solid #eef2f7;
}
.wm-compose-attachments[data-empty="true"] { display: none; }
.wm-compose-att {
  display: inline-flex; align-items: center; gap: 6px;
  background: #f6f9fc; border: 1px solid #dde4ec;
  padding: 4px 6px 4px 10px;
  border-radius: 6px;
  font-size: 12px; color: #1a3556;
  max-width: 320px;
}
.wm-compose-att i.fa-paperclip { color: #6b7a8c; }
.wm-compose-att-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.wm-compose-att-size { color: #6b7a8c; font-size: 11px; }
.wm-compose-att-x {
  border: none; background: transparent; cursor: pointer;
  color: #6b7a8c; padding: 2px 4px; border-radius: 3px;
}
.wm-compose-att-x:hover { background: #c0392b; color: #fff; }

/* Foot */
.wm-compose-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px;
  border-top: 1px solid #e8eef5;
  background: #fafcfe;
}
.wm-compose-foot-left { flex: 1 1 auto; display: inline-flex; gap: 10px; align-items: center; }
.wm-compose-foot-right { display: inline-flex; gap: 8px; }
.wm-compose-attach-btn {
  position: relative;
  background: transparent; border: 1px solid #dde4ec;
  color: #4a5568; cursor: pointer;
  padding: 6px 12px; border-radius: 6px;
  font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .12s, border-color .12s, color .12s;
}
.wm-compose-attach-btn:hover { background: #eef2f7; color: #1a3556; }
.wm-compose-attach-btn.has-attachments {
  border-color: #2e75b6; color: #2e75b6; background: #f4f9ff;
}
.wm-compose-attach-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #2e75b6; color: #fff;
  font-size: 11px; font-weight: 700;
  line-height: 1;
  margin-left: 2px;
}
.wm-compose-attach-badge[hidden] { display: none; }

/* Dropdown pièces jointes (ouvre vers le haut depuis le bouton) */
.wm-compose-attach-pop {
  background: #fff;
  border: 1px solid #d0d7e2;
  border-radius: 10px;
  box-shadow: 0 -8px 28px rgba(0,0,0,0.16);
  padding: 8px 0 0;
  max-width: 480px; min-width: 260px; max-height: 340px;
  display: flex; flex-direction: column;
  z-index: 10100;
}
.wm-compose-attach-pop-head {
  font-size: 11px; font-weight: 700; color: #6b7a8c;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 4px 14px 8px;
  border-bottom: 1px solid #eef2f7;
}
.wm-compose-attach-pop-list {
  overflow-y: auto; max-height: 240px;
  padding: 4px 0;
}
.wm-compose-att-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  cursor: default;
  transition: background .12s;
}
.wm-compose-att-item:hover { background: #f4f9ff; }
.wm-compose-att-icon { color: #6b7a8c; font-size: 12px; flex: 0 0 auto; }
.wm-compose-att-item .wm-compose-att-name {
  flex: 1 1 auto; min-width: 0;
  font-size: 13px; color: #1a3556;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wm-compose-att-item .wm-compose-att-size {
  flex: 0 0 auto;
  font-size: 11px; color: #6b7a8c;
}
.wm-compose-att-item .wm-compose-att-x {
  flex: 0 0 auto;
  border: none; background: transparent;
  color: #6b7a8c; cursor: pointer;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
  transition: background .12s, color .12s;
}
.wm-compose-att-item .wm-compose-att-x:hover { background: #fdecea; color: #c0392b; }
.wm-compose-attach-pop-add {
  border: none;
  background: #f6f9fc;
  color: #2e75b6;
  cursor: pointer;
  padding: 9px 14px;
  border-top: 1px solid #eef2f7;
  border-radius: 0 0 10px 10px;
  font-size: 12px; font-weight: 600;
  text-align: left;
  display: flex; align-items: center; gap: 6px;
  transition: background .12s, color .12s;
}
.wm-compose-attach-pop-add:hover { background: #eaf2fb; color: #1f5d99; }

.wm-compose-btn {
  background: #fff; border: 1px solid #dde4ec;
  color: #1a3556; cursor: pointer;
  padding: 7px 14px; border-radius: 6px;
  font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.wm-compose-btn:hover:not(:disabled) { background: #eef2f7; border-color: #c8d2de; }
.wm-compose-btn:disabled { opacity: .55; cursor: progress; }
.wm-compose-btn-primary {
  background: #2e75b6; color: #fff; border-color: #2e75b6;
}
.wm-compose-btn-primary:hover:not(:disabled) { background: #1f5d99; border-color: #1f5d99; color: #fff; }
.wm-compose-schedule.is-set {
  border-color: #2e75b6; color: #2e75b6; background: #f4f9ff;
}

.wm-compose-status {
  font-size: 12px; color: #6b7a8c;
  padding-left: 4px;
}
.wm-compose-status-ok   { color: #1f8a45; }
.wm-compose-status-err  { color: #c0392b; }
.wm-compose-status-info { color: #2e75b6; }

/* ═══════════════════════════════════════════════════════════════
   Pillule Sympa (statut de réponse) + tooltip hover dans le reader
   ═══════════════════════════════════════════════════════════════ */
/* Slot inline à droite de la ligne "Destinataire" */
.wm-sympa-slot {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
}
.wm-sympa-slot:empty { display: none; }
.wm-sympa-pills { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.wm-sympa-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 12px; font-weight: 600;
  cursor: default;
  border: 1px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
}
.wm-sympa-pill i { font-size: 11px; }
.wm-sympa-ok   { background: #e1f7e5; color: #1f8a45; border-color: #b6e3c3; }
.wm-sympa-err  { background: #fdecea; color: #c0392b; border-color: #f4b7b0; }
.wm-sympa-warn { background: #fff5e0; color: #b6772b; border-color: #f0d39d; }
.wm-sympa-info { background: #eaf2fb; color: #2e75b6; border-color: #c6dcef; }

/* Le tooltip sympa est désormais porté dans <body> via JS pour ne plus se
   faire couper par le haut de la liste des mails. Le span inline-source dans
   la pill reste utilisé comme conteneur de contenu (lu par le portal). */
.wm-sympa-tooltip { display: none; }

/* Portal : tooltip cloné dans <body>, position calculée en JS (au-dessus de
   la pill si possible, sinon en dessous). */
.wm-sympa-tooltip-portal {
  position: fixed; z-index: 2000;
  min-width: 320px; max-width: 520px;
  background: #1a3556; color: #fff;
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  text-align: left;
  font-weight: 400;
}
.wm-sympa-tip-subj { font-weight: 700; font-size: 12px; margin-bottom: 2px; color: #fff; }
.wm-sympa-tip-date { font-size: 11px; opacity: 0.7; margin-bottom: 6px; }
.wm-sympa-tip-body {
  font-family: 'Segoe UI Mono', 'Courier New', monospace;
  font-size: 11px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word;
  margin: 0; max-height: 280px; overflow-y: auto;
  background: rgba(255, 255, 255, 0.08);
  padding: 8px 10px; border-radius: 4px;
  color: #f0f6fc;
}

/* Dossier virtuel "Programmés" + liste */
.webmail-folder-virtual {
  margin-top: 4px;
  border-top: 1px dashed #e0e7ef;
  padding-top: 8px !important;
}
.webmail-folder-count {
  margin-left: auto;
  font-size: 11px;
  color: #6b7a8c;
  background: #eef2f7;
  padding: 1px 7px;
  border-radius: 10px;
}
.webmail-prog-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
}
.wm-prog-when {
  flex: 0 0 160px;
  font-size: 12px; font-weight: 600;
  color: #2e75b6;
  display: inline-flex; align-items: center; gap: 6px;
}
.wm-prog-meta { flex: 1 1 auto; min-width: 0; }
.wm-prog-to     { font-size: 12px; color: #6b7a8c; }
.wm-prog-subject { font-size: 14px; font-weight: 600; color: #1a3556;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-prog-actions { display: inline-flex; gap: 4px; }
.wm-prog-actions button {
  background: transparent; border: 1px solid transparent;
  color: #6b7a8c; cursor: pointer;
  padding: 5px 9px; border-radius: 4px;
  transition: background .12s, color .12s, border-color .12s;
}
.wm-prog-actions button:hover { background: #eef2f7; color: #1a3556; border-color: #dde4ec; }
.wm-prog-actions .wm-prog-cancel:hover { color: #c0392b; border-color: #f4b7b0; background: #fdecea; }
.wm-prog-failed { border-left: 3px solid #c0392b; background: #fdf6f5; }
.wm-prog-sending { background: #f4f9ff; }

/* Popover programmation */
.wm-compose-schedule-pop {
  background: #fff;
  border: 1px solid #d0d7e2;
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.18);
  padding: 14px;
  width: 320px;
}
.wm-compose-pop-head {
  font-size: 13px; font-weight: 700; color: #1a3556;
  margin-bottom: 10px;
}
.wm-compose-pop-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.wm-compose-pop-row label {
  flex: 0 0 50px; font-size: 12px; color: #6b7a8c; font-weight: 600;
}
.wm-compose-pop-quick {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 8px 0 12px;
}
.wm-compose-pop-quick button {
  background: #f4f9ff; border: 1px solid #c6dcef;
  color: #2e75b6; font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 14px; cursor: pointer;
  transition: background .12s;
}
.wm-compose-pop-quick button:hover { background: #e6f0fa; }
.wm-compose-pop-foot {
  display: flex; gap: 8px; justify-content: flex-end;
  border-top: 1px solid #eef2f7; padding-top: 10px;
}
.wm-compose-pop-cancel {
  background: transparent; border: 1px solid #dde4ec;
  color: #4a5568; cursor: pointer;
  padding: 6px 12px; border-radius: 6px;
  font-size: 12px; font-weight: 600;
}
.wm-compose-pop-cancel:hover { background: #eef2f7; }
.wm-compose-pop-ok {
  background: #2e75b6; color: #fff; border: 1px solid #2e75b6;
  cursor: pointer; padding: 6px 14px; border-radius: 6px;
  font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.wm-compose-pop-ok:hover { background: #1f5d99; }


/* ===== Contrôle d'année personnalisé (modale création millésime) ===== */
.mill-year-ctrl {
  display: inline-flex; align-items: center; gap: 4px;
}
/* La règle .dt-edit-ctrl input { width:100% } écraserait notre largeur :
 * on remonte la spécificité avec .dt-edit-ctrl.mill-year-ctrl input */
.dt-edit-ctrl.mill-year-ctrl input.mill-year-input,
.mill-year-input {
  width: 64px; max-width: 64px;
  padding: 4px 6px;
  text-align: center;
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.04em;
  -moz-appearance: textfield;
}
.mill-year-input::-webkit-outer-spin-button,
.mill-year-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.mill-year-btn {
  width: 26px; height: 26px;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 4px;
  cursor: pointer; font-size: 14px; font-weight: 600; color: #2e75b6;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mill-year-btn:hover { background: #eef4ff; border-color: #1a56db; }
.mill-year-preview {
  margin-left: 8px;
  font-size: 13px; color: #6b7a8c; font-style: italic;
  white-space: nowrap;
}

/* Libellé compact pour la modale millésime : taille réduite, une seule ligne,
 * largeur auto (sinon flex:0 0 130px du dt-edit-label landscape le fait wrap). */
.dt-edit-label.newmill-year-label {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.78em;
  font-weight: 500;
  color: #555;
  text-align: left;
}

/* ===== RBAC v2 : matrice droits par bouton (modale Capabilities) ===== */

/* Header compact (remplace les gros titres) */
.brts-head {
  padding: 10px 16px;
  border-bottom: 1px solid #e3e8ef;
  background: #fcfdfe;
  display: flex; flex-direction: column; gap: 2px;
}
.brts-charge-name { font-size: 13px; font-weight: 700; color: #1a3556; }
.brts-hint        { font-size: 11.5px; color: #6b7a8c; }

/* Split 2 colonnes : onglets étroits à gauche, boutons à droite */
.brts-split {
  flex: 1; min-height: 0;
  display: flex;
}
.brts-tabs {
  flex: 0 0 160px;
  display: flex; flex-direction: column;
  background: #f7f9fc;
  border-right: 1px solid #e3e8ef;
  overflow-y: auto;
  padding: 6px 0;
}
.brts-tab {
  display: flex; align-items: center; justify-content: space-between;
  text-align: left; padding: 8px 12px;
  background: transparent; border: none; border-left: 3px solid transparent;
  font: inherit; font-size: 12.5px; color: #1a3556;
  cursor: pointer;
}
.brts-tab:hover { background: #eef3f9; }
.brts-tab.active {
  background: #fff; border-left-color: #2e75b6;
  font-weight: 600;
}
.brts-tab-count {
  font-size: 10px; color: #94a3b8;
  background: #e2e8f0; padding: 1px 6px; border-radius: 10px;
}
.brts-tab-count.on { background: #d4edda; color: #155724; font-weight: 600; }

/* Colonne droite : boutons + droits */
.brts-buttons {
  flex: 1; min-width: 0;
  overflow-y: auto;
  padding: 10px 16px;
  background: #fff;
}
.brts-group { margin-bottom: 14px; }
.brts-group-title {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: #6b7a8c;
  margin-bottom: 6px;
  padding-bottom: 4px; border-bottom: 1px solid #e2e8f0;
}
.brts-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed #f1f5f9;
}
.brts-row:last-child { border-bottom: none; }
.brts-row-label {
  flex: 1; min-width: 0;
  font-size: 12.5px; color: #2c3e50;
  display: flex; align-items: center; gap: 8px;
}
.brts-scoped {
  font-size: 10px; padding: 1px 6px; border-radius: 10px;
  background: #eef4ff; color: #1a56db; font-style: italic;
  flex-shrink: 0;
}
.brts-segs {
  display: inline-flex; gap: 0;
  border: 1px solid #cbd5e1; border-radius: 4px; overflow: hidden;
  flex-shrink: 0;
}
.brts-seg {
  background: #fff; border: none; padding: 3px 10px;
  font: inherit; font-size: 11.5px; color: #6b7a8c;
  cursor: pointer; border-right: 1px solid #cbd5e1;
}
.brts-seg:last-child { border-right: none; }
.brts-seg:hover:not(:disabled):not(.disabled) { background: #f1f5f9; }
.brts-seg.active {
  background: #2e75b6; color: #fff; font-weight: 600;
}
.brts-seg-muted.active  { background: #94a3b8; }
.brts-seg-read.active   { background: #2e75b6; }
.brts-seg-edit.active   { background: #f59e0b; }
.brts-seg-delete.active { background: #c0392b; }
.brts-seg.disabled {
  color: #cbd5e1; background: #fafbfc;
  cursor: default;
  font-style: italic;
}
.brts-seg.disabled:hover { background: #fafbfc; }  /* pas d'effet hover */

/* La modale doit forcer overflow:hidden au body pour que les colonnes
   internes prennent le scroll plutôt que la modale entière. */
.caps-detail {
  overflow: hidden;
}

/* ===== Modale Capabilities (master/detail : charges à gauche) ===== */
.caps-split {
  display: flex; height: 100%;
  min-height: 460px;
  background: #fff;
}
.caps-sidebar {
  width: 240px; flex: 0 0 240px;
  border-right: 1px solid #e3e8ef;
  background: #f7f9fc;
  overflow-y: auto;
  padding: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.caps-sb-item {
  display: flex; flex-direction: column; gap: 4px;
  text-align: left; padding: 10px 12px;
  background: transparent; border: 1px solid transparent;
  border-radius: 6px; cursor: pointer;
  color: #1a3556; font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.caps-sb-item:hover { background: #eef3f9; }
.caps-sb-item.active {
  background: #fff; border-color: #2e75b6;
  box-shadow: 0 1px 2px rgba(46,117,182,0.12);
}
.caps-sb-item.dirty { border-left: 3px solid #f59e0b; }
.caps-sb-libelle { font-weight: 600; font-size: 13px; }
.caps-sb-meta    {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: #6b7a8c;
}
.caps-sb-count        { display: inline-flex; align-items: center; gap: 4px; }
.caps-sb-count i      { font-size: 10px; color: #cbd5e1; }
.caps-sb-count.on i   { color: #16a34a; }
.caps-sb-dirty        { color: #f59e0b; font-size: 14px; line-height: 1; }

.caps-detail {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  background: #fff;
}
.caps-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: #6b7a8c; font-style: italic;
}
.caps-detail-header {
  padding: 14px 18px;
  border-bottom: 1px solid #e3e8ef;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  background: #fcfdfe;
}
.caps-detail-title    { font-size: 16px; font-weight: 700; color: #1a3556; }
.caps-detail-subtitle { font-size: 12px; color: #6b7a8c; margin-top: 4px; }
.caps-detail-mod      { color: #f59e0b; font-weight: 600; }
.caps-detail-actions  { display: flex; gap: 6px; flex-shrink: 0; }
.caps-bulk {
  background: #fff; border: 1px solid #dde4ec;
  padding: 6px 10px; border-radius: 6px;
  font-size: 11px; color: #4a5568; cursor: pointer;
  font-family: inherit;
}
.caps-bulk:hover { background: #eef3f9; }

.caps-detail-scroll {
  flex: 1; overflow-y: auto; padding: 14px 18px;
}
.caps-grp {
  margin-bottom: 10px;
  border: 1px solid #e3e8ef;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.caps-grp-header {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: #f7f9fc;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}
.caps-grp-header:hover { background: #eef3f9; }
.caps-grp-chevron {
  font-size: 10px; color: #6b7a8c;
  transition: transform 0.18s;
  flex-shrink: 0;
}
.caps-grp.collapsed .caps-grp-chevron { transform: rotate(-90deg); }
.caps-grp-title {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: #1f6fb5;
}
.caps-grp-count {
  font-size: 11px; font-weight: 500;
  color: #6b7a8c;
  background: #fff;
  padding: 1px 7px; border-radius: 9px;
  border: 1px solid #e3e8ef;
}
.caps-grp-toggle {
  background: transparent; border: none;
  font-size: 11px; color: #6b7a8c; cursor: pointer;
  font-family: inherit;
  margin-left: auto;
}
.caps-grp-toggle:hover { color: #2e75b6; text-decoration: underline; }
.caps-grp-body {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 8px 8px;
}
.caps-grp.collapsed .caps-grp-body { display: none; }

.caps-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 8px 10px; border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}
.caps-row:hover { background: #f7f9fc; }
.caps-row.checked { background: #f0f7ff; border-color: #d8e8f6; }
.caps-row .caps-cb {
  width: 16px; height: 16px; margin-top: 2px; cursor: pointer;
  flex-shrink: 0;
}
.caps-row-main    { flex: 1; min-width: 0; }
.caps-row-libelle { color: #1a3556; font-size: 13px; font-weight: 500; }
.caps-row-meta {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px; font-size: 11px; color: #6b7a8c;
  flex-wrap: wrap;
}
.caps-row-code {
  font-family: monospace; color: #94a3b8; font-size: 10px;
}
.caps-scope {
  color: #6b7a8c;
  background: #f1f5f9; padding: 1px 6px; border-radius: 8px;
  font-weight: 500;
}

.caps-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px; border-radius: 10px;
  font-size: 10px; font-weight: 600;
}
.caps-badge i { font-size: 9px; }
.caps-badge-iut  { background: #fdecea; color: #b03a2e; }
.caps-badge-dept { background: #e8f4fd; color: #1f6fb5; }

/* ─── Vue Conversations (tags virtuels) ─────────────────────────────
 * Toggle "Boîtes / Conversations" dans la sidebar gauche, grille de
 * tuiles dans le pane droit, liste des mails d'un tag (réutilise
 * .webmail-message-list mais avec des indicateurs in/out par ligne). */
.webmail-viewmode-bar {
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  background: #fff;
  border-bottom: 1px solid #d6e0eb;
}
.wm-viewmode-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: .82em;
  color: #4a5568;
  background: #f8fafc;
  border: 1px solid #d6e0eb;
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.wm-viewmode-btn:hover { background: #eef4fa; }
.wm-viewmode-btn.wm-vm-active {
  background: #2e75b6;
  color: #fff;
  border-color: #2e75b6;
}

/* Grille de tuiles "conversations" — responsive, taille fixe par tuile */
.wm-conv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  padding: 16px;
  overflow-y: auto;
  height: 100%;
  box-sizing: border-box;
  align-content: start;
}
.wm-conv-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid #d6e0eb;
  border-radius: 8px;
  cursor: pointer;
  transition: box-shadow .15s, transform .1s, border-color .15s;
  min-height: 72px;
}
.wm-conv-tile:hover {
  box-shadow: 0 2px 8px rgba(46,117,182,0.15);
  border-color: #b9d4ec;
}
.wm-conv-tile:active { transform: scale(0.98); }
.wm-conv-unread { border-left: 3px solid #2e75b6; }
.wm-conv-avatar {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2e75b6, #5fa3d8);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 1.1em;
}
.wm-conv-avatar-subj {
  background: linear-gradient(135deg, #b87f2e, #d8a85f);
  font-size: 1em;
}
.wm-conv-tile-subj {
  background: #fcfaf5;
  border-color: #e8dcc1;
}
.wm-conv-tile-subj:hover {
  box-shadow: 0 2px 8px rgba(184,127,46,0.18);
  border-color: #d8c08f;
}
.wm-conv-body {
  flex: 1 1 auto;
  min-width: 0;
}
.wm-conv-name {
  font-weight: 600;
  color: #2c3e50;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wm-conv-meta {
  margin-top: 4px;
  display: flex;
  gap: 8px;
  font-size: .78em;
  color: #6b7a8c;
  align-items: center;
}
.wm-conv-meta i { font-size: .85em; }
.wm-conv-count {
  background: #eef4fa;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
}
.wm-conv-dir { white-space: nowrap; }
.wm-conv-unread-badge {
  background: #d62828;
  color: #fff;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
}
.wm-conv-date {
  margin-top: 2px;
  font-size: .72em;
  color: #94a3b8;
}

/* Header au-dessus de la liste d'un tag (breadcrumb + bouton retour) */
.wm-conv-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid #d6e0eb;
}
.wm-conv-back {
  background: transparent;
  border: 1px solid #d6e0eb;
  color: #4a5568;
  width: 32px; height: 32px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.wm-conv-back:hover { background: #eef4fa; }
.wm-conv-title {
  font-weight: 600;
  color: #2c3e50;
  flex: 0 1 auto;
}
.wm-conv-sub {
  color: #94a3b8;
  font-size: .85em;
  margin-left: 4px;
}

/* Lignes de mail dans la vue tag : indicateur in/out + dossier IMAP */
.wm-conv-list { /* hérite de .webmail-message-list */ }
.wm-conv-row-out .wm-subject { color: #6b7a8c; }
.wm-conv-row-dir { font-size: .8em; margin-right: 4px; color: #94a3b8; }
.wm-conv-row-out .wm-conv-row-dir { color: #4f9d6c; }
.wm-conv-folder {
  font-size: .72em;
  color: #6b7a8c;
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 8px;
  margin-right: 4px;
}
.wm-conv-no-uid {
  opacity: 0.65;
  cursor: help;
}

/* ─── Modale Préférences webmail ─── */
.wm-prefs-body { padding: 6px 4px; display: flex; flex-direction: column; gap: 14px; }
.wm-prefs-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.wm-prefs-label {
  font-size: 13px; font-weight: 600; color: #1a3556;
  flex: 1 1 220px;
}
.wm-prefs-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: #4a5568; cursor: pointer;
}
.wm-prefs-toggle input { width: 15px; height: 15px; cursor: pointer; accent-color: #2e75b6; }
.wm-prefs-hint {
  margin-top: 4px; padding: 8px 10px;
  background: #f7f9fc; border-left: 3px solid #c6dcef;
  font-size: 12px; color: #6b7a8c; border-radius: 0 4px 4px 0;
}

/* ── Vue annuelle étapes calendaires ─────────────────────────────────── */
.eta-year-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 8px;
}
@media (max-width: 1100px) { .eta-year-grid { grid-template-columns: repeat(3, 1fr); } }
.eta-month {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
}
.eta-month-title {
  text-align: center;
  font-weight: 600;
  font-size: 11px;
  color: #2c3e50;
  padding: 4px 0;
  background: #f4f6f8;
  border-bottom: 1px solid #e0e0e0;
}
.eta-month-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  padding: 2px;
}
.eta-hdr {
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  color: #888;
  padding: 1px 0;
}
.eta-cell {
  text-align: center;
  font-size: 10px;
  padding: 2px 0;
  border-radius: 2px;
  cursor: default;
  min-height: 16px;
  line-height: 16px;
  color: #333;
  position: relative;
}
.eta-bar {
  position: absolute;
  left: 0; right: 0;
  border-radius: 1px;
}
.eta-empty { visibility: hidden; }
.eta-today { font-weight: 700; box-shadow: inset 0 0 0 1.5px #2e75b6; }
.eta-event { color: #fff; font-weight: 600; text-shadow: 0 0 2px rgba(0,0,0,.3); }
.eta-between { color: #333; }
.eta-cell:not(.eta-empty):not(.eta-event):hover { background: #f0f4f8; }

/* Panneau filtres (12ème cadran) */
.eta-month-filters { display: flex; flex-direction: column; padding: 8px; }
.eta-filter-panel { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.eta-filter-group { }
.eta-filter-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #888; margin-bottom: 3px; }
.eta-filter-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.eta-pill {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 600; cursor: pointer;
  border: 1.5px solid var(--pill-color, #888);
  transition: background .15s, color .15s;
  user-select: none;
}
.eta-pill:not(.eta-pill-dis):hover { background: var(--pill-color); color: #fff !important; }
.eta-pill-on { box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.eta-pill-dis { opacity: .4; cursor: default; pointer-events: none; }
.eta-legend { padding: 8px 12px; border-top: 1px solid #e0e0e0; display: flex; flex-wrap: wrap; gap: 4px; }

/* ── Split parcours ──────────────────────────────────────────── */
.svc-cross-parcours { background: #fef9e7 !important; }
.svc-cross-parcours td { border-color: #f5d98e !important; }
.svc-split-row { background: #eafaf1 !important; }
.svc-split-row td { border-color: #a3d9b1 !important; }
.svc-split-input-row td { font-size: 11.5px; }

/* ── Collègues ───────────────────────────────────────────────── */
.col-results { border: 1px solid #d5dce4; border-radius: 10px; background: #fff; flex: 1; min-height: 0; padding: 16px; display: flex; flex-direction: column; overflow: hidden; }
.col-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.col-table { display: table; width: 100%; border-spacing: 0; }
.col-row { display: table-row; }
.col-sep { display: table-row; }
.col-sep-cell { display: table-cell; padding: 14px 0; }
.col-sep-cell hr { border: none; border-top: 0.5px solid #d5dce4; margin: 0; }
.col-row:first-child + .col-sep { display: none; }
.col-name { display: table-cell; font-weight: 700; font-size: 14px; color: #2c3e50; white-space: nowrap; padding-right: 24px; vertical-align: top; }
.col-mats { display: table-cell; font-size: 13px; color: #555; line-height: 1.6; vertical-align: top; }

/* ================================================================
 *  Passage étudiants — Wizard
 * ================================================================ */
.passage-loading, .passage-empty, .passage-error {
  display: flex; align-items: center; gap: 10px;
  padding: 30px 20px; font-size: 14px; color: #666;
}
.passage-error { color: #c0392b; }

/* Écran choix du sens de passage */
.passage-direction-choice { padding: 20px; }
.passage-direction-cards { display: flex; gap: 16px; }
.passage-direction-card {
  flex: 1; padding: 20px; border: 2px solid #e2e8f0; border-radius: 10px;
  cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .1s;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
}
.passage-direction-card:hover {
  border-color: #2e75b6; box-shadow: 0 4px 16px rgba(46,117,182,0.15); transform: translateY(-2px);
}
.passage-direction-icon {
  width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px;
}
.passage-direction-label { font-size: 15px; font-weight: 700; color: #2c3e50; }
.passage-direction-detail { font-size: 13px; color: #555; }
.passage-direction-desc { font-size: 12px; color: #888; line-height: 1.4; }

/* ── Anomalie signalement ── */
.anom-signal-form { padding: 8px; display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.anom-signal-context { display: flex; gap: 14px; color: #6b7a8c; font-size: 12px; flex-wrap: wrap; }
.anom-signal-context i { margin-right: 4px; }
.anom-signal-label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 12px; color: #555; }
.anom-signal-label textarea {
  border: 1px solid #ccd; border-radius: 4px; padding: 8px; font-size: 13px;
  font-family: inherit; resize: vertical;
}
.anom-signal-section { border: 1px solid #e2e8f0; border-radius: 6px; padding: 10px; }
.anom-signal-section-title { font-size: 12px; font-weight: 600; color: #2c3e50; margin-bottom: 8px; }
.anom-signal-section-title i { color: #2e75b6; margin-right: 5px; }
.anom-signal-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.anom-signal-table th { background: #f4f6f8; padding: 4px 8px; text-align: center; border: 1px solid #e2e8f0; font-weight: 600; }
.anom-signal-table td { padding: 4px 8px; border: 1px solid #e2e8f0; text-align: center; }
.anom-h-input {
  width: 55px; text-align: center; border: 1px solid #ccd; border-radius: 3px;
  padding: 3px 4px; font-size: 12px;
}
.anom-h-input:focus { border-color: #2e75b6; outline: none; }
.anom-signal-retrait {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: #fff3cd; border: 1px solid #ffc107; border-radius: 6px;
  font-size: 12px; color: #856404; cursor: pointer;
}
.anom-signal-retrait i { color: #e74c3c; }

/* ── Anomalie récap (workflow) ── */
.anom-recap-list { display: flex; flex-direction: column; gap: 10px; padding: 8px; max-height: 65vh; overflow-y: auto; }
.anom-recap-card {
  border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px;
  background: #fff; transition: box-shadow .15s;
}
.anom-recap-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.anom-recap-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.anom-recap-mat { font-weight: 700; font-size: 14px; color: #2c3e50; }
.anom-recap-mat i { margin-right: 6px; color: #2e75b6; }
.anom-recap-status { font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 10px; }
.anom-status-pending { background: #fff3cd; color: #856404; }
.anom-status-ok { background: #d4edda; color: #155724; }
.anom-status-ko { background: #fde8e8; color: #c0392b; }
.anom-recap-comment { font-size: 13px; color: #555; margin-bottom: 8px; line-height: 1.5; }
.anom-recap-comment i { color: #888; margin-right: 5px; }
.anom-recap-section { font-size: 12px; color: #444; margin-bottom: 6px; }
.anom-recap-actions { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; }

.passage-step-info {
  display: flex; align-items: center; gap: 12px; margin-bottom: 4px;
}
/* Toolbar passage */
.passage-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; margin-bottom: 6px;
}
.passage-toolbar-left { display: flex; align-items: center; gap: 10px; }
.passage-toolbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.passage-filter-group { display: inline-flex; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; }
.passage-filter-pill {
  padding: 3px 10px; font-size: 11.5px; border: none; background: #f5f5f5;
  color: #555; cursor: pointer; transition: all 0.12s; white-space: nowrap;
}
.passage-filter-pill:not(:last-child) { border-right: 1px solid #ccc; }
.passage-filter-pill:hover { background: #e8ecf1; }
.passage-filter-pill.active { background: #2e75b6; color: #fff; font-weight: 600; }

.passage-global-cursus { display: inline-flex; gap: 4px; }
.passage-global-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; font-size: 11px; border: 1px solid #bbb; border-radius: 4px;
  background: #f8f8f8; color: #444; cursor: pointer; transition: all 0.12s; white-space: nowrap;
}
.passage-global-btn:hover { background: #e2e6ea; border-color: #999; }
.passage-global-btn i { font-size: 10px; }

.passage-step-badge {
  background: #2e75b6; color: #fff; font-weight: 700; font-size: 13px;
  padding: 4px 12px; border-radius: 12px;
}
.passage-count { font-size: 13px; color: #888; }

.passage-diplome-group { margin-bottom: 16px; }
.passage-diplome-header {
  font-weight: 700; font-size: 13px; color: #2c3e50;
  padding: 6px 0 4px; border-bottom: 2px solid #2e75b6; margin-bottom: 4px;
}
.passage-diplome-count { font-weight: 400; color: #888; }

.passage-table {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
}
.passage-table th {
  text-align: left; padding: 5px 8px; font-weight: 600; color: #555;
  border-bottom: 1px solid #ddd; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.3px;
}
.passage-table td { padding: 5px 8px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.passage-table tr:hover td { background: #f8fafd; }

.passage-col-name { white-space: nowrap; min-width: 160px; }
.passage-col-parcours { min-width: 80px; color: #666; }
.passage-col-decision { min-width: 160px; }
.passage-col-parcours-cible { min-width: 120px; }

/* Dropdown décision */
.passage-dropdown { position: relative; display: inline-block; }
.passage-dd-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 600;
  border: 1.5px solid transparent; cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
  background: #f0f0f0; color: #666;
}
.passage-dd-trigger:hover { filter: brightness(0.93); }
.passage-dd-trigger i:first-child { font-size: 11px; }
.passage-dd-chevron { font-size: 9px !important; margin-left: 2px; opacity: 0.6; }

/* Couleurs du trigger selon la décision active */
.passage-dd-trigger.passage-pill-passage    { background: #d4edda; color: #155724; border-color: #28a745; }
.passage-dd-trigger.passage-pill-admis      { background: #d4edda; color: #155724; border-color: #28a745; }
.passage-dd-trigger.passage-pill-redoublement { background: #fff3cd; color: #856404; border-color: #ffc107; }
.passage-dd-trigger.passage-pill-blanche    { background: #e2e3e5; color: #383d41; border-color: #6c757d; }
.passage-dd-trigger.passage-pill-non-admis  { background: #f8d7da; color: #721c24; border-color: #dc3545; }

/* Menu déroulant */
.passage-dd-menu {
  display: none; position: absolute; top: calc(100% + 3px); left: 0;
  background: #fff; border: 1px solid #d0d0d0; border-radius: 5px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15); z-index: 100;
  min-width: 170px; padding: 4px 0;
  animation: passageFadeIn 0.12s ease;
}
.passage-dd-menu.open { display: block; }
@keyframes passageFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.passage-dd-option {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; font-size: 12.5px; cursor: pointer;
  transition: background 0.1s; white-space: nowrap;
  color: #444;
}
.passage-dd-option:hover { background: #f0f4f8; }
.passage-dd-option i { font-size: 11px; width: 14px; text-align: center; }

/* Option couleurs au survol */
.passage-dd-option.passage-pill-passage:hover    { background: #d4edda; color: #155724; }
.passage-dd-option.passage-pill-admis:hover      { background: #d4edda; color: #155724; }
.passage-dd-option.passage-pill-redoublement:hover { background: #fff3cd; color: #856404; }
.passage-dd-option.passage-pill-blanche:hover    { background: #e2e3e5; color: #383d41; }
.passage-dd-option.passage-pill-non-admis:hover  { background: #f8d7da; color: #721c24; }

/* Option sélectionnée */
.passage-dd-option.selected { font-weight: 700; }
.passage-dd-option.selected::after { content: '✓'; margin-left: auto; font-size: 11px; }

/* Pillules niveau parcours (2A / 3A) */
.parc-niv-pills { display: inline-flex; gap: 4px; }
.parc-niv-pill {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
  transition: all 0.15s; user-select: none;
}
.parc-niv-pill-on  { background: #2e75b6; color: #fff; }
.parc-niv-pill-off { background: #e8e8e8; color: #aaa; }
.parc-niv-pill-edit { cursor: pointer; }
.parc-niv-pill-edit:hover { filter: brightness(0.9); }

/* Select cursus (initial/alternance) */
.passage-col-cursus { min-width: 100px; }
.passage-cursus-select {
  padding: 3px 6px; font-size: 12px;
  border: 1px solid #ccc; border-radius: 4px; background: #fff;
  transition: opacity 0.2s;
}
.passage-cursus-select:disabled { background: #f5f5f5; }
.passage-cursus-fixed {
  font-size: 12px; color: #888; font-style: italic;
}

/* Select parcours cible */
.passage-parcours-select {
  width: 100%; padding: 3px 6px; font-size: 12px;
  border: 1px solid #ccc; border-radius: 4px; background: #fff;
  transition: opacity 0.2s;
}
.passage-parcours-select:disabled { background: #f5f5f5; }

/* ================================================================
 *  Trombinoscope — style cohérent avec .afs-*
 * ================================================================ */
.trombi-wrap {
  display: flex; gap: 12px; height: 100%; min-height: 500px;
  flex: 1 1 auto; min-height: 0;
}

/* ── Sidebar (arbre) ── */
.trombi-sidebar {
  width: 230px; min-width: 200px; flex-shrink: 0;
  display: flex; flex-direction: column;
  background: #f7f9fc; border: 1px solid #d6e0eb; border-radius: 6px;
  overflow: hidden;
}
.trombi-sidebar-title {
  padding: 8px 10px; background: #eaf2fb; border-bottom: 1px solid #d6e0eb;
  font-size: 13px; font-weight: 600; color: #1a3556;
  display: flex; align-items: center; gap: 6px;
}
.trombi-sidebar-title::before { content: '\f0e8'; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: #2e75b6; }
.trombi-sidebar-body { flex: 1 1 auto; overflow-y: auto; padding: 4px 0; }

/* ── Contenu (grille photos) ── */
.trombi-content {
  flex: 1; display: flex; flex-direction: column;
  background: #fff; border: 1px solid #d6e0eb; border-radius: 6px;
  overflow: hidden; min-height: 0;
}
.trombi-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; background: #eaf2fb; border-bottom: 1px solid #d6e0eb;
  flex-shrink: 0;
}
.trombi-title { font-size: 15px; font-weight: 700; color: #1a3556; }

/* ── Arbre hiérarchique ── */
.trombi-tree-dipl-header {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: #1a3556;
  transition: background 0.1s;
}
.trombi-tree-dipl-header:hover { background: #eaf2fb; }
.trombi-tree-cursus { font-weight: 400; font-size: 10.5px; color: #6b7a8c; }
.trombi-tree-caret { font-size: 9px; width: 10px; color: #6b7a8c; }
.trombi-tree-annee-header {
  padding: 4px 10px 4px 26px; cursor: pointer; font-size: 12px; font-weight: 600; color: #444;
  transition: background 0.1s;
}
.trombi-tree-annee-header:hover { background: #eaf2fb; }
.trombi-tree-groupe {
  padding: 3px 10px 3px 40px; cursor: pointer; font-size: 11.5px; color: #555;
  transition: all 0.1s; display: flex; align-items: center; gap: 5px;
}
.trombi-tree-groupe:hover { background: #dce8f8; color: #1a4a7a; }
.trombi-tree-groupe.active { background: #2e75b6; color: #fff; font-weight: 600; }

/* ── Grille photos ── */
.trombi-grid {
  display: flex; flex-wrap: wrap; gap: 12px;
  padding: 12px 14px; overflow-y: auto;
  align-content: start;
  flex: 1 1 0; min-height: 0;
}
.trombi-card {
  width: 130px; flex-shrink: 0;
  border: 1px solid #d6e0eb; border-radius: 6px;
  background: #f7f9fc; display: flex; flex-direction: column;
  transition: box-shadow 0.15s; overflow: visible;
}
.trombi-card-editable:hover { box-shadow: 0 2px 10px rgba(46,117,182,0.22); cursor: pointer; }
.trombi-photo-wrapper {
  position: relative; width: 100%; padding-top: 125%; /* ratio 4:5 */
}
.trombi-photo-zone {
  position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px; overflow: hidden; background: #eef1f6;
}
.trombi-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trombi-delete-btn {
  position: absolute; top: 3px; right: 3px; z-index: 2;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(192,57,43,0.8); color: #fff; border: none;
  font-size: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s;
}
.trombi-photo-zone:hover .trombi-delete-btn { opacity: 1; }
.trombi-delete-btn:hover { background: #c0392b; }
.trombi-dragover { outline: 3px dashed #2e75b6; outline-offset: -3px; background: #dce8f8 !important; }

/* Silhouettes par défaut */
.trombi-sil-m { background: linear-gradient(135deg, #d5dce4 0%, #b8c4d0 100%); }
.trombi-sil-f { background: linear-gradient(135deg, #e4d5de 0%, #d0b8c4 100%); }
.trombi-silhouette { font-size: 42px; color: rgba(255,255,255,0.55); }
.trombi-upload-hint { font-size: 24px; color: #b0b8c4; transition: color 0.15s; }
.trombi-photo-zone:hover .trombi-upload-hint { color: #2e75b6; }

/* Pied de tuile */
.trombi-card-footer {
  padding: 4px 6px; background: #eaf2fb; border-top: 1px solid #d6e0eb;
  text-align: center; height: 22px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 0 0 6px 6px;
}
.trombi-name {
  font-size: 10.5px; font-weight: 600; color: #1a3556;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* ── Modale crop ── */
.trombi-crop-wrap { display: flex; flex-direction: column; gap: 12px; }
.trombi-crop-container {
  position: relative; background: #111; border-radius: 6px; overflow: hidden;
  height: 350px; display: flex; align-items: center; justify-content: center;
}
.trombi-crop-box {
  position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0,0,0,0.45);
  cursor: move; z-index: 2;
}
.trombi-crop-handle {
  position: absolute; width: 12px; height: 12px; background: #fff;
  border: 1px solid #2e75b6; border-radius: 2px; z-index: 3;
}
.trombi-crop-nw { top: -6px; left: -6px; cursor: nw-resize; }
.trombi-crop-ne { top: -6px; right: -6px; cursor: ne-resize; }
.trombi-crop-sw { bottom: -6px; left: -6px; cursor: sw-resize; }
.trombi-crop-se { bottom: -6px; right: -6px; cursor: se-resize; }
.trombi-crop-n { top: -6px; left: calc(50% - 6px); cursor: n-resize; }
.trombi-crop-s { bottom: -6px; left: calc(50% - 6px); cursor: s-resize; }
.trombi-crop-w { top: calc(50% - 6px); left: -6px; cursor: w-resize; }
.trombi-crop-e { top: calc(50% - 6px); right: -6px; cursor: e-resize; }
.trombi-crop-controls {
  display: flex; gap: 16px; flex-wrap: wrap;
  padding: 8px 10px; background: #f7f9fc; border: 1px solid #d6e0eb; border-radius: 4px;
}
.trombi-crop-controls label {
  display: flex; align-items: center; gap: 6px; font-size: 12px; color: #555; flex: 1; min-width: 180px;
}
.trombi-crop-controls input[type="range"] { flex: 1; accent-color: #2e75b6; }

.trombi-loading, .trombi-empty, .trombi-error {
  padding: 30px; text-align: center; color: #6b7a8c; font-size: 13px;
}
.trombi-error { color: #c0392b; }
.trombi-tree-loading { padding: 16px 12px; color: #6b7a8c; font-size: 12px; }

/* ── Import Word wizard ── */
.trombi-import-step2 { display: flex; flex-direction: column; gap: 8px; }
.trombi-import-info { padding: 4px 0; }