:root {
  /* Palette officielle UCLouvain (charte graphique, symbole) */
  --uc-cyan: #5db3e6;
  --uc-blue-gray: #9cb7d4;
  --uc-navy: #00214e;
  --uc-navy-hover: #0a3269;
  --uc-navy-soft: #eef3fb;

  --color-bg: #f3f6fb;
  --color-surface: #ffffff;
  --color-border: #dbe6f2;
  --color-text: #17223a;
  --color-muted: #5c6b85;

  --color-free: #ffffff;
  --color-free-hover: var(--uc-navy-soft);
  --color-available: #22c55e;
  --color-available-hover: #16a34a;
  --color-unavailable: #ef4444;
  --color-unavailable-hover: #dc2626;
  --color-blocked: #e6ebf3;
  --color-blocked-stripe: #d3ddec;
  --color-event: #f59e0b;

  --color-primary: var(--uc-navy);
  --color-primary-hover: var(--uc-navy-hover);
  --radius: 10px;
}

* { box-sizing: border-box; }

html { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
}

/* Toute la place gagnée ci-dessous (header/contrôles/légende/footer réduits)
   va directement à la grille : elle prend tout ce qu'il reste en hauteur
   au lieu d'un pourcentage fixe de l'écran (voir main + #grid-scroll). */
