:root {
  --app-bg: #f4f6f8;
  --app-surface: #ffffff;
  --app-surface-muted: #f8fafc;
  --app-border: #d8dee6;
  --app-text: #17212b;
  --app-muted: #637083;
  --app-primary: #14786f;
  --app-primary-dark: #0f5f58;
  --app-accent: #c98523;
  --app-danger: #b42318;
  --app-shadow: 0 14px 34px rgba(23, 33, 43, 0.08);
}

html {
  font-size: 14px;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 15px;
  }
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(180deg, #eef3f2 0, rgba(244, 246, 248, 0) 240px),
    var(--app-bg);
  color: var(--app-text);
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

a {
  color: var(--app-primary);
}

a:hover {
  color: var(--app-primary-dark);
}

.app-navbar {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--app-border);
  backdrop-filter: blur(10px);
}

/* ── Lien actif dans la navbar principale ───────── */
.app-navbar .nav-link.nav-active {
  color: var(--app-primary, #14786f) !important;
  font-weight: 600;
  position: relative;
}
.app-navbar .nav-link.nav-active::after {
  content: '';
  position: absolute;
  bottom: -1px;          /* colle au border-bottom de la navbar */
  left: .5rem;
  right: .5rem;
  height: 2px;
  background: var(--app-primary, #14786f);
  border-radius: 2px 2px 0 0;
}

.navbar-brand {
  font-weight: 700;
  color: var(--app-text);
  letter-spacing: 0;
}

.app-navbar .navbar-toggler {
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: #fff;
  color: var(--app-text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

.app-navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem rgba(20, 120, 111, .18);
}

.app-navbar .navbar-toggler-icon {
  width: 1.25rem;
  height: 1.25rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2823, 33, 43, 0.92%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.brand-mark {
  display: inline-grid;
  width: 34px;
  height: 34px;
  margin-right: 0.55rem;
  place-items: center;
  border-radius: 8px;
  background: var(--app-primary);
  color: #fff;
  font-weight: 800;
}

.nav-link {
  border-radius: 8px;
  font-weight: 600;
}

.nav-link:hover,
.nav-link:focus {
  background: #eef6f5;
}

.app-main {
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}

.app-page {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  box-shadow: var(--app-shadow);
}

.app-page-header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 1.35rem;
  border-bottom: 1px solid var(--app-border);
  background: linear-gradient(180deg, #fff 0, var(--app-surface-muted) 100%);
  border-radius: 8px 8px 0 0;
}

.app-page-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 750;
}

.app-page-subtitle {
  margin: 0.3rem 0 0;
  color: var(--app-muted);
}

.app-page-body {
  padding: 1.35rem;
}

.app-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.8rem;
}

.stat-card {
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 8px;
}

.stat-label {
  margin: 0;
  color: var(--app-muted);
  font-size: 0.85rem;
  font-weight: 650;
  text-transform: uppercase;
}

.stat-value {
  margin: 0.35rem 0 0;
  font-size: 1.25rem;
  font-weight: 750;
}

.table {
  margin-bottom: 0;
}

.table thead th {
  color: var(--app-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  background: var(--app-surface-muted);
  border-bottom: 1px solid var(--app-border);
}

.table td,
.table th {
  vertical-align: middle;
}

.table > :not(caption) > * > * {
  padding: 0.85rem 0.9rem;
}

.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
}

.form-control,
.form-select {
  border-color: var(--app-border);
  border-radius: 8px;
}

.form-label {
  font-weight: 650;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 0.22rem rgba(20, 120, 111, 0.16);
}

.btn {
  border-radius: 8px;
  font-weight: 650;
}

.btn-primary {
  background: var(--app-primary);
  border-color: var(--app-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--app-primary-dark);
  border-color: var(--app-primary-dark);
}

.btn-outline-primary {
  color: var(--app-primary);
  border-color: var(--app-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: var(--app-primary);
  border-color: var(--app-primary);
}

.btn-outline-danger {
  color: var(--app-danger);
  border-color: #e6b8b4;
}

.badge-soft {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: #eef6f5;
  color: var(--app-primary-dark);
  font-weight: 700;
}

.badge-warning-soft {
  background: #fff3dd;
  color: #7a4a08;
}

.empty-state {
  padding: 2rem;
  color: var(--app-muted);
  text-align: center;
}

.auth-panel {
  max-width: 480px;
  margin: 2rem auto;
}

.footer {
  padding: 1.2rem 0;
  color: var(--app-muted);
}

@media (max-width: 767px) {
  .app-page-header {
    display: block;
  }

  .app-toolbar {
    justify-content: flex-start;
    margin-top: 1rem;
  }

  .table-actions {
    justify-content: flex-start;
  }
}

/* ===== DASHBOARD ===== */
.dash-greeting {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--app-text);
}
.dash-date {
  font-size: .85rem;
  color: var(--app-muted);
  margin-top: .15rem;
}

/* KPI cards */
.kpi-card {
  background: #fff;
  border-radius: 14px;
  padding: 1.3rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  transition: box-shadow .18s, transform .18s;
  box-shadow: 0 0 0 1px rgba(0,0,0,.055), 0 4px 16px rgba(0,0,0,.07);
}
.kpi-card:hover {
  box-shadow: 0 0 0 1px rgba(0,0,0,.055), 0 10px 28px rgba(0,0,0,.11);
  transform: translateY(-2px);
}
.kpi-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.kpi-body {}
.kpi-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--app-text);
}
.kpi-label {
  font-size: .78rem;
  color: var(--app-muted);
  margin-top: .2rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.kpi-trend {
  font-size: .75rem;
  font-weight: 600;
  margin-top: .3rem;
}
.kpi-trend.up   { color: #198754; }
.kpi-trend.flat { color: var(--app-muted); }

/* Section cards */
.dash-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.055), 0 4px 16px rgba(0,0,0,.07);
}
.dash-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1.25rem;
  border-bottom: 1px solid rgba(0,0,0,.07);
  background: #f8fafc;
}
.dash-card-title {
  font-weight: 700;
  font-size: .9rem;
  color: var(--app-text);
  display: flex;
  align-items: center;
  gap: .45rem;
}
.dash-card-body { padding: 1rem 1.25rem; }

/* Availability bars */
.avail-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem 0;
  border-bottom: 1px solid #f0f0f0;
}
.avail-row:last-child { border-bottom: none; }
.avail-name { flex: 1; font-size: .85rem; font-weight: 500; }
.avail-bar-wrap {
  flex: 0 0 120px;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
}
.avail-bar { height: 100%; border-radius: 4px; background: var(--app-primary); }
.avail-count { font-size: .78rem; color: var(--app-muted); min-width: 42px; text-align: right; }

/* Quick actions */
.quick-card {
  background: #fff;
  border-radius: 14px;
  padding: 1.3rem 1.2rem;
  text-align: center;
  text-decoration: none;
  color: var(--app-text);
  transition: box-shadow .18s, transform .18s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  box-shadow: 0 0 0 1px rgba(0,0,0,.055), 0 2px 8px rgba(0,0,0,.06);
}
.quick-card:hover {
  box-shadow: 0 0 0 1.5px var(--app-primary), 0 8px 24px rgba(0,0,0,.10);
  transform: translateY(-2px);
  color: var(--app-primary);
}
.quick-card i { font-size: 1.8rem; }
.quick-card span { font-size: .82rem; font-weight: 600; }

