/* ==========================================================================
   BusinessMe dashboard — design system Apple-like (iCloud / App Store
   Connect), repris du projet Resort. Pure CSS, self-hosted, zero CDN.
   Light + dark via prefers-color-scheme.
   ========================================================================== */

/* ------------------------------------------------------------- tokens */
:root {
  color-scheme: light dark;

  --accent: #0071e3;               /* Dashboard default; per-client override inline */
  --accent-contrast: #ffffff;

  --bg: #f5f5f7;
  --bg-elevated: #ffffff;
  --bg-sunken: #e8e8ed;
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --text-3: #86868b;

  --hairline: rgba(0, 0, 0, 0.10);
  --hairline-strong: rgba(0, 0, 0, 0.18);

  --danger: #d70015;
  --success: #248a3d;
  --warning: #c93400;

  --toolbar-bg: rgba(250, 250, 252, 0.72);
  --sidebar-bg: rgba(246, 246, 248, 0.94);
  --overlay: rgba(0, 0, 0, 0.32);
  --toast-bg: rgba(28, 28, 30, 0.88);
  --toast-text: #f5f5f7;

  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.05);
  --pop-shadow: 0 12px 48px rgba(0, 0, 0, 0.22);

  --radius: 12px;
  --radius-s: 8px;
  --pill: 980px;

  --sidebar-w: 252px;
  --toolbar-h: 52px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
          "Segoe UI", Roboto, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161617;
    --bg-elevated: #1d1d1f;
    --bg-sunken: #101011;
    --text: #f5f5f7;
    --text-2: #a1a1a6;
    --text-3: #86868b;

    --hairline: rgba(255, 255, 255, 0.12);
    --hairline-strong: rgba(255, 255, 255, 0.22);

    --danger: #ff453a;
    --success: #32d74b;
    --warning: #ff9f0a;

    --toolbar-bg: rgba(22, 22, 23, 0.72);
    --sidebar-bg: rgba(23, 23, 24, 0.96);
    --overlay: rgba(0, 0, 0, 0.55);
    --toast-bg: rgba(44, 44, 46, 0.92);

    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.28);
    --pop-shadow: 0 16px 56px rgba(0, 0, 0, 0.6);
  }
}

/* --------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.47;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }

h1, h2, h3, h4, p { margin: 0; }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--radius-s);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: fixed; top: -48px; left: 16px; z-index: 200;
  padding: 10px 18px; border-radius: var(--pill);
  background: var(--accent); color: var(--accent-contrast);
  font-weight: 600; transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; text-decoration: none; }

/* --------------------------------------------------------------- shell */
.shell { min-height: 100dvh; }

.main-col {
  margin-left: var(--sidebar-w);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 32px 64px;
}

/* Rythme vertical global : chaque bloc de premier niveau (cartes, filtres,
   grilles…) respire d'au moins 24px — les marges spécifiques plus grandes
   fusionnent naturellement (margin collapsing). */
.content > * + * { margin-top: 24px; }

/* -------------------------------------------------------------- sidebar */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid var(--hairline);
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 14px;
}

/* Logo de marque (§ manifeste) : le Quatuor en exécution quotidienne — tuiles
   à l'encre du contexte, pastille Couchant. Le glyphe remplace l'ancien « R »
   placeholder ; pas de fond, pas d'ombre : le dessin se suffit. */
.brand-mark {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
}
.brand-mark svg { width: 26px; height: 26px; display: block; }
.brand-mark .tile { fill: var(--text); }

.sidebar__brand-text { display: grid; line-height: 1.2; }
.sidebar__brand-text strong { font-size: 15px; letter-spacing: -0.01em; }
.sidebar__brand-text small { font-size: 11px; color: var(--text-2); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; }

.sidebar__close { display: none; margin-left: auto; }

.sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
  display: grid;
  gap: 2px;
  align-content: start;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-s);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}
.nav-item:hover { background: color-mix(in srgb, var(--text) 6%, transparent); text-decoration: none; }
.nav-item.is-active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-weight: 600;
}
.nav-item.is-disabled { color: var(--text-3); cursor: default; }
.nav-item.is-disabled:hover { background: none; }

.nav-item__icon {
  width: 19px; height: 19px; flex: none;
  fill: currentColor;
}

.nav-item__soon {
  margin-left: auto;
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  background: color-mix(in srgb, var(--text) 7%, transparent);
  border-radius: var(--pill);
  padding: 2px 7px;
}

.sidebar__footer { border-top: 1px solid var(--hairline); padding: 12px; }

.user-chip { display: flex; align-items: center; gap: 10px; min-width: 0; }

.avatar {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-size: 14px; font-weight: 700;
}

.user-chip__meta { display: grid; line-height: 1.25; min-width: 0; }
.user-chip__meta strong {
  font-size: 12px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-chip__meta small { font-size: 11px; color: var(--text-2); }
.user-chip__logout { margin-left: auto; }

/* -------------------------------------------------------------- toolbar */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--toolbar-h);
  padding: 0 20px;
  background: var(--toolbar-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}

.toolbar__title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.toolbar__spacer { flex: 1; }
.toolbar__menu { display: none; }

.icon-btn {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  padding: 0; border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.icon-btn:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.icon-btn svg {
  width: 18px; height: 18px;
  fill: currentColor;
}

/* ------------------------------------------------------------ page head */
.page-head { margin-bottom: 24px; }

.page-title {
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.12;
}

.page-subtitle { margin-top: 6px; font-size: 15px; color: var(--text-2); max-width: 60ch; }

/* ----------------------------------------------------------------- cards */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}

.card__header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
}
.card__header h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.card__body { padding: 18px; }

/* ------------------------------------------------------------ stat cards */
/* minmax 250px : 3 colonnes équilibrées dans le contenu (1080px max) au lieu
   de 5 + 1 orpheline. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

/* Libellé + précision empilés à gauche, valeur ancrée à droite —
   le regard balaie une colonne de chiffres alignés d'une carte à l'autre. */
