/* Aplomb (pilotage de chantier) — design tokens « Latérite & Forêt »
   Single source of truth for colours, type and spacing.
   Copied verbatim to static/css/tokens.css (CI checks the copy). ECharts theme reads the same values.

   The palette is the ground a site in Central Africa is built on: forest green for the primary,
   laterite for the accent, sand for the paper, night concrete for the text. Yellow stays what the
   workbook made it — the cell you type in, and the date d'arrêt — and is never a text colour.

   Each state has three tokens: the bare name is the TEXT colour (≥ 4.5:1 on sand and on white),
   `-fill` is the mark used in charts and solid pills (≥ 3:1), `-bg` is the tint behind the text. */

/* Fonts: self-hosted WOFF2, latin + latin-ext subsets (Fontsource 5.2.5, OFL 1.1). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-ext-400-normal.9159859e7aa8.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.f837d382a885.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-ext-500-normal.656e8d21838c.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.42b95430773b.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-ext-600-normal.8f9364515dfc.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.75fb76ec3559.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-ext-500-normal.7078d67ccc18.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-500-normal.885576a6f4c8.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-ext-600-normal.787c43593c20.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-600-normal.4f54d6c65e11.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  color-scheme: light;

  /* Forêt (primary) */
  --nuit: #1E2A2F;        /* headings, strong text, dark fills (nav band, pointage team band) */
  --foret-700: #1F5F4A;   /* primary buttons, links, active nav, "Réel" series */
  --foret-800: #174A3A;   /* primary hover and pressed */
  --foret-500: #297B60;   /* secondary actions, focus ring. As text, only on --surface / --sable */
  --foret-100: #DCEBE4;   /* selected rows, primary tint */
  --sur-foret: #FFFFFF;   /* text and icons on --foret-700 / --nuit fills */

  /* Latérite (accent: the banner motif, one chart series, illustration edges) */
  --laterite: #C2562B;
  --laterite-texte: #B65128;   /* same hue, dark enough to be read */
  --laterite-50: #FBEADF;

  /* Sable & béton (neutrals) */
  --sable: #F7F3EC;       /* page background */
  --surface: #FFFFFF;     /* cards, tables, forms */
  --sable-200: #EFE8DC;   /* table headers, zebra rows, non-working days */
  --bordure: #E6DED0;     /* hairlines and grid lines */
  --beton-500: #5B6468;   /* secondary text, "Prévu" series, input borders (--field-border) */
  --beton-700: #3C4549;   /* body text */
  --grid-line: rgba(31, 95, 74, 0.07);
  --motif: rgba(194, 86, 43, 0.10);        /* the Ndop lattice on the project banner */
  --voile: rgba(23, 74, 58, 0.62);         /* forest veil over a photograph */
  --ombre-texte: 0 1px 2px rgba(0, 0, 0, 0.35);   /* words written on a photograph */
  --scrim: rgba(30, 42, 47, 0.55);   /* backdrop behind the drawer and dialogs */

  /* Jaune chantier (input edge & date d'arrêt only, never text) */
  --jaune: #F2B33D;
  --jaune-50: #FDF2DC;

  /* States */
  --ok: #2A7E4F;      --ok-fill: #2E8B57;     --ok-bg: #F0F7F3;
  --watch: #916700;   --watch-fill: #B88300;  --watch-bg: #FCF4E1;
  --alert: #C8372D;   --alert-fill: #C8372D;  --alert-bg: #FCEFED;
  --info: #2F6FB0;    --info-fill: #2F6FB0;   --info-bg: #EAF2F9;

  /* Lots (categorical, in PARAMETRES order). Muted earth hues, so a red or green state still
     reads as a state beside them, and no lot is mistaken for the forest primary. */
  --lot-1: #2F6FB0; --lot-2: #8A6D3B; --lot-3: #4F7F6A; --lot-4: #7A5C8C;
  --lot-5: #A0573C; --lot-6: #4E7A91; --lot-7: #7D7A45; --lot-8: #8C5468;

  /* Typography */
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-ui: "Inter", "Segoe UI", system-ui, sans-serif;
  --fs-kpi: 2.5rem;    --lh-kpi: 2.75rem;
  --fs-h1: 1.75rem;    --lh-h1: 2.125rem;
  --fs-h2: 1.375rem;   --lh-h2: 1.75rem;
  --fs-h3: 1.125rem;   --lh-h3: 1.5rem;
  --fs-body: 1rem;     --lh-body: 1.5rem;
  --fs-small: 0.875rem;--lh-small: 1.25rem;
  --fs-micro: 0.75rem; --lh-micro: 1rem;

  /* Spacing (4 px base) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;

  /* Shape */
  --r-field: 8px;
  --r-card: 12px;
  --r-pill: 999px;
  --ombre-carte: 0 1px 2px rgba(30, 42, 47, 0.05);
  --ombre-flottante: 0 4px 12px rgba(30, 42, 47, 0.10);
  --hairline: 1px solid var(--bordure);
  --field-border: 1px solid var(--beton-500);   /* inputs need 3:1 against the surface (WCAG 1.4.11) */
  --input-edge: 3px solid var(--jaune);
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--foret-500);

  /* Layout. Breakpoints (media queries cannot read variables): 600px phone, 1024px nav becomes a drawer. */
  --nav-width: 240px;
  --content-max: 1440px;
  --touch-min: 48px;
  --control-height: 40px;   /* inputs, buttons, menu triggers, nav links, table rows (48px on touch: --touch-min) */
  --topbar-height: 56px;
  --actionbar-height: 72px;   /* --touch-min + 2 × --sp-3 */

  /* Stacking */
  --z-nav: 10; --z-topbar: 20; --z-drawer: 30; --z-dialog: 40; --z-toast: 50;

  /* Motion (switched off by prefers-reduced-motion below) */
  --duration: 150ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --nuit: #E8EDEA; --foret-700: #7DC0A2; --foret-800: #9BD1B8; --foret-500: #63AE8E;
    --foret-100: #15302A; --sur-foret: #11161A;
    --laterite: #E08A5E; --laterite-texte: #E8A077; --laterite-50: #3A2014;
    --sable: #15130F; --surface: #1E1B16; --sable-200: #2A261F; --bordure: #3E382E;
    --beton-500: #9AA09C; --beton-700: #C3C8C3;
    --grid-line: rgba(125, 192, 162, 0.07);
    --motif: rgba(224, 138, 94, 0.09);
    --voile: rgba(10, 32, 25, 0.72);
    --scrim: rgba(0, 0, 0, 0.62);
    --jaune-50: #3A2F12;
    --ok: #6FC996;      --ok-fill: #4FA877;     --ok-bg: #14301F;
    --watch: #E3B768;   --watch-fill: #C9960F;  --watch-bg: #3A2C10;
    --alert: #F09289;   --alert-fill: #D4493E;  --alert-bg: #3C1B18;
    --info: #8FBBE6;    --info-fill: #4E8CC8;   --info-bg: #16283A;
    --lot-1: #6BA3DB; --lot-2: #B99253; --lot-3: #6CA98E; --lot-4: #A07EB4;
    --lot-5: #C97A5C; --lot-6: #6FA0B8; --lot-7: #A3A05F; --lot-8: #B37A8C;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --nuit: #E8EDEA; --foret-700: #7DC0A2; --foret-800: #9BD1B8; --foret-500: #63AE8E;
  --foret-100: #15302A; --sur-foret: #11161A;
  --laterite: #E08A5E; --laterite-texte: #E8A077; --laterite-50: #3A2014;
  --sable: #15130F; --surface: #1E1B16; --sable-200: #2A261F; --bordure: #3E382E;
  --beton-500: #9AA09C; --beton-700: #C3C8C3;
  --grid-line: rgba(125, 192, 162, 0.07);
  --motif: rgba(224, 138, 94, 0.09);
  --voile: rgba(10, 32, 25, 0.72);
  --scrim: rgba(0, 0, 0, 0.62);
  --jaune-50: #3A2F12;
  --ok: #6FC996;      --ok-fill: #4FA877;     --ok-bg: #14301F;
  --watch: #E3B768;   --watch-fill: #C9960F;  --watch-bg: #3A2C10;
  --alert: #F09289;   --alert-fill: #D4493E;  --alert-bg: #3C1B18;
  --info: #8FBBE6;    --info-fill: #4E8CC8;   --info-bg: #16283A;
  --lot-1: #6BA3DB; --lot-2: #B99253; --lot-3: #6CA98E; --lot-4: #A07EB4;
  --lot-5: #C97A5C; --lot-6: #6FA0B8; --lot-7: #A3A05F; --lot-8: #B37A8C;
}

