/* ============================================================================
   @latitude/ui — theme.css
   Source de vérité visuelle partagée : CRM · Espace client · Diagnostic.
   Tailwind v4, CSS-first. Drop-in superset des anciens globals.css :
   tous les tokens existants sont préservés (rien ne casse), les valeurs
   sont « élevées », et le thème clair/sombre est piloté par [data-theme].

   IMPORTANT : ce fichier NE FAIT PAS `@import "tailwindcss"`. L'app hôte importe
   Tailwind v4 d'abord, puis ce fichier :
       @import "tailwindcss";
       @import "@latitude/ui/theme.css";
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. ACCENT + ÉCHELLES (communs aux deux thèmes)
   --------------------------------------------------------------------------- */
:root {
  --primary: #E07855;
  --primary-hover: #c96640;
  --primary-deep: #A8492E;      /* terracotta lisible sur fond clair */

  /* Rayons */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: 220ms;

  /* Échelle typo (ratio 1.25, base 16) — pour usage explicite */
  --text-xs: 0.75rem;   /* 12 */
  --text-sm: 0.875rem;  /* 14 */
  --text-base: 1rem;    /* 16 */
  --text-lg: 1.125rem;  /* 18 */
  --text-xl: 1.25rem;   /* 20 */
  --text-2xl: 1.5625rem;/* 25 */
  --text-3xl: 1.9375rem;/* 31 */
  --text-4xl: 2.4375rem;/* 39 */
  --text-5xl: 3.0625rem;/* 49 */
  --text-6xl: 3.8125rem;/* 61 */
}

/* ---------------------------------------------------------------------------
   2. THÈME CLAIR (crème) — défaut
   --------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  --background: #FAFAF8;
  --surface: #FFFFFF;
  --surface-hover: rgba(224, 120, 85, 0.08);
  --warm: #F5F0EB;
  --foreground: #3A3A3A;
  --muted: #6E6E6E;
  --dark: #2E2E2E;
  --border: rgba(58, 58, 58, 0.08);
  --primary-light: rgba(224, 120, 85, 0.08);
  --lt-ring-track: rgba(58, 50, 40, 0.10);
  /* Cartes « flat premium » (option B validée) : pas d'ombre portée, fin halo
     en haut + bord un cran plus net. */
  --lt-card-halo: rgba(255, 255, 255, 0.7);
  --lt-card-border: rgba(58, 50, 40, 0.12);
  /* Échelle de chaleur (maturité % + température diagnostic) — option 1 :
     froid→chaud, le PIC = terracotta PLEIN (= action à mener), jamais rouge.
     bg/fg = badge ; hue = couleur représentative (anneaux, accents, lignes). */
  --heat-froid-bg: rgba(96,125,160,0.12); --heat-froid-fg: #5E7E9C; --heat-froid-hue: #6E8CA8;
  --heat-tiede-bg: rgba(176,130,40,0.14); --heat-tiede-fg: #8C5A1F; --heat-tiede-hue: #B98A2E;
  --heat-chaud-bg: rgba(224,120,85,0.14); --heat-chaud-fg: #A8492E; --heat-chaud-hue: #C96640;
  --heat-ultra-bg: #E07855; --heat-ultra-fg: #FFFFFF; --heat-ultra-hue: #E07855;

  --shadow-sm: 0 1px 2px rgba(58, 50, 40, 0.06);
  --shadow-md: 0 4px 14px rgba(58, 50, 40, 0.08);
  --shadow-lg: 0 16px 40px rgba(58, 50, 40, 0.12);

  --success-fg: #3E6B42; --success-bg: #E3EFE4;
  --warning-fg: #8C5A1F; --warning-bg: #FBEBD6;
  --error-fg:   #B23A2F; --error-bg:   #F7E4E1;
  --info-fg:    #2F6B6B; --info-bg:    #E0EFEF;

  /* alias hérités */
  --badge-success-bg: var(--success-bg); --badge-success-fg: var(--success-fg);
  --badge-warn-bg: var(--warning-bg);    --badge-warn-fg: var(--warning-fg);
}