/* Periode badge */
.badge-matin { background: #fff3cd; color: #856404; }
.badge-midi  { background: #fff0e0; color: #8a4700; }
.badge-soir  { background: #e8e0ff; color: #4a1fb8; }

/* ===== PLANNING GRILLE ===================================================== */

/* ── En-tête de centre ─────────────────────────────────────────────────── */
.planning-centre-block {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  border: 1px solid #e3e8ef;
}
.planning-centre-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, #eaf0f7 0%, #f0f4fa 100%);
  border-bottom: 1px solid #d0dae8;
  padding: 7px 14px;
  gap: 12px;
  flex-wrap: wrap;
}
.planning-centre-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.planning-centre-title {
  margin: 0;
  color: #2c3e56;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.planning-centre-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.planning-stat {
  display: inline-flex;
  align-items: center;
  font-size: .73rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 30px;
}
.planning-stat--dispo  { background: #d1fae5; color: #065f46; }
.planning-stat--full   { background: #fee2e2; color: #991b1b; }
.planning-stat--salles { background: rgba(44,62,86,.1); color: #3d4f63; }

/* collapse btn */
.collapse-centre-btn {
  background: rgba(44,62,86,.07);
  border: 1px solid rgba(44,62,86,.18);
  border-radius: 5px;
  color: #3d4f63;
  padding: 2px 6px;
  font-size: .75rem;
  line-height: 1.4;
  cursor: pointer;
  transition: background .15s;
}
.collapse-centre-btn:hover { background: rgba(44,62,86,.14); }

/* ── Corps (table) ──────────────────────────────────────────────────────── */
.planning-centre-body { background: #fff; }

.planning-table {
  font-size: .8rem;
  margin-bottom: 0;
}

/* ── En-têtes table ─────────────────────────────────────────────────────── */
.planning-thead-days th {
  border-color: rgba(61,79,99,.15) !important;
}
.planning-thead-periods th {
  border-color: #cdd6e0 !important;
}
/* Ligne 1 — jours */
.planning-thead-days {
  background: #e8edf5;
  color: #3d4f63;
}
.planning-th-day {
  font-size: .67rem;
  letter-spacing: .03em;
  font-weight: 600;
  min-width: 70px;
  white-space: nowrap;
}
.planning-th-day--today   { background: #c5e6e2 !important; color: var(--app-primary, #14786f) !important; }
.planning-th-day--weekend { background: #eff0f4 !important; color: #94a3b8 !important; }

/* Ligne 2 — périodes (fond très clair, texte doux) */
.planning-thead-periods   { background: #f5f7fa; }
.planning-th-salle  {
  background: #e8edf5;
  color: #2c3e56;
  min-width: 110px;
  vertical-align: middle;
  border-color: rgba(61,79,99,.15) !important;
}
.planning-th-periode {
  min-width: 75px;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .025em;
  white-space: nowrap;
  color: #5a6a82;
}
.planning-th-periode--today   { background: #e2f2f0 !important; color: var(--app-primary, #14786f) !important; }
.planning-th-periode--weekend { background: #f4f1ec !important; color: #adb5bd !important; }

/* Normalise la casse des labels de période (données en MAJUSCULE en base) */
.periode-label-txt {
  display: inline;
  text-transform: lowercase;
}
.periode-label-txt::first-letter {
  text-transform: uppercase;
}

/* ── Lignes ─────────────────────────────────────────────────────────────── */
.planning-td-salle {
  font-weight: 600;
  font-size: .78rem;
  white-space: nowrap;
  background: #f8f9fa;
  border-right: 2px solid #c0c8d0 !important;
  padding: 5px 10px !important;
}
.planning-cell {
  min-width: 75px;
  padding: 4px 5px !important;
  vertical-align: middle;
}
/* Disponible : vert vif "brillant" */
.planning-cell-free {
  background: #d1fae5;
  box-shadow: inset 0 0 0 1px #6ee7b7;
}
.planning-cell-today-free {
  background: #a7f3d0;
  box-shadow: inset 0 0 0 1.5px #34d399;
}
/* Cellules réservées : espace extra en haut pour le badge télé-radiologie */
.planning-cell-taken        { background: #faf5ff; padding-top: 12px !important; }
.planning-cell-mine         { background: #eff6ff; padding-top: 12px !important; }
.planning-cell-demande      { background: #fffbeb; padding-top: 12px !important; }
.planning-cell-demande-mine { background: #fef3c7; padding-top: 12px !important; }
.planning-cell-blocked      { background: #fff7ed; padding-top: 12px !important; box-shadow: inset 0 0 0 1px #fed7aa; }
.planning-cell-weekend { background: #f4f2ee; opacity: .85; box-shadow: none; }

/* ── Bloc réservation dans la grille ────────────────────────────────────── */
.planning-res-block {
  position: relative;      /* ancre le badge absolu */
  overflow: visible;       /* laisse le badge dépasser */
  display: flex;
  align-items: center;
  gap: 3px;
  width: 100%;
  border-radius: 5px;
  padding: 4px 7px;
  background: #e5e7eb;
  color: #374151;
  border-left: 3px solid #9ca3af;
  font-size: .74rem;
  font-weight: 600;
  min-height: 26px;
  box-sizing: border-box;
}
.planning-res-block--mine {
  background: #bfdbfe;
  color: #1e3a8a;
  border-left-color: #2563eb;
}
.planning-res-block--demande {
  background: #fde68a;
  color: #78350f;
  border-left-color: #f59e0b;
  border-left-style: dashed;
}
.planning-res-block--blocked {
  background: #ffedd5;
  color: #7c2d12;
  border-left-color: #f97316;
}
.planning-blocked-badge {
  flex-shrink: 0;
  margin-right: 3px;
  color: #ea580c;
  font-size: .78rem;
}
/* Médecin réservé mais en congé validé ce jour — conflit */
.planning-res-block--absent {
  background: #fee2e2;
  color: #991b1b;
  border-left-color: #dc2626;
}
.planning-res-block--absent .planning-res-name { text-decoration: line-through; text-decoration-color: rgba(153,27,27,.6); }
.planning-absent-badge {
  position: absolute;
  top: -9px;
  right: 5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #dc2626;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .55rem;
  box-shadow: 0 2px 5px rgba(220,38,38,.5);
  border: 2px solid #fff;
  z-index: 3;
}
.planning-demande-badge {
  position: absolute;
  top: -9px;
  left: 5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f59e0b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .55rem;
  box-shadow: 0 2px 5px rgba(245,158,11,.5);
  border: 2px solid #fff;
  z-index: 3;
}
.planning-res-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ── Badge télé-radiologie coin supérieur gauche (icône statique) ─────────── */
.planning-teletravail-icon,
.tb-teletravail-icon {
  position: absolute;
  top: -9px;
  left: 5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0891b2;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  font-style: normal;      /* pour <i> */
  box-shadow: 0 2px 6px rgba(8,145,178,.45);
  border: 2px solid #fff;
  z-index: 3;
  pointer-events: none;
}

/* ── Bouton bascule présence (cliquable pour les éditeurs) ─────────────── */
/* État Présentiel : icône imbriquée dans le flex, discrète */
.presence-toggle-btn {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0 2px;
  font-size: .75rem;
  cursor: pointer;
  opacity: .45;
  transition: opacity .15s, transform .15s, box-shadow .15s;
  line-height: 1;
  color: inherit;
}
.presence-toggle-btn:hover { opacity: 1; }

/* État Télé-radiologie : devient badge absolu, hors du flux flex */
.presence-toggle-btn.is-teletravail {
  position: absolute;
  top: -9px;
  left: 5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0891b2;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  padding: 0;
  opacity: 1;
  box-shadow: 0 2px 6px rgba(8,145,178,.45);
  border: 2px solid #fff;
  z-index: 3;
}
.presence-toggle-btn.is-teletravail:hover {
  transform: scale(1.2);
  box-shadow: 0 3px 10px rgba(8,145,178,.7);
  opacity: 1;
}

/* ── Bouton poubelle dans la grille ────────────────────────────────────── */
.planning-del-btn {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0 0 0 3px;
  font-size: .72rem;
  color: inherit;
  opacity: .4;
  cursor: pointer;
  transition: opacity .15s, color .15s;
  line-height: 1;
}
.planning-del-btn:hover { opacity: 1; color: #dc3545; }

/* ── Bouton + (créer) ───────────────────────────────────────────────────── */
.planning-add-btn {
  padding: 1px 5px;
  font-size: .82rem;
  opacity: .4;
  transition: opacity .15s;
  color: var(--app-primary, #14786f);
  text-decoration: none;
  display: inline-block;
}
.planning-add-btn:hover { opacity: 1; }

/* ── Légende points ─────────────────────────────────────────────────────── */
.planning-legend-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.planning-legend-dot--mine  { background: #bfdbfe; border: 2px solid #2563eb; }
.planning-legend-dot--other { background: #e5e7eb; border: 2px solid #9ca3af; }

.btn-xs { padding: 1px 6px; font-size: .7rem; line-height: 1.4; }

/* ── Toggle Présence/Télé-radiologie (formulaire de réservation) ────────────── */
.presence-toggle {
  display: flex;
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #dee2e6;
  width: fit-content;
}
.presence-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  cursor: pointer;
  font-weight: 500;
  font-size: .88rem;
  background: #f8f9fa;
  color: #6c757d;
  transition: background .15s, color .15s;
  border: none;
  user-select: none;
}
.presence-option:first-child { border-right: 1px solid #dee2e6; }
.presence-option.active {
  background: var(--app-primary, #14786f);
  color: #fff;
}
.presence-radio { display: none; }

.planning-calendar-page {
  padding: 1.15rem;
}

.planning-calendar-topbar {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

.planning-view-tabs {
  border-bottom-color: var(--app-border);
}

.planning-view-tabs .nav-link {
  color: var(--app-muted);
  border-radius: 8px 8px 0 0;
}

.planning-view-tabs .nav-link.active {
  color: var(--app-primary-dark);
  background: #fff;
  border-color: var(--app-border) var(--app-border) #fff;
}

.planning-calendar-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
  padding: .85rem 1rem;
  background: #fbfcfd;
  border: 1px solid var(--app-border);
  border-radius: 8px;
}

.planning-centre-filter {
  min-width: 240px;
}

.planning-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .75rem;
  align-items: flex-end;
}

.planning-filter-bar--calendar {
  margin-bottom: 0;
}

.planning-filter-field {
  flex: 0 1 220px;
  min-width: 180px;
}

.planning-filter-field--perimetre {
  flex-basis: 240px;
}

.planning-filter-field--centre {
  flex-basis: 280px;
}

.planning-filter-field--salle {
  flex-basis: 210px;
}

.planning-filter-action {
  flex: 0 0 auto;
}

.planning-filter-field .form-label {
  display: block;
  max-width: 100%;
  white-space: nowrap;
}

.planning-filter-field .select2-container {
  width: 100% !important;
  min-width: 0;
}

.planning-filter-field .select2-container--bootstrap-5 .select2-selection--single,
.select2-selection--planning-filter {
  min-height: 31px;
  border-radius: 8px;
  font-size: .875rem;
}

.planning-filter-field .select2-container--bootstrap-5 .select2-selection--single {
  display: flex;
  align-items: center;
  padding: .25rem 2rem .25rem .55rem;
}

.planning-filter-field .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  color: #334155;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planning-filter-field .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
  top: 1px;
  right: .45rem;
  height: 29px;
}

.select2-dropdown--planning-filter {
  border-color: var(--app-border);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
  overflow: hidden;
}

.select2-dropdown--planning-filter .select2-search--dropdown {
  padding: .45rem;
}

.select2-dropdown--planning-filter .select2-search__field {
  min-height: 32px;
  border-color: var(--app-border);
  border-radius: 6px;
  font-size: .875rem;
}

.select2-dropdown--planning-filter .select2-results__option {
  padding: .42rem .65rem;
  font-size: .84rem;
  line-height: 1.25;
}

.select2-dropdown--planning-filter .select2-results__option--highlighted {
  background: rgba(20, 120, 111, .12);
  color: var(--app-primary-dark);
}

.planning-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  align-items: center;
  color: var(--app-muted);
  font-size: .84rem;
  font-weight: 650;
}

.planning-legend-item {
  display: inline-flex;
  gap: .4rem;
  align-items: center;
  white-space: nowrap;
}

.planning-legend-dot {
  width: .75rem;
  height: .75rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}

.planning-legend-dot-current { background: var(--app-primary); }
.planning-legend-dot-other   { background: #64748b; }


.planning-calendar-frame {
  min-height: 680px;
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 8px;
}

#calendar {
  min-width: 860px;
  padding: .85rem;
  transition: opacity .15s ease;
}

#calendar.is-loading {
  opacity: .58;
}

.planning-calendar-frame .fc {
  --fc-border-color: #dde5ed;
  --fc-page-bg-color: #fff;
  --fc-neutral-bg-color: #f0f4ff;
  --fc-today-bg-color: #eff6ff;
  --fc-now-indicator-color: #dc2626;
  color: var(--app-text);
}

.planning-calendar-frame .fc .fc-toolbar.fc-header-toolbar {
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .9rem;
}

.planning-calendar-frame .fc .fc-toolbar-title {
  color: var(--app-text);
  font-size: 1.08rem;
  font-weight: 750;
}

.planning-calendar-frame .fc .fc-button {
  min-height: 2.15rem;
  padding: .35rem .7rem;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
}

.planning-calendar-frame .fc .fc-button-primary {
  color: var(--app-text);
  background: #fff;
  border-color: var(--app-border);
  box-shadow: none;
}

.planning-calendar-frame .fc .fc-button-primary:hover,
.planning-calendar-frame .fc .fc-button-primary:focus {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #bfdbfe;
}

.planning-calendar-frame .fc .fc-button-primary:not(:disabled).fc-button-active,
.planning-calendar-frame .fc .fc-button-primary:not(:disabled):active {
  color: #fff;
  background: #2563eb;
  border-color: #2563eb;
}

.planning-calendar-frame .fc .fc-col-header-cell {
  background: #f8fafc;
}

.planning-calendar-frame .fc .fc-col-header-cell-cushion {
  display: block;
  padding: .7rem .35rem;
  color: var(--app-text);
  font-size: .82rem;
  font-weight: 750;
  text-decoration: none;
  text-transform: capitalize;
}

.planning-calendar-frame .fc .fc-timegrid-slot {
  height: 3.55rem;
}

.planning-calendar-frame .fc .fc-timegrid-slot-label-cushion,
.planning-calendar-frame .fc .fc-timegrid-axis-cushion {
  color: var(--app-muted);
  font-size: .76rem;
  font-weight: 650;
}

.planning-calendar-frame .fc .fc-timegrid-now-indicator-line {
  border-width: 2px 0 0;
}

.planning-calendar-frame .fc .fc-event {
  border: 0;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,.10);
  overflow: hidden;
}

.planning-calendar-frame .fc .fc-event-main {
  color: inherit;
}

/* ── Couleur unique — thème de l'application ────────────────────────────── */
.planning-calendar-frame .fc .planning-calendar-event {
  background: #bfdbfe;
  color: #1e3a8a;
  border-left: 3px solid #2563eb;
}

/* ── Contenu de l'événement ─────────────────────────────────────────────── */
.planning-event-content {
  min-height: 100%;
  padding: .28rem .38rem;
}

.planning-event-head {
  display: flex;
  gap: .28rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  min-width: 0;
}

.planning-event-room {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  font-size: .71rem;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planning-event-period {
  flex: 0 0 auto;
  padding: .05rem .28rem;
  color: #1e3a8a;
  font-size: .59rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  background: rgba(37,99,235,.15);
  border-radius: 999px;
  overflow: hidden;
  max-width: 4.2rem;
  text-overflow: ellipsis;
}
.planning-event-tele {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: rgba(37,99,235,.18);
  border-radius: 50%;
  border: 1px solid rgba(37,99,235,.35);
  font-size: .56rem;
  color: #1e3a8a;
}

.planning-event-doctor {
  min-width: 0;
  margin-top: .15rem;
  overflow: hidden;
  font-size: .71rem;
  font-weight: 600;
  line-height: 1.2;
  opacity: .92;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 991px) {
  .planning-filter-field {
    flex: 1 1 calc(50% - .75rem);
    min-width: 220px;
  }

  .planning-filter-action {
    align-self: flex-end;
  }
}

@media (max-width: 767px) {
  .planning-calendar-page {
    padding: .9rem;
  }

  .planning-calendar-controls {
    display: flex;
  }

  .planning-calendar-legend {
    margin-top: .85rem;
  }

  .planning-centre-filter {
    min-width: 0;
  }

  #calendar {
    min-width: 780px;
  }
}

@media (max-width: 575px) {
  .planning-filter-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .65rem;
  }

  .planning-filter-field,
  .planning-filter-action {
    width: 100%;
    min-width: 0;
  }

  .planning-filter-action .btn {
    width: 100%;
  }

  .planning-filter-field .select2-container--bootstrap-5 .select2-selection--single {
    min-height: 34px;
  }

  .select2-dropdown--planning-filter {
    max-width: calc(100vw - 1.5rem);
  }
}

/* ===== PERMISSION CARDS ===== */
.perm-card {
  border: 1px solid var(--app-border);
  border-radius: .6rem;
  overflow: hidden;
  transition: box-shadow .15s;
}
.perm-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.perm-card-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem 1rem;
  background: var(--app-surface-muted);
  border-bottom: 1px solid var(--app-border);
}
.perm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.perm-card-title {
  font-weight: 600;
  font-size: .9rem;
  color: var(--app-text);
}
.perm-btn {
  font-size: .78rem;
  padding: .25rem .75rem;
  font-weight: 500;
  transition: all .15s;
}

/* ===== PERMISSION MATRIX ===== */
.permission-section {
  margin-bottom: 1.5rem;
}

.permission-section-header {
  margin-bottom: .85rem;
}

.permission-section-header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}

.permission-section-header p {
  margin: .25rem 0 0;
  color: var(--app-muted);
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .9rem;
}

.permission-card {
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  overflow: hidden;
}

.permission-card-header {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: .9rem 1rem;
  background: #f8fafc;
  border-bottom: 1px solid var(--app-border);
}

.permission-card-header h3 {
  margin: 0;
  font-size: .95rem;
  font-weight: 800;
}

.permission-card-header p {
  margin: .25rem 0 0;
  color: var(--app-muted);
  font-size: .78rem;
  line-height: 1.35;
}

.permission-card-code {
  flex: 0 0 auto;
  padding: .18rem .45rem;
  color: var(--app-primary-dark);
  font-size: .68rem;
  font-weight: 800;
  background: #eef6f5;
  border-radius: 999px;
}

.permission-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  padding: .9rem 1rem 1rem;
}

.permission-toggle {
  display: inline-flex;
  gap: .42rem;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: .45rem .55rem;
  color: var(--app-muted);
  font-size: .8rem;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}

.permission-toggle:hover {
  color: var(--app-text);
  border-color: #b8c5d3;
  box-shadow: 0 4px 12px rgba(23, 33, 43, .08);
}

/* Icône ⓘ : indice visuel que le bouton a une explication au survol */
.permission-info { font-size: .72rem; opacity: .45; }
.permission-toggle:hover .permission-info { opacity: .85; }
.btn-check:checked + .permission-toggle .permission-info { opacity: .8; }

.btn-check:checked + .permission-toggle {
  color: #fff;
  border-color: transparent;
  box-shadow: 0 7px 18px rgba(23, 33, 43, .14);
}

.btn-check:checked + .permission-toggle.permission-read {
  background: #2563eb;
}

.btn-check:checked + .permission-toggle.permission-create {
  background: #16835f;
}

.btn-check:checked + .permission-toggle.permission-update {
  background: #b7791f;
}

.btn-check:checked + .permission-toggle.permission-delete {
  background: #b42318;
}

.btn-check:checked + .permission-toggle.permission-default {
  background: var(--app-primary);
}

/* ===== MAP ===== */
.planning-map-page {
  padding: 1.15rem;
}

.planning-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1rem;
}

.planning-map-frame {
  min-height: 620px;
  overflow: hidden;
  border: 1px solid var(--app-border);
  border-radius: 8px;
}

#centresMap {
  width: 100%;
  height: 620px;
}

.planning-map-list {
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 8px;
}

.planning-map-list-title {
  margin: 0 0 .85rem;
  font-size: .95rem;
  font-weight: 800;
}

.planning-map-centres {
  display: grid;
  gap: .65rem;
}

.planning-map-centre {
  display: grid;
  width: 100%;
  gap: .15rem;
  padding: .75rem .8rem;
  text-align: left;
  background: #f8fafc;
  border: 1px solid var(--app-border);
  border-radius: 8px;
}

.planning-map-centre:hover,
.planning-map-centre:focus {
  border-color: var(--app-primary);
  box-shadow: 0 5px 15px rgba(23, 33, 43, .08);
}

.planning-map-centre-name {
  font-weight: 800;
}

.planning-map-centre-meta {
  color: var(--app-muted);
  font-size: .78rem;
}

.planning-map-centre-status {
  justify-self: start;
  margin-top: .25rem;
  padding: .12rem .45rem;
  color: var(--app-primary-dark);
  font-size: .68rem;
  font-weight: 800;
  background: #eef6f5;
  border-radius: 999px;
}

@media (max-width: 991px) {
  .planning-map-layout {
    grid-template-columns: 1fr;
  }

  .planning-map-frame,
  #centresMap {
    min-height: 520px;
    height: 520px;
  }
}

/* ===== CENTRES — MAP TAB ===== */
.centres-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  height: 580px;
  overflow: hidden;
}

.centres-map-frame {
  height: 100%;
  overflow: hidden;
  border-right: 1px solid var(--app-border);
}

#centresMapMain {
  width: 100%;
  height: 100%;
}

.centres-map-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
}

.centres-map-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  font-size: .9rem;
  border-bottom: 1px solid var(--app-border);
  background: var(--app-surface-muted);
}

.centres-map-list {
  flex: 1;
  overflow-y: auto;
}

.centres-map-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  width: 100%;
  gap: .1rem .5rem;
  padding: .7rem 1rem;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #f0f3f7;
  cursor: pointer;
  transition: background .12s;
}

.centres-map-item:hover {
  background: #f0f4ff;
}

.centres-map-item-no-coord {
  opacity: .65;
  cursor: default;
}

.centres-map-item-name {
  grid-column: 1;
  font-size: .87rem;
  font-weight: 700;
  color: var(--app-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.centres-map-item-meta {
  grid-column: 1;
  font-size: .75rem;
  color: var(--app-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.centres-map-item-badge {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  padding: .12rem .45rem;
  color: #1d4ed8;
  font-size: .68rem;
  font-weight: 700;
  background: #eff6ff;
  border-radius: 999px;
  white-space: nowrap;
}

.centres-map-item-coord {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  font-size: .78rem;
  text-align: right;
}

@media (max-width: 991px) {
  .centres-map-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 400px auto;
    height: auto;
  }

  .centres-map-frame {
    border-right: 0;
    border-bottom: 1px solid var(--app-border);
  }

  .centres-map-sidebar {
    max-height: 280px;
  }
}

/* ===== CENTRES — GEOCODING AUTOCOMPLETE ===== */
.geocode-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1050;
  background: #fff;
  border: 1px solid var(--app-border);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(23, 33, 43, .12);
  max-height: 280px;
  overflow-y: auto;
  display: none;
}

.geocode-suggestion-item {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  width: 100%;
  padding: .6rem .85rem;
  font-size: .83rem;
  text-align: left;
  color: var(--app-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid #f0f3f7;
  cursor: pointer;
  transition: background .1s;
}

.geocode-suggestion-item:last-child {
  border-bottom: 0;
}

.geocode-suggestion-item:hover {
  background: #eff6ff;
  color: #1d4ed8;
}

.geocode-suggestion-item span {
  line-height: 1.35;
}

/* ===== CENTRES — MINI MAP PREVIEW ===== */
.centre-mini-map {
  height: 220px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  overflow: hidden;
}

/* ===== LOGO RESPONSIVE ===== */
.app-logo-img {
  display: block;
  max-height: 40px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 576px) {
  .app-logo-img {
    max-height: 32px;
    max-width: 110px;
  }
}

/* ===== THEME CONFIG — PRESETS ===== */
.theme-preset-card {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  background: #fff;
  border: 2px solid var(--app-border);
  border-radius: 10px;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
  transition: border-color .15s, box-shadow .15s;
}

.theme-preset-card:hover {
  border-color: var(--app-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.theme-preset-active {
  border-color: var(--app-primary) !important;
  box-shadow: 0 0 0 3px rgba(20,120,111,.18) !important;
}

.theme-preset-swatch {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.1);
  flex-shrink: 0;
}

.theme-preset-label {
  white-space: nowrap;
}

/* ===== PLANNING — COLLAPSE ===== */
.planning-td-centre {
  min-width: 130px;
}

/* ===== PLANNING — VUE TABLEAU ================================================
   Lignes = Date (rowspan 3) × 3 slots fixes | Colonnes = Centres → Salles
   ============================================================================ */

.tb-wrapper { border-radius: 8px; overflow-x: auto; }

.tb-table {
  font-size: .82rem;
  margin-bottom: 0;
  min-width: 600px;
}

/* ── En-têtes niveau 1 (Date, Période, Centres) ─── */
.tb-th-date {
  background: #e8edf5;
  color: #3d4f63;
  width: 68px;
  min-width: 68px;
  text-align: center;
  font-weight: 600;
  vertical-align: middle;
  border-color: rgba(61,79,99,.15) !important;
}
.tb-th-periode {
  background: #e8edf5;
  color: #5a6a82;
  width: 115px;
  min-width: 115px;
  font-weight: 500;
  font-size: .74rem;
  vertical-align: middle;
  border-color: rgba(61,79,99,.15) !important;
}
.tb-th-centre {
  background: #dde4f0;
  color: #2c3e56;
  font-weight: 600;
  vertical-align: middle;
  letter-spacing: .01em;
  border-color: rgba(61,79,99,.15) !important;
}

/* ── En-têtes niveau 2 (Salles) ─────────────────── */
.tb-th-salle {
  background: #c8e5e2;
  color: var(--app-primary, #14786f);
  min-width: 110px;
  font-weight: 600;
  font-size: .74rem;
  vertical-align: middle;
  border-color: rgba(20,120,111,.2) !important;
}

/* ── Colonnes Date + Créneau figées pendant le défilement horizontal ── */
.tb-th-date,
.tb-td-date {
  position: sticky;
  left: 0;
  z-index: 3;
}
.tb-th-periode,
.tb-td-slot {
  position: sticky;
  left: 68px;            /* = largeur de la colonne Date */
  z-index: 3;
}
/* En-têtes figés au-dessus des cellules figées du corps */
.tb-th-date,
.tb-th-periode {
  z-index: 6;
}
/* Ombre de séparation à droite de la zone figée (indique le scroll) */
.tb-th-periode::after,
.tb-td-slot::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 6px;
  transform: translateX(100%);
  pointer-events: none;
  background: linear-gradient(90deg, rgba(15, 23, 42, .12), rgba(15, 23, 42, 0));
}

/* ── Cellule date ────────────────────────────────── */
.tb-td-date {
  background: #f1f3f5;
  vertical-align: middle;
  border-right: 2px solid #c0c8d0 !important;
  padding: 6px 4px !important;
}
.tb-td-date--today   { background: #d1f0eb !important; }
.tb-td-date--weekend { background: #f4f2ee !important; }

.tb-date-wd {
  font-size: .62rem;
  letter-spacing: .07em;
  color: #6c757d;
  text-transform: uppercase;
}
.tb-td-date--today .tb-date-wd { color: var(--app-primary, #14786f); font-weight: 700; }

.tb-date-num {
  font-size: .88rem;
  font-weight: 700;
  color: #212529;
  line-height: 1.2;
}
.tb-td-date--today .tb-date-num { color: var(--app-primary, #14786f); }

/* ── Cellule slot (Période) ──────────────────────── */
.tb-td-slot {
  font-size: .74rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 4px 8px !important;
  border-right: 2px solid #c0c8d0 !important;
  color: #495057;
  width: 115px;
}
.tb-slot-matin  { background: #fffbeb; border-left: 3px solid #fbbf24 !important; }
.tb-slot-apm    { background: #f0fdf4; border-left: 3px solid #4ade80 !important; }
.tb-slot-garde  { background: #eff6ff; border-left: 3px solid #60a5fa !important; }
.tb-slot-today  { filter: saturate(1.4); }

/* ── Cellules données ────────────────────────────── */
.tb-cell {
  min-width: 110px;
  padding: 5px 6px !important;
  vertical-align: middle;
}
.tb-cell-free         { background: #fff; }
.tb-cell-taken        { background: #faf5ff; padding-top: 12px !important; }
.tb-cell-mine         { background: #eff6ff; padding-top: 12px !important; }
.tb-cell-demande      { background: #fffbeb; padding-top: 12px !important; }
.tb-cell-demande-mine { background: #fef3c7; padding-top: 12px !important; }
.tb-cell-blocked      { background: #fff7ed; padding-top: 12px !important; box-shadow: inset 0 0 0 1px #fed7aa; }
.tb-cell-weekend { background: #fafaf8; }
/* Aujourd'hui — teinte verte sur TOUTES les cellules (libre, prise, weekend) */
.tb-row-today .tb-cell-free   { background: #e8faf7; }
.tb-row-today .tb-cell-mine   { background: #daf5f0; }
.tb-row-today .tb-cell-taken  { background: #daf5f0; }
.tb-row-today .tb-slot-today  { background: #d1f0eb; }

/* Hover — overlay semi-transparent sur toute la ligne (box-shadow ne touche pas aux backgrounds) */
.tb-table tbody tr:hover td {
    box-shadow: inset 0 0 0 9999px rgba(14, 116, 144, 0.06);
    cursor: pointer;
}
.tb-row-weekend td { opacity: .8; }

/* ── Bloc pleine largeur (remplace badge) ────────── */
.tb-block {
  position: relative;    /* ancre le badge absolu */
  overflow: visible;     /* laisse le badge dépasser */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-radius: 5px;
  padding: 5px 8px;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.3;
  background: #e5e7eb;
  color: #374151;
  border-left: 3px solid #9ca3af;
  box-sizing: border-box;
  min-height: 28px;
}

/* Couleur par identité : neutre par défaut (autre médecin), bleu pour le médecin courant. */
.tb-block--mine   { background: #bfdbfe; color: #1e3a8a; border-left-color: #2563eb; }
/* Demande en attente — override la couleur de slot */
.tb-block--demande { background: #fde68a !important; color: #78350f !important; border-left-color: #f59e0b !important; border-left-style: dashed !important; }
.tb-block--blocked { background: #ffedd5 !important; color: #7c2d12 !important; border-left-color: #f97316 !important; }
.tb-blocked-badge { flex-shrink: 0; margin-right: 3px; color: #ea580c; font-size: .78rem; }

/* Médecin réservé mais en congé validé ce jour — conflit à signaler */
.tb-block--absent { background: #fee2e2 !important; color: #991b1b !important; border-left-color: #dc2626 !important; }
.tb-block--absent .tb-block-name { text-decoration: line-through; text-decoration-color: rgba(153,27,27,.6); }
.tb-absent-badge { flex-shrink: 0; margin-right: 3px; color: #dc2626; font-size: .8rem; }

.tb-block-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 2px;
}

/* ── Bouton poubelle dans le bloc ────────────────── */
.tb-del-btn {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0 0 0 5px;
  font-size: .78rem;
  color: inherit;
  opacity: .45;
  cursor: pointer;
  transition: opacity .15s, color .15s;
  line-height: 1;
}
.tb-del-btn:hover { opacity: 1; color: #dc3545; }

/* ── Bouton + (créer) ────────────────────────────── */
.tb-add-btn {
  padding: 1px 6px;
  font-size: .8rem;
  opacity: .45;
  transition: opacity .15s;
}
.tb-add-btn:hover { opacity: 1; }

/* ── Légende ─────────────────────────────────────── */
.tb-legend-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tb-legend-dot--mine  { background: #bfdbfe; border: 2px solid #2563eb; }
.tb-legend-dot--other { background: #e5e7eb; border: 2px solid #9ca3af; }

.tb-legend-slot {
  display: inline-block;
  padding: .1em .5em;
  border-radius: 4px;
  font-size: .72rem;
  font-weight: 600;
  border-left: 3px solid;
  margin-right: .25rem;
}
.tb-slot-matin.tb-legend-slot  { background: #fffbeb; border-left-color: #fbbf24; color: #92400e; }
.tb-slot-apm.tb-legend-slot    { background: #f0fdf4; border-left-color: #4ade80; color: #166534; }
.tb-slot-garde.tb-legend-slot  { background: #eff6ff; border-left-color: #60a5fa; color: #1e40af; }

/* ── Modal suppression ───────────────────────────── */
.del-modal-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #fff8e1;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.collapse-centre-btn {
  line-height: 1;
  vertical-align: middle;
}

/* ===== PERIODE OPTIONS ===== */
.periode-option {
  padding: .55rem .85rem;
  border-radius: 8px;
  border: 1px solid var(--app-border);
}

.periode-option.available {
  background: #f0fff4;
  border-color: #86efac;
}

.periode-option.taken {
  background: #fafafa;
  opacity: .65;
}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN LAYOUT — SIDEBAR
   ═══════════════════════════════════════════════════════════════════ */

.admin-wrapper {
  display: flex;
  min-height: 100vh;
  background: #f1f5f9;
}

/* ── Sidebar ── */
.admin-sidebar {
  width: 256px;
  min-width: 256px;
  background: #0f172a;
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 1040;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #334155 transparent;
  transition: transform .25s ease;
}

.admin-sidebar::-webkit-scrollbar { width: 4px; }
.admin-sidebar::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }

.admin-content-wrap {
  flex: 1;
  margin-left: 256px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Brand */
.admin-brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: 1.1rem 1rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}

.admin-brand-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--app-primary, #14786f);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
}

.admin-brand-logo {
  max-height: 34px; max-width: 120px;
  object-fit: contain;
}

.admin-brand-text { line-height: 1.2; }
.admin-brand-name { font-size: .88rem; font-weight: 700; color: #f1f5f9; display: block; }
.admin-brand-sub  { font-size: .65rem; text-transform: uppercase; letter-spacing: .07em; color: #475569; }

/* Nav section */
.admin-nav-section { padding: .35rem 0; }

.admin-nav-label {
  padding: .6rem 1rem .2rem;
  font-size: .67rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: #475569;
}

.admin-nav-link {
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .75rem;
  margin: .05rem .5rem;
  border-radius: 6px;
  color: #94a3b8;
  text-decoration: none;
  font-size: .84rem;
  transition: background .14s, color .14s;
}

.admin-nav-link i { font-size: .95rem; width: 1.1rem; flex-shrink: 0; }

.admin-nav-link:hover { background: rgba(255,255,255,.06); color: #e2e8f0; }
.admin-nav-link.active { background: var(--app-primary, #14786f); color: #fff; font-weight: 600; }
.admin-nav-link.active:hover { background: var(--app-primary-dark, #0f5f58); color: #fff; }

.admin-nav-divider { border-color: rgba(255,255,255,.07); margin: .3rem 0; }

/* Sidebar footer */
.admin-sidebar-footer {
  margin-top: auto;
  padding: .75rem;
  border-top: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}

.admin-user-pill {
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .6rem;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  text-decoration: none;
}

.admin-user-pill:hover { background: rgba(255,255,255,.09); }

.admin-avatar-sm {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--app-primary, #14786f);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; color: #fff;
  overflow: hidden;
}
.admin-avatar-sm img { width: 100%; height: 100%; object-fit: cover; }

.admin-user-info { overflow: hidden; }
.admin-user-name  { font-size: .78rem; font-weight: 600; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-user-email { font-size: .7rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Top bar */
.admin-topbar {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  padding: .6rem 1.5rem;
  display: flex; align-items: center; gap: .75rem;
  position: sticky; top: 0; z-index: 100;
  min-height: 52px;
}

.admin-topbar-toggle {
  display: none;
  background: none; border: none; padding: .3rem .4rem;
  border-radius: 6px; color: #64748b; cursor: pointer;
}
.admin-topbar-toggle:hover { background: #f1f5f9; color: #0f172a; }

.admin-topbar-title { font-size: .95rem; font-weight: 700; color: #0f172a; flex: 1; }

.admin-topbar-actions { display: flex; align-items: center; gap: .5rem; }

/* Main content */
.admin-main { flex: 1; padding: 1.5rem; }

/* Overlay (mobile) */
.admin-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 1039;
}
.admin-overlay.show { display: block; }

/* Mobile */
@media (max-width: 991.98px) {
  .admin-sidebar { transform: translateX(-256px); }
  .admin-sidebar.show { transform: translateX(0); box-shadow: 8px 0 32px rgba(0,0,0,.4); }
  .admin-content-wrap { margin-left: 0; }
  .admin-topbar-toggle { display: flex; align-items: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   PROFIL UTILISATEUR
   ═══════════════════════════════════════════════════════════════════ */

.profile-avatar-wrap {
  position: relative; display: inline-block;
}

.profile-avatar {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--app-primary, #14786f);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 700; color: #fff;
  overflow: hidden; border: 3px solid #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
}

.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }

.profile-avatar-upload {
  position: absolute; bottom: 0; right: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--app-primary, #14786f);
  border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff; font-size: .75rem;
  transition: background .15s;
}
.profile-avatar-upload:hover { background: var(--app-primary-dark, #0f5f58); }

.profile-header-card {
  background: var(--app-primary, #14786f);
  border-radius: 12px 12px 0 0;
  padding: 2rem 1.5rem 1.2rem;
  color: #fff;
}

.profile-body-card {
  background: #fff;
  border-radius: 0 0 12px 12px;
  border: 1px solid var(--app-border);
  border-top: none;
}

.profile-stat-pill {
  background: rgba(255,255,255,.18);
  border-radius: 20px;
  padding: .25rem .75rem;
  font-size: .78rem;
}

.navbar-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--app-primary, #14786f);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; color: #fff;
  overflow: hidden; cursor: pointer;
  border: 2px solid rgba(255,255,255,.3);
}
.navbar-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── Mobile : icônes navbar avant le burger ──────────────────────────────── */
@media (max-width: 991.98px) {
    /* Séparateur vertical subtil entre les icônes et le burger */
    .navbar-mobile-icons {
        padding-right: 8px;
        margin-right: 4px !important;
        border-right: 1px solid var(--app-border, #e2e8f0);
    }
    /* Avatar : même taille circulaire que les icônes (34×34) */
    .navbar-mobile-icons .dropdown > .nav-link {
        padding: 0 !important;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        justify-content: center;
        transition: background .15s ease;
    }
    .navbar-mobile-icons .dropdown > .nav-link:hover {
        background: #f1f5f9;
    }
}

/* ── Desktop : cluster d'actions navbar (chat · notif · compte) ──────────── */
@media (min-width: 992px) {
    /* Séparateur vertical discret entre les icônes et le bloc compte */
    .nav-vsep {
        width: 1px;
        height: 24px;
        background: var(--app-border);
        margin: 0 6px;
        flex-shrink: 0;
    }
    /* Bloc compte défini : surface légère + bordure, lecture « bouton » */
    .account-chip {
        padding: 4px 12px 4px 5px !important;
        border-radius: 999px;
        background: var(--app-surface-muted);
        border: 1px solid var(--app-border);
        transition: background .15s ease, border-color .15s ease;
    }
    .account-chip:hover,
    .account-chip[aria-expanded="true"] {
        background: #eef2f7;
        border-color: #c5cfdb;
    }
    /* Nom utilisateur : tronqué proprement si trop long */
    .account-chip > span {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ═══════════════════════════════════════════════════
   Dashboard — Cartes de statistiques
   ═══════════════════════════════════════════════════ */

.dashboard-stat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  transition: box-shadow .15s, transform .15s;
  overflow: hidden;
  height: 100%;
}

.dashboard-stat-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.09);
  transform: translateY(-1px);
}

.dashboard-stat-icon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}

.dashboard-stat-body { flex: 1; min-width: 0; }

.dashboard-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--app-text);
}

.dashboard-stat-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--app-text);
  margin-top: .1rem;
}

.dashboard-stat-sub {
  font-size: .72rem;
  color: var(--app-muted);
  margin-top: .15rem;
}

.dashboard-stat-link {
  text-decoration: none;
}

/* ── Cartes d'accès rapide ───────────────────────── */

.dashboard-quick-card {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  padding: 1.1rem 1rem;
  text-decoration: none;
  color: var(--app-text);
  transition: box-shadow .15s, border-color .15s, transform .15s;
  height: 100%;
}

.dashboard-quick-card:hover {
  border-color: var(--app-primary);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  transform: translateY(-2px);
  color: var(--app-primary);
}

.dashboard-quick-icon {
  font-size: 1.4rem;
  color: var(--app-primary);
  margin-bottom: .25rem;
}

.dashboard-quick-title {
  font-size: .85rem;
  font-weight: 600;
}

.dashboard-quick-desc {
  font-size: .75rem;
  color: var(--app-muted);
}

/* ═══════════════════════════════════════════════════
   Onglets vue avec icônes colorées (Planning, Réservations)
   ═══════════════════════════════════════════════════ */

.app-view-tabs {
  gap: .25rem;
  border-bottom: 1px solid var(--app-border);
  flex-wrap: nowrap;
}

.app-view-tabs .nav-link {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .85rem;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  font-size: .85rem;
  font-weight: 500;
  color: var(--app-muted);
  background: transparent;
  transition: background .15s, color .15s;
}

.app-view-tabs .nav-link:hover {
  background: #f1f5f9;
  color: var(--app-text);
}

.app-view-tabs .nav-link.active {
  background: #fff;
  color: var(--app-text);
  border-color: var(--app-border);
  margin-bottom: -1px;
}

/* Icônes colorées */
.app-tab-icon { font-size: 1rem; flex-shrink: 0; }
.app-tab-icon--blue   { color: #6366f1; }
.app-tab-icon--orange { color: #f59e0b; }
.app-tab-icon--green  { color: #10b981; }
.app-tab-icon--red    { color: #ef4444; }

/* ═══════════════════════════════════════════════════
   Calendrier « Mon planning » — grille maison, jour scindé matin / après-midi
   ═══════════════════════════════════════════════════ */

.mcal { overflow-x: auto; }

.mcal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-width: 720px;
  border: 2px solid #8b9bb0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.mcal-grid > *:nth-child(7n) { border-right: none; }

.mcal-head {
  text-align: center;
  font-weight: 700;
  font-size: .78rem;
  color: #3a485f;
  padding: .45rem .3rem;
  background: #e4eaf1;
  border-right: 1.5px solid #9fadbf;
  border-bottom: 2px solid #8b9bb0;
}

.mcal-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 112px;
  padding: 2px 4px 4px;
  border-right: 1.5px solid #9fadbf;
  border-bottom: 1.5px solid #9fadbf;
  cursor: pointer;
  transition: background .12s;
}
/* Indice « + » au survol d'une case (suggère l'ajout d'un événement) */
.mcal-cell::after {
  content: "+";
  position: absolute; bottom: 1px; right: 6px;
  font-size: 1rem; font-weight: 700; line-height: 1;
  color: var(--app-primary); opacity: 0;
  transition: opacity .12s; pointer-events: none;
}
.mcal-cell:hover::after { opacity: .5; }
.mcal-cell.mcal-out::after { content: none; }

.mcal-cell.mcal-we { background: #f3f6fb; }
.mcal-cell:hover { background: #eef5f3; }
.mcal-cell.mcal-out { background: #f1f3f7; }
.mcal-cell.mcal-out .mcal-daynum { color: #aeb8c4; }
.mcal-cell.mcal-today { background: rgba(20,120,111,.10); box-shadow: inset 0 0 0 2px var(--app-primary); }
.mcal-cell.mcal-today .mcal-daynum {
  background: var(--app-primary); color: #fff;
  min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
}

.mcal-daynum { align-self: flex-end; font-size: .8rem; font-weight: 700; color: #2c3a4f; line-height: 1; }

.mcal-journee { display: flex; flex-direction: column; gap: 2px; margin: 1px 0 2px; }

.mcal-demi { flex: 1 1 0; min-height: 24px; }
.mcal-demi-pm { border-top: 1px dashed #9fadbf; margin-top: 3px; padding-top: 3px; }

.mcal-chip {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  padding: 2px 6px;
  font-size: .69rem;
  line-height: 1.25;
  border-radius: 4px;
  background: #b3e0d5;
  color: #083d2d;
  border-left: 3px solid #0b6650;
  overflow: hidden;
}
.mcal-chip:hover { filter: brightness(.97); }
.mcal-chip-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcal-chip-ic { font-size: .62rem; flex-shrink: 0; color: #0e7490; }
.mcal-chip-perso { background: #d3d0f6; color: #251f66; }

.mcal-legend-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.mcal-legend-res   { background: #b3e0d5; border-left: 3px solid #0b6650; }
.mcal-legend-perso { background: #d3d0f6; border-left: 3px solid #6366f1; }

/* ═══════════════════════════════════════════════════
   Barre de filtres
   ═══════════════════════════════════════════════════ */

.filter-bar {
  background: #f8fafc;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  padding: .75rem 1rem;
}

.filter-bar-input {
  border-radius: 6px;
}

/* ═══════════════════════════════════════════════════
   Page d'accueil (tableau de bord utilisateur)
   ═══════════════════════════════════════════════════ */

/* Pas de boîte englobante — les cartes flottent sur le fond */
.home-dash {
  padding-bottom: .5rem;
}

/* ═══════════════════════════════════════════════════
   Footer de pagination (toujours visible)
   ═══════════════════════════════════════════════════ */

.pagination-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem 1rem;
  border-top: 1px solid var(--app-border);
  background: var(--app-surface-muted);
  border-radius: 0 0 7px 7px;
}

/* ── Admin — Page "Rôles utilisateur" ───────────────────────────────── */

.roles-user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--app-primary, #14786f);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .02em;
}

.role-cards-list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.role-card-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.1rem;
    border: 2px solid #e9ecef;
    border-radius: .625rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .1s ease;
    background: #fff;
    user-select: none;
}
.role-card-item:hover {
    border-color: #ced4da;
    background: #f8fafc;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.role-card-item.is-active {
    border-color: var(--app-primary, #14786f);
    background: #f0faf9;
    box-shadow: 0 0 0 3px rgba(20, 120, 111, .08);
}

.role-card-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: opacity .15s;
}
.role-card-item:not(.is-active) .role-card-icon-wrap {
    filter: grayscale(.4);
    opacity: .7;
}

.role-card-text { min-width: 0; }

.role-card-name {
    font-weight: 600;
    font-size: .92rem;
    color: #1a202c;
    line-height: 1.3;
}
.role-card-item.is-active .role-card-name {
    color: var(--app-primary, #14786f);
}

.role-card-desc {
    font-size: .78rem;
    color: #6c757d;
    margin-top: .2rem;
    line-height: 1.4;
}

.role-card-toggle {
    flex-shrink: 0;
    font-size: 1.3rem;
    transition: color .15s;
    line-height: 1;
}
.role-toggle-on  { display: none; color: var(--app-primary, #14786f); }
.role-toggle-off { display: block; color: #ced4da; }

.role-card-item.is-active .role-toggle-on  { display: block; }
.role-card-item.is-active .role-toggle-off { display: none; }



/* ── Bandeau d'impersonation ──────────────────────────────────── */
.impersonation-banner {
    background: #fff3cd;
    border-bottom: 2px solid #ffc107;
    color: #664d03;
    font-size: .88rem;
    font-weight: 500;
}

/* ── En-têtes de colonnes triables ───────────────────────────── */
.sort-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
    font-weight: 600;
    font-size: inherit;
}
.sort-link:hover { color: var(--app-primary, #14786f); }
.sort-link .si { font-size: .68rem; opacity: .35; transition: opacity .15s; }
.sort-link:hover .si { opacity: .7; }
.sort-link.sort-active { color: var(--app-primary, #14786f); }
.sort-link.sort-active .si { opacity: 1; }

/* ── Carte d'accès utilisateur (AccessMap) ──────────────────────────────── */

/* En-tête de groupe (direct / via rôle) */
.access-group-hdr {
  background: var(--app-surface-muted);
  border-bottom: 1px solid var(--app-border);
  font-size: .85rem;
}

/* Avatar zone */
.access-map-avatar { flex-shrink: 0; line-height: 1; }

/* ── Arbre ── */
.atree-root   { padding: .25rem 0; }

.atree-node   { position: relative; }

/* Conteneur des enfants : indentation + ligne verticale */
.atree-children {
  margin-left: .7rem;
  padding-left: .9rem;
  border-left: 2px solid var(--app-border);
  margin-top: .1rem;
  margin-bottom: .1rem;
}

/* Ligne d'un nœud */
.atree-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .28rem .4rem;
  border-radius: 6px;
  transition: background .1s;
  cursor: default;
  user-select: none;
}
.atree-row:hover { background: rgba(0,0,0,.04); }

/* Icône fixe */
.atree-icon {
  width: 1.2rem;
  text-align: center;
  flex-shrink: 0;
  font-size: .95rem;
}

/* Label du nœud */
.atree-label {
  flex: 1;
  min-width: 0;
  font-size: .88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Couleurs par type */
.atree-perimetre-row .atree-label { color: #1e4db7; }
.atree-centre-row    .atree-label { color: #0d6832; }
.atree-salle-row     .atree-label { color: var(--app-text); }

/* Badges inline de l'arbre */
.atree-badge-type {
  background: #dbeafe;
  color: #1e40af;
  font-weight: 500;
  font-size: .68rem;
  flex-shrink: 0;
}
.atree-badge-count {
  background: #dcfce7;
  color: #14532d;
  font-weight: 500;
  font-size: .68rem;
  flex-shrink: 0;
  margin-left: auto;
}
.atree-badge-empty {
  background: #f1f5f9;
  color: #64748b;
  font-weight: 400;
  font-size: .68rem;
  flex-shrink: 0;
  margin-left: auto;
}
.atree-badge-salles {
  background: #d1fae5;
  color: #065f46;
  font-weight: 500;
  font-size: .68rem;
  flex-shrink: 0;
  margin-left: auto;
}

/* ── Carte d'accès : bandeau récapitulatif des sources ── */
.access-src-band { display: flex; flex-wrap: wrap; gap: .6rem; }
.access-src-card {
  flex: 1 1 190px;
  border: 1px solid var(--app-border);
  border-left-width: 4px;
  border-radius: 10px;
  padding: .6rem .85rem;
  background: #fff;
}
.access-src-card .asc-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .03em;
  color: #64748b; font-weight: 600; display: flex; align-items: center; gap: .35rem;
}
.access-src-card .asc-count { font-size: 1.35rem; font-weight: 800; line-height: 1.1; margin-top: .2rem; color: #1f2937; }
.access-src-card .asc-unit  { font-size: .8rem; font-weight: 500; color: #94a3b8; }
.access-src-card .asc-sub   { font-size: .72rem; color: #94a3b8; margin-top: .1rem; }
.access-src-card--direct { border-left-color: #2563eb; }
.access-src-card--role   { border-left-color: #f59e0b; }
.access-src-card--total  { border-left-color: #16a34a; background: #f6fef9; }
.access-src-card--total .asc-count { color: #15803d; }

/* En-tête de groupe : accès direct (bleu) vs hérité d'un rôle (ambre) */
.access-group-hdr--direct { background: #eff6ff; border-bottom-color: #bfdbfe; }
.access-group-hdr--role   { background: #fffbeb; border-bottom-color: #fde68a; }
.access-group-sub { font-size: .72rem; color: #64748b; font-weight: 400; line-height: 1.1; }

/* Arbre repliable (details/summary natif, sans JS) */
.atree-collapsible > summary { list-style: none; cursor: pointer; }
.atree-collapsible > summary::-webkit-details-marker { display: none; }
.atree-collapsible > summary::marker { content: ""; }
.atree-caret { width: 1rem; flex-shrink: 0; text-align: center; color: #94a3b8; font-size: .78rem; transition: transform .15s; }
.atree-collapsible[open] > summary > .atree-caret { transform: rotate(90deg); }
.atree-leaf-spacer { width: 1rem; flex-shrink: 0; display: inline-block; }

/* ════════════════════════════════════════════════════════════════
   Module Absence — design system partagé (abs-*)
   ════════════════════════════════════════════════════════════════ */
.abs-page .app-page-title i { color: var(--app-primary, #14786f); }

/* Soldes */
.abs-solde-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-bottom:22px; }
.abs-solde { display:flex; gap:16px; align-items:center; background:var(--app-surface,#fff); border:1px solid var(--app-border,#e2e8f0); border-radius:16px; padding:18px 20px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.abs-solde-ico { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; flex-shrink:0; background:#eef2f6; color:#475569; }
.abs-solde--conge .abs-solde-ico { background:#dcfce7; color:#16a34a; }
.abs-solde--rtt   .abs-solde-ico { background:#dbeafe; color:#2563eb; }
.abs-solde--t2 .abs-solde-ico { background:#ede9fe; color:#7c3aed; }
.abs-solde--t3 .abs-solde-ico { background:#ffedd5; color:#c2410c; }
.abs-solde-main { flex:1; min-width:0; }
.abs-solde-top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.abs-solde-label { font-weight:600; color:var(--app-muted,#64748b); font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.abs-solde-pris { font-size:.72rem; color:var(--app-muted,#94a3b8); white-space:nowrap; }
.abs-solde-val { font-size:1.7rem; font-weight:800; color:var(--app-text,#0f172a); line-height:1.15; }
.abs-solde-tot { font-size:.85rem; font-weight:600; color:var(--app-muted,#94a3b8); }
.abs-solde-bar { height:7px; border-radius:99px; background:#eef2f6; margin-top:8px; overflow:hidden; }
.abs-solde-bar span { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#94a3b8,#64748b); }
.abs-solde--conge .abs-solde-bar span { background:linear-gradient(90deg,#22c55e,#16a34a); }
.abs-solde--rtt   .abs-solde-bar span { background:linear-gradient(90deg,#3b82f6,#2563eb); }
.abs-solde--t2 .abs-solde-bar span { background:linear-gradient(90deg,#a78bfa,#7c3aed); }
.abs-solde--t3 .abs-solde-bar span { background:linear-gradient(90deg,#fb923c,#c2410c); }
.abs-solde--over .abs-solde-bar span { background:linear-gradient(90deg,#f87171,#dc2626) !important; }

/* Panneaux & listes */
.abs-cols { display:grid; grid-template-columns:1.4fr 1fr; gap:18px; }
@media (max-width:992px){ .abs-cols { grid-template-columns:1fr; } }
.abs-panel { background:var(--app-surface,#fff); border:1px solid var(--app-border,#e2e8f0); border-radius:16px; overflow:hidden; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.abs-panel-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--app-border,#eef2f6); }
.abs-panel-head h2 { font-size:.95rem; font-weight:700; margin:0; color:var(--app-text,#1e293b); display:flex; align-items:center; gap:8px; }
.abs-panel-head h2 i { color:var(--app-primary,#14786f); }
.abs-count { background:#eef2f6; color:#475569; font-weight:700; font-size:.78rem; border-radius:99px; padding:2px 10px; }
.abs-count--wait { background:#fef3c7; color:#b45309; }
.abs-list { list-style:none; margin:0; padding:6px; }
.abs-list li a { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:11px; text-decoration:none; color:inherit; transition:background .12s; }
.abs-list li a:hover { background:var(--app-surface-muted,#f8fafc); }
.abs-dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.abs-avatar { width:34px; height:34px; border-radius:50%; background:var(--app-primary,#14786f); color:#fff; font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.abs-item-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.abs-item-title { font-weight:600; color:var(--app-text,#1e293b); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.abs-item-sub { font-size:.78rem; color:var(--app-muted,#64748b); display:flex; align-items:center; gap:5px; }
.abs-item-sub i { font-size:.72rem; }

/* Pills de statut */
.abs-pill { display:inline-flex; align-items:center; gap:5px; font-size:.74rem; font-weight:700; padding:4px 10px; border-radius:99px; white-space:nowrap; }
.abs-pill--ok    { background:#dcfce7; color:#15803d; }
.abs-pill--ko    { background:#fee2e2; color:#b91c1c; }
.abs-pill--wait  { background:#fef3c7; color:#b45309; }
.abs-pill--info  { background:#dbeafe; color:#1d4ed8; }
.abs-pill--muted { background:#eef2f6; color:#64748b; }

/* États vides */
.abs-empty { text-align:center; padding:34px 20px; color:var(--app-muted,#94a3b8); }
.abs-empty i { font-size:2.1rem; display:block; margin-bottom:10px; opacity:.6; }
.abs-empty p { margin:0 0 12px; }
.abs-empty--ok i { color:#22c55e; opacity:.8; }

/* Carte / formulaire */
.abs-card { background:var(--app-surface,#fff); border:1px solid var(--app-border,#e2e8f0); border-radius:16px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.abs-card-head { padding:14px 20px; border-bottom:1px solid var(--app-border,#eef2f6); font-weight:700; color:var(--app-text,#1e293b); display:flex; align-items:center; gap:8px; }
.abs-card-head i { color:var(--app-primary,#14786f); }
.abs-card-body { padding:20px; }
.abs-form-label { font-weight:600; font-size:.85rem; color:var(--app-text,#334155); margin-bottom:5px; display:block; }

/* Bandeau de calcul (Nouvelle absence) */
.abs-compute { display:flex; align-items:center; gap:20px; padding:16px 20px; border-radius:14px; background:linear-gradient(135deg,#f0fdf4,#ecfeff); border:1px solid #cdeede; margin:18px 0; }
.abs-compute-nb { text-align:center; }
.abs-compute-nb .n { font-size:1.9rem; font-weight:800; color:var(--app-text,#0f172a); line-height:1; }
.abs-compute-nb .l { font-size:.72rem; color:var(--app-muted,#64748b); text-transform:uppercase; letter-spacing:.04em; }
.abs-compute-sep { width:1px; align-self:stretch; background:#cbe8d8; }
.abs-compute-info { font-size:.9rem; color:#475569; }
.abs-compute-info strong { color:#0f172a; }

/* Circuit de validation (Détails) */
.abs-circuit { display:flex; flex-wrap:wrap; gap:14px; }
.abs-step { flex:1; min-width:200px; border:1px solid var(--app-border,#e2e8f0); border-radius:14px; padding:14px 16px; background:var(--app-surface,#fff); }
.abs-step--current { border-color:#f59e0b; box-shadow:0 0 0 3px #fef3c7; }
.abs-step--done { border-color:#86efac; }
.abs-step--rejected { border-color:#fca5a5; }
.abs-step-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.abs-step-num { width:26px; height:26px; border-radius:50%; background:#eef2f6; color:#475569; font-weight:700; font-size:.85rem; display:inline-flex; align-items:center; justify-content:center; }
.abs-step--current .abs-step-num { background:#f59e0b; color:#fff; }
.abs-step--done .abs-step-num { background:#16a34a; color:#fff; }
.abs-step--rejected .abs-step-num { background:#dc2626; color:#fff; }
.abs-step-title { font-weight:600; color:var(--app-text,#1e293b); }
.abs-step-who { font-size:.8rem; color:var(--app-muted,#64748b); }
.abs-step-comment { font-size:.8rem; font-style:italic; color:#475569; margin-top:6px; padding-top:6px; border-top:1px dashed #e2e8f0; }

/* Récap clés/valeurs */
.abs-kv { display:grid; grid-template-columns:auto 1fr; gap:8px 18px; align-items:center; margin:0; }
.abs-kv dt { color:var(--app-muted,#64748b); font-size:.84rem; }
.abs-kv dd { margin:0; font-weight:600; color:var(--app-text,#1e293b); }

/* Pilotage — tuiles & table */
.abs-tiles { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:16px; }
@media (max-width:768px){ .abs-tiles { grid-template-columns:repeat(2,1fr); } }
.abs-tile { display:block; text-decoration:none; background:var(--app-surface,#fff); border:1px solid var(--app-border,#e2e8f0); border-radius:14px; padding:14px 12px; text-align:center; transition:transform .1s, box-shadow .1s; }
.abs-tile:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(16,24,40,.08); }
.abs-tile.is-active { border-width:2px; }
.abs-tile .n { font-size:1.6rem; font-weight:800; line-height:1; }
.abs-tile .l { font-size:.78rem; color:var(--app-muted,#64748b); margin-top:3px; }
.abs-tile--all.is-active { border-color:#64748b; } .abs-tile--all .n{ color:#475569; }
.abs-tile--wait.is-active{ border-color:#f59e0b; } .abs-tile--wait .n{ color:#d97706; }
.abs-tile--enc.is-active { border-color:#3b82f6; } .abs-tile--enc .n{ color:#2563eb; }
.abs-tile--ok.is-active  { border-color:#22c55e; } .abs-tile--ok .n{ color:#16a34a; }
.abs-tile--clo.is-active { border-color:#94a3b8; } .abs-tile--clo .n{ color:#64748b; }
.abs-table { width:100%; border-collapse:separate; border-spacing:0; }
.abs-table thead th { font-size:.74rem; text-transform:uppercase; letter-spacing:.03em; color:var(--app-muted,#64748b); text-align:left; padding:10px 14px; border-bottom:1px solid var(--app-border,#eef2f6); }
.abs-table tbody td { padding:12px 14px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
.abs-table tbody tr:hover { background:var(--app-surface-muted,#f8fafc); }
.abs-table tbody tr:last-child td { border-bottom:0; }

/* Admin — cartes de types */
.abs-type { background:var(--app-surface,#fff); border:1px solid var(--app-border,#e2e8f0); border-radius:16px; box-shadow:0 1px 2px rgba(16,24,40,.04); margin-bottom:16px; overflow:hidden; }
.abs-type.is-off { opacity:.7; }
.abs-type-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:16px 20px; }
.abs-type-ico { width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:#fff; flex-shrink:0; }
.abs-type-name { font-size:1.05rem; font-weight:700; color:var(--app-text,#1e293b); display:flex; align-items:center; gap:8px; }
.abs-type-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:5px; }
.abs-chip { font-size:.74rem; font-weight:600; padding:3px 9px; border-radius:99px; background:#eef2f6; color:#475569; display:inline-flex; align-items:center; gap:4px; }
.abs-chip--cat { background:#e0f2fe; color:#0369a1; }
.abs-chip--quota { background:#fef3c7; color:#b45309; }
.abs-chip--socle { background:#ede9fe; color:#6d28d9; }
.abs-type-body { padding:0 20px 16px; }
.abs-type-steps { list-style:none; margin:0 0 10px; padding:0; }
.abs-type-steps li { display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px dashed #eef2f6; }
.abs-type-foot { display:flex; flex-wrap:wrap; gap:6px; padding:12px 20px; border-top:1px solid var(--app-border,#eef2f6); background:var(--app-surface-muted,#f8fafc); }