/* ============================================================
   Lisière — Design Tokens (SOURCE UNIQUE DE VÉRITÉ)
   Variables CSS pures, sans dépendance. Consommé tel quel par :
   - l'UI kit (preview/, ui_kits/) rendu par WeasyPrint
   - le pane Claude Design (via DesignSync)
   - le site Hugo + Tailwind v4 (pont @theme inline, cf. repo site)
   Ne mettre ICI que des tokens (couleurs, typo, espacement, rayons,
   ombres, duotone). Les helpers/classes restent dans
   colors_and_type.css, qui @importe ce fichier.
   ============================================================ */

/* ---------- WEBFONTS ----------
   - Atkinson Hyperlegible : corps + nom « Colin Lemaitre » (pas de
     wordmark dessiné). Choisie pour sa lisibilité.
   - IBM Plex Mono : chiffres, légendes, données uniquement.
*/
/* == POLICES AUTO-HEBERGEES : debut du bloc genere == */
/* NE PAS EDITER A LA MAIN : ce bloc est reecrit par
   tools/telecharger_polices.py. Les chemins sont RELATIFS a ce fichier,
   pour valoir a la fois pour le site (CSS servi sous /css/), pour
   WeasyPrint (CSS lu sur le disque) et pour les UI kits.
   `font-display: swap` : le texte s'affiche tout de suite dans la police
   de repli, et bascule a l'arrivee de la webfont. Jamais de texte
   invisible en attente d'un fichier. */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/atkinson-hyperlegible-400-italique-latin-ext.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: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/atkinson-hyperlegible-400-italique-latin.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: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/atkinson-hyperlegible-700-italique-latin-ext.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: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/atkinson-hyperlegible-700-italique-latin.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: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/atkinson-hyperlegible-400-latin-ext.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: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/atkinson-hyperlegible-400-latin.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: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/atkinson-hyperlegible-700-latin-ext.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: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/atkinson-hyperlegible-700-latin.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400-latin-ext.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400-latin.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500-latin-ext.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500-latin.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-600-latin-ext.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-600-latin.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;
}
/* == POLICES AUTO-HEBERGEES : fin du bloc genere == */

