/* =====================================================================================
   DESIGN SYSTEM — Tableau de bord salon
   -------------------------------------------------------------------------------------
   Identité "salon de coiffure chic" : chaleureux (ivoire, terracotta, laiton), jamais
   un SaaS gris-violet générique. Tous les écrans du dashboard (existants et à venir)
   doivent importer CE fichier et réutiliser ces tokens/classes plutôt qu'en inventer
   de nouveaux — c'est ce qui permet à plusieurs écrans construits séparément de rester
   cohérents.

   Règle d'or pour qui ajoute un écran : si un style existe déjà ici (bouton, carte,
   pastille de statut, champ de formulaire, état vide...), le réutiliser tel quel.
   N'ajouter une règle ici que si elle est vraiment partagée par plusieurs écrans.
   ===================================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  /* ---- Couleurs de marque ------------------------------------------------------- */
  /* Palette resserrée façon maison de beauté : neutres sophistiqués + un seul accent
     argile, jamais de dégradé. Le noir chaud porte l'autorité (boutons, marque), la
     couleur reste un accent discret (focus, statuts, petites touches). */
  --ink: #1e1a17;              /* quasi-noir chaud — texte, boutons principaux */
  --ink-soft: #6b5f56;         /* texte secondaire */
  --ink-faint: #a89c90;        /* texte tertiaire / placeholder */

  --cream: #f7f2ec;            /* fond de page — ivoire mat, pas jaune */
  --cream-deep: #efe3d3;       /* bandeaux, survol doux */
  --surface: #ffffff;          /* cartes */
  --surface-sunken: #f3ece2;   /* zones creuses (inputs, rangées alternées) */
  /* Bordures en noir très transparent plutôt qu'un ton tan saturé : elles se fondent
     dans n'importe quel fond au lieu de dessiner des boîtes visibles. */
  --border: rgba(30, 24, 18, 0.09);
  --border-strong: rgba(30, 24, 18, 0.16);

  --terracotta: #a8583a;       /* argile — accent unique, jamais en fond plein de bouton */
  --terracotta-deep: #814630;
  --terracotta-tint: #f1e1d5;

  --gold: #9c7f3f;             /* laiton mat — petits détails seulement */
  --gold-tint: #f0e8d3;

  --wine: #6d2f39;
  --wine-tint: #f0dfe1;

  --sage: #56705a;             /* succès — vert botanique mat */
  --sage-tint: #e4ebe2;

  --amber: #9c7229;
  --amber-tint: #f3e9d2;

  --danger: #9c3d2e;           /* erreur / annulation, mat */
  --danger-tint: #f3e0da;

  --info: #3f6270;
  --info-tint: #e2ebed;

  /* ---- Typo ----------------------------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Forme / profondeur ---------------------------------------------------------- */
  /* Rayons resserrés (moins "bulle SaaS"), ombres presque plates : la bordure fine
     porte la structure, pas l'ombre. */
  --radius-xs: 7px;
  --radius-sm: 9px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(30, 24, 18, 0.05);
  --shadow: 0 8px 24px -10px rgba(30, 24, 18, 0.16);
  --shadow-lg: 0 20px 48px -16px rgba(30, 24, 18, 0.22);

  --ring: 0 0 0 3px rgba(168, 88, 58, 0.22);

  color-scheme: light;
}

/* ------------------------------------------------------------------------------------
   Reset léger
   ------------------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
svg { display: block; }

/* Focus clavier toujours visible (règle non négociable). outline-offset négatif +
   couleur peu saturée : un liseré net qui suit la forme réelle de l'élément (pilule
   comprise) au lieu d'un halo carré plaqué dessus. Ne jamais fixer border-radius ici :
   ça écraserait la forme propre de chaque élément pendant le focus. */
:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 1px;
}

/* ------------------------------------------------------------------------------------
   Typographie
   ------------------------------------------------------------------------------------ */
.h1, .h2, .h3, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
/* Échelle poussée nettement plus haut qu'avant : à cette taille, l'axe optique de
   Fraunces (police variable) prend plus de caractère tout seul — un titre qui se
   contente d'être "un peu plus gros" ne le fait pas. */
