/* ═══════════════════════════════════════════════════════════════════════
   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);

  /* Status / feedback — composants .ui-* (badges, alertes, barres, segmenté).
     -bg/-fg/-bd = fond clair / texte foncé / bordure ; valeur nue = teinte pleine. */
  --ok:     #16a34a; --ok-bg:     rgba(22,163,74,.12);  --ok-fg:     #166534; --ok-bd:     rgba(22,163,74,.30);
  --warn:   #d97706; --warn-bg:   rgba(234,88,12,.12);  --warn-fg:   #9a3412; --warn-bd:   rgba(234,88,12,.30);
  --danger: #dc2626; --danger-bg: rgba(220,38,38,.12);  --danger-fg: #991b1b; --danger-bd: rgba(220,38,38,.30);
  --info:   #2563eb; --info-bg:   rgba(59,130,246,.12); --info-fg:   #1d4ed8; --info-bd:   rgba(59,130,246,.30);

  /* Équipes de garde (A/B/C) — fond clair + texte. */
  --eq-a: #1e40af; --eq-a-bg: #dbeafe;
  --eq-b: #065f46; --eq-b-bg: #d1fae5;
  --eq-c: #92400e; --eq-c-bg: #fde68a;

  /* 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);

  /* Status / feedback — variantes sombres (texte plus clair, fond plus dense). */
  --ok:     #22c55e; --ok-bg:     rgba(34,197,94,.16);  --ok-fg:     #4ade80; --ok-bd:     rgba(34,197,94,.45);
  --warn:   #f59e0b; --warn-bg:   rgba(234,179,8,.16);  --warn-fg:   #fdba74; --warn-bd:   rgba(251,146,60,.45);
  --danger: #ef4444; --danger-bg: rgba(239,68,68,.18);  --danger-fg: #f87171; --danger-bd: rgba(239,68,68,.50);
  --info:   #3b82f6; --info-bg:   rgba(59,130,246,.18); --info-fg:   #93c5fd; --info-bd:   rgba(59,130,246,.50);

  --eq-a: #93c5fd; --eq-a-bg: rgba(59,130,246,.18);
  --eq-b: #6ee7b7; --eq-b-bg: rgba(16,185,129,.18);
  --eq-c: #fcd34d; --eq-c-bg: rgba(217,119,6,.22);
}

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

/* ───────────────────────────────────────────────────────────────────────
   Compatibilité Safari iOS : <select> natif ignore padding et min-height,
   donc rend à ~22px sur iPhone même quand on le style. On désactive
   l'apparence native partout, on dessine un chevron custom et on impose
   une hauteur tactile minimale standard à TOUS les champs (input/select/
   textarea) pour qu'ils cohabitent visuellement alignés dans un même
   formulaire (iOS Human Interface Guidelines : touch target ≥ 44px).
   Les pages avec filtres compacts peuvent surcharger via leur CSS local.
   ─────────────────────────────────────────────────────────────────────── */
select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 36px !important;
}
input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]),
select:not([multiple]):not([size]),
textarea {
  min-height: 44px;
}
textarea { min-height: 80px; }

/* iOS Safari rend les inputs date/time/month/week avec un chrome natif
   (date affichée centrée style bouton + spinners) qui impose un min-content
   nettement plus large que width:100%. Cela fait déborder le conteneur sur
   iPhone alors que tout est OK en headless WebKit. On retire ce chrome natif
   pour que ces inputs se comportent comme des inputs texte ordinaires.
   Le picker s'ouvre toujours au tap. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}

@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;
  /* PWA plein écran : décale le contenu de la barre d'état (haut), du home
     indicator (bas) et de l'encoche en paysage (gauche). Insets = 0 ailleurs. */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}
.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: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.sidebar-brand-icon img { height: 32px; 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: 28px; height: 28px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
}
.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); }