.stat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label value"
    "hint  value";
  align-items: center;
  column-gap: 16px;
  row-gap: 3px;
  padding: 16px 18px;
}
.stat__label {
  grid-area: label;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-2);
}
.stat__value {
  grid-area: value;
  justify-self: end;
  font-size: 28px; font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat__hint { grid-area: hint; font-size: 12px; color: var(--text-3); }

/* ------------------------------------------------------------ empty state */
.empty-state {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 8px;
  padding: 56px 24px;
}
.empty-state__icon {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  margin-bottom: 6px;
}
.empty-state__icon svg {
  width: 26px; height: 26px;
  fill: currentColor;
}
.empty-state h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.empty-state p { color: var(--text-2); max-width: 46ch; font-size: 14px; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 16px;
  border: 0;
  border-radius: var(--pill);
  font-size: 14px;
  font-weight: 590;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.05s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { border-radius: var(--pill); }
.btn[disabled] { opacity: 0.45; cursor: default; pointer-events: none; }

.btn--primary { background: var(--accent); color: var(--accent-contrast); }
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000000); }

.btn--secondary {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
}
.btn--secondary:hover { background: color-mix(in srgb, var(--text) 13%, transparent); }

/* Destructif en mode ghost : pas de fond au repos, teinte au survol. */
.btn--danger { background: transparent; color: var(--danger); }
.btn--danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }

.btn--ghost { background: transparent; color: var(--accent); }
.btn--ghost:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }

.btn--lg { padding: 11px 22px; font-size: 15px; }
.btn--sm { padding: 4px 12px; font-size: 13px; }
.btn--block { width: 100%; }

/* ------------------------------------------------------------- segmented */
.segmented {
  display: inline-flex;
  padding: 2px;
  border-radius: 10px;
  background: var(--bg-sunken);
}
.segmented > button,
.segmented > a {
  border: 0;
  background: transparent;
  padding: 5px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  text-decoration: none;
}
.segmented > .is-selected {
  background: var(--bg-elevated);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* ---------------------------------------------------------------- badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  /* Marge verticale : plusieurs badges dans une cellule peuvent passer à la
     ligne, sans elle ils se collent bord à bord. */
  margin: 2px 0;
  border-radius: var(--pill);
  font-size: 12px;
  font-weight: 600;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text-2);
  white-space: nowrap;
}
.badge--accent { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.badge--success { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.badge--danger { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.badge--warning { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.badge--context { max-width: 220px; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 1.7; }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: color-mix(in srgb, var(--text) 3%, transparent); }
.table .is-numeric { text-align: right; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- forms */
/* L'attribut hidden doit gagner sur tout display explicite (.field etc.) —
   sans cette règle, les sous-champs du sélecteur d'action restent visibles. */
[hidden] { display: none !important; }

/* Les fieldsets (groupes de cases à cocher) se fondent dans le formulaire :
   même rendu qu'un .field, sans le cadre navigateur par défaut. */
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

/* align-content: start — sans lui, dans une grille (.grid-2/.grid-3), le champ
   voisin d'une cellule plus haute étire ses rangées auto (normal = stretch) et
   l'input grossit hors de sa ligne. */
.field { display: grid; gap: 6px; margin-bottom: 18px; align-content: start; }
.field > label { font-size: 13px; font-weight: 600; color: var(--text-2); }

.input,
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.field textarea { resize: vertical; min-height: 96px; }

/* Dépôt de fichier : zone en pointillé + bouton pilule, au lieu du rendu
   navigateur brut. [type] répété pour égaler la spécificité (0,3,1) de la
   règle générale ci-dessus — l'ordre de source départage ensuite. */
.field input[type][type="file"] {
  padding: 8px 10px;
  border-style: dashed;
  background: var(--bg-sunken);
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
}
.field input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 4px 12px;
  border: 0;
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 590;
  cursor: pointer;
}
.field input[type="file"]:hover::file-selector-button {
  background: color-mix(in srgb, var(--text) 13%, transparent);
}

.field--error input,
.field--error select,
.field--error textarea { border-color: var(--danger); }
.field__error { font-size: 12px; color: var(--danger); }
.field__help { font-size: 12px; line-height: 1.55; color: var(--text-3); }
/* Aide isolée (hors .field) : la décoller de l'élément précédent. */
p.field__help { margin-top: 4px; }
.field > .field__help { margin-top: 0; }

.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* ---------------------------------------------------------------- toasts */
.toast-region {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  display: grid;
  gap: 8px;
  justify-items: center;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(480px, calc(100vw - 40px));
  padding: 10px 20px;
  border-radius: var(--pill);
  background: var(--toast-bg);
  color: var(--toast-text);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--pop-shadow);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  animation: toast-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  pointer-events: auto;
}
.toast::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--text-3);
}
.toast--success::before { background: var(--success); }
.toast--error::before, .toast--danger::before { background: var(--danger); }
.toast--info::before { background: var(--accent); }
.toast.is-leaving { animation: toast-out 0.25s ease forwards; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(10px) scale(0.97); }
}

/* ---------------------------------------------------------------- modals */
dialog.modal {
  border: 0;
  padding: 0;
  /* Centrage vertical ET horizontal : les dialogues émis dans le flux de la
     page héritent du margin-top de l'owl `.content > * + *`, qui écrase le
     `margin: auto` du navigateur (même piège que dialog.launcher). */
  margin: auto;
  width: min(440px, calc(100vw - 32px));
  border-radius: 14px;
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: var(--pop-shadow);
}
dialog.modal::backdrop {
  background: var(--overlay);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
/* Variante large : dialogues porteurs d'une table (détail des rapports). */
dialog.modal--wide { width: min(640px, calc(100vw - 32px)); }
.modal__body { padding: 24px 24px 8px; }
.modal__body h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 6px; }
.modal__body p { font-size: 14px; color: var(--text-2); }
.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px 20px;
}

/* ------------------------------------------------- fiche découverte module */
/* Modale « premier lancement » d'une mini-app dont le module n'est pas actif
   (accueil) : icône de l'app, argumentaire en 3 points glyphés, CTA plein. */
dialog.modal--intro { width: min(400px, calc(100vw - 32px)); border-radius: 20px; }
dialog.modal--intro[open] { animation: intro-in 0.34s cubic-bezier(0.21, 0.88, 0.32, 1); }
@keyframes intro-in {
  from { opacity: 0; transform: scale(0.94) translateY(12px); }
}