.h1, h1 { font-size: 32px; line-height: 1.12; letter-spacing: -0.015em; }
.h2, h2 { font-size: 25px; line-height: 1.18; }
.h3, h3 { font-size: 18px; line-height: 1.3; }
/* Réservé aux moments de marque (connexion, onboarding, accueil) — jamais dans une
   liste ou un formulaire dense. */
.h-hero { font-family: var(--font-display); font-weight: 560; font-size: 44px; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); margin: 0; }

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.subtitle {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.5;
  margin: 6px 0 0;
}

.text-muted { color: var(--ink-soft); }
.text-faint { color: var(--ink-faint); }

/* ------------------------------------------------------------------------------------
   Boutons — une seule action pleine par écran, tout le reste en contour/texte.
   ------------------------------------------------------------------------------------ */
.btn {
  --h: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--h);
  padding: 0 17px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  user-select: none;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: default; pointer-events: none; }
.btn-sm { --h: 36px; padding: 0 13px; font-size: 13px; }
.btn-block { width: 100%; }

/* Bouton plein, plat, sans dégradé ni effet — l'autorité vient du noir chaud, pas
   d'un artifice visuel. Une seule action principale par écran (voir design system). */
.btn-primary {
  background: var(--ink);
  color: var(--cream);
  /* Un peu plus lent que les autres boutons (0.2s vs 0.15s) et une respiration de
     lettrage à peine perceptible : l'action principale a une présence légèrement
     plus "habitée" au survol, sans jamais verser dans l'effet gadget. */
  transition: background 0.2s ease, transform 0.12s ease;
}
.btn-primary:hover { background: #3a302a; }

.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border-strong);
}
.btn-secondary:hover { border-color: var(--ink-faint); background: var(--surface-sunken); }

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: transparent;
  border-radius: var(--radius-sm);
  height: auto;
  padding: 4px 8px;
  font-weight: 600;
}
.btn-ghost:hover { color: var(--ink); background: var(--surface-sunken); }

.btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger-tint);
}
.btn-danger:hover { background: var(--danger-tint); border-color: var(--danger); }

.btn-icon {
  --h: 36px;
  width: var(--h);
  height: var(--h);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.btn-icon:hover { color: var(--ink); border-color: var(--ink-faint); }
/* Variante sans cadre (kebab "⋮" d'une ligne ou d'une carte) : discret au repos, la
   ligne elle-même porte la structure. */
.btn-icon-ghost { border-color: transparent; background: transparent; color: var(--ink-faint); }
.btn-icon-ghost:hover { background: var(--surface-sunken); border-color: transparent; }

/* ------------------------------------------------------------------------------------
   Cartes / panneaux
   ------------------------------------------------------------------------------------ */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
}
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
/* Titres de panneau en Manrope gras, pas en Fraunces : la serif reste aux titres de
   page et aux chiffres, un panneau n'est qu'un regroupement. */
