/* ============================================================
   ERIPM DESIGN SYSTEM — colors_and_type.css
   Source of truth: Pack Design Eripm / Modele_word.docx
   PowerPoint master + theme: Pack Design Eripm / Modele_powerpoint.pptx
   ============================================================ */

/* --- Web font fallbacks (Google Fonts substitutes) -----------
   Originals from the brand kit are commercial Microsoft fonts:
     • Bookman Old Style  (display / titles / logo wordmark)
     • Franklin Gothic Book (body / running text)
   For the web we substitute:
     • "Bitter"        — slab-serif, similar warmth & x-height to Bookman
     • "Libre Franklin" — same Franklin lineage, open license
   Prefer the original Microsoft fonts when present locally.
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Libre+Franklin:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ---------- BRAND COLORS (Word doc table is authoritative) ---------- */

  /* Neutrals */
  --eripm-dark1:   #544F4B; /* Texte / arrière-plan sombre 1 — warm dark gray, primary text */
  --eripm-light1:  #FFFFFF; /* Texte / arrière-plan clair 1 — page background */
  --eripm-dark2:   #000000; /* Texte / arrière-plan sombre 2 — strong text, wordmark */
  --eripm-light2:  #EAEAEA; /* Texte / arrière-plan clair 2 — quiet surface, dividers */

  /* Accents — usage exactly as defined in the brand doc */
  --eripm-accent1: #E24512; /* Titres / logo / primary CTA — "eripm orange" */
  --eripm-accent2: #A7320D; /* Sous-titres / hover / visited link — deep red-orange */
  --eripm-accent3: #E5C243; /* Graphiques — yellow */
  --eripm-accent4: #6B9F25; /* Graphiques — green */
  --eripm-accent5: #2D4CA5; /* Graphiques — blue */
  --eripm-accent6: #A638B2; /* Graphiques — purple */

  --eripm-link:         var(--eripm-accent1);
  --eripm-link-visited: var(--eripm-accent2);

  /* ---------- SEMANTIC TOKENS ---------- */
  --fg-1: var(--eripm-dark1);   /* default body text (warm gray) */
  --fg-2: #7A7470;              /* secondary text (lighter warm gray) */
  --fg-3: #A8A29D;              /* muted / captions */
  --fg-strong: var(--eripm-dark2); /* strongest text (titles, wordmark feel) */
  --fg-on-accent: var(--eripm-light1);

  --bg-1: var(--eripm-light1);  /* page bg */
  --bg-2: var(--eripm-light2);  /* alt surface */
  --bg-3: #F5F4F2;              /* subtle warm tint */
  --bg-inverse: var(--eripm-dark1);

  --border-1: #DDDAD7;          /* default hairline (slightly warm) */
  --border-2: var(--eripm-light2);
  --border-strong: var(--eripm-dark1);

  --accent: var(--eripm-accent1);
  --accent-hover: var(--eripm-accent2);
  --accent-soft: #FCE7DD;       /* tinted accent surface */

  --chart-1: var(--eripm-accent1);
  --chart-2: var(--eripm-accent3);
  --chart-3: var(--eripm-accent4);
  --chart-4: var(--eripm-accent5);
  --chart-5: var(--eripm-accent6);
  --chart-6: var(--eripm-accent2);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: "Bookman Old Style", "Bitter", Georgia, "Times New Roman", serif;
  --font-body:    "Franklin Gothic Book", "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;

  /* Type scale — calibrated against Modele_word.docx headings + the company deck */
  --t-display:      72px / 1.05 var(--font-display);  /* hero / cover title */
  --t-h1:           48px / 1.1  var(--font-display);  /* slide title, page H1 */
  --t-h2:           34px / 1.15 var(--font-display);  /* section title */
  --t-h3:           24px / 1.25 var(--font-display);  /* sub-section */
  --t-h4:           18px / 1.3  var(--font-body);     /* block heading */
  --t-eyebrow:      12px / 1.2  var(--font-body);     /* uppercase label */
  --t-lead:         20px / 1.55 var(--font-body);     /* lead / intro paragraph */
  --t-body:         16px / 1.6  var(--font-body);     /* default body */
  --t-small:        14px / 1.55 var(--font-body);     /* caption / table cell */
  --t-micro:        12px / 1.4  var(--font-body);     /* footer, micro label */

  /* Weights */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold: 600;
  --w-bold:    700;

  /* Tracking */
  --track-tight:   -0.01em;
  --track-normal:   0em;
  --track-wide:     0.08em;   /* eyebrow / nav labels */
  --track-wider:    0.14em;   /* section dividers */

  /* ---------- SPACING ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- RADII ---------- */
  /* Eripm is industrial; radii stay tight. The orange logo mark is the only soft shape. */
  --radius-0:  0px;
  --radius-1:  2px;
  --radius-2:  4px;   /* default button / input */
  --radius-3:  8px;   /* card */
  --radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  /* Subtle, technical — never floaty drop-shadows. */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(84, 79, 75, 0.06);
  --shadow-2: 0 1px 2px rgba(84, 79, 75, 0.08), 0 1px 1px rgba(0,0,0,0.04);
  --shadow-3: 0 4px 12px rgba(84, 79, 75, 0.10), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-focus: 0 0 0 3px rgba(226, 69, 18, 0.25);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 0.84, 0.44, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
}

/* ============================================================
   ELEMENT DEFAULTS — drop-in baseline so any HTML reads as eripm.
   ============================================================ */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { color: var(--fg-strong); margin: 0 0 var(--space-4); }
h1 { font: var(--t-h1); letter-spacing: var(--track-tight); }
h2 { font: var(--t-h2); }
h3 { font: var(--t-h3); }
h4 { font: var(--t-h4); font-weight: var(--w-semibold); text-transform: none; }

p { margin: 0 0 var(--space-4); max-width: 68ch; }
small { font: var(--t-small); color: var(--fg-2); }

a {
  color: var(--eripm-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--dur-1) var(--ease-standard);
}
/* Buttons keep their own colours (excluded from link hover). */
a:not(.btn):not(.nav-cta):hover { color: var(--eripm-link-visited); }
/* No :visited colour rule on purpose — visited links keep their normal colour
   (base link colour or their component colour), so nothing shifts after a visit. */

hr {
  border: 0;
  border-top: 1px solid var(--border-1);
  margin: var(--space-6) 0;
}

::selection { background: var(--accent); color: var(--fg-on-accent); }

/* ============================================================
   UTILITY CLASSES — small, focused.
   ============================================================ */
.eyebrow {
  font: var(--t-eyebrow);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  color: var(--accent);
}
.lead { font: var(--t-lead); color: var(--fg-1); max-width: 60ch; }
.display { font: var(--t-display); color: var(--fg-strong); letter-spacing: var(--track-tight); }
.code, code {
  font-family: var(--font-mono);
  font-size: 0.95em;
  background: var(--bg-2);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-1);
}

/* Accent rule — the orange under-bar that appears across the brand */
.eripm-rule {
  display: block;
  width: 56px;
  height: 3px;
  background: var(--accent);
  border: 0;
}