.intro {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  padding: 40px 28px 22px;
}
.intro__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text-2);
}
.intro__close:hover { background: color-mix(in srgb, var(--text) 13%, transparent); }
.intro__close svg { width: 11px; height: 11px; fill: currentColor; }

.intro__icon {
  width: 72px;
  height: 72px;
  border-radius: 17px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.17);
}
.intro__icon svg { width: 34px; height: 34px; }

.intro__overline {
  margin-top: 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.intro__title { font-size: 25px; font-weight: 700; letter-spacing: -0.022em; margin: 1px 0 6px; }
.intro__lede { font-size: 14px; color: var(--text-2); max-width: 32ch; }

.intro__points {
  list-style: none;
  width: 100%;
  margin: 26px 0 28px;
  padding: 0 2px;
  display: grid;
  gap: 18px;
  text-align: left;
}
.intro__points li { display: flex; align-items: flex-start; gap: 14px; }
.intro__point-icon {
  flex: none;
  width: 34px;
  margin-top: 2px;
  display: grid;
  place-items: center;
}
.intro__point-icon svg { width: 26px; height: 26px; fill: currentColor; }
.intro__point-text { display: grid; gap: 1px; }
.intro__point-text strong { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.intro__point-text span { font-size: 13px; color: var(--text-2); line-height: 1.45; }

.intro__cta { width: 100%; }
.intro__foot { margin-top: 14px; font-size: 12px; color: var(--text-3); }
.intro__foot a { color: inherit; text-decoration: underline; }

/* Glyphes d'argumentaire teintés à la couleur de la mini-app (pied sombre du
   dégradé d'icône en clair, pied lumineux en sombre). */
.intro--orange .intro__point-icon { color: #f56300; }
.intro--indigo .intro__point-icon { color: #4a47c4; }
.intro--red    .intro__point-icon { color: #d70015; }
.intro--cyan   .intro__point-icon { color: #0080b8; }
.intro--green  .intro__point-icon { color: #1f8a38; }
.intro--purple .intro__point-icon { color: #8944ab; }
.intro--blue   .intro__point-icon { color: #0064d1; }
@media (prefers-color-scheme: dark) {
  .intro--orange .intro__point-icon { color: #ffad33; }
  .intro--indigo .intro__point-icon { color: #8280ff; }
  .intro--red    .intro__point-icon { color: #ff6961; }
  .intro--cyan   .intro__point-icon { color: #5ac8fa; }
  .intro--green  .intro__point-icon { color: #45cc64; }
  .intro--purple .intro__point-icon { color: #bf5af2; }
  .intro--blue   .intro__point-icon { color: #42a5ff; }
}

@media (max-width: 640px) {
  .intro { padding: 34px 20px 18px; }
  .intro__title { font-size: 22px; }
}

/* ----------------------------------------------------------- auth (login) */
.auth-body {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 24px;
  background:
    radial-gradient(1100px 520px at 50% -8%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 65%),
    var(--bg);
}

.auth { display: grid; gap: 20px; justify-items: center; width: 100%; }

.auth-card {
  width: min(400px, 100%);
  padding: 40px 34px 34px;
  text-align: center;
  background: var(--bg-elevated);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: var(--card-shadow);
}

/* Connexion Manager = moment d'apparat (§ manifeste) : glyphe blanc sur
   dégradé Couchant plein cadre — réservé à l'interne. Le Dashboard (public)
   utilise la variante --brand : le logo de marque, nu. */
.auth-mark {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  border-radius: 15px;
  background: linear-gradient(160deg, #FFB340 0%, #FF4F5E 55%, #E0417E 100%);
  box-shadow: 0 6px 18px rgba(224, 65, 126, 0.30);
}
.auth-mark svg { width: 34px; height: 34px; display: block; }
.auth-mark svg use, .auth-mark svg circle { fill: #ffffff; }
.auth-mark--brand { background: none; box-shadow: none; }
.auth-mark--brand svg { width: 46px; height: 46px; }
.auth-mark--brand svg use { fill: var(--text); }
.auth-mark--brand svg circle { fill: url(#qa-couchant); }

.auth-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.auth-caption { margin-top: 6px; font-size: 14px; color: var(--text-2); }

.auth-error {
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
  font-size: 13px;
  font-weight: 500;
}

.auth-form { margin-top: 20px; display: grid; gap: 16px; }

.input-stack { display: grid; }
.input-stack input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  border: 1px solid var(--hairline-strong);
  background: var(--bg-elevated);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input-stack input:first-of-type { border-radius: 12px 12px 0 0; }
.input-stack input:last-of-type { border-radius: 0 0 12px 12px; margin-top: -1px; }
.input-stack input:focus {
  outline: none;
  position: relative;
  z-index: 1;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.input-stack.has-error input { border-color: color-mix(in srgb, var(--danger) 55%, var(--hairline-strong)); }

.auth-foot { font-size: 12px; color: var(--text-3); }

/* ------------------------------------------------------------ utilities */
.hairline-top { border-top: 1px solid var(--hairline); }
.hairline-bottom { border-bottom: 1px solid var(--hairline); }
.text-secondary { color: var(--text-2); }
.text-danger { color: var(--danger); }
.mt-0 { margin-top: 0; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.stack-16 > * + * { margin-top: 16px; }
/* Rythme des pages : pour un wrapper (ex. <form> enchaînant des cartes) dont
   les enfants ne sont plus des enfants directs de .content. */
.stack-24 > * + * { margin-top: 24px; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 900px) {
  .main-col { margin-left: 0; }
  .content { padding: 20px 16px 56px; }

  .toolbar__menu { display: grid; }
  .sidebar__close { display: grid; }

  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: none;
    width: min(300px, 84vw);
  }
  body.sidebar-open .sidebar {
    transform: translateX(0);
    box-shadow: var(--pop-shadow);
  }

  .sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: var(--overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  body.sidebar-open .sidebar-overlay { opacity: 1; pointer-events: auto; }
  body.sidebar-open { overflow: hidden; }

  .badge--context { display: none; }
}

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

/* ==========================================================================
   Dashboard chrome « mini-apps » (§7.1) — navbar persistante + lanceur 3×3
   + sous-navigation de la mini-app courante (MiniApps.php). Le Manager garde
   la sidebar ci-dessus ; tout ce bloc est propre au Dashboard.
   ========================================================================== */

.dash-shell { min-height: 100dvh; display: flex; flex-direction: column; }
.dash-shell .content { flex: 1; }

/* --------------------------------------------------------------- navbar */
.dashbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 max(20px, env(safe-area-inset-left));
  background: var(--toolbar-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}

.dashbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}
.dashbar__brand:hover { text-decoration: none; }

.dashbar__brand-text { display: grid; line-height: 1.2; min-width: 0; }
.dashbar__brand-text strong {
  font-size: 15px;
  letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dashbar__brand-text small {
  font-size: 10px; color: var(--text-2);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em;
}

.dashbar__spacer { flex: 1; }

.dashbar__btn { width: 34px; height: 34px; border-radius: 50%; }
.dashbar__btn svg { width: 19px; height: 19px; }

.avatar--btn { border: 0; cursor: pointer; padding: 0; }
.avatar--btn:hover { filter: brightness(1.06); }

/* ------------------------------------------------- menus déroulants (CSP) */
/* Ouverture pilotée par app.js via [data-menu-toggle] — aucun handler
   inline. .menu englobe le déclencheur et son panneau. */
.menu { position: relative; }

.menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  min-width: 232px;
  padding: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: var(--pop-shadow);
  display: none;
}
.menu.is-open .menu__panel { display: block; animation: menu-in 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.1); }

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

.menu__head {
  display: grid;
  line-height: 1.35;
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 6px;
}
.menu__head strong {
  font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.menu__head small { font-size: 11px; color: var(--text-2); }

.menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu__item:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  text-decoration: none;
}
.menu__item svg { width: 17px; height: 17px; flex: none; fill: currentColor; color: var(--text-2); }
.menu__item--danger { color: var(--danger); }
.menu__item--danger svg { color: inherit; }

.menu__sep { height: 1px; background: var(--hairline); margin: 6px 4px; }

/* Panneau ancré au bord GAUCHE de son déclencheur (menus de la navbar : à
   droite ; sélecteur de section de l'app-bar : à gauche). */
.menu__panel--start { right: auto; left: 0; }

/* Entrée courante — même teinte d'accent que .side-link.is-active et
   .nav-item.is-active, pour que les trois présentations d'une même liste
   se lisent pareil. */
.menu__item.is-active {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent);
  font-weight: 600;
}
.menu__item.is-active svg { color: inherit; }

/* -------------------------------------------- icônes d'app (dégradés) */
/* Partagées entre le lanceur, la sous-nav et les widgets de l'accueil. */
.app-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px; height: 26px;
  border-radius: 7px;
  color: #fff;
}
.app-icon svg { width: 14px; height: 14px; fill: currentColor; }

.app-icon--sm { width: 22px; height: 22px; border-radius: 6px; }
.app-icon--sm svg { width: 12px; height: 12px; }

.app-icon--lg {
  width: 60px; height: 60px;
  border-radius: 15px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.app-icon--lg svg { width: 30px; height: 30px; }

.app-icon--orange { background: linear-gradient(145deg, #ffad33, #f56300); }
.app-icon--green  { background: linear-gradient(145deg, #45cc64, #1f8a38); }
.app-icon--blue   { background: linear-gradient(145deg, #42a5ff, #0064d1); }
.app-icon--purple { background: linear-gradient(145deg, #bf5af2, #8944ab); }
.app-icon--red    { background: linear-gradient(145deg, #ff6961, #d70015); }
.app-icon--crimson { background: linear-gradient(145deg, #ff453a, #8e0e0e); }
.app-icon--cyan   { background: linear-gradient(145deg, #5ac8fa, #0080b8); }
.app-icon--indigo { background: linear-gradient(145deg, #8280ff, #4a47c4); }

/* ------------------------------------------------------- lanceur 3×3 */
/* <dialog> modal : piège de focus, Échap et inertie du fond viennent du
   navigateur. Le dialogue occupe tout l'écran, le panneau flotte dedans —
   un clic qui atteint le dialogue lui-même referme (cf. app.js). */
dialog.launcher {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 13vh 16px 16px;
  border: 0;
  background: transparent;
  overflow: hidden;
}
/* display UNIQUEMENT sur [open] : une règle `display` inconditionnelle
   écraserait le `dialog:not([open]) { display: none }` du navigateur et
   ferait apparaître le panneau dans le flux de la page. */
dialog.launcher[open] { display: grid; place-items: start center; }
dialog.launcher::backdrop {
  background: var(--overlay);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  animation: launcher-veil 0.2s ease;
}
dialog.launcher[open] .launcher__panel { animation: launcher-in 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.1); }

@keyframes launcher-veil { from { opacity: 0; } }
@keyframes launcher-in {
  from { opacity: 0; transform: scale(0.96) translateY(-8px); }
}

.launcher__panel {
  display: grid;
  /* minmax(0, …) et non un plancher en pixels : un plancher rendait la
     largeur minimale du panneau (3 × 104 + gouttières + marges = 384px)
     supérieure à l'écran d'un téléphone, et `width: min(430px, 100%)` ne
     pouvait plus la réduire — le panneau débordait alors à droite. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 14px;
  width: min(430px, 100%);
  padding: 22px;
  background: var(--bg-elevated);
  border: 1px solid var(--hairline);
  border-radius: 22px;
  box-shadow: var(--pop-shadow);
}
/* Le panneau porte l'autofocus du <dialog> (pour qu'aucune tuile ne semble
   sélectionnée à l'ouverture) : pas d'anneau sur lui, le box-shadow global
   de :focus-visible écraserait d'ailleurs son ombre portée. */
.launcher__panel:focus-visible { box-shadow: var(--pop-shadow); }

.app-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px 10px;
  border-radius: 14px;
  color: var(--text);
  text-decoration: none;
  text-align: center;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.app-tile:hover {
  background: color-mix(in srgb, var(--text) 5%, transparent);
  text-decoration: none;
}
.app-tile:active { transform: scale(0.96); }
.app-tile.is-current { background: color-mix(in srgb, var(--accent) 10%, transparent); }

.app-tile__label { font-size: 13px; font-weight: 500; }

/* ------------------------------------ mini-app : sidebar de ses contenus */
/* Même principe que le Manager My Angels : à l'intérieur d'une mini-app, ses
   sections vivent dans une barre latérale (jamais les 14 entrées à plat).
   Sous 900px elle glisse par-dessus, ouverte par le bouton de l'app-bar. */
.app-layout { display: flex; flex: 1; min-height: 0; }

/* Collée sous la navbar : elle reste visible pendant que le contenu défile
   (la navbar fait 56px — cf. .dashbar). */
.app-side {
  flex: none;
  width: 232px;
  position: sticky;
  top: 56px;
  align-self: flex-start;
  height: calc(100dvh - 56px);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--hairline);
  padding: 16px 10px 12px;
  gap: 4px;
  overflow-y: auto;
}

.app-side__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--hairline);
}

.app-side__title { display: grid; line-height: 1.25; min-width: 0; }
.app-side__title strong { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; }
.app-side__title small {
  font-size: 11.5px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.app-side__nav { display: grid; gap: 2px; align-content: start; flex: 1; }

.side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-s);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}
.side-link:hover { background: color-mix(in srgb, var(--text) 6%, transparent); text-decoration: none; }
.side-link.is-active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-weight: 600;
}

.side-link__icon { width: 18px; height: 18px; flex: none; fill: currentColor; }

/* Retour à la grille d'icônes, en pied de barre (l'équivalent du bouton
   « Accueil » de la topbar My Angels). */
.app-side__home {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  margin-top: 8px;
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
}
.app-side__home:hover { color: var(--text); text-decoration: none; }
.app-side__home svg { width: 17px; height: 17px; fill: currentColor; }

/* Colonne de contenu de la mini-app */
.app-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.app-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 8px max(20px, env(safe-area-inset-right)) 8px 20px;
  border-bottom: 1px solid var(--hairline);
}
/* Hors mini-app (profil, réglages) : juste les actions de l'écran. */
.app-bar--flush { border-bottom: 0; padding-bottom: 0; min-height: 0; }

.app-bar__spacer { flex: 1; }

/* Retour vers la section d'origine, sur un écran de détail. Chevron pivoté
   à 180° : le tracé de base pointe à droite (pas de chevron.left généré). */
.app-bar__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: -8px;
  padding: 6px 10px 6px 8px;
  border-radius: var(--pill);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.app-bar__back:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); text-decoration: none; }
.app-bar__back svg { width: 13px; height: 13px; fill: currentColor; transform: rotate(180deg); }

/* Sélecteur de section (mobile) : même composant .menu que la navbar — la
   barre latérale et lui rendent la MÊME liste, seule la présentation change. */
.app-bar__sections { display: none; }
.app-bar__sections .btn { gap: 8px; padding-left: 6px; }
.menu-caret { width: 11px; height: 11px; fill: currentColor; opacity: 0.5; transform: rotate(90deg); }
.menu.is-open .menu-caret { transform: rotate(-90deg); }

@media (max-width: 900px) {
  .dashbar { padding: 0 max(14px, env(safe-area-inset-left)); }
  dialog.launcher { padding-top: 9vh; }

  /* La barre latérale cède la place au menu déroulant de l'app-bar (même
     bascule que le Manager My Angels : une seule liste de sections, deux
     présentations selon la largeur). */
  .app-side { display: none; }
  .app-bar { padding-left: 12px; padding-right: max(14px, env(safe-area-inset-right)); }
  .app-bar__sections { display: block; }
}

/* ==========================================================================
   Transitions de navigation (§7.1) — continuité façon springboard : l'icône
   de la mini-app est le MÊME élément d'un écran à l'autre (accueil ↔ lanceur
   ↔ en-tête de la barre latérale), le navigateur l'anime entre ses deux
   positions. Le reste de la page fait un fondu. Progressive enhancement
   total : sans support, la navigation reste instantanée comme avant.
   ========================================================================== */
@view-transition { navigation: auto; }

/* Une icône de mini-app = un nom de transition, partagé par toutes ses
   représentations (une seule est présente à la fois sur un écran donné). */
.vt-clients       { view-transition-name: app-clients; }
.vt-configuration { view-transition-name: app-configuration; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.22s; }

@media (prefers-reduced-motion: reduce) {
  /* Les pseudo-éléments de transition ne sont pas couverts par la règle
     globale sur « * » : on les coupe explicitement. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ==========================================================================
   Confort tactile — Apple HIG : 44 pt minimum sur écran tactile. Les valeurs
   compactes ci-dessus restent valables à la souris.
   ========================================================================== */
@media (pointer: coarse) {
  .menu__item,
  .side-link,
  .nav-item,
  .app-side__home { min-height: 44px; }

  .icon-btn { width: 44px; height: 44px; }
  .dashbar__btn { width: 42px; height: 42px; }
  .avatar--btn { width: 40px; height: 40px; }
  .app-bar__back { min-height: 44px; }
}

/* Lanceur sur téléphone : on resserre marges, gouttières et icônes pour que
   les trois colonnes tiennent jusqu'à 320px de large. */
@media (max-width: 430px) {
  dialog.launcher { padding: 9vh 12px 12px; }
  .launcher__panel { padding: 16px 12px; gap: 6px 8px; border-radius: 20px; }
  .app-tile { padding: 10px 4px 8px; gap: 7px; }
  .app-tile__label { font-size: 12px; }
  .app-icon--lg { width: 54px; height: 54px; border-radius: 14px; }
  .app-icon--lg svg { width: 27px; height: 27px; }
}

/* Très petits écrans (iPhone SE). */
@media (max-width: 360px) {
  .launcher__panel { gap: 6px; padding: 14px 10px; }
  .app-tile__label { font-size: 11px; }
  .app-icon--lg { width: 48px; height: 48px; border-radius: 13px; }
  .app-icon--lg svg { width: 24px; height: 24px; }
}

/* ==========================================================================
   BusinessMe — compléments au design system Resort : marque, sélecteur
   d'établissement, springboard de l'accueil, toggle iOS.
   ========================================================================== */

/* ------------------------------------------------------------- marque */
.brand-tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(145deg, #42a5ff, #0064d1);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 100, 209, 0.25);
}
.brand-tile svg { width: 17px; height: 17px; fill: currentColor; }

/* Marque image (logo BusinessMe) : le PNG porte sa propre tuile et ses
   coins arrondis — pas de fond ni d'ombre CSS par-dessus. */
.brand-tile--img { background: none; box-shadow: none; border-radius: 0; }
.brand-tile--img img { width: 30px; height: 30px; display: block; }

/* Connexion : la marque en exécution d'apparat. */
.auth-mark--img { background: none; box-shadow: none; border-radius: 0; }
.auth-mark--img img { width: 56px; height: 56px; display: block; }

/* --------------------------------------- sélecteur d'établissement */
/* Les entrées du panneau sont des <button> de POST : le <form> disparaît
   du rendu pour que les items s'empilent comme des liens ordinaires. */
.menu__panel form { display: contents; }

.retail-switch__btn { gap: 8px; max-width: 300px; }
.retail-switch__btn > svg:first-child { width: 14px; height: 14px; flex: none; fill: currentColor; opacity: 0.65; }
.retail-switch__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Précision à droite d'un item de menu (ex. bascule TTC/HT). */
.menu__value {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}

/* Panneau élargi (menu du compte : libellé + précision sur une ligne). */
.menu__panel--wide { min-width: 288px; }
.menu__panel--wide .menu__item > span:not(.menu__value) { white-space: nowrap; }

@media (max-width: 640px) {
  .retail-switch__btn { max-width: 42vw; }
}

/* --------------------------------------------- springboard (accueil) */
/* Centré : la grille fait exactement la largeur de ses colonnes d'icônes. */
.dash-hello { margin-bottom: 28px; text-align: center; }
.dash-hello .page-subtitle { margin-inline: auto; }

.dash-hello__date {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-bottom: 4px;
}

.dash-hello__title {
  font-size: clamp(28px, 4.5vw, 40px);
  letter-spacing: -0.025em;
  background: linear-gradient(120deg,
    var(--text) 40%,
    color-mix(in srgb, var(--accent) 72%, var(--text)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Les colonnes font EXACTEMENT la largeur d'une icône (--home-tile) : un
   widget qui « span 2 » mesure donc icône + gouttière + icône, ses bords
   alignés pile sur ceux des icônes voisines — le patron springboard iOS. */
.home-grid {
  --home-tile: 96px;
  display: grid;
  grid-template-columns: repeat(3, var(--home-tile));
  gap: 28px 48px;
  width: max-content;
  margin: 40px auto 48px;
}
/* Quatre mini-apps : un carré 2×2 plutôt qu'une rangée orpheline. */
.home-grid--2 { grid-template-columns: repeat(2, var(--home-tile)); gap: 30px 56px; }

.home-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  transition: transform 0.16s ease;
}
a.home-tile:hover { text-decoration: none; transform: scale(1.045); }
a.home-tile:active { transform: scale(0.95); }

/* Tuile verrouillée (module non actif) : un <button> qui ouvre la fiche de
   découverte — même dégaine exactement que les tuiles-liens. */
button.home-tile {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
button.home-tile:hover { transform: scale(1.045); }
button.home-tile:active { transform: scale(0.95); }

.home-tile__label {
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

.app-icon--xl {
  width: var(--home-tile); height: var(--home-tile);
  border-radius: 22px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.17);
}
.app-icon--xl svg { width: 44px; height: 44px; }

/* Widget-icône : 2 colonnes de large, la hauteur d'une icône. */
.home-tile--wide { grid-column: span 2; }

.home-widget {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: var(--home-tile);
  padding: 12px 16px;
  border-radius: 22px;
  background: var(--bg-elevated);
  border: 1px solid var(--hairline);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.10);
}

.home-widget__meta { display: grid; gap: 2px; line-height: 1.25; min-width: 0; flex: 1; }
.home-widget__meta strong {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-widget__meta small {
  font-size: 11px; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.home-widget__bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 48px;
  flex: none;
}
.home-widget__bars i {
  width: 6px;
  border-radius: 2.5px;
  background: var(--widget-tint, var(--accent));
  opacity: 0.85;
}
.home-widget__bars i:last-child { opacity: 1; }

/* Teintes fixes des barres — la couleur distingue les séries, sans crier. */
.home-widget--indigo { --widget-tint: #5e5ce6; }
.home-widget--orange { --widget-tint: #f56300; }
@media (prefers-color-scheme: dark) {
  .home-widget--indigo { --widget-tint: #8280ff; }
  .home-widget--orange { --widget-tint: #ff9f0a; }
}

@media (max-width: 640px) {
  .home-grid { --home-tile: 74px; gap: 22px 30px; margin: 28px auto 36px; }
  .home-grid--2 { gap: 24px 40px; }
  .app-icon--xl { border-radius: 17px; }
  .app-icon--xl svg { width: 34px; height: 34px; }
  .home-widget { padding: 9px 12px; border-radius: 17px; gap: 8px; }
  .home-widget__meta strong { font-size: 13.5px; }
  .home-widget__meta small { font-size: 10px; }
  .home-widget__bars { height: 34px; gap: 2px; }
  .home-widget__bars i { width: 5px; }
  .home-tile__label { font-size: 12px; }
}

/* Lanceur à 4 mini-apps : carré 2×2. */
.launcher__panel--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(330px, 100%); }

/* ------------------------------------------------------------ bannière */
.dash-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
  background: color-mix(in srgb, var(--warning) 9%, var(--bg-elevated));
}
.dash-banner__icon { flex: none; width: 22px; height: 22px; margin-top: 2px; fill: var(--warning); }
.dash-banner__text strong { display: block; font-size: 14px; letter-spacing: -0.01em; }
.dash-banner__text p { margin-top: 2px; font-size: 13px; color: var(--text-2); max-width: 72ch; }
.dash-banner__text a { font-weight: 600; }

/* ------------------------------------------------- pied de page accueil */
/* :has() cible UNIQUEMENT la page qui porte ce pied : il descend en bas de
   la fenêtre quand l'accueil est court, et suit le contenu sinon. */
.content:has(> .dash-footer) { display: flex; flex-direction: column; }

.dash-footer {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 8px;
  font-size: 12.5px;
  color: var(--text-3);
  text-align: center;
}
.dash-footer__dot { color: var(--text-3); opacity: 0.6; }

@media (max-width: 480px) {
  .dash-footer { flex-direction: column; padding-top: 24px; }
  .dash-footer__dot { display: none; }
}

/* ------------------------------------------------------- toggle iOS */
/* <input type="checkbox" class="switch"> — le composant absent de Resort :
   piste pilule, pastille coulissante, vert système à l'état actif. */
input.switch {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 44px; height: 27px;
  margin: 0;
  border: 0;
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--text) 16%, transparent);
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
input.switch::before {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 23px; height: 23px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 3px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}
input.switch:checked { background: #34c759; }
input.switch:checked::before { transform: translateX(17px); }
input.switch:disabled { opacity: 0.4; cursor: default; }

/* Champs conditionnels (data-enables / data-enabled-by) : un champ inutile
   pour la sélection courante est désactivé et estompé, libellé compris. */
.field input:disabled,
.field select:disabled,
.field textarea:disabled { opacity: 0.45; cursor: default; }
.field:has(> input:disabled, > select:disabled, > textarea:disabled) label,
.field:has(> div input:disabled) label,
.field:has(:disabled) .field__help { opacity: 0.45; }
.switch-row:has(input.switch:disabled) .switch-row__label { opacity: 0.45; }
input.switch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent);
}
@media (prefers-color-scheme: dark) {
  input.switch { background: color-mix(in srgb, #ffffff 24%, transparent); }
  input.switch:checked { background: #30d158; }
}

/* ------------------------------------------------- formulaires (grilles) */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; }
@media (max-width: 720px) {
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
}

/* Case + libellé sur une ligne (booléens simples). */
.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  cursor: pointer;
}
.check-row input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--accent);
  flex: none;
  margin: 0;
}

/* ------------------------------------------------------- barre de filtre */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 14px;
}
.filter-bar .input[type="search"],
.filter-bar input[type="search"] { flex: 1; max-width: 430px; }
.filter-bar__count { font-size: 13px; white-space: nowrap; }

/* Lien principal d'une ligne de table (ouvre la fiche). */
.table-link { font-weight: 600; color: var(--text); }
.table-link:hover { color: var(--accent); text-decoration: none; }

/* Catégories : pastille de couleur + indentation hiérarchique. */
.cat-name { display: inline-flex; align-items: center; gap: 9px; }
.cat-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* Sélecteur de couleur : pastille propre plutôt que le rendu navigateur. */
.field input[type="color"] {
  padding: 3px;
  height: 40px;
  cursor: pointer;
}
.field input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.field input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 7px; }

/* Dialogue de sélection (liste de cases filtrable, corps défilant). */
dialog.modal--picker { width: min(600px, calc(100vw - 32px)); }
.check-list {
  margin-top: 12px;
  max-height: 46vh;
  overflow-y: auto;
  display: grid;
  border-top: 1px solid var(--hairline);
}
.check-list .check-row {
  padding: 10px 2px;
  border-bottom: 1px solid var(--hairline);
}

/* ------------------------------------------------------------ rapports */
/* Graphiques SVG calculés côté serveur (pattern Resort) : le CSS colore. */
:root { --stats-tint: #5e5ce6; }
@media (prefers-color-scheme: dark) { :root { --stats-tint: #8280ff; } }

.chart-scroll { overflow-x: auto; }
.usage-chart { display: block; width: 100%; height: auto; }
.chart-grid { stroke: var(--hairline); stroke-width: 1; }
.chart-axis { stroke: var(--hairline-strong); stroke-width: 1; }
.chart-tick { fill: var(--text-3); font-size: 10px; font-family: inherit; }
.chart-bar { fill: var(--stats-tint); opacity: 0.85; transition: opacity 0.15s ease; }
.chart-bar:hover { opacity: 1; }
/* Journée en cours, partielle : en creux pour ne pas se lire comme une chute. */
.chart-bar.is-today { opacity: 0.4; }

/* Barres de proportion (tops). */
.res-bars { display: grid; gap: 10px; }
.res-row {
  display: grid;
  grid-template-columns: minmax(100px, 170px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.res-row__label {
  font-size: 13.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.res-row__track {
  height: 10px;
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--text) 7%, transparent);
  overflow: hidden;
}
.res-row__bar {
  display: block;
  height: 100%;
  border-radius: var(--pill);
  background: var(--stats-tint);
  opacity: 0.85;
}
.res-row__value {
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Tendance des cartes KPI. */
.stat-trend.is-up { color: var(--success); }
.stat-trend.is-down { color: var(--danger); }

/* Grilles de cartes (les cartes gèrent leur espacement par le gap). */
.tops-grid, .charts-grid { gap: 20px; align-items: start; }

/* Formulaire de rapport : champs alignés + bouton en bout de ligne. */
.report-form {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
}
.report-form .field { margin-bottom: 0; min-width: 160px; }
.report-form .btn { margin-bottom: 2px; }

/* Navigation de semaine (pointages) : centrée, libellé stable. */
.week-nav { justify-content: center; }
.week-nav__label { font-size: 15px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

/* Totaux hebdomadaires par employé, dans l'en-tête de carte. */
.tc-totals { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

/* Session LIVE. */
.badge--live { animation: live-pulse 1.6s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: 0.55; } }

/* Détail de session : première colonne libellé, le reste en chiffres. */
.sd-table td { padding: 8px 16px; }
.sd-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.sd-table tr.sd-big td { font-weight: 650; font-size: 15px; }

/* Impression : ne garder que le contenu (rapports, relevés). */
@media print {
  .dashbar, .app-side, .app-bar, .toast-region, .filter-bar, .segmented,
  .dash-footer, dialog { display: none !important; }
  .content { max-width: none; padding: 0; }
  .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  body { background: #fff; }
}

/* Intitulé de groupe de réglages (entre les rangées de toggles). */
.perm-group {
  margin: 18px 0 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.perm-group:first-of-type { margin-top: 0; }

/* Zone sensible (suppression) : cadre teinté danger. */
.danger-zone { border-color: color-mix(in srgb, var(--danger) 35%, transparent); }

code.mono, .mono {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}

/* Variante compacte du toggle (menus). */
input.switch--sm { width: 36px; height: 22px; }
input.switch--sm::before { width: 18px; height: 18px; }
input.switch--sm:checked::before { transform: translateX(14px); }

/* Item de menu porteur d'un toggle : libellé à gauche, interrupteur à droite. */
.menu__item--switch { cursor: pointer; }
.menu__item--switch input.switch { margin-left: auto; }

/* Rangée réglage : libellé (+ aide) à gauche, toggle à droite. */
.switch-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 2px;
  border-top: 1px solid var(--hairline);
}
.switch-row:first-child { border-top: 0; }
.switch-row__label { flex: 1; display: grid; gap: 1px; }
.switch-row__label strong { font-size: 14px; font-weight: 500; }
.switch-row__label small { font-size: 12px; color: var(--text-3); line-height: 1.45; }


/* ==========================================================================
   MANAGER — surcouche propre à l'outil interne. Les règles ci-dessous
   consomment les tokens du design system sans jamais les redéfinir.
   ========================================================================== */

/* ------------------------------------------------ écrans d'authentification */
/* La marque du Manager est un dégradé plein cadre (cf. .auth-mark) : le
   glyphe est un tracé, pas un sprite <use> — d'où cette règle. */
.auth-mark svg path { fill: #ffffff; }

/* Lien secondaire sous la carte de connexion (enrôlement, retour). */
.auth-alt { margin-top: 18px; font-size: 13px; color: var(--text-2); }
.auth-alt a { font-weight: 500; }

/* Précision discrète sous une action de secours. */
.auth-note { margin-top: 10px; font-size: 12px; color: var(--text-3); line-height: 1.5; }

/* Séparateur « ou » entre la voie normale et la voie de secours. */
.auth-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  font-size: 12px;
  color: var(--text-3);
}
.auth-sep::before, .auth-sep::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--hairline);
}

/* Saisie d'un code d'enrôlement : chasse fixe, lettres espacées, centré. */
.code-input {
  width: 100%;
  text-align: center;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: 22px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 14px 12px;
}

/* Code d'enrôlement affiché (une seule fois) sur l'écran Appareils. */
.code-display {
  display: block;
  margin: 4px 0 2px;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-align: center;
  color: var(--text);
  user-select: all;
}

/* --------------------------------------------------------- listes d'objets */
/* Rangée d'un ensemble ordonnable ou supprimable (moyens de paiement d'une
   caisse, modules d'un client) : glyphe, libellé, actions à droite. */
.row-list { display: grid; gap: 8px; }
.row-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-sunken, color-mix(in srgb, var(--text) 4%, transparent));
}
.row-item__icon { display: grid; place-items: center; width: 20px; color: var(--text-2); }
.row-item__icon svg { width: 16px; height: 16px; }
.row-item__label { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; }
.row-item__label small { display: block; font-weight: 400; font-size: 12px; color: var(--text-3); }
.row-item__actions { display: flex; align-items: center; gap: 6px; }
.row-item form { display: contents; }

/* Bouton d'action en bout de rangée (retirer, monter, descendre). */
.row-btn {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.row-btn:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.row-btn svg { width: 15px; height: 15px; }
.row-btn--danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.row-btn[disabled] { opacity: 0.3; cursor: default; }
.row-btn[disabled]:hover { background: transparent; color: var(--text-3); }

/* ------------------------------------------------------- relevé de session */
/* Rendu des sections renvoyées par l'API caisse : libellé à gauche, valeur à
   droite ; les lignes de TVA ont quatre colonnes. */
.receipt-rows { display: grid; }
.receipt-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 2px;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
}
.receipt-row:first-child { border-top: 0; }
.receipt-row__label { color: var(--text-2); }
.receipt-row__value { font-weight: 500; text-align: right; white-space: nowrap; }
.receipt-row--big { font-size: 16px; font-weight: 600; }
.receipt-row--big .receipt-row__label { color: var(--text); }
.receipt-grid {
  display: grid;
  grid-template-columns: 1fr repeat(3, minmax(0, auto));
  gap: 8px 16px;
  padding: 9px 2px;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
}
.receipt-grid:first-child { border-top: 0; }
.receipt-grid span:not(:first-child) { text-align: right; white-space: nowrap; }
.receipt-grid--head { color: var(--text-2); font-weight: 500; }

/* ------------------------------------------------------------ accueil */
.home-widget--blue { --widget-tint: #0a84ff; }
@media (prefers-color-scheme: dark) {
  .home-widget--blue { --widget-tint: #409cff; }
}

/* Réordonnancement : le chevron SF est pivoté (aucun tracé dessiné à la main). */
.row-btn--up svg { transform: rotate(-90deg); }
.row-btn--down svg { transform: rotate(90deg); }

/* En-tête de carte porteur d'une action : le titre pousse le bouton à droite. */
.card__header h2 { flex: 1; }

/* Grille de compteurs à quatre cases (fiche client) : quatre colonnes plutôt
   que trois plus une orpheline. */
.stat-grid--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.stat-grid a.stat:hover { text-decoration: none; border-color: color-mix(in srgb, var(--accent) 40%, var(--hairline)); }

/* Petit formulaire en ligne (choisir puis ajouter) : la liste déroulante ne
   s'étale pas sur toute la largeur de la carte. */
.inline-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inline-form .input, .inline-form select { flex: 1; min-width: 180px; max-width: 320px; }

/* Ligne mise en avant : la carte cadeau qui vient d'être émise. */
tr.is-fresh td { background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* Conséquences d'une action sensible, listées dans sa boîte de confirmation. */
.consequences { margin: 8px 0 12px; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }
.consequences li::marker { color: var(--danger); }

/* Lien discret en pied de liste (établissements désactivés). */
.list-foot { font-size: 13px; color: var(--text-3); text-align: center; }

/* Ce qu'une réactivation rétablit : même liste, puces vertes. */
.consequences--restore li::marker { color: var(--success); }

/* Cellule d'action en fin de ligne (pill « Réactiver »). */
.table .is-actions { text-align: right; white-space: nowrap; }