/* ═══════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM v2 — branche `design`
   Tokens (CSS variables) + composants (shell, btn, tile…) en haut.
   Les overrides dark mode et règles legacy spécifiques aux pages
   actuelles restent plus bas pour ne pas casser ce qui marche pendant
   la migration page par page.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Brand */
  --brand:           #198754;
  --brand-dark:      #157347;
  --brand-fg:        #fff;
  --accent:          #dc2626;        /* rouge — alertes/danger */
  --accent-warm:     #ea580c;        /* orange — CTAs subtils */
  --accent-warm-soft:#ffedd5;

  /* Surfaces */
  --bg:           #f8fafc;
  --bg-elevated:  #ffffff;
  --bg-muted:     #f1f5f9;
  --bg-overlay:   rgba(15, 23, 42, .5);

  /* Text */
  --text:         #0f172a;
  --text-muted:   #475569;
  --text-subtle:  #64748b;

  /* Borders */
  --border:        #e2e8f0;
  --border-strong: #cbd5e1;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);

  /* Radius */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* Spacing (4px base) */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;

  /* Typography */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-md:  16px;
  --fs-lg:  18px;
  --fs-xl:  20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;

  /* Motion */
  --t-fast: 100ms;
  --t-base: 160ms;
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --sidebar-w:           240px;
  --sidebar-w-collapsed: 64px;
  --topbar-h:            56px;
  --bottomnav-h:         64px;
  --content-max:         1200px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg:          #0b1220;
  --bg-elevated: #131c2e;
  --bg-muted:    #1e293b;
  --bg-overlay:  rgba(0, 0, 0, .65);

  --text:        #e2e8f0;
  --text-muted:  #94a3b8;
  --text-subtle: #64748b;

  --border:        #1e293b;
  --border-strong: #334155;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); color: var(--text); background: var(--bg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:  .01ms !important;
    transition-duration: .01ms !important;
  }
}

.skip-link {
  position: absolute; top: -40px; left: 0; z-index: 9999;
  background: var(--brand); color: white;
  padding: var(--s-3) var(--s-4);
  border-radius: 0 0 var(--r-md) 0;
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 0; }

/* ═══ APP SHELL (sidebar + topbar + bottom-nav) ════════════════════════ */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  transition: grid-template-columns var(--t-base) var(--ease);
}
.app-shell.sidebar-collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

/* Sidebar */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  transition: width var(--t-base) var(--ease), transform var(--t-base) var(--ease);
  z-index: 100;
}
.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); }

.sidebar-brand {
  display: flex; align-items: center; gap: var(--s-3);
  /* Aligné horizontalement sur les nav-items (padding sidebar-nav 12 + nav-item left 16 = 28). */
  padding: 0 calc(var(--s-3) + var(--s-4));
  height: var(--topbar-h);
  border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: var(--fs-md); color: var(--text);
  white-space: nowrap; overflow: hidden;
  text-decoration: none;
}
.sidebar-brand-icon {
  width: 24px; height: 24px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.sidebar-brand-icon img { height: 24px; width: auto; max-width: 100%; display: block; }
.sidebar-brand .brand-text { transition: opacity var(--t-fast); }
.sidebar-collapsed .sidebar-brand { padding: 0; justify-content: center; }
.sidebar-collapsed .brand-text { display: none; }

.sidebar-nav {
  flex: 1; padding: var(--s-3); overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}

.nav-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  color: var(--text-muted);
  text-decoration: none; font-size: var(--fs-sm); font-weight: 500;
  white-space: nowrap; overflow: hidden;
  transition: background var(--t-fast), color var(--t-fast);
  position: relative;
}
.nav-item:hover { background: var(--bg-muted); color: var(--text); }
.nav-item.active {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: var(--brand-fg);
  box-shadow: var(--shadow-sm);
}
.nav-item-icon {
  width: 24px; height: 24px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
}
.sidebar-collapsed .nav-item { justify-content: center; padding: var(--s-3); }
.sidebar-collapsed .nav-item .label { display: none; }

.sidebar-toggle {
  margin: var(--s-3); padding: var(--s-2);
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--r-md); cursor: pointer;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t-fast);
}
.sidebar-toggle:hover { background: var(--bg-muted); color: var(--text); }
.sidebar-toggle svg { transition: transform var(--t-base) var(--ease); }
.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); }