.panel-header h3, .panel-header .h3 { font-family: var(--font-body); font-size: 15px; font-weight: 700; letter-spacing: 0; }
.panel-header p { font-size: 12.5px; color: var(--ink-soft); margin: 3px 0 0; }
.panel-body { padding: 22px; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
}
.stat-card .icon {
  width: 30px; height: 30px;
  border-radius: var(--radius-xs);
  background: var(--cream-deep);
  color: var(--terracotta-deep);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.stat-card .value { font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.1; }
.stat-card .label { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.stat-card .delta { font-size: 12px; font-weight: 700; margin-top: 6px; }
.stat-card .delta[data-trend="up"] { color: var(--sage); }
.stat-card .delta[data-trend="down"] { color: var(--danger); }

/* ------------------------------------------------------------------------------------
   Pastilles de statut — "sceau de cire" : forme pilule, couleur = sens, jamais seule
   (toujours un mot lisible à côté, jamais la couleur comme unique information).
   ------------------------------------------------------------------------------------ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
}
.pill-sm { font-size: 11px; padding: 3px 8px; }
.pill[data-tone="terracotta"] { background: var(--terracotta-tint); color: var(--terracotta-deep); }
.pill[data-tone="sage"]       { background: var(--sage-tint); color: var(--sage); }
.pill[data-tone="wine"]       { background: var(--wine-tint); color: var(--wine); }
.pill[data-tone="amber"]      { background: var(--amber-tint); color: var(--amber); }
.pill[data-tone="danger"]     { background: var(--danger-tint); color: var(--danger); }
.pill[data-tone="info"]       { background: var(--info-tint); color: var(--info); }
.pill[data-tone="neutral"]    { background: var(--surface-sunken); color: var(--ink-soft); }

/* ------------------------------------------------------------------------------------
   Formulaires
   ------------------------------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
}
.field .hint { font-size: 12px; color: var(--ink-soft); }
.field .error { font-size: 12px; color: var(--danger); font-weight: 600; }

.input, select.input, textarea.input {
  height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}
textarea.input { height: auto; min-height: 88px; padding: 12px 14px; resize: vertical; }
.input::placeholder { color: var(--ink-faint); }
.input:focus {
  outline: none;
  border-color: var(--terracotta);
  background: var(--surface);
  box-shadow: var(--ring);
}
.input[data-invalid="true"] { border-color: var(--danger); background: var(--danger-tint); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.checkbox-row { display: flex; align-items: center; gap: 10px; }
.checkbox-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--terracotta); }

/* ------------------------------------------------------------------------------------
   États vides / chargement / erreur — jamais un tableau à zéro ligne sans explication.
   ------------------------------------------------------------------------------------ */
.empty-state {
  padding: 48px 24px;
  text-align: center;
  color: var(--ink-soft);
}
.empty-state .icon {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--cream-deep);
  color: var(--terracotta-deep);
  display: flex; align-items: center; justify-content: center;
}
.empty-state .title { font-family: var(--font-display); font-size: 17px; color: var(--ink); margin-bottom: 4px; }
.empty-state .desc { font-size: 13px; max-width: 340px; margin: 0 auto 16px; }

.state-center {
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
}

/* Menu contextuel (kebab "⋮" de ligne, sélecteur de salon...) */
.dropdown-menu {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 6px;
  min-width: 168px;
  z-index: 150;
  animation: fade-in 0.12s ease;
}
.dropdown-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.dropdown-menu-item:hover, .dropdown-menu-item:focus-visible { background: var(--surface-sunken); }
.dropdown-menu-item[data-danger="true"] { color: var(--danger); }
.dropdown-menu-item[data-danger="true"]:hover { background: var(--danger-tint); }

.error-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--danger-tint);
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
}

/* Squelette de chargement — trois traits façon "coup de peigne" plutôt qu'un spinner
   générique, discret et cohérent avec le reste. */
.skel { position: relative; overflow: hidden; background: var(--surface-sunken); border-radius: var(--radius-sm); }
.skel::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(193, 96, 44, 0.12), transparent);
  animation: peigne 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes peigne { to { transform: translateX(100%); } }
.skel-line { height: 14px; margin-bottom: 8px; }
.skel-row { height: 56px; margin-bottom: 10px; }

@media (prefers-reduced-motion: reduce) {
  .skel::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------------------------
   Toast — pour "annuler plutôt que confirmer" (principe 6) : l'action se fait tout de
   suite, une bande basse propose "Annuler" pendant quelques secondes.
   ------------------------------------------------------------------------------------ */
#toastHost {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--ink);
  color: #fff;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  font-weight: 600;
  animation: toast-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.18s ease-in, transform 0.18s ease-in;
}
.toast.is-leaving { opacity: 0; transform: translateY(6px); }
.toast button {
  background: none; border: none; color: var(--gold);
  font-weight: 700; cursor: pointer; font-size: 13px;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ------------------------------------------------------------------------------------
   Modale / tiroir de formulaire — pattern partagé pour tous les CRUD (client, service,
   coiffeur, rendez-vous...).
   ------------------------------------------------------------------------------------ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(36, 29, 24, 0.42);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
  animation: fade-in 0.15s ease;
}
@media (min-width: 640px) {
  .modal-backdrop { align-items: center; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--surface);
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lg);
  /* Focus programmatique sur le panneau lui-même (modales sans champ) : le cadre et
     l'ombre suffisent déjà à signaler "c'est ici" ; un anneau de focus autour de toute
     la carte serait redondant. */
  outline: none;
  /* Léger décalage sur le fond avant l'entrée du panneau : le décor s'efface d'abord,
     l'acteur arrive ensuite — une choréographie à deux temps plutôt que deux animations
     parallèles qui se ressemblent. */
  animation: modal-up 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) 0.03s backwards;
}
@media (min-width: 640px) {
  .modal { border-radius: var(--radius-lg); }
}
@keyframes modal-up { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
}
.modal-body { padding: 22px; }
.modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 22px;
  border-top: 1px solid var(--border);
  position: sticky;
  bottom: 0;
  background: var(--surface);
}