:root {
  /* ===================== COLOR PRIMITIVES ===================== */

  /* Ocre-terre — pôle LA CONDUITE (l'engagement : diriger, animer,
     l'équipe, l'activité, les résultats). Brand accent par défaut. Seed 500 = #c2702f. */
  --ocre-50:  #faf1e8;
  --ocre-100: #f3dcc6;
  --ocre-200: #e8bd97;
  --ocre-300: #db9d68;
  --ocre-400: #cf8345;
  --ocre-500: #c2702f;   /* ★ accent principal */
  --ocre-600: #a85c24;
  --ocre-700: #88481c;
  --ocre-800: #663616;
  --ocre-900: #43240f;

  /* Teal-ardoise — pôle LE CONSEIL (le discernement : conseiller,
     transmettre, former, prendre du recul ; analyse, gouvernance, projet).
     Accent alternatif. Seed brand = #2c5159 (600). */
  --teal-50:  #e8f1f2;
  --teal-100: #c8dee0;
  --teal-200: #a0c4c8;
  --teal-300: #72a3a9;
  --teal-400: #4d848b;
  --teal-500: #386a71;
  --teal-600: #2c5159;   /* ★ accent alternatif */
  --teal-700: #234249;
  --teal-800: #1a3236;
  --teal-900: #112225;

  /* Papier — blancs cassés chauds (chaleur, fond par défaut) */
  --papier-50:  #fbf9f4;
  --papier-100: #f7f4ee;   /* fond de page */
  --papier-200: #ece6da;
  --papier-300: #ddd5c5;

  /* Encre — presque-noirs chauds (légèrement chauds, jamais bleutés) */
  --encre-900: #1e1b18;   /* texte par défaut */
  --encre-800: #2c2824;
  --encre-700: #3d3833;

  /* Gris chaud — neutres */
  --gris-200: #e2ddd3;
  --gris-300: #c5bfb4;
  --gris-400: #a8a194;
  --gris-500: #8c8478;   /* texte secondaire — GRAND texte seulement, cf. règles */
  --gris-600: #726a5c;   /* texte secondaire lisible en PETIT corps (ajout 18/09/2026) */

  /* ===================== DATAVIZ RAMP =====================
     Esprit risograph chaud-froid (Rens Dimmendaal). Séries
     qualitatives, ordre stable. Toujours sur fond papier. */
  --viz-1: #c2702f;   /* ocre-terre */
  --viz-2: #3c7a6e;   /* vert-teal */
  --viz-3: #5a6b8c;   /* bleu-ardoise */
  --viz-4: #c9a24b;   /* jaune-or */
  --viz-5: #8a5a7a;   /* prune */
  --viz-6: #6f8f4e;   /* olive */

  /* ===================== SEMANTIC TOKENS ===================== */
  --bg-page:    var(--papier-100);
  --bg-surface: var(--papier-50);
  --bg-sunken:  var(--papier-200);

  --fg-strong:  var(--encre-900);
  --fg-default: var(--encre-800);
  --fg-muted:   var(--gris-500);   /* secondaire, grand corps */
  --fg-muted-small: var(--gris-600);   /* secondaire, petit corps (AA) */
  --fg-on-dark: var(--papier-50);

  /* RÈGLES DE CONTRASTE — audit WCAG du 30/06/2026, fond papier #f7f4ee.
     À respecter sur TOUTE surface (UI kit, site, social, dataviz) :
     - ocre-500 (3,38:1) : gros titres ≥24px et aplats décoratifs UNIQUEMENT,
       jamais en petit texte ni en fond de texte blanc.
     - petit texte / lien ocre        → --accent-ink  (ocre-700, 6,40:1 AA)
     - aplat ocre à texte blanc/papier → --accent-fill (ocre-600, 4,97:1 AA)
     - teal-600 (7,88:1 AAA) : libre en toute taille.
     - gris-500 (3,36:1) : décor, et texte secondaire ≥24px (ou ≥18,66px gras)
       UNIQUEMENT. ⚠️ La règle disait « ≥18px » jusqu'au 18/09/2026 : c'était
       trop permissif, le seuil de 3:1 ne valant qu'à partir de 24px normal.
     - petit texte secondaire → --fg-muted-small (gris-600, 4,87:1 AA sur le
       fond de page, 4,65:1 au pire sur une carte teal-50).
     - ⚠️ gris-600 vaut sur les fonds CLAIRS. Sur l'aplat encre-900 du pied de
       page il tombe à 3,21:1 : là, c'est gris-400 qui est juste (6,69:1). Un
       remplacement global de l'un par l'autre casse donc l'autre bout. */
  --accent:      var(--ocre-500);   /* La Conduite (défaut) — décor & gros titres */
  --accent-ink:  var(--ocre-700);   /* ocre lisible sur papier (petit texte, liens) */
  --accent-fill: var(--ocre-600);   /* aplat ocre portant du texte blanc/papier */
  --accent-alt:  var(--teal-600);   /* Le Conseil */
  --accent-alt-ink: var(--teal-700);

  --line:    var(--gris-200);
  --line-strong: var(--gris-300);

  /* ===================== TYPOGRAPHY ===================== */
  --font-body:    "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
  --font-display: "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Échelle modulaire ~1.25 */
  --text-xs:      0.75rem;   /* 12 */
  --text-sm:      0.875rem;  /* 14 */
  --text-base:    1rem;      /* 16 */
  --text-md:      1.125rem;  /* 18 */
  --text-lg:      1.375rem;  /* 22 */
  --text-xl:      1.75rem;   /* 28 */
  --text-2xl:     2.25rem;   /* 36 */
  --text-3xl:     2.875rem;  /* 46 */
  --text-display: 3.625rem;  /* 58 */

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-body:  1.6;

  /* ===================== SPACING (base 4px) ===================== */
  --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;

  /* ===================== RADII ===================== */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ===================== ELEVATION (ombres chaudes) ===================== */
  --shadow-sm: 0 1px 2px rgba(30,27,24,0.06);
  --shadow-md: 0 4px 16px rgba(30,27,24,0.10);
  --shadow-lg: 0 12px 32px rgba(30,27,24,0.14);

  /* ===================== MOTION ===================== */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur:  180ms;
}