/* Content area */
.content-area { grid-column: 2; min-width: 0; display: flex; flex-direction: column; }

/* Topbar */
.topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--topbar-h);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-5);
}
.topbar-menu {
  display: none;
  background: transparent; border: none; cursor: pointer;
  padding: var(--s-2); color: var(--text); font-size: 1.3rem;
}
.topbar h1.page-title {
  flex: 1; margin: 0; padding: 0;
  font-size: var(--fs-lg); font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-actions { display: flex; align-items: center; gap: var(--s-2); }
.topbar-btn {
  width: 38px; height: 38px; border-radius: var(--r-md);
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  transition: all var(--t-fast);
}
.topbar-btn:hover { background: var(--bg-muted); color: var(--text); border-color: var(--border-strong); }

.topbar .user-menu-btn {
  width: auto; padding: 0 var(--s-3) 0 var(--s-2); gap: var(--s-2);
}
.topbar .user-menu-btn .user-badge {
  background: transparent; padding: 0; font-size: var(--fs-sm); font-weight: 600;
  color: var(--text);
}

/* Main — pleine largeur sur toutes les pages (les pages qui ont besoin
   d'une largeur lisible bornée peuvent borner leur propre conteneur). */
.main { flex: 1; padding: var(--s-6) var(--s-5); width: 100%; }

/* Bottom nav (mobile) */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 99;
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0));
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  justify-content: space-around;
}
.bn-item {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: var(--s-2);
  text-decoration: none; color: var(--text-subtle);
  background: transparent; border: none; cursor: pointer;
  transition: color var(--t-fast);
  font-family: inherit;
}
.bn-item .icon  { font-size: 1.35rem; }
.bn-item .label { font-size: 11px; font-weight: 500; }
.bn-item:hover  { color: var(--text); }
.bn-item.active { color: var(--brand); }
.bn-item.active .icon { transform: scale(1.05); }

/* Popover (user menu in topbar) */
.popover {
  position: fixed; z-index: 200;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: var(--s-2); min-width: 200px;
  display: none; flex-direction: column; gap: 2px;
  animation: popIn var(--t-base) var(--ease);
}
.popover.open { display: flex; }
.popover a, .popover button {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3); border-radius: var(--r-sm);
  text-decoration: none; color: var(--text);
  background: transparent; border: none; cursor: pointer;
  font-family: inherit; font-size: var(--fs-sm); font-weight: 500; text-align: left;
}
.popover a:hover, .popover button:hover { background: var(--bg-muted); }
.popover .danger { color: var(--accent); }
.popover .danger:hover { background: rgba(220, 38, 38, .1); }
@keyframes popIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* More drawer (mobile) */
.more-drawer {
  position: fixed; bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0) + 8px);
  left: var(--s-2); right: var(--s-2); z-index: 200;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--s-3);
  display: none; flex-direction: column; gap: 2px;
  animation: popIn var(--t-base) var(--ease);
}
.more-drawer.open { display: flex; }
.more-drawer a, .more-drawer button {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4); border-radius: var(--r-md);
  text-decoration: none; color: var(--text);
  background: transparent; border: none; cursor: pointer;
  font-family: inherit; font-size: var(--fs-md); font-weight: 500; text-align: left; min-height: 44px;
}
.more-drawer a:hover, .more-drawer button:hover { background: var(--bg-muted); }
.more-drawer .danger { color: var(--accent); }

/* Icon + label alignement (popover + more-drawer) — uniformise emoji
   et texte sur la même ligne de base, comme les nav-items de la sidebar. */
.popover .menu-icon, .more-drawer .menu-icon {
  width: 20px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; line-height: 1;
}
.more-drawer .menu-icon { width: 24px; font-size: 1.1rem; }
.popover .menu-label, .more-drawer .menu-label { line-height: 1.2; }

