/* ============================================================
   OEMA — Design tokens
   Reprise du code couleur OPATAM : navy, jaune, blanc.
   ============================================================ */

@font-face{font-family:'Clash Display';src:url(../assets/fonts/ClashDisplay-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Clash Display';src:url(../assets/fonts/ClashDisplay-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Switzer';src:url(../assets/fonts/Switzer-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Switzer';src:url(../assets/fonts/Switzer-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Switzer';src:url(../assets/fonts/Switzer-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Switzer';src:url(../assets/fonts/Switzer-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;}

:root{
  /* — Marque OPATAM — */
  --navy:#233D85; --navy2:#24439E; --navy-deep:#1B2F6E; --navy-grad-top:#2A4AA5;
  --ink:#101B38; --yellow:#F4C928; --yellow-deep:#E5BB16; --blue:#668FE5; --paper:#FAF7F0;

  /* — Surfaces — */
  --bg:#F5F6FA; --card:#FFFFFF; --card-2:#F8F9FC; --line:#E6E9F2; --line-2:#EDF0F6;
  --muted:#5B6478; --muted2:#8A92A6; --faint:#B4BAC8;

  /* — Sémantique financière — */
  --green:#1F9D6B; --green-bg:#E7F6EF; --green-line:#CBE9DA;
  --red:#D64545;   --red-bg:#FBEAEA;   --red-line:#F2CFCF; --red-ink:#A33232;
  --amber:#9A7B00; --amber-bg:#FFF6D8; --amber-line:#F0DFA0;
  --info-bg:#EAF0FF; --info-line:#D5E0FA;

  /* — Fiabilité client (score OEMA) —
     Deux jeux : la teinte du texte, et l'aplat des pastilles. Ces derniers
     sont assombris pour que le chiffre en blanc reste lisible (≥ 4,5:1).
     Le palier « fiable » fait exception : il porte le jaune de la marque,
     avec un chiffre sombre — un jaune assez foncé pour du blanc virerait
     au brun et ne se lirait plus comme jaune. */
  --sc-top:#1F9D6B;  --sc-top-bg:#E7F6EF;  --sc-top-plein:#157A50;
  --sc-good:#B08A00; --sc-good-bg:#FFF6D8; --sc-good-plein:#F4C928;
  --sc-risk:#C4711C; --sc-risk-bg:#FDECD9; --sc-risk-plein:#B0600F;
  --sc-bad:#D64545;  --sc-bad-bg:#FBEAEA;  --sc-bad-plein:#C22F2F;

  /* — Rayons & rythme — */
  --r6:6px; --r9:9px; --r12:12px; --r18:18px; --r24:24px; --pill:999px;
  --sh-1:0 1px 2px rgba(16,27,56,.05);
  --sh-2:0 4px 16px rgba(16,27,56,.08);
  --sh-3:0 12px 40px rgba(16,27,56,.16);

  /* — Zones sûres iOS — */
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);
  --tabbar-h:calc(60px + var(--sab));
}

:root[data-theme="dark"]{
  --navy:#4A6BC4; --navy2:#5C7CD4; --navy-deep:#16223F; --navy-grad-top:#26386B;
  --ink:#EEF1F8; --paper:#1A2033;

  --bg:#0E1524; --card:#161E30; --card-2:#1C2537; --line:#28324A; --line-2:#222B41;
  --muted:#9AA5BE; --muted2:#7B87A3; --faint:#5D6884;

  --green:#3FBE8B; --green-bg:#12301F; --green-line:#1E4633;
  --red:#F0716F;   --red-bg:#331A1D;   --red-line:#4E2A2C; --red-ink:#F4A0A0;
  --amber:#E2C25A; --amber-bg:#2E2812; --amber-line:#463D1D;
  --info-bg:#1B2748; --info-line:#2A3A63;

  --sc-top:#3FBE8B;  --sc-top-bg:#12301F;  --sc-top-plein:#1B8A5C;
  --sc-good:#E2C25A; --sc-good-bg:#2E2812; --sc-good-plein:#F4C928;
  --sc-risk:#E39352; --sc-risk-bg:#33230F; --sc-risk-plein:#B96A16;
  --sc-bad:#F0716F;  --sc-bad-bg:#331A1D;  --sc-bad-plein:#CE3A38;

  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 4px 16px rgba(0,0,0,.45);
  --sh-3:0 12px 40px rgba(0,0,0,.6);
}