/* ============================================================================
   PINLANE STAFF/ADMIN v2 : « Precision Tooling » console layer
   Construit PAR-DESSUS assets/pinlane.css (tokens + composants canoniques).
   Remplace : app-shell.css, staff-*.css, pinlane-v2.css, premium-finish.css,
   promptly-product-theme.css, pro-sober-theme.css, pinlane-kiss-refactor.css,
   app-final-guard.css, pinlane-design-system.css (surface staff + admin).
   Zéro couleur en dur : uniquement var(--...) et color-mix() sur tokens.
   Sections : 0 compat/shell · 1 sidebar · 2 auth · 3 staff head/KPI ·
   4 planning bowling · 5 planning laser · 6 liste réservations · 7 dashboard ·
   8 modale détail dashboard · 9 pages utilitaires · 10 groupes · 11 événements ·
   12 équipe & accès · 13 campagnes (agent ops) · 14 legacy fallback ·
   15 pages pv2 · 16 command palette · 17 overlays (pos/qb/toast) ·
   18 admin console · 19 ops console · 20 responsive
   ========================================================================== */

/* ----------------------------------------------------------------------------
   0. COMPAT TOKENS + SHELL
   Alias des anciens noms de variables encore présents dans les style="" inline
   des templates JS historiques (app-main.js, staff-pages-v2.js). Uniquement
   des références aux tokens pinlane.css : jamais une couleur littérale.
   -------------------------------------------------------------------------- */
:root {
  --fgx-sidebar-width: var(--sidebar-w);
}

body.staff-menu-collapsed {
  --fgx-sidebar-width: var(--sidebar-w-collapsed);
}

body.staff-mode,
body.admin-mode {
  /* Anciens tokens app-shell référencés par des style="" inline */
  --bg: var(--page);
  --bg-2: var(--surface);
  --card: var(--surface);
  --card-2: var(--subtle);
  --border: var(--line);
  --border-hover: var(--line-strong);
  --text-2: var(--muted);
  --text-3: var(--faint);
  --purple: var(--accent);
  --purple-soft: var(--accent-soft);
  --teal: var(--info);
  --amber: var(--warning);
  --red: var(--danger);
  /* Anciens tokens pinlane-v2 référencés par staff-pages-v2.js inline */
  --v2-page: var(--page);
  --v2-panel: var(--surface);
  --v2-panel-2: var(--surface);
  --v2-raised: var(--raised);
  --v2-line: var(--line);
  --v2-line-2: var(--line-strong);
  --v2-text: var(--text);
  --v2-text-2: var(--muted);
  --v2-text-3: var(--faint);
  --v2-accent: var(--accent);
  --v2-accent-2: var(--accent-strong);
  --v2-accent-bg: var(--accent-soft);
  --v2-green: var(--success);
  --v2-amber: var(--warning);
  --v2-red: var(--danger);
  --v2-blue: var(--info);
  /* Scrim des overlays : token pinlane.css */
  --scrim: var(--backdrop);

  background: var(--page);
  color: var(--text);
  overflow-x: clip;
}

/* NOTE .hidden : défini par pinlane.css (sans !important). Toute règle de ce
   fichier posant un display sur un élément que le JS toggle avec .hidden est
   gardée par :not(.hidden) pour ne jamais gagner la cascade sur l'état caché. */

/* INVARIANT 1 : audit qualité (porté de app-final-guard) */
body.staff-mode #logoutBtn, body.admin-mode #logoutBtn { display: none !important; visibility: hidden !important; pointer-events: none !important; top: auto !important; bottom: auto !important; }

/* INVARIANT 3 : géométrie main vs sidebar */
body.staff-mode main, body.admin-mode main { width: calc(100vw - var(--fgx-sidebar-width)) !important; margin-left: var(--fgx-sidebar-width) !important; }

body.staff-mode main,
body.admin-mode main {
  min-height: 100dvh;
  transition: width var(--dur-slow) var(--ease), margin-left var(--dur-slow) var(--ease);
}

/* Header : en console, seule la sidebar (fixed) reste visible */
body.staff-mode header,
body.admin-mode header {
  display: block;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

body.staff-mode header > *:not(.ops-sidebar),
body.admin-mode header > *:not(.ops-sidebar) {
  display: none;
}

/* override inline : le conteneur des boutons de vue porte style="display:flex"
   (index.html l.73) et échapperait à la règle ci-dessus (visible sous la
   sidebar repliée). La navigation de vue passe par la sidebar en console. */
body.staff-mode header > div,
body.admin-mode header > div { display: none !important; } /* override inline */

/* La sidebar n'existe qu'en console */
body:not(.staff-mode):not(.admin-mode) .ops-sidebar { display: none; }

/* override inline : setView() (app-main.js) pose style="display:flex" sur #nav
   en mode client : les media queries de pinlane-client.css ne peuvent pas
   gagner sans !important. Shell responsive du header global. */
@media (max-width: 900px) {
  body.client-mode #nav { display: none !important; } /* override inline */
}

.staff-wrap {
  max-width: 1640px;
  margin-inline: auto;
  padding: 20px clamp(16px, 2.2vw, 32px) 48px;
}

/* Animation d'entrée référencée par le markup : scale-in/shake vivent dans
   pinlane.css (couche partagée, DESIGN.md §8). */
.fade-in { animation: pl-enter var(--dur-slow) var(--ease) both; }

/* ----------------------------------------------------------------------------
   1. SIDEBAR NAVIGATION (.ops-sidebar + .fgx-*)
   Fond surface, bordure droite line, item actif = fond subtle + barre 2px
   accent à gauche (recette .nav-item). 248px / 64px collapsed.
   -------------------------------------------------------------------------- */
body.staff-mode .ops-sidebar,
body.admin-mode .ops-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 70;
  width: var(--fgx-sidebar-width);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 12px 10px 10px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-ui);
  transition: width var(--dur-slow) var(--ease), padding var(--dur-slow) var(--ease);
}

.fgx-menu-brand,
.fgx-menu-center,
.fgx-menu-item,
.fgx-menu-subitem,
.fgx-menu-account,
.fgx-menu-collapse,
.fgx-menu-option {
  font: inherit;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.fgx-menu-top {
  min-height: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: var(--space-2);
}

.fgx-menu-brand {
  min-width: 0;
  min-height: 40px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 0 6px;
  border-radius: var(--radius-md);
  transition: background-color var(--dur) var(--ease);
}

.fgx-menu-brand:hover { background: var(--subtle); }

.fgx-menu-logo-frame {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--subtle);
  border: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease);
}

.fgx-menu-brand:hover .fgx-menu-logo-frame,
.fgx-menu-brand:focus-visible .fgx-menu-logo-frame { border-color: var(--line-strong); }

.fgx-menu-logo { width: 26px; height: 26px; object-fit: contain; }

/* Logo personnalise (data-URI localStorage) : il occupe tout le cadre, sans le
   fond subtle reserve a la marque par defaut. */
.fgx-menu-logo-frame.is-custom { background: var(--surface); }
.fgx-menu-logo-frame.is-custom .fgx-menu-logo { width: 100%; height: 100%; object-fit: cover; }

.fgx-menu-brand-copy,
.fgx-menu-account-copy,
.fgx-menu-label { min-width: 0; }

.fgx-menu-brand-copy strong,
.fgx-menu-brand-copy small,
.fgx-menu-account-copy strong,
.fgx-menu-account-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fgx-menu-brand-copy strong { color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
.fgx-menu-brand-copy small { margin-top: 1px; color: var(--faint); font-size: 11px; line-height: 1.15; }

.fgx-menu-collapse {
  position: relative;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--muted);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.fgx-menu-collapse:hover { background: var(--subtle); color: var(--text); }

/* Icone "panneau lateral" (SVG inline dans le markup) : le volet interne se
   reflete quand la barre est repliee, transform seul (compositable). */
.fgx-menu-collapse svg {
  width: 15px;
  height: 15px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur) var(--ease);
}

body.staff-menu-collapsed .fgx-menu-collapse svg { transform: scaleX(-1); }

.fgx-menu-center,
.fgx-menu-account {
  width: 100%;
  min-height: 40px;
  display: grid;
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.fgx-menu-center {
  grid-template-columns: 16px minmax(0, 1fr) 16px;
  gap: 9px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 500;
}

.fgx-menu-center:hover,
.fgx-menu-account:hover,
.fgx-menu-center[aria-expanded='true'],
.fgx-menu-account[aria-expanded='true'] {
  background: var(--subtle);
  border-color: var(--line);
}

.fgx-center-dot { width: 15px; height: 15px; color: var(--muted); }

.fgx-center-dot svg,
.fgx-menu-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fgx-menu-chevron {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: var(--faint);
}

.fgx-menu-chevron svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur) var(--ease);
}

.fgx-menu-group.is-open .fgx-menu-chevron svg,
.fgx-menu-center[aria-expanded='true'] .fgx-menu-chevron svg { transform: rotate(90deg); }

.fgx-menu-nav {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}

.fgx-menu-section { display: grid; gap: 1px; padding: 3px 0; }
.fgx-menu-section + .fgx-menu-section { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 8px; }

.fgx-menu-section-title {
  padding: 2px 10px 4px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.fgx-menu-item,
.fgx-menu-subitem {
  position: relative;
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  border-radius: var(--radius-md);
  color: var(--muted);
  overflow: hidden;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.fgx-menu-item { gap: 10px; padding: 0 10px; font-size: 13px; font-weight: 500; }

.fgx-menu-item-parent {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr) 16px;
  column-gap: 10px;
  padding-right: 8px;
}

.fgx-menu-item-parent .fgx-menu-chevron { justify-self: end; }

.fgx-menu-subitem {
  min-height: 30px;
  gap: 9px;
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.fgx-menu-item:hover,
.fgx-menu-subitem:hover,
.fgx-menu-item:focus-visible,
.fgx-menu-subitem:focus-visible {
  background: var(--subtle);
  color: var(--text);
}

.fgx-menu-item.active,
.fgx-menu-subitem.active,
.fgx-menu-group.active .fgx-menu-item-parent {
  background: var(--subtle);
  color: var(--text);
}

/* Item actif = barre 2px accent à gauche (recette .nav-item). La barre existe
   sur tous les items (invisible, scaleY(0)) et se deploie a l'activation :
   transform + opacity seulement, transition compositable. */
.fgx-menu-item::before,
.fgx-menu-subitem::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: var(--radius-full);
  background: var(--accent);
  opacity: 0;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.fgx-menu-item.active::before,
.fgx-menu-subitem.active::before,
.fgx-menu-group.active .fgx-menu-item-parent::before {
  opacity: 1;
  transform: scaleY(1);
}

.fgx-menu-icon { position: relative; width: 15px; height: 15px; flex: 0 0 15px; color: var(--faint); }
/* Le badge chiffré est display:none menu replié (voir plus bas) et sous 1100 px.
   Ce point-là survit : il vit DANS l'icône. Il ne remplace pas l'alerte du
   dashboard, il la rappelle. */
.fgx-menu-dot {
  position: absolute;
  top: -2px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface);
}

.fgx-menu-item:hover .fgx-menu-icon,
.fgx-menu-item.active .fgx-menu-icon,
.fgx-menu-group.active .fgx-menu-item-parent .fgx-menu-icon { color: var(--text); }

.fgx-menu-subnav {
  display: grid;
  gap: 1px;
  margin: 1px 0 4px 16px;
  padding: 1px 0 1px 8px;
  border-left: 1px solid var(--line);
  max-height: 200px;
  overflow: hidden;
  opacity: 1;
  transition: max-height var(--dur-slow) var(--ease), opacity var(--dur) var(--ease), margin var(--dur-slow) var(--ease);
}

.fgx-menu-group.is-collapsed .fgx-menu-subnav {
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  opacity: 0;
  pointer-events: none;
}

.fgx-menu-subitem-mark {
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  border-radius: var(--radius-full);
  background: currentColor;
  opacity: 0.5;
}

.fgx-menu-subitem.active .fgx-menu-subitem-mark { background: var(--accent); opacity: 1; }

.fgx-menu-badge {
  min-width: 22px;
  height: 18px;
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--subtle);
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.fgx-menu-account {
  flex: 0 0 auto;
  min-height: 48px;
  grid-template-columns: 30px minmax(0, 1fr) 18px;
  gap: 10px;
  padding: 6px 8px;
}

.fgx-menu-avatar {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--subtle);
  border: 1px solid var(--line);
  /* Anneau subtil qui detache l'avatar de la surface (tokens seulement). */
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--line) 35%, transparent);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: border-color var(--dur) var(--ease);
}

.fgx-menu-account:hover .fgx-menu-avatar,
.fgx-menu-account[aria-expanded='true'] .fgx-menu-avatar { border-color: var(--line-strong); }

/* Point de presence "en ligne" : information doublee par le libelle de role,
   jamais portee par la couleur seule. */
.fgx-menu-avatar-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--success);
  border: 2px solid var(--surface);
}

.fgx-menu-account-copy strong { color: var(--text); font-size: 12px; font-weight: 600; line-height: 1.2; }
.fgx-menu-account-copy small { margin-top: 2px; color: var(--faint); font-size: 11px; line-height: 1.15; }

.fgx-menu-more {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--faint);
  transition: color var(--dur) var(--ease);
}

.fgx-menu-more svg {
  width: 15px;
  height: 15px;
  display: block;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fgx-menu-account:hover .fgx-menu-more,
.fgx-menu-account[aria-expanded='true'] .fgx-menu-more { color: var(--text); }

/* --- Sidebar réduite (64px) --- */
body.staff-menu-collapsed .ops-sidebar { padding: 12px 8px 10px; }
body.staff-menu-collapsed .fgx-menu-top { grid-template-columns: 1fr; justify-items: center; gap: 6px; }
body.staff-menu-collapsed .fgx-menu-brand { grid-template-columns: 1fr; justify-items: center; padding: 0; }

body.staff-menu-collapsed .fgx-menu-brand-copy,
body.staff-menu-collapsed .fgx-menu-label,
body.staff-menu-collapsed .fgx-menu-section-title,
body.staff-menu-collapsed .fgx-menu-chevron,
body.staff-menu-collapsed .fgx-menu-badge,
body.staff-menu-collapsed .fgx-menu-account-copy,
body.staff-menu-collapsed .fgx-menu-more,
body.staff-menu-collapsed .fgx-menu-subnav { display: none; }

body.staff-menu-collapsed .fgx-menu-center,
body.staff-menu-collapsed .fgx-menu-item,
body.staff-menu-collapsed .fgx-menu-item-parent,
body.staff-menu-collapsed .fgx-menu-account {
  min-height: 40px;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 0;
}

body.staff-menu-collapsed .fgx-menu-icon,
body.staff-menu-collapsed .fgx-center-dot,
body.staff-menu-collapsed .fgx-menu-avatar { margin: 0 auto; }

/* --- Popovers sidebar (centres + compte) : surface flottante --- */
/* Entree : fade + legere montee/scale DEPUIS l'ancre (transform-origin cote
   ancre), sortie inverse plus courte. transform/opacity uniquement ;
   prefers-reduced-motion neutralise tout (pinlane.css §12 + bloc dedie). */
.fgx-menu-popover {
  position: absolute;
  left: 10px;
  right: 10px;
  z-index: 90;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--raised);
  color: var(--text);
  box-shadow: var(--shadow-overlay);
  transform-origin: 50% 0;
  animation: fgx-menu-pop-in var(--dur-slow) var(--ease-out-strong) both;
}

/* Le popover compte est ancre au bloc profil EN BAS : il monte depuis lui. */
.fgx-menu-popover.account {
  transform-origin: 50% 100%;
  animation-name: fgx-menu-pop-in-up;
}

.fgx-menu-popover.is-closing {
  pointer-events: none;
  animation: fgx-menu-pop-out var(--dur-fast) var(--ease) both;
}

.fgx-menu-popover.account.is-closing { animation-name: fgx-menu-pop-out-up; }

@keyframes fgx-menu-pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes fgx-menu-pop-in-up {
  from { opacity: 0; transform: translateY(4px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes fgx-menu-pop-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-4px) scale(0.98); }
}

@keyframes fgx-menu-pop-out-up {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(4px) scale(0.98); }
}

/* INVARIANT 2 : le popover ne déborde jamais du viewport */
.fgx-menu-popover { max-height: min(420px, calc(100dvh - 96px)) !important; overflow: auto !important; }

body.staff-menu-collapsed .fgx-menu-popover {
  left: calc(100% + 8px);
  right: auto;
  width: 272px;
  /* Barre repliee : le popover sort a DROITE de la barre, l'ancre est a gauche. */
  transform-origin: 0 20px;
}

body.staff-menu-collapsed .fgx-menu-popover.account { transform-origin: 0 100%; }

.fgx-menu-popover-title {
  padding: 6px 8px 4px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
}

.fgx-menu-options { display: grid; gap: 2px; }

.fgx-menu-option {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.fgx-menu-option .fgx-menu-option-icon {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  padding: 5px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.fgx-menu-option:hover .fgx-menu-option-icon,
.fgx-menu-option:focus-visible .fgx-menu-option-icon {
  color: var(--text);
  border-color: var(--line-strong);
}

.fgx-menu-option.danger .fgx-menu-option-icon { color: var(--danger); }
.fgx-menu-option.danger:hover .fgx-menu-option-icon { border-color: var(--danger); }

/* Icônes au trait du popover compte : sans cette règle, les <path> héritent du
   fill noir SVG par défaut = invisibles sur fond sombre. Même pattern que
   .fgx-menu-icon svg (thème via currentColor). */
.fgx-menu-option-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fgx-menu-option:has(.fgx-menu-option-icon) { grid-template-columns: 26px minmax(0, 1fr); }

/* Variante compacte (popover compte) : une seule ligne, densite Vercel.
   Le detail passe en title (tooltip natif). */
.fgx-menu-option.compact {
  min-height: 34px;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 9px;
  padding: 4px 9px;
}

.fgx-menu-option.compact .fgx-menu-option-icon {
  width: 24px;
  height: 24px;
  padding: 4.5px;
}

.fgx-menu-option:hover,
.fgx-menu-option:focus-visible { background: var(--subtle); }
.fgx-menu-option.is-active { background: var(--accent-soft); border-color: var(--accent); }
.fgx-menu-option.muted { color: var(--muted); }
.fgx-menu-option.danger strong { color: var(--danger); }
.fgx-menu-option.danger:hover { background: var(--danger-soft); }

.fgx-menu-option strong,
.fgx-menu-option small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fgx-menu-option strong { font-size: 13px; font-weight: 500; line-height: 1.25; }
.fgx-menu-option small { margin-top: 1px; color: var(--muted); font-size: 12px; line-height: 1.25; }

.fgx-menu-option em {
  display: inline-grid;
  place-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  background: var(--subtle);
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
}

/* En-tete de groupe du switcher (vue proprietaire : centres groupes par client). */
.fgx-center-group-head {
  padding: 8px 9px 2px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Centre actif : le badge de statut passe en accent (en plus du fond + bordure,
   l'etat n'est jamais porte par la couleur seule). */
.fgx-center-option.is-active em { background: var(--accent-soft); color: var(--accent-strong); }

/* Carte d'identite en tete du popover compte : avatar + nom + role/acces. */
.fgx-account-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 9px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
}

.fgx-account-card-avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--subtle);
  border: 1px solid var(--line);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--line) 35%, transparent);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.fgx-account-card-copy { min-width: 0; }

.fgx-account-card-copy strong,
.fgx-account-card-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fgx-account-card-copy strong { font-size: 13px; font-weight: 600; line-height: 1.25; }
.fgx-account-card-copy small { margin-top: 1px; color: var(--muted); font-size: 12px; line-height: 1.2; }

/* Separateur discret entre groupes d'actions du popover compte. */
.fgx-menu-divider { height: 1px; margin: 2px 0; background: var(--line); }

/* Le popover compte est plus dense que le switcher : il doit tenir sous le
   plafond de 420px meme avec l'option "Reinitialiser le logo" affichee. */
.fgx-menu-popover.account { gap: 2px; }

/* Ligne theme : label + vrai toggle segmente clair/sombre (un seul actif). */
.fgx-menu-theme-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 4px 9px;
}

.fgx-menu-theme-label { color: var(--muted); font-size: 13px; font-weight: 500; }

.fgx-menu-theme-seg {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--subtle);
}

.fgx-menu-theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 9px;
  border: 0;
  border-radius: 4px; /* radius-sm (6) - 2 : rayon interne du segment */
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.fgx-menu-theme-btn svg {
  width: 13px;
  height: 13px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fgx-menu-theme-btn:hover { color: var(--text); }

.fgx-menu-theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.fgx-menu-theme-btn.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--line-strong);
}

/* Menu : neutralisation locale du mouvement (double filet avec pinlane.css §12). */
@media (prefers-reduced-motion: reduce) {
  .fgx-menu-popover,
  .fgx-menu-popover.is-closing { animation: none; }
  .fgx-menu-subnav,
  .fgx-menu-chevron svg,
  .fgx-menu-collapse svg,
  .fgx-menu-item::before,
  .fgx-menu-subitem::before { transition: none; }
}

/* ----------------------------------------------------------------------------
   2. AUTH OVERLAY : connexion staff
   -------------------------------------------------------------------------- */
.auth-overlay:not(.hidden) {
  position: fixed;
  inset: 0;
  z-index: 480;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: var(--page);
  overflow: auto;
}

.auth-card {
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
}

.auth-shell-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.auth-brand-logo { width: 150px; height: auto; }


.auth-kicker { color: var(--muted); font-size: 12px; font-weight: 500; margin-bottom: var(--space-1); }
.auth-form-panel h2 { font-size: 24px; margin-bottom: var(--space-2); }
.auth-form-panel > p { color: var(--muted); font-size: 13px; line-height: 1.55; margin-bottom: var(--space-5); }

.auth-form { display: grid; gap: var(--space-4); }
.auth-field { display: grid; gap: 6px; }
.auth-field label { font-size: 13px; font-weight: 500; color: var(--text); }

.auth-error { color: var(--danger); font-size: 12px; min-height: 0; }
.auth-error:not(:empty) { padding: 8px 10px; border-radius: var(--radius-sm); background: var(--danger-soft); }

.auth-form .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border: 1px solid var(--text);
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--surface);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}

.auth-form .btn-primary:hover { opacity: 0.88; }

.auth-note {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 12px;
  line-height: 1.5;
}

/* ----------------------------------------------------------------------------
   3. STAFF HEAD + KPI + ONGLETS RESSOURCE
   -------------------------------------------------------------------------- */
.staff-head:not(.hidden) {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.staff-head h1 { font-size: 20px; }
.staff-head .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }

.staff-head-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.date-nav {
  position: relative; /* contient l'input date invisible */
  display: inline-flex;
  align-items: center;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.date-nav button {
  height: 100%;
  min-width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.date-nav button:hover { background: var(--subtle); color: var(--text); }
.date-nav button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Label du widget date : desormais un vrai <button> (clavier + a11y), il ouvre
   le calendrier custom. Bat `.date-nav button` (min-width/couleur) par
   specificite pour garder son rendu texte. */
.staff-date-label,
.date-nav button.staff-date-label {
  min-width: auto;
  padding: 0 12px;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.date-nav button.staff-date-label:hover { background: var(--subtle); color: var(--text); }

/* Widget date unifie : ‹ date › + Aujourd'hui, partage par le Planning, le
   Dashboard et les pages Terrain (Arrivees, Sessions, Evenements). */
.staff-date-widget {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.staff-today-btn {
  height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.staff-today-btn:hover { background: var(--subtle); }

/* Calendrier custom (popover) : position calculee en JS, ancree sous le
   declencheur, jamais au coin haut-gauche. Surface flottante aux tokens. */
.staff-calendar-pop {
  position: fixed;
  z-index: 320;
  width: 300px;
  max-width: calc(100vw - 24px);
  padding: var(--space-3);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-overlay);
  font-family: var(--font-ui);
  color: var(--text);
}

.staff-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.staff-cal-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  flex: 1;
}

.staff-cal-nav {
  height: 32px;
  width: 32px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.staff-cal-nav:hover { background: var(--subtle); color: var(--text); }

.staff-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.staff-cal-dow {
  text-align: center;
  padding: 4px 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--faint);
}

.staff-cal-day {
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.staff-cal-day:hover { background: var(--subtle); }
.staff-cal-day.is-out { background: transparent; cursor: default; pointer-events: none; }
.staff-cal-day.is-today { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); font-weight: 600; }
.staff-cal-day.is-selected { background: var(--accent); color: var(--accent-contrast); font-weight: 600; }
.staff-cal-day.is-selected:hover { background: var(--accent-strong); }

.staff-cal-foot {
  margin-top: var(--space-2);
  display: flex;
  justify-content: flex-end;
}

.staff-cal-today-btn {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.staff-cal-today-btn:hover { background: var(--subtle); }

.staff-calendar-pop button:focus-visible,
button.staff-date-label:focus-visible,
.staff-today-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn-new {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--text);
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--surface);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}

.btn-new:hover { opacity: 0.88; }

/* KPI strip */
.kpi-grid:not(.hidden) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.kpi .label { font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 6px; }

.kpi .value {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
}

.kpi .hint { font-size: 12px; color: var(--faint); margin-top: 4px; }

.kpi .tag-ok {
  display: inline-block;
  margin-top: 6px;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  background: var(--success-soft);
  color: var(--success);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.kpi.accent { border-color: var(--line); }
.kpi.accent .value { color: var(--accent); }

/* Onglets ressource (Bowling / Laser / Complet) */
.staff-resource-tabs:not(.hidden) {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.staff-resource-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-ui);
  cursor: pointer;
  position: relative;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.staff-resource-tab:hover { border-color: var(--line-strong); color: var(--text); }

.staff-resource-tab.active {
  background: var(--subtle);
  border-color: var(--line-strong);
  color: var(--text);
}

.staff-resource-tab.active::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--accent);
}

.staff-resource-tab .main { display: block; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: inherit; }
.staff-resource-tab .sub { display: block; font-size: 11px; color: var(--faint); margin-top: 1px; }

/* Alerte « hors planning » : ces reservations n'occupent ni piste ni zone laser,
   elles n'apparaissent donc sur AUCUNE grille. Le signal doit se voir depuis les
   deux autres onglets, sinon la reservation reste invisible jusqu'a l'arrivee. */
.staff-resource-tab .sub.is-alert { color: var(--warning); font-weight: 600; }
.staff-resource-tab.has-alert { border-color: var(--warning); }

.staff-resource-tab > span:last-child:not(:first-child) {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--radius-full);
  background: var(--subtle);
  border: 1px solid var(--line);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--muted);
}

.staff-resource-tab.active > span:last-child:not(:first-child) {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
}

.resource-strip-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: 12px;
  color: var(--muted);
}

.resource-strip-actions > span { display: inline-flex; align-items: center; gap: 6px; }

.resource-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}

.resource-filter-btn:hover { background: var(--subtle); }

/* Points de statut (légendes) : Confirmé = bleu, Arrivé = ambre, Payé = vert */
.dot { width: 8px; height: 8px; border-radius: var(--radius-full); display: inline-block; flex: none; }
.dot.conf, i.dot.conf { background: var(--info); }
.dot.arr, i.dot.arr { background: var(--warning); }
.dot.paid, i.dot.paid { background: var(--success); }

/* Popover actions/filtres planning (surface flottante) */
.staff-action-popover {
  position: fixed;
  z-index: 300;
  min-width: 220px;
  display: grid;
  gap: 2px;
  padding: 6px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-overlay);
}

.staff-action-popover-title {
  padding: 6px 8px 4px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 500;
}

.staff-action-popover button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}

.staff-action-popover button:hover { background: var(--subtle); }
.staff-action-popover button.active { background: var(--accent-soft); color: var(--accent); }

/* Notice flottante planning (déplacements, avertissements) */
.planning-move-notice {
  position: fixed;
  right: 20px;
  top: 20px;
  z-index: 460;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 360px;
  padding: 12px 14px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-overlay);
  font-size: 13px;
  /* Caché par défaut + JAMAIS bloquant : un toast informatif ne doit pas
     intercepter les clics (sinon il « bloque » le coin de l'écran une fois
     affiché). .is-visible pilote l'apparition ; le retrait de la classe après
     le délai le masque réellement. */
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.planning-move-notice.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .planning-move-notice { transition: none; }
}

.planning-move-notice-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: var(--radius-full); background: var(--accent); flex: none; }
.planning-move-notice.warning .planning-move-notice-dot { background: var(--warning); }
.planning-move-notice-copy strong { display: block; font-size: 13px; font-weight: 600; }
.planning-move-notice-copy span { color: var(--muted); font-size: 12px; line-height: 1.45; }

/* ----------------------------------------------------------------------------
   4. PLANNING BOWLING : grille de créneaux (écran critique)
   Libre = surface · réservé = fond accent-soft + barre 2px accent ·
   statuts = couleurs fonctionnelles · heures en Geist Mono tabulaire.
   -------------------------------------------------------------------------- */
.planning-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-6);
  --planning-hour-h: 48px;
  --planning-header-h: 38px;
  --planning-lane-w: 88px;
  --planning-hour-col: 54px;
}

/* Les cellules du planning affichent des données, elles ne sont JAMAIS du texte
   à saisir. Cliquer dans une case plaçait un curseur de texte (trait blanc
   clignotant « comme pour écrire »). On coupe la sélection de texte et on rend
   le caret transparent sur toute la grille : sans impacter le drag-drop ni les
   clics (ce sont des events pointeur, indépendants de user-select). Aucun champ
   de saisie ne vit dans ces conteneurs, donc rien de légitime n'est masqué. */
.planning-grid-wrap,
.laser-pass-queue {
  -webkit-user-select: none;
  user-select: none;
  caret-color: transparent;
}

/* Plein écran RÉEL : bord à bord, par-dessus la sidebar (z-index 70) et le
   header, aucune marge ni rayon. Comme un vrai fullscreen au comptoir. */
.planning-box.expanded:not(.hidden) {
  position: fixed;
  inset: 0;
  z-index: 400;
  margin: 0;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  --planning-hour-h: 52px;
  --planning-header-h: 46px;
  --planning-lane-w: 158px;
  --planning-hour-col: 76px;
}

.planning-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.planning-title-stack { display: flex; flex-direction: column; gap: 4px; }
.planning-head h2 { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.planning-head h2 svg { color: var(--muted); }
.planning-sub { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.planning-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.planning-search-inline { position: relative; }

.planning-search-inline input {
  height: 32px;
  width: 190px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
}

.planning-search-inline svg {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  pointer-events: none;
}

.planning-more-btn {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.planning-more-btn:hover { background: var(--subtle); color: var(--text); }

.legend { display: flex; gap: var(--space-4); font-size: 12px; color: var(--muted); }
.legend span { display: flex; align-items: center; gap: 6px; }

.planning-toggle {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}

.planning-toggle:hover { background: var(--subtle); }

.planning-grid-wrap { position: relative; background: var(--surface); overflow-x: auto; }
.planning-box.expanded .planning-grid-wrap { flex: 1; min-height: 0; overflow: auto; }

.planning-grid { display: flex; width: 100%; min-width: 760px; position: relative; }
.planning-box.expanded .planning-grid { min-height: 100%; }

/* ----------------------------------------------------------------------------
   4b. MODE PLEIN ÉCRAN : comptoir grand écran
   Typographie agrandie pour une lecture nette à distance, en-têtes collants,
   bouton fermer explicite. S'applique aussi bien au bowling qu'au laser.
   -------------------------------------------------------------------------- */
.planning-box.expanded .planning-head { padding: 16px 24px; }
.planning-box.expanded .planning-head h2 { font-size: 19px; }
.planning-box.expanded .planning-sub { font-size: 13px; }

/* Bouton fermer bien visible en plein écran */
.planning-box.expanded .planning-toggle {
  height: 38px;
  padding: 0 18px;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
}
.planning-box.expanded .planning-toggle:hover { background: var(--accent-strong); border-color: var(--accent-strong); }

/* Bowling : cellules et cartes plus lisibles */
.planning-box.expanded .hour-header { font-size: 13px; }
.planning-box.expanded .hour-cell { font-size: 13px; }
.planning-box.expanded .hour-cell.minor { font-size: 12px; }
.planning-box.expanded .lane-header .pl { font-size: 12px; }
.planning-box.expanded .lane-header .num { font-size: 16px; }
.planning-box.expanded .booking-name { font-size: 15px; }
.planning-box.expanded .booking .b-tag { font-size: 12px; }
.planning-box.expanded .booking .bk-pax { font-size: 12px; }
.planning-box.expanded .booking .bk-dur { font-size: 11px; }
.planning-box.expanded .reservation-tag { font-size: 11px; }

/* Laser : l'agenda occupe toute la largeur et grossit en plein écran */
.planning-box.expanded .laser-agenda { min-width: 100%; }
.planning-box.expanded .laser-agenda-header,
.planning-box.expanded .laser-agenda-row {
  grid-template-columns: 116px minmax(560px, 1fr) 150px;
}
.planning-box.expanded .laser-agenda-row { min-height: 92px; }
.planning-box.expanded .laser-agenda-header { font-size: 13px; }
/* En-tête laser collant en haut + colonne heure collante à gauche pour le repérage */
.planning-box.expanded .laser-agenda-header > div:first-child {
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--surface);
}
.planning-box.expanded .laser-agenda-time {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--surface);
}
.planning-box.expanded .laser-agenda-row.is-half .laser-agenda-time { background: var(--page); }
.planning-box.expanded .laser-agenda-time strong,
.planning-box.expanded .laser-agenda-capacity strong { font-size: 15px; }
.planning-box.expanded .laser-agenda-time span,
.planning-box.expanded .laser-agenda-capacity span { font-size: 12px; }
.planning-box.expanded .laser-session-title { font-size: 15px; }
.planning-box.expanded .laser-session-sub { font-size: 13px; }
.planning-box.expanded .laser-group-main strong { font-size: 14px; }
.planning-box.expanded .laser-group-main small { font-size: 12px; }

/* ----------------------------------------------------------------------------
   4c. LASER PLEIN ÉCRAN : 2 ZONES
   Zone permanente « Parties à placer » (colonne fixe à gauche, ne défile jamais
   hors écran) + zone principale = timeline des lancements (scrollable).
   -------------------------------------------------------------------------- */
.laser-planning-box.expanded .planning-grid-wrap {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr); /* ligne = hauteur exacte du wrap */
  overflow: hidden; /* la zone défilante, c'est la timeline, pas le wrap */
}

/* Colonne 1 : file des parties à placer, toujours visible, scroll interne. */
.laser-planning-box.expanded .laser-pass-queue {
  grid-template-columns: 1fr;
  align-content: start;
  gap: var(--space-3);
  height: 100%;
  min-height: 0;
  overflow: auto;
  border-bottom: 0;
  border-right: 1px solid var(--line);
  padding: 18px 18px 20px;
}

.laser-planning-box.expanded .laser-pass-queue-copy strong { font-size: 15px; }
.laser-planning-box.expanded .laser-pass-queue-copy span { font-size: 13px; }

/* Cartes empilées verticalement, pleine largeur, faciles à attraper au drag. */
.laser-planning-box.expanded .laser-pass-list { flex-direction: column; flex-wrap: nowrap; gap: 10px; }
.laser-planning-box.expanded .laser-pass-card { width: 100%; padding: 12px 14px; }
.laser-planning-box.expanded .laser-pass-name { font-size: 15px; }
.laser-planning-box.expanded .laser-pass-meta { font-size: 12px; }
.laser-planning-box.expanded .laser-pass-origin { font-size: 12px; }

/* Colonne 2 : timeline des lancements, seule zone qui défile verticalement. */
.laser-planning-box.expanded .laser-agenda {
  height: 100%;
  min-height: 0;
  overflow: auto;
  min-width: 0;
}

/* File vide (aucune partie à placer) : reste rassurante et lisible. */
.laser-pass-empty {
  padding: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.laser-pass-queue.is-empty { background: var(--surface); }

/* Cible de dépôt active : on glisse une carte placée vers la file pour la retirer
   du planning. Accent net + liseré pour signaler la zone sans ambiguïté. */
.laser-pass-queue.is-unplace-target {
  outline: 2px dashed var(--accent-strong);
  outline-offset: -4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.laser-pass-queue.is-unplace-target .laser-pass-queue-copy strong { color: var(--accent-strong); }

/* ── Suivi des activités de formule (checklist cochable) ─────────────────────── */
.activity-check-block.all-done { box-shadow: inset 0 0 0 1px var(--accent); }
.activity-check-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.activity-check-count {
  font-size: 12px; font-weight: 800; color: var(--muted);
  background: var(--subtle); border: 1px solid var(--line);
  padding: 2px 9px; border-radius: var(--radius-full); white-space: nowrap;
}
.activity-check-count.done { color: var(--accent-contrast); background: var(--accent); border-color: var(--accent); }
.activity-check-bar {
  height: 6px; border-radius: var(--radius-full); background: var(--subtle);
  overflow: hidden; margin-bottom: 12px;
}
.activity-check-bar > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width var(--dur) var(--ease); }
.activity-check-list { display: flex; flex-direction: column; gap: 8px; }
.activity-check-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.activity-check-row:hover { border-color: var(--accent); background: var(--subtle); }
.activity-check-box {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px;
  border: 2px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-contrast); background: var(--surface); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.activity-check-icon-wrap { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--subtle); color: var(--muted); }
.activity-check-row.is-done .activity-check-icon-wrap { color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.activity-check-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.activity-check-label { font-weight: 700; font-size: 14px; line-height: 1.25; }
.activity-check-time { font-size: 12px; color: var(--muted); font-weight: 600; }
.activity-check-state { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--muted); text-align: right; max-width: 45%; }
/* Fait : coche pleine + ligne estompée */
.activity-check-row.is-done { background: var(--subtle); opacity: 0.72; }
.activity-check-row.is-done .activity-check-box { background: var(--accent); border-color: var(--accent); }
.activity-check-row.is-done .activity-check-label { text-decoration: line-through; text-decoration-color: var(--line-strong); }
.activity-check-row.is-done .activity-check-state { color: var(--accent-strong); }

/* Page « Formules » : cartes de suivi */
.formules-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4); }
.formules-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: var(--space-4); display: flex; flex-direction: column; gap: 14px; }
.formules-card.all-done { box-shadow: inset 0 0 0 1px var(--accent); }
.formules-card-head { display: flex; align-items: center; gap: 12px; }
.formules-card-time { flex: 0 0 auto; text-align: center; min-width: 56px; }
.formules-card-time strong { display: block; font-size: 16px; font-weight: 800; color: var(--text); }
.formules-card-time span { font-size: 11px; color: var(--muted); }
.formules-card-id { flex: 1 1 auto; min-width: 0; }
.formules-card-id strong { display: block; font-size: 15px; font-weight: 800; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.formules-card-id span { font-size: 12px; color: var(--muted); }
.formules-card-open {
  flex: 0 0 auto; font-size: 12px; font-weight: 700; padding: 7px 12px;
  border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--subtle); color: var(--text); cursor: pointer;
}
.formules-card-open:hover { border-color: var(--accent); background: var(--surface); }
.formules-card .activity-check-block { padding: 0; border: 0; background: transparent; }
.formules-card-empty { font-size: 13px; color: var(--muted); padding: 8px 0; }
@media (max-width: 640px) { .formules-board { grid-template-columns: 1fr; } }
.formules-group { margin-bottom: var(--space-6); }
.formules-group + .formules-group { margin-top: var(--space-2); }
.formules-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: var(--space-3); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.formules-group-head h3 { font-size: 15px; font-weight: 800; color: var(--text); margin: 0; }
.formules-group-head span { font-size: 12px; color: var(--muted); font-weight: 600; }

/* Pill compacte de progression des activités (cartes planning + lignes terrain) */
.activity-pill {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 10px; font-weight: 800; line-height: 1;
  padding: 2px 6px; border-radius: var(--radius-full);
  background: var(--subtle); color: var(--muted); border: 1px solid var(--line);
  white-space: nowrap;
}
.activity-pill.done { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }

/* Carte planning dont TOUTES les activités de formule sont faites : grisée + coche.
   Signal « ce groupe a tout terminé » d'un coup d'œil sur le planning. */
.booking.activities-complete, .laser-group-card.activities-complete { opacity: 0.6; }
.booking.activities-complete .booking-name { text-decoration: line-through; text-decoration-color: var(--line-strong); }
.booking.activities-complete::after {
  content: '✓'; position: absolute; top: 3px; right: 4px;
  font-size: 10px; font-weight: 900; line-height: 1;
  color: var(--accent-contrast); background: var(--accent);
  width: 15px; height: 15px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; z-index: 2;
}

.hour-col {
  width: var(--planning-hour-col);
  flex-shrink: 0;
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--surface);
  border-right: 1px solid var(--line);
}

.hour-header {
  height: var(--planning-header-h);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 500;
  color: var(--faint);
}

.hour-cell {
  height: calc(var(--planning-hour-h) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--faint);
}

.hour-cell.major { color: var(--text); font-weight: 500; }
.hour-cell.minor { font-size: 10px; }
.hour-cell.end { color: var(--text); font-weight: 500; background: var(--subtle); }
.hour-label-hour, .hour-label-half, .hour-label-end { white-space: nowrap; }

.lanes-row { flex: 1; display: flex; }

.lane-col {
  flex: 1;
  min-width: var(--planning-lane-w);
  position: relative;
  background: var(--surface);
  border-right: 1px solid var(--line);
}

.lane-col:last-child { border-right: 0; }

.lane-col.maint {
  background-image: repeating-linear-gradient(45deg, var(--subtle), var(--subtle) 8px, transparent 8px, transparent 16px);
}

.lane-col.maint .slot-cell { cursor: not-allowed; }

.lane-header {
  height: var(--planning-header-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.lane-header .pl { font-size: 10px; font-weight: 500; color: var(--faint); }
.lane-header .num { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; }

.lane-header .settings {
  position: absolute;
  top: 3px;
  right: 3px;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.lane-header .settings:hover { color: var(--text); background: var(--subtle); }

.slot-cell {
  height: calc(var(--planning-hour-h) / 2);
  position: relative;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.slot-cell.half { border-bottom-style: dashed; }
.slot-cell.end { background: var(--subtle); }
.slot-cell.clickable { cursor: pointer; transition: background-color var(--dur-fast) var(--ease); }
.slot-cell.clickable:hover { background: var(--subtle); }

.slot-cell.is-drop-target {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.slot-cell.is-drop-target.invalid {
  background: var(--danger-soft);
  box-shadow: inset 0 0 0 2px var(--danger);
}

/* Blocage de disponibilite (lecture seule) : distinct d'une reservation et de
   la maintenance piste. Bande en pointilles rouge posee sur les creneaux
   concernes ; pointer-events none pour ne jamais gener le drag-drop. */
.lane-col.has-block {
  background-image: repeating-linear-gradient(45deg, var(--danger-soft), var(--danger-soft) 7px, transparent 7px, transparent 14px);
}
.planning-blocked {
  position: absolute;
  left: 2px;
  right: 2px;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3px 4px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  border: 1px dashed var(--danger);
  color: var(--danger);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  overflow: hidden;
  pointer-events: none;
}
.planning-blocked > span {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.planning-blocked.full {
  background: repeating-linear-gradient(45deg, var(--danger-soft), var(--danger-soft) 7px, transparent 7px, transparent 14px);
}
.planning-blocked-banner {
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
}
.planning-blocked-banner strong { display: block; margin-bottom: 4px; }
.planning-blocked-banner ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

/* Bloc réservation posé sur la grille */
.booking {
  position: absolute;
  left: 3px;
  right: 3px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 5px 7px 6px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  color: var(--text);
  font-size: 11px;
  line-height: 1.25;
  cursor: grab;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

/* Le texte ne se compresse jamais (flex none) : au manque de place, on masque
   par paliers via les classes mini/snug/compact posées par le JS. */
.booking > * { min-width: 0; flex: 0 0 auto; }
.booking:hover { z-index: 10; border-color: var(--line-strong); border-left-color: var(--accent); box-shadow: var(--shadow-sm); }
.booking:active, .booking.is-dragging { cursor: grabbing; }
.booking.is-dragging { opacity: 0.45; }

.booking.conf { background: var(--accent-soft); border-left-color: var(--accent); }
.booking.arr { background: var(--warning-soft); border-left-color: var(--warning); }
.booking.paid { background: var(--success-soft); border-left-color: var(--success); }
.booking.laser-direct { background: var(--info-soft); border-left-color: var(--info); }
.booking.laser-formula { background: var(--accent-soft); border-left-color: var(--accent-strong); }

.booking-name {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.b-tag {
  font-size: 10px;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pied de carte : activité (gauche, tronquée) + stats effectif/durée (droite),
   épinglé en bas de la carte via margin-top:auto. */
.booking-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}
.booking-foot .b-tag { flex: 1 1 auto; }

/* Effectif + durée : toujours affichés sur TOUTES les cartes. */
.booking-stats {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.booking-stats .u { opacity: 0.65; font-weight: 500; margin-left: 1px; }

/* Effectif : emphase croissante (gris → pastille inversée) selon le groupe. */
.bk-pax {
  display: inline-flex;
  align-items: baseline;
  font-size: 11px;
  font-weight: 500;
  color: var(--faint);
  white-space: nowrap;
}
.bk-pax.grp-m { color: var(--text); font-weight: 600; }
.bk-pax.grp-l {
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--line-strong);
  color: var(--text);
  font-weight: 700;
}
.bk-pax.grp-xl {
  padding: 0 7px;
  border-radius: var(--radius-full);
  background: var(--text);
  color: var(--surface);
  font-weight: 700;
}

/* Durée : 1h neutre, toute autre durée ressort (ambre = attention). Le libellé
   texte porte l'info, la couleur ne fait que la renforcer. */
.bk-dur {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.bk-dur.dur-special {
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--warning-soft);
  color: var(--warning);
  font-weight: 700;
}

/* --- Densité responsive selon la hauteur réelle de la carte (durée × zoom) ---
   dens-lg (défaut) : nom + activité + effectif + durée, aéré.
   dens-md          : idem, compact (les tags secondaires restent masqués).
   dens-xs (≈30 min): une seule ligne, nom tronqué + effectif + durée. */
.booking.dens-xs {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
}
.booking.dens-xs .booking-name { flex: 1 1 auto; font-size: 11px; }
.booking.dens-xs .booking-foot { margin-top: 0; flex: 0 0 auto; }
.booking.dens-xs .booking-foot .b-tag { display: none; }
.booking.dens-xs.is-delayed { padding-right: 22px; }
.booking.dens-xs .delay-indicator .delay-indicator-label { display: none; }

/* Vue non agrandie : les pills dupliquent le .b-tag / la durée, on garde la
   densité. En plein écran, les tags ne reviennent que sur les cartes hautes. */
.planning-box:not(.expanded) .booking .reservation-tags { display: none; }
.planning-box.expanded .booking.dens-md .reservation-tags { display: none; }

.reservation-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }

.reservation-tag {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--subtle);
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}

/* Occasion déclarée et présence d'une note : les deux seuls signaux qui
   changent la préparation d'une réservation. « Note » porte la couleur
   d'attention, l'occasion reste factuelle. */
.reservation-tag.occasion { background: var(--accent-soft); color: var(--accent-strong); }
.reservation-tag.note { background: var(--warning-soft); color: var(--warning); font-weight: 600; }

/* Ligne temps réel */
.current-line {
  position: absolute;
  left: var(--planning-hour-col);
  right: 0;
  height: 2px;
  z-index: 20;
  background: var(--accent);
  pointer-events: none;
}

.current-line::before {
  content: '';
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--accent);
}

.current-line::after {
  content: attr(data-time);
  position: absolute;
  top: -20px;
  left: 8px;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.6;
}

/* Drag & drop bowling */
.bowling-drop-preview {
  position: absolute;
  left: 4px;
  right: 4px;
  z-index: 12;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--text);
  font-size: 10px;
  line-height: 1.2;
}

.bowling-drop-preview strong { font-size: 11px; font-weight: 600; white-space: nowrap; }
.bowling-drop-preview span { color: var(--muted); font-weight: 500; }
.bowling-drop-preview.invalid { border-color: var(--danger); background: var(--danger-soft); }
.bowling-drop-preview.invalid span { color: var(--danger); }

.bowling-drag-ghost-card,
.laser-drag-ghost {
  position: fixed;
  z-index: 600;
  pointer-events: none;
  opacity: 0.96;
}

.bowling-drag-ghost-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: var(--raised);
  color: var(--text);
  line-height: 1.25;
  box-shadow: var(--shadow-overlay);
}

.bowling-drag-ghost-card strong { font-size: 12px; font-weight: 600; }
.bowling-drag-ghost-card span { font-size: 11px; color: var(--muted); }
.bowling-drag-ghost-card small { font-size: 10px; color: var(--faint); }

body.staff-mode.bowling-dragging,
body.staff-mode.bowling-dragging *,
body.staff-mode.laser-dragging,
body.staff-mode.laser-dragging * { user-select: none; }

/* Centre fermé : dossiers existants visibles */
.planning-closed-exception { display: grid; gap: var(--space-3); padding: var(--space-5); }
.planning-closed-exception > div:first-child strong { display: block; font-size: 14px; font-weight: 600; }
.planning-closed-exception > div:first-child span { color: var(--muted); font-size: 12px; }
.closed-planning-list { display: grid; gap: var(--space-2); }

.closed-planning-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.closed-planning-row:hover { background: var(--subtle); border-color: var(--line-strong); }
.closed-planning-row strong { display: block; font-weight: 600; }
.closed-planning-row small { color: var(--muted); font-size: 12px; }
.closed-planning-row span:nth-child(2) { font-family: var(--font-data); font-variant-numeric: tabular-nums; color: var(--muted); }
.closed-planning-row span:last-child { color: var(--faint); font-size: 12px; }

/* Etats vides (complète la recette pinlane.css) */
.empty-state svg { color: var(--faint); }
.e-title { font-size: 14px; font-weight: 500; color: var(--text); }
.e-sub { font-size: 13px; color: var(--muted); max-width: 380px; }

/* ----------------------------------------------------------------------------
   5. PLANNING LASER GAME : agenda par lancement
   -------------------------------------------------------------------------- */
.laser-grid-wrap { overflow-x: auto; }

.laser-pass-queue {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4);
  border-bottom: 1px solid var(--line);
  background: var(--subtle);
}

.laser-pass-queue-copy strong { display: block; font-size: 13px; font-weight: 600; }
.laser-pass-queue-copy span { color: var(--muted); font-size: 12px; line-height: 1.45; }

.laser-pass-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.laser-pass-card {
  display: grid;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: grab;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.laser-pass-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.laser-pass-name { font-size: 13px; font-weight: 600; }
.laser-pass-meta { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--muted); }
.laser-pass-origin { font-size: 11px; color: var(--faint); }

.laser-agenda { min-width: 900px; background: var(--surface); }

.laser-agenda-header {
  display: grid;
  grid-template-columns: 92px minmax(560px, 1fr) 130px;
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.laser-agenda-header > div { padding: 10px 14px; border-right: 1px solid var(--line); }
.laser-agenda-header > div:last-child { border-right: 0; }

.laser-agenda-body { display: flex; flex-direction: column; }

.laser-agenda-row {
  display: grid;
  grid-template-columns: 92px minmax(560px, 1fr) 130px;
  min-height: 72px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.laser-agenda-row.is-half { background: var(--page); }
.laser-agenda-row.is-current { box-shadow: inset 2px 0 0 var(--accent); background: var(--accent-soft); }

.laser-agenda-time,
.laser-agenda-capacity {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 10px 14px;
  border-right: 1px solid var(--line);
}

.laser-agenda-capacity { border-right: 0; }

.laser-agenda-time strong,
.laser-agenda-capacity strong {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.laser-agenda-time span,
.laser-agenda-capacity span { color: var(--faint); font-size: 11px; }

.laser-session-stack { display: grid; gap: 8px; padding: 8px 10px; align-content: start; }

.laser-session-slot {
  display: grid;
  gap: 8px;
  margin: 8px 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.laser-session-stack .laser-session-slot { margin: 0; }

.laser-session-slot.is-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  border-style: dashed;
  background: transparent;
  color: var(--faint);
}

.laser-session-slot.is-empty:hover { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }

.laser-session-slot.has-session {
  background: var(--accent-soft);
  border-color: var(--line);
  border-left: 2px solid var(--accent);
}

.laser-session-slot.has-session:hover { border-color: var(--line-strong); border-left-color: var(--accent); }

.laser-session-slot.is-drop-target { box-shadow: inset 0 0 0 2px var(--accent); }

.laser-empty-title { font-size: 13px; font-weight: 500; }
.laser-empty-sub { font-size: 12px; color: var(--faint); }

.laser-session-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.laser-session-title { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; }
.laser-session-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }

.laser-session-kind {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.laser-group-list { display: flex; flex-wrap: wrap; gap: 6px; }

.laser-group-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: grab;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.laser-group-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.laser-group-card.paid { border-left: 2px solid var(--success); }
.laser-group-card.arrived { border-left: 2px solid var(--warning); }
.laser-group-card.confirmed { border-left: 2px solid var(--info); }

.laser-group-main { display: grid; gap: 2px; min-width: 0; }
.laser-group-main strong { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.laser-group-main small { font-size: 11px; color: var(--muted); }

/* Cluster effectif + durée à droite de la carte laser (réutilise .booking-stats
   et l'échelle d'emphase .bk-pax/.bk-dur pour rester cohérent avec le bowling). */
.laser-group-stats { flex: 0 0 auto; }
.laser-group-count.bk-pax { font-size: 12px; }

.laser-card-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }

.laser-card-pill {
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.7;
}

.laser-card-pill.formula { background: var(--accent-soft); color: var(--accent); }
.laser-card-pill.direct { background: var(--subtle); color: var(--muted); }
.laser-card-pill.pass { background: var(--info-soft); color: var(--info); font-variant-numeric: tabular-nums; }
.laser-card-pill.wave { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.laser-card-pill.fallback { background: var(--warning-soft); color: var(--warning); }

.laser-capacity-line {
  position: relative;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--subtle);
  overflow: hidden;
}

.laser-capacity-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: var(--radius-full); }
.laser-meter-segment { position: absolute; top: 0; bottom: 0; opacity: 0.55; }
.laser-meter-segment.formula { background: var(--accent-strong); }
.laser-meter-segment.direct { background: var(--accent); }

.laser-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--info-soft);
  color: var(--info);
  font-size: 12px;
  font-weight: 500;
}

/* ----------------------------------------------------------------------------
   6. LISTE RÉSERVATIONS (.table-box / .res-*)
   -------------------------------------------------------------------------- */
.table-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.table-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.table-head h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.table-head h2 svg { color: var(--muted); }

.count-badge {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  background: var(--subtle);
  color: var(--muted);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.8;
}

.search-wrap { position: relative; width: 240px; }
.search-wrap svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }

.search-wrap input {
  width: 100%;
  height: 32px;
  padding: 0 10px 0 30px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
}

.res-list { display: flex; flex-direction: column; gap: var(--space-3); }

.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.status-filters { display: flex; gap: 6px; flex-wrap: wrap; }

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.status-chip:hover { background: var(--subtle); color: var(--text); }
.status-chip.active { background: var(--text); border-color: var(--text); color: var(--surface); }
.status-chip.active.arrived { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }
.status-chip.active.pending { background: var(--info-soft); border-color: var(--info); color: var(--info); }
.status-chip.active.paid { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.status-chip.active.notes { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }

.status-chip span {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, currentColor 12%, transparent);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.table-summary { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }

.res-sections { display: flex; flex-direction: column; gap: var(--space-3); }

.res-section {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  background: var(--surface);
}

.res-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px 10px;
}

.res-section.offplanning { border-color: var(--warning); }
.res-section.offplanning .res-section-head .label { color: var(--warning); }
.res-section.offplanning .res-section-head .count { background: var(--warning-soft); color: var(--warning); }

.res-section-head .label { font-size: 13px; font-weight: 600; color: var(--text); }
.res-section-head .table-summary { margin-top: 1px; }

.res-section-head .count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  padding: 0 7px;
  border-radius: var(--radius-full);
  background: var(--subtle);
  color: var(--muted);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  line-height: 1.8;
}

.res-dense-list { display: flex; flex-direction: column; gap: 6px; }

.res-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1.7fr) minmax(130px, 0.8fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.res-row:hover { background: var(--subtle); border-color: var(--line-strong); }
.res-row.pending { border-left: 2px solid var(--info); }
.res-row.arrived { border-left: 2px solid var(--warning); }
.res-row.paid { border-left: 2px solid var(--success); opacity: 0.75; }

.res-row-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: var(--radius-sm);
  background: var(--subtle);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}

.res-row-time strong { font-size: 14px; font-weight: 600; line-height: 1.1; }
.res-row-time span { margin-top: 2px; font-size: 10px; color: var(--faint); }

.res-row-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.res-row-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.res-row-name { font-size: 13px; font-weight: 600; color: var(--text); }

.type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 500;
  background: var(--subtle);
  color: var(--muted);
}

.type-badge.formule { background: var(--accent-soft); color: var(--accent); }
.type-badge.laser { background: var(--info-soft); color: var(--info); }
.type-badge.bowling { background: var(--subtle); color: var(--muted); }

.res-row-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--muted); }
.res-row-meta span { display: inline-flex; align-items: center; gap: 5px; }
.res-row-meta svg { width: 11px; height: 11px; }

.res-row-side { min-width: 0; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.res-row-label { font-size: 11px; color: var(--faint); font-weight: 500; }
.res-row-lanes { display: flex; flex-wrap: wrap; gap: 4px; }

.res-lane-chip {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.7;
}

.res-lane-chip.laser { border-color: var(--info); color: var(--info); background: var(--info-soft); }
.res-lanes-empty { font-size: 12px; color: var(--faint); }

.res-row-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

.res-state-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 500;
  background: var(--subtle);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.res-state-pill.pending { background: var(--info-soft); color: var(--info); }
.res-state-pill.arrived { background: var(--warning-soft); color: var(--warning); }
.res-state-pill.paid { background: var(--success-soft); color: var(--success); }

.res-status-row { display: flex; gap: 5px; }
.res-status-row.compact { justify-content: flex-end; }

.res-status-btn {
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.res-status-btn:hover { background: var(--subtle); color: var(--text); }
.res-status-btn.active.pending { background: var(--info-soft); border-color: var(--info); color: var(--info); }
.res-status-btn.active.arrived { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }
.res-status-btn.active.paid { background: var(--success-soft); border-color: var(--success); color: var(--success); }

.res-row-tools { display: flex; align-items: center; gap: 5px; }

.res-icon-btn {
  width: 27px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--faint);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.res-icon-btn:hover { background: var(--subtle); color: var(--text); border-color: var(--line-strong); }
.res-icon-btn.warn:hover { color: var(--warning); border-color: var(--warning); background: var(--warning-soft); }
.res-icon-btn.danger:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }

.res-empty-inline {
  padding: 14px 10px;
  border-radius: var(--radius-md);
  background: var(--subtle);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.res-ops-line, .res-ops-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--faint);
}

/* Chips engagement client (aussi utilisées côté admin) */
.guest-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  background: var(--subtle);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.guest-chip.ok { background: var(--success-soft); color: var(--success); }
.guest-chip.warn { background: var(--warning-soft); color: var(--warning); }
.guest-mini { display: flex; flex-wrap: wrap; gap: 4px; }

/* ----------------------------------------------------------------------------
   7. VUE D'ENSEMBLE (.dash-*)
   -------------------------------------------------------------------------- */
.staff-dashboard-page { padding-bottom: var(--space-8); } /* pas de display : togglé par .hidden */

.dash-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.dash-hero h1 { font-size: 20px; }

.dash-hero p {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

.dash-live-dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--success); flex: none; }
.dash-hero p > span:last-child { color: var(--faint); font-size: 12px; }

/* Panne du poll temps réel : warning après 2 échecs, périmé après 6 */
.dash-live-dot.warning { background: var(--warning); }
.dash-live-dot.stale { background: var(--danger); }
.dash-hero p > .dash-live-dot.warning + span { color: var(--warning); }
.dash-hero p > .dash-live-dot.stale + span { color: var(--danger); }

.dash-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* Le Dashboard portait son PROPRE controle de date (boite + icone calendrier,
   bouton « Aujourd'hui » separe), different de celui de toutes les autres pages.
   Il utilise desormais le widget partage staffDateNavHtml : memes fleches, meme
   calendrier, meme bouton, un seul comportement a maintenir. */
.dash-card-head button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.dash-card-head button:hover { background: var(--subtle); color: var(--text); }

.dash-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--text);
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--surface);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}

.dash-new-btn:hover { opacity: 0.88; }

.dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.dash-kpi {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  overflow: hidden;
  min-height: 110px;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.dash-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--subtle);
  color: var(--muted);
}

.dash-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* un seul accent : les anciennes teintes purple/blue/green/orange sont neutralisées */
.dash-kpi.purple .dash-icon, .dash-kpi.blue .dash-icon { background: var(--accent-soft); color: var(--accent); }
.dash-kpi.green .dash-icon { background: var(--success-soft); color: var(--success); }
.dash-kpi.orange .dash-icon { background: var(--warning-soft); color: var(--warning); }

.dash-kpi-copy { min-width: 0; }
.dash-kpi-copy span { display: block; color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-kpi-copy strong { display: block; margin-top: 6px; font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--text); }
.dash-kpi-copy small { display: block; margin-top: 5px; color: var(--faint); font-size: 12px; }

.dash-kpi-trend { text-align: right; }
.dash-kpi-trend strong { display: block; font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; color: var(--text); }
.dash-kpi-trend span { display: block; color: var(--faint); font-size: 11px; margin-top: 2px; }

.dash-spark { width: 106px; height: 44px; color: var(--accent); grid-column: 1 / -1; justify-self: end; }
.dash-spark.green { color: var(--success); }
.dash-spark.orange { color: var(--warning); }

.dash-grid-main {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.95fr) minmax(280px, 0.82fr);
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.dash-grid-bottom {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 0.86fr) minmax(0, 1.12fr);
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.dash-card {
  position: relative;
  min-height: 230px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-4) var(--space-5);
}

.dash-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 30px;
  margin-bottom: var(--space-3);
}

.dash-card h2 { font-size: 15px; }

.dash-card-head button { border: 1px solid var(--line-strong); background: var(--surface); min-height: 30px; }

.dash-chart-legend {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
  color: var(--muted);
  font-size: 12px;
}

.dash-chart-legend span { width: 8px; height: 8px; border-radius: var(--radius-full); display: inline-block; margin-right: 5px; }
.dash-chart-legend span.confirmed { background: var(--info); }
.dash-chart-legend span.arrived { background: var(--warning); }
.dash-chart-legend span.paid { background: var(--success); }

/* ── Cartes permutables (graphe au choix, persisté) ─────────────────────── */
/* Le menu du sélecteur déborde de la carte : overflow libéré sur ces cartes. */
.dash-card.dash-card-pickable { overflow: visible; }

.dash-card-titles { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; min-width: 0; }
.dash-card-titles h2 { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-card-meta { color: var(--faint); font-size: 12px; white-space: nowrap; }

.dash-chart-picker { position: relative; flex-shrink: 0; }
.dash-chart-picker-btn svg { width: 14px; height: 14px; }
.dash-chart-picker-btn[aria-expanded="true"] { background: var(--subtle); color: var(--text); }

.dash-chart-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 240px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-overlay);
}

.dash-chart-menu button[role="menuitemradio"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 32px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}

.dash-chart-menu button[role="menuitemradio"]:hover,
.dash-chart-menu button[role="menuitemradio"]:focus-visible { background: var(--subtle); }

.dash-menu-check { display: inline-flex; visibility: hidden; color: var(--accent); }
.dash-menu-check svg { width: 14px; height: 14px; }
.dash-chart-menu button[aria-checked="true"] .dash-menu-check { visibility: visible; }

.dash-range-chart { min-height: 180px; }
.dash-range-chart-main { min-height: 240px; }

.dash-split-rows { display: grid; gap: 12px; margin-top: 4px; }
.dash-split-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 5px; font-size: 13px; }
.dash-split-row strong { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-split-value { color: var(--muted); font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 12px; white-space: nowrap; }
.dash-split-track { grid-column: 1 / -1; display: block; height: 6px; border-radius: var(--radius-full); background: var(--subtle); overflow: hidden; }
.dash-split-track i { display: block; height: 100%; border-radius: var(--radius-full); background: var(--accent); }

.dash-retry-btn {
  margin-top: 10px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.dash-retry-btn:hover { background: var(--subtle); }

.dash-line-chart svg { width: 100%; height: auto; display: block; }
.dash-line-chart polyline { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dash-line-chart polyline.confirmed { stroke: var(--info); }
.dash-line-chart polyline.arrived { stroke: var(--warning); }
.dash-line-chart polyline.paid { stroke: var(--success); }
.dash-line-grid line { stroke: var(--line); stroke-width: 1; }
.dash-line-grid text, .dash-line-x text { fill: var(--faint); font-family: var(--font-data); font-size: 10px; }
.dash-line-marker { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.dash-line-point { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.dash-line-badge rect { fill: var(--text); }
.dash-line-badge text { fill: var(--surface); font-family: var(--font-data); font-size: 11px; font-weight: 600; }

.dash-line-chart { position: relative; }
.dash-line-chart svg { touch-action: none; }
.dash-line-cursor line { stroke: var(--line-strong); stroke-width: 1; }
.dash-line-cursor circle { stroke: var(--surface); stroke-width: 2; }
.dash-line-cursor circle.confirmed { fill: var(--info); }
.dash-line-cursor circle.arrived { fill: var(--warning); }
.dash-line-cursor circle.paid { fill: var(--success); }

.dash-chart-tip {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 92px;
  max-width: 180px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-overlay);
  color: var(--text);
  font-size: 12px;
  line-height: 1.3;
}
.dash-chart-tip[hidden] { display: none; }
.dash-chart-tip strong { font-size: 11px; color: var(--muted); font-weight: 600; }
.dash-chart-tip-row { display: flex; align-items: center; gap: 6px; }
.dash-chart-tip-row i { width: 8px; height: 8px; border-radius: var(--radius-full); flex: none; }
.dash-chart-tip-row i.confirmed { background: var(--info); }
.dash-chart-tip-row i.arrived { background: var(--warning); }
.dash-chart-tip-row i.paid { background: var(--success); }
.dash-chart-tip-row b { margin-left: auto; font-family: var(--font-data); font-variant-numeric: tabular-nums; font-weight: 600; }
.dash-chart-tip-bar b { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 14px; }

.dash-donut-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: center; }

.dash-donut {
  position: relative;
  width: 140px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background: conic-gradient(
    var(--accent) calc(var(--bowling, 0) * 1%),
    var(--warning) calc(var(--bowling, 0) * 1%) calc((var(--bowling, 0) + var(--laser, 0)) * 1%),
    var(--line-strong) calc((var(--bowling, 0) + var(--laser, 0)) * 1%)
  );
}

.dash-donut::before { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: var(--surface); }
.dash-donut strong { position: relative; font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 600; line-height: 1.1; }
.dash-donut span { position: relative; color: var(--muted); font-size: 11px; max-width: 90px; }

.dash-activity-list { display: grid; gap: var(--space-2); align-content: center; }
.dash-activity-list > div { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; font-size: 13px; }
.dash-activity-list i { width: 8px; height: 8px; border-radius: var(--radius-full); }
.dash-activity-list i.bowling { background: var(--accent); }
.dash-activity-list i.laser { background: var(--warning); }
.dash-activity-list i.complete { background: var(--line-strong); }
.dash-activity-list strong { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-weight: 600; }
.dash-activity-list small { color: var(--faint); font-family: var(--font-data); font-variant-numeric: tabular-nums; }

.dash-lanes { display: grid; gap: var(--space-2); }
.dash-lane-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(60px, 1.2fr) 40px; gap: 8px; align-items: center; font-size: 13px; }
.dash-lane-row small { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--subtle); color: var(--muted); font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 11px; }
.dash-lane-row strong { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-lane-row span { position: relative; height: 6px; border-radius: var(--radius-full); background: var(--subtle); overflow: hidden; display: block; }
.dash-lane-row span i { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: var(--radius-full); }
.dash-lane-row em { font-style: normal; font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); text-align: right; }

.dash-arrivals, .dash-alerts { display: grid; gap: 6px; }

.dash-arrival-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 13px;
}

.dash-arrival-row time { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-weight: 600; }
.dash-arrival-row strong { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-arrival-row span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.dash-arrival-row em { font-style: normal; font-size: 11px; font-weight: 500; padding: 1px 8px; border-radius: var(--radius-full); background: var(--subtle); color: var(--muted); }
.dash-arrival-row em.paid { background: var(--success-soft); color: var(--success); }
.dash-arrival-row em.arrived { background: var(--warning-soft); color: var(--warning); }
.dash-arrival-row em.pending { background: var(--info-soft); color: var(--info); }

.dash-alert-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 12px;
}

.dash-alert-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-alert-copy strong { color: var(--text); font-size: 12px; font-weight: 600; }
.dash-alert-row p { color: var(--text-2); line-height: 1.35; }

.dash-alert-row button {
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}

.dash-alert-row button:hover { background: var(--subtle); color: var(--text); }

.dash-alert-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--faint); }
.dash-alert-dot.payment { background: var(--warning); }
.dash-alert-dot.warning { background: var(--danger); }
.dash-alert-dot.maintenance { background: var(--muted); }
.dash-alert-dot.formula { background: var(--accent); }
.dash-alert-dot.info { background: var(--line-strong); }
.dash-alert-dot.review { background: var(--info); }
/* Distinct de .formula (--accent) : deux pastilles identiques dans la meme
   liste ne distinguent rien. */
.dash-alert-dot.lead { background: var(--accent-strong); }

/* Alerte compacte : bouton d'action rapide (CTA) + « Voir » côte à côte. */
.dash-alert-actions { display: flex; gap: 6px; align-items: center; }
.dash-alert-actions .dash-alert-cta { background: var(--text); border-color: var(--text); color: var(--surface); font-weight: 600; }
.dash-alert-actions .dash-alert-cta:hover { background: var(--text); color: var(--surface); opacity: 0.88; }

/* Boutons d'action « réels » dans la modale détail (Valider, Encaisser, Ouvrir…). */
.dashboard-detail-row-actions button.primary,
.dashboard-detail-actions button.primary {
  background: var(--text);
  border-color: var(--text);
  color: var(--surface);
  font-weight: 600;
}
.dashboard-detail-row-actions button.primary:hover,
.dashboard-detail-actions button.primary:hover { background: var(--text); color: var(--surface); opacity: 0.88; }

/* Puce piste en maintenance avec bouton « Libérer » intégré. */
.dashboard-detail-lane-chips span.lane-chip { display: inline-flex; align-items: center; gap: 7px; padding-right: 3px; }
.dashboard-detail-lane-chips .lane-release {
  min-height: 22px;
  padding: 0 9px;
  border: 1px solid var(--text);
  border-radius: var(--radius-full);
  background: var(--text);
  color: var(--surface);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}
.dashboard-detail-lane-chips .lane-release:hover { opacity: 0.85; }

.dash-revenue-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--space-3); flex-wrap: wrap; }
.dash-revenue-head strong { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.dash-revenue-head span { color: var(--muted); font-size: 12px; }
.dash-revenue-head small { color: var(--faint); font-size: 11px; }

.dash-revenue-bars { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; height: 120px; position: relative; }

.dash-revenue-scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--faint);
  font-family: var(--font-data);
  font-size: 10px;
  text-align: right;
  padding-bottom: 18px;
}

.dash-revenue-bar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; }
.dash-revenue-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.dash-revenue-bar span { width: 100%; max-width: 28px; border-radius: 3px 3px 0 0; background: var(--accent); opacity: 0.85; transition: opacity 120ms ease, background-color 120ms ease; }
.dash-revenue-bar small { color: var(--faint); font-family: var(--font-data); font-size: 10px; white-space: nowrap; }
.dash-revenue-bar:hover span, .dash-revenue-bar.is-active span, .dash-revenue-bar:focus-visible span { opacity: 1; background: var(--accent-strong); }
.dash-revenue-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }

@media (prefers-reduced-motion: reduce) {
  .dash-revenue-bar span { transition: none; }
}

.dash-status-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-4);
}

.dash-status-strip > div { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
.dash-status-strip > div > span { grid-row: 1 / 3; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--subtle); color: var(--muted); }
.dash-status-strip > div > span svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dash-status-strip small { color: var(--faint); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-status-strip strong { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; }
.dash-status-strip em { grid-column: 2; font-style: normal; color: var(--faint); font-family: var(--font-data); font-size: 11px; }

.dash-empty { padding: var(--space-6); text-align: center; color: var(--muted); font-size: 13px; }

/* ----------------------------------------------------------------------------
   8. MODALE DÉTAIL DASHBOARD (.dashboard-detail-*)
   -------------------------------------------------------------------------- */
.staff-dashboard-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 440;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: var(--scrim);
}

body.dashboard-detail-open { overflow: hidden; }

.dashboard-detail-modal {
  width: min(760px, 100%);
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
}

.dashboard-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--line);
}

.dashboard-detail-head span { color: var(--muted); font-size: 12px; font-weight: 500; }
.dashboard-detail-head h2 { font-size: 18px; margin-top: 2px; }
.dashboard-detail-head p { color: var(--muted); font-size: 12px; margin-top: 4px; }

.dashboard-detail-close {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.dashboard-detail-close:hover { background: var(--subtle); color: var(--text); }

.dashboard-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
}

.dashboard-detail-summary article { display: grid; gap: 2px; }
.dashboard-detail-summary span { color: var(--muted); font-size: 12px; }
.dashboard-detail-summary strong { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 600; }
.dashboard-detail-summary small { color: var(--faint); font-size: 11px; }

.dashboard-detail-body { flex: 1; min-height: 0; overflow: auto; padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-4); }

.dashboard-detail-section { display: grid; gap: var(--space-2); }
.dashboard-detail-section-head h3 { font-size: 14px; }
.dashboard-detail-section-head p { color: var(--muted); font-size: 12px; margin-top: 2px; }

.dashboard-detail-lane-chips { display: flex; flex-wrap: wrap; gap: 5px; }

.dashboard-detail-lane-chips span {
  padding: 1px 9px;
  border-radius: var(--radius-full);
  border: 1px solid var(--line);
  background: var(--subtle);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.dashboard-detail-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1.6fr) auto auto;
  gap: var(--space-3);
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.dashboard-detail-row.pending { border-left: 2px solid var(--info); }
.dashboard-detail-row.arrived { border-left: 2px solid var(--warning); }
.dashboard-detail-row.paid { border-left: 2px solid var(--success); }

.dashboard-detail-time { display: grid; gap: 2px; text-align: center; }
.dashboard-detail-time strong { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; }
.dashboard-detail-time span { color: var(--faint); font-size: 11px; }

.dashboard-detail-main { min-width: 0; display: grid; gap: 2px; }
.dashboard-detail-main strong { font-size: 13px; font-weight: 600; }
.dashboard-detail-main span { color: var(--muted); font-size: 12px; }
.dashboard-detail-main small { color: var(--faint); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dashboard-detail-amount { text-align: right; }
.dashboard-detail-amount strong { display: block; font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; }
.dashboard-detail-amount span { color: var(--faint); font-size: 11px; }

.dashboard-detail-row-actions { display: flex; gap: 5px; }

.dashboard-detail-row-actions button,
.dashboard-detail-actions button {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}

.dashboard-detail-row-actions button:hover,
.dashboard-detail-actions button:hover { background: var(--subtle); }

.dashboard-detail-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--line);
}

.dashboard-detail-actions button { min-height: 34px; padding: 0 14px; font-size: 13px; }

.dashboard-detail-revenue-list { display: grid; gap: 6px; }

.dashboard-detail-revenue-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 80px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  font-size: 12px;
}

.dashboard-detail-revenue-row time { font-family: var(--font-data); font-variant-numeric: tabular-nums; color: var(--muted); }
.dashboard-detail-revenue-row span { position: relative; height: 6px; border-radius: var(--radius-full); background: var(--subtle); overflow: hidden; display: block; }
.dashboard-detail-revenue-row span i { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: var(--radius-full); }
.dashboard-detail-revenue-row strong { font-family: var(--font-data); font-variant-numeric: tabular-nums; text-align: right; }
.dashboard-detail-revenue-row small { color: var(--faint); font-size: 11px; }

.dashboard-detail-hour-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); }

.dashboard-detail-hour-grid article {
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 12px;
}

.dashboard-detail-hour-grid time { font-family: var(--font-data); font-variant-numeric: tabular-nums; color: var(--muted); font-size: 11px; }
.dashboard-detail-hour-grid strong { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; }
.dashboard-detail-hour-grid span { color: var(--muted); font-size: 11px; }
.dashboard-detail-hour-grid small { color: var(--faint); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dashboard-detail-empty {
  padding: var(--space-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* --- Alertes catégorisées par importance (vue détail « Voir toutes ») --- */
.alert-section {
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.alert-section.pr-critical { border-left-color: var(--danger); }
.alert-section.pr-important { border-left-color: var(--warning); }
.alert-section.pr-info { border-left-color: var(--info); }

.alert-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.alert-section-heading { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.alert-section-heading h3 { font-size: 14px; font-weight: 600; }

.priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.priority-badge .priority-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.priority-badge.pr-critical { background: var(--danger-soft); color: var(--danger); }
.priority-badge.pr-important { background: var(--warning-soft); color: var(--warning); }
.priority-badge.pr-info { background: var(--info-soft); color: var(--info); }

.alert-section-meta { display: inline-flex; align-items: baseline; gap: var(--space-2); white-space: nowrap; }
.alert-section-meta .alert-count { color: var(--muted); font-size: 12px; font-weight: 500; }
.alert-section-meta .alert-total {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 700;
}

.alert-section-note { color: var(--muted); font-size: 12px; line-height: 1.45; }

.alert-subsection { display: grid; gap: var(--space-2); }
.alert-subsection + .alert-subsection { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); }

.alert-subsection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.alert-subsection-title { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.01em; }
.alert-subsection-icon { font-size: 12px; line-height: 1; }
.alert-subsection-meta {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.alert-subsection.tone-critical .alert-subsection-title { color: var(--danger); }
.alert-subsection.tone-critical .alert-subsection-meta { color: var(--danger); }
.alert-subsection.tone-info .alert-subsection-title { color: var(--info); }

/* ----------------------------------------------------------------------------
   9. PAGES UTILITAIRES (.staff-utility-page / .utility-*)
   arrivals · sessions · lanes · laserGame · offers · establishment ·
   contacts · users · settings
   -------------------------------------------------------------------------- */
.staff-utility-page:not(.hidden) { display: grid; gap: var(--space-4); padding-bottom: var(--space-8); }

.utility-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.utility-hero > div:first-child > span { color: var(--muted); font-size: 12px; font-weight: 500; }
.utility-hero h1 { font-size: 20px; margin-top: 2px; }
.utility-hero > div:first-child > p { color: var(--muted); font-size: 13px; margin-top: 4px; max-width: 640px; }

.utility-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.utility-actions button,
.utility-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.utility-actions button:hover,
.utility-action:hover { background: var(--subtle); }

.utility-actions button.primary,
.utility-action.success,
.utility-action.primary {
  background: var(--text);
  border-color: var(--text);
  color: var(--surface);
}

.utility-actions button.primary:hover,
.utility-action.success:hover,
.utility-action.primary:hover { background: var(--text); opacity: 0.88; }

.utility-action.danger { color: var(--danger); border-color: var(--line-strong); }
.utility-action.danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.utility-action.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.utility-action.is-active.success { background: var(--success-soft); border-color: var(--success); color: var(--success); }

.utility-overview {
  display: grid;
  grid-template-columns: minmax(280px, 1.1fr) minmax(0, 1.6fr);
  gap: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-5);
}

.utility-overview-kicker { color: var(--muted); font-size: 12px; font-weight: 500; }
.utility-overview-value-row { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.utility-overview-value-row strong { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.utility-overview-value-row span { color: var(--muted); font-size: 13px; }
.utility-overview-main p { color: var(--muted); font-size: 13px; line-height: 1.5; margin-top: 8px; }

.utility-overview-signals { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-2); align-content: center; }

.utility-overview-signal {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.utility-overview-signal span { color: var(--muted); font-size: 11px; }
.utility-overview-signal strong { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 600; }
.utility-overview-signal small { color: var(--faint); font-size: 11px; }

.utility-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
}

.utility-panel-flat { border: 0; background: transparent; padding: 0; }

.utility-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.utility-panel-head h2 { font-size: 16px; }
.utility-panel-head p { color: var(--muted); font-size: 12px; margin-top: 3px; }

.utility-panel-head button {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.utility-panel-head button:hover { background: var(--subtle); color: var(--text); }

.utility-kpi {
  display: grid;
  gap: 3px;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.utility-kpi span { color: var(--muted); font-size: 12px; }
.utility-kpi strong { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 600; }
.utility-kpi small { color: var(--faint); font-size: 11px; }

.utility-empty,
.utility-mini-empty {
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: var(--space-6);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.utility-mini-empty { padding: var(--space-4); font-size: 12px; }
.utility-empty strong { color: var(--text); font-size: 14px; font-weight: 500; }
.utility-state-note { color: var(--faint); font-size: 12px; }

.utility-inline-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}

.utility-inline-action:hover { background: var(--accent-soft); }

/* Cartes réservation utilitaires */
.utility-res-stack { display: grid; gap: var(--space-2); }

.utility-res-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1.7fr) minmax(120px, 0.8fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.utility-res-card:hover { border-color: var(--line-strong); }
.utility-res-card.pending { border-left: 2px solid var(--info); }
.utility-res-card.arrived { border-left: 2px solid var(--warning); }
.utility-res-card.paid { border-left: 2px solid var(--success); opacity: 0.8; }
.utility-res-card.compact { grid-template-columns: 66px minmax(0, 1fr) auto; padding: 8px 10px; }
.utility-res-card.compact .utility-res-meta { display: none; }

.utility-res-time { display: grid; gap: 2px; text-align: center; }
.utility-res-time strong { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; }
.utility-res-time span { color: var(--faint); font-size: 11px; }

.utility-res-main { min-width: 0; display: grid; gap: 2px; }
.utility-res-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.utility-res-title strong { font-size: 13px; font-weight: 600; }
.utility-res-title span { color: var(--muted); font-size: 11px; padding: 0 8px; border-radius: var(--radius-full); background: var(--subtle); line-height: 1.7; }
.utility-res-main p { color: var(--muted); font-size: 12px; }
.utility-res-main small { color: var(--faint); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.utility-res-meta { display: grid; gap: 3px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.utility-res-meta b { font-weight: 500; }
.utility-res-meta b.paid { color: var(--success); }
.utility-res-meta b.arrived { color: var(--warning); }
.utility-res-meta b.pending { color: var(--info); }

.utility-res-actions { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.utility-res-actions .utility-action { min-height: 28px; padding: 0 10px; font-size: 12px; }

/* Rush board + accueil */
.utility-rush-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }

.utility-rush-column {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--page);
}

.utility-section-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 2px 2px 4px; }
.utility-section-head strong { font-size: 13px; font-weight: 600; }
.utility-section-head span { color: var(--faint); font-size: 12px; }

.utility-arrival-desk { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(240px, 0.8fr); gap: var(--space-4); align-items: start; }
.utility-arrival-main { display: grid; gap: var(--space-2); }

.utility-arrival-side {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--page);
  font-size: 13px;
}

.utility-arrival-side > strong { font-size: 13px; font-weight: 600; }
.utility-arrival-side > span { color: var(--muted); font-size: 12px; }
.utility-arrival-side ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 12px; display: grid; gap: 4px; }

/* Pistes bowling */
.utility-lane-console { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-3); }

.utility-lane {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.utility-lane.maintenance { border-style: dashed; background: var(--page); }

.utility-lane-head { display: grid; gap: 2px; }
.utility-lane-head span { color: var(--muted); font-size: 12px; font-weight: 500; }
.utility-lane-head strong { font-size: 14px; font-weight: 600; }
.utility-lane-head small { color: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; }

.utility-lane-meter { position: relative; height: 6px; border-radius: var(--radius-full); background: var(--subtle); overflow: hidden; }
.utility-lane-meter i { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: var(--radius-full); }
.utility-lane.maintenance .utility-lane-meter i { background: var(--warning); }

.utility-lane-next { font-size: 12px; color: var(--muted); min-height: 30px; }
.utility-lane-next b { display: block; color: var(--text); font-weight: 600; }

.utility-lane button {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.utility-lane button:hover { background: var(--subtle); }

/* Sessions laser (contrôle) */
.utility-laser-control { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); }

.utility-session {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.utility-session-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.utility-session-head strong { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; }
.utility-session-head span { display: block; color: var(--faint); font-size: 11px; margin-top: 2px; }
.utility-session-head b { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); }

.utility-session-bar { position: relative; height: 6px; border-radius: var(--radius-full); background: var(--subtle); overflow: hidden; }
.utility-session-bar i { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: var(--radius-full); }

.utility-session-groups { display: grid; gap: 4px; }

.utility-session-groups button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}

.utility-session-groups button:hover { background: var(--subtle); }
.utility-session-groups em { font-style: normal; color: var(--faint); font-variant-numeric: tabular-nums; }

/* --- Établissement : éditeur de configuration par centre --- */
.establishment-page { display: grid; gap: var(--space-4); }
.establishment-loading, .establishment-error { padding: var(--space-8) var(--space-5); text-align: center; color: var(--muted); font-size: 13px; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); }
.establishment-error { display: grid; gap: var(--space-2); justify-items: center; }
.establishment-error strong { color: var(--text); font-size: 14px; }

.establishment-selector { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.establishment-selector-head h2 { font-size: 15px; }
.establishment-selector-head p { color: var(--muted); font-size: 12px; margin-top: 2px; }
.establishment-center-list { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-start; }

.establishment-center-chip {
  display: grid; gap: 4px; min-width: 170px; flex: 0 1 210px; max-width: 240px; padding: 9px 12px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--page);
  color: var(--text); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.establishment-center-chip:hover { border-color: var(--line-strong); }
.establishment-center-chip.active { border-color: var(--accent); background: var(--accent-soft); }
.establishment-chip-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.establishment-chip-top strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.establishment-center-chip small { color: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; }

.establishment-status {
  display: inline-flex; align-items: center; flex: none; width: auto; height: 20px;
  padding: 0 8px; border-radius: var(--radius-full); font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap;
}
.establishment-status-active { background: var(--success-soft); color: var(--success); }
.establishment-status-planned { background: var(--warning-soft); color: var(--warning); }
.establishment-status-closed { background: var(--subtle); color: var(--muted); }

/* Ajouter un centre : c'etait une 4e carte au milieu des centres, on la lisait
   comme un centre nomme « Ajouter un centre ». Carte d'action en pointilles, le
   formulaire n'apparait qu'a la demande. */
.establishment-add-slot { display: flex; min-width: 210px; flex: 0 1 240px; }
.establishment-add-card {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 62px; padding: 9px 12px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: transparent;
  color: var(--muted); font-family: var(--font-ui); font-size: 13px; font-weight: 500; text-align: left; cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.establishment-add-card:hover { border-color: var(--accent); color: var(--accent); }
.establishment-add-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.establishment-add-plus {
  display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: var(--radius-full); background: var(--subtle); font-size: 16px; line-height: 1;
}
.establishment-add-card:hover .establishment-add-plus { background: var(--accent-soft); }

.establishment-add {
  display: grid; gap: 6px; align-content: start; width: 100%; padding: 9px 12px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--page);
}
.establishment-add-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.establishment-add span { color: var(--muted); font-size: 11px; font-weight: 500; }
.establishment-add input { height: 34px; }

/* ── Configuration du centre : 5 categories, une question par onglet ──────
   Avant : 7 sections empilees en lecture et 9 fieldsets en grille auto-fit en
   edition (4900 px de haut, colonnes de hauteurs inegales, trous). */
.estab-tabs { justify-self: start; }
.estab-panel[hidden] { display: none; }
.estab-edit-hint { color: var(--muted); font-size: 12px; margin-top: -6px; }
.estab-read-stack, .estab-edit-stack { display: grid; gap: var(--space-4); }
/* Les cartes d'une meme rangee ont la meme hauteur : c'est l'align-items: start
   qui donnait l'impression de blocs poses au hasard. */
.estab-edit-grid, .estab-read-duo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4); align-items: stretch;
}
/* Le nombre de colonnes est DECIDE par panneau (4 cartes -> 2x2, 3 cartes -> 3x1)
   au lieu d'etre subi par auto-fit : c'est ce qui laissait une carte orpheline
   seule sur sa rangee. */
.estab-edit-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.estab-edit-grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.estab-read-duo { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.estab-edit-grid > .establishment-card { align-content: start; }
/* Le panneau Blocages vit desormais DANS l'onglet Horaires : plus de double
   cadre, il est une carte de l'onglet et non une section orpheline en bas. */
.estab-read-stack > .availability-blocks, .estab-edit-stack > .availability-blocks {
  margin-top: 0; padding: var(--space-5); background: var(--page);
}

.establishment-editor { display: grid; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.establishment-editor-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.establishment-eyebrow { color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.establishment-editor-head h2 { font-size: 18px; margin-top: 3px; }
.establishment-editor-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.establishment-readonly { color: var(--muted); font-size: 12px; }

.establishment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); align-items: start; }
.establishment-card { display: grid; gap: var(--space-3); margin: 0; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--page); }
.establishment-card legend { padding: 0 6px; margin-left: -6px; color: var(--text); font-size: 13px; font-weight: 600; }
.establishment-hours, .establishment-activities { grid-column: 1 / -1; }

.estab-day-row { display: grid; grid-template-columns: 90px auto minmax(0, 120px) auto minmax(0, 120px); gap: 10px; align-items: center; justify-content: start; }
.estab-day-label { font-size: 13px; font-weight: 500; }
.estab-day-closed { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.estab-day-sep { color: var(--faint); text-align: center; }
.estab-day-row input[type='time'] { height: 34px; max-width: 120px; }
/* A3 : le message d'erreur d'un horaire occupe sa propre ligne sous la rangée */
.estab-day-row .field-error-message { grid-column: 1 / -1; }
.estab-day-row input[type='time']:disabled { opacity: 0.45; }
.estab-day-row input[type='time']::-webkit-calendar-picker-indicator { opacity: 0.55; }
[data-theme='dark'] .estab-day-row input[type='time']::-webkit-calendar-picker-indicator { filter: invert(1); }

/* Checkbox « Fermé » custom (le natif est masqué, la boîte est dessinée) */
.estab-check {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.estab-check-box {
  display: inline-grid;
  place-items: center;
  width: 16px; height: 16px;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.estab-check-box::after {
  content: '';
  width: 8px; height: 4px;
  border-left: 2px solid var(--accent-contrast);
  border-bottom: 2px solid var(--accent-contrast);
  transform: rotate(-45deg) translateY(-1px);
  opacity: 0;
}
.estab-check:checked + .estab-check-box { background: var(--accent); border-color: var(--accent); }
.estab-check:checked + .estab-check-box::after { opacity: 1; }
.estab-check:focus-visible + .estab-check-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.estab-day-closed { cursor: pointer; }
.establishment-card .field input[type='number'] { max-width: 120px; }

.establishment-activity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.establishment-activity {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface); font-size: 12px; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.establishment-activity:hover { border-color: var(--line-strong); }
.establishment-activity.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 500; }
/* Le checkbox natif est masqué : la chip entière est le contrôle (état = couleur + coche) */
.establishment-activity input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.establishment-activity::before {
  content: '';
  width: 8px; height: 4px;
  flex: none;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translateY(-1px);
  opacity: 0.25;
}
.establishment-activity.on::before { opacity: 1; }
.establishment-activity:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Statut à côté du titre de l'éditeur */
.establishment-editor-head h2 { display: inline-flex; align-items: center; gap: 10px; }
.establishment-editor-head h2 .establishment-status { font-size: 11px; }

/* Panneau Blocages & fermetures (Etablissement, settings.manage) */
.availability-blocks { display: grid; gap: var(--space-4); margin-top: var(--space-4); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.availability-blocks-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.availability-blocks-headline { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.avb-head-ico { flex: none; }
.avb-head-ico svg { width: 20px; height: 20px; }
.availability-blocks-head h2 { font-size: 18px; margin-top: 2px; letter-spacing: -0.01em; }
.availability-blocks-head p { color: var(--muted); font-size: 13px; line-height: 1.5; max-width: 62ch; margin-top: 4px; }
.availability-blocks-grid { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: var(--space-4); align-items: start; }
@media (max-width: 760px) { .availability-blocks-grid { grid-template-columns: 1fr; } }
.availability-form { margin: 0; }
.availability-form .btn-primary { justify-self: start; margin-top: 4px; }
.avb-hint { color: var(--faint); font-size: 12px; margin: -4px 0 0; }
.availability-list-wrap { display: grid; gap: 10px; align-content: start; }
.availability-list-wrap h3 { font-size: 13px; font-weight: 600; }
.availability-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.availability-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--page); transition: border-color var(--dur-fast) var(--ease); }
.availability-item:hover { border-color: var(--line-strong); }
.availability-item-body { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.availability-item-label { min-width: 0; font-size: 13px; font-weight: 500; color: var(--text); }
.availability-item-reason { font-size: 12px; color: var(--muted); }
.availability-del { flex: none; color: var(--muted); }
.availability-del:hover { color: var(--danger); background: var(--danger-soft); }
.availability-dot { width: 9px; height: 9px; margin-top: 4px; border-radius: 999px; flex: none; background: var(--muted); }
.availability-dot.scope-center { background: var(--danger); }
.availability-dot.scope-lane { background: var(--accent); }
.availability-dot.scope-activity { background: var(--warning); }
.availability-dot.scope-formula { background: var(--success); }
.availability-empty { color: var(--muted); font-size: 13px; padding: 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); }
.availability-error { color: var(--danger); border-color: var(--danger); }

/* Vue lecture (avant clic sur Modifier) */
.establishment-readview { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); align-items: start; }
.establishment-read-card { display: grid; gap: 8px; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--page); align-content: start; }
.establishment-read-card h3 { font-size: 13px; font-weight: 600; }
.establishment-resources-read, .establishment-hours-read, .establishment-activities-read { grid-column: 1 / -1; }
.establishment-resources-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-2) var(--space-6); }
.establishment-resource-col h4 { font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 2px; }
.establishment-hours-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 var(--space-6); }
.establishment-kv { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.establishment-kv:last-child { border-bottom: 0; }
.establishment-kv > span { color: var(--muted); }
.establishment-kv > strong { font-weight: 600; text-align: right; }
.establishment-kv .num { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.establishment-closed-tag { color: var(--muted); font-weight: 500; }
.establishment-read-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.establishment-read-tags span { padding: 3px 10px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--surface); font-size: 12px; }
.establishment-read-empty { color: var(--muted); font-size: 13px; }
.establishment-read-hint { color: var(--muted); font-size: 12px; }

/* Horaires vacances & fériés + centre de contrôle des offres */
.establishment-toggle {
  display: flex; align-items: flex-start; gap: 8px;
  color: var(--text); font-size: 12.5px; line-height: 1.45; cursor: pointer;
}
.establishment-toggle .estab-check-box { margin-top: 1px; }
.establishment-toggle input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.establishment-toggle input:checked + .estab-check-box { background: var(--accent); border-color: var(--accent); }
.establishment-toggle input:checked + .estab-check-box::after { opacity: 1; }
.establishment-toggle input:focus-visible + .estab-check-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.establishment-holiday-hours .establishment-toggle { margin-bottom: var(--space-2); }

.estab-subsection { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); display: grid; gap: 8px; }
.estab-subsection h4 { font-size: 12px; font-weight: 600; color: var(--muted); }
.estab-period-grid { display: grid; gap: 6px; }
.estab-card-hint { color: var(--muted); font-size: 12px; margin-bottom: var(--space-2); }
/* Champs numériques côte à côte (classification, paliers) */
/* align-items: end -> les champs restent alignes meme quand un libelle passe sur
   deux lignes (« Joueurs max / piste (secours) »). */
.estab-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: var(--space-3); align-items: end; }
/* Un champ de 300 px pour saisir « 8 » : le max-width: none datait des colonnes
   etroites. La cellule fait la largeur, pas le nombre. */
.estab-field-row .field input[type='number'] { max-width: 100%; }
/* Section Classification : léger accent pour la distinguer (nouvelle, business) */
.establishment-classification { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.establishment-classification legend { color: var(--accent-strong); }
.establishment-classification-read h3 { color: var(--accent-strong); }

/* ============================================================================
   ÉTABLISSEMENT v2 : système de configuration premium (tuiles, semaine, badges)
   ========================================================================== */
.establishment-page { gap: var(--space-5); }

/* En-tête de page */
.estab-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.estab-page-head h1 { font-size: 22px; font-weight: 650; letter-spacing: -0.01em; }
.estab-page-head .estab-page-sub { color: var(--muted); font-size: 13px; margin-top: 3px; }
.estab-page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Sélecteur de centres : cartes riches */
.establishment-selector { padding: var(--space-5); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.establishment-center-chip {
  min-width: 230px; flex: 1 1 230px; max-width: 320px; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.establishment-center-chip:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.establishment-center-chip.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-md); background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); }
.establishment-chip-top strong { font-size: 15px; }
.estab-chip-stats { display: flex; gap: var(--space-5); margin-top: 2px; }
.estab-chip-stat { display: grid; gap: 1px; }
.estab-chip-stat b { font: 600 17px/1 var(--font-data); font-variant-numeric: tabular-nums; }
.estab-chip-stat span { font-size: 11px; color: var(--muted); }
.establishment-add { min-width: 220px; border-radius: var(--radius-lg); padding: var(--space-4); }

/* Coquille éditeur/lecture */
.establishment-editor { padding: var(--space-6); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.establishment-editor-head { padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); margin-bottom: var(--space-2); }
.establishment-editor-head h2 { font-size: 20px; }

/* Vue lecture : grille de sections premium */
.establishment-readview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.estab-section { display: grid; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--page); align-content: start; }
.estab-section.full { grid-column: 1 / -1; }
.estab-section-head { display: flex; align-items: center; gap: var(--space-3); }
.estab-section-ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-strong); }
.estab-section-ico svg { width: 20px; height: 20px; }
.estab-section-copy { display: grid; gap: 1px; }
.estab-section-copy h3 { font-size: 15px; font-weight: 650; }
.estab-section-copy p { font-size: 12px; color: var(--muted); }

/* Tuiles de ressources : grand chiffre */
.estab-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--space-3); }
.estab-stat { display: grid; gap: 8px; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.estab-stat-top { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 500; }
.estab-stat-ico { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border-radius: var(--radius-sm); background: var(--subtle); color: var(--muted); }
.estab-stat-ico svg { width: 16px; height: 16px; }
.estab-stat-value { font: 600 28px/1 var(--font-data); font-variant-numeric: tabular-nums; color: var(--text); }
.estab-stat-value small { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 5px; }
.estab-stat-sub { font-size: 11px; color: var(--faint); }

/* Semaine horaires : tableau lisible */
.estab-week { display: grid; gap: 3px; }
/* Colonnes serrees : « normal » et « vacances » se comparent d'un coup d'oeil.
   En 1fr 1fr, 300 px separaient les deux horaires du meme jour. */
.estab-week-head, .estab-week-row { display: grid; grid-template-columns: 110px minmax(0, 190px) minmax(0, 190px); gap: var(--space-3); align-items: center; }
.estab-week-head { padding: 0 var(--space-3) 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); font-weight: 600; }
/* justify-items: start, sinon la pastille d'horaire s'etire sur toute la colonne
   et la semaine devient sept barres pleines bleues et oranges. */
.estab-week-row { padding: 9px var(--space-3); border-radius: var(--radius-sm); justify-items: start; }
.estab-week-row:nth-child(odd) { background: var(--surface); }
.estab-week-day { font-size: 13px; font-weight: 550; }
.estab-hour-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent-strong); font: 550 12px var(--font-data); font-variant-numeric: tabular-nums; }
.estab-hour-pill.holiday { background: color-mix(in srgb, var(--warning-soft) 70%, transparent); color: var(--warning); }
.estab-hour-closed { display: inline-flex; align-items: center; gap: 5px; color: var(--faint); font-size: 12px; }

/* Lignes règle / clé-valeur premium + badges */
.estab-rules { display: grid; gap: 0; }
.estab-rule { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 11px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
.estab-rule:last-child { border-bottom: 0; }
.estab-rule-label { color: var(--muted); display: grid; gap: 1px; }
.estab-rule-label small { color: var(--faint); font-size: 11px; }
.estab-rule-value { font-weight: 600; text-align: right; }
.estab-rule-value .num { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.estab-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: var(--radius-full); font-size: 12px; font-weight: 550; white-space: nowrap; }
.estab-badge.on { background: var(--success-soft); color: var(--success); }
.estab-badge.off { background: var(--subtle); color: var(--muted); }
.estab-badge.accent { background: var(--accent-soft); color: var(--accent-strong); }
.estab-badge.warn { background: var(--warning-soft); color: var(--warning); }
.estab-badge.danger { background: var(--danger-soft); color: var(--danger); }
.estab-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.estab-chip-row .estab-tag { padding: 4px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: var(--surface); font-size: 12px; }
.estab-empty { color: var(--faint); font-size: 13px; }

/* Édition : cartes plus premium + en-tête */
.establishment-card { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface); }
.establishment-card legend { font-size: 14px; }
.estab-subhead { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--faint); font-weight: 600; margin-top: var(--space-2); }

.estab-section-accent { border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); }
.estab-section-accent .estab-section-copy h3 { color: var(--accent-strong); }

/* Activités personnalisées (tag marqué + liste éditable) */
.estab-tag-custom { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); color: var(--accent-strong); }
.estab-tag-off { border-style: dashed; color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.estab-custom-activities-list { display: flex; flex-wrap: wrap; gap: 8px; }
.estab-custom-activity {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px 5px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: var(--surface); font-size: 13px;
}
.estab-custom-activity .estab-override-remove {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border: 0; border-radius: 50%; background: var(--subtle); color: var(--muted); cursor: pointer;
}
.estab-custom-activity .estab-override-remove:hover { background: var(--danger-soft); color: var(--danger); }

@media (max-width: 720px) {
  .establishment-readview { grid-template-columns: 1fr; }
  .estab-week-head, .estab-week-row { grid-template-columns: 72px 1fr 1fr; gap: var(--space-2); }
}

.estab-override-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Le champ « nom d'activite » prenait toute la largeur de l'onglet. */
.estab-override-form input[type='text'] { height: 34px; max-width: 320px; }
.estab-override-form input[type='date'] { height: 34px; max-width: 160px; }
.estab-override-form input[type='date']::-webkit-calendar-picker-indicator { opacity: 0.55; }
[data-theme='dark'] .estab-override-form input[type='date']::-webkit-calendar-picker-indicator { filter: invert(1); }
.estab-override-form select { height: 34px; max-width: 240px; }
.estab-overrides-list { display: flex; flex-direction: column; gap: 6px; }
.estab-overrides-empty { color: var(--muted); font-size: 12px; }
.estab-override-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); font-size: 12px;
}
.estab-override-chip .num { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-weight: 600; }
.estab-override-chip.is-holiday span:nth-child(2) { color: var(--warning); }
.estab-override-chip.is-normal span:nth-child(2) { color: var(--success); }
.estab-override-remove {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; margin-left: auto;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: transparent; color: var(--muted); cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.estab-override-remove:hover { border-color: var(--danger); color: var(--danger); }

.estab-offer-group { margin-top: var(--space-2); display: grid; gap: 8px; }
.estab-offer-group h4 { font-size: 12px; font-weight: 600; color: var(--muted); }

@media (max-width: 720px) {
  .estab-day-row { grid-template-columns: 1fr auto; grid-auto-rows: auto; row-gap: 6px; }
  .estab-day-row input[type='time'] { grid-column: 1 / -1; }
  .estab-day-sep { display: none; }
}

/* Contacts (carnet) */
.utility-contact-ledger, .utility-contact-table { display: grid; gap: 6px; }

.utility-contact-table-head {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 0.8fr) auto;
  gap: var(--space-3);
  padding: 4px 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.utility-contact-line,
.utility-contact-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 0.8fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 13px;
}

.utility-contact-row { grid-template-columns: 34px minmax(0, 1.4fr) minmax(0, 1fr) auto auto; }
.utility-contact-line:hover, .utility-contact-row:hover { border-color: var(--line-strong); }

.utility-contact-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.utility-contact-id strong, .utility-contact-row .utility-main strong { display: block; font-size: 13px; font-weight: 600; }
.utility-contact-id small, .utility-contact-row .utility-main em { display: block; color: var(--faint); font-size: 11px; font-style: normal; }

.utility-avatar {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--subtle);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  flex: none;
}

.utility-contact-status { font-size: 12px; color: var(--muted); }
.utility-contact-stats { display: grid; gap: 1px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.utility-contact-line > span:nth-child(4) { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.utility-contact-line > span small { display: block; color: var(--faint); font-size: 11px; }
.utility-resource { color: var(--muted); font-size: 12px; }

.utility-main { min-width: 0; }
.utility-settings-console, .utility-group-workspace { display: grid; gap: var(--space-4); }

/* ----------------------------------------------------------------------------
   10. GROUPES & ANNIVERSAIRES (.groups-* / .group-*)
   -------------------------------------------------------------------------- */
.groups-page { display: grid; gap: var(--space-4); }

.groups-toolbar-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.groups-toolbar-main { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

.groups-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 240px;
  min-width: 200px;
  height: var(--h-md);
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--faint);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.groups-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.groups-search svg { width: 14px; height: 14px; flex: none; }
.groups-search input { flex: 1; height: 30px; border: 0; padding: 0; background: transparent; color: var(--text); font-family: var(--font-ui); font-size: 13px; }
.groups-search input:focus { outline: none; box-shadow: none; }

.groups-select { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.groups-select select { width: auto; height: 34px; padding: 0 28px 0 10px; font-size: 13px; }

.groups-tabs { display: inline-flex; gap: 2px; flex-wrap: wrap; padding: 3px; background: var(--subtle); border-radius: var(--radius-md); justify-self: start; }

.groups-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.groups-tabs button:hover { color: var(--text); }
.groups-tabs button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); }
.groups-tabs button span { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--faint); }

.groups-metrics-strip { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.groups-metrics-strip span { display: inline-flex; align-items: center; gap: 6px; }
.groups-metrics-strip svg { width: 13px; height: 13px; color: var(--faint); }
.groups-metrics-strip strong { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }

.groups-main-layout { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(260px, 0.9fr); gap: var(--space-4); align-items: start; }
.groups-primary-stack, .groups-side-stack { display: grid; gap: var(--space-4); }

.groups-selected-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.groups-selected-header { display: flex; align-items: center; gap: var(--space-3); }
.groups-selected-ident { min-width: 0; }
.groups-selected-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.groups-selected-title h2 { font-size: 17px; overflow: hidden; text-overflow: ellipsis; }
.groups-selected-header p { color: var(--muted); font-size: 12px; margin-top: 4px; }

.groups-selected-contact { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.groups-contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--subtle);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.groups-contact-chip:hover { border-color: var(--line-strong); background: var(--surface); text-decoration: none; }
.groups-contact-chip svg { width: 13px; height: 13px; flex: none; color: var(--muted); }
.groups-contact-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.groups-contact-chip .groups-contact-email { font-family: var(--font-data); font-size: 11px; }
.groups-contact-empty { color: var(--faint); font-size: 12px; }

.groups-avatar {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--subtle);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  flex: none;
}

.groups-avatar.small { width: 30px; height: 30px; font-size: 11px; }

.groups-selected-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); }
.groups-selected-grid > div { display: grid; gap: 3px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--page); }
.groups-selected-grid span { color: var(--muted); font-size: 11px; }
.groups-selected-grid strong { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

.groups-selected-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.groups-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.groups-action:hover { background: var(--subtle); }
.groups-action.primary { background: var(--text); border-color: var(--text); color: var(--surface); }
.groups-action.primary:hover { opacity: 0.88; background: var(--text); }
.groups-action.icon { padding: 0 10px; }

.groups-status,
.groups-type {
  display: inline-flex;
  align-items: center;
  padding: 1px 9px;
  border-radius: var(--radius-full);
  background: var(--subtle);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.groups-status-confirmed { background: var(--info-soft); color: var(--info); }
.groups-status-pending { background: var(--subtle); color: var(--muted); }
.groups-status-arrived { background: var(--warning-soft); color: var(--warning); }
.groups-status-paid { background: var(--success-soft); color: var(--success); }

.groups-type-laser { background: var(--info-soft); color: var(--info); }
.groups-type-formule { background: var(--accent-soft); color: var(--accent); }
.groups-type-complete { background: var(--accent-soft); color: var(--accent-strong); }

.groups-ledger-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.groups-ledger-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.groups-ledger-head h3 { font-size: 15px; }
.groups-ledger-head p { color: var(--muted); font-size: 12px; margin-top: 2px; }

.groups-ledger-head button,
.groups-show-more {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.groups-ledger-head button:hover, .groups-show-more:hover { background: var(--subtle); color: var(--text); }
.groups-show-more { justify-self: center; }

/* P1-6 : les lignes font min 720px, quand le panneau est plus étroit, le
   débordement horizontal doit être VISIBLE (colonne Actions atteignable).
   Scrollbar fine toujours dessinée, stylée tokens (Chromium + Firefox). */
.groups-ledger {
  display: grid;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) var(--subtle);
}
.groups-ledger::-webkit-scrollbar { height: 8px; }
.groups-ledger::-webkit-scrollbar-track { background: var(--subtle); border-radius: var(--radius-full); }
.groups-ledger::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--radius-full); }
.groups-ledger::-webkit-scrollbar-thumb:hover { background: var(--faint); }

.groups-ledger-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.6fr) minmax(130px, 1fr) auto auto auto minmax(70px, auto) auto;
  gap: var(--space-3);
  align-items: center;
  min-width: 720px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 13px;
}

.groups-ledger-row:hover:not(.groups-ledger-row-head) { border-color: var(--line-strong); }

.groups-ledger-row-head {
  border: 0;
  padding: 2px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.groups-profile-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.groups-profile-cell > div { min-width: 0; }
.groups-profile-cell strong { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.groups-profile-cell small { display: block; color: var(--faint); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.groups-date-cell { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); }
.groups-ledger-row > strong { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-weight: 600; }

.groups-row-actions { display: flex; gap: 6px; }

.groups-row-actions button {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.groups-row-actions button:hover { background: var(--subtle); color: var(--text); border-color: var(--faint); }
.groups-row-actions svg { width: 14px; height: 14px; }

.groups-side-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.groups-side-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.groups-side-head h3 { font-size: 14px; }
.groups-side-head button { border: 0; background: transparent; color: var(--accent); font-size: 12px; font-weight: 500; cursor: pointer; padding: 4px; }
.groups-side-head button:hover { text-decoration: underline; }

.groups-agenda-list, .groups-action-list { display: grid; gap: 6px; }

.groups-agenda-item {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 3px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  font-size: 12px;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}

.groups-agenda-item:hover { background: var(--subtle); }
.groups-agenda-item span { color: var(--muted); font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 11px; }
.groups-agenda-item strong { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-weight: 600; }
.groups-agenda-item em { font-style: normal; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.groups-agenda-item small { grid-column: 3; color: var(--faint); font-variant-numeric: tabular-nums; }

.groups-action-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 12px;
}

.groups-action-icon { width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: var(--radius-sm); background: var(--subtle); color: var(--muted); }
.groups-action-icon svg { width: 14px; height: 14px; }
.groups-action-item strong { display: block; font-size: 12px; font-weight: 600; }
.groups-action-item small { display: block; color: var(--faint); font-size: 11px; }

.groups-action-item button {
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}

.groups-action-item button:hover { background: var(--subtle); }

.groups-empty-note { padding: var(--space-3); color: var(--faint); font-size: 12px; text-align: center; }

.groups-empty-state {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  text-align: center;
  padding: var(--space-10) var(--space-6);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
}

.groups-empty-state span { color: var(--muted); font-size: 12px; font-weight: 500; }
.groups-empty-state h2 { font-size: 18px; }
.groups-empty-state p { color: var(--muted); font-size: 13px; max-width: 480px; }
.groups-empty-state > div { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; justify-content: center; }

/* Ancien workspace groupes (fallback si V2 indisponible) */
.group-command { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }

.group-focus, .group-agenda, .group-ledger, .group-followups {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.group-label { color: var(--muted); font-size: 12px; font-weight: 500; }
.group-focus-main { display: flex; align-items: center; gap: var(--space-3); }
.group-focus-main strong { display: block; font-size: 15px; font-weight: 600; }
.group-focus-main small { display: block; color: var(--muted); font-size: 12px; }

.group-avatar {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--subtle);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  flex: none;
}

.group-focus-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-2); margin: 0; }
.group-focus-grid > div { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.group-focus-grid dt { color: var(--muted); font-size: 11px; }
.group-focus-grid dd { margin: 0; font-size: 12px; font-weight: 600; }

.group-focus-actions, .group-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.group-section-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.group-section-title strong { font-size: 13px; font-weight: 600; }
.group-section-title span { color: var(--faint); font-size: 11px; }

.group-agenda-list, .group-followup-list { display: grid; gap: 6px; }

.group-agenda-row, .group-followup-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  text-align: left;
}

button.group-agenda-row, button.group-followup-row { cursor: pointer; transition: background-color var(--dur) var(--ease); }
button.group-agenda-row:hover, button.group-followup-row:hover { background: var(--subtle); }
.group-agenda-row span, .group-followup-row span { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.group-agenda-row strong, .group-followup-row strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.group-agenda-row em, .group-followup-row em { font-style: normal; color: var(--faint); font-size: 11px; }

.group-ledger-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.group-ledger-head strong { display: block; font-size: 14px; font-weight: 600; }
.group-ledger-head span { color: var(--muted); font-size: 12px; }

.group-ledger-head button {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.group-ledger-head button:hover { background: var(--subtle); color: var(--text); }

.group-table { display: grid; gap: 4px; overflow-x: auto; }

.group-table-head, .group-table-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.5fr) minmax(150px, 1.1fr) auto minmax(80px, auto) auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  min-width: 700px;
  padding: 8px 10px;
  font-size: 12px;
}

.group-table-head { color: var(--muted); font-weight: 500; padding-bottom: 2px; }
.group-table-row { border: 1px solid var(--line); border-radius: var(--radius-md); }
.group-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.group-identity strong { display: block; font-weight: 600; }
.group-identity small { display: block; color: var(--faint); font-size: 11px; }
.group-next strong { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.group-next small, .group-metrics small, .group-value small { display: block; color: var(--faint); font-size: 11px; }
.group-metrics strong, .group-value strong { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-weight: 600; }
.group-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.group-tags span { padding: 0 8px; border-radius: var(--radius-full); background: var(--subtle); color: var(--muted); font-size: 10px; line-height: 1.8; }

.group-empty-guide .group-empty-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-2); }
.group-empty-steps article { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); font-size: 12px; }
.group-empty-steps strong { font-weight: 600; }
.group-empty-steps span { color: var(--muted); }

/* ----------------------------------------------------------------------------
   11. ÉVÉNEMENTS (.events-* / .event-*)
   -------------------------------------------------------------------------- */
.events-workspace { display: grid; gap: var(--space-4); }

.events-command-bar { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, 0.8fr); gap: var(--space-3); align-items: stretch; }

.events-now-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border-left: 2px solid var(--accent);
}

.events-kicker { color: var(--muted); font-size: 12px; font-weight: 500; }
.events-now-card strong { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.events-now-card p { color: var(--muted); font-size: 12px; margin-top: 2px; }
.events-now-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.events-day-digest {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  font-size: 12px;
  color: var(--muted);
  align-content: center;
}

.events-day-digest b { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 600; color: var(--text); margin-right: 5px; }

.events-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 0.8fr); gap: var(--space-4); align-items: start; }

.events-agenda {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.events-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.events-section-head h3 { font-size: 15px; }
.events-section-head p { color: var(--muted); font-size: 12px; margin-top: 2px; }

.events-section-head button,
.events-side section button {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}

.events-section-head button:hover, .events-side section button:hover { background: var(--subtle); }

.events-timeline { display: grid; gap: var(--space-2); }

.event-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1.6fr) minmax(150px, 0.9fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.event-row.tone-warning { border-left: 2px solid var(--warning); }
.event-row.tone-info { border-left: 2px solid var(--info); }
.event-row.tone-success { border-left: 2px solid var(--success); }
.event-row.tone-neutral { border-left: 2px solid var(--line-strong); }

.event-time { display: grid; gap: 2px; text-align: center; }
.event-time strong { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; }
.event-time span { color: var(--faint); font-size: 11px; }

.event-main { min-width: 0; display: grid; gap: 3px; }
.event-title-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.event-title-line strong { font-size: 13px; font-weight: 600; }
.event-title-line span { color: var(--muted); font-size: 11px; padding: 0 8px; border-radius: var(--radius-full); background: var(--subtle); line-height: 1.7; }
.event-main p { color: var(--muted); font-size: 12px; }
.event-meta { display: flex; flex-wrap: wrap; gap: 10px; color: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; }

.event-resource { display: grid; gap: 3px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.event-resource span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-resource em { font-style: normal; color: var(--faint); }
.event-actions { display: flex; flex-direction: column; gap: 5px; align-items: stretch; }

.events-side { display: grid; gap: var(--space-3); align-content: start; }

.events-side section {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.events-side h3 { font-size: 14px; }
.events-side p { color: var(--faint); font-size: 12px; }

.event-watch-line {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}

.event-watch-line:hover { background: var(--subtle); }
.event-watch-line.tone-warning { border-left: 2px solid var(--warning); }
.event-watch-line.tone-info { border-left: 2px solid var(--info); }
.event-watch-line strong { font-weight: 600; }
.event-watch-line span { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }

.events-empty-state {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  text-align: center;
  padding: var(--space-10) var(--space-6);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  color: var(--muted);
  font-size: 13px;
}

.events-empty-state strong { color: var(--text); font-size: 14px; font-weight: 500; }

.events-empty-state button {
  margin-top: var(--space-2);
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--text);
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--surface);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

/* ----------------------------------------------------------------------------
   12. ÉQUIPE & ACCÈS (.staff-access-* / .staff-member-* / .staff-permission-*)
   -------------------------------------------------------------------------- */
.staff-access-console { display: grid; gap: var(--space-4); }

/* Code couleur des rôles : un tone = un couple token statut/accent existant */
.staff-access-console .tone-admin { --role-tone: var(--warning); --role-tone-soft: var(--warning-soft); }
.staff-access-console .tone-manager { --role-tone: var(--accent); --role-tone-soft: var(--accent-soft); }
.staff-access-console .tone-staff { --role-tone: var(--success); --role-tone-soft: var(--success-soft); }
.staff-access-console .tone-marketing { --role-tone: var(--danger); --role-tone-soft: var(--danger-soft); }
.staff-access-console .tone-tech,
.staff-access-console .tone-custom { --role-tone: var(--muted); --role-tone-soft: var(--subtle); }

/* Layout : 3 régions : rail rôles | éditeur permissions | panneau latéral */
.staff-access-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 300px;
  grid-template-areas: 'rail editor side';
  gap: var(--space-4);
  align-items: start;
}

.staff-role-rail { grid-area: rail; display: grid; gap: var(--space-2); align-content: start; }

/* L'éditeur du rôle sélectionné est UNE carte : identité + code, presets,
   groupes de permissions, séparés par des filets 1px (hiérarchie Vercel :
   bordures, pas d'ombres). */
.staff-permission-editor {
  grid-area: editor;
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.staff-access-side { grid-area: side; display: grid; gap: var(--space-3); align-items: start; min-width: 0; }

/* Rail rôles */
.staff-role-rail-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding: 2px 2px 4px;
}

.staff-role-rail-head strong { color: var(--muted); font-size: 12px; font-weight: 500; }
.staff-role-rail-head em {
  font-style: normal;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--faint);
}

.staff-role-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px 8px 10px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--role-tone, var(--line-strong));
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.staff-role-pill:hover { background: var(--subtle); color: var(--text); }
.staff-role-pill.active { background: var(--accent-soft); border-color: var(--accent); border-left-color: var(--role-tone, var(--accent)); color: var(--text); }
.staff-role-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.staff-role-pill-copy { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; }
.staff-role-pill-copy strong { color: var(--text); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-role-pill-copy small { color: var(--faint); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.staff-role-pill-meta { display: grid; gap: 1px; justify-items: end; flex: none; }
.staff-role-pill-meta em { font-style: normal; font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--muted); }
.staff-role-pill-meta b { font-weight: 400; font-size: 10px; color: var(--faint); white-space: nowrap; }

.staff-role-identity { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.staff-role-identity > div { min-width: 0; }
.staff-role-identity > div > span { color: var(--muted); font-size: 11px; font-weight: 500; }
.staff-role-identity h3 { font-size: 16px; margin-top: 1px; }
.staff-role-identity p { color: var(--muted); font-size: 12px; margin-top: 3px; max-width: 44ch; }

.staff-person-icon,
.staff-person-portrait {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--role-tone-soft, var(--subtle));
  border: 1px solid var(--line);
  color: var(--role-tone, var(--muted));
  font-size: 12px;
  font-weight: 600;
  flex: none;
}

.staff-person-portrait { width: 44px; height: 44px; font-size: 14px; }

/* Carte code d'accès */
.staff-permission-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }

.staff-code-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--subtle);
  align-content: start;
}

.staff-code-card > span { color: var(--muted); font-size: 11px; font-weight: 500; }
.staff-code-card > strong { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; letter-spacing: 0.02em; }
.staff-code-card > div { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Presets : filet 1px au-dessus pour séparer l'identité de la configuration */
.staff-preset-strip {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
}
.staff-preset-kicker { color: var(--muted); font-size: 12px; font-weight: 500; margin-right: 2px; }

.staff-preset-btn {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.staff-preset-btn:hover:not(:disabled) { background: var(--subtle); color: var(--text); }
.staff-preset-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.staff-preset-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Groupes de permissions : repliables (details/summary) */
.staff-permission-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); align-items: start; }

.staff-permission-group {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.staff-permission-group-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px var(--space-4);
  cursor: pointer;
  list-style: none;
}

.staff-permission-group-head::-webkit-details-marker { display: none; }
.staff-permission-group-head > div { min-width: 0; flex: 1 1 auto; }
.staff-permission-group-head strong { display: block; font-size: 13px; font-weight: 600; }
.staff-permission-group-head span { display: block; color: var(--faint); font-size: 11px; margin-top: 2px; }

.staff-permission-group-head em {
  font-style: normal;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--muted);
  background: var(--subtle);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  flex: none;
}

.staff-permission-group-head::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--faint);
  border-bottom: 1.5px solid var(--faint);
  transform: rotate(-45deg);
  transition: transform var(--dur) var(--ease);
  flex: none;
  margin-left: 2px;
}

.staff-permission-group[open] > .staff-permission-group-head::after { transform: rotate(45deg); }

.staff-permission-list { display: grid; gap: 2px; padding: 2px var(--space-3) var(--space-3); }

/* Toggle permission : switch custom 28×16, input masqué mais focusable */
.staff-permission-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.staff-permission-toggle:hover { background: var(--subtle); }
.staff-permission-toggle.is-on { background: var(--accent-soft); color: var(--text); }
.staff-permission-toggle b { font-weight: 500; flex: 1 1 auto; min-width: 0; }
.staff-permission-toggle small { font-size: 11px; color: var(--faint); flex: none; }
.staff-permission-toggle.is-on small { color: var(--accent); }
.staff-permission-toggle:has(input:disabled) { cursor: not-allowed; opacity: 0.7; }

.staff-toggle-track {
  position: relative;
  width: 28px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--line-strong);
  flex: none;
  transition: background-color var(--dur) var(--ease);
}

.staff-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--surface);
  transition: transform var(--dur) var(--ease);
}

.staff-permission-toggle.is-on .staff-toggle-track { background: var(--accent); }
.staff-permission-toggle.is-on .staff-toggle-track::after { transform: translateX(12px); }
.staff-permission-toggle input:focus-visible + .staff-toggle-track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Panneau latéral : « Ce rôle ouvre » */
.staff-access-summary {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.staff-access-summary-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.staff-access-summary-head span { color: var(--muted); font-size: 11px; font-weight: 500; }
.staff-access-summary-head em {
  font-style: normal;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--faint);
}

.staff-access-page-list { display: flex; flex-wrap: wrap; gap: 6px; }

.staff-access-page-list .allowed,
.staff-access-page-list .blocked {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
}

.staff-access-page-list .allowed { background: var(--success-soft); color: var(--success); }
.staff-access-page-list .blocked { background: var(--subtle); color: var(--faint); text-decoration: line-through; }

/* Panneau membres */
.staff-member-panel {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.staff-member-list { display: grid; gap: var(--space-2); }

/* Groupes de membres : d'abord ceux du rôle sélectionné, puis les autres */
.staff-member-group-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.staff-member-group-label:first-child { margin-top: 0; }
.staff-member-group-label em {
  font-style: normal;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--faint);
}

.staff-member-group-empty { color: var(--faint); font-size: 12px; padding: 2px 0 4px; }

.staff-member-empty {
  display: grid;
  gap: 4px;
  padding: var(--space-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  text-align: center;
}

.staff-member-empty strong { font-size: 13px; font-weight: 500; }
.staff-member-empty span { color: var(--muted); font-size: 12px; }

.staff-member-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.staff-member-head strong { font-size: 14px; font-weight: 600; }
.staff-member-head small { display: block; color: var(--faint); font-size: 11px; }

.staff-member-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.staff-member-card.active { border-left-color: var(--success); }
.staff-member-card.blocked { border-left-color: var(--danger); }
.staff-member-card.pending { border-left-color: var(--warning); }
.staff-member-card.blocked .staff-member-top > div,
.staff-member-card.blocked .staff-person-icon { opacity: 0.6; }

.staff-member-top { display: flex; align-items: center; gap: 10px; }
.staff-member-top > div { min-width: 0; flex: 1 1 auto; display: grid; }
.staff-member-top strong { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-member-top small { color: var(--faint); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-member-top .badge { flex: none; }

.staff-member-last-seen { color: var(--faint); font-size: 11px; font-family: var(--font-data); font-variant-numeric: tabular-nums; }

.staff-member-card select { height: 32px; font-size: 13px; padding: 0 8px; }
.staff-member-card select:disabled { opacity: 0.6; cursor: not-allowed; }
.staff-member-card footer { display: flex; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.staff-member-code { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Actions role (renommer / supprimer) sous l'identite du role selectionne */
.staff-role-admin-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }

/* Bouton destructif : reste un bouton fantome, teinte danger au survol. */
.staff-danger-btn { color: var(--danger); }
.staff-danger-btn:hover:not(:disabled) { background: var(--danger); border-color: var(--danger); color: #fff; }
.staff-danger-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Journal sécurité */
.staff-access-log {
  display: grid;
  gap: 6px;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 12px;
  color: var(--muted);
}

.staff-access-log strong { color: var(--text); font-size: 13px; font-weight: 600; }
.staff-access-log p { display: grid; gap: 1px; }
.staff-access-log p span { color: var(--faint); font-size: 11px; font-family: var(--font-data); font-variant-numeric: tabular-nums; }

/* Modale création rôle / accès staff */
.staff-access-modal-overlay { display: grid; place-items: center; padding: var(--space-4); }

.staff-access-modal {
  width: 100%;
  max-width: 420px;
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

.staff-access-modal h3 { font-size: 16px; }
.staff-access-modal > div:first-child > p { color: var(--muted); font-size: 13px; margin-top: 4px; }
.staff-access-modal-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* Responsive Équipe & accès */
@media (max-width: 1280px) {
  .staff-access-grid {
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-areas:
      'rail editor'
      'side side';
  }
  .staff-access-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-member-panel { grid-row: span 2; }
}

@media (max-width: 768px) {
  .staff-access-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      'rail'
      'editor'
      'side';
  }
  .staff-access-side { grid-template-columns: 1fr; }
  .staff-member-panel { grid-row: auto; }
  .staff-permission-head { flex-direction: column; align-items: stretch; }
  .staff-permission-groups { grid-template-columns: 1fr; }
  .staff-permission-toggle { min-height: 44px; }
  .staff-role-pill { min-height: 44px; }
}

/* ----------------------------------------------------------------------------
   13. CAMPAGNES : agent ops + brouillon centre (rendus dans la page pv2)
   -------------------------------------------------------------------------- */
.campaign-agent-ops { display: grid; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.campaign-agent-ops-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.campaign-agent-ops-head h3, .campaign-agent-ops-head h2 { font-size: 16px; margin-top: 2px; }
.campaign-agent-ops-head p { color: var(--muted); font-size: 12px; margin-top: 4px; max-width: 60ch; }
.campaigns-eyebrow { color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }

.campaign-agent-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.campaign-agent-actions > span { color: var(--muted); font-size: 12px; }
.campaign-agent-actions button {
  min-height: 32px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-family: var(--font-ui); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.campaign-agent-actions button:hover { background: var(--subtle); }
.campaign-agent-actions button.primary { background: var(--text); border-color: var(--text); color: var(--surface); }
.campaign-agent-actions button.primary:hover { opacity: 0.88; background: var(--text); }
.campaign-agent-actions button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Bandeau de synthèse (Centres / Scripts / Signaux / Autonomie) */
.campaign-agent-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); }
.campaign-agent-summary > div { display: grid; gap: 3px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--page); }
.campaign-agent-summary small { color: var(--muted); font-size: 11px; }
.campaign-agent-summary strong { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 600; color: var(--text); line-height: 1.1; }
.campaign-agent-summary span { color: var(--faint); font-size: 11px; }

.campaign-agent-alert { padding: 8px 10px; border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--warning); font-size: 12px; }

/* Brief agent (chemin legacy renderStaffCampaignDraft, survie) */
.campaign-agent-brief { display: flex; gap: 10px; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--page); font-size: 12px; color: var(--muted); }
.campaign-agent-brief > span svg { width: 16px; height: 16px; color: var(--muted); }
.campaign-agent-brief strong { display: block; color: var(--text); font-size: 13px; font-weight: 600; }
.campaign-agent-brief small { color: var(--faint); font-size: 11px; }

/* Corps : cartes d'agents + panneau des blocages */
.campaign-agent-body { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(220px, 1fr); gap: var(--space-3); align-items: start; }
.campaign-agent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }

/* Carte d'un agent (article.campaign-agent-status) */
.campaign-agent-status { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--page); font-size: 12px; color: var(--muted); }
.campaign-agent-status > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.campaign-agent-status strong { color: var(--text); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campaign-agent-status small { color: var(--faint); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campaign-agent-status b { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 600; color: var(--text); }
.campaign-agent-status p { color: var(--text); font-size: 12px; }
.campaign-agent-status em { font-style: normal; color: var(--muted); font-size: 11px; }
.campaign-agent-dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--success); flex: none; }

.campaign-agent-problems { display: grid; gap: 8px; align-content: start; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--page); }
.campaign-agent-problems h3 { font-size: 13px; }
.campaign-agent-problems > div { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.campaign-agent-problems > div strong { color: var(--text); font-size: 12px; font-weight: 600; }
.campaign-agent-problems > div span { color: var(--text); font-size: 12px; }
.campaign-agent-problems > div p { color: var(--muted); font-size: 11px; }
.campaign-agent-problems > p { color: var(--muted); font-size: 12px; }
.campaign-agent-problems > small { color: var(--faint); font-size: 11px; }
.campaign-agent-blocker { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger); font-size: 12px; }
.campaign-agent-blocker.medium { background: var(--warning-soft); color: var(--warning); }
.campaign-agent-blocker strong { font-weight: 600; }

/* Draft prêt à copier (par centre) */
.campaign-center-draft {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--page);
  font-size: 13px;
  line-height: 1.55;
}

.campaign-center-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.campaign-center-head h3 { color: var(--text); font-size: 14px; margin-top: 1px; }
.campaign-center-head button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text); font-family: var(--font-ui); font-size: 12px; font-weight: 500; cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.campaign-center-head button:hover { background: var(--subtle); }
.campaign-center-head button svg { width: 13px; height: 13px; }

.campaign-center-draft textarea {
  width: 100%; min-height: 150px; padding: 10px 12px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
  font-family: var(--font-ui); font-size: 13px; line-height: 1.55; resize: vertical;
}
.campaign-center-draft textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.campaign-center-tools { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.campaign-center-tools > span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.campaign-center-tools > span svg { width: 13px; height: 13px; color: var(--success); }

.campaign-tone-pills { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.campaign-tone-pills button {
  min-height: 28px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-full);
  background: var(--surface); color: var(--muted); font-family: var(--font-ui); font-size: 12px; font-weight: 500; cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.campaign-tone-pills button:hover { background: var(--subtle); color: var(--text); border-color: var(--faint); }

.campaign-safe-strip { padding: 8px 10px; border-radius: var(--radius-sm); background: var(--subtle); color: var(--muted); font-size: 12px; }

@media (max-width: 900px) {
  .campaign-agent-body { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------------
   14. LEGACY FALLBACK : renderers app-main historiques (clients / réservations /
   emails / tarifs / campagnes) écrasés par staff-pages-v2.js au chargement.
   Styles de survie uniquement : si pv2 ne charge pas, la lecture reste propre.
   -------------------------------------------------------------------------- */
.clients-workspace, .reservations-hero, .emails-workspace, .pricing-workspace,
.campaigns-hero, .campaign-workspace, .campaign-workspace-simple, .emails-hero,
.clients-hero, .pricing-hero { display: grid; gap: var(--space-4); }

.clients-kpis, .reservations-kpi-grid, .pricing-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }

.clients-kpi, .reservations-kpi, .pricing-kpi, .email-metric, .campaign-metric {
  display: grid;
  gap: 4px;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 12px;
  color: var(--muted);
}

.clients-table-panel, .clients-filter-panel, .reservations-calendar-panel,
.emails-list-panel, .pricing-list-panel, .campaign-panel, .client-profile-panel,
.reservations-day-detail, .email-detail, .pricing-detail {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
}

.clients-table-row, .reservations-day-line, .email-row, .pricing-row, .campaign-row,
.reservations-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 13px;
}

.clients-table-row:hover, .email-row:hover, .pricing-row:hover { background: var(--subtle); }

.clients-action-btn, .reservations-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.clients-empty, .email-empty, .pricing-empty, .campaign-empty {
  padding: var(--space-6);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* ----------------------------------------------------------------------------
   15. PAGES PV2 (staff-pages-v2.js) : Réservations · Clients · Emails ·
   Campagnes · Tarifs. Géométrie héritée de l'ancien pinlane-v2, langage
   visuel 100 % tokens.
   -------------------------------------------------------------------------- */
.pv2-shell { display: grid; gap: var(--space-4); padding: 2px 0 var(--space-10); }

/* Entrée de page : gate JS (classe posée une fois par visite, jamais au poll) */
.pv2-enter > * { opacity: 0; transform: translateY(8px); animation: pl-enter var(--dur-slow) var(--ease) forwards; }
.pv2-enter > *:nth-child(2) { animation-delay: 40ms; }
.pv2-enter > *:nth-child(3) { animation-delay: 80ms; }
.pv2-enter > *:nth-child(n+4) { animation-delay: 120ms; }

.pv2-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.pv2-bar-crumb { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 500; }
.pv2-live { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--success); flex: none; }
.pv2-bar h1 { margin: 4px 0 2px; font-size: 20px; }
.pv2-bar-sub { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.pv2-bar-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; position: relative; }

.pv2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--h-md);
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

/* États en voile (Astryx) : superposition, pas de recoloration par variante */
.pv2-btn:hover { background-image: linear-gradient(var(--overlay-hover), var(--overlay-hover)); }
.pv2-btn:active { background-image: linear-gradient(var(--overlay-pressed), var(--overlay-pressed)); }
.pv2-btn.primary { background: var(--text); border-color: var(--text); color: var(--surface); }
.pv2-btn.primary:hover { opacity: 0.88; }
.pv2-btn svg { width: 14px; height: 14px; }

.pv2-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--h-md);
  min-width: 230px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--faint);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.pv2-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pv2-search svg { flex: none; }
.pv2-search input { flex: 1; height: 30px; border: 0; padding: 0; background: transparent; color: var(--text); font-family: var(--font-ui); font-size: 13px; }
.pv2-search input:focus { outline: none; box-shadow: none; }
.pv2-search kbd { flex: none; }

/* Stat cards + sparklines canvas (dimensions attendues par drawSparklines) */
.pv2-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }

.pv2-stat {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  padding: var(--space-4) var(--space-4) var(--space-3);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}

.pv2-stat:hover { border-color: var(--line-strong); }

.pv2-stat-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.pv2-stat-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 8px;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  /* Display Astryx : la taille fait le poids, pas la graisse */
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
}

.pv2-stat-value small { font-size: 13px; font-weight: 500; color: var(--faint); }

.pv2-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 500;
}

.pv2-delta.up { color: var(--success); background: var(--success-soft); }
.pv2-delta.down { color: var(--danger); background: var(--danger-soft); }
.pv2-delta.flat { color: var(--muted); background: var(--subtle); }

.pv2-stat canvas { display: block; width: 100%; height: 38px; margin-top: 10px; }
.pv2-stat-foot { margin-top: 6px; font-size: 12px; color: var(--faint); }

/* Segmented control à pastille glissante (JS pose --pv2-pill-x / --pv2-pill-w) */
.pv2-seg {
  position: relative;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-md);
  background: var(--subtle);
  isolation: isolate;
  justify-self: start;
}

.pv2-seg .pv2-seg-pill {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: var(--pv2-pill-x, 3px);
  width: var(--pv2-pill-w, 0px);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
  z-index: -1;
  transition: left var(--dur-slow) var(--ease), width var(--dur-slow) var(--ease);
}

.pv2-seg button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 13px;
  /* Sélection par graisse (Astryx tabs) : 400 → 600 sur l'item actif */
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.pv2-seg button:hover, .pv2-seg button.active { color: var(--text); }
.pv2-seg button.active { font-weight: 600; }

.pv2-seg button em {
  font-style: normal;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--faint);
  line-height: 1.7;
}

.pv2-seg button.active em { background: var(--accent-soft); color: var(--accent); }

/* Panels + split */
.pv2-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.9fr); gap: var(--space-3); align-items: start; }

.pv2-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  overflow: hidden;
}

.pv2-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.pv2-panel-head h2 { font-size: 15px; }
.pv2-panel-head small { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.pv2-panel-body { padding: var(--space-4); }

/* Table pv2 */
.pv2-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.pv2-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.pv2-table td {
  height: 38px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  vertical-align: middle;
}

.pv2-table td.num, .pv2-table th.num { text-align: right; font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.pv2-table tbody tr { cursor: pointer; transition: background-color var(--dur-fast) var(--ease); }
.pv2-table tbody tr:hover { background-image: linear-gradient(var(--overlay-hover), var(--overlay-hover)); }
.pv2-table tbody tr.selected { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.pv2-table tbody tr.selected td { color: var(--text); }
.pv2-table strong { color: var(--text); font-weight: 600; }

.pv2-id { display: flex; align-items: center; gap: 10px; }

.pv2-avatar {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--subtle);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  flex: none;
}

.pv2-id small { display: block; color: var(--faint); font-size: 11px; margin-top: 1px; }

.pv2-dot { width: 7px; height: 7px; border-radius: var(--radius-full); display: inline-block; margin-right: 7px; vertical-align: 1px; background: var(--faint); }
.pv2-dot.green { background: var(--success); }
.pv2-dot.amber { background: var(--warning); }
.pv2-dot.blue { background: var(--info); }
.pv2-dot.red { background: var(--danger); }
.pv2-dot.muted { background: var(--faint); }

.pv2-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  background: var(--subtle);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.pv2-chip.green { background: var(--success-soft); color: var(--success); }
.pv2-chip.amber { background: var(--warning-soft); color: var(--warning); }
/* --info-strong, pas --info : #0070f3 sur #e8f1fd ne donne que 4.00:1 en theme
   clair, sous le seuil AA de 4.5 pour un texte de 12px. Meme correctif que sur
   la page Emails, applique a la source pour ne pas laisser le meme echec vivre
   sur les autres pages. */
.pv2-chip.blue { background: var(--info-soft); color: var(--info-strong); }
.pv2-chip.red { background: var(--danger-soft); color: var(--danger); }
.pv2-chip.accent { background: var(--accent-soft); color: var(--accent); }

/* Calendrier heatmap (Réservations) : intensités dérivées de l'accent */
.pv2-cal { display: grid; gap: 8px; }

.pv2-cal-head {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 500;
  text-align: center;
}

.pv2-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }

.pv2-cal-cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 72px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.pv2-cal-cell:hover { border-color: var(--line-strong); }
.pv2-cal-cell.empty { visibility: hidden; }
.pv2-cal-cell.heat-1 { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.pv2-cal-cell.heat-2 { background: color-mix(in srgb, var(--accent) 15%, var(--surface)); }
.pv2-cal-cell.heat-3 { background: color-mix(in srgb, var(--accent) 26%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
/* Aujourd'hui : repere PERMANENT et discret (le numero du jour en accent + une
   pastille), sans cadre plein. Se distingue nettement du jour SELECTIONNE. */
.pv2-cal-cell.today .pv2-cal-day { color: var(--accent); font-weight: 700; }
.pv2-cal-cell.today .pv2-cal-day::after {
  content: ""; display: inline-block; width: 4px; height: 4px; margin-left: 4px;
  border-radius: 50%; background: var(--accent); vertical-align: middle;
}
/* Jour SELECTIONNE : etat ACTIF fort (cadre accent + fond teinte + anneau) =
   "ce que j'ai choisi", visuellement different du simple repere d'aujourd'hui. */
.pv2-cal-cell.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  box-shadow: 0 0 0 1px var(--accent);
}

.pv2-cal-day { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; color: var(--text); }
.pv2-cal-meta { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 10px; color: var(--muted); }
.pv2-cal-meta strong { color: var(--text); font-weight: 600; }

/* Fil de journée */
.pv2-flow { display: grid; gap: 4px; max-height: 560px; overflow: auto; padding-right: 4px; }

.pv2-flow-item {
  display: grid;
  grid-template-columns: 56px 3px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 8px 6px 8px 2px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}

.pv2-flow-item:hover { background: var(--subtle); }

.pv2-flow-time {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-align: right;
}

.pv2-flow-time small { display: block; font-size: 10px; color: var(--faint); }

.pv2-flow-rail { align-self: stretch; border-radius: var(--radius-full); background: var(--line-strong); }
.pv2-flow-item.green .pv2-flow-rail { background: var(--success); }
.pv2-flow-item.amber .pv2-flow-rail { background: var(--warning); }
.pv2-flow-item.blue .pv2-flow-rail { background: var(--info); }
.pv2-flow-item.red .pv2-flow-rail { background: var(--danger); }

.pv2-flow-body { min-width: 0; }
.pv2-flow-body strong { display: block; color: var(--text); font-size: 13px; font-weight: 600; }
.pv2-flow-body span { font-size: 12px; color: var(--muted); }

.pv2-empty {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  display: grid;
  gap: 5px;
  justify-items: center;
}

.pv2-empty strong { color: var(--text); font-size: 14px; font-weight: 500; }

/* Segmente d'ORIGINE (page Emails) : dissocie les mails partis tout seuls des
   envois de l'equipe. Chips-boutons (pv2-chip-btn) + compteurs tabulaires ;
   la phrase d'aide passe a la ligne et reste discrete. */
.pv2-origins {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.pv2-origins-label { font-size: 12px; font-weight: 500; color: var(--muted); }
.pv2-origin-seg { display: inline-flex; align-items: center; gap: 5px; }
.pv2-origin-count { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--faint); }
.pv2-origin-seg.active .pv2-origin-count { color: var(--accent-strong); }
.pv2-origins-hint { flex-basis: 100%; font-size: 11.5px; color: var(--faint); }
/* Badge Auto/Manuel des lignes de la file : etiquette, pas statut. */
.pv2-origin-badge { margin-left: 6px; }

/* Pipeline emails */
.pv2-pipeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); }

.pv2-pipe {
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

/* .pv2-pipe:hover vit desormais dans le bloc A.2 (@media hover: hover) : les
   segments sont defilables au doigt, l'etat restait colle apres le toucher. */
.pv2-pipe.active { border-color: var(--accent); background: var(--accent-soft); }
.pv2-pipe-label { color: var(--muted); font-size: 11px; font-weight: 500; }
.pv2-pipe-value { margin-top: 4px; font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 400; color: var(--text); }
.pv2-pipe-hint { margin-top: 2px; font-size: 11px; color: var(--faint); }

.pv2-mail-preview {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--page);
  font-family: var(--font-data);
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow: auto;
}

.pv2-kv { display: grid; gap: 7px; }
.pv2-kv > div { display: flex; justify-content: space-between; gap: 14px; font-size: 12.5px; }
.pv2-kv dt { color: var(--muted); font-weight: 400; }
.pv2-kv dd { margin: 0; color: var(--text); font-weight: 500; text-align: right; overflow: hidden; text-overflow: ellipsis; }

/* Catalogue tarifs */
.pv2-catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-3); }

.pv2-price-card {
  display: grid;
  gap: 9px;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}

.pv2-price-card:hover { border-color: var(--line-strong); }
.pv2-price-card.selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.pv2-price-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pv2-price-head strong { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.pv2-price-head small { display: block; color: var(--faint); font-size: 11px; margin-top: 2px; }

.pv2-price-amount {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.pv2-price-amount small { font-size: 11px; color: var(--faint); font-weight: 400; }
.pv2-price-desc { font-size: 12px; line-height: 1.5; color: var(--muted); }
.pv2-price-tags { display: flex; flex-wrap: wrap; gap: 5px; }

.pv2-price-stats {
  display: flex;
  gap: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--faint);
}

.pv2-price-stats strong { color: var(--text); font-weight: 600; }

/* -- Editeur tarifaire client (badges sur la carte + modale) --------------- */
.pev-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.pev-card-foot { padding-top: 10px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
.pev-removed { opacity: 0.62; }
.pev-removed .pv2-price-amount { text-decoration: line-through; text-decoration-thickness: 1px; }

/* La modale reutilise .overlay-backdrop (scrim, z-index) + .modal-surface. */
.pev-overlay { display: grid; place-items: center; padding: var(--space-4); }

.pev-modal {
  width: 100%;
  max-width: 460px;
  max-height: min(88vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pev-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--line);
}
.pev-modal-head h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.pev-modal-head p { color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 4px; }

.pev-close {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.pev-close:hover:not(:disabled) { border-color: var(--line-strong); color: var(--text); }
.pev-close:disabled { opacity: 0.5; cursor: default; }

.pev-modal-body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  overflow-y: auto;
}

.pev-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.pev-field { gap: 6px; }

.pev-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.pev-toggle-label { display: grid; gap: 2px; font-size: 13px; font-weight: 500; color: var(--text); }
.pev-toggle-label small { font-weight: 400; font-size: 11px; color: var(--faint); }

.pev-modal-error {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 12px;
  line-height: 1.45;
}

.pev-modal-foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--line);
}
.pev-foot-note { margin-right: auto; color: var(--faint); font-size: 11px; }

@media (max-width: 520px) {
  .pev-grid2 { grid-template-columns: 1fr; }
}

/* -- Editeur "mon centre" : en-tete de niveau 1 (prix/dispo par centre) ------ */
/* Niveau 1 (accent) vs niveau 2 catalogue partage (neutre) : deux en-tetes
   nettement distincts pour que l'operateur sache toujours ce qu'il edite. */
.cev-scope-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
}
.cev-scope-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.cev-scope-copy { display: grid; gap: 2px; min-width: 0; }
.cev-scope-note strong { font-size: 13px; font-weight: 600; color: var(--text); }
.cev-scope-note span { font-size: 12px; line-height: 1.45; color: var(--muted); }

/* -- Editeur du CATALOGUE partage : niveau 2 (structure des formules) -------- */
.cev-catalog-block {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--space-4);
}
.cev-block-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.cev-block-copy { display: grid; gap: 4px; min-width: 0; }
.cev-block-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cev-block-head h2 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.cev-block-head p { font-size: 12px; line-height: 1.5; color: var(--muted); max-width: 62ch; }

.cev-rows { display: grid; gap: var(--space-2); }
.cev-row {
  display: flex;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  flex-wrap: wrap;
  transition: border-color var(--dur-fast) var(--ease);
}
.cev-row:hover { border-color: var(--line-strong); }
.cev-row-main { flex: 1 1 260px; display: grid; gap: 3px; min-width: 0; }
.cev-row-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cev-row-title strong { font-size: 14px; font-weight: 600; color: var(--text); }
.cev-row-meta { font-size: 12px; color: var(--muted); }
.cev-row-acts { font-size: 12px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; }
.cev-row-price {
  flex: none;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.cev-row-price small { font-size: 11px; font-weight: 400; color: var(--faint); margin-left: 2px; }
.cev-row-side { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cev-row-actions { flex: none; display: flex; gap: 6px; flex-wrap: wrap; }
.cev-danger { color: var(--danger); }
.cev-danger:hover { border-color: var(--danger); }

/* Legendes de section dans la modale (Informations / Tarif / Conditions) */
.cev-form-legend {
  margin: 4px 0 -6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
}
.cev-form-legend:first-child { margin-top: 0; }

/* Modale catalogue : plus large que pev (formulaire + editeur de steps). */
.cev-modal { max-width: 560px; }
.cev-sep { height: 1px; background: var(--line); margin: 2px 0; }
.cev-hint-inline { font-weight: 400; font-size: 11px; color: var(--faint); }
.cev-inline-check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; color: var(--text); height: 40px; }
.cev-inline-check input { width: 16px; height: 16px; }

.cev-days { display: flex; flex-wrap: wrap; gap: 6px; }
.cev-day {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}
.cev-day input { width: 15px; height: 15px; }

.cev-steps { display: grid; gap: 10px; }
.cev-steps-head { display: flex; flex-direction: column; gap: 2px; }
.cev-steps-head span { font-size: 13px; font-weight: 500; color: var(--text); }
.cev-steps-head small { font-size: 11px; color: var(--faint); }
.cev-steps-list { display: grid; gap: 8px; }
.cev-steps-empty { font-size: 12px; color: var(--muted); padding: 8px 0; }

.cev-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--subtle);
}
.cev-step-order { display: grid; gap: 4px; flex: none; justify-items: center; }
.cev-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 20px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 600;
}
.cev-step-move {
  width: 26px;
  height: 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  font-size: 12px;
}
.cev-step-move:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.cev-step-move:disabled { opacity: 0.4; cursor: default; }

.cev-step-grid {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 2fr) 80px 96px auto;
  gap: 8px;
  align-items: end;
}
.cev-step-field { display: grid; gap: 4px; min-width: 0; }
.cev-step-field > span { font-size: 11px; font-weight: 500; color: var(--muted); }
.cev-step-field select,
.cev-step-field input { height: 36px; }
.cev-step-crit { display: flex; align-items: center; gap: 6px; height: 36px; font-size: 12px; color: var(--text); white-space: nowrap; }
.cev-step-crit input { width: 15px; height: 15px; }

.cev-step-remove {
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.cev-step-remove:hover { border-color: var(--danger); color: var(--danger); }

@media (max-width: 620px) {
  .cev-step { flex-wrap: wrap; }
  .cev-step-grid { grid-template-columns: 1fr 1fr; }
  .cev-step-field.cev-step-activity { grid-column: 1 / -1; }
  .cev-row { align-items: flex-start; }
}

/* ----------------------------------------------------------------------------
   15b. CAMPAGNES : parcours gamifié « agence marketing » (style Duolingo)
   Structure motivante (niveaux, XP, streak, chemin de missions) sur l'identité
   Precision Tooling. Zéro couleur en dur : tokens + color-mix uniquement.
   -------------------------------------------------------------------------- */
.pv2-ico { width: 15px; height: 15px; flex: none; }
.pv2-camp-err { color: var(--danger); }

/* -- En-tête : marque + gamification -- */





/* -- Layout contenus + rail missions -- */

/* -- Chemin de missions (Duolingo) -- */


/* -- Contenus prêts à publier -- */
.pv2-camp-contents { display: flex; flex-direction: column; gap: var(--space-5); }
.pv2-camp-occasion { display: flex; flex-direction: column; gap: var(--space-3); }
.pv2-camp-occasion-head { display: flex; align-items: center; gap: var(--space-2); }
.pv2-camp-occasion-head h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.pv2-camp-occasion-head span {
  font-family: var(--font-data); font-size: 11px; font-weight: 600;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full);
  display: inline-grid; place-items: center;
  background: var(--subtle); color: var(--muted);
}
.pv2-camp-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.pv2-camp-badges .pv2-chip { gap: 4px; }
.pv2-camp-score {
  display: inline-flex; align-items: baseline; gap: 1px; flex: none;
  padding: 3px 8px; border-radius: var(--radius-sm);
  font-family: var(--font-data); background: var(--subtle);
}
.pv2-camp-score em { font-style: normal; font-size: 14px; font-weight: 700; }
.pv2-camp-score small { font-size: 10px; color: var(--faint); }
.pv2-camp-score.green { background: var(--success-soft); color: var(--success); }
.pv2-camp-score.amber { background: var(--warning-soft); color: var(--warning); }
.pv2-camp-score.red { background: var(--danger-soft); color: var(--danger); }
.pv2-camp-hook { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--text); letter-spacing: -0.01em; }
.pv2-camp-text { font-size: 12.5px; line-height: 1.6; color: var(--muted); white-space: pre-line; }
.pv2-camp-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pv2-camp-benefits li { position: relative; padding-left: 18px; font-size: 12px; color: var(--text); line-height: 1.45; }
.pv2-camp-benefits li::before {
  content: ''; position: absolute; left: 2px; top: 6px;
  width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--accent);
}
.pv2-camp-proof, .pv2-camp-urgency { display: flex; align-items: flex-start; gap: 6px; font-size: 11.5px; line-height: 1.45; }
.pv2-camp-proof { color: var(--muted); }
.pv2-camp-proof .pv2-ico { color: var(--warning); margin-top: 1px; }
.pv2-camp-urgency { color: var(--danger); font-weight: 500; }
.pv2-camp-urgency .pv2-ico { margin-top: 1px; }
.pv2-camp-cta { font-size: 12px; font-weight: 600; color: var(--accent); }

/* -- Conseil d'agence : stratégie actionnable -- */
.pv2-camp-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.pv2-camp-card { display: flex; flex-direction: column; gap: var(--space-3); }
.pv2-camp-card-head { display: flex; align-items: center; gap: var(--space-2); color: var(--text); }
.pv2-camp-card-head .pv2-ico { color: var(--accent); width: 16px; height: 16px; }
.pv2-camp-card-head h3 { font-size: 13.5px; }
.pv2-camp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pv2-camp-list > li { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.pv2-camp-list-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.pv2-camp-list-top strong { font-size: 12.5px; }
.pv2-camp-list p { font-size: 12px; color: var(--text); line-height: 1.45; }
.pv2-camp-list small { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.pv2-camp-list .pv2-chip { align-self: flex-start; }
.pv2-camp-cal { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pv2-camp-cal > li { display: grid; grid-template-columns: minmax(84px, auto) minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.pv2-camp-cal-slot { font-family: var(--font-data); font-size: 11px; font-weight: 600; color: var(--accent); }
.pv2-camp-cal-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pv2-camp-cal-body strong { font-size: 12.5px; }
.pv2-camp-cal-body p { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.pv2-camp-cal-ch { display: flex; flex-wrap: wrap; gap: 5px; }
.pv2-camp-prio { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); counter-reset: prio; }
.pv2-camp-prio > li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.pv2-camp-rank { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent); font-family: var(--font-data); font-size: 12px; font-weight: 700; }
.pv2-camp-prio strong { font-size: 12.5px; }
.pv2-camp-prio p { margin-top: 2px; font-size: 11.5px; color: var(--muted); line-height: 1.45; }

/* -- Équipe d'agents -- */
.pv2-camp-agent { display: flex; flex-direction: column; gap: 6px; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.pv2-camp-agent-top { display: flex; align-items: center; gap: var(--space-2); }
.pv2-camp-agent-top strong { font-size: 12.5px; margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv2-camp-agent-dot { width: 8px; height: 8px; flex: none; border-radius: var(--radius-full); background: var(--faint); }
.pv2-camp-agent-dot.on { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent); }
.pv2-camp-agent p { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.pv2-camp-agent small { font-size: 11px; color: var(--faint); }
.pv2-camp-agent .pv2-camp-score small { font-size: 9px; }

/* -- Micro-explications : sous-titres de section + légendes des chiffres -- */
.pv2-panel-head.has-sub { align-items: flex-start; }
.pv2-panel-head.has-sub > div { min-width: 0; }
.pv2-panel-sub { margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--muted); line-height: 1.4; max-width: 72ch; }
.pv2-camp-card-sub { font-size: 11.5px; color: var(--muted); line-height: 1.4; margin: -2px 0 2px; }

@media (prefers-reduced-motion: reduce) {
}

@media (max-width: 900px) {
  .pv2-camp-board { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
}

/* ----------------------------------------------------------------------------
   16. COMMAND PALETTE : Ctrl/Cmd+K (surface flottante)
   -------------------------------------------------------------------------- */
.pv2-palette-overlay {
  position: fixed;
  inset: 0;
  z-index: 450;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px 16px;
  background: var(--scrim);
}

.pv2-palette {
  width: min(620px, 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--raised);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
  animation: pl-enter var(--dur-slow) var(--ease) both;
}

.pv2-palette-input {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  transition: border-color var(--dur-fast) var(--ease);
}

.pv2-palette-input:focus-within { border-bottom-color: var(--accent); }

.pv2-palette-input svg { width: 16px; height: 16px; stroke: var(--faint); flex: none; }

.pv2-palette-input input {
  flex: 1;
  height: auto;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
}

.pv2-palette-input input:focus { outline: none; box-shadow: none; }

.pv2-palette-list { max-height: 340px; overflow: auto; padding: 6px; }

.pv2-palette-section {
  padding: 8px 11px 4px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 500;
}

.pv2-palette-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}

.pv2-palette-item:hover { background: var(--subtle); }
.pv2-palette-item.active { background: var(--accent-soft); color: var(--text); }

.pv2-palette-ico {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  flex: none;
}

.pv2-palette-item.active .pv2-palette-ico { border-color: var(--accent); color: var(--accent); }
.pv2-palette-item small { margin-left: auto; color: var(--faint); font-size: 11px; }

.pv2-palette-foot {
  display: flex;
  gap: var(--space-4);
  padding: 9px 16px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 11px;
}

.pv2-palette-foot kbd { margin-right: 4px; }

/* ----------------------------------------------------------------------------
   17. OVERLAYS : fiche POS, modale édition, réservation rapide, toast,
   aperçu email. Seules surfaces à porter --shadow-overlay.
   -------------------------------------------------------------------------- */
.pos-overlay:not(.hidden) {
  position: fixed;
  inset: 0;
  z-index: 420;
  display: flex;
  justify-content: flex-end;
  background: var(--scrim);
}

.pos-overlay.centered:not(.hidden) { justify-content: center; align-items: center; padding: var(--space-6); }

.pos-panel {
  width: 460px;
  max-width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--raised);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-overlay);
}

.pos-head { padding: var(--space-5); border-bottom: 1px solid var(--line); }
.pos-head-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); }
.pos-head h3 { font-size: 20px; }

.ticket-id {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--faint);
  font-weight: 500;
}

.close-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  flex: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.close-btn:hover { background: var(--subtle); color: var(--text); }

.tabs, .modal-tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--subtle);
  border-radius: var(--radius-md);
}

.tab {
  flex: 1;
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.tab:hover { color: var(--text); }
.tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); }

.pos-body { flex: 1; overflow-y: auto; padding: var(--space-5); }

.info-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.info-block.soft { background: var(--page); }
.info-block.compact { padding: var(--space-3); }

.info-label { font-size: 12px; color: var(--muted); font-weight: 500; margin-bottom: 10px; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.info-row .lbl { font-size: 11px; color: var(--faint); font-weight: 500; margin-bottom: 3px; }
.info-row .val { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; }
.info-row .val small { font-size: 11px; color: var(--faint); font-weight: 400; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--subtle);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.status-pill .dot { width: 6px; height: 6px; background: currentColor; }
.status-pill.conf { background: var(--info-soft); color: var(--info); }
.status-pill.arr { background: var(--warning-soft); color: var(--warning); }
.status-pill.paid { background: var(--success-soft); color: var(--success); }

.delay-control-copy { color: var(--muted); font-size: 12px; line-height: 1.5; margin-bottom: 10px; }
.delay-control-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.delay-chip {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.delay-chip:hover { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }
.delay-chip-now { border-color: var(--warning); color: var(--warning); }

.delay-custom-row { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.delay-custom-row input {
  width: 90px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

/* Modale retard : preview d'impact + étape notification clients */
.delay-overlay {
  position: fixed;
  inset: 0;
  z-index: 440;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--scrim);
}

.delay-overlay.hidden { display: none; }

.delay-modal {
  width: min(680px, calc(100vw - 24px));
  max-height: calc(100dvh - 28px);
  display: flex;
  flex-direction: column;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
}

.delay-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--line);
}

.delay-modal-head h3 { font-size: 16px; }
.delay-modal-head p { color: var(--muted); font-size: 12px; margin-top: 4px; }
.delay-modal-body { flex: 1; min-height: 0; overflow: auto; padding: var(--space-5); display: grid; gap: var(--space-3); align-content: start; }
.delay-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--line);
}

.delay-btn {
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.delay-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.delay-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.delay-btn-primary:not(:disabled):hover { opacity: 0.9; }

.delay-loading { color: var(--muted); font-size: 13px; padding: var(--space-4) 0; text-align: center; }

.delay-context {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-variant-numeric: tabular-nums;
}

.delay-section-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: var(--space-2);
}

.delay-strategy-list { display: grid; gap: var(--space-2); }

.delay-strategy {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.delay-strategy input { margin-top: 3px; accent-color: var(--accent); }
.delay-strategy.is-selected { border-color: var(--accent); }
.delay-strategy.is-disabled { opacity: 0.55; cursor: not-allowed; }
.delay-strategy-body { display: grid; gap: 3px; min-width: 0; }
.delay-strategy-head { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.delay-strategy-reco {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--success);
  border: 1px solid var(--success);
  border-radius: var(--radius-full);
  padding: 1px 8px;
}
.delay-strategy-desc { color: var(--muted); font-size: 12px; line-height: 1.45; }

.delay-plan-list { display: grid; gap: var(--space-2); }
.delay-plan-empty { color: var(--muted); font-size: 12px; }

.delay-plan-row {
  display: grid;
  gap: 3px;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.delay-plan-row.is-delayed { border-color: var(--warning); }
.delay-plan-name { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.delay-plan-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warning);
  border: 1px solid var(--warning);
  border-radius: var(--radius-full);
  padding: 1px 8px;
}
.delay-plan-summary { color: var(--muted); font-size: 12px; line-height: 1.45; font-variant-numeric: tabular-nums; }

.delay-warning {
  padding: var(--space-3);
  border: 1px solid var(--warning);
  border-radius: var(--radius-md);
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 12px;
  line-height: 1.45;
}

.delay-confirm-note { color: var(--muted); font-size: 11px; line-height: 1.5; }

.delay-applied-banner {
  padding: var(--space-3);
  border: 1px solid var(--success);
  border-radius: var(--radius-md);
  background: var(--success-soft);
  color: var(--success);
  font-size: 12px;
  font-weight: 600;
}

.delay-notify-intro { color: var(--muted); font-size: 12px; line-height: 1.5; }
.delay-notify-list { display: grid; gap: var(--space-2); }

.delay-notify-body { display: grid; gap: 2px; min-width: 0; }
.delay-notify-name { font-size: 13px; font-weight: 600; }
.delay-notify-summary { color: var(--muted); font-size: 12px; line-height: 1.4; }
.delay-notify-email { color: var(--muted); font-size: 11px; font-family: var(--font-data); }

/* Étape notification retard mise en évidence + message éditable par client */
.delay-notify-prominent {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  display: grid;
  gap: 6px;
}
.delay-notify-step {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-strong, var(--accent));
}
.delay-notify-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.delay-notify-card.is-on { border-color: var(--accent); }
.delay-notify-card.is-off { opacity: 0.62; }
.delay-notify-head { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; }
.delay-notify-head input { margin-top: 3px; accent-color: var(--accent); }
.delay-notify-textarea {
  width: 100%;
  resize: vertical;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2, var(--surface));
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
}
.delay-notify-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.delay-notify-textarea:disabled { opacity: 0.5; cursor: not-allowed; }

/* Indicateur de retard sur les cartes planning (bowling + laser) */
.delay-indicator {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 5px 1px 3px;
  border: 1px solid var(--warning);
  border-radius: 999px;
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.delay-indicator:hover { filter: brightness(0.96); }
.delay-indicator .delay-indicator-label { font-variant-numeric: tabular-nums; }
.booking .delay-indicator { position: absolute; top: 3px; right: 4px; z-index: 3; }
.booking.is-delayed { border-left-color: var(--warning); box-shadow: inset 0 0 0 1px var(--warning-soft); }
.laser-group-card.is-delayed { box-shadow: inset 0 0 0 1px var(--warning); }
.laser-group-card .delay-indicator { margin-left: auto; }

/* Bouton d'ouverture du centre de communication (fiche résa) */
.comm-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent-strong, var(--accent));
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.comm-open-btn:hover { background: var(--accent); color: #fff; }

/* Centre de communication client (modale) */
.comm-modal { max-width: 560px; }
.comm-channels { display: flex; gap: var(--space-2); }
.comm-channel-btn {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.comm-channel-btn.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong, var(--accent)); }
.comm-channel-btn.is-disabled { opacity: 0.55; cursor: not-allowed; }
.comm-channel-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.comm-warning {
  padding: var(--space-3);
  border: 1px solid var(--warning);
  border-radius: var(--radius-md);
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 12px;
  line-height: 1.45;
}
.comm-field { display: grid; gap: 5px; }
.comm-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.comm-select, .comm-input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.comm-select:focus, .comm-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.comm-template-desc { color: var(--muted); font-size: 12px; line-height: 1.4; }
.comm-recipient { font-size: 12px; color: var(--muted); font-family: var(--font-data); }
.comm-recipient.is-missing { color: var(--warning); }
.comm-textarea {
  width: 100%;
  resize: vertical;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2, var(--surface));
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
}
.comm-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.comm-char-counter { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.comm-preview {
  padding: var(--space-3);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  display: grid;
  gap: 5px;
}
.comm-preview-label { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.comm-preview-body { font-size: 12px; line-height: 1.55; white-space: pre-wrap; color: var(--text); }
.comm-history { display: grid; gap: var(--space-2); }
.comm-history-title { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.comm-history-empty { color: var(--muted); font-size: 12px; }
.comm-history-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.comm-history-chan {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong, var(--accent));
}
.comm-history-chan.sms { background: var(--info-soft, var(--accent-soft)); color: var(--info, var(--accent)); }
.comm-history-main { display: grid; gap: 1px; min-width: 0; flex: 1; }
.comm-history-subject { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comm-history-meta { font-size: 10px; color: var(--muted); font-family: var(--font-data); }
.comm-history-status { font-size: 11px; font-weight: 600; }
.comm-history-status.ok { color: var(--success); }
.comm-history-status.err { color: var(--danger); }
.comm-history-status.wait { color: var(--muted); }

/* Caisse / reçu */
.receipt {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  overflow: hidden;
}

.receipt-head { text-align: center; padding-bottom: var(--space-3); border-bottom: 1px dashed var(--line-strong); margin-bottom: var(--space-3); }
.receipt-head .title { font-size: 15px; font-weight: 600; letter-spacing: 0.04em; }
.receipt-line { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 13px; font-variant-numeric: tabular-nums; }

.receipt-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--line-strong);
}

.receipt-total .lbl { font-size: 12px; font-weight: 500; color: var(--muted); }
.receipt-total .amount { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 600; }

.extra-rm {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.extra-rm:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }

.paid-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 4px;
  justify-items: center;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  text-align: center;
}

.paid-text { font-size: 18px; font-weight: 600; letter-spacing: 0.08em; color: var(--success); }
.paid-method { font-size: 12px; color: var(--muted); }

.upsell-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin: var(--space-3) 0 var(--space-4); }

.upsell-btn {
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.upsell-btn:hover { border-color: var(--line-strong); background: var(--subtle); }
.upsell-btn .n { font-size: 12px; font-weight: 500; }
.upsell-btn .p { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--muted); }

.pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.pay-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--text);
  border-radius: var(--radius-md);
  background: var(--text);
  color: var(--surface);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}

.pay-btn:hover { opacity: 0.88; }

/* Alternatives proposées (retard / conflit) : composant partagé dans pinlane.css */

.ops-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-2); margin-top: var(--space-2); }

.ops-plan-card {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--page);
}

.ops-plan-card .k { color: var(--faint); font-size: 11px; font-weight: 500; margin-bottom: 4px; }
.ops-plan-card .v { color: var(--text); font-size: 12px; line-height: 1.4; }
.ops-checklist { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }

/* Modale édition */
.edit-modal {
  width: min(880px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
}

.edit-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--line);
}

.edit-modal-head h3 { font-size: 17px; }
.edit-modal-head p { color: var(--muted); font-size: 12px; margin-top: 4px; max-width: 520px; }
.edit-modal-body { flex: 1; min-height: 0; overflow: auto; padding: var(--space-5); }

.edit-shell { display: grid; gap: var(--space-4); }
.edit-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: stretch; }

.edit-summary-card {
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.edit-summary-card h4 { font-size: 15px; margin-top: 2px; }
.edit-summary-card p { color: var(--muted); font-size: 12px; margin-top: 4px; font-variant-numeric: tabular-nums; }

.edit-summary-stat {
  display: grid;
  gap: 2px;
  align-content: center;
  min-width: 90px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-align: center;
}

.edit-summary-stat .k { color: var(--muted); font-size: 11px; font-weight: 500; }
.edit-summary-stat .v { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 600; }

.edit-form { display: grid; gap: var(--space-4); }
.edit-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.edit-stack { display: grid; gap: var(--space-3); }
.edit-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.field-stack { display: grid; gap: var(--space-3); }

.edit-inline-note { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.edit-inline-note .n { color: var(--muted); }
.edit-inline-note .v { font-weight: 500; }

.edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.edit-actions .btn-secondary,
.edit-actions .btn-primary,
.step-actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.edit-actions .btn-secondary { border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); }
.edit-actions .btn-secondary:hover { background: var(--subtle); }
.edit-actions .btn-secondary.warn { color: var(--warning); }
.edit-actions .btn-secondary.warn:hover { background: var(--warning-soft); border-color: var(--warning); }
.edit-actions .btn-secondary.danger { color: var(--danger); }
.edit-actions .btn-secondary.danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.edit-actions .btn-primary { border: 1px solid var(--text); background: var(--text); color: var(--surface); }
.edit-actions .btn-primary:hover { opacity: 0.88; }

/* Réservation rapide (quick book) */
.qb-overlay {
  position: fixed;
  inset: 0;
  z-index: 430;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--scrim);
}

.qb-overlay.hidden { display: none; } /* le JS remplace className : on regarantit l'état caché */

.qb-modal {
  width: min(760px, calc(100vw - 24px));
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
}

.qb-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
  background: var(--raised);
}

.qb-head h3 { font-size: 17px; }
.qb-head .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.qb-body { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }

.qb-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.blk-label { font-size: 12px; color: var(--muted); font-weight: 500; margin-bottom: 8px; }

.qb-row { display: grid; gap: 8px; }
.qb-row.three { grid-template-columns: 1.2fr 1fr 1fr; }
.qb-mini-label { display: block; font-size: 11px; color: var(--muted); font-weight: 500; margin-bottom: 4px; }

.qb-input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
}

.qb-input-invalid { border-color: var(--danger); background: var(--danger-soft); }
.qb-textarea { height: auto; min-height: 52px; padding: 8px 10px; line-height: 1.4; resize: vertical; }


/* Aide courte sous un champ ou un titre de section « Plus d'options ». */
.qb-field-note { margin-top: 4px; font-size: 11px; color: var(--muted); }
.qb-field-note.danger { color: var(--danger); }
.qb-block-help { margin: -2px 0 10px; font-size: 11.5px; color: var(--muted); line-height: 1.4; }

.qb-type-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }

.qb-type-btn {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.qb-type-btn:hover { background: var(--subtle); color: var(--text); }
.qb-type-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.qb-snapshot-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }

.qb-snapshot {
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--page);
}

.qb-snapshot .k { font-size: 11px; color: var(--muted); font-weight: 500; }
.qb-snapshot .v { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; }
.qb-snapshot .t { font-size: 11px; color: var(--faint); }

.qb-inline-actions, .qb-action-stack { display: flex; gap: 6px; flex-wrap: wrap; }

.qb-ghost-btn {
  min-height: 28px;
  padding: 0 10px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}

.qb-ghost-btn:hover { background: var(--accent-soft); }
.qb-section-note { font-size: 12px; color: var(--faint); }

.qb-formule-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 6px; }

.qb-formule-card {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.qb-formule-card:hover { border-color: var(--line-strong); }
.qb-formule-card.active { border-color: var(--accent); background: var(--accent-soft); }
.qb-formule-card.unavailable { opacity: 0.55; cursor: not-allowed; }

.qb-formule-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.qb-formule-name { font-size: 13px; font-weight: 600; }
.qb-formule-price { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 500; white-space: nowrap; }
.qb-formule-sub { font-size: 11px; color: var(--muted); }
.qb-formule-status { display: flex; align-items: center; gap: 6px; }

.qb-status-pill {
  padding: 0 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.8;
}

.qb-status-pill.ok { background: var(--success-soft); color: var(--success); }
.qb-status-pill.no { background: var(--danger-soft); color: var(--danger); }
.qb-inline-note { font-size: 11px; color: var(--faint); }

.qb-slot-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.qb-slot-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }

.qb-slot-chip {
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.qb-slot-chip:hover { border-color: var(--line-strong); }
.qb-slot-chip.active { border-color: var(--accent); background: var(--accent-soft); }
.qb-slot-chip.locked { cursor: default; }
.qb-slot-chip .time { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; }
.qb-slot-chip .sub { font-size: 11px; color: var(--muted); }
.qb-slot-chip .lanes { font-size: 10px; color: var(--faint); }
.qb-slot-chip.active .lanes { color: var(--accent); }

.qb-empty-note { padding: var(--space-3); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); color: var(--muted); font-size: 12px; text-align: center; }

/* Variantes contextuelles : rappel des acquis (jamais redemandés) */
.qb-row.two { grid-template-columns: 1.2fr 1fr; }
.qb-row.auto { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

.qb-context-strip { display: flex; flex-wrap: wrap; gap: 8px; }

.qb-context-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--page);
}

.qb-context-chip .k { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--faint); }
.qb-context-chip .v { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

.qb-chip-edit {
  border: none;
  background: transparent;
  padding: 2px 0 0;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  align-self: flex-end;
}

.qb-chip-edit:hover { text-decoration: underline; }
.qb-chip-lock { font-size: 10px; color: var(--faint); align-self: flex-end; padding-bottom: 2px; }

.qb-status-line { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.qb-status-line span + span::before { content: '·'; margin-right: 14px; color: var(--faint); }

.qb-more-toggle {
  width: 100%;
  min-height: 34px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.qb-more-toggle:hover { background: var(--subtle); color: var(--text); }
.qb-more-toggle[aria-expanded="true"] { color: var(--text); }

.qb-dur-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; }

.qb-dur-btn {
  display: grid;
  gap: 1px;
  justify-items: center;
  align-content: center;
  min-height: 36px;
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.qb-dur-btn small { font-size: 10px; color: var(--faint); font-weight: 400; }
.qb-dur-btn:hover { background: var(--subtle); }
.qb-dur-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.qb-lane-focus {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--page);
  margin-bottom: 10px;
}

.qb-lane-focus-title { font-size: 13px; font-weight: 600; }
.qb-lane-focus-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }

.qb-lane-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }

.qb-lane-btn {
  min-height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.qb-lane-btn:hover { background: var(--subtle); }
.qb-lane-btn.auto { font-family: var(--font-ui); }
.qb-lane-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.qb-lane-btn.suggested { border-style: dashed; border-color: var(--accent); }
.qb-lane-btn.busy, .qb-lane-btn.maint { opacity: 0.45; cursor: not-allowed; }

.qb-lane-footer { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.qb-lane-selection { font-size: 12px; color: var(--muted); }

.qb-warn {
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 12px;
  line-height: 1.45;
}

.qb-warn.danger { background: var(--danger-soft); color: var(--danger); }

.qb-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.qb-summary .lbl { font-size: 12px; color: var(--muted); font-weight: 500; }
.qb-summary .desc { font-size: 12px; color: var(--faint); margin-top: 2px; }
.qb-summary .amt { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 600; }

.qb-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--line);
  background: var(--raised);
}

.qb-btn-cancel {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.qb-btn-cancel:hover { background: var(--subtle); }

.qb-btn-save {
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--text);
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--surface);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}

.qb-btn-save:hover { opacity: 0.88; }

/* Notifications « nouvelle réservation du jour » : z-index 950 : au-dessus du
   planning plein écran (400), des overlays (480) et du toast (500). position
   fixed → non rognée par l'overflow:hidden du mode agrandi. */
#newResNotifs {
  position: fixed; top: 16px; right: 16px; z-index: 950;
  display: none; /* jamais côté client/public, réservé au poste staff */
  flex-direction: column; gap: 10px;
  width: min(340px, calc(100vw - 32px)); pointer-events: none;
}
body.staff-mode:not(.admin-mode) #newResNotifs { display: flex; }
.nr-card {
  pointer-events: auto; position: relative;
  display: flex; align-items: flex-start; gap: 8px;
  padding: 12px 12px 12px 14px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-overlay);
  transform: translateX(120%); opacity: 0;
  transition: transform .28s var(--ease), opacity .28s var(--ease);
}
.nr-card.nr-in { transform: translateX(0); opacity: 1; }
.nr-card.nr-leaving { transform: translateX(120%); opacity: 0; }
.nr-body {
  flex: 1; min-width: 0; display: grid; gap: 3px; text-align: left;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.nr-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--accent-strong);
  text-transform: uppercase; letter-spacing: .03em;
}
.nr-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
  animation: nrPulse 1.5s ease-in-out infinite;
}
@keyframes nrPulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); } }
.nr-title { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nr-meta { font-size: 12px; color: var(--muted); }
.nr-actions { display: flex; gap: 2px; flex-shrink: 0; }
.nr-mute, .nr-close {
  pointer-events: auto; background: none; border: 0; cursor: pointer;
  font-size: 13px; line-height: 1; color: var(--muted); padding: 3px 5px; border-radius: 6px;
}
.nr-mute:hover, .nr-close:hover { background: var(--line); color: var(--text); }
@media (prefers-reduced-motion: reduce) { .nr-card, .nr-dot { transition: none; animation: none; } }

/* Toast */
#toast:not(.hidden) {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(480px, calc(100vw - 32px));
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--text);
  color: var(--surface);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-overlay);
  animation: pl-enter var(--dur-slow) var(--ease) both;
}

/* Aperçu email (ops) */
.email-preview-overlay:not(.hidden) {
  position: fixed;
  inset: 0;
  z-index: 460;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: var(--scrim);
}

.email-preview-card {
  width: min(680px, 100%);
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
}

.email-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
}

.email-preview-frame { flex: 1; min-height: 420px; border: 0; background: var(--surface); }

/* ----------------------------------------------------------------------------
   18. ADMIN / DIRECTION (.admin-* + index.html #adminView)
   -------------------------------------------------------------------------- */
.admin-shell {
  max-width: 1440px;
  margin-inline: auto;
  padding: 24px clamp(16px, 2.2vw, 32px) 56px;
  display: grid;
  gap: var(--space-4);
}

.admin-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.admin-brand { display: flex; align-items: center; gap: var(--space-4); }
.admin-platform-logo { width: 44px; height: 44px; object-fit: contain; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); padding: 6px; }
.admin-eyebrow { color: var(--muted); font-size: 12px; font-weight: 500; }
.admin-hero h1 { font-size: 22px; margin-top: 2px; }
.admin-hero p { color: var(--muted); font-size: 13px; margin-top: 4px; max-width: 620px; }

.admin-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.admin-date-nav {
  display: inline-flex;
  align-items: center;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}

.admin-date-nav button {
  height: 100%;
  min-width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.admin-date-nav button:hover { background: var(--subtle); color: var(--text); }

.admin-date-nav input {
  height: 100%;
  width: 150px;
  border: 0;
  border-radius: 0;
  padding: 0 8px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.admin-btn,
.ops-admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.admin-btn:hover, .ops-admin-btn:hover { background: var(--subtle); }
.admin-btn.primary, .ops-admin-btn.primary { background: var(--text); border-color: var(--text); color: var(--surface); }
.admin-btn.primary:hover, .ops-admin-btn.primary:hover { background: var(--text); opacity: 0.88; }

/* Sélecteur de centres */
.admin-center-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-3); }

.admin-center-card {
  display: grid;
  gap: 4px;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.admin-center-card:hover { border-color: var(--line-strong); }
.admin-center-card.active { background: var(--subtle); border-color: var(--line-strong); }
.admin-center-card.active::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: var(--radius-full); background: var(--accent); }

.admin-center-card .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; }
.admin-center-card .name { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-center-card .meta { color: var(--muted); font-size: 12px; }
.admin-center-card strong { font-size: 14px; font-weight: 600; }
.admin-center-card small { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }

.admin-status {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: var(--radius-full);
  background: var(--subtle);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.8;
}

.admin-status.active, .admin-status.ok { background: var(--success-soft); color: var(--success); }
.admin-status.planned { background: var(--warning-soft); color: var(--warning); }

/* Onglets période + sections */
.admin-period-tabs,
.admin-tabs,
.ops-admin-tabs,
.ops-cockpit-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--subtle);
  border-radius: var(--radius-md);
  justify-self: start;
  max-width: 100%;
  overflow-x: auto;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.admin-period-tabs button,
.admin-tabs button,
.ops-admin-tabs button,
.ops-tab,
.ops-cockpit-tab {
  min-height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.admin-period-tabs button:hover,
.admin-tabs button:hover,
.ops-admin-tabs button:hover,
.ops-tab:hover,
.ops-cockpit-tab:hover { color: var(--text); }

.admin-period-tabs button.active,
.admin-tabs button.active,
.ops-admin-tabs button.active,
.ops-tab.active,
.ops-cockpit-tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); }

/* A9 : en mobile, les 5 onglets restent atteignables au doigt, scroll-x
   fluide avec snap + cibles tactiles ≥ 44px (DESIGN.md §7). */
@media (max-width: 480px) {
  .admin-period-tabs,
  .admin-tabs,
  .ops-admin-tabs,
  .ops-cockpit-tabs {
    display: flex;
    width: 100%;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .admin-period-tabs button,
  .admin-tabs button,
  .ops-admin-tabs button,
  .ops-tab,
  .ops-cockpit-tab {
    min-height: 44px;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

/* Panneaux + titres de section */
.admin-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
}

.admin-section-title { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.admin-section-title h2, .admin-section-title h3 { font-size: 16px; }
.admin-section-title p, .admin-section-title span { color: var(--muted); font-size: 12px; }

.admin-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--space-4); align-items: start; }

/* KPI et cartes k/v/s */
.admin-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); }
.admin-client-grid, .admin-export-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }

.admin-kpi, .admin-client-kpi,
.admin-export-card {
  display: grid;
  gap: 4px;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.admin-kpi .k,
.admin-client-kpi .k,
.ops-stat .k, .ops-sim-card .k, .ops-cockpit-card .k { color: var(--muted); font-size: 12px; font-weight: 500; }

.admin-kpi .v, .admin-client-kpi .v,
.ops-stat .v, .ops-sim-card .v {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.admin-kpi .s, .admin-client-kpi .s,
.ops-stat .s, .ops-sim-card .s { color: var(--faint); font-size: 11px; line-height: 1.4; }

.admin-export-card strong { font-size: 13px; font-weight: 600; }
.admin-export-card p, .admin-export-card span { color: var(--muted); font-size: 12px; }

/* Tables admin */
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }

.admin-table th {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--subtle);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--text); vertical-align: top; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: var(--subtle); }

.admin-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 9px;
  border-radius: var(--radius-full);
  background: var(--subtle);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

/* Le TYPE d'offre (formule, laser) n'est pas un etat : une etiquette neutre,
   pas une couleur. Les STATUTS gardent la semantique etablie partout ailleurs
   dans la console : ambre = attente (pending), vert = acquis (confirme, paye),
   rouge = echec/annule. Le bleu ne sert qu'a l'information, et rien ici n'en
   est. Une premiere version peignait formule/laser/pending/confirmed en bleu :
   quatre sens differents, une seule couleur, zero information. */
.admin-pill.formule, .admin-pill.laser { background: var(--subtle); color: var(--muted); }
.admin-pill.pending { background: var(--warning-soft); color: var(--warning); }
.admin-pill.confirmed { background: var(--success-soft); color: var(--success); }
.admin-pill.arrived { background: var(--warning-soft); color: var(--warning); }
.admin-pill.paid { background: var(--success-soft); color: var(--success); }
.admin-pill.cancelled { background: var(--danger-soft); color: var(--danger); }
.admin-pill.warn { background: var(--warning-soft); color: var(--warning); }
.admin-pill.danger { background: var(--danger-soft); color: var(--danger); }

.admin-plan-cell { display: grid; gap: 2px; font-size: 12px; }
.admin-plan-main { font-variant-numeric: tabular-nums; }
.admin-plan-sub { color: var(--faint); font-size: 11px; }
.engagement-cell { display: flex; flex-wrap: wrap; gap: 4px; }

/* Insights + santé + benchmark */
.admin-insight-list { display: grid; gap: 6px; }

.admin-insight {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 12px;
}

.admin-insight .dot { margin-top: 4px; background: var(--faint); }
.admin-insight.ok .dot, .admin-insight.good .dot { background: var(--success); }
.admin-insight.warn .dot, .admin-insight.warning .dot { background: var(--warning); }
.admin-insight.risk .dot, .admin-insight.alert .dot { background: var(--danger); }
.admin-insight strong { display: block; font-weight: 600; color: var(--text); }
.admin-insight span { color: var(--muted); line-height: 1.45; }

.admin-health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-2); }

.admin-health-card {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--muted);
}

.admin-health-card-top { display: flex; align-items: center; gap: 7px; font-weight: 500; color: var(--text); }
/* La pastille dit un ETAT : elle doit connaitre TOUS les etats que le code
   emet (ok/warn/danger/unknown, buildAdminOperationalChecks). Une premiere
   version ne stylait que warn : un statut danger retombait sur le vert par
   defaut, et la carte Reservations en alerte portait une pastille VERTE.
   Une pastille qui ment est pire que pas de pastille. */
.admin-health-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--success); flex: none; }
.admin-health-dot.warn { background: var(--warning); }
.admin-health-dot.danger { background: var(--danger); }
.admin-health-dot.unknown { background: var(--muted); }
.admin-health-value { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; color: var(--text); }
.admin-health-summary { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--success); }
.admin-health-summary.warn { color: var(--warning); }
.admin-health-summary.danger { color: var(--danger); }
.admin-health-foot { color: var(--faint); font-size: 11px; }
.admin-health-clear { color: var(--muted); font-size: 12px; line-height: 1.5; }

/* Cockpit opérationnel */
.ops-cockpit { display: grid; gap: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: var(--space-5); }
.ops-cockpit-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.ops-cockpit-title h2, .ops-cockpit-title h3 { font-size: 16px; }
.ops-cockpit-title p, .ops-cockpit-title span { color: var(--muted); font-size: 12px; }

.ops-cockpit-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.8fr); gap: var(--space-4); align-items: start; }
.ops-cockpit-board { display: grid; gap: var(--space-3); }
.ops-cockpit-board-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; color: var(--muted); font-size: 12px; }
.ops-cockpit-timeline { display: grid; gap: 6px; }

.ops-cockpit-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.ops-cockpit-hour { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 500; color: var(--muted); padding-top: 8px; }
.ops-cockpit-slots { display: grid; gap: 5px; }

.ops-cockpit-event {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 12px;
}

.ops-cockpit-event.laser { border-left-color: var(--info); }
.ops-cockpit-event.warning, .ops-cockpit-event.alert { border-left-color: var(--warning); }
.ops-cockpit-empty { padding: var(--space-5); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); color: var(--muted); font-size: 12px; text-align: center; }

.ops-cockpit-side { display: grid; gap: var(--space-3); }
.ops-cockpit-card { display: grid; gap: 6px; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--page); font-size: 12px; color: var(--muted); }
.ops-cockpit-meter { display: grid; gap: 6px; }
.ops-cockpit-meter-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; font-size: 11px; }

.ops-cockpit-bar { position: relative; grid-column: 1 / -1; height: 6px; border-radius: var(--radius-full); background: var(--subtle); overflow: hidden; }
/* Une jauge d'occupation n'est pas une information a signaler : c'est une
   mesure neutre. Le bleu accent etait de la couleur DECORATIVE (discipline :
   monochrome sauf le sens). Le remplissage est neutre ; seule une jauge
   au-dessus du seuil d'alerte a le droit de prendre une couleur. */
.ops-cockpit-bar span { position: absolute; inset: 0 auto 0 0; width: var(--value, 0%); background: var(--text); opacity: 0.75; border-radius: var(--radius-full); }

/* ── Cockpit du centre : reskin pv2 ──────────────────────────────────────────
   Meme discipline que la page Emails et le cockpit fondateur : monochrome sauf
   le sens, filets 1px, mouvement porte par des ETATS. Le contenu se
   reconstruit par innerHTML : l'entree n'est jouee que par .admin-mount, une
   classe posee UNIQUEMENT quand l'onglet vient de changer (garde JS,
   markAdminTabMount) : jamais sur un poll ou une frappe. */

/* Bandeau d'honnetete : memes traits que .fck-testdata du cockpit fondateur
   (ambre = attention, filet 1px, pas d'aplat criard). */
.admin-testdata {
  border: 1px solid var(--warning);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  padding: 10px 14px;
  font-size: 13px;
}

/* Activite du centre : deux blocs (signaux agents, journal terrain), chacun
   annonce son perimetre dans la tete. */
.ops-activity-block { display: grid; gap: var(--space-2); }
.ops-activity-block + .ops-activity-block { margin-top: var(--space-3); }
.ops-activity-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ops-activity-head h3 { font-size: 14px; font-weight: 600; }
.ops-activity-head span { color: var(--muted); font-size: 12px; }

/* Onglet Journal : le panneau pv2 (staff-pages-v2.js), dont la Direction est
   l'UNIQUE hote depuis son retrait de la page Emails. Le pv2-shell global
   reserve un grand padding bas de page : inutile ici, le shell admin gere le
   sien. */
.admin-journal-shell { padding: 0; }
.admin-journal-nav { display: flex; justify-content: flex-start; margin-bottom: 12px; }

/* Panneau Journal des modifications (surface de lecture Direction). */
.pv2-audit-meta {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.pv2-audit-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}
.pv2-audit-select {
  width: auto;
  height: 34px;
  font-size: 13px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}
/* Dates et compteurs du journal en chiffres tabulaires : une colonne qui ne
   danse pas quand la valeur change. */
.pv2-audit-panel .pv2-table td.num,
.pv2-audit-panel .pv2-table th.num { font-variant-numeric: tabular-nums; }
/* Le refus est LA ligne a voir : un filet a gauche double le chip rouge
   (jamais la couleur seule, le chip porte le libelle « Refuse »). */
.pv2-audit-panel tr.is-denied td:first-child { box-shadow: inset 2px 0 0 var(--danger); }
/* Depliage avant/apres : fond en retrait, il se lit comme un detail. */
.pv2-audit-panel tr.pv2-audit-detail td { background: var(--subtle); padding: 14px; }

/* Entree d'onglet, gardee par JS (Famille B) : translation 4px + fondu,
   transform/opacity seulement, ease-out, < 300 ms. */
@keyframes admin-mount-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
#adminContent.admin-mount { animation: admin-mount-in var(--dur-enter) var(--ease-out-strong) both; }

/* Pression : le geste rend l'etat, 160 ms, jamais depuis scale(0). */
.admin-btn:active,
.ops-admin-btn:active,
.admin-period-tabs button:active,
.admin-tabs button:active,
.ops-tab:active,
.ops-cockpit-tab:active,
.admin-center-card:active { transform: scale(0.97); transition: transform var(--dur-press) var(--ease-out-strong); }

@media (prefers-reduced-motion: reduce) {
  #adminContent.admin-mount { animation: none; }
  .admin-btn:active,
  .ops-admin-btn:active,
  .admin-period-tabs button:active,
  .admin-tabs button:active,
  .ops-tab:active,
  .ops-cockpit-tab:active,
  .admin-center-card:active { transform: none; }
}

/* ----------------------------------------------------------------------------
   19. OPS CONSOLE (ops-console.js : onglet Mails & agents / simulation / IA)
   -------------------------------------------------------------------------- */
.ops-admin-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.ops-admin-head h2, .ops-admin-head h3 { font-size: 16px; }
.ops-admin-head p { color: var(--muted); font-size: 12px; margin-top: 3px; }
.ops-admin-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ops-admin-content { display: grid; gap: var(--space-4); margin-top: var(--space-3); }
.ops-eyebrow { color: var(--muted); font-size: 12px; font-weight: 500; }
.ops-refresh-note, .ops-error { font-size: 12px; color: var(--faint); }
.ops-error { color: var(--danger); }

.ops-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-3); }

.ops-stat, .ops-sim-card, .ops-training-card, .ai-problem-card, .ops-sim-control-panel {
  display: grid;
  gap: 4px;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.ops-list { display: grid; gap: 6px; }

.ops-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) auto auto;
  gap: var(--space-3);
  align-items: center;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 13px;
}

.ops-row.template { grid-template-columns: minmax(0, 1fr) auto; }
.ops-row .meta, .ops-row small { color: var(--faint); font-size: 11px; }

/* Lignes de l'onglet Activite (signaux agents, journal terrain) : qui/quoi a
   gauche, lecture au centre, etat a droite. Les colonnes vides s'ecrasent
   (auto = 0) : la ligne a deux cellules du journal terrain garde sa lecture
   collee a droite. */
.ops-row.activity { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; }
.ops-row.activity > .meta:last-child { justify-self: end; text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .ops-row.activity { grid-template-columns: minmax(0, 1fr); }
  .ops-row.activity > .meta:last-child { justify-self: start; text-align: left; }
  .ops-row.activity > .ops-pill { justify-self: start; }
}

.ops-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 9px;
  border-radius: var(--radius-full);
  background: var(--subtle);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.ops-pill.ok, .ops-pill.sent, .ops-pill.success, .ops-pill.green { background: var(--success-soft); color: var(--success); }
.ops-pill.warn, .ops-pill.queued, .ops-pill.amber { background: var(--warning-soft); color: var(--warning); }
.ops-pill.err, .ops-pill.failed, .ops-pill.red, .ops-pill.danger { background: var(--danger-soft); color: var(--danger); }
.ops-pill.info, .ops-pill.blue { background: var(--info-soft); color: var(--info); }

.ops-mini-btn {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}

.ops-mini-btn:hover { background: var(--subtle); }

/* File de validation staff */
.ops-review-list { display: grid; gap: var(--space-2); }

.ops-review-item {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 12px;
}

.ops-review-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ops-review-main { color: var(--muted); line-height: 1.5; }
.ops-review-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ops-review-alt-list { display: grid; gap: 4px; }
.ops-review-alt {
  display: grid;
  gap: 2px;
  padding: 7px 9px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 11px;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ops-review-alt:hover { background: var(--subtle); border-color: var(--faint); }
.ops-review-alt strong { color: var(--text); font-size: 12px; font-weight: 600; }

/* Simulation ops */
.ops-sim-hero { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.ops-sim-overline { color: var(--muted); font-size: 12px; font-weight: 500; }
.ops-sim-actions, .ops-sim-comm-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.ops-sim-scoreboard { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.ops-sim-score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); }
.ops-sim-score { display: grid; gap: 3px; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--page); font-size: 12px; color: var(--muted); }
.ops-sim-score strong { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 600; color: var(--text); line-height: 1.1; }
.ops-sim-score small { color: var(--faint); font-size: 11px; }
.ops-sim-score.attention strong { color: var(--warning); }
.ops-sim-score.danger strong { color: var(--danger); }
.ops-sim-score-main { display: grid; gap: 4px; align-content: start; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--page); }
.ops-sim-score-main strong { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 600; color: var(--text); line-height: 1.1; }
.ops-sim-score-main > span:not(.ops-sim-overline) { color: var(--muted); font-size: 12px; }

.ops-sim-progress { position: relative; height: 6px; border-radius: var(--radius-full); background: var(--subtle); overflow: hidden; }
.ops-sim-progress .bar, .ops-sim-progress span { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: var(--radius-full); }

.ops-sim-timeline, .ops-sim-log { display: grid; gap: 5px; }

.ops-sim-timeline-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 12px;
  color: var(--muted);
}

.ops-sim-review-board, .ops-sim-comm-board, .ops-training-board { display: grid; gap: var(--space-3); }
.ops-sim-comm-head, .ops-sim-control-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ops-sim-comm-list { display: grid; gap: 5px; }
.ops-sim-comm-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.ops-sim-comm-row:hover { border-color: var(--line-strong); background: var(--subtle); }
.ops-sim-comm-row .ops-pill { grid-row: 1 / span 3; align-self: center; }
.ops-sim-comm-row strong { grid-column: 2; color: var(--text); font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-sim-comm-row > span:not(.ops-pill) { grid-column: 2; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-sim-comm-row small { grid-column: 2; color: var(--faint); font-size: 11px; }
.ops-sim-comm-summary, .ops-sim-control-foot { color: var(--faint); font-size: 11px; }
.ops-sim-empty { padding: var(--space-5); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); color: var(--muted); font-size: 12px; text-align: center; }

.ops-sim-profile-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(188px, 1fr)); gap: var(--space-2); }
.ops-sim-profile {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.ops-sim-profile:hover { border-color: var(--line-strong); background: var(--subtle); }
.ops-sim-profile.active { border-color: var(--accent); background: var(--accent-soft); }
.ops-sim-profile strong { color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.3; }
.ops-sim-profile em { font-style: normal; color: var(--faint); font-size: 11px; }
.ops-sim-profile-index { color: var(--faint); font-family: var(--font-data); font-variant-numeric: tabular-nums; }

.ops-sim-command-map, .ops-training-matrix { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-2); }
.ops-sim-command-link {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 12px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.ops-sim-command-link:hover { border-color: var(--line-strong); background: var(--subtle); text-decoration: none; }
.ops-sim-command-link span { color: var(--muted); font-size: 11px; font-weight: 500; }
.ops-sim-command-link strong { color: var(--text); font-size: 15px; font-weight: 600; font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.ops-sim-command-link small { color: var(--faint); font-size: 11px; line-height: 1.4; }
.ops-training-case { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.ops-training-score { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }

.ops-agent-meters { display: grid; gap: 10px; }
.ops-agent-meter { display: grid; gap: 4px; }
.ops-agent-meter-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: baseline; font-size: 12px; }
.ops-agent-meter-head strong { color: var(--text); font-size: 12px; font-weight: 500; font-family: var(--font-data); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-agent-meter-head span { color: var(--faint); font-size: 11px; font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.ops-agent-meter .bar { position: relative; display: block; height: 6px; border-radius: var(--radius-full); background: var(--subtle); overflow: hidden; }
.ops-agent-meter .bar i { position: absolute; inset: 0 auto 0 0; width: var(--value, 0%); background: var(--accent); border-radius: var(--radius-full); }

/* Organisation agents IA */
.ai-org-shell, .ai-org-layout { display: grid; gap: var(--space-4); }
.ai-org-layout { grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.9fr); align-items: start; }
.ai-org-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.ai-org-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-2); }
.ai-org-canvas { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: var(--space-4); overflow: auto; }

.ai-org-node, .ai-manager-node, .ai-agent-body {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 12px;
}

.ai-org-node.active, .ai-org-node.selected { border-color: var(--accent); background: var(--accent-soft); }

.ai-agent-avatar {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--subtle);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  flex: none;
}

.ai-agent-kicker { color: var(--faint); font-size: 11px; font-weight: 500; }
.ai-agent-state { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.ai-agent-activity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); }

.ai-compact-root, .ai-compact-manager, .ai-compact-agents { display: grid; gap: var(--space-2); }
.ai-compact-manager-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-2); }
.ai-compact-pyramid { display: grid; gap: var(--space-3); justify-items: center; }
.ai-compact-spine { width: 1px; height: 16px; background: var(--line-strong); }
.ai-compact-link { color: var(--accent); font-size: 12px; cursor: pointer; }
.ai-connector-strip { display: flex; flex-wrap: wrap; gap: 6px; }

.ai-detail-panel { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.ai-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.ai-detail-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.ai-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); }
.ai-detail-section { display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.ai-detail-section h4, .ai-detail-section strong { color: var(--text); font-size: 12px; font-weight: 600; }

.ai-live-board, .ai-live-columns { display: grid; gap: var(--space-3); }
.ai-live-columns { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-items: start; }
.ai-live-column-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; color: var(--muted); }
.ai-live-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-2); }
.ai-live-activity, .ai-live-summary, .ai-live-next { display: grid; gap: 5px; font-size: 12px; color: var(--muted); }
.ai-live-agent, .ai-live-data-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); font-size: 12px; }
.ai-live-agent {
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.ai-live-agent:hover { border-color: var(--line-strong); background: var(--subtle); }
.ai-live-agent.selected { border-color: var(--accent); background: var(--accent-soft); }
.ai-live-agent > span:not(.ai-live-dot) { display: grid; gap: 1px; min-width: 0; }
.ai-live-agent strong { color: var(--text); font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-live-agent small { color: var(--faint); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-live-agent em { font-style: normal; color: var(--muted); font-size: 11px; font-family: var(--font-data); }
.ai-live-dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--success); flex: none; }
.ai-problem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-2); }

/* Echantillons emails */
.email-sample-list, .email-samples { display: grid; gap: 6px; }
.email-status-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--faint); display: inline-block; }
.email-loading { color: var(--faint); font-size: 12px; padding: var(--space-3); text-align: center; }

/* ----------------------------------------------------------------------------
   20. RESPONSIVE : ≤1280 (densité) · ≤1100 (sidebar réduite) · ≤768 (mobile)
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .dash-grid-main, .dash-grid-bottom { grid-template-columns: 1fr 1fr; }
  .dash-status-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pv2-stats, .kpi-grid:not(.hidden), .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv2-pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .groups-main-layout, .events-layout, .utility-arrival-desk { grid-template-columns: 1fr; }
  .ops-cockpit-body, .ai-org-layout, .ops-sim-scoreboard { grid-template-columns: 1fr; }
}

/* Sidebar réduite d'office sous 1100px (le JS peut toujours la rouvrir : la
   classe .staff-menu-collapsed reste maître au-dessus de ce breakpoint) */
@media (max-width: 1100px) {
  body.staff-mode, body.admin-mode { --fgx-sidebar-width: var(--sidebar-w-collapsed); }
  body.staff-mode .ops-sidebar, body.admin-mode .ops-sidebar { padding: 12px 8px 10px; }

  body.staff-mode .fgx-menu-brand-copy,
  body.staff-mode .fgx-menu-label,
  body.staff-mode .fgx-menu-section-title,
  body.staff-mode .fgx-menu-chevron,
  body.staff-mode .fgx-menu-badge,
  body.staff-mode .fgx-menu-account-copy,
  body.staff-mode .fgx-menu-more,
  body.staff-mode .fgx-menu-subnav,
  body.admin-mode .fgx-menu-brand-copy,
  body.admin-mode .fgx-menu-label,
  body.admin-mode .fgx-menu-section-title,
  body.admin-mode .fgx-menu-chevron,
  body.admin-mode .fgx-menu-badge,
  body.admin-mode .fgx-menu-account-copy,
  body.admin-mode .fgx-menu-more,
  body.admin-mode .fgx-menu-subnav { display: none; }

  body.staff-mode .fgx-menu-top, body.admin-mode .fgx-menu-top { grid-template-columns: 1fr; justify-items: center; gap: 6px; }

  body.staff-mode .fgx-menu-brand,
  body.staff-mode .fgx-menu-center,
  body.staff-mode .fgx-menu-item,
  body.staff-mode .fgx-menu-item-parent,
  body.staff-mode .fgx-menu-account,
  body.admin-mode .fgx-menu-brand,
  body.admin-mode .fgx-menu-center,
  body.admin-mode .fgx-menu-item,
  body.admin-mode .fgx-menu-item-parent,
  body.admin-mode .fgx-menu-account {
    min-height: 44px;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 0;
  }

  .fgx-menu-popover { left: calc(100% + 8px); right: auto; width: 272px; }

  .pv2-split, .edit-layout, .utility-overview, .laser-pass-queue, .group-command,
  .events-command-bar, .admin-dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  /* Sidebar devient une barre supérieure : navigation horizontale scrollable */
  body.staff-mode, body.admin-mode { --fgx-sidebar-width: 0px; }

  body.staff-mode header, body.admin-mode header { width: auto; height: auto; }

  body.staff-mode .ops-sidebar,
  body.admin-mode .ops-sidebar {
    position: sticky;
    top: 0;
    inset: auto;
    width: 100%;
    height: auto;
    z-index: 70;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 10px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  body.staff-mode .fgx-menu-top, body.admin-mode .fgx-menu-top { min-height: 0; grid-template-columns: auto; }
  body.staff-mode .fgx-menu-collapse, body.admin-mode .fgx-menu-collapse { display: none; }
  body.staff-mode .fgx-menu-center, body.admin-mode .fgx-menu-center { display: none; }

  body.staff-mode .fgx-menu-nav,
  body.admin-mode .fgx-menu-nav {
    flex: 1 1 auto;
    /* min-width:0 obligatoire : sans lui le flex item grandit à la largeur du
       contenu et pousse toute la page (débordement horizontal mobile). */
    min-width: 0;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
  }

  body.staff-mode .fgx-menu-section, body.admin-mode .fgx-menu-section { display: flex; gap: 2px; padding: 0; }
  body.staff-mode .fgx-menu-section + .fgx-menu-section, body.admin-mode .fgx-menu-section + .fgx-menu-section { margin: 0 0 0 6px; border-top: 0; padding-top: 0; }

  body.staff-mode .fgx-menu-item,
  body.staff-mode .fgx-menu-item-parent,
  body.admin-mode .fgx-menu-item,
  body.admin-mode .fgx-menu-item-parent {
    min-height: 44px;
    min-width: 44px;
    width: auto;
    grid-template-columns: auto;
    padding: 0 12px;
  }

  body.staff-mode .fgx-menu-item.active::before,
  body.staff-mode .fgx-menu-group.active .fgx-menu-item-parent::before,
  body.admin-mode .fgx-menu-item.active::before,
  body.admin-mode .fgx-menu-group.active .fgx-menu-item-parent::before {
    left: 8px;
    right: 8px;
    top: auto;
    bottom: 2px;
    width: auto;
    height: 2px;
  }

  body.staff-mode .fgx-menu-account, body.admin-mode .fgx-menu-account { min-height: 44px; width: auto; grid-template-columns: auto; padding: 0 6px; }
  .fgx-menu-popover, body.staff-menu-collapsed .fgx-menu-popover { left: 10px; right: 10px; top: 60px; width: auto; }

  .staff-wrap { padding: 14px 12px 32px; }
  .admin-shell { padding: 16px 12px 40px; }

  .kpi-grid:not(.hidden), .dash-kpis, .pv2-stats, .dash-grid-main, .dash-grid-bottom,
  .pv2-pipeline, .utility-rush-board, .events-command-bar, .edit-summary,
  .qb-row.three, .qb-snapshot-row, .qb-type-row, .edit-grid-2,
  .dash-status-strip, .dashboard-detail-summary { grid-template-columns: 1fr; }

  .pv2-cal-cell { min-height: 54px; padding: 5px 6px; }
  .pv2-cal-meta { display: none; }

  .res-row { grid-template-columns: 56px minmax(0, 1fr); }
  .res-row-side { display: none; }
  .res-row-actions { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }

  .utility-res-card { grid-template-columns: 60px minmax(0, 1fr); }
  .utility-res-meta { display: none; }
  .utility-res-actions { grid-column: 1 / -1; justify-content: flex-start; }

  .event-row { grid-template-columns: 60px minmax(0, 1fr); }
  .event-resource { display: none; }
  .event-actions { grid-column: 1 / -1; flex-direction: row; }

  .dashboard-detail-row { grid-template-columns: 56px minmax(0, 1fr); }
  .dashboard-detail-amount { display: none; }
  .dashboard-detail-row-actions { grid-column: 1 / -1; }

  .pos-panel { width: 100%; }
  .pos-overlay.centered:not(.hidden) { padding: var(--space-2); }
  .staff-dashboard-detail-overlay { padding: var(--space-2); }
  .pv2-palette-overlay { padding: 8vh 8px 8px; }

  /* Cibles tactiles >= 44px */
  .res-status-btn, .status-chip, .pv2-btn, .qb-slot-chip, .qb-type-btn,
  .qb-dur-btn, .qb-lane-btn, .utility-action, .groups-action, .admin-btn,
  .ops-admin-btn, .pv2-seg button, .tab,
  .planning-toggle, .planning-more-btn, .resource-filter-btn { min-height: 44px; }

  .planning-search-inline input { height: 44px; width: 150px; }
  .search-wrap { width: 100%; }
  .search-wrap input, .date-nav, .btn-new, .dash-new-btn, .admin-date-nav, .staff-today-btn { height: 44px; }
  .date-nav button { min-width: 44px; }
  .date-nav button.staff-date-label { min-width: auto; }
  .staff-cal-day, .staff-cal-nav, .staff-cal-today-btn { min-height: 44px; }

  .staff-head:not(.hidden), .dash-hero, .pv2-bar, .admin-hero { align-items: flex-start; flex-direction: column; }
  .resource-strip-actions { margin-left: 0; }
  .laser-pass-queue { grid-template-columns: 1fr; }
  .laser-agenda-header, .laser-agenda-row { grid-template-columns: 72px minmax(420px, 1fr) 90px; }

  /* P1-11 : Planning bowling mobile : l'ancien mode « tout tient » (pistes
     34px) rendait les libellés illisibles (2-3 caractères). Fix minimal, sans
     refonte : colonnes à largeur LISIBLE + défilement horizontal du wrap
     (.planning-grid-wrap est déjà overflow-x:auto), heures sticky à gauche
     (.hour-col est déjà sticky/left:0). Scrollbar fine visible en affordance. */
  /* (la largeur de la colonne heures reste posée inline par renderPlanning) */
  .planning-box { --planning-lane-w: 118px; }
  .planning-grid-wrap { scrollbar-width: thin; scrollbar-color: var(--line-strong) var(--subtle); }
  .planning-grid-wrap::-webkit-scrollbar { height: 8px; }
  .planning-grid-wrap::-webkit-scrollbar-track { background: var(--subtle); }
  .planning-grid-wrap::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--radius-full); }
  .lane-header { gap: 4px; }
  .lane-header .settings { display: none; }
  .booking { left: 2px; right: 2px; }

  /* Groupes : registre empilé (les 7 colonnes de 720px ne tiennent pas) */
  .groups-ledger-row { min-width: 0; grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .groups-ledger-row-head { display: none; }
  .groups-ledger-row .groups-profile-cell { grid-column: 1 / -1; }
  .groups-row-actions { justify-self: end; }
  /* Cibles tactiles : les 3 actions par ligne passent à 44px */
  .groups-row-actions button { width: 44px; height: 44px; }
}

/* === Occasion DÉCLARÉE + file demandes sur mesure (CHANTIER 1 & 2) ======== */
.res-occasion-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  background: var(--accent-soft);
  color: var(--accent-strong, var(--accent));
  white-space: nowrap;
}
/* Le MOT porte le sens. Cinq pastels que personne n'apprend, c'est du bruit -
   et ces couleurs étaient en dur (8 valeurs hexadécimales + 4 rgba de dark),
   donc hors du design system. Elles laissaient aussi « evg » (index.html:296)
   sans style du tout. La règle de base .res-occasion-tag prend le relais pour
   toutes les valeurs, evg compris. */
.res-occasion-autre { background: var(--subtle); color: var(--muted); }
/* Icône trait comme partout ailleurs (l'emoji bloc-notes rendait une police
   système étrangère au reste de l'interface, de taille variable selon l'OS). */
.res-special-request {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.res-special-request svg { flex: 0 0 auto; margin-top: 2px; color: var(--warning); }

/* File des demandes sur mesure (leads hors planning) */
.cr-panel {
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
}
.cr-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.cr-panel-head strong { display: block; font-size: 15px; font-weight: 700; }
.cr-panel-head span { font-size: 12.5px; color: var(--text-2); }
.cr-panel-head button {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.cr-panel-head button:hover { border-color: var(--border-hover); }
.cr-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 11px;
  font-weight: 700;
}
.cr-list { display: grid; gap: 12px; }
.cr-empty {
  padding: 18px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.cr-empty.cr-error { color: var(--danger); border-color: var(--danger); }
.cr-card {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 12px;
  background: var(--bg-2);
}
.cr-card.cr-status-new { border-left-color: var(--accent); }
.cr-card.cr-status-in_progress { border-left-color: var(--warning); }
.cr-card.cr-status-handled { border-left-color: var(--success); opacity: 0.82; }
.cr-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.cr-card-ident { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cr-card-ident strong { font-size: 14px; font-weight: 700; }
.cr-meta { font-size: 12.5px; color: var(--text-2); margin-bottom: 2px; }
.cr-email { color: var(--accent-strong, var(--accent)); }
.cr-message {
  margin: 8px 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
}
/* .cr-actions : composant partagé défini dans pinlane.css */
.cr-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.cr-badge-new { background: var(--accent-soft); color: var(--accent-strong); }
.cr-badge-progress { background: var(--warning-soft); color: var(--warning); }
.cr-badge-handled { background: var(--success-soft); color: var(--success); }
.cr-badge-archived { background: var(--subtle); color: var(--muted); }

/* C14 : échec de chargement des bundles admin/ops, panneau bloquant + retry.
   #adminView est en pointer-events:none ; seul ce panneau se réactive. */
.admin-load-error {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line));
  background: var(--danger-soft);
  color: var(--text);
}
.admin-load-error strong { color: var(--danger); }
.admin-load-error p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

/* ============================================================
   Onglet « Données » : hub analytics direction (admin-data.js)
   ============================================================ */
.dh-wrap { display: grid; gap: var(--space-5); max-width: 100%; min-width: 0; }
/* Anti grid-blowout : sans min-width:0, le min-content d'un seul enfant
   (table, boutons nowrap…) étire tout le hub hors du viewport mobile. */
.dh-wrap > *, .dh-grid-2 > *, .dh-card { min-width: 0; }
.dh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.dh-title { margin: 0; font-size: 17px; letter-spacing: -0.01em; }
.dh-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.dh-controls { position: relative; display: flex; gap: var(--space-2); align-items: center; }
.dh-range { display: inline-flex; padding: 3px; gap: 2px; background: var(--subtle); border-radius: var(--radius-md); }
.dh-range button {
  border: 0; background: transparent; color: var(--muted); font: 600 12.5px var(--font-ui);
  padding: 5px 12px; border-radius: 6px; cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dh-range button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm), var(--shadow-border); }
.dh-export-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 250px;
  display: grid; padding: 6px; background: var(--raised); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-overlay);
}
.dh-export-menu button {
  border: 0; background: transparent; color: var(--text); text-align: left; font: 500 13px var(--font-ui);
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
}
.dh-export-menu button:hover { background: var(--subtle); }
.dh-error {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line)); background: var(--danger-soft);
}

.dh-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-3); }
.dh-tile { padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.dh-tile-label { font-size: 12px; font-weight: 500; color: var(--muted); }
.dh-tile-value { margin-top: 2px; font: 600 22px/1.2 var(--font-ui); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dh-tile-foot { display: flex; gap: var(--space-2); align-items: baseline; margin-top: 4px; min-height: 17px; flex-wrap: wrap; }
.dh-tile-sub { font-size: 11.5px; color: var(--faint); }
.dh-delta { font: 600 11.5px var(--font-data); font-variant-numeric: tabular-nums; }
.dh-delta.up { color: var(--success); }
.dh-delta.down { color: var(--danger); }
.dh-delta.neutral { color: var(--faint); }

.dh-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
.dh-card { padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.dh-card h3 { margin: 0 0 var(--space-3); font-size: 13.5px; }
.dh-h-follow { margin-top: var(--space-5) !important; }
.dh-chart-empty { padding: var(--space-6); text-align: center; font-size: 12.5px; color: var(--faint); background: var(--subtle); border-radius: var(--radius-md); }

.dh-chart { position: relative; }
.dh-chart-max { position: absolute; top: -2px; right: 0; font: 500 11px var(--font-data); color: var(--faint); }
.dh-cols { display: flex; align-items: flex-end; gap: 2px; height: 150px; padding-top: 14px; }
.dh-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; cursor: default; }
.dh-col-bar { border-radius: 4px 4px 0 0; min-height: 0; transition: opacity var(--dur) var(--ease); }
.dh-col:hover .dh-col-bar { opacity: 0.75; }
.dh-col-tick { height: 15px; margin-top: 4px; font: 500 10px var(--font-data); color: var(--faint); text-align: center; white-space: nowrap; overflow: visible; }

.dh-rows { display: grid; gap: 8px; }
.dh-row { display: grid; grid-template-columns: minmax(110px, 34%) 1fr auto; gap: var(--space-3); align-items: center; }
.dh-row-label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; min-width: 0; }
.dh-row-label span + * { overflow: hidden; text-overflow: ellipsis; }
.dh-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.dh-row-track { height: 14px; background: var(--subtle); border-radius: 4px; overflow: hidden; }
.dh-row-bar { height: 100%; border-radius: 4px; border-right: 2px solid var(--surface); }
.dh-row-value { font: 600 12px var(--font-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dh-row-extra { color: var(--faint); font-weight: 500; }

.dh-hm { display: grid; gap: 2px; }
.dh-hm-corner { }
.dh-hm-h, .dh-hm-d { font: 500 10.5px var(--font-data); color: var(--faint); align-self: center; }
.dh-hm-h { text-align: center; }
.dh-hm-cell { aspect-ratio: 1 / 1; min-height: 18px; border-radius: 3px; background: var(--surface); }

.dh-table { width: 100%; border-collapse: collapse; }
.dh-table th, .dh-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.dh-table th { color: var(--muted); font-weight: 500; font-size: 11.5px; }
.dh-table tbody tr:hover { background: var(--subtle); }
.dh-mono { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.dh-contact { color: var(--muted); }
.dh-badge-new {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-full);
  background: var(--accent-soft); color: var(--accent-strong); font: 600 10px var(--font-ui);
}

.dh-report-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.dh-report-head h3 { margin: 0; }
.dh-report-gen { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.dh-report-list { display: grid; gap: 6px; margin-top: var(--space-3); }
.dh-report-item {
  display: flex; gap: var(--space-3); align-items: baseline; width: 100%; text-align: left;
  padding: 9px 12px; background: var(--subtle); border: 1px solid transparent; border-radius: var(--radius-md);
  color: var(--text); font: 500 12.5px var(--font-ui); cursor: pointer;
}
.dh-report-item:hover { border-color: var(--line-strong); }
.dh-report-item.active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.dh-report-kind { font-weight: 600; color: var(--accent-strong); }
.dh-report-meta { margin-left: auto; font-size: 11px; color: var(--faint); }
.dh-report-viewer { margin-top: var(--space-4); }
.dh-report-body { padding: var(--space-4) var(--space-5); background: var(--subtle); border-radius: var(--radius-md); font-size: 13px; }
.dh-report-body h3 { margin: 0 0 var(--space-2); font-size: 15px; }
.dh-report-body h4 { margin: var(--space-4) 0 var(--space-1); font-size: 13px; }
.dh-report-body ul { margin: 4px 0; padding-left: 18px; }
.dh-report-body li { margin: 3px 0; }
.dh-report-editor {
  width: 100%; resize: vertical; padding: var(--space-3); border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); background: var(--surface); color: var(--text);
  font: 12.5px/1.6 var(--font-data);
}
.dh-report-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }

.dh-tooltip {
  position: fixed; z-index: 90; transform: translate(-50%, -100%);
  max-width: 260px; padding: 6px 10px; border-radius: var(--radius-sm);
  background: var(--text); color: var(--page); font: 500 11.5px var(--font-ui);
  pointer-events: none; box-shadow: var(--shadow-md);
}

/* CRM clients : colonnes triables + tris rapides */
.pv2-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.pv2-th-sort:hover { color: var(--text); }
.pv2-th-sort .pv2-sort-arrow { opacity: 0.35; font-size: 10px; }
.pv2-th-sort.active { color: var(--text); }
.pv2-th-sort.active .pv2-sort-arrow { opacity: 1; color: var(--accent-strong); }
.pv2-quicksorts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 2px 0 4px; }
.pv2-quicksorts > span { font-size: 11.5px; font-weight: 600; color: var(--faint); }
.pv2-chip-btn {
  border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--surface);
  color: var(--muted); font: 500 12px var(--font-ui); padding: 5px 12px; cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pv2-chip-btn:hover { border-color: var(--line-strong); color: var(--text); }
.pv2-chip-btn.active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); color: var(--accent-strong); }
.pv2-rank {
  display: inline-flex; align-items: center; margin-right: 7px; padding: 1px 7px;
  border-radius: var(--radius-full); background: var(--accent); color: var(--accent-contrast);
  font: 700 10.5px var(--font-data);
}
.utility-lane-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.groups-action-dismiss {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-full); background: transparent;
  color: var(--faint); font-size: 11px; cursor: pointer;
}
.groups-action-dismiss:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }

/* ============================================================
   Onglet « Mails » : studio (admin-mail.js)
   ============================================================ */
.ms-note {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 12.5px;
}
.ms-note.warn { background: var(--warning-soft); color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--line)); }
.ms-form { display: grid; gap: var(--space-3); }
.ms-form-note { font-size: 12px; color: var(--info); background: var(--info-soft); padding: 8px 12px; border-radius: var(--radius-md); }
.ms-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.ms-field { display: grid; gap: 5px; font-size: 12px; font-weight: 500; color: var(--muted); min-width: 0; }
.ms-field em { font-style: normal; font-weight: 400; color: var(--faint); }
.ms-input {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text); font: 13px/1.5 var(--font-ui);
}
.ms-input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; }
.ms-body { resize: vertical; font-family: var(--font-ui); }
.ms-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.ms-actions-spacer { flex: 1; }
.ms-tips { padding: var(--space-3) var(--space-4); background: var(--accent-soft); border-radius: var(--radius-md); }
.ms-tips-title { font-size: 12px; font-weight: 600; color: var(--accent-strong); margin-bottom: 4px; }
.ms-tips ul { margin: 0; padding-left: 18px; font-size: 12.5px; }
.ms-tips li { margin: 3px 0; }
.ms-history-bar { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-4); }
.ms-search { max-width: 320px; }
.ms-pill {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--radius-full);
  background: var(--subtle); color: var(--muted); font-size: 11.5px; font-weight: 500; white-space: nowrap;
}
.ms-pill.sent, .ms-pill.delivered { background: var(--success-soft); color: var(--success); }
.ms-pill.queued { background: var(--warning-soft); color: var(--warning); }
.ms-pill.failed { background: var(--danger-soft); color: var(--danger); }
.ms-error-hint { margin-top: 2px; font-size: 10.5px; color: var(--danger); max-width: 220px; }
.ms-viewer { margin: var(--space-4) 0; padding: var(--space-4); background: var(--subtle); border-radius: var(--radius-md); }
.ms-viewer-head { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; flex-wrap: wrap; margin-bottom: var(--space-3); }
.ms-viewer-actions { display: flex; gap: var(--space-2); }
.ms-iframe { width: 100%; height: 420px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
.ms-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.ms-tpl-card { display: grid; gap: 8px; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); align-content: start; }
.ms-tpl-head { display: flex; justify-content: space-between; gap: var(--space-2); align-items: baseline; }
.ms-tpl-subject { font-size: 12.5px; font-weight: 500; }
.ms-tpl-body { font-size: 12px; color: var(--muted); line-height: 1.5; }
.ms-check { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); }
.ms-failures, .ms-recos { margin: 0; padding-left: 4px; list-style: none; display: grid; gap: 8px; font-size: 12.5px; }
.ms-failures li { display: flex; gap: 8px; align-items: baseline; }
.ms-recos li { padding-left: 14px; position: relative; }
.ms-recos li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

@media (max-width: 900px) {
  .dh-grid-2 { grid-template-columns: 1fr; }
  .ms-grid-2 { grid-template-columns: 1fr; }
  .ms-search { max-width: none; width: 100%; }
  .dh-range { flex-wrap: wrap; max-width: 100%; }
  .ms-viewer-head { flex-direction: column; }
  .dh-cols { height: 120px; }
  .dh-col-tick { font-size: 9px; }
  .dh-hm { overflow-x: auto; }
  .dh-table { display: block; overflow-x: auto; white-space: nowrap; }
  .dh-head { align-items: stretch; flex-direction: column; }
  .dh-controls { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CRM CLIENTS v3 : redesign lisible + data-dense (facettes déselectionnables,
   fiche client 360). Raw tokens uniquement ; light + dark via cascade.
   ══════════════════════════════════════════════════════════════════════════ */
.crm-shell { display: flex; flex-direction: column; gap: var(--space-4); }
.crm-muted { color: var(--faint); }

.crm-pill { display: inline-flex; align-items: center; gap: 5px; height: 20px; font-size: 12px; font-weight: 500; padding: 0 8px; border-radius: var(--radius-full); border: 1px solid var(--line); background: var(--subtle); color: var(--muted); white-space: nowrap; }
.crm-pill .crm-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.crm-pill.tone-accent { color: var(--accent-strong); background: var(--accent-soft); border-color: transparent; }
.crm-pill.tone-success { color: var(--success); background: var(--success-soft); border-color: transparent; }
.crm-pill.tone-warn { color: var(--warning); background: var(--warning-soft); border-color: transparent; }
.crm-pill.tone-info { color: var(--info-strong); background: var(--info-soft); border-color: transparent; }
.crm-pill.tone-muted { color: var(--muted); background: var(--subtle); }

/* Segments CRM v4 (fusion Clients+Groupes) : 4 vues, une active, re-clic → Tous.
   Sélection par GRAISSE + barre 2px (Astryx tabs), pas par fond plein. */
.crm-segbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.crm-seg { position: relative; display: inline-flex; align-items: center; height: var(--h-lg); font-size: 13px; font-weight: 400; padding: 0 12px; border-radius: var(--radius-sm); border: 0; background: transparent; color: var(--muted); cursor: pointer; transition: color var(--dur-fast) var(--ease); }
.crm-seg:hover { color: var(--text); background-image: linear-gradient(var(--overlay-hover), var(--overlay-hover)); }
.crm-seg.is-active { color: var(--text); font-weight: 600; }
.crm-seg.is-active::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: var(--radius-full); background: var(--accent); }
/* Un nombre n'est jamais nu : « 3 nouvelles », pas « 3 ». */
.crm-seg-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 600;
}
.crm-seg-count { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.crm-seg-count strong { color: var(--text); font-variant-numeric: tabular-nums; }
.crm-stats .crm-stat-link { cursor: pointer; border-radius: var(--radius-lg); transition: transform var(--dur) var(--ease); }
.crm-stats .crm-stat-link:hover { transform: translateY(-1px); }
.crm-stats .crm-stat-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.crm-stats .crm-stat-link.is-active > * { box-shadow: inset 0 0 0 1.5px var(--accent); }
/* Colonne "Aime" : chip favorite tronquée pour ne jamais déborder la liste */

.crm-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 0.7fr); gap: var(--space-4); align-items: start; }
.crm-list-panel { padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: 720px; }
.crm-table-wrap { overflow: auto; flex: 1; }
.crm-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 0; table-layout: auto; }
.crm-table thead th { position: sticky; top: 0; z-index: 1; background: var(--subtle); color: var(--muted); font-size: 12px; font-weight: 600; text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.crm-th { cursor: pointer; user-select: none; }
.crm-th:hover { color: var(--text); }
.crm-th.is-active { color: var(--accent-strong); }
.crm-table th.num, .crm-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.crm-table td.num { font-family: var(--font-data); }
.crm-sort { display: inline-flex; opacity: .45; vertical-align: -1px; }
.crm-sort .pv2-ico { width: 11px; height: 11px; }
.crm-th.is-active .crm-sort { opacity: 1; }
.crm-table tbody tr { border-bottom: 1px solid var(--line); cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.crm-table tbody tr:hover { background-image: linear-gradient(var(--overlay-hover), var(--overlay-hover)); }
.crm-table tbody tr.is-selected { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.crm-table tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.crm-table td { height: 38px; padding: 8px 12px; color: var(--text); vertical-align: middle; }
/* NB : un <td> en display:flex sort du layout de table (la cellule wrappe sous
   la ligne) : on garde les td en table-cell et on aligne les enfants inline. */
.crm-cell-client { white-space: nowrap; }
/* Avatar neutre (initiales monochromes) : l'accent est réservé aux signaux
   actionnables, pas à la décoration de chaque ligne. */
.crm-avatar { flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; font-size: 11px; font-weight: 600; background: var(--subtle); color: var(--muted); border: 1px solid var(--line); }
.crm-client-id { min-width: 0; display: inline-flex; vertical-align: middle; flex-direction: column; gap: 1px; margin-left: 10px; }
.crm-client-id strong { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.crm-client-id small { font-size: 11px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.crm-ltv strong { font-weight: 600; }
.crm-cell-visit strong { display: block; font-size: 12px; font-weight: 600; }
.crm-cell-visit small { display: block; font-size: 10.5px; color: var(--faint); }
.crm-list-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); }

.crm-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--h-sm); height: var(--h-sm); border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; flex: 0 0 auto; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.crm-icon-btn:hover { background-image: linear-gradient(var(--overlay-hover), var(--overlay-hover)); color: var(--text); }
.crm-icon-btn .pv2-ico { width: 13px; height: 13px; }

/* Fiche client : UNE surface, sections séparées par hairlines (pas de
   sous-boîtes empilées : la hiérarchie vient des titres et de l'espace). */
.crm-fiche-panel { padding: 0; position: sticky; top: 0; overflow: hidden; }
.crm-fiche { display: flex; flex-direction: column; }
.crm-sec { display: flex; flex-direction: column; gap: 10px; padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line); }
.crm-fiche > .crm-sec:first-child { border-top: 0; }
.crm-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.crm-sec-head h3 { font-size: 12px; font-weight: 600; color: var(--muted); margin: 0; text-transform: uppercase; letter-spacing: .04em; }
.crm-count { display: inline-flex; align-items: center; height: 20px; font-size: 11px; font-weight: 500; color: var(--muted); background: var(--subtle); padding: 0 8px; border-radius: var(--radius-full); }
/* Le rail fiche est étroit (~330px) : identité en haut, actions en rangée
   pleine largeur dessous : jamais de boutons en compétition avec le nom. */
.crm-head { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 12px; padding-top: var(--space-5); }
.crm-avatar-lg { width: 44px; height: 44px; font-size: 15px; border-radius: var(--radius-lg); }
.crm-head-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.crm-head-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crm-head-row h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); margin: 0; overflow-wrap: anywhere; }
.crm-head-badges { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.crm-head-contact { display: flex; flex-direction: column; gap: 3px; }
.crm-contact-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); text-decoration: none; min-width: 0; }
.crm-contact-link:hover { color: var(--text); text-decoration: underline; }
.crm-contact-link .pv2-ico { width: 13px; height: 13px; opacity: .65; flex: 0 0 auto; }
.crm-cell-why { font-size: 12px; color: var(--warning); max-width: 240px; }
.crm-cell-badge { white-space: nowrap; }
.crm-cell-visit.is-upcoming strong { color: var(--accent-strong); }
.crm-head-actions { display: flex; gap: 8px; flex: 1 0 100%; }
.crm-head-actions .pv2-btn { flex: 1; justify-content: center; }
/* KPI : bande de chiffres séparés par hairlines verticales, pas de cartes. */
.crm-kpis { flex-direction: row; gap: 0; padding-top: var(--space-3); padding-bottom: var(--space-4); }
.crm-kpi { flex: 1 1 auto; min-width: 0; padding: 2px 8px 2px var(--space-3); border-left: 1px solid var(--line); }
.crm-kpi:first-child { border-left: 0; padding-left: 0; }
.crm-kpi-val { font-family: var(--font-data); font-size: 18px; font-weight: 400; letter-spacing: -0.01em; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-kpi-label { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; color: var(--faint); margin-top: 3px; white-space: nowrap; }
/* Relance due : section teintée pleine largeur, douce (pas de liseré). */
.crm-sec.crm-relance { background: var(--warning-soft); }
.crm-relance-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.crm-relance-why { font-size: 13px; color: var(--text); line-height: 1.35; }
.crm-insight { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text); line-height: 1.35; }
.crm-insight > span:first-child { flex: 0 0 auto; }
.crm-insight.tone-warn, .crm-insight.tone-warn strong { color: var(--warning); }
.crm-insight.tone-success { color: var(--success); }
.crm-insight.tone-accent strong { color: var(--accent-strong); }
.crm-next-body { display: flex; flex-direction: column; gap: 2px; }
.crm-next-body strong { font-size: 14px; font-weight: 600; color: var(--text); }
.crm-next-body span { font-size: 12px; color: var(--muted); }
.crm-kv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; }
.crm-kv-grid > div { display: flex; flex-direction: column; gap: 1px; }
.crm-kv-grid dt { font-size: 10.5px; color: var(--faint); font-weight: 600; }
.crm-kv-grid dd { font-size: 13px; color: var(--text); margin: 0; font-weight: 600; }
.crm-kv-wide { grid-column: 1 / -1; }
.crm-kv-wide dd { display: flex; gap: 5px; flex-wrap: wrap; }
/* Historique : lignes hairline compactes (les liserés colorés par statut
   faisaient du bruit : le statut vit dans la pilule à droite). */
.crm-history { display: flex; flex-direction: column; max-height: 360px; overflow: auto; }
.crm-hist { border-top: 1px solid var(--line); }
.crm-history .crm-hist:first-child { border-top: 0; }
.crm-hist.status-cancel { opacity: .6; }
/* Rail étroit : date + montant + statut sur la ligne 1, libellé pleine
   largeur sur la ligne 2 : rien ne wrappe, rien ne se bat pour la place. */
.crm-hist summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1px 10px; padding: 8px 0; cursor: pointer; list-style: none; border-radius: var(--radius-sm); transition: background-color var(--dur-fast) var(--ease); }
.crm-hist summary:hover { background-image: linear-gradient(var(--overlay-hover), var(--overlay-hover)); }
.crm-hist summary::-webkit-details-marker { display: none; }
.crm-hist-date { grid-column: 1; grid-row: 1; font-family: var(--font-data); font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-hist-main { grid-column: 1 / -1; grid-row: 2; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.crm-hist-main strong { font-size: 12.5px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-hist-main small { font-size: 10.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-hist-amount { grid-column: 2; grid-row: 1; font-family: var(--font-data); font-size: 12.5px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-hist-amount.is-neg { color: var(--danger); text-decoration: line-through; }
.crm-hist-status { grid-column: 3; grid-row: 1; font-size: 10px; }
.crm-hist-detail { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; padding: 2px 0 10px; }
.crm-hist-detail > div { display: flex; flex-direction: column; }
.crm-hist-detail dt { font-size: 10px; color: var(--faint); }
.crm-hist-detail dd { font-size: 12px; color: var(--text); margin: 0; }
.crm-hist-notes { grid-column: 1 / -1; }
.crm-comm-stats { font-size: 11.5px; color: var(--muted); }
.crm-comm-list { display: flex; flex-direction: column; max-height: 300px; overflow: auto; }
.crm-comm { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.crm-comm-list .crm-comm:first-child { border-top: 0; }
.crm-comm-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--subtle); color: var(--muted); flex: 0 0 auto; }
.crm-comm-icon .pv2-ico { width: 13px; height: 13px; }
.crm-comm.dir-inbound .crm-comm-icon { background: var(--info-soft); color: var(--info-strong); }
.crm-comm-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.crm-comm-main strong { font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-comm-main small { font-size: 10.5px; color: var(--faint); }
.crm-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 13px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.crm-empty strong { color: var(--text); display: block; }
.crm-empty-lg { padding: 40px 20px; }
.crm-meta { gap: 6px; }
.crm-meta > div { display: flex; flex-direction: column; }
.crm-meta dt { font-size: 10px; color: var(--faint); }
.crm-meta dd { font-size: 12px; color: var(--muted); margin: 0; }

@media (max-width: 1100px) {
  .crm-split { grid-template-columns: 1fr; }
  .crm-fiche-panel { position: static; }
  .crm-table .col-secondary, .crm-table td.col-secondary { display: none; }
}

/* ── Groupes & anniversaires : Radar de préparation (futur proche) ─────────── */
.groups-cockpit { grid-template-columns: minmax(0, 1.9fr) minmax(340px, 0.9fr); align-items: start; }
.groups-primary { min-width: 0; }
.groups-timeline { display: flex; flex-direction: column; gap: var(--space-5); }
.groups-band-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: var(--space-3); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.groups-band-head h3 { font-size: 14px; font-weight: 800; color: var(--text); margin: 0; }
.groups-band-head span { font-size: 12px; color: var(--muted); font-weight: 600; }
.groups-band-list { display: flex; flex-direction: column; gap: var(--space-3); }
.groups-dossier { border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); padding: 13px 15px; display: flex; flex-direction: column; gap: 10px; }
.groups-dossier.tone-success { border-left-color: var(--success); }
.groups-dossier.tone-warning { border-left-color: var(--warning); }
.groups-dossier.tone-danger { border-left-color: var(--danger); }
.groups-dossier.tone-info { border-left-color: var(--info); }
.groups-dossier-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.groups-dossier-when { display: flex; align-items: baseline; gap: 8px; }
.groups-dossier-when strong { font-size: 13px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.groups-jx { font-size: 11px; font-weight: 800; color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); padding: 2px 7px; border-radius: var(--radius-full); white-space: nowrap; }
.groups-pax { font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.groups-dossier-val { margin-left: auto; font-size: 14px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.groups-flag { font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: var(--radius-full); }
.groups-flag-vip { color: var(--accent-contrast); background: var(--accent); }
.groups-flag-risk { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, var(--surface)); }
.groups-dossier-ident { display: flex; align-items: center; gap: 11px; }
.groups-dossier-ident strong { font-size: 14px; font-weight: 700; color: var(--text); display: block; }
.groups-dossier-ident small { font-size: 11.5px; color: var(--faint); }
.groups-readiness { display: flex; align-items: center; gap: 10px; }
.groups-readiness-bar { flex: 1 1 auto; height: 6px; border-radius: var(--radius-full); background: var(--subtle); overflow: hidden; }
.groups-readiness-bar > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width var(--dur) var(--ease); }
.groups-readiness-count { flex: 0 0 auto; font-size: 11px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.groups-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.groups-check { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-full); border: 1px solid var(--line); }
.groups-check-done { color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--surface)); border-color: color-mix(in srgb, var(--success) 30%, var(--line)); }
.groups-check-todo { color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, var(--surface)); border-color: color-mix(in srgb, var(--warning) 30%, var(--line)); }
.groups-check-na { color: var(--faint); background: var(--subtle); }
.groups-check-toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.groups-check-toggle { font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; }
.groups-check-toggle:hover { border-color: var(--accent); }
.groups-check-toggle.is-done { color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, var(--line)); background: color-mix(in srgb, var(--success) 10%, var(--surface)); }
.groups-memo { font-size: 12px; color: var(--muted); font-style: italic; }
.groups-dossier-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.groups-stage-badge { display: inline-flex; align-items: center; height: 20px; font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 0 8px; border-radius: var(--radius-full); color: var(--info); background: color-mix(in srgb, var(--info) 14%, var(--surface)); }
.groups-stage-in_progress { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, var(--surface)); }
.groups-history { margin-top: 2px; }
.groups-history summary { font-size: 11.5px; color: var(--muted); cursor: pointer; }
.groups-history-list { display: flex; flex-direction: column; gap: 4px; margin-top: 7px; }
.groups-history-row { display: grid; grid-template-columns: 1fr 1.4fr auto auto; gap: 8px; font-size: 11.5px; color: var(--muted); padding: 4px 0; border-top: 1px solid var(--line); }
.groups-history-row strong { color: var(--text); font-variant-numeric: tabular-nums; }
.groups-view-seg button[disabled] { opacity: .45; cursor: not-allowed; }
.groups-facets { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 11px; }
.groups-facet { cursor: pointer; }
.groups-facet.active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.groups-count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted); }
.groups-prepfirst, .groups-reset { font-size: 12px; font-weight: 700; padding: 7px 11px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }
.groups-prepfirst.active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.groups-reset:hover { border-color: var(--accent); }
.groups-priority-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--text); cursor: pointer; margin-bottom: 6px; }
.groups-priority-row:hover { border-color: var(--accent); }
.groups-priority-row div { flex: 1 1 auto; min-width: 0; }
.groups-priority-row strong { font-size: 13px; display: block; }
.groups-priority-row small { font-size: 11px; color: var(--muted); }
.groups-forecast { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; align-items: end; }
.groups-forecast-col { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.groups-forecast-bar { width: 100%; height: 54px; display: flex; align-items: flex-end; background: var(--subtle); border-radius: var(--radius-md); overflow: hidden; }
.groups-forecast-bar > span { width: 100%; background: var(--chart-1); min-height: 2px; }
.groups-forecast-col small { font-size: 10px; color: var(--faint); }
.groups-forecast-col strong { font-size: 11px; color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) {
  .groups-cockpit { grid-template-columns: 1fr; }
}

.mk-auto-edit-hint { display: block; font-weight: 400; color: var(--faint); text-transform: none; letter-spacing: 0; margin-top: 1px; }

/* ── MARKETING : composants natifs mkw-* (RUN C, 2026-07-17) ─────────────────
   Un SEUL vocabulaire : les couches br-* (LE BRIEF) et le shim de compat sont
   morts, remplacés par des composants natifs. Loi de design inchangée :
   silence hiérarchique, une action accent par composant, hairlines --line,
   chiffres en --font-data tabular-nums, tokens uniquement, light/dark auto,
   motion 120-200ms transform/opacity. */

/* Sections d'« Aujourd'hui » (voix, radar, file) */
.mkw-block { margin-top: var(--space-6); }
.mkw-block:first-child { margin-top: 0; }
.mkw-bt { margin: 0 0 var(--space-3); font-size: 14.5px; font-weight: 620; letter-spacing: -0.01em; color: var(--text); }

/* Texture signature (ref Vercel Agent) : une nappe de points derriere la
   tete de page, fondue au masque. Purement decorative, aria-hidden implicite
   (pseudo-element), zero impact layout, desactivable en reduced-motion non
   necessaire (statique). */
.mkw-shell { position: relative; }
/* Le contenu peint AU-DESSUS du champ de points (z-index 1 contre le 0 du
   canvas), et reste positionne (les entrees en scene s'appuient dessus). */
.mkw-shell > * { position: relative; z-index: 1; }
/* Texture signature (look "agent IA vivant") : le CHAMP DE POINTS VIVANT.
   Un champ clairseme de points repartis sur TOUTE la toile, dessine par le
   canvas #mkwDots (staff-pages-v2.js) : derive continue, reaction au curseur,
   scintillement. Couleur = valeur CALCULEE de var(--text) portee ici (parite
   light/dark automatique, zero couleur en dur) ; les intensites (alpha) sont
   calibrees par theme cote canvas, et volontairement TRES basses. Purement
   decoratif : position absolute inset:0 (couvre la boite de contenu du shell,
   jamais de debordement horizontal), pointer-events none, aria-hidden, DERRIERE
   le contenu (z-index 0). Reduced-motion : champ STATIQUE, aucune boucle. */
/* Toile de fond PLEIN ECRAN (2026-07-28). Elle etait bornee a la boite de
   contenu du shell ; Movsar la voulait sur toute la page. `position: fixed`
   l'ancre au viewport (elle ne defile pas, c'est un fond), `z-index: -1` la
   place SOUS le contenu en flux tout en restant AU-DESSUS du fond de page :
   avec z-index 0 elle serait passee par-dessus le texte. Elle n'intercepte
   rien (pointer-events: none) et porte les deux tokens dont le module a
   besoin (color = --text, --accent lu par-dessus). */
.mkw-dots { position: fixed; inset: 0; z-index: -1; width: 100vw; height: 100vh; height: 100dvh; pointer-events: none; color: var(--text); }

/* Stat-cards decisionnelles (ref Vercel Usage) : valeur mono qui commande,
   label, note de bas de carte, hover par fond/bordure, cliquables (chaque
   carte navigue vers sa maison). */
.mkw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.mkw-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); font-family: var(--font-ui); text-align: left; cursor: pointer; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
[data-theme='dark'] .mkw-stat { background: var(--raised); }
.mkw-stat:hover { border-color: var(--line-strong); background: var(--subtle); }
.mkw-stat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mkw-stat:active { transform: scale(0.99); }
.mkw-stat-label { font-size: 12px; font-weight: 500; color: var(--muted); }
.mkw-stat-val { font-family: var(--font-data); font-size: 24px; font-weight: 460; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.1; color: var(--text); }
.mkw-stat-val.is-good { color: var(--success); }
.mkw-stat-val.is-quiet { color: var(--faint); font-size: 18px; }
.mkw-stat-foot { font-size: 11.5px; color: var(--faint); }
.mkw-stat-foot b { font-weight: 600; color: var(--accent-strong); }

/* La command bar (ref Vercel « Ask anything ») : le geste central du produit.
   Input XL, bouton fleche circulaire, ring accent au focus, note de confiance. */
.mkw-cmd { margin-top: var(--space-8); }
.mkw-cmd-bar { position: relative; display: flex; align-items: center; gap: var(--space-2); padding: 6px 6px 6px 18px; border: 1px solid var(--line-strong); border-radius: var(--radius-xl); background: var(--surface); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
[data-theme='dark'] .mkw-cmd-bar { background: var(--raised); }
.mkw-cmd.is-focused .mkw-cmd-bar { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 0 0 1px var(--accent); }
.mkw-cmd-input { flex: 1; height: 46px; border: 0; background: transparent; color: var(--text); font-family: var(--font-ui); font-size: 14px; }
.mkw-cmd-input::placeholder { color: var(--faint); }
.mkw-cmd-input:focus-visible { outline: none; }
.mkw-cmd-send { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: var(--radius-full); background: var(--text); color: var(--surface); cursor: pointer; transition: opacity var(--dur) var(--ease), transform var(--dur-fast) var(--ease); }
.mkw-cmd-send:hover { opacity: 0.88; }
.mkw-cmd-send:active { transform: scale(0.94); }
.mkw-cmd-send:disabled { opacity: 0.45; cursor: default; }
.mkw-cmd-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mkw-cmd-send svg { width: 16px; height: 16px; }
.mkw-cmd-note { margin: var(--space-2) 0 0; text-align: center; font-size: 11.5px; color: var(--faint); }

/* Chips de suggestion : TOUJOURS visibles au-dessus de la barre ; la
   primaire porte un sheen anime (ref pastille « Enable Agent to analyze… »). */
.mkw-cmd .mkw-chips { margin: 0 0 var(--space-2); opacity: 1; transform: none; pointer-events: auto; }
.mkw-chip-primary { position: relative; overflow: hidden; border-color: var(--line-strong); color: var(--text); font-weight: 500; }
.mkw-chip-primary::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(100deg, transparent 32%, color-mix(in srgb, var(--accent) 16%, transparent) 50%, transparent 68%); animation: mkwSheen 2.6s var(--ease) infinite; pointer-events: none; }
@keyframes mkwSheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Table (ref Vercel Requests) : header 12px muted, rangees hairline. */
.mkw-thead { display: grid; align-items: baseline; gap: 14px; padding: 0 0 8px; border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 500; color: var(--faint); }

/* La ligne de voix (ex-mémo : UNE phrase, signée) */
.mkw-voice { padding: var(--space-4) var(--space-5); }
.mkw-voice-text { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text); max-width: 62ch; }
.mkw-voice .mkw-sign { margin-top: var(--space-3); }

/* En-tetes de table pour les patterns (colonnes de .mkw-pat) */
.mkw-thead-pat { grid-template-columns: 1fr auto auto; display: grid; }
.mkw-thead-pat span:last-child { text-align: right; min-width: 56px; }

/* Le radar 14 jours */
.mkw-radar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(48px, 1fr); gap: 6px; overflow-x: auto; padding: 4px 1px; scrollbar-width: thin; }
.mkw-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 4px 7px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); font-family: var(--font-ui); cursor: pointer; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform 180ms var(--mkw-out); }
[data-theme='dark'] .mkw-cell { background: var(--raised); }
.mkw-cell:hover { border-color: var(--line-strong); background: var(--subtle); transform: translateY(-1px); }
/* Doctrine un-accent (ref heatmap Observability, juge V2) : chips NEUTRES
   uniformes ; le niveau se lit par une barre 2px en tete de chip, identique
   dans les deux themes. Fini les fonds pastel = 3 teintes actives. */
.mkw-cell::before { content: ''; position: absolute; top: 4px; left: 10px; right: 10px; height: 2px; border-radius: 2px; background: transparent; }
.mkw-cell.lv-calme::before { background: var(--line-strong); }
.mkw-cell.lv-creux::before { background: var(--danger); }
.mkw-cell.lv-fort::before { background: var(--success); }
.mkw-cell.lv-creux .mkw-cell-resa { color: var(--danger); }
.mkw-cell.lv-fort .mkw-cell-resa { color: var(--success); }
.mkw-cell.is-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.mkw-cell.is-open { border-color: var(--accent); }
.mkw-cell-day { font-family: var(--font-data); font-size: 11px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.mkw-cell.is-today .mkw-cell-day { color: var(--accent-strong); font-weight: 700; }
.mkw-cell .br-wx { width: 17px; height: 17px; color: var(--muted); }
.mkw-cell.lv-creux .br-wx { color: color-mix(in srgb, var(--danger) 60%, var(--muted)); }
.mkw-cell-temp { font-family: var(--font-data); font-size: 11px; font-variant-numeric: tabular-nums; color: var(--faint); }
.mkw-cell-resa { font-family: var(--font-data); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text); min-height: 14px; white-space: nowrap; }
.mkw-cell-resa em { font-style: normal; color: var(--faint); font-size: 9.5px; }
.mkw-cell-event { position: absolute; top: 6px; right: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.mkw-cell-skel { height: 76px; border-radius: var(--radius-lg); background: var(--subtle); animation: pl-skeleton 1.4s var(--ease) infinite; }
.mkw-radar-sum { margin: var(--space-4) 0 0; font-size: 13px; color: var(--muted); }
.mkw-radar-explain { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); padding: 12px 14px; background: var(--subtle); border-radius: var(--radius-lg); font-size: 13px; color: var(--text); line-height: 1.5; }
.br-num { font-family: var(--font-data); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 0.95em; }

/* Les cartes de proposition (la file « Prêt pour toi ») : fermée = une
   RANGÉE dense (ref Vercel Tasks) ; ouverte = l'atelier déployé. */
.mkw-prop { position: relative; margin-top: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5) calc(var(--space-5) + 6px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.mkw-prop:not(.is-open):not(.is-published) { display: flex; align-items: baseline; gap: var(--space-4); padding-top: 13px; padding-bottom: 13px; }
.mkw-prop:not(.is-open):not(.is-published) .mkw-prop-why { flex: 1; font-size: 14px; margin: 0; }
.mkw-prop:not(.is-open):not(.is-published) .mkw-prop-meta { margin: 0; white-space: nowrap; flex: none; }
.mkw-prop.is-open { border-radius: var(--radius-xl); margin-top: var(--space-3); }
[data-theme='dark'] .mkw-prop { background: var(--raised); }
.mkw-prop:hover { border-color: var(--line-strong); }
.mkw-prop::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--accent); }
.mkw-prop.tone-danger::before { background: var(--danger); }
.mkw-prop.tone-success::before { background: var(--success); }
.mkw-prop.is-published { padding: var(--space-3) var(--space-4); }
.mkw-prop.is-published::before { background: var(--success); }
.mkw-prop-published { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--muted); }
.mkw-prop-published .pv2-ico { width: 14px; height: 14px; color: var(--success); flex: none; }
.mkw-flash { animation: mkwFlash 1s var(--ease); }
@keyframes mkwFlash { 0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.mkw-prop-why { margin: 0; font-size: 15.5px; font-weight: 550; letter-spacing: -0.005em; line-height: 1.5; color: var(--text); max-width: 62ch; }
.mkw-prop-meta { margin: 4px 0 0; font-family: var(--font-data); font-size: 12px; color: var(--muted); }
.mkw-prop-actions { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-4); }
.mkw-prop-skel { min-height: 72px; }

/* Onglets réseau (dans une carte ou le Studio) */
.mkw-nets { display: flex; gap: var(--space-3); margin-top: var(--space-3); }
.mkw-net { border: 0; background: transparent; padding: 0 0 4px; font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.mkw-net:hover { color: var(--text); }
.mkw-net.active { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.mkw-net:disabled { opacity: 0.5; cursor: default; }

/* Le papier (texte prêt à copier) + shimmer honnête */
.mkw-paper { margin-top: var(--space-3); padding: 16px 18px; background: var(--subtle); border-radius: var(--radius-md); font-size: 13.5px; line-height: 1.6; color: var(--text); white-space: pre-wrap; user-select: all; }
.mkw-shimmer { position: relative; overflow: hidden; }
.mkw-shimmer::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, var(--overlay-hover) 50%, transparent 70%); animation: mkwShimmer 1.2s infinite; }
@keyframes mkwShimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.mkw-under { margin: var(--space-2) 0 0; font-size: 12.5px; color: var(--muted); }
.mkw-under-mono { font-family: var(--font-data); }
.mkw-prompt { margin-top: var(--space-2); }
.mkw-prompt summary { font-size: 12px; color: var(--faint); cursor: pointer; }
.mkw-prompt-text { margin: 6px 0 4px; padding: 10px 12px; background: var(--subtle); border-radius: var(--radius-md); font-family: var(--font-data); font-size: 12px; color: var(--muted); user-select: all; }
.mkw-angle { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
.mkw-published-ask { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); padding: 8px 12px; background: var(--subtle); border-radius: var(--radius-md); font-size: 13px; font-weight: 500; color: var(--text); }

/* La barre de demande : les chips vivent dans le DOM, visibles au focus
   (le focus ne re-rend jamais la page : voir mkBrAskFocus). */
/* (la barre de demande vit dans .mkw-cmd, la command bar) */
.mkw-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.mkw-ask.is-focused .mkw-chips { opacity: 1; transform: none; pointer-events: auto; }
.mkw-chip { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-full); padding: 5px 12px; min-height: var(--h-sm); font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); cursor: pointer; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.mkw-chip:hover { color: var(--text); border-color: var(--line-strong); }

/* Le Studio : blocs du pack + badge honnête + la fabrication réelle */
.mkw-st-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.mkw-st-bar .mkw-nets { margin-top: 0; }
.mkw-st-gen { display: flex; gap: var(--space-2); align-items: center; flex: 1; min-width: 260px; }
.mkw-st-gen .mkw-input { flex: 1; }
.mkw-st-block { margin-top: var(--space-3); }
.mkw-st-head { display: flex; align-items: center; gap: var(--space-2); }
.mkw-st-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.mkw-st-head small { color: var(--faint); font-size: 11px; }
.mkw-st-copy { margin-left: auto; }
.mkw-st-block .mkw-paper { margin-top: 6px; }
.mkw-st-mono { font-family: var(--font-data); font-size: 12px; color: var(--muted); }
.mkw-st-badge { display: inline-block; margin: 0 0 var(--space-2); padding: 3px 10px; border-radius: var(--radius-full); font-size: 12px; font-weight: 500; }
.mkw-st-badge.is-ready { background: var(--success-soft); color: var(--success); }
.mkw-st-badge.is-review { background: var(--warning-soft); color: var(--warning); }
.mkw-craft { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 var(--space-3); padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
[data-theme='dark'] .mkw-craft { background: var(--subtle); }
.mkw-craft-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); }
.mkw-craft-step { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--muted); }
.mkw-craft-step em { font-style: normal; }
.mkw-craft-step b { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text); }
.mkw-craft-step i { font-style: normal; font-size: 10.5px; color: var(--danger); }
.mkw-craft-step i.is-ok { color: var(--success); }
.mkw-craft-step.is-kept { color: var(--text); font-weight: 500; }
.mkw-craft-step.is-kept b { color: var(--success); }
.mkw-craft-arrow { color: var(--faint); }

/* Les reçus (Résultats) */
.mkw-receipt { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; font-size: 13.5px; border-top: 1px solid var(--line); }
.mkw-receipt:first-of-type { border-top: 0; }
.mkw-receipt-label { color: var(--text); }
.mkw-receipt-fill { flex: 1; border-bottom: 1px dotted var(--line-strong); transform: translateY(-3px); }
.mkw-receipt-val { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--text); white-space: nowrap; }
.mkw-receipt.tone-good .mkw-receipt-val { color: var(--success); }
.mkw-receipt.tone-neutral .mkw-receipt-val { color: var(--muted); }
.mkw-receipt.tone-pending .mkw-receipt-val { color: var(--faint); }
.mkw-receipt .mkw-link { margin-left: var(--space-2); white-space: nowrap; }

/* Le panneau d'erreur partagé (une erreur réseau se DIT, avec retry) */
.mkw-error { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.mkw-error-body { display: flex; align-items: flex-start; gap: 12px; }
.mkw-error-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-lg); background: var(--danger-soft); color: var(--danger); flex: none; }
.mkw-error-ico svg { width: 17px; height: 17px; }
.mkw-error-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.mkw-error-text { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.mkw-inline-error { color: var(--danger); }

/* Champs labellisés (Concurrents) */
.mkw-field { display: flex; flex-direction: column; gap: 4px; }
.mkw-label { font-size: 12px; font-weight: 500; color: var(--muted); }
.mkw-src-extra { margin: var(--space-2) 0 0; font-size: 12.5px; color: var(--muted); }
.mkw-src-extra b { font-family: var(--font-data); font-weight: 500; color: var(--text); }
.mkw-pat-basis { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: var(--radius-full); background: var(--subtle); color: var(--faint); font-size: 10.5px; font-weight: 600; vertical-align: 1px; }

/* L'apprentissage montré (colle-un-post) */
.mkw-analy-learned { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; padding: 12px 14px; background: var(--success-soft); border-radius: var(--radius-md); }
.mkw-analy-learned svg { width: 15px; height: 15px; color: var(--success); flex: none; margin-top: 2px; }
.mkw-analy-learned > div { display: flex; flex-direction: column; gap: 3px; }
.mkw-analy-learned .mkw-analy-label { flex: none; color: var(--success); font-weight: 600; }
.mkw-analy-learned .mkw-analy-val { color: var(--text); line-height: 1.5; font-size: 12.5px; }
.mkw-analy-foot { font-size: 11.5px; color: var(--muted); }

/* Le plan : poignées, états de semaine, progression live */
.mkw-plan-week.is-past { opacity: 0.6; }
.mkw-plan-week.is-current { border-color: var(--line-strong); border-left-width: 3px; }
.mkw-plan-state { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent-strong); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.mkw-plan-when { flex-wrap: wrap; row-gap: 2px; }
.mkw-plan-when small { white-space: nowrap; }
.mkw-plan-week.is-past .mkw-plan-state { background: var(--subtle); color: var(--faint); }
.mkw-plan-actions { list-style: none; padding-left: 0; }
.mkw-plan-actions li { display: flex; align-items: flex-start; gap: 8px; }
.mkw-plan-actions li.is-inert { color: var(--faint); }
.mkw-plan-actions li.is-done span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.mkw-plan-check { flex: none; width: 18px; height: 18px; margin-top: 1px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--accent-contrast); cursor: pointer; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.mkw-plan-check:hover { border-color: var(--accent); }
.mkw-plan-check.is-done { background: var(--success); border-color: var(--success); cursor: default; }
.mkw-plan-check .pv2-ico { width: 12px; height: 12px; }
.mkw-plan-done-note { font-style: normal; font-size: 11px; color: var(--success); white-space: nowrap; }
.mkw-plan-studio { margin-top: var(--space-3); }
.mkw-plan-progress { margin-top: var(--space-2); }

/* Focus visible sur TOUT l'interactif de la zone (contrainte 7) */
.mkw-cell:focus-visible, .mkw-chip:focus-visible, .mkw-net:focus-visible,
.mkw-seg-btn:focus-visible, .mkw-link:focus-visible, .mkw-plan-check:focus-visible,
.mkw-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 760px) {
  .mkw-radar { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; }
  .mkw-cell { min-width: 52px; scroll-snap-align: start; }
  .mkw-prop-actions { flex-wrap: wrap; gap: var(--space-3); }
  /* Mobile : la meta s'empile SOUS le titre (ref rangees Requests), jamais
     entrelacee avec un titre qui wrappe. */
  .mkw-prop:not(.is-open):not(.is-published) { flex-direction: column; align-items: stretch; gap: 5px; }
  .mkw-stat-val { font-size: 20px; }
  .mkw-cmd-send { width: 44px; height: 44px; }
  .mkw-st-bar { flex-direction: column; align-items: stretch; }
  .mkw-payline { flex-direction: column; gap: var(--space-2); }
  .mkw-chip { min-height: 44px; }
  .mkw-plan-check { width: 24px; height: 24px; }
  /* Le badge de confiance quitte l'absolu : troisieme colonne du flux, plus
     jamais en collision avec un titre (verdict sceptique, carte vacances).
     Specificite volontairement superieure : la regle absolue de base est
     ecrite PLUS LOIN dans le fichier et gagnait a egalite. */
  .mkw-verdicts .mkw-verdict .mkw-conf { position: static; margin-left: auto; align-self: flex-start; flex: none; }
  .mkw-verdicts .mkw-verdict .mkw-verdict-body { flex: 1; padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mkw-flash, .mkw-shimmer::after, .mkw-cell-skel, .mkw-chip-primary::after { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MARKETING : « machine de guerre » : 5 surfaces (refonte 2026-07-16)
   Langage DESIGN.md strict (Geist, un accent bleu, hairlines, ZÉRO dégradé/
   glow/glass) exécuté au niveau Linear/Vercel/Stripe : héros qui commande,
   hiérarchie typographique tranchée, easing custom, scale-on-press, light/dark.
   `--mkw-out` = ease-out fort (emil). Réutilise les builders br-* (radar,
   cartes, studio, reçus) en les remettant à niveau plus bas.
   ══════════════════════════════════════════════════════════════════════════ */
/* La toile est un grid mono-colonne (héritage .pv2-shell). Sa colonne
   implicite est `auto` = max-content : le fil (bulles à texte long, radar) la
   ferait déborder au-delà du viewport sur mobile. minmax(0, 1fr) verrouille la
   colonne à la largeur du conteneur : plus jamais de scroll horizontal de page. */
/* Courbes premium : expo-out (entrées en scène), spring doux (déploiements),
   in-out (balayages en boucle). Jamais de linear. */
.mkw-shell { --mkw-out: cubic-bezier(0.16, 1, 0.3, 1); --mkw-spring: cubic-bezier(0.34, 1.25, 0.5, 1); --mkw-io: cubic-bezier(0.45, 0.05, 0.55, 0.95); grid-template-columns: minmax(0, 1fr); max-width: 960px; margin: 0 auto; padding: 0 24px var(--space-10); overflow-x: clip; }

/* En-tête d'accueil (langage Vercel « Agent ») : fil d'Ariane, grande identité,
   pastille d'état vivant, une phrase de description mutée, « En savoir plus ». */
.mkw-head { display: flex; flex-direction: column; gap: 10px; padding: var(--space-8) 0 var(--space-6); }
.mkw-crumb { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.mkw-head-id { display: flex; align-items: flex-start; gap: 14px; }
/* La vignette de marque : un canvas de particules (pinlane-fx.js) qui reforme
   le dessin de l'agent et fuit le curseur. `color` porte le token pour le
   module (zero couleur en dur cote JS) ; sans le module, la case reste vide et
   l'en-tete tient tout seul. */
.mkw-head-mark { flex: none; width: 64px; height: 64px; display: block; border-radius: var(--radius-lg); background: var(--accent-soft); }
.mkw-mark-fx { display: block; width: 100%; height: 100%; color: var(--accent-strong); }
.mkw-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-lg); background: var(--accent-soft); color: var(--accent-strong); flex: none; }
.mkw-mark svg { width: 18px; height: 18px; }
.mkw-head-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mkw-head-titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mkw-head-title { margin: 0; font-size: 22px; font-weight: 640; letter-spacing: -0.02em; color: var(--text); line-height: 1.1; }
.mkw-head-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-full); font-family: var(--font-data); font-size: 11px; font-weight: 500; color: var(--muted); background: var(--surface); }
[data-theme='dark'] .mkw-head-badge { background: var(--raised); }
.mkw-head-desc { margin: 0; max-width: 62ch; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.mkw-more-link { border: 0; background: transparent; padding: 0; font-family: var(--font-ui); font-size: 13.5px; font-weight: 500; color: var(--accent-strong); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.mkw-more-link:hover { text-decoration-color: var(--accent); }
.mkw-more-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.mkw-head-about { margin: 4px 0 0; max-width: 62ch; padding: 12px 14px; font-size: 13px; line-height: 1.6; color: var(--muted); background: var(--subtle); border-radius: var(--radius-md); border-left: 2px solid var(--line-strong); }
.mkw-live { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); animation: mkwPulse 2.4s var(--ease) infinite; }
@keyframes mkwPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 45%, transparent); } 70% { box-shadow: 0 0 0 5px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Onglets : rail glissant sous l'actif */
.mkw-tabs { position: relative; display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: var(--space-5); overflow-x: auto; scrollbar-width: none; }
.mkw-tabs::-webkit-scrollbar { display: none; }
.mkw-tab { position: relative; border: 0; background: transparent; padding: 10px 12px 12px; font-family: var(--font-ui); font-size: 13.5px; font-weight: 500; color: var(--muted); cursor: pointer; white-space: nowrap; border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: color 140ms var(--mkw-out), background-color 140ms var(--mkw-out); }
.mkw-tab:hover { color: var(--text); background: var(--subtle); }
.mkw-tab.active { color: var(--text); font-weight: 600; }
.mkw-tab.active::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); }
.mkw-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Surface active : fade-up une fois par changement */
.mkw-surface.mkw-in > * { animation: mkwUp 420ms var(--mkw-out) both; }
.mkw-surface.mkw-in > *:nth-child(2) { animation-delay: 60ms; }
.mkw-surface.mkw-in > *:nth-child(3) { animation-delay: 120ms; }
.mkw-surface.mkw-in > *:nth-child(n+4) { animation-delay: 170ms; }
@keyframes mkwUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Primitive carte */
.mkw-card { padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); }
[data-theme='dark'] .mkw-card { background: var(--raised); }
.mkw-card + .mkw-card, .mkw-surface > * + * { margin-top: var(--space-4); }

.mkw-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.mkw-quiet { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.mkw-note { margin: 0 0 var(--space-4); font-size: 12.5px; color: var(--muted); padding: 10px 14px; background: var(--subtle); border-radius: var(--radius-md); border-left: 2px solid var(--line-strong); }
.mkw-method { margin: var(--space-3) 0 0; font-size: 11.5px; color: var(--faint); line-height: 1.5; }
.mkw-link { border: 0; background: transparent; padding: 0; font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; color: var(--accent-strong); cursor: pointer; }
.mkw-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.mkw-link-faint { color: var(--faint); font-weight: 400; }
.mkw-degraded { margin: 0 0 var(--space-2); font-size: 12px; color: var(--muted); }

/* ── LE HÉROS : € généré ── */
.mkw-hero { padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); }
[data-theme='dark'] .mkw-hero { background: var(--raised); }
.mkw-hero-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.mkw-hero-fig { display: flex; flex-direction: column; gap: 8px; }
.mkw-hero-num { font-family: var(--font-data); font-size: clamp(44px, 7vw, 64px); font-weight: 460; font-variant-numeric: tabular-nums; letter-spacing: -0.035em; line-height: 0.95; color: var(--text); }
.mkw-hero-num.is-good { color: var(--success); }
.mkw-hero-num.is-quiet { color: var(--faint); }
.mkw-hero-cap { max-width: 44ch; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.mkw-hero-cap strong { color: var(--text); font-weight: 600; }
.mkw-hero-chips { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: var(--space-4); }
.mkw-hchip { font-size: 12.5px; color: var(--muted); }
.mkw-hchip b { font-family: var(--font-data); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text); }
.mkw-hchip-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); }
.mkw-hero .mkw-link { margin-top: var(--space-4); }

/* Segmented control (période) */
.mkw-seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--subtle); border-radius: var(--radius-md); }
.mkw-seg-btn { border: 0; background: transparent; padding: 0 11px; height: 26px; border-radius: calc(var(--radius-md) - 2px); font-family: var(--font-data); font-size: 12px; color: var(--muted); cursor: pointer; transition: background-color 140ms var(--mkw-out), color 140ms var(--mkw-out); }
.mkw-seg-btn:hover { color: var(--text); }
.mkw-seg-btn.active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }
[data-theme='dark'] .mkw-seg-btn.active { background: var(--line-strong); }
.mkw-seg-btn:active { transform: scale(0.96); }

/* Sources (d'où vient le chiffre) */
.mkw-src-panel { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.mkw-src { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.mkw-src-name { flex: 0 0 40%; font-size: 13px; color: var(--text); }
.mkw-src-bar { flex: 1; height: 6px; border-radius: var(--radius-full); background: var(--subtle); overflow: hidden; }
.mkw-src-bar span { display: block; height: 100%; border-radius: var(--radius-full); background: var(--accent); }
.mkw-src-val { font-family: var(--font-data); font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.mkw-src-val em { font-style: normal; color: var(--faint); margin-left: 6px; }

/* Signature de l'employé (ligne de voix) */
.mkw-sign { display: flex; align-items: center; gap: 8px; margin: var(--space-4) 0 0; font-family: var(--font-data); font-size: 12px; color: var(--faint); }
.mkw-sign .mkw-mark { width: 20px; height: 20px; border-radius: var(--radius-sm); }
.mkw-sign .mkw-mark svg { width: 12px; height: 12px; }

/* Verdicts (l'analyste : jour/mois/météo & pourquoi). Grille toujours
   RESOLUE (ref Observability) : une carte orpheline en fin de rangée passe
   pleine largeur au lieu de laisser une case vide. */
.mkw-verdicts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3); }
.mkw-verdicts > .mkw-verdict:last-child:nth-child(odd) { grid-column: 1 / -1; }
.mkw-verdict { position: relative; display: flex; gap: 12px; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
[data-theme='dark'] .mkw-verdict { background: var(--raised); }
.mkw-verdict-ico { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-strong); flex: none; }
.mkw-verdict-ico svg { width: 15px; height: 15px; }
.mkw-verdict.t-danger .mkw-verdict-ico { background: var(--danger-soft); color: var(--danger); }
.mkw-verdict-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mkw-verdict-label { font-size: 11.5px; color: var(--muted); }
.mkw-verdict-val { font-family: var(--font-data); font-size: 20px; font-weight: 480; letter-spacing: -0.02em; color: var(--text); line-height: 1.15; }
.mkw-verdict-sub { font-size: 12px; color: var(--muted); line-height: 1.45; }
.mkw-verdict .mkw-conf { position: absolute; top: var(--space-4); right: var(--space-4); }

/* Badge de confiance */
.mkw-conf { display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border-radius: var(--radius-full); font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; }
.mkw-conf.t-ok { background: var(--success-soft); color: var(--success); }
.mkw-conf.t-mid { background: var(--accent-soft); color: var(--accent-strong); }
.mkw-conf.t-low { background: var(--subtle); color: var(--faint); }

/* Patterns (mémoire par contexte) */
.mkw-block-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: var(--space-3); }
.mkw-block-head h3 { margin: 0; font-size: 14.5px; font-weight: 620; letter-spacing: -0.01em; color: var(--text); }
.mkw-block-sub { font-size: 12px; color: var(--faint); }
.mkw-pat { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.mkw-patterns .mkw-pat:first-of-type { border-top: 0; }
.mkw-pat-ctx { font-size: 13.5px; color: var(--text); }
.mkw-pat-meta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-data); font-size: 11.5px; color: var(--faint); }
.mkw-pat-val { font-family: var(--font-data); font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; min-width: 56px; }
.mkw-pat-val.is-good { color: var(--success); }
.mkw-pat-val.is-flat { color: var(--muted); }
.mkw-pat-val.is-pending { font-size: 12px; font-weight: 400; color: var(--faint); }

/* Concurrents */
.mkw-riv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
.mkw-riv { display: flex; flex-direction: column; gap: 8px; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
[data-theme='dark'] .mkw-riv { background: var(--raised); }
.mkw-riv-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mkw-riv-name { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.mkw-riv-host { display: block; font-family: var(--font-data); font-size: 11.5px; color: var(--faint); margin-top: 1px; }
.mkw-riv-stats { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.mkw-riv-stat { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.mkw-riv-stat svg { width: 12px; height: 12px; color: var(--warning); }
.mkw-riv-stat em { font-style: normal; color: var(--faint); }
.mkw-riv-ads { color: var(--accent-strong); }
.mkw-riv-check { color: var(--faint); }
.mkw-riv-offer { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); }
.mkw-riv-offer svg { width: 13px; height: 13px; color: var(--muted); flex: none; }
.mkw-riv-sigs { display: flex; flex-wrap: wrap; gap: 6px; }
.mkw-riv-sig { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-full); background: var(--subtle); font-size: 12px; color: var(--text); }
.mkw-riv-sig b { font-family: var(--font-data); font-weight: 500; color: var(--accent-strong); }
.mkw-riv-adlink { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--accent-strong); text-decoration: none; }
.mkw-riv-adlink:hover { text-decoration: underline; text-underline-offset: 3px; }
.mkw-riv-adlink svg { width: 13px; height: 13px; flex: none; }
.mkw-riv-diff { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 10px; background: var(--accent-soft); border-radius: var(--radius-md); font-size: 12px; color: var(--accent-strong); }
.mkw-riv-diff svg { width: 13px; height: 13px; flex: none; }
.mkw-riv-add { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: var(--space-2); align-items: center; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.mkw-input { height: var(--h-lg); padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font-family: var(--font-ui); font-size: 13px; }
.mkw-input::placeholder { color: var(--faint); }
.mkw-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--line-strong); }
.mkw-soon { border-style: dashed; }
.mkw-soon-badge { display: inline-flex; align-items: center; height: 18px; padding: 0 9px; border-radius: var(--radius-full); background: var(--subtle); color: var(--faint); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

/* Colle-un-post : analyseur concurrent */
.mkw-textarea { width: 100%; min-height: 84px; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font-family: var(--font-ui); font-size: 13.5px; line-height: 1.55; resize: vertical; }
.mkw-textarea::placeholder { color: var(--faint); }
.mkw-textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--line-strong); }
.mkw-riv-analyze { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: var(--space-3); }
.mkw-quiet-inline { font-size: 12px; color: var(--faint); }
.mkw-analy { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.mkw-analy-degraded { margin: var(--space-3) 0 0; font-size: 12.5px; color: var(--muted); }
.mkw-analy-sum { margin: 0; font-size: 14.5px; font-weight: 550; color: var(--text); line-height: 1.5; }
.mkw-analy-row { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.mkw-analy-label { flex: 0 0 96px; font-size: 11.5px; color: var(--muted); }
.mkw-analy-val { color: var(--text); }
.mkw-analy-counter { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; padding: 12px 14px; background: var(--accent-soft); border-radius: var(--radius-md); }
.mkw-analy-counter svg { width: 15px; height: 15px; color: var(--accent-strong); flex: none; margin-top: 2px; }
.mkw-analy-counter > div { display: flex; flex-direction: column; gap: 2px; }
.mkw-analy-counter .mkw-analy-label { flex: none; color: var(--accent-strong); font-weight: 600; }
.mkw-analy-counter .mkw-analy-val { color: var(--text); line-height: 1.5; }

/* Skeletons */
.mkw-skel { height: 15px; margin: 11px 0; border-radius: var(--radius-sm); background: var(--subtle); }
.mkw-skel-hero { height: 52px; width: 45%; }
.mkw-skel-short { width: 55%; }

@media (max-width: 720px) {
  .mkw-shell { padding: 0 16px var(--space-8); }
  .mkw-hero { padding: var(--space-5); }
  .mkw-hero-top { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .mkw-verdicts, .mkw-riv-grid { grid-template-columns: 1fr; }
  .mkw-riv-add { grid-template-columns: 1fr; }
  .mkw-src-name { flex-basis: 34%; }
}
@media (prefers-reduced-motion: reduce) {
  .mkw-surface.mkw-in > *, .mkw-live { animation: none !important; }
}

/* Le langage est UN : les composants natifs mkw-* vivent plus haut ; le shim
   de compat .mkw-surface .br-* est mort avec la couche br-* (RUN C). */
.mkw-surface .pv2-btn:active { transform: scale(0.97); }

/* ══════════════════════════════════════════════════════════════════════════
   MARKETING · AGENT-NATIF (refonte 2026-07-18)
   L'IA est le cœur de l'écran : la landing est une TOILE CONVERSATIONNELLE.
   Rail secondaire discret · fil de tours (avatar + bulle + carte inline) ·
   composer « Demande-moi » sticky en bas. Tokens uniquement, un seul accent,
   parité light/dark automatique, motion soignée coupée en reduced-motion.
   ══════════════════════════════════════════════════════════════════════════ */

/* Le RAIL : subordonné au fil. La maison « Conversation » à gauche, les 4
   profondeurs en liens sobres à droite. Plus une grille d'onglets co-égaux. */
.mkw-rail { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-8); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.mkw-rail::-webkit-scrollbar { display: none; }
.mkw-rail-home { display: inline-flex; align-items: center; gap: 8px; flex: none; border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--radius-full); padding: 4px 15px 4px 5px; min-height: 36px; font-family: var(--font-ui); font-size: 13px; font-weight: 550; color: var(--text); cursor: pointer; white-space: nowrap; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
[data-theme='dark'] .mkw-rail-home { background: var(--raised); }
.mkw-rail-home:hover { border-color: var(--accent); }
.mkw-rail-home.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.mkw-rail-home .mkw-mark { width: 26px; height: 26px; border-radius: var(--radius-full); }
.mkw-rail-home .mkw-mark svg { width: 15px; height: 15px; }
.mkw-rail-sep { flex: none; width: 1px; height: 18px; background: var(--line-strong); }
.mkw-rail-depth { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.mkw-rail-depth::-webkit-scrollbar { display: none; }
.mkw-rail-link { flex: none; border: 0; background: transparent; padding: 8px 12px; min-height: 36px; border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; white-space: nowrap; transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.mkw-rail-link:hover { color: var(--text); background: var(--subtle); }
.mkw-rail-link.active { color: var(--text); background: var(--subtle); font-weight: 600; }
.mkw-rail-home:focus-visible, .mkw-rail-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* LE FIL : la conversation de l'agent. Le rythme vertical est LE luxe :
   32px entre les tours, la focale du jour (pastille) encore plus dégagée. */
.mkw-feed { display: flex; flex-direction: column; gap: var(--space-8); padding-bottom: var(--space-5); }
.mkw-feed > .mkw-suggest-wrap { margin: var(--space-2) 0; }

/* LA PASTILLE DE SUGGESTION (signature Vercel « Enable Agent to… ») : barre
   pleine largeur arrondie, LISERÉ ANIMÉ (un band accent qui balaye le bord via
   un dégradé masqué en anneau), texte à gauche, chevron dans un cercle à droite.
   Met en avant LA chose la plus importante du jour. Tokens uniquement. */
.mkw-suggest-wrap { position: relative; display: flex; flex-direction: column; gap: 2px; }
.mkw-suggest { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 14px 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: var(--surface); color: var(--text); font-family: var(--font-ui); cursor: pointer; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
[data-theme='dark'] .mkw-suggest { background: var(--raised); }
.mkw-suggest:hover { border-color: var(--accent); }
.mkw-suggest:disabled { cursor: default; opacity: 0.7; }
.mkw-suggest:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Le liseré animé : un anneau de 1.6px, dégradé accent qui balaye en boucle
   (background-position, sans @property : marche partout). Masque composite pour
   ne peindre QUE le bord. */
.mkw-suggest-wrap:not(.is-open) .mkw-suggest::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(105deg, transparent 24%, color-mix(in srgb, var(--accent) 40%, transparent) 40%, var(--accent) 50%, color-mix(in srgb, var(--accent) 40%, transparent) 60%, transparent 76%);
  background-size: 240% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: mkwBorderSweep 3s var(--mkw-io) infinite;
  pointer-events: none;
}
@keyframes mkwBorderSweep { from { background-position: 200% 0; } to { background-position: -100% 0; } }
.mkw-suggest-mark { flex: none; }
.mkw-suggest-mark .mkw-mark { width: 28px; height: 28px; }
.mkw-suggest-mark .mkw-mark svg { width: 15px; height: 15px; }
.mkw-suggest-text { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 500; line-height: 1.45; color: var(--text); }
.mkw-suggest-go { flex: none; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--text); color: var(--surface); transition: transform 200ms var(--mkw-out); }
.mkw-suggest-go svg { width: 15px; height: 15px; }
.mkw-suggest-wrap:not(.is-open) .mkw-suggest:hover .mkw-suggest-go { transform: translateX(2px); }
.mkw-suggest-wrap.is-open .mkw-suggest-go { transform: rotate(90deg); }
.mkw-suggest-wrap.is-open .mkw-suggest { border-radius: var(--radius-xl); }
.mkw-suggest-wrap .mkw-prop-body { margin-top: 6px; padding: 0 4px; }
.mkw-suggest-wrap.is-open .mkw-prop-body { animation: mkwExpand 320ms var(--mkw-spring) both; }
.mkw-suggest-wrap.is-published .mkw-prop-published { padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--surface); }
[data-theme='dark'] .mkw-suggest-wrap.is-published .mkw-prop-published { background: var(--raised); }

/* Un TOUR = avatar (identité de l'agent) + corps (bulle + carte inline).
   Hiérarchie par la couleur : seuls l'accueil et la pastille portent l'accent,
   les autres avatars sont neutres : la couleur veut dire « important ». */
.mkw-turn { display: flex; gap: 12px; align-items: flex-start; }
.mkw-turn-avatar { flex: none; }
.mkw-turn-avatar .mkw-mark { width: 30px; height: 30px; background: var(--subtle); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.mkw-turn-greeting .mkw-turn-avatar .mkw-mark { background: var(--accent-soft); color: var(--accent-strong); box-shadow: none; }
.mkw-turn-avatar .mkw-mark svg { width: 16px; height: 16px; }
.mkw-turn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; max-width: 660px; }

/* La bulle : coin haut-gauche pincé vers l'avatar (langage chat). */
/* L'apercu du texte dans une carte fermee : deux lignes du vrai post, pour
   savoir ce qui partira sans avoir a ouvrir la carte. Le nom du reseau est
   pose en tete de ligne, en mono discret. */
.mkw-prop-preview { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mkw-prop-net { font-family: var(--font-data); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); margin-right: 8px; }
/* Le fil respirait dans 660 px au milieu d'une colonne de 912 : le tiers droit
   restait vide. Les bulles prennent la largeur disponible. */
.mkw-turn-body { max-width: 780px; }
.mkw-bubble { padding: 14px 18px; border: 1px solid var(--line); border-radius: 5px var(--radius-lg) var(--radius-lg) var(--radius-lg); background: var(--surface); }
[data-theme='dark'] .mkw-bubble { background: var(--raised); }
.mkw-turn-text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text); }
.mkw-turn-text strong { font-weight: 600; }
.mkw-turn-quiet .mkw-turn-text { color: var(--muted); }

/* Le tour d'accueil : LA voix du matin, la focale du fil. Elle parle sur la
   toile, sans boîte : plus grande, plus aérée, rien ne la concurrence. */
.mkw-turn-greeting .mkw-bubble { padding: 3px 0 0; border: 0; border-radius: 0; background: transparent; }
[data-theme='dark'] .mkw-turn-greeting .mkw-bubble { background: transparent; }
.mkw-turn-greeting .mkw-voice-text { font-size: 17px; line-height: 1.65; letter-spacing: -0.008em; max-width: 56ch; }
.mkw-turn-time { margin: 0; font-family: var(--font-data); font-size: 11.5px; color: var(--faint); padding-left: 2px; }
.mkw-turn-tag { color: var(--accent-strong); font-weight: 500; }

/* Les tours d'ambiance (radar, veille, résultat) : en retrait, une voix plus
   basse : le fil garde UNE focale (l'accueil + la pastille du jour). */
.mkw-turn-radar .mkw-turn-text, .mkw-turn-veille .mkw-turn-text,
.mkw-turn-results .mkw-turn-text, .mkw-turn-quiet .mkw-turn-text { font-size: 13.5px; color: var(--muted); }
.mkw-turn-radar .mkw-turn-text strong, .mkw-turn-veille .mkw-turn-text strong,
.mkw-turn-results .mkw-turn-text strong { color: var(--text); }

/* Le tour proposition : sa voix + sa base honnête (le déclencheur) + actions. */
.mkw-turn-prop .mkw-prop-why { font-size: 14.5px; font-weight: 550; margin: 0; }
.mkw-turn-prop .mkw-prop-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 0; }
.mkw-chip-inline { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: var(--radius-full); background: var(--subtle); font-family: var(--font-ui); font-size: 11px; font-weight: 500; color: var(--muted); }
.mkw-chip-reason { background: var(--accent-soft); color: var(--accent-strong); }
.mkw-turn-prop.tone-danger .mkw-chip-reason { background: var(--danger-soft); color: var(--danger); }
.mkw-turn-prop.tone-success .mkw-chip-reason { background: var(--success-soft); color: var(--success); }

/* La rangée d'actions inline sous une bulle (cibles >= 40px). */
.mkw-cta { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.mkw-cta .pv2-btn { height: 40px; padding: 0 16px; }

/* Le corps déployé d'une proposition (atelier : réseaux, papier, copier). */
.mkw-prop-body { margin-top: 2px; transform-origin: top center; }
.mkw-turn.is-open .mkw-prop-body { animation: mkwExpand 320ms var(--mkw-spring) both; }
@keyframes mkwExpand { from { opacity: 0; transform: translateY(-8px) scale(0.99); } to { opacity: 1; transform: none; } }

/* La carte inline (naît dans le fil) : radar, veille, résultat. */
.mkw-inline-card { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
[data-theme='dark'] .mkw-inline-card { background: var(--raised); }
.mkw-inline-lead { display: flex; align-items: center; gap: 8px; margin: 0 0 5px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.mkw-inline-lead svg { width: 14px; height: 14px; color: var(--accent-strong); flex: none; }
.mkw-inline-sub { margin: 0 0 var(--space-3); font-size: 13px; color: var(--muted); line-height: 1.5; }
.mkw-inline-fig { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--space-3); }
.mkw-inline-num { font-family: var(--font-data); font-size: 30px; font-weight: 460; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; color: var(--success); line-height: 1; }
.mkw-inline-chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.mkw-inline-chips b { font-family: var(--font-data); font-weight: 500; color: var(--text); }
.mkw-inline-radar .mkw-radar-sum { margin-top: var(--space-3); }

/* Tour publié : la bulle de confirmation (mesure J+14 en cours). */
.mkw-turn.is-published .mkw-prop-published { padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
[data-theme='dark'] .mkw-turn.is-published .mkw-prop-published { background: var(--raised); }

/* « + N de plus » aligné sur le corps des tours (avatar 30 + gap 12). */
.mkw-feed-more { padding-left: 42px; }

/* LE COMPOSER : signature du produit, ANCRE au bas de la vue (style appli de
   chat). Le shell de la conversation remplit la hauteur du viewport et devient
   une COLONNE FLEX : le fil defile AU-DESSUS, le composer reste colle en bas
   sur toute la course du scroll. Fond plein var(--page) (zero glass, DESIGN.md)
   + voile degrade au-dessus : le texte du fil ne transparait jamais dessous. */
.staff-wrap:has(.mkw-composer) { padding-bottom: 0; }
/* La conversation remplit la hauteur : le composer tombe en bas meme quand le
   fil est court (chargement, jour vide), jamais au milieu du fil. On ne
   soustrait que le padding haut de .staff-wrap (le bas est annule ci-dessus). */
.mkw-shell:has(.mkw-composer) { display: flex; flex-direction: column; min-height: calc(100vh - 20px); min-height: calc(100dvh - 20px); padding-bottom: 0; }
.mkw-surface:has(> .mkw-composer) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.mkw-surface:has(> .mkw-composer) > .mkw-feed { flex: 0 1 auto; padding-bottom: var(--space-6); }
.mkw-surface > .mkw-composer { margin-top: auto; }
.mkw-composer { position: sticky; bottom: 0; z-index: 5; margin: var(--space-3) -24px 0; padding: var(--space-3) 24px calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); background: var(--page); }
.mkw-composer::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 44px; background: linear-gradient(to top, var(--page) 14%, transparent); pointer-events: none; }
.mkw-composer .mkw-cmd { margin-top: 0; max-width: 720px; margin-left: auto; margin-right: auto; }
.mkw-composer .mkw-cmd-bar { box-shadow: var(--shadow-sm); }
.mkw-composer .mkw-cmd.is-focused .mkw-cmd-bar { box-shadow: 0 0 0 4px var(--accent-soft), 0 0 0 1px var(--accent); }

/* Le bouton d'envoi repond a la main (leger grossissement au survol, presse au
   clic). Plus de halo perpetuel : sur une page qui doit rester calme, une pulse
   infinie sur le bouton distrait la lecture (audit anim 2026-07-22). */
.mkw-cmd-send:hover:not(:disabled) { opacity: 1; transform: scale(1.06); }
.mkw-cmd-send:active:not(:disabled) { transform: scale(0.92); }

/* Vue de PROFONDEUR : retour explicite vers la conversation. */
.mkw-depth { display: flex; flex-direction: column; gap: var(--space-4); }
.mkw-back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; border: 0; background: transparent; padding: 6px 6px 6px 2px; min-height: 36px; font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; transition: color var(--dur) var(--ease); }
.mkw-back:hover { color: var(--text); }
.mkw-back svg { width: 16px; height: 16px; }
.mkw-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* MOTION : entrée en scène du fil. Chaque tour se lève en fondu + translation
   (expo-out, 480ms), décalé de 70ms : une vague fluide, jamais un bloc qui
   claque. Le composer monte en dernier, avec le voile. Coupée in-view (le
   re-render d'un clic ne rejoue JAMAIS l'entrée) et sous reduced-motion. */
.mkw-surface.mkw-in > .mkw-feed { animation: none; }
.mkw-surface.mkw-in .mkw-feed > .mkw-turn,
.mkw-surface.mkw-in .mkw-feed > .mkw-suggest-wrap,
.mkw-surface.mkw-in .mkw-feed > .mkw-ambient,
.mkw-surface.mkw-in .mkw-feed > .mkw-exchange,
.mkw-surface.mkw-in .mkw-feed > .mkw-feed-more { animation: mkwUp 480ms var(--mkw-out) both; }
.mkw-surface.mkw-in .mkw-feed > *:nth-child(1) { animation-delay: 0ms; }
.mkw-surface.mkw-in .mkw-feed > *:nth-child(2) { animation-delay: 70ms; }
.mkw-surface.mkw-in .mkw-feed > *:nth-child(3) { animation-delay: 140ms; }
.mkw-surface.mkw-in .mkw-feed > *:nth-child(4) { animation-delay: 210ms; }
.mkw-surface.mkw-in .mkw-feed > *:nth-child(n+5) { animation-delay: 270ms; }
.mkw-surface.mkw-in > .mkw-composer { animation: mkwRise 420ms var(--mkw-out) 240ms both; }
@keyframes mkwFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mkwRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── LES TOURS D'AMBIANCE REPLIÉS (fix client : le fil s'ouvre calme) : une
   ligne-résumé secondaire et mutée, alignée sur le corps des tours (42px =
   avatar 30 + gap 12), chevron qui pivote, corps déployé au tap. L'entrée du
   corps ne s'anime qu'au vrai dépliage (classe is-entering posée par le JS). */
.mkw-ambient { display: flex; flex-direction: column; gap: var(--space-3); margin-left: 42px; }
.mkw-fold { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: transparent; font-family: var(--font-ui); color: var(--muted); cursor: pointer; text-align: left; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.mkw-fold:hover { border-color: var(--line-strong); background: var(--subtle); color: var(--text); }
.mkw-fold:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mkw-fold-ico { display: inline-flex; flex: none; color: var(--faint); }
.mkw-fold-ico .pv2-ico { width: 14px; height: 14px; }
.mkw-fold-label { flex: none; font-size: 12.5px; font-weight: 600; }
.mkw-fold-sum { flex: 1; min-width: 0; font-size: 12.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkw-fold-sum strong, .mkw-fold-sum .br-num { color: var(--muted); font-weight: 550; }
.mkw-fold-chev { display: inline-flex; flex: none; margin-left: auto; color: var(--faint); transition: transform 200ms var(--mkw-out); }
.mkw-fold-chev .pv2-ico { width: 14px; height: 14px; }
.mkw-ambient.is-open .mkw-fold-chev { transform: rotate(180deg); }
.mkw-ambient.is-open .mkw-fold { color: var(--text); border-color: var(--line-strong); }
.mkw-fold-body.is-entering { animation: mkwExpand 320ms var(--mkw-spring) both; }

/* ── LE CHAT DE DEMANDE (fix client : demander = un vrai échange). La question
   du gérant est une bulle à DROITE (coin pincé côté droit, teinte accent), la
   réponse de l'agent arrive dessous. L'échange est un groupe serré du fil ;
   l'entrée n'est animée qu'à la naissance (classe is-fresh posée par le JS au
   moment de l'envoi puis retirée : les re-renders ne rejouent rien). */
.mkw-exchange { display: flex; flex-direction: column; gap: var(--space-4); }
.mkw-turn-user { justify-content: flex-end; }
.mkw-turn-user .mkw-turn-body { flex: 0 1 auto; max-width: 540px; margin-left: auto; align-items: flex-end; gap: 6px; }
.mkw-bubble-user { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: var(--radius-lg) 5px var(--radius-lg) var(--radius-lg); }
[data-theme='dark'] .mkw-bubble-user { background: color-mix(in srgb, var(--accent) 16%, var(--raised)); }
.mkw-turn-time-user { padding-left: 0; padding-right: 2px; }
.mkw-thinking { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); }
.mkw-think-dots { display: inline-flex; align-items: center; gap: 4px; }
.mkw-think-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); opacity: 0.3; animation: mkwThink 1.05s var(--mkw-io) infinite; }
.mkw-think-dots i:nth-child(2) { animation-delay: 160ms; }
.mkw-think-dots i:nth-child(3) { animation-delay: 320ms; }
@keyframes mkwThink { 0%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
.mkw-chat-error-text { color: var(--danger); }
.mkw-chat-error-sub { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.mkw-turn-chat-error .mkw-bubble { display: flex; flex-direction: column; gap: 6px; border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.mkw-exchange.is-fresh .mkw-turn-user { animation: mkwUserIn 340ms var(--mkw-out) both; }
.mkw-exchange.is-fresh .mkw-chat-reply { animation: mkwUp 460ms var(--mkw-out) 120ms both; }
@keyframes mkwUserIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }

@media (max-width: 720px) {
  .mkw-turn-body { max-width: 100%; }
  .mkw-feed { gap: var(--space-6); }
  .mkw-head { padding-top: var(--space-6); }
  .mkw-rail { margin-bottom: var(--space-6); }
  .mkw-turn-greeting .mkw-voice-text { font-size: 16px; }
  .mkw-composer { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .mkw-cta .pv2-btn { height: 44px; }
  .mkw-inline-num { font-size: 26px; }
  /* Le rail reste LISIBLE : la maison « Conversation » garde icône + label
     (le rail défile horizontalement), et chaque cible passe à 44px. */
  .mkw-rail { gap: var(--space-2); }
  .mkw-rail-home { min-height: 44px; padding: 4px 16px 4px 6px; }
  .mkw-rail-link { min-height: 44px; }
  /* Ambiance et chat : plein cadre sur mobile. */
  .mkw-ambient { margin-left: 0; }
  .mkw-fold { min-height: 44px; }
  .mkw-turn-user .mkw-turn-body { max-width: 88%; }
}
/* Reduced-motion : couverture TOTALE de la zone mkw (toute animation, y
   compris pseudo-éléments : liseré, sheen, pulses, staggers, shimmers). */
@media (prefers-reduced-motion: reduce) {
  .mkw-shell *, .mkw-shell *::before, .mkw-shell *::after { animation: none !important; }
}

/* ── Emails v4 : séquences personnalisées, réglages, envoi programmé ── */
.pv2-panel-head-actions { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.pv2-seq-pill { display: inline-flex; align-items: center; height: 18px; margin-left: 8px; padding: 0 7px; border-radius: var(--radius-full); font-size: 11px; font-weight: 500; font-style: normal; color: var(--accent-strong); background: var(--accent-soft); vertical-align: 1px; }
.pv2-seq-card.is-editing { grid-column: 1 / -1; }
.pv2-seq-card .mk-auto-stats { display: flex; gap: 8px; align-items: center; }
.pv2-seq-editor { margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--subtle); }
.pv2-seq-vars { font-weight: 400; color: var(--faint); text-transform: none; letter-spacing: 0; margin-left: 6px; }
.pv2-composer-when-row { display: flex; gap: 8px; }
.pv2-composer-when-row select { flex: 0 0 auto; }
.pv2-composer-when-row input[type='datetime-local'] { flex: 1; min-width: 0; height: var(--h-md); font: inherit; font-size: 12.5px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text); }
.pv2-settings-seg { margin-bottom: var(--space-4); border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.pv2-settings-list { display: flex; flex-direction: column; }
.pv2-settings-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.pv2-settings-list .pv2-settings-row:first-child { border-top: 0; }
.pv2-settings-row > div { flex: 1; min-width: 0; }
.pv2-settings-row strong { display: block; font-size: 13px; font-weight: 500; color: var(--text); }
.pv2-settings-row small { display: block; font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv2-settings-list .pv2-composer-actions { margin-top: var(--space-3); justify-content: flex-start; }
.pv2-settings-check label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }

/* ── Page Emails : file + détail (classes extraites des styles inline) ── */
.pv2-cell-sub { display: block; color: var(--faint); margin-top: 1px; }
.pv2-mail-list { max-height: 560px; overflow: auto; padding: 0; }
.pv2-mail-detail { display: grid; gap: 13px; }
.pv2-mail-error { font-size: 12.5px; line-height: 1.45; color: var(--danger); background: var(--danger-soft); border-radius: var(--radius-md); padding: 10px 12px; display: grid; gap: 6px; }
.pv2-mail-error strong { font-size: 13px; }
.pv2-mail-error p { margin: 0; color: var(--text); }
.pv2-mail-error-raw summary { cursor: pointer; color: var(--muted); font-size: 11.5px; }
.pv2-mail-error-raw code { display: block; margin-top: 5px; font-size: 11.5px; color: var(--muted); word-break: break-word; }
.pv2-mail-error-actions { margin-top: 2px; }
.pv2-mail-error-actions small { color: var(--muted); }
.pv2-cell-fail { color: var(--danger); font-weight: 600; }
.pv2-table tbody tr.is-failed td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.pv2-mail-preview-title { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }

/* Bandeau d'alerte échecs : la seule surface qui va CHERCHER la directrice.
   Un mail qui ne part pas ne doit pas attendre qu'on pense à le chercher. */
.pv2-alert { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--danger); border-left-width: 4px; background: var(--danger-soft);
  border-radius: var(--radius-lg); padding: 13px 16px; }
.pv2-alert-main { display: grid; gap: 3px; min-width: 240px; flex: 1 1 320px; }
.pv2-alert strong { font-size: 14px; color: var(--danger); }
.pv2-alert p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text); }
.pv2-alert-other { color: var(--muted) !important; font-size: 11.5px !important; }
.mk-auto-edit-warn { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--muted);
  border-left: 2px solid var(--warning, var(--muted)); padding-left: 8px; }

/* ── Marketing suite v2 : passe Astryx. L'essentiel (hauteurs uniques, voiles,
   tables denses, display 400, segments par graisse) vit dans les blocs
   canoniques ; ici : renforts focus, badge cœur, tons dark par surface. ── */

/* Hauteur unique des contrôles (Astryx 28/32/36) */
.pv2-btn.sm { height: var(--h-sm); padding: 0 10px; font-size: 12px; }
.crm-cell-why .pv2-btn.sm { margin-left: 8px; }
.mk-ask-select, .mk-ask-brief { height: var(--h-md); }

/* Focus ring standard (2px accent, offset 2), renforts explicites contre
   toute surcharge locale. Les champs texte coupent le halo du système. */
.pv2-btn:focus-visible, .crm-seg:focus-visible, .pv2-pipe:focus-visible,
.mk-switch:focus-visible, .pv2-seg button:focus-visible, .crm-stat-link:focus-visible,
.crm-icon-btn:focus-visible, .pv2-chip-btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.mk-ask-select:focus-visible, .mk-ask-brief:focus-visible, .crm-note-input:focus-visible,
.crm-composer-subject:focus-visible, .crm-composer-body:focus-visible,
.mk-week-range input[type='date']:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--line-strong); box-shadow: none;
}

/* Badge cœur aligné sur la pilule Astryx (H20) côté staff */
.badge { height: 20px; padding: 0 10px; line-height: 1; }

/* Cards majeures en radius container */
.mk-auto { border-radius: var(--radius-xl); }

/* Dark : re-sélection de ton par surface (Astryx), les cards se détachent du
   fond par un ton raised, pas seulement par la bordure. */
[data-theme='dark'] .pv2-stat,
[data-theme='dark'] .pv2-panel:not(.crm-fiche-panel),
[data-theme='dark'] .mk-idea,
[data-theme='dark'] .mk-auto,
[data-theme='dark'] .mk-week-day,
[data-theme='dark'] .mk-learned { background: var(--raised); }
[data-theme='dark'] .pv2-table th { background: var(--raised); }
[data-theme='dark'] .crm-roi { background: color-mix(in srgb, var(--success) 8%, var(--raised)); }

/* ── ROI relances (segment À relancer) ── */
.crm-roi { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--success) 6%, var(--surface)); }
.crm-roi-figures { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.crm-roi-figures strong { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 400; color: var(--text); }
.crm-roi-sep { width: 1px; height: 14px; background: var(--line-strong); }

/* ── Composer de relance inline ── */
.crm-relance-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.crm-composer { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.crm-composer-subject, .crm-composer-body { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--subtle); color: var(--text); font-family: inherit; font-size: 13px; padding: 8px 10px; }
.crm-composer-body { resize: vertical; line-height: 1.5; }
.crm-composer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.crm-composer-actions .crm-muted { margin-right: auto; font-size: 12px; }

/* ── Notes client ── */
.crm-note-input { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--subtle); color: var(--text); font-family: inherit; font-size: 13px; padding: 8px 10px; resize: vertical; line-height: 1.5; }
.crm-note-input:disabled { opacity: 0.55; }
.crm-note-legacy { margin-top: 8px; font-size: 12px; }

/* ── Séquences automatiques (page Emails) ── */
.mk-auto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-4); }
/* .mk-auto-star supprimee : deux etoiles AMBRE decoraient « Anniversaire J-30 »
   et « Reactivation dormants ». Leur seul sens vivait dans un title=, donc
   invisible, et elles depensaient l'ambre que cette page reserve a l'ATTENTE.
   Couleur = sens, sinon rien : le markup et la regle partent ensemble. */
.mk-auto { display: flex; flex-direction: column; gap: 8px; padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); }
.mk-auto.is-on { border-color: color-mix(in srgb, var(--success) 45%, var(--line)); }
.mk-auto-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mk-auto-head strong { font-size: 13.5px; font-weight: 600; }
.mk-auto-desc { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.mk-auto-preview summary { font-size: 11.5px; color: var(--faint); cursor: pointer; }
.mk-auto-preview p { margin: 6px 0 0; font-size: 12px; color: var(--muted); font-style: italic; }
.mk-auto-stats { margin-top: auto; padding-top: 4px; font-size: 11.5px; color: var(--faint); }
.mk-auto-fail { color: var(--danger); }
.mk-switch { position: relative; width: 40px; height: 22px; border-radius: var(--radius-full); border: 1px solid var(--line-strong); background: var(--subtle); cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); flex-shrink: 0; }
.mk-switch span { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--muted); transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.mk-switch.is-on { background: var(--success); border-color: var(--success); }
.mk-switch.is-on span { transform: translateX(18px); background: var(--surface); }
.mk-switch:disabled { opacity: 0.6; cursor: default; }

/* ── Demande une idée ── */
.mk-ask-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mk-ask-label { font-size: 13px; font-weight: 600; }
.mk-ask-select { width: auto; flex: 0 0 auto; min-width: 170px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font-size: 13px; padding: 0 10px; }
.mk-ask-brief { flex: 1; min-width: 220px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--subtle); color: var(--text); font-size: 13px; padding: 0 10px; }

/* ── Ta semaine ── */
.mk-week { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.mk-week > .mk-week-day { flex: 1 0 92px; max-width: 140px; }
.mk-week-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-week-presets { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.mk-week-presets .pv2-btn { height: calc(var(--h-sm) - 2px); padding: 0 10px; font-size: 12px; border: 0; border-radius: 0; background: transparent; }
.mk-week-presets .pv2-btn + .pv2-btn { border-left: 1px solid var(--line); }
.mk-week-presets .pv2-btn:focus-visible { outline-offset: -2px; }
.mk-week-range input[type='date'] { width: 136px; height: var(--h-sm); padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font-size: 12.5px; font-family: inherit; font-variant-numeric: tabular-nums; }
.mk-week-range span { color: var(--faint); font-size: 12px; }
.mk-week-day { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); text-align: center; min-width: 0; }
.mk-week-day.has-badge { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.mk-week-dow { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: capitalize; }
.mk-week-temp { font-size: 15px; font-weight: 400; color: var(--text); }
.mk-week-badge { font-size: 10.5px; font-weight: 500; color: var(--accent-strong); background: var(--accent-soft); border-radius: var(--radius-full); padding: 1px 7px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Idée posée sur un jour : dot accent (plus d'emoji dans le chrome). */
.mk-week-idea { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }
.mk-week-rain { display: inline-flex; margin-left: 4px; color: var(--info); vertical-align: -1px; }
.mk-week-rain .pv2-ico { width: 11px; height: 11px; }

/* ── Emails v3 : composer universel + analyse d'un reçu ── */
.pv2-composer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pv2-composer-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pv2-composer-field > span { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pv2-composer-field input,
.pv2-composer-field select,
.pv2-composer-field textarea { width: 100%; font-family: inherit; font-size: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 0 10px; height: var(--h-md); }
.pv2-composer-field textarea { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.5; }
.pv2-composer-field input:focus-visible,
.pv2-composer-field select:focus-visible,
.pv2-composer-field textarea:focus-visible,
.pv2-inbox-reply-subject:focus-visible,
.pv2-inbox-reply-body:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--line-strong); box-shadow: none; }
.pv2-composer-wide { grid-column: 1 / -1; }
.pv2-composer-tips { grid-column: 1 / -1; margin: 0; padding: 8px 12px 8px 26px; font-size: 12px; color: var(--muted); background: var(--subtle); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 3px; }
.pv2-composer-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pv2-composer-spacer { flex: 1; }
@media (max-width: 900px) { .pv2-composer-grid { grid-template-columns: 1fr; } }

/* ── Emails v3 : boîte de réception (analyse + réponse proposée) ── */
.pv2-inbox-intent { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--radius-full); font-size: 12px; font-weight: 500; background: var(--accent-soft); color: var(--accent-strong); white-space: nowrap; }
.pv2-inbox-urgent { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--radius-full); font-size: 12px; font-weight: 500; background: var(--warning-soft); color: var(--warning); white-space: nowrap; }
.pv2-inbox-summary { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; padding: 10px 12px; background: var(--subtle); border-radius: var(--radius-md); }
.pv2-inbox-summary p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text); flex: 1 1 100%; }
.pv2-inbox-reply { display: flex; flex-direction: column; gap: 8px; }
.pv2-inbox-reply-subject { width: 100%; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 0 10px; height: var(--h-md); }
.pv2-inbox-reply-body { width: 100%; font-family: inherit; font-size: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 8px 10px; resize: vertical; line-height: 1.5; }

/* ── Emails v3 : éditeur de séquence (tout modifiable) ── */
.mk-auto-mod { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-left: 8px; border-radius: var(--radius-full); font-size: 11px; font-weight: 500; background: var(--accent-soft); color: var(--accent-strong); vertical-align: 1px; }
.mk-auto-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; }
.mk-auto-foot .mk-auto-stats { margin-top: 0; padding-top: 0; }
.mk-auto-edit-btn { flex-shrink: 0; }
/* La carte en édition prend toute la rangée : les cartes sœurs gardent leur
   hauteur naturelle et l'éditeur respire. */
.mk-auto.is-editing { grid-column: 1 / -1; }
.mk-auto-edit { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.mk-auto.is-editing .mk-auto-edit { max-width: 640px; }
.mk-auto-edit-field { display: flex; flex-direction: column; gap: 4px; }
.mk-auto-edit-field > span { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.mk-auto-edit-field input,
.mk-auto-edit-field select,
.mk-auto-edit-field textarea { width: 100%; font-family: inherit; font-size: 12.5px; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 0 9px; height: var(--h-md); }
.mk-auto-edit-field textarea { height: auto; padding: 8px 9px; resize: vertical; line-height: 1.5; }
.mk-auto-edit-field input:focus-visible,
.mk-auto-edit-field select:focus-visible,
.mk-auto-edit-field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--line-strong); box-shadow: none; }
.mk-auto-edit-vars { margin: 0; font-size: 11.5px; color: var(--faint); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mk-auto-edit-vars code { font-family: var(--font-data); font-size: 11px; background: var(--subtle); border-radius: var(--radius-sm); padding: 1px 5px; color: var(--muted); }
.mk-auto-edit-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

/* ── Archive des idées + Refaire ── */
.mk-archive { margin-top: 12px; }
.mk-archive summary { font-size: 12px; color: var(--faint); cursor: pointer; }
.mk-archive-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mk-archive-list li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.mk-archive-list li small { color: var(--faint); }
.mk-archive-status { flex-shrink: 0; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--radius-full); font-size: 12px; font-weight: 500; background: var(--subtle); color: var(--muted); }
.mk-archive-status.st-validated { background: var(--success-soft); color: var(--success); }
.mk-archive-status.st-refuted { background: var(--danger-soft); color: var(--danger); }
.mk-archive-status.st-applied { background: var(--accent-soft); color: var(--accent-strong); }
.mk-learned .mk-redo { margin-left: auto; flex-shrink: 0; }

/* ── LE PLAN : les 8 prochaines semaines (Phase 4) ────────────────────────────
   DESIGN.md : tokens uniquement, hairlines, zero gradient, zero glow, zero
   ombre douce. La hierarchie se fait par le poids et l'espace, pas par l'effet.
   La confiance de chaque semaine est PORTEE PAR LA COULEUR DU LISERE, jamais
   par une pastille criarde : une semaine « rien de date » doit se lire comme
   une information calme, pas comme une alerte. */
.mkw-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.mkw-plan-week { padding: var(--space-4); border: 1px solid var(--line); border-left: 2px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); }
[data-theme='dark'] .mkw-plan-week { background: var(--raised); }
.mkw-plan-week.tone-good { border-left-color: var(--success); }
.mkw-plan-week.tone-info { border-left-color: var(--accent-strong); }
.mkw-plan-week.tone-muted { border-left-color: var(--line-strong); }

.mkw-plan-week-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.mkw-plan-when { display: flex; align-items: baseline; gap: 6px; }
.mkw-plan-when strong { font-family: var(--font-data); font-size: 13px; color: var(--text); }
.mkw-plan-when small { font-size: 11.5px; color: var(--muted); }
.mkw-plan-conf { font-size: 11px; color: var(--muted); white-space: nowrap; }

.mkw-plan-goal { margin: var(--space-3) 0 0; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--text); }
.mkw-plan-why { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.mkw-plan-actions { margin: var(--space-3) 0 0; padding-left: 16px; display: grid; gap: 4px; }
.mkw-plan-actions li { font-size: 12.5px; color: var(--text); line-height: 1.5; }

@media (max-width: 640px) { .mkw-plan-grid { grid-template-columns: 1fr; } }

/* ============================================================================
   21. PAGE EMAILS & RELANCES : discipline de console (monochrome + sens)
   ----------------------------------------------------------------------------
   POURQUOI CETTE SECTION A CHANGE DE NATURE
   Une passe precedente avait peint cette page aux couleurs de Fun Galaxy
   (magenta et turquoise de marque) : interrupteurs, bouton primaire,
   filtres, filets de section, titres en capitales, boutons en pilule.
   C'est une faute structurelle, pas une affaire de gout. Pinlane est un
   PRODUIT vendu a plusieurs centres de loisirs : la console est l'interface du
   produit, les mails sont la voix du client. Habiller la console de la charte
   d'un seul locataire rend le produit invendable au suivant, et fait lire une
   couleur de marque comme une couleur d'etat. La charte Fun Galaxy reste ou
   elle a un sens : dans les mails (lib/ops-communications.js) et sur le
   parcours client (pinlane-client.css). Ici, plus une seule occurrence.

   LA REGLE QUI REMPLACE LA MARQUE : monochrome par defaut, couleur par
   exception. Le fond est noir, le texte blanc casse, tout le reste est une
   nuance de gris. Une couleur n'apparait que si elle PORTE UN SENS :
     --success (vert)  = « c'est parti »        (statut Envoye)
     --danger  (rouge) = « ce n'est pas parti » (statut Echec)
     --warning (ambre) = « ca attend »
     --accent  (bleu)  = information / focus clavier
   Rien d'autre n'est colore. Aucun degrade, aucune lueur, aucune ombre : les
   surfaces se separent par un filet de 1px et un fond a peine plus clair.

   L'ETAT ACTIF N'EST PAS UN STATUT (le defaut n°1 de la capture)
   Les interrupteurs de sequence etaient peints en --success. Or :
     --success  = « cette chose a REUSSI »
     etat actif = « cette sequence TOURNE » (elle peut tres bien echouer)
   Les confondre fait lire un interrupteur comme un statut, et rend le vert de
   « Envoye » invisible puisqu'il est partout. L'etat actif se dit donc en
   BLANC (--text), comme un bouton primaire inverse : c'est la valeur la plus
   forte de l'ecran, et elle ne ment sur rien.

   HIERARCHIE DES ACTIONS : un seul primaire par surface. Le primaire est le
   bouton inverse (fond --text, texte --surface) deja defini par le systeme
   (.pv2-btn.primary) : la surcharge magenta est supprimee, rien a ajouter.
   Le secondaire est un filet 1px sur fond de surface, le tertiaire est un
   .ghost sans filet. Dans la barre de page : Nouveau message (primaire),
   Coller un mail recu (secondaire), Actualiser et Reglages (ghost).

   CONTRASTES MESURES (WCAG 2.2), RECALCULES sur le FOND REEL de chaque badge.
   L'ancien tableau ici mesurait tous les badges contre --surface : c'est le
   mauvais fond. Un .pv2-chip.blue ne se pose pas sur --surface mais sur
   --info-soft, et c'est precisement la que le seuil tombait. Le badge fait
   11.5px, donc texte NORMAL au sens WCAG : seuil 4.5:1, pas 3:1.
     CLAIR    .pv2-chip.green   #0f7b3c / #e6f4ea ......  4.72:1  AA
              .pv2-chip.red     #cb2a2f / #fdecec ......  4.70:1  AA
              .pv2-chip.amber   #a35200 / #fff3e0 ......  5.09:1  AA
              .pv2-chip.blue    #0070f3 / #e8f1fd ......  4.00:1  ECHEC
              .pv2-chip.blue    #0761d1 / #e8f1fd ......  5.06:1  AA  <- corrige
              .pv2-chip neutre  #666666 / #ffffff ......  5.74:1  AA
              .pv2-chip.is-off  #0a0a0a / #ffffff ...... 19.80:1  AAA
              .pv2-chip.is-live #666666 / #ffffff ......  5.74:1  AA
     SOMBRE   .pv2-chip.green   #3dd68c / #0e2517 ......  8.64:1  AAA
              .pv2-chip.red     #f75555 / #2c1213 ......  5.31:1  AA
              .pv2-chip.amber   #f5a623 / #2a1e05 ......  8.05:1  AAA
              .pv2-chip.blue    #3291ff / #0d2137 ......  5.14:1  AA
              .pv2-chip.blue    #52a8ff / #0d2137 ......  6.52:1  AA  <- corrige
              .pv2-chip neutre  #a1a1a1 / #0a0a0a ......  7.66:1  AAA
              .pv2-chip.is-off  #ededed / #0a0a0a ...... 16.91:1  AAA
              .pv2-chip.is-live #a1a1a1 / #0a0a0a ......  7.66:1  AAA
   Le correctif est le token --info-strong, declare pour exactement ce cas
   (texte info sur fond -soft). Il vaut --accent-strong dans les deux themes,
   donc la teinte ne bouge pas, seule la luminosite est ramenee au seuil.
     Le theme clair est le meme systeme inverse : primaire = fond #0a0a0a et
     texte blanc, etat actif = #0a0a0a. Aucune regle n'est reservee au sombre.

   CE QUI EST GARDE de la passe precedente : la STRUCTURE (inventaire des mails
   .mail-inv-*, ligne de campagne compacte, horodatage de barre). Le JS en
   depend et elle repond a « tout doit etre pilotable ». Seules les COULEURS de
   marque partent.
   ========================================================================== */

/* --- 21.1 Formes : rayons petits et constants, jamais de pilule ------------
   6px pour les controles, 8px pour les cartes, 12px pour les panneaux. La
   pilule (--radius-full) est la forme de la charte CLIENT : elle reste dans
   les mails et sur le parcours public, elle n'entre pas dans la console. */
#staffEmailsPage .pv2-panel,
#staffCockpitPage .pv2-panel { border-radius: var(--radius-lg); }
#staffEmailsPage .mk-auto { border-radius: var(--radius-md); }
#staffEmailsPage .pv2-btn,
#staffCockpitPage .pv2-btn { border-radius: var(--radius-sm); }
#staffEmailsPage .pv2-search { border-radius: var(--radius-sm); }

/* --- 21.2 Typographie : la hierarchie vient de la taille et de la graisse ---
   Aucune capitale decorative. Les capitales avaient un effet pervers mesure
   sur la capture : le h2 du panneau de detail porte l'OBJET DU MAIL, c'est-a-
   dire du texte saisi par un humain, et sortait en « VOTRE RESERVATION EST
   CONFIRMEE ». On criait une donnee au lieu de titrer une section. */
#staffEmailsPage .pv2-bar h1,
#staffCockpitPage .pv2-bar h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; }
#staffEmailsPage .pv2-panel-head h2,
#staffEmailsPage .pv2-list-head h2,
#staffCockpitPage .pv2-panel-head h2 { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; text-transform: none; }
#staffEmailsPage .pv2-mail-preview-title,
#staffEmailsPage .mk-auto-edit-field > span { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--muted); }
/* Tout compteur en chiffres tabulaires : une colonne de nombres qui ne danse
   pas quand la valeur change. */
#staffEmailsPage .pv2-pipe-value,
#staffEmailsPage .mk-auto-stats,
#staffEmailsPage .pv2-table td.num { font-variant-numeric: tabular-nums; }

/* --- 21.3 Etat actif = blanc, jamais vert ---------------------------------
   .mk-switch vit sur la page Emails (sequences) et sur le cockpit fondateur
   (matrice sequences par centre) : etat actif = blanc, le vert reste reserve
   aux statuts (succes), pas aux etats. */
#staffEmailsPage .mk-switch.is-on,
#staffCockpitPage .mk-switch.is-on { background: var(--text); border-color: var(--text); }
#staffEmailsPage .mk-switch.is-on span,
#staffCockpitPage .mk-switch.is-on span { background: var(--surface); }
#staffEmailsPage .mk-switch:not(.is-on),
#staffCockpitPage .mk-switch:not(.is-on) { background: transparent; border-color: var(--line-strong); }
#staffEmailsPage .mk-switch:not(.is-on) span,
#staffCockpitPage .mk-switch:not(.is-on) span { background: var(--faint); }
/* La carte d'une sequence active ne se repeint pas non plus en vert : elle
   remonte d'un cran de filet, c'est tout ce qu'il faut pour la distinguer. */
#staffEmailsPage .mk-auto.is-on { border-color: var(--line-strong); }

/* --- 21.4 Badges : petits, desatures, filet 1px ---------------------------
   Un badge n'est jamais un pave de couleur vive. Fond tres sombre teinte,
   texte de la meme famille, filet de la meme famille. Le neutre n'a pas de
   fond du tout : c'est une etiquette, pas un statut. */
#staffEmailsPage .pv2-chip {
  height: 20px; padding: 0 7px; border-radius: var(--radius-sm);
  font-size: 11.5px; font-weight: 500;
  background: transparent; border: 1px solid var(--line-strong); color: var(--muted);
}
#staffEmailsPage .pv2-chip.green { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, transparent); color: var(--success); }
#staffEmailsPage .pv2-chip.red { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); }
#staffEmailsPage .pv2-chip.amber { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, transparent); color: var(--warning); }
/* --info-strong (= --accent-strong) et pas --info : sur --info-soft en theme
   CLAIR, --info donne 4.00:1 a 11.5px, sous le seuil AA de 4.5. Meme teinte,
   luminosite ramenee au seuil (5.06:1 clair, 6.52:1 sombre). */
#staffEmailsPage .pv2-chip.blue { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 30%, transparent); color: var(--info-strong); }
/* ETAT d'une ligne d'inventaire. HIERARCHIE INVERSEE, corrigee : les onze
   « Active » sortaient en blanc gras et l'unique « Coupee » en gris efface.
   L'ecran criait la normalite et chuchotait l'exception. C'est l'exception qui
   demande une decision, c'est donc elle qui prend le contraste et le point
   plein ; l'etat attendu redevient discret. Ni vert ni rouge : ce n'est pas un
   statut d'envoi. Le libelle dit l'etat en toutes lettres et la forme du point
   le double (WCAG 1.4.1 : jamais la couleur seule). */
#staffEmailsPage .pv2-chip.is-live { color: var(--muted); border-color: var(--line); font-weight: 400; }
#staffEmailsPage .pv2-chip.is-off { color: var(--text); border-color: var(--line-strong); font-weight: 600; }
#staffEmailsPage .pv2-chip.is-live::before,
#staffEmailsPage .pv2-chip.is-off::before {
  content: ''; width: 5px; height: 5px; border-radius: var(--radius-full);
  background: currentColor; flex: none;
}
#staffEmailsPage .pv2-chip.is-live::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
/* La LIGNE de l'exception se signale aussi, sinon il faut la chercher parmi
   douze : un filet a gauche, rien de plus. */
#staffEmailsPage .mail-inv-table tr.is-exception td:first-child { box-shadow: inset 2px 0 0 var(--text); }
#staffEmailsPage .mail-inv-table tr.is-exception strong { color: var(--text); }

/* « modifie » sur une carte de sequence : information de service, pas statut. */
#staffEmailsPage .mk-auto-mod {
  border-radius: var(--radius-sm); background: var(--subtle); color: var(--muted);
  border: 1px solid var(--line); font-size: 11px;
}

/* --- 21.5 Actions : trois poids, un seul primaire -------------------------
   .pv2-btn.primary reste celui du systeme (fond --text, texte --surface) :
   c'est deja la signature inversee, la surcharge de marque est supprimee. */
#staffEmailsPage .pv2-btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
/* Survol : voir A.2 (bloc MOUVEMENT). Toutes les regles de survol de cette page vivent
   derriere @media (hover: hover) and (pointer: fine), sans exception. */

/* --- 21.6 Filtres de file : un segmente, pas six tuiles -------------------
   Six tuiles encadrees de meme poids se lisaient comme six indicateurs a
   comparer, alors que ce sont des FILTRES : on clique dessus pour restreindre
   la liste. Rendus en controle segmente (un seul filet autour, des cloisons
   1px), ils descendent d'environ 120 px a 42 px, ne pesent plus que ce qu'ils
   valent, et la file remonte d'autant. Aucun n'est supprime : chacun est le
   seul chemin vers son filtre, « Tout » compris. */
#staffEmailsPage .pv2-pipeline {
  display: flex; flex-wrap: nowrap; gap: 0;
  grid-template-columns: none;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); overflow-x: auto; scrollbar-width: thin;
}
#staffEmailsPage .pv2-pipe {
  flex: 1 1 0; min-width: max-content;
  display: flex; align-items: baseline; gap: 7px;
  padding: 10px 14px; width: auto; text-align: left;
  border: 0; border-right: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--muted);
  font: inherit; font-size: 12.5px; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
#staffEmailsPage .pv2-pipe:last-child { border-right: 0; }
#staffEmailsPage .pv2-pipe .pv2-pipe-value {
  margin: 0; font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: 13.5px; font-weight: 500; color: var(--muted);
}
#staffEmailsPage .pv2-pipe .pv2-pipe-label { margin: 0; font-size: 12.5px; font-weight: 500; color: var(--muted); }
#staffEmailsPage .pv2-pipe .pv2-pipe-hint { margin: 0; font-size: 11.5px; color: var(--faint); }
/* Le survol des segments est DELIBEREMENT absent ici : ces segments sont
   defilables au doigt (overflow-x), et un :hover pose hors media query reste
   colle apres le toucher. Il vit en A.2, derriere (pointer: fine). */
#staffEmailsPage .pv2-pipe.active { background: var(--subtle); border-color: var(--line); }
#staffEmailsPage .pv2-pipe.active .pv2-pipe-label,
#staffEmailsPage .pv2-pipe.active .pv2-pipe-value { color: var(--text); }
/* Le halo de focus se pose A L'INTERIEUR du segmente : pose dehors, il etait
   rogne par l'overflow du conteneur et devenait invisible au clavier. */
#staffEmailsPage .pv2-pipe:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

/* --- 21.7 Echecs : la seule surface qui va CHERCHER la directrice ---------
   Un aplat rouge plein largeur criait plus fort que le contenu qu'il annonce.
   Filet rouge desature de 1px sur fond de surface : la couleur reste portee
   par le titre et la cause, ou elle veut dire quelque chose. */
#staffEmailsPage .pv2-alert {
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line));
  border-left-width: 2px; border-left-color: var(--danger);
  background: var(--surface); border-radius: var(--radius-md); padding: 12px 14px;
}
#staffEmailsPage .pv2-alert strong { font-size: 13.5px; font-weight: 600; color: var(--danger); }
#staffEmailsPage .pv2-alert p { color: var(--muted); }
#staffEmailsPage .pv2-alert-cause b { color: var(--text); font-weight: 600; }
#staffEmailsPage .pv2-mail-error {
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line));
  border-radius: var(--radius-sm);
}
#staffEmailsPage .pv2-mail-error p { color: var(--muted); }

/* --- 21.8 Tableaux : filets 1px discrets, l'important en blanc ------------ */
#staffEmailsPage .pv2-table th { font-size: 11.5px; font-weight: 500; color: var(--faint); }
#staffEmailsPage .pv2-table tbody tr.selected { background: var(--subtle); box-shadow: inset 2px 0 0 var(--text); }
#staffEmailsPage .pv2-list-head { border-bottom: 1px solid var(--line); }

/* --- 21.9 Inventaire des mails -------------------------------------------
   « Tout doit etre gerable et pilotable depuis la categorie » : encore faut-il
   savoir ce qui existe. Cette table est le miroir des branches reelles
   d'envoi ; ce qui ne se pilote pas le DIT ici au lieu d'etre absent. */
.mail-inv-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mail-inv-table th {
  text-align: left; padding: 8px 10px; font-size: 11.5px; font-weight: 500;
  text-transform: none; letter-spacing: 0; color: var(--faint);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.mail-inv-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--muted); }
.mail-inv-table tr:last-child td { border-bottom: 0; }
.mail-inv-table strong { font-size: 13px; font-weight: 600; color: var(--text); }
.mail-inv-table .pv2-cell-sub { display: block; margin-top: 3px; max-width: 46ch; line-height: 1.45; color: var(--faint); }
.mail-inv-when { color: var(--muted); max-width: 30ch; line-height: 1.45; }
.mail-inv-pilot { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.mail-inv-pilot.is-fixed { color: var(--faint); }
.mail-inv-note {
  margin: var(--space-3) 0 0; font-size: 12px; line-height: 1.55; color: var(--faint);
  border-left: 1px solid var(--line-strong); padding-left: 10px; max-width: 78ch;
}

/* --- 21.10 Campagnes vides : une ligne, pas un bloc ------------------------
   Zero campagne occupait une section pleine hauteur pour dire « il n'y a
   rien ». Un etat vide est une ligne discrete. */
.pv2-camp-slim-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap; padding: 12px var(--space-4);
}
.pv2-camp-slim-row strong { font-size: 13px; font-weight: 600; color: var(--text); }
.pv2-camp-slim-row span { margin-left: 10px; font-size: 12.5px; color: var(--muted); }
/* Meme doctrine pour la file vide : deux lignes centrees, pas un pave. */
#staffEmailsPage .pv2-mail-list .pv2-empty { padding: var(--space-6) var(--space-4); }

/* --- 21.11 Fraicheur des donnees : information de service, pas un titre ---- */
.pv2-bar-stamp { color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- 21.12 Couleur decorative : il n'y en a pas -----------------------------
   Un point VERT precedait le fil d'Ariane. Il ne signifiait rien (ni un
   statut, ni une connexion : juste un point), et il depensait le vert que
   cette page reserve a « c'est parti ». A force de vert decoratif, le vert de
   « Envoye » dans la file juste en dessous ne se voit plus. */
#staffEmailsPage .pv2-live { display: none; }

/* Perimetre des compteurs, ecrit a cote des compteurs (voir F8 dans le JS). */
.pv2-pipeline-scope { margin: 6px 2px 0; font-size: 11.5px; line-height: 1.5; color: var(--faint); }
.pv2-alert-scope { font-weight: 400; color: var(--muted); }

/* ============================================================================
   21.13 MOUVEMENT
   Deux familles, jamais melangees.

   FAMILLE A - IMMUNISEE. Transitions pilotees par un ETAT (:hover, :active,
   :focus-visible, .active, .is-on). Elles survivent aux reconstructions
   innerHTML de la page parce qu'elles ne dependent pas de l'apparition du
   noeud. C'est le coeur du travail : c'est ce qui fait que l'interface repond.

   FAMILLE B - MONTAGE REEL. Un element qui apparait vraiment sur action. Ici
   il faut une garde de premiere apparition (classe .pv2-mount posee par
   markEmailsMounts()), sinon l'entree rejoue a chaque frappe clavier.

   Regles tenues partout dans ce bloc (verifiees par mesure, pas affirmees) :
     - RIEN qui declenche un layout : aucune transition sur height, width,
       margin, top, left. Le releve exhaustif des proprietes animees de cette
       section donne exactement transform, opacity, background-color,
       border-color et color. Les trois dernieres sont des changements de
       peinture, sans reflow ; ecrire ici « transform et opacity UNIQUEMENT »
       serait faux, et c'est ce que disait la version precedente ;
     - jamais d'ease-in : ca demarre lentement pile quand l'oeil regarde ;
     - jamais depuis scale(0) : rien ne surgit du neant. Cette regle etait
       AFFIRMEE et FAUSSE : le rail du segmente partait bel et bien de
       scaleX(0) au bord gauche (largeur de depart mesuree a t+30 ms : 4.62 px
       puis 0.98 px, contre 179 et 183 px attendus). Ce n'etait pas une faute
       de CSS mais un observateur perime qui ecrasait la memoire hors DOM ;
       corrige dans positionPipeRail(), et desormais MESURE par le gate ;
     - la sortie est plus courte que l'entree (150 ms contre 240) ;
     - transition ciblee, proprietes nommees, jamais `transition: all` ;
     - survol derriere (hover: hover) and (pointer: fine) : au doigt, :hover se
       declenche au toucher et laisse des etats colles. Regle AFFIRMEE et
       FAUSSE elle aussi : 3 des 5 regles de survol de la page etaient dehors.
       Elles sont toutes regroupees en A.2, et le gate compte le rapport
       gardees/total dans le CSSOM (2/5 avant, 5/5 apres) ;
     - AUCUN stagger n'est ajoute : un stagger qui rejoue est le defaut le plus
       visible de tous, et rien ici ne peut garantir qu'il ne rejouerait pas.
   ========================================================================== */

/* --- A.1 Tout ce qui se presse repond. 160 ms, vu des dizaines de fois par
   jour : c'est le detail qui fait le plus pour la sensation de qualite, et
   c'est aussi celui qui devient une LENTEUR s'il dure trop. --- */
#staffEmailsPage .pv2-btn,
#staffEmailsPage .pv2-pipe,
#staffEmailsPage .mk-switch,
#staffEmailsPage .mk-auto-preview summary {
  transition: background-color var(--dur-fast) var(--ease-out-strong),
              border-color var(--dur-fast) var(--ease-out-strong),
              color var(--dur-fast) var(--ease-out-strong),
              opacity var(--dur-fast) var(--ease-out-strong),
              transform var(--dur-press) var(--ease-out-strong);
}
#staffEmailsPage .pv2-btn:active:not(:disabled) { transform: scale(0.97); }
/* Un segment de filtre est large : a 0.97 il se deforme. 0.985 suffit a se
   sentir sous le doigt sans que la bande entiere bouge. */
#staffEmailsPage .pv2-pipe:active { transform: scale(0.985); }
#staffEmailsPage .mk-switch:active:not(:disabled) { transform: scale(0.94); }

/* --- A.2 Survol au pointeur fin uniquement : sur tactile, :hover se declenche
   au toucher et laisse l'etat allume apres le depart du doigt.

   PERIMETRE EXACT, parce que deux versions de ce commentaire ont deja affirme
   faux : ce bloc regroupe les regles de survol AJOUTEES POUR CETTE PAGE, plus
   .pv2-pipe:hover qui etait preexistant et qui est le cas le plus couteux (les
   segments sont defilables au doigt via overflow-x : l'etat de survol restait
   colle sur le segment touche pendant le defilement, en plus de l'etat .active
   du vrai filtre, donc deux segments avaient l'air selectionnes ensemble).
   CE N'EST PAS le seul endroit de la page ou un :hover est declare, et le
   pretendre serait faux : une dizaine de regles de survol PREEXISTANTES portent
   sur des composants pv2 partages (.pv2-btn:hover, .pv2-table tbody tr:hover,
   .pv2-chip-btn:hover...) et s'appliquent donc aussi ici. Elles sont laissees
   en place a dessein : elles servent TOUTES les pages de la console, les
   deplacer depuis un chantier qui ne concerne que la page Emails changerait le
   comportement d'ecrans non testes par ce lot. A traiter comme un chantier
   propre, a l'echelle de la console. --- */
@media (hover: hover) and (pointer: fine) {
  /* Mesure : --line-strong ne DIT RIEN au survol, parce que la carte d'une
     sequence active porte deja ce filet (regle 21.3). Le survol monte donc un
     cran au-dessus, sinon il n'existe que sur les cartes coupees. */
  #staffEmailsPage .mk-auto:hover { border-color: color-mix(in srgb, var(--text) 32%, var(--line)); }
  #staffEmailsPage .pv2-table tbody tr:hover .pv2-cell-sub { color: var(--muted); }
  #staffEmailsPage .pv2-btn.ghost:hover { color: var(--text); border-color: var(--line); }
  /* border-color repris de l'ancienne regle globale (ex-ligne 5363) : en la
     deplacant ici il ne faut pas perdre ce qu'elle donnait. */
  #staffEmailsPage .pv2-pipe:hover { background: var(--subtle); border-color: var(--line-strong); }
  #staffEmailsPage .pv2-pipe:hover .pv2-pipe-label,
  #staffEmailsPage .pv2-pipe:hover .pv2-pipe-value { color: var(--text); }
}
#staffEmailsPage .mk-auto { transition: border-color var(--dur) var(--ease-out-strong); }
#staffEmailsPage .pv2-table tbody tr {
  transition: background-color var(--dur-fast) var(--ease-out-strong),
              box-shadow var(--dur-fast) var(--ease-out-strong);
}
#staffEmailsPage .pv2-cell-sub { transition: color var(--dur-fast) var(--ease-out-strong); }

/* --- A.3 L'interrupteur de sequence. Le curseur glisse, le fond suit. Le
   bouton etant DETRUIT puis recree a chaque bascule, cette transition ne
   pouvait jamais jouer : replaySwitchKnobs() (staff-pages-v2.js) repose
   l'ancien etat, force un reflow, puis rend l'etat reel. C'est ce qui rend la
   transition ci-dessous effective au lieu de decorative. --- */
#staffEmailsPage .mk-switch span {
  transition: transform var(--dur-press) var(--ease-out-strong),
              background-color var(--dur-press) var(--ease-out-strong);
}

/* --- A.4 L'indicateur qui glisse d'un segment a l'autre : la signature du
   style. Il est porte par un noeud STABLE et repositionne par slidePipeRail()
   depuis une memoire hors DOM. Verdict assume : il ne glisse QUE si le filtre
   a change ; si seules les donnees ont bouge, il est repose sans transition
   exactement au meme pixel. Anime en translateX + scaleX (base 100px) pour ne
   toucher ni left ni width, qui declencheraient un layout par frame. --- */
#staffEmailsPage .pv2-pipeline { position: relative; }
#staffEmailsPage .pv2-pipe-rail {
  position: absolute; left: 0; bottom: 0; width: 100px; height: 2px;
  transform-origin: 0 50%; background: var(--text); pointer-events: none;
  transition: transform var(--dur-move) var(--ease-in-out-strong);
}
/* Le fond du segment actif reste, mais il ne porte plus seul la selection :
   le rail la porte, le fond la confirme. */
#staffEmailsPage .pv2-pipe.active { background: var(--subtle); }

/* --- A.5 Le chevron du depliant « Apercu du message ». L'attribut [open]
   change SUR PLACE (le summary n'est jamais re-monte pendant la bascule) :
   la transition joue donc vraiment. Famille A. --- */
#staffEmailsPage .mk-auto-preview summary { list-style: none; display: flex; align-items: center; gap: 6px; }
#staffEmailsPage .mk-auto-preview summary::-webkit-details-marker { display: none; }
#staffEmailsPage .pv2-caret {
  width: 0; height: 0; flex: none;
  border-left: 4px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out-strong);
}
#staffEmailsPage .mk-auto-preview[open] .pv2-caret { transform: rotate(90deg); }
/* Le corps du depliant est un vrai montage (famille B) mais il ne peut pas
   rejouer sur un rafraichissement : apres un re-rendu le <details> repart
   ferme, donc rien n'est monte tant que la gerante n'a pas clique. */
#staffEmailsPage .mk-auto-preview[open] p { animation: pv2-reveal var(--dur-slow) var(--ease-out-strong) both; }

/* --- B.1 Panneaux qui apparaissent sur action : composer, coller un mail,
   reglages, editeur de sequence, editeur inline, inventaire deplie. 240 ms,
   vus occasionnellement. Depuis 0.98 et 6px, jamais depuis scale(0). La
   classe n'est posee QUE sur une transition ferme -> ouvert. --- */
@keyframes pv2-mount-in {
  from { opacity: 0; transform: translateY(6px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes pv2-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
#staffEmailsPage .pv2-mount { animation: pv2-mount-in var(--dur-enter) var(--ease-out-strong) both; }

/* --- B.2 L'apercu du mail : le seul vrai montage/demontage de la page (noeud
   cree et retire a la main par ops-console.js). Seul endroit ou une SORTIE est
   possible, parce qu'on retarde le retrait du noeud. Entree 240 ms, sortie
   150 ms : a l'ouverture on decouvre, a la fermeture on a deja decide. --- */
.email-preview-overlay {
  transition: opacity var(--dur-enter) var(--ease-out-strong);
}
.email-preview-overlay .email-preview-card {
  transition: opacity var(--dur-enter) var(--ease-out-strong),
              transform var(--dur-enter) var(--ease-out-strong);
}
.email-preview-overlay.is-opening,
.email-preview-overlay.is-closing { opacity: 0; }
.email-preview-overlay.is-opening .email-preview-card { opacity: 0; transform: translateY(8px) scale(0.98); }
.email-preview-overlay.is-closing { transition-duration: var(--dur-exit); }
.email-preview-overlay.is-closing .email-preview-card {
  opacity: 0; transform: translateY(4px) scale(0.98);
  transition-duration: var(--dur-exit);
}

/* --- Mouvement reduit. On GARDE les fondus d'opacite, qui aident a
   comprendre qu'une surface est apparue ; on retire tout deplacement et toute
   mise a l'echelle. Meme convention que les 7 blocs deja en place. --- */
@media (prefers-reduced-motion: reduce) {
  #staffEmailsPage .pv2-btn:active:not(:disabled),
  #staffEmailsPage .pv2-pipe:active,
  #staffEmailsPage .mk-switch:active:not(:disabled) { transform: none; }
  #staffEmailsPage .pv2-pipe-rail,
  #staffEmailsPage .mk-switch span,
  #staffEmailsPage .pv2-caret { transition: none; }
  #staffEmailsPage .pv2-mount { animation: none; }
  #staffEmailsPage .mk-auto-preview[open] p { animation-name: pv2-fade-only; }
  .email-preview-overlay .email-preview-card { transition-property: opacity; }
  .email-preview-overlay.is-opening .email-preview-card,
  .email-preview-overlay.is-closing .email-preview-card { transform: none; }
}
@keyframes pv2-fade-only { from { opacity: 0; } to { opacity: 1; } }

/* --- 21.14 390px : la page reste utilisable a une main --------------------- */
@media (max-width: 640px) {
  #staffEmailsPage .pv2-pipe { flex: 0 0 auto; }
  #staffEmailsPage .pv2-pipe .pv2-pipe-hint { display: none; }
  /* DEFAUT RELEVE A 390 px : l'onglet « Echecs » etait coupe au bord droit (on
     lisait « 1 Ec ») et RIEN n'indiquait qu'il fallait faire defiler.
     L'information la plus importante de l'ecran etait hors champ.
     Le fondu de bord ci-dessous dit qu'il reste des segments a droite. Il n'est
     allume que si le contenu depasse REELLEMENT (classe can-scroll-x posee par
     slidePipeRail au rendu et au defilement), sinon il mentirait en annoncant
     un ailleurs qui n'existe pas.

     LE REORDONNANCEMENT VISUEL A ETE RETIRE (regression WCAG 1.3.2 et 2.4.3
     introduite par la passe precedente). Elle posait order:-2 / order:-1 sur
     « Tout » et « Echecs » DANS LE MEME DIFF qui convertissait ces segments de
     <div> en <button> : l'ordre de tabulation, qui suit le DOM, ne suivait donc
     plus l'ordre visuel, et un utilisateur au clavier sautait dans le desordre.
     Trois raisons de renoncer plutot que de reordonner le markup :
       1. l'ordre du DOM est le cycle de vie d'un mail (Tout, Recus, En attente,
          Envoyes, Echecs, A valider). Le casser pour tous les ecrans afin de
          reparer un seul coute la comprehension partout ;
       2. le probleme vise (« un echec passe inapercu ») est deja resolu, et
          mieux, par le bandeau d'alerte en TETE de page : il est au-dessus du
          segmente, il nomme la cause en francais et il ne demande aucun
          defilement ;
       3. un ordre de DOM qui dependrait de la largeur ne pourrait pas rester
          juste : la page se reconstruit sur les donnees et les frappes, pas sur
          une rotation d'ecran. Il serait faux exactement quand la largeur
          change. C'est la classe de bug qu'on vient de corriger sur le rail. */
  #staffEmailsPage .pv2-pipeline.can-scroll-x {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
  }
  #staffEmailsPage .pv2-bar-actions { width: 100%; }
  #staffEmailsPage .pv2-bar-actions .pv2-search { flex: 1 1 100%; }
  #staffEmailsPage .pv2-list-head { flex-wrap: wrap; gap: 8px; }
  /* A 390px la colonne « Modele » volait la largeur a la colonne « Statut »,
     et la cause d'echec y tombait a un mot par ligne (« Domaine / d'envoi /
     pas / encore / verifie »). Le modele est deja lisible dans l'objet du
     message juste a cote : on le retire ici, la cause redevient lisible. */
  #staffEmailsPage .pv2-mail-list .pv2-table th:nth-child(2),
  #staffEmailsPage .pv2-mail-list .pv2-table td:nth-child(2) { display: none; }
  #staffEmailsPage .pv2-mail-list .pv2-table td:nth-child(3) { min-width: 118px; }
  .mail-inv-table, .mail-inv-table tbody, .mail-inv-table tr, .mail-inv-table td { display: block; width: 100%; }
  .mail-inv-table thead { display: none; }
  .mail-inv-table tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .mail-inv-table td { border-bottom: 0; padding: 2px 0; }
  .mail-inv-table .pv2-cell-sub, .mail-inv-when { max-width: none; }
}

/* ============================================================================
   22. COCKPIT FONDATEUR (#staffCockpitPage, permission platform.admin)
   ----------------------------------------------------------------------------
   Meme discipline que la page Emails : composants pv2 reutilises, monochrome
   sauf le sens, filets 1px, aucun jeton nouveau. Seules les classes propres a
   cette page vivent ici, toutes prefixees fck- et scopees.

   ---- KIT DE COMPOSANTS FONDATEUR (langage visuel partage) ------------------
   Toutes les pages proprietaire (Cockpit, Agents, Incidents, Clients, Centres,
   editeurs) montent dans #staffCockpitPage et partagent EXACTEMENT ces briques.
   Un nouveau lot fondateur reutilise ce vocabulaire, il n'en invente pas :
     - En-tete de page ..... .pv2-bar (crumb + h1 20px + .pv2-bar-sub + actions
                             a droite dans .pv2-bar-actions)
     - Bandeau donnees test  .fck-testdata (filet ambre, calme, jamais criard)
     - Carte / section ..... .pv2-panel + .pv2-panel-head>h2 (15/600) +
                             .pv2-panel-sub (12 muted) ; sous-carte : .fck-center-card
     - Sous-titre de bloc .. .fck-sub (12/600 muted)
     - Ligne de KPI ........ .fck-stats > .fck-stat (label .fck-stat-cap muted
                             au-dessus, nombre .fck-stat-num en Geist Mono
                             tabular-nums, indice .fck-stat-hint faint) ;
                             variante d'en-tete business : .fck-biz-stats
     - Liste cle/valeur .... .fck-kv (dt muted / dd mono tabular-nums)
     - Badge statut ........ .pv2-chip[.green|.amber|.red|.blue] (pill, fond
                             -soft + texte couleur, jamais l'info par la couleur
                             seule : le libelle porte le sens)
     - Etat sain ........... .fck-allgood (confirmation calme, vert soft + point)
     - Tableau / liste ..... .pv2-table + .fck-table (header 12 muted, lignes
                             separees par --line, colonnes num a droite en mono)
     - Boutons ............. .pv2-btn (primaire = fond .primary ; secondaire =
                             filet ; discret = .ghost)
   ========================================================================== */
#staffCockpitPage .fck-shell { display: flex; flex-direction: column; gap: 14px; }

/* Bandeau verite : les donnees sont des tests. Ambre = attente/attention,
   filet 1px, pas d'aplat criard : il doit se lire sans hurler. */
#staffCockpitPage .fck-testdata {
  border: 1px solid var(--warning);
  border-left-width: 3px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 10px 14px;
  font-size: 13px;
}

#staffCockpitPage .fck-sub {
  margin: 14px 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: none;
}

#staffCockpitPage .fck-line { margin: 8px 0; font-size: 13.5px; }
#staffCockpitPage .fck-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Page Apprentissage de l'IA : les criteres de la grille, en ligne sous le nom
   de la plateforme. Sans mise en forme ils se collaient les uns aux autres
   (« Verite centre 2Garde-fou 1.8Impact humain 1.4 » : illisible). Le poids est
   en mono, et un critere VENU DU TERRAIN se distingue par son fond accentue -
   jamais par la couleur seule, il porte aussi une bordure. */
#staffCockpitPage .fck-crit {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin: 3px 6px 0 0;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}
#staffCockpitPage .fck-crit em { font-family: var(--font-data); font-style: normal; color: var(--faint); }
#staffCockpitPage .fck-crit.is-learned { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-soft); color: var(--accent-strong); }
#staffCockpitPage .fck-crit.is-learned em { color: var(--accent-strong); }
#staffCockpitPage .fck-chart-host { margin: 4px 0 2px; }

/* Etat sain de la sante ("Ce qui casse" quand rien ne casse) : confirmation
   calme, pas un simple texte gris. Vert soft + point : le sens est porte par le
   libelle ET le point (jamais la couleur seule). */
#staffCockpitPage .fck-allgood {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--success-soft);
  color: var(--success);
  font-size: 13px;
}

#staffCockpitPage .fck-table td { vertical-align: top; padding: 8px 10px 8px 0; }
#staffCockpitPage .fck-row-action { text-align: right; white-space: nowrap; }
#staffCockpitPage .fck-num { font-variant-numeric: tabular-nums; }

/* Cartes centre (adoption) : la grille respire, chaque carte est un filet. */
#staffCockpitPage .fck-center-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
#staffCockpitPage .fck-center-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface);
}
#staffCockpitPage .fck-center-card .fck-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
#staffCockpitPage .fck-kv { margin: 0; display: flex; flex-direction: column; gap: 6px; }
#staffCockpitPage .fck-kv div { display: flex; justify-content: space-between; gap: 10px; }
#staffCockpitPage .fck-kv dt { color: var(--muted); font-size: 12.5px; }
#staffCockpitPage .fck-kv dd { margin: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* Ligne de KPI fondateur : label muted au-dessus, grand nombre en Geist Mono
   tabular-nums en dessous (DESIGN.md sect.4 : toute donnee passe en mono).
   Base partagee par les stats agents et cout ; la variante .fck-biz-stats en
   fait la grille d'en-tete business du cockpit. */
#staffCockpitPage .fck-stats { display: flex; gap: 22px; flex-wrap: wrap; margin: 6px 0 4px; }
#staffCockpitPage .fck-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#staffCockpitPage .fck-stat-num {
  font-family: var(--font-data);
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--text);
}
#staffCockpitPage .fck-stat-cap { font-size: 12px; color: var(--muted); line-height: 1.5; }
#staffCockpitPage .fck-stat-hint { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; line-height: 1.4; }

#staffCockpitPage .fck-audit-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
#staffCockpitPage .fck-audit-bar .pv2-input { max-width: 220px; }

/* Table des sequences : la premiere colonne est le libelle, les suivantes un
   interrupteur par centre. En-tetes en gris moyen, discipline pv2. */
#staffCockpitPage .fck-seq-table th {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-align: left;
  padding: 6px 10px 6px 0;
}

@media (max-width: 640px) {
  #staffCockpitPage .fck-center-grid { grid-template-columns: 1fr; }
  #staffCockpitPage .fck-audit-bar .pv2-input { max-width: none; flex: 1; }
  #staffCockpitPage .fck-seq-table { display: block; overflow-x: auto; }
}

/* --- 22.b Pages dediees de la categorie Plateforme (Agents IA, Incidents,
   Clients). Meme discipline que le cockpit : filets 1px, monochrome sauf
   sens, chiffres tabulaires. Les cartes reutilisent .fck-center-card. --- */
#staffCockpitPage .fck-client-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
/* Graphes fondateur (moteur PinlaneCharts) : le viewBox du moteur fait 560 de
   large ; dans un panneau fondateur pleine largeur (~960px) le SVG serait scale
   ~1.7x et son texte d'axes / labels de mois grossirait d'autant (bug "texte
   enorme"). On BORNE la largeur de rendu a 600px (aligne a gauche) : le SVG
   reste proche de son echelle native, donc les graduations et labels gardent
   une taille normale et lisible. Le board Direction n'est pas concerne : ses
   hotes (.adm-trend-chart, widgets .pab-) vivent deja dans des cartes etroites
   ou l'echelle est bonne, et ce style est scope #staffCockpitPage .fck-chart. */
#staffCockpitPage .fck-chart { min-height: 160px; margin: 4px 0 10px; max-width: 600px; }
#staffCockpitPage .fck-cost-note { margin: 8px 0 0; font-size: 12.5px; }
#staffCockpitPage .fck-incident-list { display: flex; flex-direction: column; gap: 10px; }
#staffCockpitPage .fck-incident {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
#staffCockpitPage .fck-incident-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#staffCockpitPage .fck-incident-msg {
  font-size: 13.5px;
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}
#staffCockpitPage .fck-stack { margin-top: 8px; }
#staffCockpitPage .fck-stack summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12.5px;
  user-select: none;
}
#staffCockpitPage .fck-stack pre {
  margin: 8px 0 0;
  padding: 10px 12px;
  font-family: var(--font-data);
  font-size: 12px;
  line-height: 1.5;
  background: var(--subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: auto;
  max-height: 260px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  #staffCockpitPage .fck-client-grid { grid-template-columns: 1fr; }
}

/* --- 23. Tendances Direction + lecture visuelle Donnees (adm-trend-*) ------
   Graphiques animes de la categorie Direction : monochrome, sens uniquement
   sur les chips (vert hausse, rouge baisse), bordures 1px, rayons 6-8px,
   chiffres tabulaires, themes clair/sombre via variables. Le moteur de rendu
   vit dans assets/pinlane-charts.js (classes plc-, styles dedies). */
.adm-trend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.adm-trend-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 14px 16px;
  min-width: 0;
}
.adm-trend-wide { grid-column: 1 / -1; }
.adm-trend-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.adm-trend-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.adm-trend-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--faint);
}
.adm-trend-chart {
  margin-top: 10px;
  min-height: 40px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.adm-trend-chip {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 8px;
  color: var(--muted);
  background: var(--subtle);
}
.adm-trend-chip.up,
.adm-trend-chip.new {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 35%, var(--line));
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
}
.adm-trend-chip.down {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
}
.adm-trend-chip.flat { color: var(--muted); }
.adm-trend-note {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}
/* Hote de graphique pas encore monte : hauteur calme reservee, pas de saut
   de layout au dessin. */
.adm-trend-chart:empty,
#staffCockpitPage .fck-chart:empty {
  min-height: 120px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
@media (max-width: 700px) {
  .adm-trend-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   24. DIRECTION : poste d'observation analytics (namespace dir-)
   ----------------------------------------------------------------------------
   Refonte totale de la categorie Direction : une seule page, analytics-first,
   facon Vercel Analytics / Linear Insights. Rupture visuelle nette avec les
   anciens admin-panel/admin-kpi (supprimes du rendu). Aere, calme, la
   hierarchie vient de la taille et de la graisse, la couleur ne dit que le
   sens (vert = hausse/reussi, rouge = baisse, le reste monochrome). Le moteur
   window.PinlaneCharts (classes plc-) dessine, window.PinlaneDateRange (pdr-)
   choisit la fenetre. ======================================================= */
.dir-root {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Entree : la page monte une fois, discretement, translateY + opacity. */
.dir-enter-init { opacity: 0; transform: translateY(8px); }
.dir-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 320ms cubic-bezier(0.23, 1, 0.32, 1), transform 320ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (prefers-reduced-motion: reduce) {
  .dir-enter-init { opacity: 1; transform: none; }
  .dir-enter-active { transition: none; }
}

/* --- Barre de controle : la plage de dates a gauche, la fenetre active a
   droite, toujours lisible meme si le composant tombe. --- */
.dir-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 4px;
}
.dir-range-mount { min-width: 0; }
.dir-window {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
.dir-window-range { font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.dir-window-meta { font-size: 12px; color: var(--faint); }
.dir-range-fallback { font-size: 13px; color: var(--muted); }

/* Barre de controle Direction. Le bouton « Journal des modifications » vivait
   ici ; il est parti dans la categorie Plateforme le 2026-07-28 (outil Pinlane,
   pas tableau de bord du gerant), son style part avec lui. */
.dir-controls-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.dir-note {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.dir-note-loading { color: var(--faint); }

/* --- Rangee de KPI : tuiles cliquables, chacune pilote le grand graphique.
   Grand chiffre en Geist Mono, delta en chip, sparkline en pied. --- */
/* 6 tuiles : 2, 3 ou 6 colonnes - jamais 4 ni 5, qui laissaient une tuile
   orpheline seule sur sa rangee (auto-fit choisissait 5 en 1440 px). */
.dir-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 760px) { .dir-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1320px) { .dir-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Etat vide du grand graphe : une phrase calme au lieu d'une ligne plate. */
.dir-focus-empty {
  display: grid;
  gap: 4px;
  align-content: center;
  justify-items: center;
  min-height: 170px;
  padding: var(--space-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  text-align: center;
}
.dir-focus-empty strong { font-size: 14px; font-weight: 600; color: var(--text); }
.dir-focus-empty span { font-size: 12.5px; color: var(--muted); max-width: 46ch; }
.dir-kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 16px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 160ms ease-out, transform 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms ease-out;
}
@media (hover: hover) {
  .dir-kpi:hover { border-color: var(--line-strong); }
}
.dir-kpi:active { transform: scale(0.99); }
/* Tuile active = celle qui alimente le grand graphique : anneau discret, pas
   de couleur de marque, juste un filet renforce et un fond a peine teinte. */
.dir-kpi.is-active {
  border-color: var(--text);
  box-shadow: inset 0 0 0 1px var(--text);
}
.dir-kpi-label { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.dir-kpi-value {
  font-family: var(--font-data);
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.dir-kpi-delta { min-height: 20px; }
.dir-kpi-spark { display: block; height: 40px; margin-top: 2px; }
.dir-kpi-spark:empty { min-height: 40px; }

/* --- Chips de delta : le sens porte la couleur, jamais la decoration. --- */
.dir-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--subtle);
}
.dir-chip-up {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 32%, var(--line));
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
}
.dir-chip-down {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 32%, var(--line));
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
}
.dir-chip-flat, .dir-chip-mute { color: var(--muted); }

/* --- Grand graphique focus : la metrique choisie, pleine largeur. --- */
.dir-focus {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 18px 20px 20px;
}
.dir-focus-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.dir-focus-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.dir-focus-sub { margin: 0; font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.dir-focus-chart { min-height: 300px; }

/* --- Grille de graphiques secondaires. --- */
.dir-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.dir-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 16px 18px 18px;
  min-width: 0;
}
.dir-card-wide { grid-column: 1 / -1; }
.dir-card-title { margin: 0 0 12px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.dir-chart { min-height: 180px; }
.dir-chart:empty { min-height: 180px; }

/* --- Tables (voir : top formules, top clients). --- */
.dir-tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.dir-table-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 16px 18px 8px;
  min-width: 0;
}
.dir-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dir-table th {
  text-align: left;
  font-weight: 500;
  color: var(--faint);
  font-size: 12px;
  padding: 6px 10px 8px 0;
  border-bottom: 1px solid var(--line);
}
.dir-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); color: var(--text); vertical-align: top; }
/* La derniere ligne perd son filet du bas - y COMPRIS sur la cellule d en-tete
   de ligne (th scope=row). Sans le th, l underline s arretait au bord du nom et
   dessinait un demi-cadre sous la premiere colonne : lu comme un bug. */
.dir-table tbody tr:last-child td,
.dir-table tbody tr:last-child th { border-bottom: 0; }
.dir-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dir-table th.dir-num { text-align: right; }
.dir-client-name { display: block; font-weight: 500; }
.dir-client-contact { display: block; font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .dir-grid { grid-template-columns: 1fr; }
  .dir-controls { flex-direction: column; align-items: stretch; }
  .dir-window { align-items: flex-start; text-align: left; }
}

/* ===========================================================================
   25. PANNEAU FONDATEUR : gestion Centres (fca-) + Equipe/acces (fte-)
   Surfaces de GESTION no-code (creer/configurer/suspendre un centre ;
   membres/roles/permissions/codes). Meme langage visuel que le cockpit
   (pv2-*/fck-*), plus les modales et formulaires de gestion. ============= */
/* ============================================================================
   FRONT-CENTRES : panneau plateforme de gestion no-code des centres.
   ----------------------------------------------------------------------------
   Rendu dans #staffCockpitPage (meme hote que founder-cockpit.js). Discipline
   Vercel/Linear identique : monochrome, le SENS seul porte la couleur (vert =
   actif, ambre = en preparation, rouge = ferme), filets 1px var(--line),
   rayons var(--radius-*), chiffres tabulaires var(--font-data), etats vides
   calmes. On reutilise pv2-*/fck-* quand ca colle (grille de cartes, chips,
   boutons, interrupteurs) ; les classes fca-* n'ajoutent que le manquant :
   resume de config, controle de statut inline, et la MODALE de configuration.
   Motion (Emil Kowalski) : transform/opacity, ease-out, JAMAIS ease-in ni
   scale(0). Etat final immediat sous prefers-reduced-motion.
   AUCUNE balise <header> cote JS : la regle body.staff-mode header l'ecraserait.
   ========================================================================== */

/* --- Resume de config sur la carte ---------------------------------------- */
#staffCockpitPage .fca-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 2px 0 4px;
  font-size: 12.5px;
  color: var(--muted);
}
#staffCockpitPage .fca-summary span { display: inline-flex; align-items: center; gap: 5px; }
#staffCockpitPage .fca-summary .fca-sep { color: var(--faint); margin: 0; }
#staffCockpitPage .fca-summary strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Compteurs de la carte : membres / resas 30j / CA 30j. */
#staffCockpitPage .fca-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
#staffCockpitPage .fca-metric { display: flex; flex-direction: column; gap: 1px; }
#staffCockpitPage .fca-metric-num {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
#staffCockpitPage .fca-metric-cap { font-size: 11px; color: var(--faint); }

/* Pied de carte Centres (statut editable + Configurer) : reutilise le pied
   partage .fck-card-foot + le select .fck-status-* (voir section 22.c). L'ancien
   segmente 3 etats (.fca-status-seg / .fca-seg-*) est SUPPRIME : dans les cartes
   etroites "en preparation" et "ferme" se chevauchaient (bug corrige). Un select
   tient a toute largeur et rend Centres coherente avec Clients Pinlane. */

/* --- Modale de configuration ---------------------------------------------- */
/* Overlay opacite + panneau translateY(8px)->0. L'animation d'entree ne joue
   qu'a la PREMIERE apparition (classe is-in posee par le JS), jamais sur un
   re-rendu partiel du corps. */
#staffCockpitPage .fca-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px 24px;
  overflow-y: auto;
  background: var(--backdrop);
}
#staffCockpitPage .fca-overlay.is-in { animation: fca-overlay-in var(--dur-enter, 240ms) var(--ease-out-strong, cubic-bezier(0.23, 1, 0.32, 1)); }
#staffCockpitPage .fca-panel {
  width: min(640px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
  display: flex;
  flex-direction: column;
  max-height: 88vh;
}
#staffCockpitPage .fca-overlay.is-in .fca-panel { animation: fca-panel-in var(--dur-enter, 240ms) var(--ease-out-strong, cubic-bezier(0.23, 1, 0.32, 1)); }
@keyframes fca-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fca-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

#staffCockpitPage .fca-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
}
#staffCockpitPage .fca-modal-head h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
#staffCockpitPage .fca-modal-head p { margin-top: 3px; font-size: 12px; color: var(--muted); }
#staffCockpitPage .fca-close {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
#staffCockpitPage .fca-close:hover { background-image: linear-gradient(var(--overlay-hover), var(--overlay-hover)); color: var(--text); }
#staffCockpitPage .fca-close:active { transform: scale(0.97); }

#staffCockpitPage .fca-modal-body { padding: 14px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }

#staffCockpitPage .fca-section { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 12px 4px; }
#staffCockpitPage .fca-section > .fca-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
#staffCockpitPage .fca-section-note { font-size: 12px; color: var(--muted); margin: -2px 0 10px; }

#staffCockpitPage .fca-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-bottom: 8px; }
#staffCockpitPage .fca-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#staffCockpitPage .fca-field.fca-span2 { grid-column: 1 / -1; }
#staffCockpitPage .fca-field > label { font-size: 12px; color: var(--muted); }
#staffCockpitPage .fca-field input,
#staffCockpitPage .fca-field select { height: 34px; font-size: 13px; }
#staffCockpitPage .fca-hint { font-size: 11px; color: var(--faint); }
#staffCockpitPage .fca-field input:focus,
#staffCockpitPage .fca-field select:focus { outline: none; border-color: var(--line-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 8%, transparent); }
#staffCockpitPage .fca-field input:invalid { border-color: var(--danger); }

/* Lignes d'interrupteur : libelle + mk-switch (reutilise, deja anime/monochrome). */
#staffCockpitPage .fca-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
#staffCockpitPage .fca-toggle-row:first-of-type { border-top: 0; }
#staffCockpitPage .fca-toggle-row .fca-toggle-label { font-size: 12.5px; color: var(--text); }
#staffCockpitPage .fca-toggle-row .fca-toggle-sub { display: block; font-size: 11px; color: var(--faint); margin-top: 1px; }

/* Grille horaire : 7 jours, chaque ligne ouvert/ferme + heures. */
#staffCockpitPage .fca-days { display: flex; flex-direction: column; gap: 2px; }
#staffCockpitPage .fca-day {
  display: grid;
  grid-template-columns: 96px auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
#staffCockpitPage .fca-day:first-child { border-top: 0; }
#staffCockpitPage .fca-day-name { font-size: 12.5px; color: var(--text); }
#staffCockpitPage .fca-day-times { display: flex; align-items: center; gap: 6px; justify-self: end; }
#staffCockpitPage .fca-day-times input[type='time'] { width: 104px; height: 32px; font-size: 12.5px; }
#staffCockpitPage .fca-day-times .fca-dash { color: var(--faint); }
#staffCockpitPage .fca-day-closed { justify-self: end; font-size: 12px; color: var(--faint); }
#staffCockpitPage .fca-schedule-marker { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

#staffCockpitPage .fca-modal-error {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 12.5px;
}

#staffCockpitPage .fca-modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}
#staffCockpitPage .fca-modal-foot .fca-foot-note { margin-right: auto; font-size: 11.5px; color: var(--faint); }

/* Boutons : :active scale(0.97) sur les boutons de la surface. */
#staffCockpitPage .fca-panel .pv2-btn:active { transform: scale(0.97); }

@media (max-width: 640px) {
  #staffCockpitPage .fca-metrics { grid-template-columns: 1fr 1fr; }
  #staffCockpitPage .fca-fields { grid-template-columns: 1fr; }
  #staffCockpitPage .fca-day { grid-template-columns: 80px auto; grid-auto-rows: min-content; }
  #staffCockpitPage .fca-day-times { grid-column: 1 / -1; justify-self: start; }
}

/* Etat final immediat : pas de mouvement pour qui le refuse. */
@media (prefers-reduced-motion: reduce) {
  #staffCockpitPage .fca-overlay.is-in,
  #staffCockpitPage .fca-overlay.is-in .fca-panel { animation: none; }
  #staffCockpitPage .fca-close:active,
  #staffCockpitPage .fca-panel .pv2-btn:active { transform: none; }
}

/* ============================================================================
   COCKPIT FONDATEUR : PAGE EQUIPE (#staffCockpitPage, permission platform.admin)
   ----------------------------------------------------------------------------
   Membres, roles, permissions et codes, sur TOUS les centres. Meme discipline
   que le reste de la categorie Plateforme : composants pv2- et fck- reutilises,
   monochrome sauf le SENS (vert = actif/reussi, rouge = desactive/echec, ambre =
   attente/absent), filets 1px var(--line), rayons var(--radius-*), chiffres
   tabulaires var(--font-data). Classes propres prefixees fte-, tout scope sous
   .fte-shell pour ne rien changer aux quatre pages cockpit voisines (.fck-shell).
   Motion (Emil Kowalski) : transform/opacity, ease-out, jamais ease-in/scale(0).
   ========================================================================== */

#staffCockpitPage .fte-shell { display: flex; flex-direction: column; gap: 14px; }

/* pv2-quiet / pv2-input / pv2-btn.ghost n'ont pas de base hors de la page
   Emails : on les pose ICI, scopees a .fte-shell, sans toucher le voisinage. */
#staffCockpitPage .fte-shell .pv2-quiet { color: var(--muted); font-size: 12.5px; }

#staffCockpitPage .fte-shell .pv2-input,
#staffCockpitPage .fte-shell .fte-input {
  height: var(--h-md);
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  transition: border-color var(--dur-fast) var(--ease-out-strong),
              box-shadow var(--dur-fast) var(--ease-out-strong);
}
#staffCockpitPage .fte-shell .pv2-input:focus,
#staffCockpitPage .fte-shell .fte-input:focus {
  outline: none;
  border-color: var(--text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 12%, transparent);
}

#staffCockpitPage .fte-shell .pv2-btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
#staffCockpitPage .fte-shell .pv2-btn.ghost:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--line);
}
#staffCockpitPage .fte-shell .pv2-btn:active:not(:disabled) { transform: scale(0.97); }
#staffCockpitPage .fte-shell .pv2-btn:disabled { opacity: 0.55; cursor: default; }

/* --- Barre de filtre par centre ------------------------------------------- */
#staffCockpitPage .fte-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#staffCockpitPage .fte-filter label { font-size: 12.5px; color: var(--muted); font-weight: 500; }
#staffCockpitPage .fte-filter .pv2-input { min-width: 200px; }

/* --- Cellules de table ----------------------------------------------------- */
#staffCockpitPage .fte-shell .fck-table td { vertical-align: middle; }
#staffCockpitPage .fte-role-select { min-width: 150px; }
#staffCockpitPage .fte-col-action { text-align: right; white-space: nowrap; }
#staffCockpitPage .fte-status-cell { display: inline-flex; align-items: center; gap: 8px; }
#staffCockpitPage .fte-status-cell span.fte-status-txt { font-size: 12.5px; color: var(--muted); }

/* mk-switch : press feedback reel sur l'element persistant (avant re-rendu). */
#staffCockpitPage .fte-shell .mk-switch:active:not(:disabled) { transform: scale(0.94); }
#staffCockpitPage .fte-shell .mk-switch span {
  transition: transform var(--dur) var(--ease-out-strong), background-color var(--dur) var(--ease-out-strong);
}

/* --- Revele de code (a la demande, temporaire) ----------------------------- */
#staffCockpitPage .fte-reveal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border: 1px solid var(--warning);
  border-radius: var(--radius-md);
  background: var(--surface);
}
#staffCockpitPage .fte-reveal code {
  font-family: var(--font-data);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text);
}
#staffCockpitPage .fte-reveal button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}
#staffCockpitPage .fte-reveal button:hover { color: var(--text); }
#staffCockpitPage .fte-reveal-warn { display: block; margin-top: 3px; font-size: 11px; color: var(--warning); }

/* --- Grille des roles ------------------------------------------------------ */
#staffCockpitPage .fte-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
#staffCockpitPage .fte-role-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px;
  background: var(--surface);
  transition: border-color var(--dur) var(--ease-out-strong);
}
#staffCockpitPage .fte-role-card:hover { border-color: var(--line-strong); }
#staffCockpitPage .fte-role-card .fck-card-head { margin: 0; }
#staffCockpitPage .fte-role-meta { display: flex; gap: 8px; flex-wrap: wrap; }
#staffCockpitPage .fte-role-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
#staffCockpitPage .fte-role-actions .pv2-btn { flex: 1 1 auto; justify-content: center; }

/* --- Modale (overlay + panneau) : Emil Kowalski ---------------------------- */
#staffCockpitPage .fte-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px 16px;
  overflow-y: auto;
  background: color-mix(in srgb, var(--text) 34%, transparent);
}
#staffCockpitPage .fte-modal {
  width: 100%;
  max-width: 520px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
}
/* Garde de premiere apparition : l'animation ne vit que sur .fte-anim, posee
   une seule fois a l'ouverture. Un re-rendu (etat busy) ne la rejoue pas. */
#staffCockpitPage .fte-anim .fte-overlay { animation: fte-overlay-in 220ms var(--ease-out-strong) both; }
#staffCockpitPage .fte-anim .fte-modal { animation: fte-modal-in 220ms var(--ease-out-strong) both; }

@keyframes fte-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fte-modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

#staffCockpitPage .fte-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
#staffCockpitPage .fte-modal-head h2 { font-size: 15px; }
#staffCockpitPage .fte-modal-head p { margin-top: 3px; font-size: 12.5px; color: var(--muted); }
#staffCockpitPage .fte-modal-close {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
#staffCockpitPage .fte-modal-close:hover { color: var(--text); }
#staffCockpitPage .fte-modal-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; max-height: 60vh; overflow-y: auto; }
#staffCockpitPage .fte-modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}

/* Champs de formulaire */
#staffCockpitPage .fte-field { display: flex; flex-direction: column; gap: 5px; }
#staffCockpitPage .fte-field label { font-size: 12.5px; font-weight: 500; color: var(--muted); }
#staffCockpitPage .fte-field .pv2-input,
#staffCockpitPage .fte-field .fte-input { width: 100%; }

/* Permissions groupees */
#staffCockpitPage .fte-perm-group { display: flex; flex-direction: column; gap: 4px; }
#staffCockpitPage .fte-perm-group > h3 {
  font-size: 11px;
  font-weight: 600;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
#staffCockpitPage .fte-perm-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out-strong), background-color var(--dur-fast) var(--ease-out-strong);
}
#staffCockpitPage .fte-perm-row:hover:not(.is-locked) { border-color: var(--line-strong); }
#staffCockpitPage .fte-perm-row.is-on { border-color: var(--text); background: color-mix(in srgb, var(--text) 5%, var(--surface)); }
#staffCockpitPage .fte-perm-row.is-locked { cursor: default; opacity: 0.6; }
#staffCockpitPage .fte-perm-row input { margin: 2px 0 0; accent-color: var(--text); width: 15px; height: 15px; flex: none; }
#staffCockpitPage .fte-perm-row .fte-perm-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#staffCockpitPage .fte-perm-row .fte-perm-lbl { font-size: 13px; color: var(--text); }
#staffCockpitPage .fte-perm-row .fte-perm-key { font-size: 11px; color: var(--faint); font-family: var(--font-data); }

/* Bandeau avertissement (revele de code, action sensible) */
#staffCockpitPage .fte-warn {
  border: 1px solid var(--warning);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  padding: 9px 12px;
  font-size: 12.5px;
}

#staffCockpitPage .fte-empty { padding: 18px; text-align: center; }

@media (max-width: 640px) {
  #staffCockpitPage .fte-role-grid { grid-template-columns: 1fr; }
  #staffCockpitPage .fte-shell .fck-table { display: block; overflow-x: auto; }
  #staffCockpitPage .fte-filter .pv2-input { flex: 1; min-width: 0; }
}

/* Etat final immediat, pas d'animation d'entree en mouvement reduit. */
@media (prefers-reduced-motion: reduce) {
  #staffCockpitPage .fte-anim .fte-overlay,
  #staffCockpitPage .fte-anim .fte-modal { animation: none; }
  #staffCockpitPage .fte-shell .pv2-btn:active:not(:disabled),
  #staffCockpitPage .fte-shell .mk-switch:active:not(:disabled) { transform: none; }
  #staffCockpitPage .fte-shell .mk-switch span { transition: none; }
}

/* ============================================================================
   26. FINITION PREMIUM : reflets animes, hovers ressort, modales glass
   ----------------------------------------------------------------------------
   Qualite Vercel / Linear / Figma. Effets GPU uniquement (transform / opacity /
   filter), coupes proprement sous prefers-reduced-motion. Scope au panneau
   fondateur (#staffCockpitPage) et aux cartes de la Direction (dir-) : le
   reste de l'app garde sa sobriete. Le "reflet qui bouge" est une bande de
   lumiere diagonale qui balaie une carte au survol, et un sheen ambiant tres
   lent sur les barres de titre. ============================================ */

/* --- 26.1 Barre de titre : sheen ambiant lent (la lumiere respire) --------- */
#staffCockpitPage .pv2-bar {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
#staffCockpitPage .pv2-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 42%,
    color-mix(in srgb, var(--text) 5%, transparent) 48%,
    color-mix(in srgb, var(--text) 8%, transparent) 50%,
    color-mix(in srgb, var(--text) 5%, transparent) 52%,
    transparent 58%);
  transform: translateX(-35%);
  animation: pl-hero-sheen 11s ease-in-out infinite;
}
@keyframes pl-hero-sheen {
  0%, 100% { transform: translateX(-35%); }
  50% { transform: translateX(35%); }
}

/* --- 26.2 Cartes : elevation ressort + reflet qui balaie au survol --------- */
#staffCockpitPage .fck-center-card,
#staffCockpitPage .fte-role-card,
.dir-card,
.dir-table-card,
.dir-focus,
.dir-kpi {
  position: relative;
  overflow: hidden;
  transition:
    transform 280ms var(--ease-out-strong),
    border-color 200ms ease-out,
    box-shadow 280ms var(--ease-out-strong);
}
/* La bande de lumiere : cachee hors carte, revele et traverse au survol. */
#staffCockpitPage .fck-center-card::after,
#staffCockpitPage .fte-role-card::after,
.dir-card::after,
.dir-table-card::after,
.dir-kpi::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg,
    transparent,
    color-mix(in srgb, var(--text) 9%, transparent),
    transparent);
  transform: translateX(-140%) skewX(-14deg);
}
@media (hover: hover) {
  #staffCockpitPage .fck-center-card:hover,
  #staffCockpitPage .fte-role-card:hover,
  .dir-card:hover,
  .dir-table-card:hover {
    transform: translateY(-3px);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-overlay);
  }
  .dir-kpi:hover { transform: translateY(-2px); border-color: var(--line-strong); }
  #staffCockpitPage .fck-center-card:hover::after,
  #staffCockpitPage .fte-role-card:hover::after,
  .dir-card:hover::after,
  .dir-table-card:hover::after,
  .dir-kpi:hover::after {
    opacity: 1;
    transform: translateX(260%) skewX(-14deg);
    transition: transform 760ms var(--ease-out-strong), opacity 760ms ease-out;
  }
}

/* --- 26.3 Boutons : pression tactile + halo au survol ---------------------- */
#staffCockpitPage .pv2-btn,
.dir-focus .pv2-btn {
  transition: transform 150ms var(--ease-out-strong), opacity 150ms ease-out, background-image 150ms ease-out, border-color 150ms ease-out;
}
#staffCockpitPage .pv2-btn:active { transform: scale(0.97); }
#staffCockpitPage .pv2-btn.primary:hover { opacity: 1; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 40%, transparent), 0 6px 18px color-mix(in srgb, var(--text) 22%, transparent); }

/* --- 26.4 Modales : verre depoli + bord lumineux + entree ressort ---------- */
.fca-overlay,
.fte-overlay,
.ftr-overlay,
.fcp-overlay {
  backdrop-filter: blur(7px) saturate(1.15);
  -webkit-backdrop-filter: blur(7px) saturate(1.15);
  animation: pl-overlay-in 220ms ease-out;
}
@keyframes pl-overlay-in { from { opacity: 0; } to { opacity: 1; } }
.fca-panel,
.fte-modal,
.ftr-panel,
.fcp-panel {
  position: relative;
  box-shadow: var(--shadow-overlay);
  animation: pl-modal-in 340ms var(--ease-out-strong);
}
/* Filet de lumiere en tete de modale : un degrade qui capte l'oeil sans crier. */
.fca-panel::before,
.fte-modal::before,
.ftr-panel::before,
.fcp-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--accent) 55%, transparent),
    color-mix(in srgb, var(--text) 30%, transparent),
    transparent);
  background-size: 220% 100%;
  animation: pl-edge-glow 5s ease-in-out infinite;
}
@keyframes pl-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes pl-edge-glow {
  0%, 100% { background-position: 100% 0; }
  50% { background-position: 0 0; }
}

/* --- 26.5 Entree de menu active : accent anime (le fil qui vit) ------------ */
.ops-sidebar .fgx-menu-item.is-active,
.ops-sidebar .fgx-menu-subitem.is-active {
  position: relative;
}
.ops-sidebar .fgx-menu-item.is-active::before,
.ops-sidebar .fgx-menu-subitem.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 70%, transparent),
    color-mix(in srgb, var(--text) 45%, transparent),
    color-mix(in srgb, var(--accent) 70%, transparent));
  background-size: 100% 220%;
  animation: pl-rail-glow 4.5s ease-in-out infinite;
}
@keyframes pl-rail-glow {
  0%, 100% { background-position: 0 100%; }
  50% { background-position: 0 0; }
}

/* --- 26.6 Shimmer : squelette de chargement premium (utilitaire) ----------- */
.pl-shimmer {
  background: linear-gradient(90deg,
    var(--subtle) 25%,
    color-mix(in srgb, var(--text) 7%, var(--subtle)) 37%,
    var(--subtle) 63%);
  background-size: 400% 100%;
  animation: pl-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes pl-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* --- 26.7 Respect absolu de prefers-reduced-motion ------------------------- */
@media (prefers-reduced-motion: reduce) {
  #staffCockpitPage .pv2-bar::after,
  .fca-panel::before,
  .fte-modal::before,
  .ops-sidebar .fgx-menu-item.is-active::before,
  .ops-sidebar .fgx-menu-subitem.is-active::before,
  .pl-shimmer,
  .fca-overlay,
  .fte-overlay,
  .fca-panel,
  .fte-modal { animation: none !important; }
  #staffCockpitPage .fck-center-card,
  #staffCockpitPage .fte-role-card,
  .dir-card, .dir-table-card, .dir-focus, .dir-kpi,
  #staffCockpitPage .fck-center-card::after,
  #staffCockpitPage .fte-role-card::after,
  .dir-card::after, .dir-table-card::after, .dir-kpi::after { transition: none !important; }
}

/* Incident : cote droit de l'en-tete (compteur + bouton Ecarter). */
#staffCockpitPage .fck-incident-head-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* --- 27. Tarifs & formules (ftr-) : editeur catalogue no-code ------------- */
/* ============================================================================
   TARIFS ET FORMULES : editeur no-code du catalogue (panneau fondateur).
   ----------------------------------------------------------------------------
   Rendu dans #staffCockpitPage (meme hote que founder-cockpit.js /
   founder-centres.js). Meme langage visuel : monochrome, le SENS seul porte la
   couleur (ambre = modifie, rouge = retiree), filets 1px var(--line), rayons
   var(--radius-*), chiffres tabulaires. On reutilise pv2-*/fck- (grille de
   cartes, chips, boutons, mk-switch) ; les classes ftr- n'ajoutent que le
   manquant : selecteur de portee, prix affiche, resume d'etapes, et la MODALE.
   Motion (Emil Kowalski) : transform/opacity, ease-out, jamais ease-in ni
   scale(0). Etat final immediat sous prefers-reduced-motion.
   AUCUNE balise <header> cote JS : la regle body.staff-mode header l'ecraserait.
   ========================================================================== */

/* --- Selecteur de portee dans la barre ------------------------------------ */
#staffCockpitPage .ftr-scope { display: flex; align-items: center; gap: 8px; }
#staffCockpitPage .ftr-scope > label { font-size: 11px; color: var(--faint); white-space: nowrap; }
#staffCockpitPage .ftr-scope-select {
  height: 32px;
  min-width: 220px;
  max-width: 100%;
  font-size: 12.5px;
}

/* --- Grille + carte de formule (reutilise .fck-center-card : hover, reflet) - */
#staffCockpitPage .ftr-grid { align-items: start; }
#staffCockpitPage .ftr-card { display: flex; flex-direction: column; gap: 8px; }
#staffCockpitPage .ftr-card-head { align-items: flex-start; gap: 10px; }
#staffCockpitPage .ftr-card-title { min-width: 0; }
#staffCockpitPage .ftr-card-title strong { font-weight: 600; letter-spacing: -0.005em; }
#staffCockpitPage .ftr-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex: none; }

/* Formule retiree : la carte se retire du regard sans disparaitre (elle reste
   editable pour la reactiver). */
#staffCockpitPage .ftr-card.is-removed { opacity: 0.62; }
#staffCockpitPage .ftr-card.is-removed .ftr-price-now { text-decoration: line-through; text-decoration-thickness: 1px; }

#staffCockpitPage .ftr-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
#staffCockpitPage .ftr-meta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Prix : le chiffre courant domine, l'ancien prix barre le suit, gris. */
#staffCockpitPage .ftr-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 2px 0; }
#staffCockpitPage .ftr-price-now {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}
#staffCockpitPage .ftr-price-old {
  font-size: 13px;
  color: var(--faint);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-variant-numeric: tabular-nums;
}
#staffCockpitPage .ftr-price-unit { font-size: 12px; color: var(--muted); }

/* Resume des etapes (activites du socle) : petit, en une ou deux lignes. */
#staffCockpitPage .ftr-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
  font-size: 12px;
  color: var(--muted);
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
#staffCockpitPage .ftr-step { display: inline-flex; align-items: center; gap: 5px; }
#staffCockpitPage .ftr-step-dur { color: var(--faint); font-variant-numeric: tabular-nums; }
#staffCockpitPage .ftr-step-crit {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--danger);
}
#staffCockpitPage .ftr-sep { color: var(--faint); }

#staffCockpitPage .ftr-card-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
#staffCockpitPage .ftr-card-foot > .pv2-btn { width: 100%; }

/* Note d'honnetete : filet neutre, se lit sans hurler (distinct du bandeau
   ambre .fck-testdata qui signale la donnee de test). */
#staffCockpitPage .ftr-note {
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.5;
}

/* --- Modale d'edition ------------------------------------------------------ */
/* Overlay opacite + panneau translateY(8px)->0. L'animation d'entree ne joue
   qu'a la PREMIERE apparition (classe is-in posee par le JS), jamais sur un
   re-rendu partiel du corps ou du pied. */
#staffCockpitPage .ftr-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px 24px;
  overflow-y: auto;
  background: var(--backdrop);
  backdrop-filter: blur(7px) saturate(1.15);
  -webkit-backdrop-filter: blur(7px) saturate(1.15);
}
#staffCockpitPage .ftr-overlay.is-in { animation: ftr-overlay-in 220ms var(--ease-out-strong, cubic-bezier(0.23, 1, 0.32, 1)); }
#staffCockpitPage .ftr-panel {
  position: relative;
  width: min(560px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
  display: flex;
  flex-direction: column;
  max-height: 88vh;
}
#staffCockpitPage .ftr-overlay.is-in .ftr-panel { animation: ftr-panel-in 340ms var(--ease-out-strong, cubic-bezier(0.23, 1, 0.32, 1)); }
/* Filet de lumiere en tete de modale : capte l'oeil sans crier (meme geste que
   .fca-panel::before / .fte-modal::before). */
#staffCockpitPage .ftr-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--accent) 55%, transparent),
    color-mix(in srgb, var(--text) 30%, transparent),
    transparent);
  background-size: 220% 100%;
  animation: ftr-edge-glow 5s ease-in-out infinite;
}
@keyframes ftr-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ftr-panel-in { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes ftr-edge-glow { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }

#staffCockpitPage .ftr-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
}
#staffCockpitPage .ftr-modal-head h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
#staffCockpitPage .ftr-modal-head p { margin-top: 3px; font-size: 12px; color: var(--muted); }
#staffCockpitPage .ftr-close {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
#staffCockpitPage .ftr-close:hover { background-image: linear-gradient(var(--overlay-hover), var(--overlay-hover)); color: var(--text); }
#staffCockpitPage .ftr-close:active { transform: scale(0.97); }
#staffCockpitPage .ftr-close:disabled { opacity: 0.5; cursor: default; }

#staffCockpitPage .ftr-modal-body { padding: 14px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }

#staffCockpitPage .ftr-section { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 12px 4px; }
#staffCockpitPage .ftr-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

#staffCockpitPage .ftr-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-bottom: 8px; }
#staffCockpitPage .ftr-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#staffCockpitPage .ftr-field.ftr-span2 { grid-column: 1 / -1; }
#staffCockpitPage .ftr-field > label { font-size: 12px; color: var(--muted); }
#staffCockpitPage .ftr-field input { height: 34px; font-size: 13px; }
#staffCockpitPage .ftr-hint { font-size: 11px; color: var(--faint); }
#staffCockpitPage .ftr-field input:focus {
  outline: none;
  border-color: var(--line-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 8%, transparent);
}
#staffCockpitPage .ftr-field input:invalid { border-color: var(--danger); }

/* Prix avec suffixe EUR colle a l'interieur du champ. */
#staffCockpitPage .ftr-price-input { position: relative; display: flex; align-items: center; }
#staffCockpitPage .ftr-price-input input { width: 100%; padding-right: 44px; }
#staffCockpitPage .ftr-price-input .ftr-unit {
  position: absolute;
  right: 10px;
  font-size: 11.5px;
  color: var(--faint);
  pointer-events: none;
}

/* Ligne d'interrupteur (retrait) : reutilise mk-switch (deja anime/monochrome). */
#staffCockpitPage .ftr-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}
#staffCockpitPage .ftr-toggle-label { font-size: 12.5px; color: var(--text); }
#staffCockpitPage .ftr-toggle-sub { display: block; font-size: 11px; color: var(--faint); margin-top: 1px; }

#staffCockpitPage .ftr-modal-error {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 12.5px;
}

#staffCockpitPage .ftr-modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
#staffCockpitPage .ftr-modal-foot .ftr-foot-note { margin-right: auto; font-size: 11.5px; color: var(--faint); }

#staffCockpitPage .ftr-panel .pv2-btn:active { transform: scale(0.97); }

@media (max-width: 640px) {
  #staffCockpitPage .ftr-fields { grid-template-columns: 1fr; }
  #staffCockpitPage .ftr-scope { width: 100%; }
  #staffCockpitPage .ftr-scope-select { flex: 1; min-width: 0; }
}

/* Etat final immediat : pas de mouvement pour qui le refuse. */
@media (prefers-reduced-motion: reduce) {
  #staffCockpitPage .ftr-overlay.is-in,
  #staffCockpitPage .ftr-overlay.is-in .ftr-panel,
  #staffCockpitPage .ftr-panel::before { animation: none !important; }
  #staffCockpitPage .ftr-close:active,
  #staffCockpitPage .ftr-panel .pv2-btn:active { transform: none; }
}

/* --- 28. Clients Pinlane (fcp-) : gestion proprietaire des locataires ------ */
/* ============================================================================
   CLIENTS PLATEFORME (platform.admin) : l'outil du PROPRIETAIRE de Pinlane pour
   gerer ses ENTREPRISES clientes. Rendu par assets/founder-clients-platform.js,
   monte dans #staffCockpitPage. Meme langage visuel que founder-centres.js :
   monochrome, le SENS seul porte la couleur (vert actif, bleu essai, ambre
   suspendu, rouge parti), filets 1px var(--line), rayons var(--radius-*),
   chiffres tabulaires var(--font-data). Classes propres prefixees fcp- ; on
   reutilise pv2-*, fck-* et .mk-switch deja definis dans pinlane-staff.css.
   Motion : transform/opacity, ease-out, animation d'entree UNIQUEMENT a la
   premiere apparition (classe is-in posee par le JS). Tout est scope sous
   #staffCockpitPage pour ne rien changer aux pages cockpit voisines.
   ========================================================================== */

#staffCockpitPage .fcp-shell { display: flex; flex-direction: column; gap: 14px; }

/* Grille de clients : cartes larges (plan/contact/centres). */
#staffCockpitPage .fcp-client-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

#staffCockpitPage .fcp-client-card { display: flex; flex-direction: column; gap: 10px; }
#staffCockpitPage .fcp-client-card .fck-card-head { margin-bottom: 0; }

/* Ligne meta : plan, email, telephone. Le plan porte un leger relief. */
#staffCockpitPage .fcp-client-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 12.5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
#staffCockpitPage .fcp-client-meta .fcp-sep { color: var(--faint); }
#staffCockpitPage .fcp-meta-plan {
  font-weight: 600;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  padding: 1px 9px;
  font-size: 11.5px;
}

/* La ligne de metriques de la carte client (CA 30 j / centres / effectif)
   reutilise .fca-metrics (3 colonnes) telle quelle, comme les cartes Centres. */

/* Liste des centres du client. */
#staffCockpitPage .fcp-centers {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
/* Sous-titre "Centres" de la carte : casse normale (DESIGN.md sect.4 bannit le
   label en capitales espacees). Meme registre que .fck-sub du kit. */
#staffCockpitPage .fcp-centers-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 2px;
}
#staffCockpitPage .fcp-centers-empty { margin: 0; font-size: 12.5px; }
#staffCockpitPage .fcp-center-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
}
#staffCockpitPage .fcp-center-row:first-of-type { border-top: 0; }
#staffCockpitPage .fcp-center-name { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
#staffCockpitPage .fcp-center-tail { display: inline-flex; align-items: center; gap: 8px; flex: none; }
#staffCockpitPage .fcp-center-staff { color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Le pied de carte client (statut editable + "Ajouter un centre") reutilise le
   pied partage .fck-card-foot + le select .fck-status-* (section 22.c), commun
   avec les cartes Centres. */

/* Section centres orphelins : meme filet, discret. */
#staffCockpitPage .fcp-orphans .fcp-centers { border-top: 0; padding-top: 0; }

/* ============================================================================
   MODALE : creation client / ajout de centre, puis "acces crees". Overlay
   opacite + panneau translateY(8px)->0, uniquement a la PREMIERE apparition
   (classe is-in). Le head/corps/pied se rafraichissent en place, jamais le
   panneau : l'animation ne rejoue pas entre l'etape formulaire et l'etape codes.
   ========================================================================== */
#staffCockpitPage .fcp-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px 24px;
  overflow-y: auto;
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
#staffCockpitPage .fcp-overlay.is-in { animation: fcp-overlay-in var(--dur-enter, 240ms) var(--ease-out-strong, cubic-bezier(0.23, 1, 0.32, 1)); }
#staffCockpitPage .fcp-panel {
  width: min(560px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
  display: flex;
  flex-direction: column;
  max-height: 88vh;
}
#staffCockpitPage .fcp-overlay.is-in .fcp-panel { animation: fcp-panel-in var(--dur-enter, 240ms) var(--ease-out-strong, cubic-bezier(0.23, 1, 0.32, 1)); }
@keyframes fcp-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fcp-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

#staffCockpitPage .fcp-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
}
#staffCockpitPage .fcp-modal-head h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
#staffCockpitPage .fcp-modal-head p { margin-top: 3px; font-size: 12px; color: var(--muted); }
#staffCockpitPage .fcp-close {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
#staffCockpitPage .fcp-close:hover:not(:disabled) { background-image: linear-gradient(var(--overlay-hover), var(--overlay-hover)); color: var(--text); }
#staffCockpitPage .fcp-close:active:not(:disabled) { transform: scale(0.97); }
#staffCockpitPage .fcp-close:disabled { opacity: 0.5; cursor: default; }

#staffCockpitPage .fcp-modal-body { padding: 14px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }

#staffCockpitPage .fcp-section { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 12px 4px; }
#staffCockpitPage .fcp-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

#staffCockpitPage .fcp-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-bottom: 8px; }
#staffCockpitPage .fcp-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#staffCockpitPage .fcp-field.fcp-span2 { grid-column: 1 / -1; }
#staffCockpitPage .fcp-field > label { font-size: 12px; color: var(--muted); }
#staffCockpitPage .fcp-field input,
#staffCockpitPage .fcp-field select { height: 34px; font-size: 13px; }
#staffCockpitPage .fcp-hint { font-size: 11px; color: var(--faint); }
#staffCockpitPage .fcp-field input:focus,
#staffCockpitPage .fcp-field select:focus { outline: none; border-color: var(--line-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 8%, transparent); }
#staffCockpitPage .fcp-field input:invalid { border-color: var(--danger); }

#staffCockpitPage .fcp-modal-error {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 12.5px;
}

/* --- Etape "acces crees" : l'avertissement fort, puis les codes en clair. --- */
#staffCockpitPage .fcp-codes-warn {
  padding: 10px 12px;
  border: 1px solid var(--warning);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--warning-soft);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.5;
}
#staffCockpitPage .fcp-codes-warn strong { display: block; color: var(--text); margin-bottom: 2px; }

#staffCockpitPage .fcp-codes { display: flex; flex-direction: column; gap: 8px; }
#staffCockpitPage .fcp-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
/* Le code Direction est celui qu'on remet au client : filet renforce, un anneau
   discret, jamais une couleur de marque criarde. */
#staffCockpitPage .fcp-code-row.is-primary {
  border-color: var(--text);
  box-shadow: inset 0 0 0 1px var(--text);
}
#staffCockpitPage .fcp-code-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#staffCockpitPage .fcp-code-role {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
#staffCockpitPage .fcp-code-tag {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 11px;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  padding: 0 8px;
}
#staffCockpitPage .fcp-code-value {
  font-family: var(--font-data);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text);
  overflow-wrap: anywhere;
}
#staffCockpitPage .fcp-code-missing { font-family: inherit; font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: var(--faint); }
#staffCockpitPage .fcp-code-copy { flex: none; height: var(--h-sm, 32px); padding: 0 12px; font-size: 12px; }
#staffCockpitPage .fcp-code-copy.is-copied { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, var(--line)); }

#staffCockpitPage .fcp-modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}
#staffCockpitPage .fcp-modal-foot .fcp-foot-note { margin-right: auto; font-size: 11.5px; color: var(--faint); }
#staffCockpitPage .fcp-panel .pv2-btn:active:not(:disabled) { transform: scale(0.97); }

@media (max-width: 640px) {
  #staffCockpitPage .fcp-client-grid { grid-template-columns: 1fr; }
  #staffCockpitPage .fcp-fields { grid-template-columns: 1fr; }
  #staffCockpitPage .fcp-code-row { flex-direction: column; align-items: stretch; }
  #staffCockpitPage .fcp-code-copy { width: 100%; }
}

/* Etat final immediat pour qui refuse le mouvement. */
@media (prefers-reduced-motion: reduce) {
  #staffCockpitPage .fcp-overlay.is-in,
  #staffCockpitPage .fcp-overlay.is-in .fcp-panel { animation: none; }
  #staffCockpitPage .fcp-close:active:not(:disabled),
  #staffCockpitPage .fcp-panel .pv2-btn:active:not(:disabled) { transform: none; }
}

/* --- 29. Direction : Comparer mes centres (dir-cmp-) + Retention (dir-ret-) - */
/* ============================================================================
   POSTE D'OBSERVATION DIRECTION : sections de DECISION (2026-07-21)
   ----------------------------------------------------------------------------
   Deux capacites AJOUTEES au tableau de bord Direction, distinctes de la config
   Etablissement :
     1) Comparer mes centres  (.dir-cmp-*)
     2) Retention et clients  (.dir-ret-*)
   Meme langage visuel que le reste du namespace dir-* (Vercel/Linear) :
   monochrome, le SENS seul porte la couleur (vert = leader/fidele), filets 1px
   var(--line), rayons var(--radius-*), chiffres tabulaires var(--font-data),
   etats vides calmes. On REUTILISE dir-note / dir-table / dir-num /
   dir-client-name / dir-card-title ; ces classes n'ajoutent que le manquant.
   Motion (Emil Kowalski) : transform/opacity seulement, ease-out, jamais ease-in.
   Etat final immediat sous prefers-reduced-motion.
   A COLLER dans assets/pinlane-staff.css, a la suite du bloc dir-* existant.
   ========================================================================== */

/* --- Coque commune des deux sections : carte bordee facon .dir-focus -------- */
.dir-cmp,
.dir-ret {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 18px 20px 20px;
}
.dir-cmp-head,
.dir-ret-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.dir-cmp-title,
.dir-ret-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.dir-cmp-sub,
.dir-ret-sub {
  margin: 0;
  font-size: 12.5px;
  color: var(--faint);
}

/* --- Comparer mes centres : tableau une ligne par centre ------------------- */
.dir-cmp-scroll { overflow-x: auto; }
.dir-cmp-table { width: 100%; }
.dir-cmp-table td,
.dir-cmp-table th[scope="row"] {
  padding-top: 11px;
  padding-bottom: 11px;
}
/* Nom de centre : colonne de tete, non tronquee. Le padding gauche laisse la
   place au filet du centre courant - sans lui, le trait touchait la premiere
   lettre et la ligne paraissait cassee. */
.dir-cmp-name {
  text-align: left;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  padding-left: 12px;
  padding-right: var(--space-4);
}
.dir-cmp-center { font-weight: 600; }
.dir-cmp-table thead th { padding-left: 12px; }
.dir-cmp-table thead th.dir-num { padding-left: 0; }

/* Pas de separateur ajoute ici : .dir-table pose deja un border-bottom sur
   chaque cellule. En doubler un par le haut dessinait un cadre autour de la
   ligne teintee (celle du centre courant) - ce que Movsar a vu comme un bug. */
@media (hover: hover) {
  .dir-cmp-table tbody tr:hover > * { background: color-mix(in srgb, var(--text) 3%, transparent); }
}

/* Centre COURANT : filet gauche renforce + fond a peine teinte, aucune couleur
   de marque (discipline dir-kpi.is-active). */
/* Teinte posee sur la LIGNE, pas cellule par cellule : en peignant chaque
   cellule avec une couleur opaque, la bande s'arretait net au bord du premier
   td et dessinait un rectangle au milieu de la ligne. */
.dir-cmp-row.is-current { background: color-mix(in srgb, var(--text) 4%, transparent); }
/* Filet du centre courant en BORDURE, pas en box-shadow : dans une cellule de
   tableau, Chromium peint l ombre interne sur tout le perimetre de la cellule -
   d ou le rectangle clair autour du nom, pris pour un bug d affichage. */
.dir-cmp-row.is-current > .dir-cmp-name { border-left: 2px solid var(--line-strong); padding-left: 10px; }
.dir-cmp-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  background: var(--subtle);
  border: 1px solid var(--line);
  border-radius: 999px;
  vertical-align: middle;
}
.dir-cmp-warn {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--faint);
}

/* Leader d'une colonne : marque DISCRETE (pastille verte + graisse), le sens
   seul colore. */
.dir-cmp-best-mark {
  position: relative;
  font-weight: 600;
  color: var(--success);
  padding-left: 13px;
}
.dir-cmp-best-mark::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--success);
}

/* Un seul centre : note calme au-dessus du tableau. */
.dir-cmp-single {
  margin: 0 0 12px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--muted);
  background: var(--subtle);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md, 8px);
}

/* barChart du CA par centre : draw-in gere par la librairie (plc-*). */
.dir-cmp-chart { margin-top: 16px; min-height: 200px; }
.dir-cmp-chart:empty { min-height: 0; margin-top: 0; }

/* --- Retention et clients : segment (donut + stats) | dormants ------------- */
.dir-ret-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 20px;
  align-items: start;
}
.dir-ret-seg { min-width: 0; }
.dir-ret-seg-chart { min-height: 180px; }
.dir-ret-seg-chart:empty { min-height: 0; }

.dir-ret-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.dir-ret-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 10px);
  background: var(--surface);
  transition: border-color 160ms ease-out, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) {
  .dir-ret-stat:hover { border-color: var(--line-strong); transform: translateY(-2px); }
}
.dir-ret-stat-label { font-size: 11.5px; color: var(--faint); font-weight: 500; }
.dir-ret-stat-value {
  font-family: var(--font-data);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Dormants : la phrase actionnable domine, la table suit. */
.dir-ret-lapsed { min-width: 0; }
.dir-ret-lapsed-head {
  margin: 0 0 12px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: color-mix(in srgb, var(--warning, #d97706) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warning, #d97706) 26%, var(--line));
  border-radius: var(--radius-md, 8px);
}
.dir-ret-lapsed-scroll { overflow-x: auto; }
.dir-ret-lapsed-table { width: 100%; }
.dir-ret-lapsed-table th[scope="row"] { text-align: left; font-weight: 500; }
.dir-ret-last { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Entree douce des deux sections : montee unique translateY + opacity. --- */
.dir-cmp,
.dir-ret {
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}
.dir-cmp-body,
.dir-ret-body {
  animation: dir-decision-in 360ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes dir-decision-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Ligne de comparaison : leger stagger au survol de la table (feedback calme). */
@media (hover: hover) {
  .dir-cmp-row { transition: background-color 140ms ease-out; }
  .dir-cmp-table tbody tr:hover > * { background: color-mix(in srgb, var(--text) 3%, var(--surface)); }
  .dir-ret-lapsed-table tbody tr:hover > * { background: color-mix(in srgb, var(--text) 3%, var(--surface)); }
}

/* --- Responsive : la retention passe en une colonne, la comparaison scrolle. */
@media (max-width: 860px) {
  .dir-ret-grid { grid-template-columns: 1fr; }
  .dir-cmp,
  .dir-ret { padding: 16px 14px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .dir-cmp-body,
  .dir-ret-body { animation: none; }
  .dir-ret-stat { transition: none; }
  .dir-cmp,
  .dir-ret { transition: none; }
}

/* --- 30. Direction : navigation en vues + tailles de graphes coherentes --- */
/* ============================================================================
   POSTE D'OBSERVATION DIRECTION - VUES (refonte 2026-07-21)
   A COLLER dans assets/pinlane-staff.css (apres le bloc dir-* existant : ces
   regles ont une specificite >= aux regles d'origine ou arrivent plus tard,
   elles GAGNENT sans toucher au reste).

   Objet : la page Direction ne s'empile plus en un long scroll aux tailles de
   graphes disparates. On classe le contenu en 4 vues (segmented nav facon
   Linear) et on STANDARDISE la hauteur des graphes (grille = meme hauteur pour
   toutes les cartes ; grand focus a part).

   Discipline console (Vercel/Linear + Emil Kowalski) :
   - monochrome, le SENS seul porte la couleur ; filets 1px var(--line) ;
   - variables theme UNIQUEMENT (clair + sombre), aucune couleur en dur ;
   - motion : transform / opacity uniquement, ease-out, <= 300ms UI ;
     l'indicateur qui glisse d'une pilule a l'autre = --ease-in-out-strong
     (deplacement A -> B) ; prefers-reduced-motion : etat final immediat.
   Classes : dir-nav-* (nouveau) ; reutilise dir-* pour le reste.
   ============================================================================ */

/* --- Corps : rythme vertical entre le nav et la vue, et entre les sections
   d'une meme vue (KPI + focus, tables + retention...). --------------------- */
.dir-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.dir-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

/* --- Segmented nav : une pilule par vue, indicateur actif coulissant. -------
   Le conteneur porte --dir-nav-count (nombre de vues) et --dir-nav-index (vue
   active). L'indicateur lit ces variables : sur un changement de vue, seule
   --dir-nav-index bouge -> l'indicateur GLISSE (transform), le nav n'est pas
   re-rendu. Grille a colonnes egales : toutes les pilules ont la meme largeur,
   donc translateX(index * 100%) tombe pile sur chaque segment. */
.dir-nav {
  --dir-nav-pad: 4px;
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  padding: var(--dir-nav-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--subtle);
  max-width: 100%;
  width: fit-content;
}

.dir-nav-indicator {
  position: absolute;
  top: var(--dir-nav-pad);
  bottom: var(--dir-nav-pad);
  left: var(--dir-nav-pad);
  width: calc((100% - 2 * var(--dir-nav-pad)) / var(--dir-nav-count, 4));
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
  transform: translateX(calc(var(--dir-nav-index, 0) * 100%));
  transition: transform var(--dur-move) var(--ease-in-out-strong);
  pointer-events: none;
}

.dir-nav-pill {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--muted);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: color var(--dur) var(--ease-out-strong);
}
@media (hover: hover) {
  .dir-nav-pill:hover { color: var(--text); }
}
.dir-nav-pill.is-active { color: var(--text); font-weight: 600; }
.dir-nav-pill:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* --- Grand graphe focus (vue Synthese, seul, pleine largeur) : viewBox large
   et plat cote JS (height:170) -> hauteur rendue ~320px au bureau, jamais le
   graphe demesure d'avant. On garde une hauteur mini pour l'etat vide. ------ */
.dir-focus-chart {
  min-height: 200px;
}

/* --- Grille de graphes : hauteur STANDARDISEE. Toutes les cartes de la grille
   ont la MEME hauteur de graphe (240px), quel que soit le type (barres, ligne,
   donut). Le graphe est centre dans sa boite : les series lignes/barres
   remplissent la largeur (hauteur naturelle < 240 aux largeurs de colonne),
   le donut compact se centre. Fini le melange enorme / tout fin. ----------- */
.dir-grid {
  align-items: stretch;
}
.dir-grid .dir-chart {
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dir-grid .dir-chart > * {
  width: 100%;
}
/* Carte sans valeur : elle ne reserve plus la hauteur d'un graphe. Neuf cartes
   vides a 240 px, c'etait 2 000 px de page pour une phrase repetee neuf fois. */
.dir-grid .dir-chart:has(.plc-empty) {
  height: auto;
  min-height: 0;
}
/* Heatmap : pleine largeur, forme differente (grille jour x heure) -> hauteur
   propre, hors du gabarit 240px des graphes de colonne. */
.dir-grid .dir-chart.dir-chart-heat {
  height: auto;
  min-height: 180px;
  display: block;
  overflow: visible;
}

/* --- Mobile : la grille passe a une colonne (regle existante) ; on relache la
   hauteur fixe (graphes empiles, hauteur naturelle) et le nav prend toute la
   largeur pour rester tapable. -------------------------------------------- */
@media (max-width: 860px) {
  .dir-nav {
    width: 100%;
  }
  .dir-grid .dir-chart {
    height: auto;
    min-height: 180px;
    display: block;
    overflow: visible;
  }
}

/* --- prefers-reduced-motion : l'indicateur se pose a sa place sans glisser. - */
@media (prefers-reduced-motion: reduce) {
  .dir-nav-indicator { transition: none; }
  .dir-nav-pill { transition: none; }
}

/* --- 31. Direction : vue Provenance & public (dir-prov-) ------------------ */
/* ============================================================================
   POSTE D'OBSERVATION DIRECTION - VUE PROVENANCE (5e onglet, 2026-07-21)
   A COLLER dans assets/pinlane-staff.css (apres le bloc dir-* / dir-nav-*
   existant : ces regles arrivent plus tard, elles GAGNENT sans toucher au reste).

   Objet : POURQUOI les gens viennent (occasion declaree) et D'OU vient la
   reservation (canal, source marketing). Plus une carte HONNETE « Audience »
   pour la demographie (age, sexe, zone) qui viendra de Google Analytics et
   n'est pas encore connectee : bloc « a connecter », AUCUN faux chiffre.

   Discipline console (Vercel / Linear + Emil Kowalski) :
   - monochrome, le SENS seul porte la couleur ; filets 1px var(--line) ;
   - variables theme UNIQUEMENT (clair + sombre), aucune couleur en dur ;
   - rayons var(--radius-md/lg), tabular-nums, motion transform/opacity ease-out.
   Classes : dir-prov-* (nouveau) ; reutilise dir-card / dir-chart / dir-table /
   dir-note / dir-num pour le reste.
   ============================================================================ */

/* --- Coque de la vue : carte bordee facon .dir-cmp / .dir-ret. -------------- */
.dir-prov {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 18px 20px 20px;
}
.dir-prov-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.dir-prov-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.dir-prov-sub {
  margin: 0;
  font-size: 12.5px;
  color: var(--faint);
}

/* Entree douce (montee unique translateY + opacity), reutilise dir-decision-in
   defini par les sections de decision. */
.dir-prov-body {
  animation: dir-decision-in 360ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* --- Grille des blocs : 2 colonnes. Occasions et Audience prennent toute la
   largeur (dir-prov-card-wide), Canaux et Sources se partagent une rangee. --- */
.dir-prov-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.dir-prov-card-wide { grid-column: 1 / -1; }

/* --- « Pourquoi ils viennent » : barChart des occasions, centre dans une boite
   de hauteur STANDARDISEE (240px, meme gabarit que la grille Activite), puis la
   table sous le graphe. Le SVG scale pour tenir dans la boite (meet), jamais de
   graphe demesure ni clippe. ------------------------------------------------- */
.dir-prov-occ {
  height: 240px;
  margin-bottom: 14px;
}
.dir-prov-occ > * { height: 100%; }
.dir-prov-occ .plc-svg { width: 100%; height: 100%; }

.dir-prov-table { margin-top: 2px; }

/* --- « Canaux de reservation » : donutChart compact + valeurs chiffrees. ----- */
.dir-prov-chan-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dir-prov-chan {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 10px);
  background: var(--surface);
}
.dir-prov-chan-label { font-size: 13px; font-weight: 500; color: var(--text); }
.dir-prov-chan-value {
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- « Audience » : carte HONNETE « a connecter ». Aucune donnee inventee :
   juste la promesse de la source (Google Analytics) et une pilule INERTE. ---- */
.dir-prov-audience {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.dir-prov-audience-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 64ch;
}
.dir-prov-audience-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--faint);
  background: var(--subtle);
  border: 1px dashed var(--line);
  border-radius: 999px;
  cursor: not-allowed;
  user-select: none;
}
.dir-prov-audience-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--faint);
  opacity: 0.7;
}

/* --- Responsive : une colonne, et on relache la hauteur fixe du graphe des
   occasions (empile, hauteur naturelle). ----------------------------------- */
@media (max-width: 860px) {
  .dir-prov-grid { grid-template-columns: 1fr; }
  .dir-prov { padding: 16px 14px 18px; }
  .dir-prov-occ {
    height: auto;
    min-height: 200px;
  }
  .dir-prov-occ .plc-svg { height: auto; }
}

/* --- prefers-reduced-motion : entree immediate, pas de montee. -------------- */
@media (prefers-reduced-motion: reduce) {
  .dir-prov-body { animation: none; }
}

/* --- 32. Direction : vue Analyse (board customisable, dir-analyse-) ------- */
/* Vue Analyse du poste d'observation Direction (6e onglet du segmented nav).
   Le contenu est window.PinlaneAnalyticsBoard : le gros du style vient de
   pinlane-analytics-board.css (classes pab-). Ici on ne cadre que le slot et
   l'hote persistant pour qu'ils remplissent la vue sans debordement horizontal.
   Monochrome, variables de theme, aucun <header> (piege body.admin-mode). */

/* Fusion 2026-07-23 : le board vit desormais EN BAS de la vue Activite, sous la
   grille de graphes ancres. Filet net de separation + intitule « Mon analyse ». */
.dir-analyse {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
}
.dir-analyse-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dir-analyse-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.dir-analyse-sub {
  margin: 0;
  font-size: 12.5px;
  color: var(--faint);
}

.dir-analyse-slot,
.dir-analyse-host {
  min-width: 0;
  width: 100%;
}

/* --- Vue Activite : sous-bande de qualite (6 micro-stats reelles, non cliquables)
   sous les chapitres. Grille dense, chiffres en Geist Mono tabulaires. --------- */
.dir-microband {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.dir-micro {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--surface);
}
.dir-micro-label { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.dir-micro-value {
  font-family: var(--font-data);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* --- Chapitres d'activite : fin label capitales + la grille qui le suit de pres.
   Le rythme entre chapitres vient de .dir-view (gap) ; le label colle a sa grille. */
.dir-actsec {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dir-section-label {
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ============================================================================
   22.c PLATEFORME (extension) : KPI + facturation (Clients Pinlane), ligne KPI
   business + graphe (Cockpit), totaux + client + filtres (Centres). Meme
   discipline Vercel : filets 1px, monochrome sauf le sens, chiffres en Geist
   Mono tabulaires, un seul accent. Aucune balise <header> (body.staff-mode).
   ========================================================================== */

/* La ligne KPI de la page Clients Pinlane reutilise desormais .fck-stats
   .fck-biz-stats du kit (voir kpiHtml) : meme grille cadree que le Cockpit. Les
   classes .fcp-kpi-* n'existent plus que comme hooks du gate, sans style propre
   (le visuel vient de .fck-stat-num / .fck-stat-hint). */

/* --- Barre de filtre partagee (Clients Pinlane + Centres) : la recherche
   s'etire, les selects gardent une largeur fixe et restent en ligne. L'ancienne
   .fcp-filter laissait le select passer en pleine largeur sur sa propre ligne. */
#staffCockpitPage .fck-filterbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 4px 0 12px;
}
#staffCockpitPage .fck-filterbar .pv2-input {
  height: var(--h-md);
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
#staffCockpitPage .fck-filterbar .fck-filter-search { flex: 1 1 240px; min-width: 200px; }
#staffCockpitPage .fck-filterbar .fck-filter-select { flex: 0 0 auto; width: auto; min-width: 190px; }
#staffCockpitPage .fck-filterbar .pv2-input:focus {
  outline: none;
  border-color: var(--text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 12%, transparent);
}
@media (max-width: 640px) {
  #staffCockpitPage .fck-filterbar .fck-filter-search,
  #staffCockpitPage .fck-filterbar .fck-filter-select { flex: 1 1 100%; min-width: 0; width: auto; }
}

/* --- Carte de grille fondateur en colonne + pied colle en bas (Centres). Les
   cartes Clients ont deja .fcp-client-card ; Centres reutilisent ce modele pour
   que les pieds s'alignent quelle que soit la hauteur du contenu. --- */
#staffCockpitPage .fca-center-card { display: flex; flex-direction: column; gap: 10px; }
/* Grille Centres : cartes plus larges que la grille adoption du cockpit
   (contenu plus dense : client, resume, 3 metriques, statut, action). */
#staffCockpitPage .fca-center-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* --- Pied de carte partage (Clients + Centres) : le statut editable a gauche
   (select du kit, lisible a TOUTE largeur, remplace le segmente 3 etats qui se
   chevauchait), l'action a droite. --- */
#staffCockpitPage .fck-card-foot {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
#staffCockpitPage .fck-card-foot > .pv2-btn { flex: none; white-space: nowrap; }
#staffCockpitPage .fck-status-pick { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
#staffCockpitPage .fck-status-lab { font-size: 11px; color: var(--faint); }
#staffCockpitPage .fck-status-select {
  height: var(--h-md);
  width: 100%;
  font-size: 12.5px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  padding: 0 10px;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
#staffCockpitPage .fck-status-select:hover:not(:disabled) { border-color: var(--text); }
#staffCockpitPage .fck-status-select:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 12%, transparent); }
#staffCockpitPage .fck-status-select:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 640px) {
  #staffCockpitPage .fck-card-foot { flex-direction: column; align-items: stretch; }
  #staffCockpitPage .fck-card-foot > .pv2-btn { width: 100%; }
}

/* --- Facturation d'une carte client : prix mensuel EDITABLE. Le CA 30 j reel
   a rejoint la ligne de metriques (avec centres et effectif). Colonne simple :
   label, ligne d'edition (input + unite + Enregistrer), indice eventuel. --- */
#staffCockpitPage .fcp-billing {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
#staffCockpitPage .fcp-billing-lab { font-size: 11px; color: var(--faint); }
#staffCockpitPage .fcp-billing-edit { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#staffCockpitPage .fcp-price-input {
  width: 96px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
#staffCockpitPage .fcp-price-input:focus {
  outline: none;
  border-color: var(--text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 12%, transparent);
}
#staffCockpitPage .fcp-price-input:disabled { opacity: 0.6; }
#staffCockpitPage .fcp-price-unit { font-size: 11.5px; color: var(--faint); white-space: nowrap; }

/* --- Cockpit : ligne KPI business + note de dedup Incidents --------------- */
/* En-tete business du cockpit : la ligne de KPI devient une grille cadree a 4
   colonnes separees par un filet, pour repondre "comment va mon business ?" en
   un coup d'oeil. Label muted au-dessus, nombre Geist Mono en dessous. */
#staffCockpitPage .fck-biz-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 2px 0;
}
#staffCockpitPage .fck-biz-stats .fck-stat {
  gap: 6px;
  padding: 2px 20px;
  border-left: 1px solid var(--line);
}
#staffCockpitPage .fck-biz-stats .fck-stat:first-child { border-left: 0; padding-left: 0; }
#staffCockpitPage .fck-biz-stats .fck-stat-num { font-size: 26px; }
@media (max-width: 640px) {
  #staffCockpitPage .fck-biz-stats { grid-template-columns: 1fr 1fr; gap: 16px 0; }
  #staffCockpitPage .fck-biz-stats .fck-stat:nth-child(odd) { border-left: 0; padding-left: 0; }
}
#staffCockpitPage .fck-insight-sum { color: var(--muted); }
#staffCockpitPage .fck-incidents-note { margin: 12px 0 0; }

/* --- Centres : client proprietaire + totaux ------------------------------- */
#staffCockpitPage .fca-owner {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 2px 0 4px;
  font-size: 12.5px;
  min-width: 0;
}
#staffCockpitPage .fca-owner-lab { font-size: 11px; color: var(--faint); flex: none; }
/* min-width:0 : sans lui, une raison sociale longue (ex. "Bowling du Lac Longue
   Raison Sociale SRL") ne peut pas se replier dans la carte et deborde a droite. */
#staffCockpitPage .fca-owner-name { color: var(--text); font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
#staffCockpitPage .fca-owner-name.fca-owner-none { color: var(--muted); font-weight: 400; font-style: italic; }

/* La ligne de totaux Centres reutilise desormais .fck-stats.fck-biz-stats du
   kit (voir totalsBar), comme le Cockpit et Clients Pinlane : plus de classes
   .fca-total-* propres. */

/* --- Suppression plateforme (Clients Pinlane + Centres) -------------------- */
/* Boutons destructifs SOBRES dans les listes : bouton secondaire teinte danger
   (texte rouge, filet inchange), jamais un bloc rouge plein au milieu d'une
   carte. Le rouge PLEIN est reserve au bouton de CONFIRMATION de la modale,
   une fois que le texte a NOMME ce qui sera supprime. */
#staffCockpitPage .fck-danger-btn { color: var(--danger); }
#staffCockpitPage .fck-danger-btn:hover:not(:disabled) {
  background: var(--danger-soft);
  background-image: none;
  border-color: var(--danger);
}
#staffCockpitPage .fck-danger-btn:disabled { opacity: 0.55; cursor: default; }
#staffCockpitPage .pv2-btn.fck-confirm-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff; /* meme precedent que .staff-danger-btn : blanc lisible sur --danger dans les 2 themes */
}
#staffCockpitPage .pv2-btn.fck-confirm-danger:hover:not(:disabled) { opacity: 0.9; background-image: none; }
#staffCockpitPage .pv2-btn.fck-confirm-danger:disabled { opacity: 0.55; cursor: default; }
/* Le pied de carte porte desormais 3 controles (statut + supprimer + action) :
   il se replie proprement au lieu de deborder dans les cartes etroites. */
#staffCockpitPage .fck-card-foot { flex-wrap: wrap; }
/* Retirer un centre depuis une carte client : bouton compact en bout de ligne. */
#staffCockpitPage .fcp-center-del { height: 24px; padding: 0 8px; font-size: 11.5px; }
/* Corps de la confirmation : un seul bloc, filet gauche danger, qui NOMME ce
   qui sera supprime (client + centres, ou centre + acces) et la politique de
   refus du serveur. */
#staffCockpitPage .fck-confirm-warn {
  border: 1px solid var(--line);
  border-left: 2px solid var(--danger);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}
#staffCockpitPage .fck-confirm-warn strong { color: var(--text); font-weight: 600; }
#staffCockpitPage .fck-confirm-irrev { display: block; margin-top: 6px; color: var(--danger); font-weight: 500; }

/* ==========================================================================
   22. CONSOLE PLATEFORME v2 (2026-07-28) : la console du chef, refaite.
   ==========================================================================
   Demande de Movsar : « ameliore drastiquement tout le design frontend, c'est
   vraiment moche, recommence de 0, pour le cote admin Pinlane ».

   CE QUI N'ALLAIT PAS, mesure sur les 7 pages avec les vraies donnees de prod :
   une page de 5 057 px (le Cockpit) et six pages entre 331 et 978 px. Neuf
   panneaux empiles pleine largeur, tous au meme poids visuel, aucun ordre de
   lecture. Le journal d'audit occupait la moitie du Cockpit alors qu'il a sa
   propre page. Les etats vides tenaient en une phrase grise dans un cadre de
   300 px de haut.

   LE SYSTEME :
   1. GRILLE 12 COLONNES. Un panneau n'est plus forcement pleine largeur : il
      declare sa portee (`is-half`, `is-third`, `is-two-thirds`). Le contenu
      court cesse d'occuper une bande vide de 1 100 px.
   2. HIERARCHIE PAR GROUPES. Les panneaux se rangent sous un intertitre
      (`fck2-group`) qui dit de quoi on parle : ce qui casse, le business,
      l'IA. On lit une page, plus une pile.
   3. DENSITE CALIBREE. 13 px de base, tables a 12,5 px, chiffres tabulaires.
      Le padding des panneaux tombe de 20 a 16 px : plus de lignes a l'ecran
      sans reduire la lisibilite.
   4. ZERO COULEUR EN DUR. Tout passe par les tokens, parite light/dark.
   ========================================================================== */

#staffCockpitPage .fck-shell {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4);
  align-content: start;
  max-width: 1320px;
}
/* Par defaut un enfant direct prend toute la largeur : les blocs qui ne
   declarent rien gardent le comportement d'avant, aucune regression. */
#staffCockpitPage .fck-shell > * { grid-column: 1 / -1; }
#staffCockpitPage .fck-shell > .is-half { grid-column: span 6; }
#staffCockpitPage .fck-shell > .is-third { grid-column: span 4; }
#staffCockpitPage .fck-shell > .is-two-thirds { grid-column: span 8; }
@media (max-width: 1100px) {
  #staffCockpitPage .fck-shell > .is-half,
  #staffCockpitPage .fck-shell > .is-third,
  #staffCockpitPage .fck-shell > .is-two-thirds { grid-column: 1 / -1; }
}

/* --- 22.1 L'en-tete de page : sobre, informatif, sans ceremonie ----------- */
#staffCockpitPage .pv2-bar {
  align-items: flex-end;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}
#staffCockpitPage .pv2-bar h1 { font-size: 24px; font-weight: 620; letter-spacing: -0.02em; margin: 2px 0 4px; }
#staffCockpitPage .pv2-bar-crumb { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
#staffCockpitPage .pv2-bar-sub { font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 76ch; }

/* --- 22.2 L'intertitre de groupe : ce qui donne un ordre de lecture ------- */
#staffCockpitPage .fck2-group {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: var(--space-5) 0 calc(var(--space-2) * -1);
}
#staffCockpitPage .fck2-group h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
#staffCockpitPage .fck2-group p { margin: 0; font-size: 12.5px; color: var(--faint); }
#staffCockpitPage .fck2-group::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* --- 22.3 Panneaux : plus denses, bord discret, titre qui ne crie pas ----- */
#staffCockpitPage .pv2-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 0;
  overflow: hidden;
}
[data-theme='dark'] #staffCockpitPage .pv2-panel { background: var(--raised); }
#staffCockpitPage .pv2-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 14px 16px 10px;
}
#staffCockpitPage .pv2-panel-head h2 { font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; }
#staffCockpitPage .pv2-panel-sub { margin: 3px 0 0; font-size: 12px; line-height: 1.5; color: var(--faint); max-width: 68ch; }
#staffCockpitPage .pv2-panel > *:not(.pv2-panel-head) { padding-left: 16px; padding-right: 16px; }
#staffCockpitPage .pv2-panel > *:last-child { padding-bottom: 14px; }
#staffCockpitPage .pv2-panel > table,
#staffCockpitPage .pv2-panel > .fck2-flush { padding-left: 0; padding-right: 0; }

/* --- 22.4 Chiffres : la carte de stat, unique et tabulaire ---------------- */
#staffCockpitPage .pv2-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-3);
}
#staffCockpitPage .pv2-stat {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 14px 16px 16px;
}
[data-theme='dark'] #staffCockpitPage .pv2-stat { background: var(--raised); }
#staffCockpitPage .pv2-stat-label { font-size: 12px; font-weight: 500; color: var(--muted); }
#staffCockpitPage .pv2-stat-value {
  margin-top: 6px;
  font-family: var(--font-data);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
#staffCockpitPage .pv2-stat-foot { margin-top: 6px; font-size: 11.5px; line-height: 1.45; color: var(--faint); }

/* --- 22.5 Tables : lisibles a la ligne, chiffres alignes ------------------ */
#staffCockpitPage .pv2-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
#staffCockpitPage .pv2-table thead th {
  padding: 6px 16px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
#staffCockpitPage .pv2-table td {
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  vertical-align: top;
  line-height: 1.45;
}
#staffCockpitPage .pv2-table tbody tr:last-child td { border-bottom: 0; }
#staffCockpitPage .pv2-table tbody tr:hover td { background: var(--subtle); }
#staffCockpitPage .pv2-table td:not(:first-child) { font-variant-numeric: tabular-nums; }
#staffCockpitPage .pv2-cell-sub { display: block; margin-top: 2px; font-size: 11.5px; color: var(--faint); }

/* --- 22.6 Etats vides : une phrase qui DIT, pas un cadre gris ------------- */
#staffCockpitPage .fck2-empty {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 16px 20px;
  border-radius: var(--radius-md);
  background: var(--subtle);
}
#staffCockpitPage .fck2-empty strong { font-size: 13px; font-weight: 600; color: var(--text); }
#staffCockpitPage .fck2-empty span { font-size: 12.5px; line-height: 1.5; color: var(--faint); }

/* --- 22.7 Ligne de refus agregee (« ce qui casse ») ----------------------- */
#staffCockpitPage .fck2-hit {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-data);
  font-size: 11.5px;
  color: var(--faint);
}
#staffCockpitPage .fck2-count {
  min-width: 34px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* --- 22.8 Clients Pinlane : la table du contrat ---------------------------
   La page listait des CARTES de 370 px dans une colonne de 1 130 : 75 % de vide
   mesure, et deux clients ne se comparaient pas. Une table les aligne, tient
   50 lignes, et garde les memes actions. Les centres d'un client vivent dans
   une sous-ligne : ils lui appartiennent, ils ne meritent pas une colonne. */
#staffCockpitPage .fcp-table td { vertical-align: middle; }
#staffCockpitPage .fcp-row td { border-bottom: 0; }
#staffCockpitPage .fcp-row-centers td { padding-top: 0; padding-bottom: 12px; }
#staffCockpitPage .fcp-centers { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; border-top: 0; padding: 0; }
#staffCockpitPage .fcp-center-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  font-size: 11.5px;
  color: var(--text);
  background: var(--subtle);
}
#staffCockpitPage .fcp-center-pill em { font-style: normal; font-family: var(--font-data); color: var(--faint); }
#staffCockpitPage .fcp-mini {
  border: 0;
  background: transparent;
  padding: 0 2px;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--faint);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#staffCockpitPage .fcp-mini:hover { color: var(--danger); }
#staffCockpitPage .fcp-actions { white-space: nowrap; }
#staffCockpitPage .fcp-actions > * + * { margin-left: 6px; }
#staffCockpitPage .fcp-billing-lab.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
#staffCockpitPage .fcp-billing-edit { display: flex; align-items: center; gap: 6px; }
#staffCockpitPage .fcp-price-input { width: 88px; }
#staffCockpitPage .fcp-hint { display: block; margin-top: 4px; font-size: 11px; color: var(--faint); }