/* ==========================================================================
   KABLANN — DESIGN SYSTEM · LES JETONS (étape 1 de la refonte)
   Mission de refonte UX/UI de Jean-David, 23 septembre 2026, § 1 à 3 et 37.
   Charte de référence : les images « Kablann — trois pistes plus ludiques ».

   RÈGLE : aucun composant n’écrit une couleur, un espacement, un rayon ou
   une ombre en dur. Tout passe par ces variables. Une couleur fonctionnelle
   dit TOUJOURS une information (validé, information, attention, retard,
   études) — jamais une décoration — et ne la dit jamais seule : un mot ou
   une icône l’accompagne.
   ========================================================================== */

@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(/polices/dm-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url(/polices/dm-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url(/polices/dm-sans-latin-700-normal.woff2) format('woff2')}

:root{
  /* --- Fonds et surfaces ------------------------------------------------ */
  --color-background:#F7F6F2;   /* fond de l’application, crème très léger */
  --color-surface:#FFFFFF;      /* cartes, panneaux */
  --color-surface-2:#FAFAF8;    /* surface calme : survol, zone secondaire */
  --color-surface-3:#F3EFE8;    /* pistes de progression, puces au repos */
  --color-border:#E6E8EC;       /* bord très léger des cartes */
  --color-divider:#F0F1F4;      /* filets intérieurs */

  /* --- Barre latérale : CLAIRE, comme sur les images « trois pistes »
     (Jean-David, 23 septembre au soir : « appuie-toi vraiment sur ça »).
     La mission disait « navigation sombre » ; les images font foi. ------- */
  --color-nav:#FFFFFF;
  --color-nav-2:#F1ECE3;        /* entrée active : pastille sable */
  --color-nav-text:#3D4454;     /* 9,8:1 sur la barre */
  --color-nav-muted:#5B6678;    /* 5,4:1 */
  --color-nav-strong:#111827;
  --color-nav-border:#EDEEF1;

  /* --- Textes ----------------------------------------------------------- */
  --color-text:#111827;         /* presque noir bleuté */
  --color-text-2:#475569;       /* texte secondaire, 7,6:1 sur blanc */
  --color-muted:#5B6678;        /* gris bleuté, métadonnées — 5,4:1 sur le fond */
  --color-disabled:#9A938A;
  --color-on-dark:#FFFFFF;

  /* --- Accent Kablann : or / sable ------------------------------------- */
  --color-accent:#C8A96A;       /* toujours avec du texte encre dessus */
  --color-accent-soft:#F4ECDC;
  --color-accent-strong:#7A5B1E;/* or lisible en texte, 6,4:1 sur blanc */

  /* --- Couleurs fonctionnelles : fond doux · texte · plein -------------- */
  --color-success-bg:#E5F2E9;  --color-success:#1E6B3A;  --color-success-solid:#2E8A4E;   /* terminé, validé, dans les temps */
  --color-info-bg:#E7EEF9;     --color-info:#1D4E89;     --color-info-solid:#2F6DC0;      /* information, planning, consultation */
  --color-warning-bg:#FCEFDC;  --color-warning:#8A4A06;  --color-warning-solid:#D9822B;   /* attention, à traiter */
  --color-danger-bg:#FBE5E2;   --color-danger:#9B2B21;   --color-danger-solid:#C8412F;    /* retard, blocage, urgent */
  --color-studies-bg:#EFE8FA;  --color-studies:#5A3A90;  --color-studies-solid:#7E57C2;   /* études, conception */

  /* --- Bouton principal ------------------------------------------------- */
  --color-primary:#141B2D;
  --color-primary-hover:#26314A;
  --color-focus:#2F6DC0;
  --color-backdrop:rgba(23,32,51,.38);

  /* --- Typographie (§ 2) ------------------------------------------------ */
  --font-sans:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --text-h1:32px;  --text-h1-mobile:26px;
  --text-h2:24px;
  --text-h3:18px;
  --text-body:15px;
  --text-small:14px;
  --text-meta:12.5px;
  --leading-tight:1.2;
  --leading:1.5;
  --weight-regular:400; --weight-medium:500; --weight-bold:700;

  /* --- Espacements : 4 / 8 / 12 / 16 / 24 / 32 / 48 (§ 3) -------------- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px;
  --gap-cards:16px;
  --pad-card:20px;

  /* --- Rayons ------------------------------------------------------------ */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px; --radius-pill:999px;

  /* --- Ombres : extrêmement subtiles ------------------------------------ */
  --shadow-card:0 1px 2px rgba(23,32,51,.04),0 2px 8px rgba(23,32,51,.03);
  --shadow-raised:0 6px 20px rgba(23,32,51,.08);
  --shadow-overlay:0 24px 60px rgba(23,32,51,.20);

  /* --- Tailles fixes ------------------------------------------------------ */
  --touch:44px;                 /* cible tactile minimale */
  --sidebar:212px;
  --sidebar-compact:76px;
  --topbar:68px;
  --bottom-nav:72px;
  --drawer:400px;

  /* --- Mouvement : 150–250 ms, jamais décoratif (§ 33) ------------------ */
  --motion-fast:150ms; --motion:200ms; --motion-slow:250ms;
  --ease:cubic-bezier(.2,.7,.3,1);

  /* --- Couches ------------------------------------------------------------ */
  --z-sticky:40; --z-nav:50; --z-overlay:80; --z-toast:90;
}

/* Points de rupture (§ 32), écrits une seule fois ici et répétés tels quels
   dans les @media — une variable CSS ne peut pas servir dans un @media :
     mobile     : max-width 760px
     tablette   : 761px – 1100px   (barre latérale compacte)
     bureau     : au-delà de 1100px */

@media (prefers-reduced-motion:reduce){
  :root{--motion-fast:0ms;--motion:0ms;--motion-slow:0ms}
}