/* Responsive */
@media (max-width: 1023px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { transform: translateX(-100%); width: var(--sidebar-w); }
  .app-shell.sidebar-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .app-shell.sidebar-open::before {
    content: ""; position: fixed; inset: 0; background: var(--bg-overlay);
    z-index: 99; animation: popIn var(--t-fast) var(--ease);
  }
  .topbar-menu { display: flex; }
  .sidebar-collapsed .sidebar { width: var(--sidebar-w); }
  .sidebar-toggle { display: none; }
  .sidebar-collapsed .sidebar-brand { padding: 0 var(--s-5); justify-content: flex-start; }
  .sidebar-collapsed .brand-text { opacity: 1; width: auto; }
  .sidebar-collapsed .nav-item { justify-content: flex-start; padding: var(--s-3) var(--s-4); }
  .sidebar-collapsed .nav-item .label { display: inline; }
}
@media (max-width: 767px) {
  .bottom-nav { display: flex; }
  .main       { padding-bottom: calc(var(--bottomnav-h) + var(--s-5)); }
  .topbar     { padding: 0 var(--s-3); }
  .topbar h1.page-title { font-size: var(--fs-md); }
  .main       { padding: var(--s-4) var(--s-3); padding-bottom: calc(var(--bottomnav-h) + var(--s-5)); }
  .topbar .user-menu-btn .user-badge { display: none; }
}