.app-header {
  padding: 6px 20px 5px;
  text-align: center;
  background: linear-gradient(135deg, var(--uc-navy) 0%, #013a7a 100%);
  color: #ffffff;
  border-bottom: 2px solid var(--uc-cyan);
  flex-shrink: 0;
}
.app-header h1 { margin: 0 0 1px; font-size: 1.02rem; letter-spacing: 0.2px; }
.subtitle { margin: 0; color: rgba(255, 255, 255, 0.8); font-size: 0.68rem; }
.app-header.admin { background: linear-gradient(135deg, #3a0a0a 0%, var(--uc-navy) 100%); display: flex; align-items: center; gap: 10px; text-align: left; }
.app-header-titles { flex: 1; min-width: 0; }
.menu-toggle-btn { flex-shrink: 0; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; font-size: 1.1rem; line-height: 1; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.menu-toggle-btn:hover { background: rgba(255, 255, 255, 0.22); }

.nav-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 40; }
.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 240px;
  max-width: 80vw;
  background: #fff;
  z-index: 41;
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25);
  overflow-y: auto;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  text-align: left;
  font-size: 0.9rem;
  padding: 10px 16px;
  cursor: pointer;
  color: var(--color-text);
}
.nav-item:hover { background: var(--uc-navy-soft, #eef2fb); }
.nav-item.active { background: var(--uc-navy-soft, #eef2fb); font-weight: 600; border-left: 3px solid var(--uc-navy); }
.nav-item-link { text-decoration: none; border-top: 1px solid var(--color-border, #e5e7eb); margin-top: 4px; padding-top: 12px; }
.nav-icon { font-size: 1.05rem; }

/* Panneau "Mes cours" (choix des cours LSM/ESPO FUCaM Mons) */
.courses-panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 20;
  width: min(480px, 92vw);
  max-height: 70vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 14px;
  margin-top: 6px;
}
.courses-panel .hint { padding: 0; margin: 4px 0; }
.courses-filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.courses-filters select { flex: 1; min-width: 110px; padding: 6px 8px; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.82rem; font-family: inherit; }
#courses-search { width: 100%; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.9rem; font-family: inherit; margin: 6px 0; box-sizing: border-box; }
.courses-list, .courses-checkbox-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; margin: 8px 0; }
.course-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: var(--radius); font-size: 0.85rem; cursor: pointer; }
.course-item:hover { background: var(--uc-navy-soft, #eef2fb); }
.course-item input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.course-schedule { color: var(--color-muted); font-size: 0.78rem; }
.courses-panel-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

.view { display: none; }
.view.active { display: block; }

/* Connexion (petit widget en haut à droite, le calendrier reste visible sans) */
.session-box {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.login-inline-form { display: flex; gap: 6px; align-items: center; }
.login-inline-form input {
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-family: inherit;
  width: 150px;
  max-width: 40vw;
}
.login-error {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  color: #b42323;
  font-size: 0.78rem;
  background: var(--color-surface);
  padding: 2px 8px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 33, 78, 0.08);
  white-space: nowrap;
}
.session-connected { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.greeting { font-size: 0.9rem; }
.member-controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; }

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: end;
  padding: 5px 20px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 6px rgba(0, 33, 78, 0.04);
  flex-shrink: 0;
}
.control-group { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.control-group label { color: var(--color-muted); }
.control-group input[type="text"],
.control-group input[type="date"],
.control-group input[type="time"],
.control-group input[type="password"],
.control-group input[type="datetime-local"],
.control-group select {
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--color-text);
}
.control-group input:focus,
.control-group select:focus {
  outline: 2px solid var(--uc-cyan);
  outline-offset: 1px;
  border-color: var(--uc-cyan);
}
.checkbox-group { flex-direction: row; align-items: center; gap: 6px; }
.checkbox-list { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px 0; }
/* .courses-checkbox-list est aussi .checkbox-list (même poids CSS) : sans
   cette règle plus spécifique, le "flex-wrap: wrap" ci-dessus l'emporte sur
   le "flex-direction: column" voulu et casse le scroll vertical (les cours
   s'étalent en colonnes au lieu de défiler dans la boîte). */
.checkbox-list.courses-checkbox-list { flex-wrap: nowrap; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }

.meeting-list { display: flex; flex-direction: column; gap: 6px; max-height: none; overflow-y: visible; }
.meeting-item { display: block; padding: 10px 12px; }
.meeting-header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.attendance-table { display: flex; flex-direction: column; gap: 4px; }
.attendance-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 3px 0; border-top: 1px solid var(--color-border, #e5e7eb); }
.attendance-name { min-width: 140px; font-size: 0.85rem; }
.proxy-select { font-size: 0.8rem; padding: 2px 4px; }

.agenda-section { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--color-border, #e5e7eb); }
.agenda-list { display: flex; flex-direction: column; gap: 3px; margin: 4px 0; }
.agenda-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.85rem; }
.agenda-item span { flex: 1; min-width: 140px; }
.agenda-item-done span { text-decoration: line-through; color: var(--color-muted, #6b7280); }
.agenda-add-form { display: flex; gap: 6px; margin-top: 4px; }
.agenda-add-form input { flex: 1; min-width: 140px; }

.import-preview-list { display: flex; flex-direction: column; gap: 4px; }
.import-preview-row { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; border-top: 1px solid var(--color-border, #e5e7eb); }
.import-row-unchecked { opacity: 0.45; }

.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.dashboard-tile { background: var(--uc-navy-soft, #eef2fb); border-radius: var(--radius, 8px); padding: 10px 12px; }
.dashboard-tile .dashboard-value { font-size: 1.5rem; font-weight: 700; display: block; }
.dashboard-tile .dashboard-label { font-size: 0.78rem; color: var(--color-muted); }
.dashboard-tile ul { margin: 4px 0 0; padding-left: 16px; font-size: 0.78rem; }
.task-status-btn, .task-priority-select { font-size: 0.75rem; }
.checkbox-group label,
label.checkbox-group { flex-direction: row; display: flex; align-items: center; gap: 6px; color: var(--color-text); font-size: 0.85rem; }
.actions { flex-direction: row; gap: 8px; margin-left: auto; }

.mode-group { align-items: flex-start; }
.mode-label { color: var(--color-muted); }
.mode-toggle { display: flex; gap: 6px; }
.mode-btn {
  padding: 6px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}
.mode-btn.active { border-color: var(--uc-navy); background: var(--uc-navy-soft); }
#mode-available.active,
#fill-mode-available.active { border-color: var(--color-available); background: #ecfdf3; color: #15803d; }
#mode-unavailable.active,
#fill-mode-unavailable.active { border-color: var(--color-unavailable); background: #fef2f2; color: #b42323; }

.btn {
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
}
.btn-sm { padding: 5px 10px; font-size: 0.78rem; }
.btn-primary { background: var(--color-primary); color: white; }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-ghost { background: transparent; border-color: var(--uc-blue-gray); color: var(--uc-navy); }
.btn-ghost:hover { background: var(--uc-navy-soft); }

.legend {
  display: flex;
  gap: 12px;
  padding: 3px 20px;
  font-size: 0.68rem;
  color: var(--color-muted);
  flex-wrap: wrap;
  flex-shrink: 0;
}
.legend-item { display: flex; align-items: center; gap: 5px; }
.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid var(--color-border); }
.swatch.free { background: var(--color-free); }
.swatch.available { background: var(--color-available); border-color: var(--color-available); }
.swatch.unavailable { background: var(--color-unavailable); border-color: var(--color-unavailable); }
.swatch.blocked {
  background: repeating-linear-gradient(45deg, var(--color-blocked), var(--color-blocked) 4px, var(--color-blocked-stripe) 4px, var(--color-blocked-stripe) 8px);
}
.swatch.event { background: #fff7ed; border-color: var(--color-event); border-width: 2px; }
.swatch.event.proposal { border-style: dashed; }

.tasks-tab-panel { padding: 16px 20px; }
.roles-tab-panel { padding: 16px 20px; }
.roles-tab-panel .control-group { margin-bottom: 10px; }
.roles-bestslot-layout { display: flex; flex-direction: column; gap: 16px; }
.roles-bestslot-form { flex: 0 0 auto; }
.roles-bestslot-result { flex: 1 1 260px; min-width: 220px; }
@media (min-width: 900px) {
  .roles-bestslot-layout { flex-direction: row; align-items: flex-start; }
  .roles-bestslot-form { flex: 0 0 420px; }
}
.tasks-tab-panel h2 { margin: 0 0 8px; font-size: 1.1rem; }
.tasks-tab-panel h3 { margin: 10px 0 4px; font-size: 0.9rem; }
.member-dashboard-content .item-list { gap: 3px; max-height: none; }
.member-dashboard-content .item-list li { font-size: 0.78rem; padding-bottom: 3px; }

.grid-scroll {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 66vh;
  min-height: 320px;
  padding: 0 20px 10px;
  -webkit-overflow-scrolling: touch;
}

/* Page publique (index.html) uniquement : la grille remplit tout l'espace
   restant sous le header/contrôles/légende au lieu d'un plafond fixe en vh,
   pour minimiser le scroll vertical sur un écran d'ordi normal. On ne touche
   pas aux grilles secondaires de l'admin (#fill-grid / #heatmap-grid), qui
   gardent le plafond à 66vh ci-dessus. */
main.main-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#grid-scroll {
  flex: 1 1 auto;
  min-height: 260px;
  max-height: none;
}

/* Écran large : la grille est plafonnée en largeur (1/2 semaine, voir
   applyViewWidth côté JS) — l'espace libéré à droite sert de colonne fixe
   pour le "Marquage rapide" au lieu de rester vide. Le bouton repliable ne
   sert alors plus (le panneau est toujours visible ici), donc on le masque
   et on force l'affichage du panneau même s'il a la classe .hidden. */
@media (min-width: 900px) {
  main.main-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }
  /* Colonne à gauche, calendrier à droite — l'ordre visuel est piloté ici
     (via `order`) plutôt qu'en réordonnant le HTML, pour rester simple si on
     veut la remettre à droite un jour. */
  #grid-scroll { flex: 0 1 auto; order: 2; }
  .grid-area { flex: 0 1 auto; order: 2; }
  .bulk-mark-section {
    flex: 1 1 260px;
    max-width: 340px;
    position: sticky;
    top: 10px;
    order: 1;
  }
}

.poll-slot-grid-scroll {
  max-height: 40vh;
  min-height: 220px;
  margin: 6px 0;
}

.grid {
  display: grid;
  user-select: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  width: max-content;
  box-shadow: 0 4px 16px rgba(0, 33, 78, 0.06);
}

.cell {
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  line-height: 1;
  padding: 0 3px;
  text-align: center;
  overflow: hidden;
}

.cell.month-band {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--uc-navy);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.3px;
  border-right-color: rgba(255, 255, 255, 0.15);
  border-bottom: none;
}

.cell.corner, .cell.day-header, .cell.time-label, .cell.events-band {
  position: sticky;
  font-weight: 600;
  z-index: 2;
}
.cell.corner {
  top: 0;
  left: 0;
  z-index: 5;
  background: var(--uc-navy);
}
.cell.day-header {
  top: 20px;
  z-index: 4;
  flex-direction: column;
  gap: 1px;
  line-height: 1.05;
  background: var(--color-surface);
  color: var(--color-text);
}
.cell.day-header .weekday {
  font-size: 0.56rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.cell.day-header .day-number {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--uc-navy);
}
.cell.day-header.weekend { background: var(--uc-navy-soft); }
.cell.day-header.today {
  box-shadow: inset 0 -3px 0 var(--uc-cyan);
  background: #e7f4fd;
}
.cell.day-header.today .day-number { color: var(--uc-cyan); }

.cell.events-band {
  top: 58px;
  background: #fffaf0;
  color: #92400e;
  font-weight: 600;
  font-size: 0.56rem;
  white-space: nowrap;
}
.cell.events-band.has-events { border-bottom: 2px solid var(--color-event); }
/* Événement "proposition" ou "à confirmer" : jamais confondu avec un
   événement confirmé — bordure en tirets au lieu d'un trait plein. */
.cell.events-band.has-uncertain-event { border-bottom: 2px dashed var(--color-event); opacity: 0.85; }
.cell.slot.has-event.has-uncertain-event { box-shadow: inset 0 0 0 2px var(--color-event); background-image: repeating-linear-gradient(135deg, transparent, transparent 4px, rgba(245, 158, 11, 0.25) 4px, rgba(245, 158, 11, 0.25) 8px); }

.cell.slot.avail-requested { box-shadow: inset 0 0 0 2px #f59e0b; }
.cell.slot.polling-selected { background: rgba(245, 158, 11, 0.28); box-shadow: inset 0 0 0 2px #f59e0b; }
.cell.slot.polling-selected:hover { background: rgba(245, 158, 11, 0.4); }

/* Colonnes masquables (marquage rapide / calendrier / tâches) — pour se
   concentrer sur une seule à la fois. Classe séparée de ".hidden" (qui gère
   déjà la connexion/déconnexion) pour ne jamais entrer en conflit avec elle. */
.column-hidden { display: none !important; }

.avail-request-banner { display: flex; flex-direction: column; gap: 6px; background: #fff7e6; border: 1px solid #f59e0b; border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.avail-request-item { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.avail-request-item.done { opacity: 0.6; }

.task-board { display: flex; gap: 12px; overflow-x: auto; margin-top: 10px; padding-bottom: 4px; }
.task-board-column { flex: 0 0 220px; background: #f8f9fb; border-radius: 8px; padding: 8px; }
.task-board-column h4 { margin: 0 0 8px; font-size: 0.9rem; }
.task-board-card { background: #fff; border-radius: 6px; padding: 6px 8px; margin-bottom: 6px; font-size: 0.85rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.task-board-card.mine { border-left: 3px solid var(--uc-navy, #1d3a8f); background: #eef2fb; }

.cell.time-label {
  left: 0;
  z-index: 3;
  background: var(--color-surface);
  color: var(--color-muted);
  border-right: 1px solid var(--color-border);
  font-size: 0.56rem;
  font-weight: 400;
  opacity: 0.75;
}
.cell.time-label.hour-mark {
  font-size: 0.64rem;
  font-weight: 700;
  opacity: 1;
  color: var(--uc-navy);
}

/* Repère visuel plus marqué à chaque heure pile, pour ne pas se perdre
   avec des créneaux de 15 minutes. */
.cell.time-label.hour-mark,
.cell.slot.hour-mark {
  border-top: 2px solid var(--uc-blue-gray);
}

.cell.slot { cursor: pointer; background: var(--color-free); transition: background 0.08s ease; }
.cell.slot:hover { background: var(--color-free-hover); }
.cell.slot.mark-available { background: var(--color-available); }
.cell.slot.mark-available:hover { background: var(--color-available-hover); }
.cell.slot.mark-unavailable { background: var(--color-unavailable); }
.cell.slot.mark-unavailable:hover { background: var(--color-unavailable-hover); }
.cell.slot.blocked {
  cursor: pointer;
  background: repeating-linear-gradient(45deg, var(--color-blocked), var(--color-blocked) 4px, var(--color-blocked-stripe) 4px, var(--color-blocked-stripe) 8px);
  color: var(--color-muted);
}
/* Un créneau bloqué (cours) qu'on marque quand même dispo/pas dispo : les
   hachures du cours restent visibles en dessous, la couleur vient en anneau
   par-dessus plutôt que de remplacer tout le fond (superposition voulue). */
.cell.slot.blocked.mark-available { box-shadow: inset 0 0 0 3px var(--color-available); }
.cell.slot.blocked.mark-unavailable { box-shadow: inset 0 0 0 3px var(--color-unavailable); }
.cell.slot.has-event { box-shadow: inset 0 0 0 2px var(--color-event); }
.cell.slot.has-unavailable { box-shadow: inset 0 -4px 0 var(--color-unavailable); }
.cell.slot.has-event.has-unavailable { box-shadow: inset 0 0 0 2px var(--color-event), inset 0 -4px 0 var(--color-unavailable); }
/* Superposition "cours" (admin, vue Disponibilité) : ne remplace jamais le
   fond vert des dispos membres, juste un liseré violet par-dessus. */
.cell.slot.student-load-hit { box-shadow: inset 0 0 0 2px #7c3aed; }
.cell.slot.has-event.student-load-hit { box-shadow: inset 0 0 0 2px var(--color-event), inset 0 0 0 4px #7c3aed; }
/* Superposition "cours" (membre, sa propre grille) : identifie d'un coup
   d'œil quel cours a généré un créneau "pas dispo" via "Mes cours". */
.cell.slot.course-slot { box-shadow: inset 0 0 0 2px #7c3aed; }
.cell.slot.has-event.course-slot { box-shadow: inset 0 0 0 2px var(--color-event), inset 0 0 0 4px #7c3aed; }

.course-session-subpicker {
  margin: 2px 0 8px 28px;
  padding: 8px 10px;
  border-left: 3px solid #7c3aed;
  background: var(--uc-navy-soft, #f5f3ff);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.course-session-subpicker .hint { margin: 0 0 6px; font-size: 0.78rem; }
.course-session-item { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; padding: 3px 0; cursor: pointer; }

.bulk-mark-section { padding: 8px 20px; }
.bulk-mark-panel {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bulk-mark-panel .control-group { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; }

.quick-courses-sep { border: none; border-top: 1px solid var(--color-border, #e5e7eb); margin: 4px 0; }
.quick-program-courses summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.quick-program-courses .courses-list { max-height: 260px; }

.polling-slot-quickselect {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  background: #fffdf7;
}
.polling-slot-quickselect summary {
  cursor: pointer;
  font-weight: 600;
}
.polling-slot-quickselect .control-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.hidden { display: none !important; }

.status-banner {
  text-align: center;
  padding: 10px 20px;
  font-size: 0.85rem;
  font-weight: 600;
}
.status-banner.open { background: #e9f9ef; color: #15803d; }
.status-banner.closed { background: #fdeeee; color: #b42323; }

.save-indicator { justify-content: center; }
.save-status { font-size: 0.8rem; min-height: 1.2em; }
.save-status.saving { color: var(--color-muted); }
.save-status.saved { color: #16a34a; font-weight: 600; }
.save-status.error { color: #b42323; font-weight: 600; }

.empty-state {
  text-align: center;
  color: var(--color-muted);
  padding: 40px 20px;
  font-size: 0.95rem;
}

.hint { color: var(--color-muted); font-size: 0.85rem; margin-top: 0; padding: 0 20px; }

/* Page admin */
.admin-form-section { flex-direction: column; align-items: stretch; }
.admin-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: end;
  width: 100%;
}

.admin-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  padding: 16px 20px;
}
.full-width { grid-column: 1 / -1; }
.admin-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.admin-panel h2 { margin: 0 0 10px; font-size: 1rem; color: var(--uc-navy); }
.inline-form { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.inline-form input { padding: 6px 8px; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.82rem; font-family: inherit; flex: 1; min-width: 90px; }
.event-form { align-items: center; }
.item-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.item-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.82rem; border-bottom: 1px solid var(--color-border); padding-bottom: 6px; }
.item-list code { background: var(--uc-navy-soft); color: var(--uc-navy); padding: 1px 5px; border-radius: 4px; font-size: 0.75rem; }
.item-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.item-list-actions { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.item-list li.editing { background: var(--uc-navy-soft); border-radius: var(--radius); padding: 6px; border-bottom: none; }
.member-edit-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.member-edit-fields input[type="text"] { padding: 4px 8px; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.8rem; font-family: inherit; width: 110px; }
/* Le bloc "Programme(s) suivi(s)" (liste à cocher) doit toujours passer à la
   ligne dans member-edit-fields (flex-wrap), jamais se retrouver coincé à
   côté des petits champs texte/select. */
.member-edit-fields .control-group { flex-basis: 100%; margin-top: 4px; }
.checkbox-list.member-programs-checkboxes { max-height: 220px; }
.member-programs-badge { color: var(--color-muted); font-size: 0.75rem; }
.admin-badge {
  background: var(--uc-navy);
  color: #fff;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.stats-section { padding: 12px 20px; }
.response-summary { font-size: 0.9rem; margin: 0 0 8px; }
.response-summary strong { color: var(--uc-navy); font-size: 1.1rem; }
.ranking { font-size: 0.85rem; }
.ranking ol { padding-left: 20px; }
.ranking li { margin-bottom: 4px; }
.ranking strong { color: var(--uc-navy); }

.app-footer {
  padding: 3px 20px 4px;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.6rem;
  line-height: 1.25;
  flex-shrink: 0;
}
.app-footer code {
  background: var(--uc-navy-soft);
  color: var(--uc-navy);
  padding: 1px 5px;
  border-radius: 4px;
}

@media (max-width: 640px) {
  .controls { flex-direction: column; align-items: stretch; }
  .actions { margin-left: 0; flex-wrap: wrap; }
  .admin-columns { grid-template-columns: 1fr; }
}

/* ---- Sondages ---- */
#poll-list.item-list { max-height: none; }
#poll-list .poll-item { flex-direction: column; align-items: stretch; gap: 6px; }
.poll-item-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.poll-results { margin-top: 4px; }
.poll-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 0.8rem; }
.poll-bar-label { flex: 0 0 110px; text-align: right; color: var(--color-text); }
.poll-bar-track { flex: 1 1 auto; background: var(--uc-navy-soft); border-radius: 6px; height: 14px; overflow: hidden; }
.poll-bar-fill { background: var(--uc-navy, #1d3a8f); height: 100%; border-radius: 6px; min-width: 2px; }
.poll-bar-count { flex: 0 0 24px; text-align: left; color: var(--color-text-muted, #666); font-size: 0.75rem; }
.poll-text-answers, .poll-detail-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 0.8rem; }
.poll-text-answers li, .poll-detail-list li { border-bottom: 1px dashed var(--color-border); padding-bottom: 3px; }

/* ---- Sous-groupe de .controls masqué hors de l'onglet Calendrier ---- */
.calendar-only-controls { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: end; }
.calendar-only-controls.hidden { display: none; }

/* ---- Onglets page publique (Calendrier / Ordre du jour) ---- */
.public-tabs { display: flex; gap: 6px; padding: 10px 20px 0; }
.public-tab-btn {
  border: 1px solid var(--color-border);
  background: var(--color-surface, #fff);
  color: var(--color-text);
  padding: 7px 14px;
  border-radius: var(--radius) var(--radius) 0 0;
  cursor: pointer;
  font-size: 0.85rem;
}
.public-tab-btn.active { background: var(--uc-navy-soft, #eef2fb); font-weight: 600; border-bottom-color: transparent; }

/* ---- Onglet Ordre du jour ---- */
.agenda-tab-panel { padding: 16px 20px; }
/* La liste ODJ peut avoir beaucoup de points (points + sous-points) : pas de
   hauteur limitée avec défilement interne comme les autres .item-list —
   elle prend toute la place naturellement, c'est la page qui défile. */
.agenda-item-list { max-height: none; gap: 2px; }
.agenda-item-list li { cursor: pointer; padding: 4px 6px; gap: 6px; }
.agenda-item-list li:hover { background: var(--uc-navy-soft, #eef2fb); border-radius: var(--radius); }
.agenda-item-list li.agenda-subitem { margin-left: 24px; font-size: 0.85em; }
.agenda-proposal-section { margin-top: 24px; }

/* ---- Modale d'un point d'ODJ ---- */
.agenda-modal-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 60; padding: 16px;
}
.agenda-modal {
  background: var(--color-surface, #fff);
  border-radius: var(--radius);
  padding: 20px;
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
}
.agenda-modal-close { position: absolute; top: 12px; right: 12px; }
.agenda-modal-text { font-size: 0.95rem; margin: 8px 0 16px; }
#agenda-modal-comments.item-list { max-height: 260px; }

/* ---- Mon profil (formulaire guidé) ---- */
.profile-modal { max-width: 620px; display: flex; flex-direction: column; }
.profile-body { display: flex; flex-direction: column; gap: 14px; margin: 8px 0; }
.profile-section { border-top: 1px solid var(--color-border, #e5e7eb); padding-top: 10px; }
.profile-section h4 { margin: 0 0 6px; font-size: 0.98rem; }
.profile-section > summary { cursor: pointer; font-weight: 600; padding: 2px 0; }
.profile-section details > summary { cursor: pointer; font-size: 0.85rem; color: var(--uc-navy, #1f3a68); margin-bottom: 6px; }
.profile-select, .profile-search {
  width: 100%; padding: 9px 10px; margin: 4px 0; box-sizing: border-box;
  border: 1px solid var(--color-border, #d1d5db); border-radius: var(--radius, 8px);
  font-size: 0.92rem; font-family: inherit; background: #fff;
}
.profile-row { display: grid; grid-template-columns: 1fr minmax(0, 1.4fr); gap: 8px; align-items: center; margin: 4px 0; }
.profile-row .btn { justify-self: end; }
.profile-row-label { font-size: 0.88rem; }
.profile-check { display: flex; gap: 8px; align-items: flex-start; padding: 5px 2px; font-size: 0.88rem; cursor: pointer; }
.profile-check input { margin-top: 3px; flex-shrink: 0; }
.profile-check small { color: #6b7280; }
.profile-warning { background: #fff7ed; border-left: 3px solid var(--color-event, #f59e0b); padding: 8px 10px; border-radius: 4px; }
.profile-footer { position: sticky; bottom: -20px; background: var(--color-surface, #fff); padding: 10px 0 20px; margin-bottom: -20px; border-top: 1px solid var(--color-border, #e5e7eb); }
.profile-footer-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.profile-footer .hint { margin: 6px 0 0; padding: 0; }
.profile-modal .hint { padding-left: 0; padding-right: 0; }
.courses-summary { padding: 4px 0; }
.courses-summary-head { display: flex; justify-content: space-between; align-items: center; }
@media (max-width: 640px) {
  #profile-modal-overlay { padding: 0; }
  .profile-modal { max-width: none; width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .profile-row { grid-template-columns: 1fr; gap: 2px; }
  .profile-row .btn { justify-self: start; }
}

/* ---------- Trouver une date ---------- */
.fd-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: end; }
.fd-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; }
#fd-list { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.fd-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.fd-card-head strong { font-size: 1.05rem; }
.fd-card-head .hint { display: block; }
.fd-status { margin-top: 4px; font-weight: 600; }
.fd-bar { height: 8px; background: var(--color-blocked); border-radius: 4px; overflow: hidden; margin: 6px 0; }
.fd-bar span { display: block; height: 100%; background: var(--color-available); }
.fd-slots h4 { margin: 0 0 4px; }
.fd-slot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--color-border); margin-top: 6px; flex-wrap: wrap; }
label.fd-slot { justify-content: flex-start; cursor: pointer; }
.fd-slot.fd-best { background: #e8f8ee; border-color: var(--color-available); }
.fd-counts { color: var(--color-muted); font-size: 0.9rem; white-space: nowrap; }
.profile-password { margin-top: 10px; font-size: 0.9rem; }
.profile-password summary { cursor: pointer; color: var(--color-muted); }
.profile-password form { margin-top: 8px; }

/* Créneaux proposés au sondage, dessinés par-dessus le calendrier perso */
.cell.slot.poll-slot { position: relative; overflow: visible; }
.cell.slot.poll-slot::after {
  content: ""; position: absolute; inset: 0 1px; pointer-events: none; z-index: 2;
  border-left: 2px dashed #2563eb; border-right: 2px dashed #2563eb;
}
.cell.slot.poll-slot-first::after { border-top: 2px dashed #2563eb; }
.cell.slot.poll-slot-last::after { border-bottom: 2px dashed #2563eb; }
.cell.slot.poll-slot-first::before {
  content: attr(data-poll-n); position: absolute; top: -1px; left: 2px; z-index: 3; pointer-events: none;
  background: #2563eb; color: #fff; font-size: 0.6rem; font-weight: 700; line-height: 1; padding: 1px 3px; border-radius: 3px;
}
.poll-date-option { align-items: center; gap: 6px; flex-wrap: wrap; }
.poll-num { display: inline-block; min-width: 1.4em; text-align: center; background: #2563eb; color: #fff; border-radius: 4px; font-size: 0.75rem; font-weight: 700; padding: 1px 4px; margin-right: 4px; }
.poll-me { font-size: 0.8rem; color: var(--color-muted); }
.poll-me-yes { color: #15803d; }
.poll-me-no { color: #b42323; }

/* Tactile : mode coloriage — le doigt colorie les cases au lieu de faire
   défiler ; on se déplace via la colonne des heures, les dates ou les flèches. */
.grid-area { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; min-width: 0; }
.touch-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 20px; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--color-bg); box-shadow: 0 2px 4px rgba(0, 33, 78, 0.08); }
.touch-tools.hidden { display: none; }
.touch-mode-btn { border: 2px solid var(--color-border); background: var(--color-surface); }
.touch-mode-btn.active { border-color: var(--color-primary); background: var(--uc-navy-soft); font-weight: 600; }
.touch-hint { flex: 1 1 200px; font-size: 0.75rem; color: var(--color-muted); }
.touch-arrows { display: flex; gap: 4px; }
.touch-arrow { min-width: 40px; min-height: 36px; font-size: 1rem; }
.grid-scroll.touch-paint .cell.slot { touch-action: none; }
.grid-scroll .cell.time-label, .grid-scroll .cell.day-header, .grid-scroll .cell.month-band { touch-action: pan-x pan-y; }
/* Petit écran tactile : la grille tient dans l'écran et défile à l'intérieur,
   pour garder les dates et les heures visibles pendant qu'on colorie. */
@media (max-width: 899px) and (pointer: coarse) {
  .touch-tools { padding: 4px 12px; gap: 4px 8px; }
  .touch-hint { flex-basis: 100%; order: 3; }
}
/* Barre "Je marque : Dispo / Pas dispo" collée au-dessus du calendrier. */
.paint-modes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.touch-tools .touch-only.hidden { display: none; }
/* Téléphone portrait : semaine complète dans la largeur, en-têtes compacts. */
body.phone-view .grid-scroll { padding: 0 0 8px; }
body.phone-view .view-range-group { display: none; }
body.phone-view .cell.day-header .weekday { font-size: 0; }
body.phone-view .cell.day-header .weekday::after { content: attr(data-short); font-size: 0.55rem; }
body.phone-view .cell.day-header .day-number { font-size: 0.8rem; }
body.phone-view .cell.time-label { font-size: 0.5rem; padding: 0 1px; }
body.phone-view .cell.time-label.hour-mark { font-size: 0.56rem; }
body.phone-view .cell.month-band { font-size: 0.62rem; }
body.phone-view .cell { padding: 0 1px; }
.goto-search-btn { border: 2px solid #f59e0b; background: #fff7e8; color: #8a4b00; font-weight: 600; }
/* Ligne grille + curseur vertical (téléphone). */
.grid-row { display: flex; align-items: stretch; min-height: 0; flex: 1 1 auto; min-width: 0; }
.grid-row > .grid-scroll { flex: 1 1 auto; min-width: 0; }
body.phone-view #grid-scroll { max-height: none; }
/* Marge libre à droite de la grille : on y glisse le doigt pour faire défiler la page. */
body.phone-view .grid-row { background: var(--uc-navy-soft); border-radius: 0 8px 8px 0; }
body.phone-view .grid-row > .grid-scroll { flex: 0 0 auto; }
body.phone-view .grid-row::after { content: "⇕"; position: sticky; top: 45vh; align-self: flex-start; flex: 1 1 auto; min-width: 20px; text-align: center; color: var(--uc-blue-gray); font-size: 1rem; pointer-events: none; }
.profile-display { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
/* Ligne de dates collée en haut (téléphone), quand la vraie est sortie de l'écran. */
.date-strip { flex-basis: 100%; order: 10; overflow: hidden; position: relative; margin: 2px -12px -4px; background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 2px solid var(--uc-navy); }
.date-strip.hidden { display: none; }
.date-strip-inner { display: grid; will-change: transform; }
.date-strip-inner span { font-size: 0.6rem; text-transform: uppercase; color: var(--color-muted); text-align: center; padding: 3px 0; border-right: 1px solid var(--color-border); white-space: nowrap; }
.date-strip-inner span b { font-size: 0.8rem; color: var(--uc-navy); }
.date-strip-inner span.today b { color: var(--uc-cyan); }

.date-strip::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--tc, 34px); background: var(--uc-navy); z-index: 1; }

/* Sondage de date : créneaux en colonnes par jour, pastilles cliquables. */
.dp { display: flex; flex-direction: column; gap: 10px; }
.dp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.dp-head strong { font-size: 1rem; }
.dp-hint { font-size: 0.8rem; color: var(--color-muted); }
.dp-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.dp-day { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dp-day-title { font-weight: 700; color: var(--uc-navy); font-size: 0.85rem; text-transform: capitalize; }
.dp-chip { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: center; padding: 6px 8px; border: 2px solid var(--color-border); border-radius: 8px; cursor: pointer; background: #fff; user-select: none; }
.dp-chip input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.dp-chip .poll-num { grid-row: 1 / 3; margin: 0; }
.dp-time { font-weight: 600; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.dp-st { font-size: 0.7rem; color: var(--color-muted); }
.dp-chip.st-yes .dp-st { color: #15803d; }
.dp-chip.st-no .dp-st { color: #b42323; }
.dp-chip:hover { border-color: var(--uc-blue-gray); }
.dp-chip.on { border-color: #2563eb; background: #e8f0fe; box-shadow: inset 0 0 0 1px #2563eb; }
.dp-chip.on .dp-time::after { content: "  ✓"; color: #2563eb; }
.dp-chip:focus-within { outline: 3px solid #93b4f5; outline-offset: 1px; }
.dp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.dp-none { font-size: 0.85rem; display: inline-flex; gap: 6px; align-items: center; }
.dp-count { font-size: 0.85rem; font-weight: 600; color: #2563eb; }
/* Pas de marge intérieure horizontale sur la grille publique : sinon on
   voyait un bout de colonne défiler à gauche de la colonne des heures figée,
   et la dernière colonne était coupée à droite. La marge passe à l'extérieur. */
.grid-scroll { padding-left: 0; padding-right: 0; }
.grid-row { padding: 0 20px; }
body.phone-view .grid-row { padding: 0; }

/* ---------- Onglet "🛠️ Outils" (site public) ---------- */
.tools-tab-panel { padding: 10px 20px 30px; display: flex; flex-direction: column; gap: 10px; }
.tools-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.tools-picker .tool-btn { border: 1px solid var(--color-border); border-radius: 999px; padding: 6px 12px; background: var(--color-surface); }
.tools-picker .tool-btn.active { background: var(--uc-navy); color: #fff; border-color: var(--uc-navy); }
.tools-frame { width: 100%; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg); min-height: 200px; }
.tools-frame.hidden { display: none; }

/* ---------- admin.html intégré dans l'onglet Outils ---------- */
body.embedded .app-header.admin,
body.embedded #nav-drawer,
body.embedded #nav-overlay,
body.embedded .nav-item-link { display: none !important; }
body.embedded { background: var(--color-bg); }
body.embedded #access-denied::after { content: " Connecte-toi d'abord sur le site."; }
body.embedded footer, body.embedded .footer { display: none !important; }
body.embedded { min-height: 0 !important; }
.hidden-tools-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 12px; margin: 8px 0; }
.tools-picker .tool-btn.is-hidden { opacity: 0.6; border-style: dashed; }
.role-tools-table { border-collapse: collapse; font-size: 0.85rem; min-width: 560px; }
.role-tools-table th, .role-tools-table td { padding: 5px 10px; border-bottom: 1px solid var(--color-border); text-align: center; }
.role-tools-table td:first-child, .role-tools-table th:first-child { text-align: left; }
.hidden-tools-list { display: block; overflow-x: auto; }

/* Vote en réunion */
.vote-item { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.vote-head { font-size: 1rem; }
.vote-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.vote-who { min-width: 160px; font-weight: 600; font-size: 0.9rem; }
.vote-btn { border: 2px solid var(--color-border); background: #fff; min-height: 40px; padding: 6px 14px; font-weight: 600; }
.vote-btn.vote-pour.on { background: #16a34a; border-color: #16a34a; color: #fff; }
.vote-btn.vote-contre.on { background: #dc2626; border-color: #dc2626; color: #fff; }
.vote-btn.vote-abstention.on { background: #64748b; border-color: #64748b; color: #fff; }
.vote-done { font-size: 0.8rem; color: #15803d; }
.vote-summary { margin: 4px 0 8px; }
.vote-proxy-box { margin-top: 8px; border: 1px dashed var(--color-border); border-radius: 8px; padding: 6px 10px; }
.vote-proxy-box summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.vote-entry-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.poll-plan { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; }
.poll-plan label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.poll-plan .hidden { display: none; }
.fd-switch { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.fd-switch .mode-btn { border: 2px solid var(--color-border); border-radius: 999px; padding: 8px 16px; font-weight: 600; background: var(--color-surface); }
.fd-switch .mode-btn.active { background: var(--uc-navy); color: #fff; border-color: var(--uc-navy); }
section.fd-part.hidden { display: none; }
.tools-picker.hidden { display: none; }
.fd-how { color: var(--color-muted); font-size: 0.8em; }

/* Destinataires d'un sondage */
.audience-picker { flex-basis: 100%; }
.audience-picker .aud-body { margin-top: 6px; padding: 8px; border: 1px solid var(--color-border); border-radius: 8px; }
.audience-picker .aud-quick { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.audience-picker .aud-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px 10px; }
.audience-picker .aud-member { font-weight: normal; }
.fd-form .fd-audience { grid-column: 1 / -1; }
.fd-form .audience-picker > label { flex-direction: row; align-items: center; gap: 8px; }
.audience-picker label.aud-member { display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: 0.9rem; }

/* Case verte venue d'un sondage : badge "évt" (renommable) + bulle au survol */
.cell.slot.poll-evt { position: relative; }
.cell.slot .evt-badge {
  position: absolute; right: 2px; bottom: 1px; z-index: 3; pointer-events: none;
  font-size: 0.6rem; line-height: 1; padding: 1px 3px; border-radius: 3px;
  background: #065f46; color: #fff; max-width: calc(100% - 4px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.evt-label-edit { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; margin-left: 6px; }
.evt-label-edit input { width: 110px; padding: 2px 6px; }
.heatmap-audience { margin-bottom: 8px; }
#heatmap-grid .cell.all-free { outline: 2px solid #f59e0b; outline-offset: -2px; font-weight: 700; }
.event-range-pick { max-width: 100%; font-size: 0.85rem; }
.fd-form .event-range-pick { grid-column: 1 / -1; justify-self: start; }
.fd-roles { color: #7c3aed; font-weight: 600; }
.fd-role-tie { margin: 6px 0; font-size: 0.9rem; }
.fd-rank { display: inline-block; min-width: 2.2em; color: #64748b; font-weight: 700; font-size: 0.85rem; }