/* ============================================================
   Déploiement 2.0 — Design tokens
   Cockpit premium · IBM Plex Sans + IBM Plex Mono
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Brand accent — variable réservée pour injecter la charte constructeur */
  --brand: #2f6df6;
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
  --brand-soft: rgba(47, 109, 246, 0.12);

  /* Type */
  --font-ui: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Échelle d'espacement (2.3) — base 4px, réutilisable pour réduire la dette de styles inline */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* Échelle typographique (2.3) */
  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-base: 13.5px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 23px;
  --fs-2xl: 30px;
  --lh-tight: 1.15;
  --lh-normal: 1.5;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Status palette (constante quel que soit le thème, ajustée en intensité) */
  --st-done: #16a34a;     /* Déployé / Terminé   🟢 */
  --st-progress: #2f6df6; /* En cours            🔵 */
  --st-planned: #eab308;  /* Planifié            🟡 */
  --st-atrisk: #f97316;   /* À risque            🟠 */
  --st-late: #e11d48;     /* En retard           🔴 */
  --st-blocked: #334155;  /* Bloqué              ⚫ */
  --st-postponed: #8b5cf6;/* Reporté             🟣 */
  --st-none: #94a3b8;     /* Non planifié        ⚪ */

  /* Palette catégorielle (coûts) — ramp indigo, jamais utilisée pour un statut */
  --cat-1: #2f4b8f;
  --cat-2: #5878c9;
  --cat-3: #8ea7e4;
  --cat-4: #c2d0f2;

  /* Statuts d'action (plan d'actions) — échelle distincte des statuts de site */
  --ac-todo: #64748b;
  --ac-doing: #2f6df6;
  --ac-done: #16a34a;
  --ac-blocked: #334155;
  --ac-cancelled: #b4bdcc;
  --ac-overdue: #e11d48;

  --speed: 220ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- THÈME CLAIR ---------- */
:root, [data-theme="light"] {
  --bg: #eef1f6;
  --bg-grad: radial-gradient(1200px 600px at 80% -10%, #f6f8fc 0%, #eef1f6 60%);
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #eef2f8;
  --ink: #0f1b2d;
  --ink-2: #3a4a60;
  --muted: #55657c;
  --faint: #64748b;
  --line: #e3e9f1;
  --line-strong: #d2dbe7;
  --shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.06), 0 1px 3px rgba(15, 27, 45, 0.04);
  --shadow-md: 0 4px 16px rgba(15, 27, 45, 0.08), 0 1px 4px rgba(15, 27, 45, 0.04);
  --shadow-lg: 0 18px 50px rgba(15, 27, 45, 0.16);
  --rail: #0f1b2d;       /* sidebar reste sombre = signature cockpit */
  --rail-ink: #c9d6e8;
  --rail-ink-dim: #6a7c95;
  --rail-line: rgba(255, 255, 255, 0.07);
  --rail-active: rgba(47, 109, 246, 0.18);
  --grid-dot: rgba(15, 27, 45, 0.05);
  --chart-grid: #e8edf4;
}

/* ---------- THÈME SOMBRE ---------- */
[data-theme="dark"] {
  --bg: #070c15;
  --bg-grad: radial-gradient(1100px 560px at 78% -12%, #122036 0%, #0a111e 55%, #070c15 100%);
  --surface: #101a2b;
  --surface-2: #0c1525;
  --surface-3: #16233a;
  --ink: #eaf1fb;
  --ink-2: #b4c4dc;
  --muted: #93a6c2;
  --faint: #7c8fac;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 22px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
  --rail: #0a121f;
  --rail-ink: #c9d6e8;
  --rail-ink-dim: #5f718d;
  --rail-line: rgba(255, 255, 255, 0.06);
  --rail-active: rgba(47, 109, 246, 0.22);
  --grid-dot: rgba(255, 255, 255, 0.04);
  --chart-grid: rgba(255, 255, 255, 0.07);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#root { height: 100%; }

/* Tabular figures everywhere numbers matter */
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; letter-spacing: -0.01em; }
.tnum { font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

button { font-family: inherit; cursor: pointer; }
::selection { background: var(--brand-soft); }

/* Accessibilité — focus clavier visible sur tout l'interactif (I4) */
:focus-visible {
  outline: 2.5px solid var(--brand);
  outline-offset: 2px;
  border-radius: 5px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) { outline: none; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes drawerIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes drawerUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes dash { to { stroke-dashoffset: 0; } }
@keyframes sweep { from { transform: rotate(-90deg) scale(1); } }

/* ---------- Leaflet ---------- */
.leaflet-container { background: var(--surface-2); font-family: var(--font-ui); outline: none; }
.leaflet-control-attribution { background: color-mix(in srgb, var(--surface) 80%, transparent) !important; color: var(--faint) !important; font-size: 10px; }
.leaflet-control-attribution a { color: var(--muted) !important; }
.leaflet-bar a { background: var(--surface) !important; color: var(--ink-2) !important; border-color: var(--line) !important; }
.d2-tip.leaflet-tooltip {
  background: var(--ink); color: var(--surface); border: none; border-radius: 9px;
  box-shadow: var(--shadow-lg); padding: 8px 11px; font-family: var(--font-ui);
}
.d2-tip.leaflet-tooltip::before { border-top-color: var(--ink); }
.d2-tt-name { font-size: 12.5px; font-weight: 700; }
.d2-tt-sub { font-family: var(--font-mono); font-size: 10.5px; opacity: 0.7; margin-top: 1px; }
.d2-tt-st { display: flex; align-items: center; gap: 6px; font-size: 11px; margin-top: 5px; }
.d2-tt-st i { width: 8px; height: 8px; border-radius: 99px; display: inline-block; }
.mk-glow { filter: drop-shadow(0 0 4px currentColor); }
.mk-pulse { animation: pulse 2.2s ease-in-out infinite; }
.leaflet-fade-anim .leaflet-tile { will-change: auto; }

/* Fallback hors-ligne de la carte (C3) */
.leaflet-container.d2-map-fallback {
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--brand) 10%, var(--surface-2)) 0%, var(--surface-2) 60%),
    repeating-linear-gradient(45deg, transparent, transparent 22px, var(--surface-3) 22px, var(--surface-3) 23px);
}
.d2-map-offline {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 1200;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); color: var(--ink-2); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 7px 13px; font-size: 12px; font-weight: 600;
  box-shadow: var(--shadow-md); font-family: var(--font-ui);
}
.d2-map-offline span { width: 8px; height: 8px; border-radius: 99px; background: var(--st-atrisk); flex: none; }

/* I5 — skeleton de chargement de la carte */
.leaflet-container.d2-map-loading::after {
  content: ''; position: absolute; inset: 0; z-index: 1100; pointer-events: none;
  background:
    linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--surface) 55%, transparent) 50%, transparent 70%),
    var(--surface-2);
  background-size: 220% 100%, 100% 100%;
  animation: d2shimmer 1.25s ease-in-out infinite;
}
@keyframes d2shimmer { from { background-position: 180% 0, 0 0; } to { background-position: -80% 0, 0 0; } }