/* La charte graphique de NZT-48 : le design system MarketFrame (https://claude.ai/artifact/7wtPkC1hu5jJTo6nGTiZgs, tokens.json
   synchronisé le 01/11/2026), et rien d'autre. C'est LE SEUL fichier qui contient des valeurs : couleurs, police, tailles de texte,
   graisses, interlettrages, rayons, ombres, durées et courbes. Toutes les autres feuilles n'emploient que var(--…) :
   tests/test_charte.py refuse toute valeur en dur ailleurs.

   1. Les jetons MarketFrame (--mf-…) reprennent les noms et les valeurs du design system, thème clair (NZT-48 n'a pas de thème sombre).
   2. Les rôles de NZT-48 pointent vers ces jetons. Quand le tableau de bord a besoin d'une nuance absente du design system
      (mention discrète, filet appuyé, orange pâle d'un graphique), elle est mélangée à partir des jetons, jamais inventée.
   Changer la charte, c'est changer la partie 1 ; ne jamais ajouter une couleur qui n'en dérive pas. */

@font-face {
  font-family: "Inter";
  src: url("/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---------- 1. Jetons MarketFrame (thème clair) ---------- */

  /* Couleur : aucun gris neutre, tous les neutres sont teintés encre ou bleu. Un seul orange. */
  --mf-background: #FFFFFF;
  --mf-foreground: #0E1022;
  --mf-card: #FFFFFF;
  --mf-card-foreground: #0E1022;
  --mf-muted: #F3F6FE;
  --mf-muted-foreground: #343952;
  --mf-accent: #EDF1FD;            /* fond de survol, PAS l'orange */
  --mf-accent-foreground: #0E1022;
  --mf-border: #E3E8FA;
  --mf-ring: #FF5C1C;
  --mf-primary: #FF5C1C;
  --mf-primary-foreground: #FFFFFF;
  --mf-primary-survol: #E8501A;
  --mf-destructive: #DD1313;
  --mf-destructive-foreground: #FAFAFA;
  --mf-succes: #126844;
  --mf-succes-fond: #E7F8F0;
  --mf-attention: #914C08;
  --mf-attention-fond: #FEF2D7;
  --mf-erreur: #BB1B1B;
  --mf-erreur-fond: #FDECEC;
  --mf-neon-orange: #FF5C1C;
  --mf-neon-bleu: #2F6BFF;         /* lumière seulement : lueurs, filets, jamais du texte */
  --mf-encre: #0E1022;
  --mf-lune: #F5F6FF;
  --mf-accent-texte: #FF5C1C;

  /* Typographie : une seule police, Inter. */
  --mf-police: "Inter", ui-sans-serif, system-ui, sans-serif;
  --mf-police-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --mf-graisse-texte: 400;
  --mf-graisse-moyenne: 500;      /* lien-nav */
  --mf-graisse-forte: 600;        /* corps-fort, libelle-bouton, surtitre */
  --mf-graisse-titre: 700;        /* titre-3 */
  --mf-graisse-titre-fort: 800;   /* titre-1, titre-2, chiffre-cle */
  --mf-interlettrage-titre: -0.02em;
  --mf-interlettrage-chiffre: -0.04em;
  --mf-interlettrage-surtitre: 0.14em;

  /* Rayons */
  --mf-radius: 12px;
  --mf-radius-md: 10px;
  --mf-radius-sm: 8px;
  --mf-radius-carte: 16px;
  --mf-radius-surface: 14px;
  --mf-radius-bouton: 8px;
  --mf-radius-champ: 8px;
  --mf-radius-cadre-photo: 18px;
  --mf-radius-pastille: 9999px;

  /* Ombres : teintées encre ou néon, jamais noires. */
  --mf-ombre-carte: 0 1px 2px hsla(234, 42%, 9%, 0.05), 0 14px 34px -18px hsla(234, 42%, 9%, 0.18);
  --mf-ombre-carte-survol: 0 24px 44px -24px hsla(17, 100%, 55%, 0.5), 0 24px 60px -28px hsla(223, 100%, 59%, 0.5);
  --mf-ombre-bouton-survol: 0 10px 28px -10px hsla(17, 100%, 55%, 0.65);
  --mf-ombre-filet: 0 0 10px hsla(17, 100%, 55%, 0.25), 0 0 18px hsla(223, 100%, 59%, 0.2);

  /* Mouvement : 200 ms pour un bouton ou un lien, 300 ms pour une carte, une seule courbe. */
  --mf-courbe: cubic-bezier(0.22, 1, 0.36, 1);
  --mf-duree-bouton: 200ms;
  --mf-duree-carte: 300ms;
  --mf-cible-tactile: 44px;

  /* ---------- 2. Les rôles de NZT-48 ---------- */

  /* Surfaces */
  --page: var(--mf-accent);
  --cadre: var(--mf-muted);
  --carte: var(--mf-card);
  --tuile: var(--mf-muted);
  --survol: var(--mf-accent);
  --voile-1: color-mix(in srgb, var(--mf-muted) 50%, var(--mf-background));
  --voile-2: var(--mf-accent);
  --voile-3: var(--mf-border);
  --voile-4: color-mix(in srgb, var(--mf-border) 85%, var(--mf-muted-foreground));

  /* Texte et filets */
  --encre: var(--mf-foreground);
  --encre-2: var(--mf-muted-foreground);
  --encre-3: color-mix(in srgb, var(--mf-muted-foreground) 78%, var(--mf-accent));  /* mentions, 5,8:1 sur blanc */
  --filet: var(--mf-border);
  --filet-fort: color-mix(in srgb, var(--mf-border) 91%, var(--mf-muted-foreground));
  --inverse: var(--mf-encre);               /* pilule active, bouton principal */
  --inverse-texte: var(--mf-primary-foreground);
  --sur-orange: var(--mf-primary-foreground);
  --sur-encre: var(--mf-lune);

  /* Accent et états */
  --orange: var(--mf-primary);
  --orange-survol: var(--mf-primary-survol);
  --orange-clair: color-mix(in srgb, var(--mf-primary) 85%, var(--mf-primary-foreground));
  --bleu: var(--mf-neon-bleu);
  --succes: var(--mf-succes);
  --succes-fond: var(--mf-succes-fond);
  --attention-texte: var(--mf-attention);
  --attention-fond: var(--mf-attention-fond);
  --erreur: var(--mf-erreur);
  --erreur-fond: var(--mf-erreur-fond);
  --bon: var(--succes);
  --alerte: var(--erreur);
  --attention: var(--attention-texte);

  /* Graphiques et agenda : orange, encre, orange pâle ; ils se distinguent par la clarté, pas seulement par la teinte. */
  --serie-1: var(--mf-primary);
  --serie-2: var(--mf-encre);
  --serie-3: color-mix(in srgb, var(--mf-primary) 45%, var(--mf-background));
  --personne-1: var(--mf-primary);
  --personne-2: var(--mf-neon-bleu);
  --personne-3: var(--mf-encre);
  --personne-4: var(--mf-succes);
  --hachure: color-mix(in srgb, var(--mf-encre) 10%, transparent);

  /* Voiles et reflets (sur l'orange de la tuile vedette, sur l'encre de la bulle, derrière une fenêtre) */
  --reflet-orange: color-mix(in srgb, var(--mf-primary-foreground) 28%, transparent);
  --voile-sur-orange: color-mix(in srgb, var(--mf-primary-foreground) 22%, transparent);
  --hachure-sur-orange: color-mix(in srgb, var(--mf-primary-foreground) 32%, transparent);
  --filet-sur-encre: color-mix(in srgb, var(--mf-lune) 18%, transparent);
  --contour-sur-encre: color-mix(in srgb, var(--mf-lune) 35%, transparent);
  --voile-fenetre: color-mix(in srgb, var(--mf-encre) 60%, transparent);   /* voile d'une fenêtre modale : encre à 60 % */

  /* Ombres */
  --ombre-carte: var(--mf-ombre-carte);
  --ombre-survol: var(--mf-ombre-carte-survol);
  --ombre-bouton-orange: var(--mf-ombre-bouton-survol);
  --ombre-pilule: 0 1px 2px color-mix(in srgb, var(--mf-encre) 5%, transparent), 0 6px 18px -10px color-mix(in srgb, var(--mf-encre) 16%, transparent);
  --ombre-bouton-encre: 0 10px 24px -12px color-mix(in srgb, var(--mf-encre) 60%, transparent);
  --ombre-bulle: 0 14px 34px -14px color-mix(in srgb, var(--mf-encre) 50%, transparent);
  --ombre-menu: 0 18px 40px -16px color-mix(in srgb, var(--mf-encre) 35%, transparent);
  --ombre-vedette: 0 18px 36px -20px color-mix(in srgb, var(--mf-primary-survol) 65%, transparent);
  --halo-focus: 0 0 0 3px color-mix(in srgb, var(--mf-ring) 15%, transparent);

  /* Typographie : Inter, et une échelle de tailles fermée */
  --texte: var(--mf-police);
  --chiffres: var(--mf-police);
  --code: var(--mf-police-code);
  --taille-minuscule: 9px;     /* jours d'un mini-calendrier */
  --taille-micro: 10px;        /* libellés de la barre mobile */
  --taille-mention: 11px;
  --taille-legende: 12px;
  --taille-detail: 13px;
  --taille-texte: 14px;        /* texte-petit */
  --taille-libelle: 15px;      /* libelle-bouton : plancher du blanc sur orange */
  --taille-corps: 16px;        /* corps */
  --taille-intertitre: 18px;
  --taille-titre-3: 24px;      /* titre-3, à partir de md */
  --taille-chiffre: 28px;
  --taille-titre-1-mobile: 30px;  /* titre-1 sur mobile */
  --taille-gros-chiffre: 34px;
  --graisse-texte: var(--mf-graisse-texte);
  --graisse-moyenne: var(--mf-graisse-moyenne);
  --graisse-forte: var(--mf-graisse-forte);
  --graisse-titre: var(--mf-graisse-titre);
  --graisse-titre-fort: var(--mf-graisse-titre-fort);
  --interlettrage-serre: -0.01em;
  --interlettrage-titre: var(--mf-interlettrage-titre);
  --interlettrage-chiffre: -0.03em;
  --interlettrage-capitales: 0.08em;
  --interlettrage-surtitre: var(--mf-interlettrage-surtitre);

  /* Rayons */
  --rayon: var(--mf-radius-carte);
  --rayon-tuile: var(--mf-radius-surface);
  --rayon-petit: var(--mf-radius-md);
  --rayon-bloc: var(--mf-radius);
  --rayon-champ: var(--mf-radius-champ);
  --rayon-pastille: var(--mf-radius-pastille);
  --rayon-cadre-photo: var(--mf-radius-cadre-photo);
  --rayon-panneau: 20px;       /* palette de recherche, volet */
  --rayon-cadre: 28px;         /* le grand cadre arrondi de l'écran */
  --rayon-trait: 3px;          /* jauges, carrés de légende */

  /* Mouvement */
  --doux: var(--mf-courbe);
  --ressort: var(--mf-courbe);
  --duree-courte: var(--mf-duree-bouton);
  --duree: var(--mf-duree-carte);
  --duree-lente: 450ms;        /* volet, pastille qui glisse */
  --duree-apparition: 600ms;   /* entrée d'un widget, une seule fois */
  --duree-remplissage: 900ms;  /* une jauge qui se remplit */
  --duree-rotation: 1s;        /* icône d'actualisation */
  --decalage-apparition: 40ms; /* entre deux widgets qui entrent */
  --duree-nulle: 0.01ms;       /* prefers-reduced-motion */

  --ecart: 14px;

  /* La carte néon du site : bordure en dégradé orange vers bleu, douce au repos, pleine au survol */
  --bordure-carte: linear-gradient(135deg, color-mix(in srgb, var(--mf-neon-orange) 55%, transparent), var(--mf-border) 34%, var(--mf-border) 66%, color-mix(in srgb, var(--mf-neon-bleu) 55%, transparent));
  --bordure-carte-active: linear-gradient(135deg, var(--mf-neon-orange), var(--mf-neon-bleu));
  /* Les lueurs diffuses d'une page claire du site (fond-neon-clair), adoucies sous le cadre */
  --lueurs-page:
    radial-gradient(760px 420px at 0% 480px, color-mix(in srgb, var(--mf-neon-orange) 10%, transparent), transparent 70%),
    radial-gradient(760px 420px at 100% 1150px, color-mix(in srgb, var(--mf-neon-bleu) 10%, transparent), transparent 70%);
  --rayon-bouton: var(--mf-radius-bouton);
  --taille-surtitre: 12px;     /* surtitre */
  --taille-titre-ecran: 40px;  /* grand titre d'un écran, entre titre-2 (36) et titre-1 (48) */
}