:root {
  --navy: #1F3864;
  --navy-light: #2E4E8C;
  --bg: #F5F7FA;
  --card: #FFFFFF;
  --border: #E1E5EB;
  --text: #1B1F27;
  --text-muted: #6B7280;
  --green: #1E7B45;
  --red: #B3261E;
  --amber: #A15C00;
  font-family: -apple-system, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }

.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 220px;
  background: var(--navy);
  color: white;
  padding: 20px 0 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.sidebar-logo {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 20px 16px; border-bottom: 1px solid rgba(255,255,255,.15);
}
.sidebar-logo img { width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0; }
.sidebar h1 { font-size: 15px; margin: 0; text-align: center; }
.sidebar nav button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px 20px;
  background: none; border: none; color: rgba(255,255,255,.85); font-size: 14px; cursor: pointer;
}
.sidebar nav button.active, .sidebar nav button:hover { background: var(--navy-light); color: white; }
/* Icones de menu (SVG monochrome, meme couleur que le texte -- style
   proche du logo Envol : blanc sur fond bleu marine, jamais d'emoji
   colore -- demande de Julien 2026-08-29). */
.nav-icon { width: 17px; height: 17px; flex-shrink: 0; fill: currentColor; stroke: currentColor; }

.sidebar-search { position: relative; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.15); }
.sidebar-search input {
  width: 100%; padding: 7px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.1); color: white; font-size: 13px;
}
.sidebar-search input::placeholder { color: rgba(255,255,255,.6); }
.sidebar-search input:focus { outline: none; background: rgba(255,255,255,.18); }
.global-search-results {
  display: none; position: absolute; left: 14px; right: 14px; top: 52px; z-index: 60;
  background: white; color: var(--text); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.3);
  max-height: 420px; overflow-y: auto; padding: 6px 0;
}
.global-search-results.open { display: block; }
.gsr-group { padding: 4px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-top: 6px; }
.gsr-item { padding: 7px 14px; font-size: 13px; cursor: pointer; }
.gsr-item:hover { background: #EEF1F6; }
.gsr-item .gsr-sub { color: var(--text-muted); font-size: 11.5px; }
.gsr-empty { padding: 10px 14px; font-size: 12.5px; color: var(--text-muted); }

.sidebar-user { padding: 14px 20px; margin-top: auto; border-top: 1px solid rgba(255,255,255,.15); }
.sidebar-user label { display: block; font-size: 11px; color: rgba(255,255,255,.7); margin-bottom: 4px; }
.sidebar-user input {
  width: 100%; padding: 6px 9px; border-radius: 6px; border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.1); color: white; font-size: 13px;
}
.sidebar-user input::placeholder { color: rgba(255,255,255,.6); }

.main { flex: 1; padding: 28px 36px; min-width: 0; }
.main h2 { margin-top: 0; color: var(--navy); }

/* Chaque tableau defile horizontalement dans sa propre boite, sans jamais
   forcer toute la page a defiler (bug remonte : colonnes stagiaires "debordaient"). */
.table-scroll { max-width: 100%; overflow-x: auto; border-radius: 8px; }
.table-scroll table { min-width: 640px; }

