/* La marque de CDEDQ : couleurs, typographie, espacements, arrondis, ombres, polices.

   LA MÊME COPIE DANS CHAQUE DOSSIER SERVI : portail, identite, bureau, terrain,
   ville, rapports. Chacun sert ses fichiers par sa propre porte, et chaque lanceur
   du poste ne monte que son dossier : une page ne doit pas dépendre d'une route
   qu'un autre module aurait à monter. portail/test_marque.py vérifie que les
   copies restent identiques, et donne la commande pour les recopier.

   LA BASE EST LE DESIGN SYSTEM DE X-TELIA, entreprise affiliée : mêmes couleurs,
   même typographie, mêmes principes. Le logo, lui, reste celui de CDEDQ. Ce qui
   s'en écarte le dit ici, avec sa raison, et chaque dossier traduit ces jetons en
   ses propres noms (variables.css) : un résident sur un vieux téléphone et le
   tableau du bureau ne se lisent pas à la même distance.

   AUCUNE REQUÊTE VERS UN TIERS. Les polices sont servies avec la plateforme, à
   côté de ce fichier : l'adresse d'un résident ne part pas chez un serveur de
   polices (Loi 25), et un téléphone en données mobiles ne paie que le nécessaire.
   Une police qui change change de nom de fichier : le terrain et le portail les
   gardent en cache. */