/* ------------------------------------------------------------------------------------
   Layout général du dashboard (shell) — barre latérale pleine hauteur (marque, navigation,
   compte) + zone principale qui défile seule. Sous 860px, la barre devient un en-tête
   collant avec une navigation horizontale.
   ------------------------------------------------------------------------------------ */
.dash { min-height: 100dvh; display: flex; position: relative; z-index: 1; }

.dash-sidebar {
  width: 232px;
  flex-shrink: 0;
  height: 100dvh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  padding: 28px 18px 18px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.dash-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 26px; min-width: 0; }
/* Marque plate en noir chaud — le même poids que le bouton principal, sans dégradé. */
.dash-brand .mark {
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dash-brand .name { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.15; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-brand .switch {
  display: inline-flex; align-items: center; gap: 3px;
  margin-top: 2px; padding: 0;
  background: none; border: none;
  font: inherit; font-size: 11.5px; font-weight: 600; color: var(--ink-soft);
  cursor: pointer;
}
.dash-brand .switch:hover { color: var(--terracotta-deep); }
.plan-status { display:inline-flex; align-items:center; gap:5px; margin-top:6px; padding:3px 8px; border-radius:var(--radius-pill); background:var(--surface-sunken); color:var(--ink-soft); font-size:10.5px; font-weight:700; }
.plan-status::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--ink-faint); }
.plan-status[data-active="true"] { background:var(--sage-tint); color:var(--sage); }
.plan-status[data-active="true"]::before { background:var(--sage); }

.dash-nav { display: flex; flex-direction: column; gap: 2px; }
.dash-nav-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit; font-size: 14px; font-weight: 600; text-align: left;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.dash-nav-item svg { flex-shrink: 0; }
.dash-nav-item:hover { background: var(--surface-sunken); color: var(--ink); }
.dash-nav-item[data-current="true"] { background: var(--cream-deep); color: var(--ink); }
/* L'icône se distingue en couleur, pas seulement le fond : l'état actif se repère
   d'un coup d'œil sans avoir à lire le libellé. */
.dash-nav-item[data-current="true"] svg { color: var(--terracotta); }
.dash-nav-item .badge {
  margin-left: auto;
  font-size: 11px; font-weight: 700;
  background: var(--wine-tint); color: var(--wine);
  padding: 1px 7px; border-radius: var(--radius-pill);
}