/* ---------------------------------------------------------------------------
   3. THÈME SOMBRE (anthracite « élevé »)
   Piloté par [data-theme="dark"] OU par les classes héritées
   .crm/.espace/.reserver (compat ascendante le temps de migrer au toggle).
   --------------------------------------------------------------------------- */
[data-theme="dark"],
.crm,
.espace,
.reserver {
  --background: #262523;
  --surface: #34322F;
  --surface-hover: rgba(224, 120, 85, 0.14);
  --warm: #2E2C29;
  --foreground: #F5F0EB;
  --muted: #D0C5B9;
  --dark: #1F1E1C;
  --border: rgba(255, 255, 255, 0.09);
  --primary-light: rgba(224, 120, 85, 0.14);
  --lt-ring-track: rgba(255, 255, 255, 0.10);
  --lt-card-halo: rgba(255, 255, 255, 0.05);
  --lt-card-border: rgba(255, 255, 255, 0.11);
  /* Échelle de chaleur — sombre (cf. clair pour la logique option 1). */
  --heat-froid-bg: rgba(125,143,165,0.16); --heat-froid-fg: #9BB0C4; --heat-froid-hue: #9BB0C4;
  --heat-tiede-bg: rgba(205,160,70,0.18); --heat-tiede-fg: #CBA24E; --heat-tiede-hue: #CBA24E;
  --heat-chaud-bg: rgba(224,120,85,0.20); --heat-chaud-fg: #E89A7E; --heat-chaud-hue: #E07855;
  --heat-ultra-bg: #E07855; --heat-ultra-fg: #FFFFFF; --heat-ultra-hue: #E07855;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.42);

  --success-fg: #A8CFAC; --success-bg: rgba(98, 160, 103, 0.22);
  --warning-fg: #E8BF86; --warning-bg: rgba(224, 164, 85, 0.22);
  --error-fg:   #E39B92; --error-bg:   rgba(178, 58, 47, 0.25);
  --info-fg:    #8FC2C2; --info-bg:    rgba(47, 107, 107, 0.25);

  --badge-success-bg: var(--success-bg); --badge-success-fg: var(--success-fg);
  --badge-warn-bg: var(--warning-bg);    --badge-warn-fg: var(--warning-fg);
}

/* ---------------------------------------------------------------------------
   4. MAPPING TAILWIND (utilities : bg-surface, text-muted, bg-primary, …)
   --------------------------------------------------------------------------- */
@theme inline {
  --color-background: var(--background);
  --color-surface: var(--surface);
  --color-surface-hover: var(--surface-hover);
  --color-warm: var(--warm);
  --color-foreground: var(--foreground);
  --color-muted: var(--muted);
  --color-dark: var(--dark);
  --color-border: var(--border);

  --color-primary: var(--primary);
  --color-primary-hover: var(--primary-hover);
  --color-primary-deep: var(--primary-deep);
  --color-primary-light: var(--primary-light);

  --color-success: var(--success-fg);
  --color-warning: var(--warning-fg);
  --color-error: var(--error-fg);
  --color-info: var(--info-fg);

  --font-sans: var(--font-dm-sans);
  --font-serif: var(--font-dm-serif);

  --radius-sm: var(--radius-sm);
  --radius-md: var(--radius-md);
  --radius-lg: var(--radius-lg);
  --radius-xl: var(--radius-xl);
}

/* ---------------------------------------------------------------------------
   5. BASE + UTILITAIRES HÉRITÉS (préservés à l'identique)
   --------------------------------------------------------------------------- */
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-dm-sans), system-ui, sans-serif;
  /* Scroll toujours visible → viewport stable, pas de saut de police. */
  overflow-y: scroll;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.font-serif {
  font-family: var(--font-dm-serif), Georgia, serif;
  letter-spacing: -0.01em;
}