:root {
  /* Le bleu de TELIA. 500 est la couleur de la marque, mais il ne donne que
     4,67:1 sur blanc et 4,47:1 sur le gris de page : un texte ou un bouton prend
     600 (7,2:1) ou plus foncé. C'est l'écart le plus visible avec le design
     system, qui met 500 sur ses boutons. */
  --marque-bleu-50: #EEF3FB;
  --marque-bleu-100: #DDE7F6;
  --marque-bleu-200: #B8CBEC;
  --marque-bleu-300: #8DACDF;
  --marque-bleu-500: #4472C9;
  --marque-bleu-600: #345696;
  --marque-bleu-700: #2A4377;
  --marque-bleu-800: #1F3258;
  --marque-bleu-900: #14213A;

  /* Le taupe du « X- » : il réchauffe le bleu. Traits, texte secondaire, fond. */
  --marque-taupe-50: #F6F4F4;
  --marque-taupe-100: #EAE6E6;
  --marque-taupe-200: #D2CBCB;
  --marque-taupe-500: #73696A;
  --marque-taupe-600: #5C5354;
  --marque-taupe-700: #463F40;

  --marque-gris-0: #FFFFFF;
  --marque-gris-50: #FAFAFA;
  --marque-gris-100: #F5F5F5;
  --marque-gris-200: #E5E5E5;
  --marque-gris-300: #D4D4D4;
  --marque-gris-500: #737373;
  --marque-gris-600: #525252;
  --marque-gris-700: #404040;
  --marque-gris-900: #171717;

  /* Les états. Le ton vif marque une pastille ou un point, jamais un texte : sur
     blanc, il reste sous 4,5:1. Un texte d'état prend son encre, sur son fond. */
  --marque-succes: #10B981;
  --marque-succes-fond: #ECFDF5;
  --marque-succes-trait: #A7F3D0;
  --marque-succes-encre: #065F46;
  --marque-attention: #F59E0B;
  --marque-attention-fond: #FFFBEB;
  --marque-attention-trait: #FDE68A;
  --marque-attention-encre: #92400E;
  --marque-erreur: #EF4444;
  --marque-erreur-fond: #FEF2F2;
  --marque-erreur-trait: #FCA5A5;
  --marque-erreur-encre: #991B1B;

  /* Inter pour tout ce qui se lit, JetBrains Mono pour ce qui se recopie à la
     main (un code, un numéro de série), comme le design system. Le repli garde la
     page lisible avant l'arrivée des polices, et « Inter repli » (plus bas) a les
     mesures d'Inter : le texte ne saute pas quand elle arrive. */
  --marque-police: "Inter", "Inter repli", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --marque-police-code: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas,
    monospace;
  --marque-graisse: 400;
  --marque-graisse-forte: 600;

  /* L'échelle du design system, en rem : elle suit la taille de texte choisie
     dans le navigateur, ce qu'un px ne fait pas. */
  --marque-texte-xs: 0.75rem;
  --marque-texte-sm: 0.875rem;
  --marque-texte-base: 1rem;
  --marque-texte-md: 1.125rem;
  --marque-texte-lg: 1.25rem;
  --marque-texte-xl: 1.5rem;
  --marque-texte-2xl: 1.875rem;
  --marque-texte-3xl: 2.25rem;
  --marque-interligne-serre: 1.15;
  --marque-interligne-titre: 1.3;
  --marque-interligne: 1.5;
  --marque-approche-titre: -0.01em;
  --marque-approche-surtitre: 0.14em;

  /* Une grille de 4 px, 8 px entre les blocs. */
  --marque-espace-1: 4px;
  --marque-espace-2: 8px;
  --marque-espace-3: 12px;
  --marque-espace-4: 16px;
  --marque-espace-5: 20px;
  --marque-espace-6: 24px;
  --marque-espace-8: 32px;
  --marque-espace-12: 48px;

  --marque-arrondi-sm: 4px;
  --marque-arrondi: 6px;
  --marque-arrondi-carte: 10px;
  --marque-arrondi-grand: 16px;
  --marque-arrondi-pilule: 999px;

  --marque-ombre-xs: 0 1px 2px rgba(23, 23, 23, 0.04);
  --marque-ombre-sm: 0 1px 2px rgba(23, 23, 23, 0.05), 0 1px 3px rgba(23, 23, 23, 0.06);
  --marque-ombre-md: 0 4px 8px -2px rgba(23, 23, 23, 0.06), 0 2px 4px -2px rgba(23, 23, 23, 0.04);
  --marque-ombre-lg: 0 12px 24px -8px rgba(23, 23, 23, 0.10), 0 4px 8px -4px rgba(23, 23, 23, 0.06);

  /* Le focus du clavier : un contour plein de 3 px en bleu 600, et non le halo
     translucide du design system, qui ne donne que 1,6:1 contre un fond blanc.
     Un contour (outline) survit aussi au mode de contraste élevé de Windows,
     qu'une ombre ne passe pas. */
  --marque-focus: 3px solid var(--marque-bleu-600);
  --marque-focus-decalage: 2px;

  --marque-duree: 200ms;
  --marque-courbe: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Deux graisses d'Inter, pas quatre. Chaque fichier couvre une plage : un 500 est
   servi par le 400, un 700 par le 600, sans graisse inventée par le navigateur. Le
   sous-ensemble tient le français et l'anglais, accents, guillemets, espaces fines
   et points de suspension compris ; un caractère hors de la plage passe à la
   police suivante de la pile, sans rien télécharger. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("inter-400.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+0178, U+2009, U+2011,
    U+2018-2019, U+201C-201D, U+2022, U+2026, U+202F, U+2190-2193, U+2212, U+25B6, U+25C0;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("inter-600.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+0178, U+2009, U+2011,
    U+2018-2019, U+201C-201D, U+2022, U+2026, U+202F, U+2190-2193, U+2212, U+25B6, U+25C0;
}
/* Une seule graisse : un code se lit par ses caractères, pas par son épaisseur. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("jetbrains-mono-400.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+2011, U+2019, U+2026;
}
/* Arial ou Roboto, déjà sur l'appareil, mis aux mesures d'Inter : même largeur de
   texte, même hauteur de ligne. Calculé sur une phrase du portail, en français et
   en anglais : 107,13 % de largeur, ascendante 90,43 %, descendante 22,52 %. */
@font-face {
  font-family: "Inter repli";
  src: local("Arial"), local("ArialMT"), local("Roboto"), local("Helvetica Neue");
  size-adjust: 107.13%;
  ascent-override: 90.43%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}

/* Les couleurs des projets (REP-01, MOB-01), hors du design system, qui n'en a pas :
   elles évitent le bleu des boutons, le rouge, l'ambre et le vert des états. Une bande
   ou une pastille, jamais un texte. Pourquoi ces cinq : moteur/reperes.py. */
:root {
  --marque-projet-sarcelle: #028A9B;
  --marque-projet-sarcelle-fond: #DAF6FB;
  --marque-projet-prune: #82158A;
  --marque-projet-prune-fond: #FBEAFC;
  --marque-projet-olive: #708904;
  --marque-projet-olive-fond: #EDF4DE;
  --marque-projet-lavande: #7E6EF2;
  --marque-projet-lavande-fond: #EEEEFF;
  --marque-projet-fuchsia: #E23888;
  --marque-projet-fuchsia-fond: #FFEAF0;
}

/* Les couleurs des travaux (chantier BC) : le fond de l'étiquette qui porte le nom d'un
   type, sous une encre presque noire (7:1 et plus). Claires exprès, loin des bandes
   foncées des projets, et hors des teintes des états et du bleu des boutons. Pourquoi
   ces cinq, et pas quinze : moteur/reperes.py. */
:root {
  --marque-travaux-sable: #C3C09A;
  --marque-travaux-lilas: #E1C1FD;
  --marque-travaux-ciel: #37B2F1;
  --marque-travaux-rose: #E184C2;
  --marque-travaux-citron: #F7E95B;
}