/* Versions déployées (bas de sidebar) : dev ET prod, chacune SHA git + date. */
.sidebar-footer {
  padding: var(--s-2) calc(var(--s-3) + var(--s-4));
  border-top: 1px solid var(--border);
  font-size: 11px; color: var(--text-muted); line-height: 1.5;
  display: flex; flex-direction: column; gap: 3px;
  white-space: nowrap; overflow: hidden;
}
.sidebar-footer .sf-row { display: flex; align-items: center; gap: 6px; }
.sidebar-footer .sf-env {
  font-weight: 700; letter-spacing: .5px; font-size: 10px;
  padding: 1px 6px; border-radius: var(--r-pill); flex-shrink: 0;
}
.sidebar-footer .sf-env-dev  { background: rgba(75, 85, 99, .15); color: #374151; }
.sidebar-footer .sf-env-prod { background: rgba(25, 135, 84, .15); color: #166534; }
.sidebar-footer .sf-sha  { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.sidebar-footer .sf-ver  { font-weight: 700; }   /* PROD : tag de release (v1.2.3) mis en avant */
.sidebar-footer .sf-date { opacity: .8; }
.sidebar-footer .sf-na   { opacity: .55; }
.sidebar-footer .sf-here { margin-left: auto; color: var(--brand); font-size: 14px; line-height: 1; }
.sidebar-collapsed .sidebar-footer { display: none; }
[data-theme="dark"] .sidebar-footer .sf-env-dev  { background: #374151; color: #d1d5db; }
[data-theme="dark"] .sidebar-footer .sf-env-prod { background: #064e3b; color: #6ee7b7; }

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

/* Topbar */
.topbar {
  position: sticky; top: 0; z-index: 50;
  /* PWA plein écran : le fond de la topbar s'étend sous la barre d'état (notch),
     la hauteur de contenu reste --topbar-h (box-sizing: border-box). Insets = 0
     hors standalone / appareil sans encoche → aucun effet ailleurs. */
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
  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: env(safe-area-inset-top) calc(var(--s-5) + env(safe-area-inset-right)) 0 calc(var(--s-5) + env(safe-area-inset-left));
}
.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;
}
.page-title-icon { margin-right: .4em; font-size: 1.05em; line-height: 1; }
.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; width: 100%;
  /* PWA : marge latérale = encoche paysage ; marge basse = home indicator. */
  padding: var(--s-6)
           calc(var(--s-5) + env(safe-area-inset-right))
           calc(var(--s-6) + env(safe-area-inset-bottom))
           calc(var(--s-5) + env(safe-area-inset-left));
}

/* 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); } }

/* Icon + label alignement dans le popover utilisateur (topbar). */
.popover .menu-icon {
  width: 20px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; line-height: 1;
}
.popover .menu-label { line-height: 1.2; }

/* ── Notifications (topbar : 🔔 + pastille, popover « actions en attente ») ── */
.notif-btn { position: relative; overflow: visible; }
.notif-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box;
  background: var(--accent); color: #fff;
  border: 2px solid var(--bg-elevated); border-radius: var(--r-pill);
  font-size: 10px; font-weight: 800; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.notif-popover { min-width: 264px; max-width: 320px; }
.notif-popover .notif-head {
  padding: var(--s-2) var(--s-3) var(--s-1);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; color: var(--text-muted);
}
.notif-popover .notif-empty {
  padding: var(--s-3); font-size: var(--fs-sm); color: var(--text-muted);
}
.notif-popover a .menu-label { flex: 1; }
.notif-count {
  flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box;
  background: var(--accent); color: #fff; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Responsive */
@media (max-width: 1023px) {
  .app-shell { grid-template-columns: 1fr; }
  /* Sans ce override, .content-area garde grid-column: 2 (défini pour desktop) ce
     qui force la grille à créer une 2e colonne implicite et pousse tout le contenu
     d'une ~27px vers la droite. */
  .content-area { grid-column: 1; }
  .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) {
  .topbar     { padding: env(safe-area-inset-top) calc(var(--s-3) + env(safe-area-inset-right)) 0 calc(var(--s-3) + env(safe-area-inset-left)); }
  .topbar h1.page-title { font-size: var(--fs-md); }
  .main       { padding: var(--s-4) calc(var(--s-3) + env(safe-area-inset-right)) calc(var(--s-4) + env(safe-area-inset-bottom)) calc(var(--s-3) + env(safe-area-inset-left)); }
  .topbar .user-menu-btn .user-badge { display: none; }

  /* iPhone 12 = 390px viewport. Tuiles d'accueil compactes : 1 colonne,
     padding réduit, icône plus petite, gap inter-tuiles serré. */
  .tile-grid { grid-template-columns: 1fr; gap: var(--s-3); }
  .tile      { padding: var(--s-4); gap: var(--s-3); border-radius: var(--r-md); }
  .tile-icon { width: 40px; height: 40px; font-size: 1.4rem; }
  .tile-title { font-size: var(--fs-md); }
  .tile-desc  { font-size: var(--fs-xs); }

  /* Onglets : pas de coupure de mot, label court si fourni via .tab-short */
  .tab-btn, .tab-button { white-space: nowrap; }
}

/* Système universel de labels d'onglet "court / long" :
   - <span class="tab-full">…</span>  visible desktop / tablette
   - <span class="tab-short">…</span> visible uniquement en mobile (≤767px) */
.tab-short { display: none; }
@media (max-width: 767px) {
  .tab-full  { display: none !important; }
  .tab-short { display: inline; }
}

/* ═══ PWA — app installée sur l'écran d'accueil (mode plein écran) ═══════════
   N'agit que lorsque l'app est lancée en standalone (depuis l'icône iPhone/Android).
   Le fond du <html> = fond des barres (topbar/sidebar) pour que la zone de la barre
   d'état et le rebond élastique se fondent avec le chrome. Les décalages de contenu
   (notch / home indicator) sont gérés par les env(safe-area-inset-*) ci-dessus. */
@media (display-mode: standalone) {
  html { background: var(--bg-elevated); }
  body { overscroll-behavior-y: 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); }

/* ── Container "tuile" englobant onglets + contenu ───────────────────────
   Pattern unifié pour les pages à sous-onglets : tabs + panels dans un
   seul wrapper (fond bg-elevated, bordure, radius, padding). Aligné avec
   dashboard.php. Override mobile en bas du fichier. */
.content-wrapper {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
/* Les cards internes (.card / .resa-card / .vsav-card / .inv-card /
   .saisir-card / .ctrl-card) sont aplaties pour éviter le double-fond quand
   on les imbrique dans une .content-wrapper qui sert déjà de tuile. La
   structure HTML reste inchangée — c'est uniquement leur rendu visuel qui
   passe en transparent. Layout préservé (overflow, min-width). */
.content-wrapper .card,
.content-wrapper .resa-card,
.content-wrapper .vsav-card,
.content-wrapper .inv-card,
.content-wrapper .saisir-card,
.content-wrapper .pg-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* ── Onglets : hauteur unifiée (desktop) ─────────────────────────────────
   Chaque page (admin, dashboard, vsav, organisation, …) définit son propre
   .tab-btn / .tab-button / .vsav-tab avec des paddings hétérogènes (de
   .65rem à .75rem en vertical → 40-42px de haut). On force une hauteur
   homogène un peu plus compacte (~34px) sur tous les onglets, en desktop.
   Les overrides mobile (.55rem) gardent la main grâce au media query. */
@media (min-width: 768px) {
  .tabs .tab-btn,
  .tabs .tab-button,
  .vsav-tabs .vsav-tab,
  .pg-tabs .pg-tab-btn,
  .lt-tabs .lt-tab-btn {
    padding: var(--s-2) var(--s-4) !important;
    min-height: 34px;
    font-size: var(--fs-sm);
  }
}

/* ── Vues "dev-only" (présentes en dev, masquées en prod) ─────────────────
   En dev, on grise (icône emoji incluse via le filtre grayscale) les items de
   nav et les tuiles home des vues qui ne seront pas accessibles en prod, tout
   en les laissant cliquables. En prod, la classe .dev-only n'est jamais posée
   (cf. prod_devonly_class()), donc aucun effet. */
.nav-item.dev-only,
.tile.dev-only {
  filter: grayscale(1);
  opacity: .5;
}
.nav-item.dev-only:hover,
.tile.dev-only:hover {
  opacity: .75;
}

/* ── Modules « à accès restreint » ────────────────────────────────────────
   Affichés EN COULEUR et UNIQUEMENT aux profils qui y ont accès
   (RESTRICTED_MODULES 'visible' => 'roles' dans lib/prod.php → masqués aux
   non-autorisés). Donc plus de grisage ni de cadenas : un agent ne voit que
   les modules qu'il peut réellement ouvrir. Les classes .restricted /
   .restricted-locked restent posées (accroche éventuelle) mais sans style :
   le verrou n'est plus rendu puisque les non-autorisés ne voient rien. */
/* Fourrier : module restreint mais mis en avant — icône/tuile en couleur
   (pas de grisaille) pour les agents autorisés ; reste grisé si verrouillé. */
.tile.tile-fourrier:not(.restricted-locked),
.nav-item.nav-key-fourrier:not(.restricted-locked) {
  filter: none;
  opacity: 1;
}
.nav-lock,
.tile-lock {
  font-size: .85em;
  margin-left: .35em;
  opacity: .8;
}
.nav-item .nav-lock { margin-left: auto; }

/* Cadenas « module restreint le temps du développement » : petit badge en coin
   de l'icône (sidebar + tuile home). Emoji + cercle de fond → lisible et adapté
   aux thèmes clair/sombre via les tokens. */
.nav-item-icon, .tile-icon { position: relative; }
.dev-lock {
  position: absolute; right: -5px; bottom: -4px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; font-size: 9px; line-height: 1;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
.tile-icon .dev-lock { right: -6px; bottom: -6px; width: 18px; height: 18px; font-size: 11px; }
.sidebar-collapsed .nav-item-icon .dev-lock { right: -4px; bottom: -3px; }


/* ═══ 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;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   Help system — bouton "?" à droite du titre + drawer latéral
   contenant workflow + commentaires utilisateurs.
   Cf. lib/help.php
   ──────────────────────────────────────────────────────────────────── */
.help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  margin-left: .65rem;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  border-radius: 50%;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  padding: 0;
  transition: all .15s ease;
  vertical-align: middle;
}
.help-btn:hover {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #78350f;
}

.help-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 999;
  animation: helpBackdropIn .2s ease;
}
@keyframes helpBackdropIn { from { opacity: 0; } to { opacity: 1; } }

.help-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 92vw);
  background: var(--bg-elevated);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(0,0,0,0.12);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
  /* PWA plein écran : barre d'état (haut), bord droit (encoche paysage), home indicator (bas). */
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}
.help-drawer.open { transform: translateX(0); }

.help-drawer-head {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  background: var(--bg-muted);
  flex-shrink: 0;
}

/* Wrapper scrollable sous le header : porte le scroll de tout (workflow + commentaires + form),
   évite que la section commentaires soit poussée hors écran sur Safari iOS quand le workflow est long. */
.help-drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.help-drawer-head h3 { margin: 0; font-size: 1rem; }
.help-page-ref {
  font-size: 11px;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  display: block;
  margin-top: 2px;
}
.help-close {
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: 6px;
}
.help-close:hover { background: var(--border); color: var(--text); }

.help-drawer .help-section-title {
  font-size: 1rem;
  margin: 1rem 1.25rem 0;
  color: var(--text);
}
.help-drawer .help-block {
  padding: .75rem 1.25rem;
  border-bottom: 1px dashed var(--border);
}
.help-drawer .help-block h5 {
  margin: 0 0 .35rem;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.help-drawer .help-block p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text); }

/* Flow compact : étapes en cards avec arrow connectrice verticale */
.help-drawer .help-flow {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.help-flow-step {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: .5rem;
  position: relative;
  padding-bottom: 1.1rem;
  align-items: start;
}
.help-flow-step[data-last="1"] { padding-bottom: 0; }

/* Trait vertical reliant les numéros consécutifs */
.help-flow-step:not([data-last="1"])::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 28px;
  bottom: 2px;
  width: 2px;
  background: var(--border);
  z-index: 0;
}
/* Flèche en bas du trait */
.help-flow-step:not([data-last="1"])::after {
  content: "";
  position: absolute;
  left: 8px;
  bottom: -1px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--border);
  z-index: 0;
}