.dash-user {
  margin-top: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 4px 0 8px;
  border-top: 1px solid var(--border);
}
.dash-user .who { flex: 1; min-width: 0; }
.dash-user .nom { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-user .salon { font-size: 12px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Pastille d'initiales (personne, salon). Aplat doux, jamais de dégradé. */
.avatar-chip {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--terracotta-tint);
  color: var(--terracotta-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; flex-shrink: 0;
}
.avatar-chip[data-size="lg"] { width: 48px; height: 48px; font-size: 16px; }
.avatar-chip[data-size="xl"] { width: 58px; height: 58px; font-size: 19px; }
.avatar-chip[data-tone="cream"] { background: var(--cream-deep); }
.dash-user .avatar-chip { width: 30px; height: 30px; font-size: 12px; }
.dash-user .btn-icon { --h: 32px; }

.dash-main { flex: 1; min-width: 0; padding: 38px 46px 72px; }
.dash-main > * { max-width: 1240px; }

/* En-tête de page : sur-titre (nom de la page) + titre qui dit l'essentiel, action à
   droite. Toutes les pages l'utilisent pour un rythme identique. */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.page-head .h1 { margin-top: 4px; }
.page-head .subtitle { margin-top: 4px; }
.page-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .dash { flex-direction: column; }
  .dash-sidebar {
    width: 100%;
    height: auto;
    z-index: 20;
    padding: 12px 16px 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    overflow: visible;
  }
  .dash-brand { padding: 0; }
  .dash-user { grid-row: 1; grid-column: 2; margin: 0; padding: 0; border: none; }
  .dash-user .who { display: none; }
  .dash-nav {
    grid-column: 1 / -1;
    flex-direction: row;
    overflow-x: auto;
    gap: 4px;
    margin: 10px -16px 0;
    padding: 0 16px 10px;
    /* Fondu sur le bord droit tant qu'il reste des onglets à découvrir en défilant —
       sans ça, la coupure nette ne dit pas "ça défile". */
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
  }
  .dash-nav-item { width: auto; flex-shrink: 0; padding: 8px 12px; font-size: 13.5px; }
  .dash-main {
    padding: 22px 16px 90px;
    /* Un composant enfant (grille semaine de l'agenda) peut imposer une largeur
       minimale pour rester lisible : elle doit scroller dans SON propre conteneur,
       jamais faire déborder la page entière. */
    overflow-x: hidden;
  }
  .page-head { margin-bottom: 20px; }
}

/* ------------------------------------------------------------------------------------
   Briques de liste partagées (clients, appels, services, équipe, boutique...)
   ------------------------------------------------------------------------------------ */
.search-field { position: relative; width: 280px; max-width: 100%; }
.search-field > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); pointer-events: none; }
.search-field .input { height: 40px; padding-left: 36px; font-size: 13.5px; }
@media (max-width: 640px) { .search-field { width: 100%; } }

/* Filtres rapides (segments) — un fond plein sur la pilule active suffit, pas de coche. */
.seg-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.seg {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  font: inherit; font-size: 13px; font-weight: 700; color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.seg:hover { background: var(--surface-sunken); }
.seg[data-active="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* Liste + fiche détaillée côte à côte (clients, appels). La fiche passe dessous sur
   écran étroit. */
.list-detail { display: flex; gap: 22px; align-items: flex-start; }
.list-detail > .panel:first-child { flex: 1; min-width: 0; overflow: hidden; }
.detail-panel {
  width: 360px;
  flex-shrink: 0;
  position: sticky;
  top: 24px;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 24px;
}
.detail-panel[data-wide="true"] { width: 400px; }
.detail-panel .detail-footer { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.detail-panel .detail-footer .btn { flex: 1; }
@media (max-width: 1100px) {
  .list-detail { flex-direction: column; align-items: stretch; }
  .detail-panel, .detail-panel[data-wide="true"] { width: 100%; position: static; max-height: none; }
}

/* Ligne de liste cliquable (client, appel) — un vrai <button> pleine largeur. */
.list-row {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 13px 18px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: none;
  font: inherit; text-align: left; color: inherit;
  cursor: pointer;
  transition: background 0.12s ease;
}
.list-row:last-child { border-bottom: none; }
.list-row:hover { background: var(--surface-sunken); }
.list-row[data-active="true"] { background: var(--cream-deep); }
.list-row .main-col { flex: 1; min-width: 0; }
.list-row .title { font-weight: 700; font-size: 14px; }
.list-row .sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row .col { width: 120px; flex-shrink: 0; font-size: 12.5px; color: var(--ink-soft); }
.list-row .col-strong { width: 84px; flex-shrink: 0; text-align: right; font-weight: 700; color: var(--ink); }
@media (max-width: 760px) { .list-row .col { display: none; } }

/* Intitulé de groupe au-dessus d'un panneau (catégorie de service...). */
.group-label { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--terracotta-deep); margin: 26px 0 10px; }
.group-label:first-child { margin-top: 0; }

/* Interrupteur actif / inactif — un vrai bouton role="switch", pas une case cachée. */
.switch-toggle {
  position: relative;
  width: 38px; height: 22px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  cursor: pointer;
  transition: background 0.15s ease;
}
.switch-toggle::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(30, 24, 18, 0.2);
  transition: transform 0.15s ease;
}
.switch-toggle[aria-checked="true"] { background: var(--terracotta); }
.switch-toggle[aria-checked="true"]::after { transform: translateX(16px); }
.switch-toggle:disabled { opacity: 0.5; cursor: default; }

/* Grille de cartes (équipe, boutique). */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.card-grid[data-dense="true"] { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; position: relative; }
.card[data-inactive="true"] > :not(.card-keep) { opacity: 0.55; }
.tag { display: inline-flex; font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink-soft); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.link-btn { background: none; border: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--terracotta-deep); cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.status-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.status-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }
.status-dot[data-tone="amber"]::before { background: var(--amber); }
.status-dot[data-tone="neutral"]::before { background: var(--ink-faint); }

