/* ═══════════════════════════════════════════════════════════════════════════
   MEDEX — jetons de la charte graphique commune
   Version 1.0 — 10/09/2026

   Un seul fichier pour les trois produits : site medex-mbi.fr, portail de
   depot des tarifs (tarifs.medex-mbi.fr), plateforme d'achat
   (factures.medex-mbi.fr). On le copie tel quel, on ne le modifie pas dans un
   seul produit — sinon la charte redevient trois chartes en six mois.

   TOUTES les valeurs de couleur portees par du texte ont ete MESUREES en
   contraste (WCAG 2.1). Le minimum retenu est 4,5:1 pour du texte courant et
   3:1 pour une bordure porteuse de sens. Les ratios sont notes en commentaire
   a cote de chaque valeur : ils ne sont pas decoratifs, ils sont la preuve.

   Ce qui a decide le bleu : #3D6FFF (site) donne 4,27:1 sur blanc et echoue
   donc le seuil AA, y compris pour le blanc d'un libelle de bouton ; #2f6bff
   (plateforme) donne exactement 4,50 — aucune marge, et 4,16 sur son propre
   fond gris. #2563EA, tire du fichier officiel du logo, donne 5,18 sur blanc
   et 4,80 sur le fond gris de la plateforme. La teinte est indiscernable a
   l'oeil ; la lisibilite, non.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* --- Surfaces, du fond vers l'avant ---------------------------------- */
  --ground:      #F7F8FA;   /* fond de page */
  --surface:     #FFFFFF;   /* carte, panneau */
  --surface-2:   #FBFCFD;   /* champ de saisie, zone en retrait */

  /* --- Texte ------------------------------------------------------------ */
  --ink:         #1A1A28;   /* 17,18 sur surface · 16,17 sur ground */
  --ink-2:       #374151;   /* 10,31 · 9,70  — texte secondaire */
  --muted:       #6B7280;   /*  4,83 · 4,55  — plancher AA, ne pas eclaircir */

  /* --- Traits ----------------------------------------------------------- */
  --line:        #EDEEF2;   /* separation discrete, jamais porteuse de sens */
  --line-2:      #D7DAE2;   /* bordure de champ, de bouton secondaire */

  /* --- Marque ----------------------------------------------------------- */
  --accent:      #2563EA;   /*  5,18 sur surface · 4,88 sur ground */
  --accent-ink:  #FFFFFF;   /*  5,18 sur --accent */
  --accent-soft: #E8EEFD;   /* fond de pastille, de bandeau d'information */
  --accent-line: #A9C0F7;   /* bordure d'un bloc accentue */

  /* --- Semantique ------------------------------------------------------- */
  --danger:      #A32620;   /*  7,35 sur surface */
  --danger-soft: #FBE6E4;
  --warn:        #9A5B00;   /*  5,43 sur surface */
  --warn-soft:   #FDF0DC;

  /* --- Formes ----------------------------------------------------------- */
  --r-controle:  10px;      /* champ, bouton, pastille */
  --r-carte:     14px;      /* carte, panneau, modale */
  --shadow: 0 1px 2px rgba(12, 26, 62, .06),
            0 8px 24px -12px rgba(12, 26, 62, .18);

  /* --- Navy de marque, pour les grandes surfaces sombres ---------------- */
  --navy:        #0C1A3E;   /* bandeau de haut de page du site, pied de page */
}

/* ═══════════════════════════════════════════════════════════════════════════
   Theme sombre.

   Trois etats, pas deux : « systeme », « clair », « sombre ». Sans
   « systeme », qui a choisi une fois ne peut plus revenir au reglage de son
   ordinateur. Le bloc est donc ecrit DEUX fois — une pour la preference du
   systeme, une pour le choix explicite — et les deux doivent rester
   identiques. Un test le verifie sur le portail tarifs.

   Fait mesure a ne pas oublier : entre deux navies, le contraste se comprime.
   #232E4B sur #141E36 donne 1,2 quelle que soit la nuance choisie — la
   separation d'une carte ne peut donc PAS venir de son fond, elle vient de sa
   bordure. C'est pourquoi --line et --line-2 sont franchement plus clairs ici
   qu'en theme clair.
   ═════════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --ground:      #141E36;
    --surface:     #232E4B;
    --surface-2:   #1A2440;
    --ink:         #EEF2FB;   /* 11,98 sur surface · 14,76 sur ground */
    --ink-2:       #C2CADD;   /*  8,18 · 10,08 */
    --muted:       #9BA6C2;   /*  5,52 ·  6,80 */
    --line:        #374F91;   /*  2,12 du fond — separation discrete */
    --line-2:      #5A77CE;   /*  3,91 du fond, 3,17 d'une carte */
    --accent:      #7EA0FF;   /*  5,35 sur surface · 6,59 sur ground */
    --accent-ink:  #0B1226;   /*  7,41 sur --accent */
    --accent-soft: #233156;
    --accent-line: #3D5AA8;
    --danger:      #F09A92;   /*  6,23 sur surface */
    --danger-soft: #3E1A20;
    --warn:        #E7B45F;   /*  7,09 sur surface */
    --warn-soft:   #3A2E18;
    --shadow: 0 1px 2px rgba(0, 0, 0, .45),
              0 8px 24px -12px rgba(0, 0, 0, .75);
  }
}

:root[data-theme="sombre"] {
  --ground:      #141E36;
  --surface:     #232E4B;
  --surface-2:   #1A2440;
  --ink:         #EEF2FB;
  --ink-2:       #C2CADD;
  --muted:       #9BA6C2;
  --line:        #374F91;
  --line-2:      #5A77CE;
  --accent:      #7EA0FF;
  --accent-ink:  #0B1226;
  --accent-soft: #233156;
  --accent-line: #3D5AA8;
  --danger:      #F09A92;
  --danger-soft: #3E1A20;
  --warn:        #E7B45F;
  --warn-soft:   #3A2E18;
  --shadow: 0 1px 2px rgba(0, 0, 0, .45),
            0 8px 24px -12px rgba(0, 0, 0, .75);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Polices — servies par le produit, JAMAIS par un tiers.

   Charger Inter chez Google transmet l'adresse IP de chaque visiteur aux
   Etats-Unis. C'est un transfert de donnees personnelles hors Union
   europeenne, c'est la pratique sanctionnee en Allemagne et pointee par la
   CNIL, et cela contredit toute politique de confidentialite affirmant
   « Transferts hors UE : aucun ».

   Les fichiers .woff2 sont a deposer dans le dossier statique du produit ;
   ajuster le chemin ci-dessous si necessaire.

   Inter porte le texte. IBM Plex Mono porte les CHIFFRES — prix, montants,
   dates, identifiants : Inter n'a pas de chasse fixe, et des colonnes de prix
   qui ne s'alignent pas se comparent mal.
   ═════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/polices/inter-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/polices/inter-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/polices/inter-latin-600-normal.woff2) format('woff2');
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/polices/inter-latin-700-normal.woff2) format('woff2');
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/polices/plex-mono-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/polices/plex-mono-latin-600-normal.woff2) format('woff2');
}

/* --- Deux familles, deux usages ----------------------------------------- */
:root {
  --police-texte:   Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
                    Roboto, sans-serif;
  --police-chiffre: "IBM Plex Mono", ui-monospace, monospace;
}

/* Classe utilitaire : tout ce qui est un nombre destine a etre compare.
   `tnum` force les chiffres a largeur egale, meme dans Inter. */
.chiffre {
  font-family: var(--police-chiffre);
  font-variant-numeric: tabular-nums;
}