/* Base */
body {
  background: var(--sable);
  color: var(--beton-700);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-ui);
}
h1, h2, .kpi-figure, .cartouche-value { font-family: var(--font-display); color: var(--nuit); }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 600; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 500; }
h3 { font: 600 var(--fs-h3)/var(--lh-h3) var(--font-ui); color: var(--nuit); }
.num, td.num, .kpi-figure { font-variant-numeric: tabular-nums; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Input = the workbook's yellow cell */
.field {
  background: var(--surface);
  border: var(--field-border);
  border-left: var(--input-edge);
  border-radius: 0;
  min-height: var(--control-height);
  padding: var(--sp-2) var(--sp-3);
  font: inherit;
  color: var(--nuit);
}
.field:focus { background: var(--jaune-50); }

/* Status pills */
.pill { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-2);
        border-radius: var(--r-pill); font: 500 var(--fs-micro)/var(--lh-micro) var(--font-ui);
        white-space: nowrap; }
.pill--ok    { background: var(--ok-bg);    color: var(--ok); }
.pill--watch { background: var(--watch-bg); color: var(--watch); }
.pill--alert { background: var(--alert-bg); color: var(--alert); }
.pill--info  { background: var(--info-bg);  color: var(--info); }
.pill--muted { background: var(--sable-200); color: var(--beton-700); }

/* Date d'arrêt row / non-working day */
.is-as-of { background: var(--jaune-50); }
.is-off-day {
  background: repeating-linear-gradient(135deg, var(--sable-200) 0 4px, transparent 4px 8px);
  color: var(--beton-500);
}

/* Drawing grid for dashboard/report pages only */
.paper-grid {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
}

@media print {
  :root { --sable: #FFFFFF; }
  .paper-grid { background-image: none; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --duration: 0ms; }
  /* ::before and ::after are not matched by *, and markers and chevrons are drawn there. */
  *, *::before, *::after { animation: none !important; transition: none !important; }
}