.kpis { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.kpi {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 20px; min-width: 160px;
}
.kpi .value { font-size: 28px; font-weight: 700; color: var(--navy); }
.kpi .label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 8px; overflow: hidden; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
th { background: #EEF1F6; color: var(--navy); font-weight: 600; }
tr:hover td { background: #FAFBFD; }
tr.clickable { cursor: pointer; }
.option-row.clickable { cursor: pointer; justify-content: space-between; }
.option-row.clickable:hover { background: #EEF1F6; }

.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 10px; flex-wrap: wrap; }

button.primary {
  background: var(--navy); color: white; border: none; padding: 9px 16px;
  border-radius: 6px; cursor: pointer; font-size: 13.5px;
}
button.primary:hover { background: var(--navy-light); }
button.secondary {
  background: white; color: var(--navy); border: 1px solid var(--navy); padding: 8px 14px;
  border-radius: 6px; cursor: pointer; font-size: 13.5px;
}
button.secondary:hover { background: #EEF1F6; }
/* Meme habillage que button.secondary, pour un lien <a> de telechargement
   direct (ex: "Telecharger les documents (ZIP)") -- doit rester cliquable
   et visuellement identique a un bouton, sans etre un vrai <button>. */
a.secondary {
  display: inline-block; background: white; color: var(--navy); border: 1px solid var(--navy);
  padding: 8px 14px; border-radius: 6px; font-size: 13.5px; text-decoration: none; margin-right: 6px;
}
a.secondary:hover { background: #EEF1F6; }
button.danger { background: white; color: var(--red); border: 1px solid var(--red); padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 12.5px; }
/* Meme habillage que button.secondary, mais utilisable sur un <label> qui
   enveloppe un <input type="file"> cache (import de mock-up). */
label.btn-like {
  display: inline-block; background: white; color: var(--navy); border: 1px solid var(--navy);
  padding: 8px 14px; border-radius: 6px; font-size: 13.5px; margin-right: 6px;
}
label.btn-like:hover { background: #EEF1F6; }
button.link { background: none; border: none; color: var(--navy); cursor: pointer; text-decoration: underline; font-size: 13px; padding: 0; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.badge.projet, .badge.planifie, .badge.inscrit { background: #E4ECFB; color: var(--navy); }
.badge.fini, .badge.facture, .badge.confirme, .badge.present, .badge.oui { background: #E4F3E9; color: var(--green); }
.badge.termine, .badge.archive-2025 { background: #ECECEC; color: #444; }
.badge.annule, .badge.absent, .badge.non { background: #FBE8E7; color: var(--red); }
.badge.en-cours, .badge.convoque { background: #FCEFD9; color: var(--amber); }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,20,30,.45);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal {
  background: white; border-radius: 10px; padding: 24px 28px; width: 520px; max-width: 92vw;
  max-height: 88vh; overflow-y: auto;
}
.modal h3 { margin-top: 0; color: var(--navy); }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12.5px; color: var(--text-muted); margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13.5px;
}
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

.back-link { display: inline-block; margin-bottom: 12px; }
.session-meta { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px; }
.session-meta div span.label { display: block; font-size: 11.5px; color: var(--text-muted); }
.session-meta div span.value { font-size: 14px; font-weight: 600; }

.empty { color: var(--text-muted); padding: 30px; text-align: center; }
.error-banner { background: #FBE8E7; color: var(--red); border: 1px solid #F3C6C3; padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 13.5px; }
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 18px 20px;
}
.card h3 { margin-top: 0; }

.retours-liste { display: flex; flex-direction: column; gap: 12px; }
.retour-carte { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.retour-entete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 8px; }
.retour-message { margin: 0 0 10px; white-space: pre-wrap; }
.retour-note { border-top: 1px dashed var(--border); padding-top: 10px; }
.retour-note label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.retour-note textarea { width: 100%; font-family: inherit; font-size: 13.5px; border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; margin-bottom: 6px; }

.mode-label {
  color: #FFA94D; text-align: center; text-transform: uppercase;
  font-weight: 700; font-size: 10.5px; letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.file-input-label { display: inline-block; }

.section-block { margin-bottom: 18px; }
.section-block h4 { margin: 0 0 8px; color: var(--navy); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
table.small th, table.small td { padding: 6px 8px; font-size: 12.5px; }
.subtable-wrap { margin-bottom: 22px; }
.subtable-wrap .toolbar { margin-bottom: 8px; }
.tag { display: inline-block; background: #EEF1F6; color: var(--navy); border-radius: 6px; padding: 1px 7px; font-size: 11.5px; margin-right: 4px; }
.tag.provisoire { background: #FCEFD9; color: var(--amber); }
.alert-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: middle; }
.search-bar { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }
.search-bar input { flex: 1; max-width: 320px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 13.5px; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background: #E4EAF3; }

/* Filtres rapides */
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip {
  background: white; border: 1px solid var(--border); color: var(--text-muted);
  padding: 5px 13px; border-radius: 999px; font-size: 12.5px; cursor: pointer;
}
.chip:hover { border-color: var(--navy-light); color: var(--navy); }
.chip.active { background: var(--navy); border-color: var(--navy); color: white; }

/* Selecteur de date rapide */
.date-field-wrap { display: flex; align-items: center; gap: 6px; }
.date-field-wrap input.date-field { flex: 1; }
.date-pick-btn {
  flex-shrink: 0; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px;
  background: white; cursor: pointer; font-size: 13px; line-height: 1;
}
.date-pick-btn:hover { background: #EEF1F6; }
.date-hidden { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.date-field.date-invalide { border-color: var(--red); background: #FDECEC; }

/* Afficher le mot de passe en clair tant que le bouton est maintenu enfonce */
.password-field-wrap { display: flex; align-items: center; gap: 6px; }
.password-field-wrap input { flex: 1; }
.password-eye-btn {
  flex-shrink: 0; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px;
  background: white; cursor: pointer; font-size: 13px; line-height: 1; user-select: none;
}
.password-eye-btn:hover { background: #EEF1F6; }

/* Cases a cocher agrandies partout (plus faciles a cliquer) */
input[type="checkbox"] {
  width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary, #1c3fa0);
}
.checkbox-row input[type="checkbox"] { width: 16px; height: 16px; }

/* Icone animee pendant la generation d'un document */
.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--navy);
  animation: spin .8s linear infinite; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Sous-onglets (ex: Configuration > Admin) */
.sub-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 4px; }
.sub-tab {
  padding: 8px 16px; background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -2px; font-size: 13.5px; color: var(--text-muted); cursor: pointer;
}
.sub-tab.active { color: var(--navy); border-bottom-color: var(--navy); font-weight: 600; }

/* Formateurs multi-select dans le modal creneau */
.checkbox-list {
  display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px;
}
.checkbox-row { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.checkbox-row input { width: auto; }

/* Listes deroulantes (menu Options) */
.options-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.option-row {
  display: flex; justify-content: space-between; align-items: center; background: var(--card);
  border: 1px solid var(--border); border-radius: 6px; padding: 7px 12px; font-size: 13.5px;
}
.option-add { display: flex; gap: 8px; }
.option-add input { flex: 1; max-width: 280px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }

/* Actions groupees */
.bulk-bar {
  display: flex; align-items: center; gap: 10px; background: #EAF1FC; border: 1px solid #C9DCF5;
  border-radius: 8px; padding: 8px 14px; margin-bottom: 12px; font-size: 13px;
}
.bulk-bar select { padding: 6px 9px; border-radius: 6px; border: 1px solid var(--border); font-size: 13px; }

/* Alerte de conflit formateur (dans le modal creneau) */
.conflict-warning {
  background: #FCEFD9; color: var(--amber); border: 1px solid #F3DDAF; border-radius: 8px;
  padding: 8px 12px; font-size: 12.5px; margin-bottom: 10px;
}
.conflict-warning ul { margin: 4px 0 0; padding-left: 18px; }

/* Mes dossiers : groupes par etape (T0-T10), repliables (fermes par defaut) */
.etape-group { margin-bottom: 12px; }
.etape-group-title {
  font-size: 15px; margin: 0 0 8px; color: var(--navy); font-weight: 600;
  border-bottom: 2px solid var(--border); padding: 8px 4px; cursor: pointer;
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.etape-group-title::-webkit-details-marker { display: none; }
.etape-group-title::before { content: "▸"; color: var(--text-muted); font-size: 12px; transition: transform .15s; }
.etape-group[open] > .etape-group-title::before { transform: rotate(90deg); }
.etape-group-title:hover { background: var(--card); }

/* Calendrier (vue mois/trimestre/semestre des formations) */
/* La vue "Mois" reste en pleine taille (detail complet). Les vues
   "Trimestre"/"Semestre" affichent plusieurs mois cote a cote, en les
   retrecissant progressivement (demande de Julien 2026-08-29) : on gagne
   une vue d'ensemble plutot qu'un long defilement vertical, au prix d'un
   peu de detail (bandeaux sur une seule ligne au lieu de deux). */
.calendrier-mois-liste.vue-trimestre,
.calendrier-mois-liste.vue-semestre {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; align-items: start;
}
.vue-trimestre .calendrier-mois h3, .vue-semestre .calendrier-mois h3 { font-size: 12.5px; margin: 4px 0 4px; }
.vue-trimestre .calendrier-jour { height: 62px; }
.vue-semestre .calendrier-jour { height: 46px; }
.vue-trimestre .calendrier-jour-add, .vue-semestre .calendrier-jour-add { font-size: 11px; }
.vue-trimestre .calendrier-table th, .vue-semestre .calendrier-table th { font-size: 9.5px; padding: 2px 3px; }
.vue-trimestre .calendrier-jour-num, .vue-semestre .calendrier-jour-num { font-size: 10px; }
.vue-trimestre .calendrier-chip {
  height: 16px; font-size: 9.5px; padding: 1px 4px; margin: 0 3px 2px;
  -webkit-line-clamp: 1;
}
.vue-semestre .calendrier-chip {
  height: 13px; font-size: 8.5px; padding: 0 3px; margin: 0 2px 1px;
  -webkit-line-clamp: 1;
}
.calendrier-filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 12px 0 4px; }
.calendrier-filtres .field { min-width: 170px; margin: 0; }
.calendrier-legende { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 10px 0 6px; }
.calendrier-legende-item { font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.calendrier-legende-pastille { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid rgba(0,0,0,.15); }
.calendrier-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calendrier-table th {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
  padding: 4px 6px; text-align: left; border-bottom: 1px solid var(--border);
}
.calendrier-jour {
  vertical-align: top; border: 1px solid var(--border); padding: 4px 0; height: 118px;
  width: 14.28%; overflow-y: auto; overflow-x: hidden;
}
.calendrier-jour.vide { background: #FAFBFC; }
.calendrier-jour.aujourdhui { background: #FFF8E6; }
.calendrier-jour-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2px 0 4px; margin-bottom: 3px;
}
.calendrier-jour-num { font-size: 11.5px; color: var(--text-muted); }
.calendrier-jour-add {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0 3px; border-radius: 3px; opacity: 0;
}
.calendrier-jour:hover .calendrier-jour-add { opacity: 1; }
.calendrier-jour-add:hover { color: var(--navy); background: var(--card); }
/* Le chip est un enfant direct de <td> (padding horizontal = 0) : sa marge
   par defaut laisse un petit espace de chaque cote (aspect "chip" discret,
   arrondi des deux cotes). Sur un segment "au milieu" d'une formation
   multi-jours, la marge et l'arrondi du cote concerne sont retires pour
   que le bloc touche exactement le bord de la cellule -- combine a la
   meme couleur dans la cellule voisine, ca donne l'effet de ligne continue
   demande par Julien (2026-08-28), plutot qu'un bandeau repete chaque
   jour. Pas de marge negative/overflow ici (piege overflow-x/y en CSS) :
   la continuite vient uniquement du padding nul sur <td> + marge nulle sur
   le chip aux bords concernes. */
/* Bandeaux plus epais (demande de Julien 2026-08-29) : hauteur fixe sur 2
   lignes avec retour a la ligne, plutot qu'une seule ligne tronquee par
   des points de suspension -- les informations (numero, type, client,
   ville) restent donc lisibles au lieu d'etre cachees. La hauteur reste
   fixe (et identique pour .vide) pour ne pas casser l'alignement vertical
   entre jours utilise par la barre continue. */
.calendrier-chip {
  font-size: 11px; line-height: 1.25; border-radius: 4px; padding: 3px 5px; margin: 0 4px 3px;
  overflow: hidden; cursor: pointer; box-sizing: border-box;
  height: 30px; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.calendrier-chip:hover { filter: brightness(0.93); }
.calendrier-chip.vide { background: transparent !important; cursor: default; }
.calendrier-chip.suite-avant { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.calendrier-chip.suite-apres { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Configuration > Roles : matrice de permissions lecture/ecriture */
.roles-matrix th, .roles-matrix td { text-align: center; }
.roles-matrix td:first-child, .roles-matrix th:first-child { text-align: left; }
.roles-matrix th:nth-child(2n) { border-left: 2px solid var(--border); }
.roles-matrix td:nth-child(2n):not(:first-child) { border-left: 2px solid var(--border); }
.roles-matrix input[type="checkbox"]:disabled { opacity: 0.55; }

/* Bandeau d'etape en cours (fiche session) : l'action a faire, mise en avant */
.stage-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #EAF1FC; border: 1px solid #C9DCF5; border-radius: 10px;
  padding: 12px 18px; margin-bottom: 18px; font-size: 14px;
}
.stage-banner-label { color: var(--navy); }

/* Centre d'alertes + activite recente (tableau de bord) */
.alert-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; }
.alert-item {
  display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 14px; font-size: 13px; cursor: pointer;
}
.alert-item:hover { background: #FAFBFD; }
.alert-item .alert-item-main { flex: 1; }
.alert-item .alert-item-days { font-size: 12px; color: var(--text-muted); }
.historique-list { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.historique-item { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.historique-item .h-date { color: var(--text-muted); white-space: nowrap; }
.historique-item .h-auteur { color: var(--navy); font-weight: 600; white-space: nowrap; }

/* ----------------------------------------------- Authentification (2026-08-31) */
.login-screen {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  background: var(--navy);
}
.login-box {
  background: var(--card); border-radius: 12px; padding: 32px 36px; width: 340px;
  box-shadow: 0 12px 32px rgba(0,0,0,.25); text-align: center;
}
.login-logo { width: 64px; height: 64px; border-radius: 50%; margin-bottom: 6px; }
.login-box h2 { margin: 4px 0 2px; color: var(--navy); }
.login-box .field { text-align: left; }
.current-user-display { color: white; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }