/* =========================================================
   Franceclat — design tokens (Charte graphique V2.1)
   Source: Francéclat Design System (colors_and_type.css).
   Publique (brand sans) + DM Serif Display (editorial).
   Loaded by form, admin and map.
   ========================================================= */

/* ---- Brand fonts ---- */
/* Publique — self-hosted. Place the woff2 files in web/assets/fonts/publique/.
   Falls back to Calibri/Carlito/Arial until present. */
@font-face { font-family:"Publique"; src:url("../fonts/publique/POLICESTUDIOPublique-Light.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Publique"; src:url("../fonts/publique/POLICESTUDIOPublique-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Publique"; src:url("../fonts/publique/POLICESTUDIOPublique-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
/* DM Serif Display — from Google Fonts <link> in each page (editorial titles). */

:root {
  /* ---- Official palette (charte §3) ---- */
  --blanc: #ffffff;
  --noir: #000000;
  --bleu-fonce: #1a243a;
  --bleu-clair: #a9d6e8;
  --gris-clair: #f0ecea;

  /* Derived interactive ramps (tints/shades of the five) */
  --bleu-fonce-hover: #10172a;
  --bleu-fonce-soft:  #eaecf1;
  --bleu-fonce-line:  #c3c9d6;
  --bleu-clair-hover: #8fc6de;
  --bleu-clair-soft:  #e6f2f8;
  --bleu-clair-line:  #c9e2ef;

  /* Warm neutral ramp */
  --neutral-50:  #f7f5f3;
  --neutral-100: #f0ecea;
  --neutral-200: #e2ddda;
  --neutral-300: #ccc7c3;
  --neutral-400: #a5a19e;
  --neutral-500: #757474;
  --neutral-600: #565452;
  --neutral-700: #393736;
  --neutral-800: #211f1e;

  /* ---- Semantic ---- */
  --bg: var(--blanc);
  --fg1: var(--noir);
  --fg2: var(--neutral-600);
  --fg3: var(--neutral-500);
  --fg-muted: var(--neutral-400);
  --line: var(--neutral-200);
  --line-strong: var(--neutral-300);

  /* ---- Type ---- */
  --font-title: "Publique","Calibri","Carlito",Arial,sans-serif;
  --font-sans:  "Publique","Calibri","Carlito",Arial,sans-serif;
  --font-serif: "DM Serif Display",Georgia,"Times New Roman",serif;

  --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 18px;
  --text-lg: 22px; --text-xl: 28px; --text-2xl: 36px; --text-3xl: 46px; --text-4xl: 60px;
  --w-light: 300; --w-regular: 400; --w-bold: 700;
  --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.65;
  --track-eyebrow: 0.22em; --track-title: 0.06em;

  /* ---- Spacing / radii / shadow / motion ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 22px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(26,36,58,0.05);
  --shadow-md: 0 4px 16px rgba(26,36,58,0.08);
  --shadow-lg: 0 12px 40px rgba(26,36,58,0.14);
  --ease: cubic-bezier(0.22,0.61,0.36,1);
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --dur-fast: 140ms; --dur: 240ms; --dur-slow: 420ms;
  --header-h: 60px;
  --maxw: 1200px;

  /* =======================================================
     Back-compat aliases (used by earlier form/admin/map CSS).
     Navy == bleu foncé; navy-soft == bleu-fonce-soft.
     Coral/gold are NON-charte, kept only for admin functional
     states (danger / warning / featured) so nothing breaks.
     ======================================================= */
  --navy: var(--bleu-fonce);
  --navy-hover: var(--bleu-fonce-hover);
  --navy-soft: var(--bleu-fonce-soft);
  --coral: #d9483b; --coral-hover: #c23a2e; --coral-soft: #fbeae7;
  --gold: #b68a3e; --gold-soft: #f6efe0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* The [hidden] attribute must always win, even over elements given an explicit
   display (e.g. .login { display:grid }, .drawer { display:flex }). */
[hidden] { display: none !important; }

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

body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  color: var(--fg1);
  background: var(--bg);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; line-height: var(--lh-tight); }
a { color: var(--bleu-fonce); }