/* ═══ COMPONENTS ════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 1px solid transparent; border-radius: var(--r-md);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: all var(--t-fast);
  min-height: 40px; white-space: nowrap;
}
.btn-primary   { background: var(--brand); color: var(--brand-fg); }
.btn-primary:hover   { background: var(--brand-dark); }
.btn-secondary { background: var(--bg-muted); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--border); }
.btn-ghost     { background: transparent; color: var(--text-muted); }
.btn-ghost:hover     { background: var(--bg-muted); color: var(--text); }
.btn-danger    { background: var(--accent); color: white; }
.btn-danger:hover    { background: #b91c1c; }
.btn-sm { padding: var(--s-2) var(--s-3); min-height: 32px; font-size: var(--fs-xs); }
.btn-lg { padding: var(--s-4) var(--s-5); min-height: 48px; font-size: var(--fs-md); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Tile (home dashboard) */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-4);
}
.tile {
  display: flex; align-items: flex-start; gap: var(--s-4);
  padding: var(--s-5);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-decoration: none; color: inherit;
  transition: all var(--t-fast);
  box-shadow: var(--shadow-sm);
}
.tile:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.tile-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--bg-muted); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
}
.tile-body  { flex: 1; min-width: 0; }
.tile-title { margin: 0 0 var(--s-1); font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.tile-desc  { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.4; }
.tile.tile-danger .tile-icon { background: rgba(220, 38, 38, .1); color: var(--accent); }
.tile.tile-danger:hover { border-color: var(--accent); }
.tile.tile-warm .tile-icon { background: rgba(234, 88, 12, .1); color: var(--accent-warm); }
.tile.tile-warm:hover { border-color: var(--accent-warm); }
.tile.tile-brand .tile-icon { background: rgba(25, 135, 84, .1); color: var(--brand); }

/* Section header */
.section-h {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 var(--s-4); gap: var(--s-3);
}
.section-h h2 { margin: 0; font-size: var(--fs-xl); font-weight: 700; color: var(--text); }
.section-h .muted { font-size: var(--fs-sm); color: var(--text-muted); }


/* ═══ LEGACY (rules ci-dessous conservées pendant la migration) ═════════ */

[data-theme="dark"] { color-scheme: dark; }

/* ── Bouton toggle ────────────────────────────────────────────────────── */
.dark-toggle {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0;
  background: transparent; border: 1px solid #d1d5db; color: #6b7280;
  font-size: 1.1rem; cursor: pointer; transition: background .15s;
}
.dark-toggle.dt-ready { display: flex; }
.dark-toggle:hover { background: #f0f4f8; }

/* menu.php : header vert → variante blanche du bouton */
header .dark-toggle {
  border-color: rgba(255,255,255,.35);
  color: rgba(255,255,255,.85);
}
header .dark-toggle:hover { background: rgba(255,255,255,.15); color: white; }

[data-theme="dark"] .dark-toggle { border-color: #4b5563; color: #fbbf24; }
[data-theme="dark"] .dark-toggle:hover { background: #374151; }
[data-theme="dark"] header .dark-toggle { border-color: rgba(255,255,255,.25); color: #fbbf24; }
[data-theme="dark"] header .dark-toggle:hover { background: rgba(255,255,255,.1); }

/* ── Fond & corps ─────────────────────────────────────────────────────── */
[data-theme="dark"] body { background: #111827; color: #f9fafb; }

/* ── En-tête pages intérieures (.page-header) ─────────────────────────── */
/* Unifie le rendu avec les cartes (shadow et rayon), indépendamment du
   CSS inline défini par chaque page. */
.page-header {
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
[data-theme="dark"] .page-header {
  background: #1f2937;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
[data-theme="dark"] .page-header h1 { color: #f9fafb; }
[data-theme="dark"] .user-badge { background: #064e3b; color: #6ee7b7; }

/* ── Cartes ───────────────────────────────────────────────────────────── */
[data-theme="dark"] .card {
  background: #1f2937;
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
}
[data-theme="dark"] .card:hover { box-shadow: 0 14px 36px rgba(0,0,0,.65); }
[data-theme="dark"] .card h2 { color: #f9fafb; }
[data-theme="dark"] .card p  { color: #9ca3af; }
[data-theme="dark"] .card-admin h2 { color: #f87171; }

/* ── Conteneurs ───────────────────────────────────────────────────────── */
[data-theme="dark"] .content-wrapper {
  background: #1f2937;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
[data-theme="dark"] .calendar-wrapper {
  background: #1f2937;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
[data-theme="dark"] .calendar-wrapper iframe {
  filter: invert(1) hue-rotate(180deg);
}

/* ── Organisation du CS — liens tel/mail & cartes mobiles ────────────── */
[data-theme="dark"] a.tel-link  { color: #6ee7b7; }
[data-theme="dark"] a.mail-link { color: #9ca3af; }
[data-theme="dark"] a.mail-link:hover { color: #6ee7b7; }
[data-theme="dark"] .empty-cell { color: #4b5563; }
[data-theme="dark"] .search-row input,
[data-theme="dark"] .search-row select {
  background: #111827; color: #f9fafb; border-color: #4b5563;
}
[data-theme="dark"] #agent-count { color: #9ca3af; }

@media (max-width: 640px) {
  [data-theme="dark"] .card table tr {
    background: #273548; border-color: #374151;
  }
  [data-theme="dark"] .card table a.tel-link {
    background: #064e3b; color: #6ee7b7; border-color: #065f46;
  }
  [data-theme="dark"] .card table a.mail-link {
    background: #1f2937; color: #d1d5db; border-color: #374151;
  }
  [data-theme="dark"] #agents-table td:nth-child(3) { color: #9ca3af; }
}

/* ── Calendrier — planning prochains événements ──────────────────────── */
[data-theme="dark"] .planning-group {
  background: #1f2937;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
[data-theme="dark"] .planning-group h2 {
  color: #f9fafb;
  border-bottom-color: #374151;
}
[data-theme="dark"] .planning-group h2 .count {
  background: #374151;
  color: #9ca3af;
}
[data-theme="dark"] .planning-list li { border-bottom-color: #374151; }
[data-theme="dark"] .planning-list .date  { color: #6ee7b7; }
[data-theme="dark"] .planning-list .title { color: #e5e7eb; }
[data-theme="dark"] .planning-list .loc   { color: #9ca3af; }
[data-theme="dark"] .planning-empty       { color: #6b7280; }

/* ── Tableaux ─────────────────────────────────────────────────────────── */
[data-theme="dark"] caption { color: #f9fafb; }
[data-theme="dark"] table th {
  background: #273548; color: #d1d5db; border-color: #374151;
}
[data-theme="dark"] table td { border-color: #374151; color: #e5e7eb; }
[data-theme="dark"] table tr:hover td { background: #162232; }

/* ── Onglets ──────────────────────────────────────────────────────────── */
[data-theme="dark"] .tabs { border-color: #374151; }
[data-theme="dark"] .tab-button { color: #9ca3af; }
[data-theme="dark"] .tab-button:hover { background: #374151; color: #f9fafb; }
[data-theme="dark"] .tab-button.active:hover { background: #198754; color: white; }
[data-theme="dark"] .tab-btn { color: #9ca3af; }
[data-theme="dark"] .tab-btn:hover:not(.active) { background: #374151; color: #f9fafb; }

/* ── Statistiques ─────────────────────────────────────────────────────── */
[data-theme="dark"] .stat-box { background: #273548; border-color: #374151; }
[data-theme="dark"] .stat-box h3 { color: #f9fafb; }
[data-theme="dark"] .stat-item { border-color: #374151; color: #e5e7eb; }
[data-theme="dark"] .stat-bar { background: #374151; }

/* ── Navigation flottante (nav.php) ───────────────────────────────────── */
[data-theme="dark"] .user-menu {
  background: #1f2937;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
[data-theme="dark"] .user-menu a { color: #e5e7eb; }
[data-theme="dark"] .user-menu a:hover { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .user-menu .menu-danger { color: #f87171; }
[data-theme="dark"] .user-menu .menu-danger:hover { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .user-menu-sep { border-color: #374151; }

[data-theme="dark"] .nav-panel {
  background: #1f2937;
  box-shadow: 0 8px 32px rgba(0,0,0,.65);
}
[data-theme="dark"] .nav-panel a { color: #e5e7eb; }
[data-theme="dark"] .nav-panel a:hover { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .nav-panel a.nav-active { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .nav-title { color: #6b7280; }
[data-theme="dark"] .nav-sep  { border-color: #374151; }

/* ── Saisie FMPA & liste FMPA du centre ──────────────────────────────── */
[data-theme="dark"] .saisie-desc-oblig { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .saisie-desc-compl { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .th-oblig { background: #064e3b !important; color: #6ee7b7; }
[data-theme="dark"] .th-suppl  { background: #1e3a5f !important; color: #93c5fd; }
[data-theme="dark"] .fmpa-card { border-color: #374151; }
[data-theme="dark"] .fmpa-card-header { background: #1f2937; }
[data-theme="dark"] .fmpa-card-header:hover { background: #273548; }
[data-theme="dark"] .fmpa-card-body { border-color: #374151; }
[data-theme="dark"] .badge-geef    { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .badge-pending { background: #451a03; color: #fde68a; }
[data-theme="dark"] .fmpa-date, [data-theme="dark"] .fmpa-theme,
[data-theme="dark"] .fmpa-saisi { color: #e5e7eb; }
[data-theme="dark"] .btn-geef   { border-color: #34d399; color: #34d399; }
[data-theme="dark"] .btn-geef:hover   { background: #34d399; color: #064e3b; }
[data-theme="dark"] .btn-ungeef { border-color: #f87171; color: #f87171; }
[data-theme="dark"] .btn-ungeef:hover { background: #f87171; color: #1f2937; }

/* ── Admin — modals ───────────────────────────────────────────────────── */
[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,.75); }
[data-theme="dark"] .modal-box {
  background: #1f2937;
  box-shadow: 0 20px 50px rgba(0,0,0,.7);
}
[data-theme="dark"] .modal-box h3    { color: #f9fafb; }
[data-theme="dark"] .modal-box label { color: #d1d5db; }
[data-theme="dark"] .modal-box input,
[data-theme="dark"] .modal-box select,
[data-theme="dark"] .modal-box textarea {
  background: #111827; color: #f9fafb; border-color: #4b5563;
}

/* ── Admin — labels & boutons annuler/sauver ──────────────────────────── */
[data-theme="dark"] .btn-annuler { background: #374151; color: #d1d5db; }
[data-theme="dark"] .btn-annuler:hover { background: #4b5563; }

/* ── Formulaires (reservation.php) ───────────────────────────────────── */
[data-theme="dark"] label { color: #d1d5db; }
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #111827; color: #f9fafb; border-color: #4b5563;
}

/* ── Alertes & messages ───────────────────────────────────────────────── */
[data-theme="dark"] .alert-success { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .alert-error   { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .alert-info    { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .empty         { color: #9ca3af; }
[data-theme="dark"] .cal-status    { color: #9ca3af; }
[data-theme="dark"] .conflit-warn  { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .pw-box        { background: #064e3b; color: #6ee7b7; }

/* =====================================================================
   RESPONSIVE — Tablettes (≤ 900px) et mobiles (≤ 640px / ≤ 480px)
   ===================================================================== */

/* ── Utilitaire : conteneur scrollable pour les tables larges ─────── */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  margin-top: 1.5rem;
}
.table-scroll table { margin-top: 0; }

/* min-width par contexte pour garantir la lisibilité */
#tableaux      .table-scroll table { min-width: 640px; }
#tab-agents    .table-scroll table { min-width: 860px; }
#tab-reservations .table-scroll table { min-width: 560px; }
.card          .table-scroll table { min-width: 480px; }

/* Tables en mode cartes mobiles : annule les min-width imposés plus haut
   pour éviter un débordement horizontal qui fait zoomer la viewport iOS. */
@media (max-width: 640px) {
  .card .table-scroll table { min-width: 0; }
}

/* iOS zoom automatiquement au focus sur un <input>/<select>/<textarea>
   dont la font-size est inférieure à 16px. Plusieurs pages définissent
   font-size:.95rem ; on force 16px en mobile pour éviter cet effet. */
@media (max-width: 640px) {
  input, textarea, select { font-size: 16px !important; }
}

/* ── En-tête commun ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  .page-header { padding: .9rem 1rem; gap: .5rem; margin-bottom: 1rem; }
  .page-header h1 {
    font-size: 1.15rem; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .header-actions { gap: .4rem; flex-shrink: 0; }
  .user-badge { font-size: .8rem; padding: .35rem .65rem; }
  .nav-fab, .dark-toggle { width: 38px; height: 38px; font-size: 1.05rem; }
  .btn-setup { font-size: .82rem; padding: .45rem .8rem; }
}
@media (max-width: 480px) {
  /* Badge masqué sur très petits écrans — visible dans le menu nav */
  .user-badge { display: none; }
}

/* ── Onglets ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .tabs { gap: .2rem; }
  .tab-button, .tab-btn { padding: .55rem .85rem; font-size: .85rem; }
  .content-wrapper { padding: 1rem; border-radius: 10px; }
}
@media (max-width: 380px) {
  .tab-button, .tab-btn { padding: .5rem .55rem; font-size: .8rem; }
}

/* ── Cartes intérieures ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .card { padding: 1.25rem; border-radius: 10px; }
  .card h2 { font-size: 1rem; }
  /* Admin : contenu (max-width 1100px) avec padding body suffit */
  .content { gap: 1rem; }
}

/* ── Dashboard — statistiques ─────────────────────────────────────── */
@media (max-width: 700px) {
  .stats-container { grid-template-columns: 1fr !important; }
}

/* ── Admin — boutons d'action dans les tables ─────────────────────── */
@media (max-width: 900px) {
  .actions { flex-direction: column; align-items: flex-start; }
}

/* ── Admin — modals ───────────────────────────────────────────────── */
@media (max-width: 560px) {
  .modal-box { padding: 1.5rem 1.25rem; }
  .grid-2 { grid-template-columns: 1fr !important; gap: 0; }
  .modal-actions { flex-direction: column-reverse; gap: .5rem; }
  .modal-actions > * { width: 100%; text-align: center; }
}

/* ── Réservation — grilles de formulaire ──────────────────────────── */
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr !important; gap: 0; }
  /* Empile date et heure : l'input time iOS a une taille intrinsèque qui
     fait déborder la grille quand on force une colonne à 110px. */
  .date-time-pair { grid-template-columns: 1fr !important; }
  /* iOS donne aux <input type="date|time"> une min-width intrinsèque qui
     dépasse la colonne 1fr et fait déborder la carte à droite. */
  .form-row > *, .date-time-pair > * { min-width: 0; }
  .date-time-pair > input { width: 100%; max-width: 100%; }
}

/* ── Menu principal — grille de cartes ────────────────────────────── */
@media (max-width: 360px) {
  .grid { grid-template-columns: 1fr !important; }
}

/* ── Calendrier — hauteur de l'iframe ─────────────────────────────── */
@media (max-width: 768px) {
  .calendar-wrapper { padding: 1rem; }
  .calendar-wrapper iframe { min-height: 450px; }
}
@media (max-width: 480px) {
  .calendar-wrapper iframe { min-height: 340px; }
}

/* ── Navigation flottante — pleine largeur sur mobile ─────────────── */
@media (max-width: 400px) {
  .nav-panel {
    left: 8px !important;
    right: 8px !important;
    min-width: unset;
  }
}