/* Bandeau d'information de page (assistant actif, à activer...). */
.banner { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.banner[data-tone="sage"] { background: var(--sage-tint); }
.banner[data-tone="terracotta"] { background: var(--terracotta-tint); }
.banner .icon { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--surface); color: var(--sage); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.banner[data-tone="terracotta"] .icon { color: var(--terracotta-deep); }
.banner .title { font-weight: 700; font-size: 14px; }
.banner .desc { font-size: 13px; color: var(--ink-soft); margin: 2px 0 0; }
@media (max-width: 640px) { .banner { flex-wrap: wrap; } }

/* Bulles de conversation (transcripts d'appel). */
.bubble { font-size: 13px; line-height: 1.5; padding: 9px 12px; border-radius: 10px; max-width: 88%; white-space: pre-wrap; word-break: break-word; }
.bubble .who { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); margin-bottom: 2px; white-space: normal; }
.bubble[data-role="ia"] { background: var(--surface-sunken); align-self: flex-start; }
.bubble[data-role="client"] { background: var(--cream-deep); align-self: flex-end; }
.bubble[data-role="inconnu"] { background: var(--surface-sunken); align-self: flex-start; }
.bubbles { display: flex; flex-direction: column; gap: 7px; }

.section-title { font-family: var(--font-body); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); margin: 0 0 10px; }

/* ------------------------------------------------------------------------------------
   Écran de connexion — deux tons : un panneau de marque sombre à gauche (la promesse),
   la connexion sur fond ivoire à droite. Sous 900px, seule la connexion reste.
   ------------------------------------------------------------------------------------ */
.login-screen { min-height: 100dvh; display: flex; position: relative; z-index: 1; }
.login-brand {
  width: 52%;
  flex-shrink: 0;
  position: relative;
  background:
    linear-gradient(180deg, rgba(15, 12, 10, 0.78) 0%, rgba(15, 12, 10, 0.6) 45%, rgba(15, 12, 10, 0.9) 100%),
    url("assets/login-photo.jpg") center / cover no-repeat;
  color: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 56px;
}
.login-brand-header { display: flex; align-items: center; gap: 14px; }
.login-brand-mark {
  width: 52px; height: 52px;
  border-radius: var(--radius);
  background: rgba(247, 242, 236, 0.16);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
}
.login-wordmark { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--cream); letter-spacing: 0.01em; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }
.login-claim { max-width: 440px; }
.login-claim .eyebrow { color: rgba(247, 242, 236, 0.75); letter-spacing: 0.08em; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }
/* La règle globale h1{color:var(--ink)} gagne sur l'héritage : on redonne la couleur
   claire explicitement. Ombre portée pour rester lisible sur toute zone de la photo. */
.login-claim h1 { font-size: 42px; line-height: 1.15; font-weight: 500; color: var(--cream); margin: 14px 0 16px; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55); }
.login-claim p { font-size: 15px; line-height: 1.6; color: rgba(247, 242, 236, 0.85); margin: 0; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5); }
.login-chips { display: flex; gap: 10px; }
.login-chip { flex: 1; border: 1px solid rgba(247, 242, 236, 0.24); border-radius: 10px; padding: 12px 14px; font-size: 13px; color: rgba(247, 242, 236, 0.85); background: rgba(15, 12, 10, 0.35); backdrop-filter: blur(3px); }
.login-chip b { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--cream); margin-bottom: 2px; }