.help-flow-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #b22222;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.help-flow-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid #555;
  border-radius: 6px;
  padding: .4rem .55rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Couleurs par acteur (numéro + bordure gauche de la card) */
.help-flow-step.help-actor-admin   .help-flow-num { background: #1B3A57; }
.help-flow-step.help-actor-admin   .help-flow-card{ border-left-color: #1B3A57; }
.help-flow-step.help-actor-system  .help-flow-num { background: #6b7280; }
.help-flow-step.help-actor-system  .help-flow-card{ border-left-color: #6b7280; background: var(--bg-muted); }
.help-flow-step.help-actor-vsav    .help-flow-num { background: #B22222; }
.help-flow-step.help-actor-vsav    .help-flow-card{ border-left-color: #B22222; }
.help-flow-step.help-actor-tech    .help-flow-num { background: #3D478C; }
.help-flow-step.help-actor-tech    .help-flow-card{ border-left-color: #3D478C; }
.help-flow-step.help-actor-garde   .help-flow-num { background: #0F766E; }
.help-flow-step.help-actor-garde   .help-flow-card{ border-left-color: #0F766E; }
.help-flow-step.help-actor-default .help-flow-num { background: #555; }

.help-flow-actor {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  color: #555;
  line-height: 1.1;
}
.help-flow-step.help-actor-admin   .help-flow-actor { color: #1B3A57; }
.help-flow-step.help-actor-system  .help-flow-actor { color: #6b7280; }
.help-flow-step.help-actor-vsav    .help-flow-actor { color: #B22222; }
.help-flow-step.help-actor-tech    .help-flow-actor { color: #3D478C; }
.help-flow-step.help-actor-garde   .help-flow-actor { color: #0F766E; }

.help-flow-text {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text);
}

.help-empty {
  margin: 1rem 1.25rem;
  padding: .85rem;
  background: var(--bg-muted);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-muted);
}
.help-empty code { background: rgba(0,0,0,.05); padding: 1px 5px; border-radius: 4px; }
.help-empty-small {
  font-size: 12.5px;
  color: var(--text-muted);
  font-style: italic;
  margin: 0 0 .75rem;
}

.help-comments {
  padding: 1rem 1.25rem 1.5rem;
  background: var(--bg);
}
.help-comments h5 {
  margin: 0 0 .65rem;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.help-comments-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.help-comments-list li {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .6rem .75rem;
}
.help-comment-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.help-comment-meta strong { color: var(--text); font-size: 12.5px; }
.help-comments-list p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text); }

.help-comment-form {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .75rem;
}
.help-comment-form label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: .35rem;
}
.help-comment-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .55rem;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  min-height: 70px;
  background: var(--bg);
  color: var(--text);
}
.help-comment-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .5rem;
  gap: .5rem;
  flex-wrap: wrap;
}
.help-comment-author { font-size: 12px; color: var(--text-muted); }
.help-comment-actions button {
  background: #b22222;
  color: #fff;
  border: none;
  padding: .45rem .9rem;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
.help-comment-actions button:hover { background: #991b1b; }

/* Mobile : drawer plein écran */
@media (max-width: 600px) {
  .help-drawer { width: 100vw; }
}

/* ═══════════════════════════════════════════════════════════════════════
   THÈME DEV — palette GRISE / GRAPHITE désaturée, distincte du vert (et des
   surfaces ardoise) de la prod, pour ne jamais confondre dev.jdecale.fr avec
   connect.cismagstatt.fr. Activée par l'attribut data-env="dev" posé sur
   <html> quand APP_MODE !== 'prod' (_layout.php / index.php / …).
   S'applique en thème clair ET sombre. Prod = vert + slate ; Dev = gris neutre.
   ═══════════════════════════════════════════════════════════════════ */
html[data-env="dev"] {
  --brand:         #4b5563;   /* gris 600 — accent gris (remplace le vert/indigo) */
  --brand-dark:    #374151;   /* gris 700 */
  --bg:            #e8e9eb;   /* fond gris clair, nettement distinct du quasi-blanc prod */
  --bg-elevated:   #f7f7f8;   /* tuiles : gris très clair, relevées sur le fond */
  --bg-muted:      #dcdee1;   /* champs / icônes de tuile */
  --border:        #c9ccd1;   /* bordures grises */
  --border-strong: #b3b7bd;
}

/* Liseré gris en haut de la sidebar : repère permanent "tu es sur dev". */
html[data-env="dev"] .sidebar { border-top: 3px solid var(--brand); }

/* Thème sombre dev : graphite NEUTRE (gris foncé, R≈G≈B), nettement différent
   du navy-ardoise de la prod (#0b1220 / #111827) ; accent gris clair. */
html[data-env="dev"][data-theme="dark"] {
  --brand:         #6b7280;   /* gris 500 — accent gris (texte blanc lisible) */
  --brand-dark:    #4b5563;   /* gris 600 */
  --bg:            #161618;   /* gris très foncé neutre — fond app-shell */
  --bg-elevated:   #242428;   /* tuiles + sidebar, légèrement relevées */
  --bg-muted:      #2e2e33;   /* champs / icônes de tuile */
  --border:        #3a3a40;   /* bordures sur le gris foncé */
  --border-strong: #4b4b52;
}
/* En dark, body + conteneurs ont des couleurs littérales (pas la var) :
   on les aligne sur le graphite dev. */
html[data-env="dev"][data-theme="dark"] body { background: #161618; color: #e7e7ea; }
html[data-env="dev"][data-theme="dark"] .card,
html[data-env="dev"][data-theme="dark"] .content-wrapper,
html[data-env="dev"][data-theme="dark"] .page-header,
html[data-env="dev"][data-theme="dark"] .calendar-wrapper,
html[data-env="dev"][data-theme="dark"] .planning-group { background: #242428; }

/* ═══════════════════════════════════════════════════════════════════════
   COMPOSANTS PARTAGÉS « .ui-* » — design system master (réf. POJ / prise_garde).
   À réutiliser sur toutes les pages. Onglets : auto-init JS dans _layout.php
   sur [data-ui-tabs]. N'affecte pas les classes .poj- et .pg- existantes.
   ═══════════════════════════════════════════════════════════════════ */

/* Conteneur de page : sections empilées sur le fond, gap homogène. */
.ui-wrap { display: flex; flex-direction: column; gap: var(--s-5); }

/* Section : titre AU NIVEAU DU FOND (pas de tuile englobante) + contenu. */
.ui-section { display: flex; flex-direction: column; gap: var(--s-4); }
.ui-section > h2 { margin: 0; font-size: var(--fs-lg); }
.ui-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.ui-head h2 { margin: 0; font-size: var(--fs-lg); }
.ui-sub  { color: var(--text-subtle); font-size: var(--fs-sm); font-weight: 600; }
.ui-muted { color: var(--text-muted); }
.ui-foot { color: var(--text-subtle); font-size: var(--fs-xs); }

/* Onglets façon POJ : desktop statique 1 ligne ; mobile ≤640px défilement. */
.ui-tabs-scroll { position: relative; }
.ui-tabs { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.ui-tabs a, .ui-tabs button {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 6px 14px; border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text-muted);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none; cursor: pointer; font-family: inherit;
}
.ui-tabs a.active, .ui-tabs button.active { background: var(--brand); border-color: var(--brand); color: var(--brand-fg); }
.ui-tab-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--brand); }
/* Puce colorée selon le niveau d'accès de l'onglet (tokens adaptés clair/sombre) :
   vert = accessible à tous · orange = encadrement (chef de garde / de service) · rouge = admin. */
.ui-tab-dot.dot-all   { background: var(--ok); }
.ui-tab-dot.dot-staff { background: var(--warn); }
.ui-tab-dot.dot-admin { background: var(--danger); }
/* Onglet actif (fond = --brand) : liseré clair pour garder la puce lisible. */
.ui-tabs .active .ui-tab-dot { box-shadow: 0 0 0 2px var(--brand-fg); }
.ui-tab-count { font-weight: 400; font-size: var(--fs-xs); opacity: .85; }
@media (max-width: 640px) {
  .ui-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
             scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 1px; }
  .ui-tabs::-webkit-scrollbar { display: none; }
  .ui-tabs a, .ui-tabs button { flex: 0 0 auto; scroll-snap-align: start; }
  .ui-tabs-scroll::before, .ui-tabs-scroll::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 30px;
    pointer-events: none; opacity: 0; transition: opacity .15s ease; z-index: 1; }
  .ui-tabs-scroll::before { left: 0;  background: linear-gradient(to right, var(--bg), rgba(0,0,0,0)); }
  .ui-tabs-scroll::after  { right: 0; background: linear-gradient(to left,  var(--bg), rgba(0,0,0,0)); }
  .ui-tabs-scroll.scrollable:not(.at-start)::before { opacity: 1; }
  .ui-tabs-scroll.scrollable:not(.at-end)::after    { opacity: 1; }
}

/* Tuiles unitaires + listes-cartes. */
.ui-card { background: var(--bg-elevated); border: 1px solid var(--border);
           border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); box-shadow: var(--shadow-sm); }
.ui-card > h2:first-child, .ui-card > h3:first-child { margin-top: 0; }
.ui-list { display: flex; flex-direction: column; gap: var(--s-2); }
.ui-item { background: var(--bg-elevated); border: 1px solid var(--border);
           border-radius: var(--r-md); padding: var(--s-3) var(--s-4); }
.ui-item-title { font-weight: 600; }
.ui-item-meta  { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 2px; }

/* Contrôles (sélecteur pilule) + boutons. */
.ui-controls { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.ui-select { padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--r-pill);
             background: var(--bg-elevated); color: var(--text); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; font-family: inherit; }
@media (max-width: 640px) { .ui-controls { flex-direction: column; align-items: stretch; } .ui-controls .ui-select { width: 100%; } }
.ui-btn { display: inline-block; text-align: center; text-decoration: none;
          background: var(--brand); color: var(--brand-fg); border: none; padding: 8px 18px;
          border-radius: var(--r-pill); font-weight: 700; font-size: var(--fs-sm); cursor: pointer; font-family: inherit; }
.ui-btn:hover { filter: brightness(.96); }
.ui-btn-soft { background: var(--bg-muted); color: var(--text); border: 1px solid var(--border); }

/* Badges pilule + statuts. */
.ui-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-pill);
            font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; background: var(--bg-muted); color: var(--text-muted); }
.ui-badge.ok     { background: var(--ok-bg);     color: var(--ok-fg); }
.ui-badge.warn   { background: var(--warn-bg);   color: var(--warn-fg); }
.ui-badge.danger { background: var(--danger-bg); color: var(--danger-fg); }
.ui-badge.info   { background: var(--info-bg);   color: var(--info-fg); }

/* Contrôle segmenté (choix exclusif : input radio masqué + label). */
.ui-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-pill); overflow: hidden; }
.ui-seg input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ui-seg label { cursor: pointer; padding: 6px 14px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted);
                border-left: 1px solid var(--border); user-select: none; display: inline-flex; align-items: center; justify-content: center; }
.ui-seg label:first-of-type { border-left: 0; }
.ui-seg input:checked + label.ok     { background: var(--ok);     color: #fff; }
.ui-seg input:checked + label.warn   { background: var(--warn);   color: #fff; }
.ui-seg input:checked + label.danger { background: var(--danger); color: #fff; }
.ui-seg input:disabled + label { cursor: default; opacity: .85; }
@media (max-width: 640px) { .ui-seg { width: 100%; } .ui-seg label { flex: 1; padding: 8px 0; } }

/* Cartes de synthèse + barres de progression. */
.ui-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-3); }
.ui-stat { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md);
           padding: var(--s-3) var(--s-4); box-shadow: var(--shadow-sm); }
.ui-stat .lbl { font-size: var(--fs-xs); color: var(--text-subtle); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--s-2); }
.ui-stat .val { font-size: var(--fs-2xl); font-weight: 800; }
.ui-bar { height: 8px; border-radius: var(--r-pill); background: var(--bg-muted); overflow: hidden; }
.ui-bar-fill { height: 100%; border-radius: var(--r-pill); background: var(--text-subtle); }
.ui-bar-fill.hi  { background: var(--ok); }
.ui-bar-fill.mid { background: var(--warn); }
.ui-bar-fill.lo  { background: var(--danger); }

/* Alertes. */
.ui-alert { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); font-size: var(--fs-sm); border: 1px solid transparent; }
.ui-alert.ok     { background: var(--ok-bg);     color: var(--ok-fg);     border-color: var(--ok-bd); }
.ui-alert.warn   { background: var(--warn-bg);   color: var(--warn-fg);   border-color: var(--warn-bd); }
.ui-alert.danger { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-bd); }
.ui-alert.info   { background: var(--info-bg);   color: var(--info-fg);   border-color: var(--info-bd); }

/* Tableau : utilitaire + wrapper scroll horizontal mobile (grosses tables). */
.ui-table { width: 100%; border-collapse: collapse; }
.ui-table th, .ui-table td { padding: var(--s-3) var(--s-4); text-align: left; font-size: var(--fs-sm); border-bottom: 1px solid var(--border); }
.ui-table th { color: var(--text-subtle); font-weight: 600; white-space: nowrap; }
.ui-table tbody tr:hover { background: var(--bg-muted); }
.ui-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Badges d'équipe. */
.ui-eq { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; }
.ui-eq.a { background: var(--eq-a-bg); color: var(--eq-a); }
.ui-eq.b { background: var(--eq-b-bg); color: var(--eq-b); }
.ui-eq.c { background: var(--eq-c-bg); color: var(--eq-c); }