/* Label de section : petit titre uppercase tracké. */
.section-label {
  font-size: 0.8125rem; /* 13px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

/* Logo « Latitude. » avec le point orange. */
.logo-mark {
  font-family: var(--font-dm-serif), Georgia, serif;
  letter-spacing: -0.01em;
}
.logo-mark::after { content: "."; color: var(--primary); }

/* Repli sidebar : libère le plafond des fiches denses. */
body.sidebar-collapsed .fiche-wide { max-width: none; }

/* Scrollbar discrète (zones internes scrollables). */
.scrollbar-discrete { scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color .2s; }
.scrollbar-discrete:hover { scrollbar-color: var(--border) transparent; }
.scrollbar-discrete::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-discrete::-webkit-scrollbar-track { background: transparent; }
.scrollbar-discrete::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; transition: background .2s; }
.scrollbar-discrete:hover::-webkit-scrollbar-thumb { background: rgba(110,110,110,.35); }
.scrollbar-discrete:hover::-webkit-scrollbar-thumb:hover { background: rgba(110,110,110,.55); }

/* ---------------------------------------------------------------------------
   6. COMPOSANTS (classes utilisées par @latitude/ui — préfixe lt-)
   --------------------------------------------------------------------------- */

/* Carte */
.lt-card {
  background: var(--surface);
  border: 1px solid var(--lt-card-border);
  border-radius: 14px;
  /* Flat premium : aucune ombre portée, juste un fin halo de lumière en haut. */
  box-shadow: inset 0 1px 0 var(--lt-card-halo);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lt-card--hover:hover { border-color: var(--primary); transform: translateY(-1px); }
.lt-card--flat { box-shadow: none; }
/* Padding OPT-IN (padded=true). Le package n'impose pas de padding par défaut
   sur la base : ainsi un écran qui pose son propre p-4/p-5 via className n'est
   jamais écrasé (theme.css est chargé après Tailwind = non-layered > layered). */
.lt-card--pad { padding: 24px; }

/* Bouton */
.lt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: 0.875rem;
  /* Hauteur « option A » validée (≈32px) : padding vertical fin. */
  border-radius: var(--radius-md); padding: 6px 16px;
  cursor: pointer; border: 1px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lt-btn:disabled { opacity: .5; cursor: not-allowed; }
.lt-btn--primary { background: var(--primary); color: #fff; }
.lt-btn--primary:hover { background: var(--primary-hover); }
.lt-btn--ghost { background: transparent; color: var(--foreground); border-color: var(--border); }
.lt-btn--ghost:hover { border-color: var(--primary); color: var(--primary); }
.lt-btn--soft { background: var(--primary-light); color: var(--primary-deep); }
[data-theme="dark"] .lt-btn--soft, .crm .lt-btn--soft, .espace .lt-btn--soft, .reserver .lt-btn--soft { color: #F5D9CD; }
/* outline : action secondaire bordée, neutre au repos, se contraste au hover */
.lt-btn--outline { background: transparent; color: var(--muted); border-color: var(--border); }
.lt-btn--outline:hover { color: var(--foreground); border-color: var(--foreground); }
/* danger : action destructive/sensible, terracotta sans aplat */
.lt-btn--danger { background: transparent; color: var(--primary-deep); }
.lt-btn--danger:hover { background: var(--primary-light); }
[data-theme="dark"] .lt-btn--danger, .crm .lt-btn--danger, .espace .lt-btn--danger, .reserver .lt-btn--danger { color: #F5D9CD; }
/* Tailles (défaut = base lt-btn). sm = action inline sur carte/ligne. */
.lt-btn--sm { padding: 5px 12px; font-size: 0.75rem; gap: 6px; }

/* Badge */
.lt-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 600; padding: 3px 11px; border-radius: 999px;
}
.lt-badge--ok   { background: var(--success-bg); color: var(--success-fg); }
.lt-badge--warn { background: var(--warning-bg); color: var(--warning-fg); }
.lt-badge--err  { background: var(--error-bg);   color: var(--error-fg); }
.lt-badge--info { background: var(--info-bg);     color: var(--info-fg); }
/* neutral : libellé sobre sur fond chaud. accent : pastille terracotta. */
.lt-badge--neutral { background: var(--warm); color: var(--muted); }
.lt-badge--accent  { background: var(--primary-light); color: var(--primary-deep); }
[data-theme="dark"] .lt-badge--accent, .crm .lt-badge--accent, .espace .lt-badge--accent, .reserver .lt-badge--accent { color: #F5D9CD; }
.lt-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }

/* Chaleur (maturité % + température diagnostic) — échelle option 1 :
   froid → chaud, le pic ultra = terracotta PLEIN (action à mener). */
.lt-heat {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  border-radius: 999px; padding: 4px 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.lt-heat--froid { background: var(--heat-froid-bg); color: var(--heat-froid-fg); }
.lt-heat--tiede { background: var(--heat-tiede-bg); color: var(--heat-tiede-fg); }
.lt-heat--chaud { background: var(--heat-chaud-bg); color: var(--heat-chaud-fg); }
.lt-heat--ultra { background: var(--heat-ultra-bg); color: var(--heat-ultra-fg); }

/* Stat */
.lt-stat {
  background: var(--surface); border: 1px solid var(--lt-card-border);
  border-radius: 14px; padding: 20px; box-shadow: inset 0 1px 0 var(--lt-card-halo);
}
.lt-stat__v { font-family: var(--font-dm-serif), serif; font-size: 1.9375rem; line-height: 1; }
.lt-stat__k { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; font-weight: 600; }

/* Liste de cartes (PAS un tableau Excel : chaque ligne flotte, fine) */
.lt-list { display: flex; flex-direction: column; gap: 10px; font-size: 0.875rem; }
.lt-list-head, .lt-list-row { display: grid; grid-template-columns: var(--lt-cols, 1fr); align-items: center; gap: 16px; }
.lt-list-head { padding: 2px 20px 4px; }
.lt-list-head > span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
.lt-list-row {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 11px 20px; box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lt-list-row--clickable { cursor: pointer; }
.lt-list-row--clickable:hover {
  box-shadow: var(--shadow-md); transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
}
.lt-list-head .lt-r, .lt-list-row .lt-r { text-align: right; }
.lt-list-row .lt-nm { font-weight: 500; }
.lt-list-row .lt-mut { color: var(--muted); }

/* Pilule d'étape (statut pipeline) */
.lt-pill { font-size: 0.75rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--primary-light); color: var(--primary-deep); }
[data-theme="dark"] .lt-pill, .crm .lt-pill, .espace .lt-pill, .reserver .lt-pill { color: #F5D9CD; }

/* Barre de progression */
.lt-bar { height: 8px; border-radius: 999px; background: var(--warm); overflow: hidden; }
.lt-bar > i { display: block; height: 100%; background: var(--primary); border-radius: 999px; }

/* Anneau de progression (jauge circulaire) */
.lt-ring { position: relative; display: inline-flex; flex: none; }
.lt-ring__svg { display: block; }
.lt-ring__val { transition: stroke-dashoffset .6s var(--ease); }
.lt-ring__c {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1.04; text-align: center;
}

/* Toggle de thème */
.lt-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--warm); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 8px 6px 14px; cursor: pointer; color: var(--foreground);
  font: inherit; font-size: 0.875rem; font-weight: 500;
  transition: border-color var(--dur) var(--ease);
}
.lt-toggle:hover { border-color: var(--primary); }
.lt-toggle__sw { width: 34px; height: 20px; border-radius: 999px; background: var(--border); position: relative; transition: background var(--dur); }
.lt-toggle__sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--primary); transition: transform var(--dur) var(--ease); }
[data-theme="dark"] .lt-toggle__sw::after, .crm .lt-toggle__sw::after, .espace .lt-toggle__sw::after { transform: translateX(14px); }