.login-side { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 24px; background: var(--cream); }
.login-card { width: 100%; max-width: 400px; }
.login-card h2 { font-size: 27px; margin: 10px 0 6px; }
.login-card .lead { font-size: 14px; color: var(--ink-soft); margin: 0 0 30px; line-height: 1.55; }

.btn-google {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease, border-color 0.15s ease;
}
.btn-google:hover { background: var(--surface-sunken); border-color: var(--ink-faint); }
.btn-google:active { transform: scale(0.98); }
.btn-google:disabled { opacity: 0.6; cursor: default; }

.login-error { margin-top: 18px; font-size: 13px; color: var(--danger); min-height: 1em; font-weight: 600; }
.login-foot { margin-top: 22px; font-size: 12px; line-height: 1.6; color: var(--ink-faint); }

/* Sur écran étroit, le panneau de marque disparaît : la carte garde un rappel de marque. */
.login-card-mark { display: none; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--ink); color: var(--cream); align-items: center; justify-content: center; margin-bottom: 22px; }
@media (max-width: 900px) {
  .login-brand { display: none; }
  .login-card-mark { display: flex; }
}

/* ------------------------------------------------------------------------------------
   Onboarding — étapes de création du salon / de l'équipe / activation IA
   ------------------------------------------------------------------------------------ */
.onboarding-wrap {
  min-height: 100dvh;
  padding: 32px 20px 60px;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.onboarding {
  width: 100%;
  max-width: 560px;
}
.onboarding-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 26px;
}
.onboarding-step-dot {
  flex: 1;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--border);
  transition: background 0.2s ease;
}
.onboarding-step-dot[data-state="done"] { background: var(--sage); }
.onboarding-step-dot[data-state="current"] { background: var(--terracotta); }

.onboarding-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  box-shadow: var(--shadow);
}
.onboarding-card .eyebrow { display: block; margin-bottom: 8px; }
.onboarding-card h1 { margin-bottom: 8px; }
.onboarding-card > p.subtitle { margin-bottom: 26px; }

.onboarding-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}

/* Ligne de liste plate — pas de carte individuelle par personne (un empilement de
   boîtes fatigue vite l'œil) : le conteneur (.panel) porte le cadre, chaque ligne se
   sépare juste par un filet fin. */
.roster-item {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 12px;
  padding: 13px 20px;
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
}
.roster-item:last-child { border-bottom: none; }
button.roster-item { cursor: pointer; }
button.roster-item:hover { background: var(--surface-sunken); }
.roster-item .avatar-chip { width: 30px; height: 30px; font-size: 12px; }
.roster-item .who { flex: 1; min-width: 0; }
.roster-item .who .nom { font-weight: 700; font-size: 14px; }
.roster-item .who .meta { font-size: 12px; color: var(--ink-soft); }
@media (max-width: 640px) {
  /* Le détail complet reste dans la fiche au clic : ici, une hauteur de ligne
     prévisible compte plus qu'une info jamais coupée. */
  .roster-item .who .meta {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Bloc code USSD — mise en avant façon "ticket", copiable */
.ussd-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ussd-block button {
  flex-shrink: 0;
  background: rgba(255,255,255,0.12);
  border: none;
  color: var(--gold);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.ussd-block button:hover { background: rgba(255,255,255,0.2); }

.ia-status-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.ia-status-card[data-statut="inactif"] { background: var(--surface-sunken); }
.ia-status-card[data-statut="en_attente"] { background: var(--amber-tint); border-color: #ecd9ab; }
.ia-status-card[data-statut="actif"] { background: var(--sage-tint); border-color: #cfe0cb; }
.ia-status-card .icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.6); display:flex; align-items:center; justify-content:center; }

/* Mini utilitaires */
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-xs { gap: 6px; } .gap-sm { gap: 10px; } .gap-md { gap: 16px; } .gap-lg { gap: 24px; }
.grow { flex: 1; min-width: 0; }
.mt-0{margin-top:0}.mt-sm{margin-top:10px}.mt-md{margin-top:18px}.mt-lg{margin-top:28px}
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flip-x { transform: scaleX(-1); }