/* L'Observatoire, jetons.css : les jetons du système visuel. Tout le reste s'y réfère.

   Le parti : l'Observatoire est une application du réseau, de la même famille que Trousseau. Il porte donc la charte
   Cerfrance (thème du masque 2026 : fond gris très clair, cadres blancs, titres noirs, police géométrique Outfit proche
   de Nexa) et garde sa propre couleur, le vert foncé du réseau (00534C) : le logo, le panneau de la porte, l'étape en
   cours, la progression. Les rôles des couleurs sont ceux de la famille : le jaune pour l'action principale et ce qui
   est choisi, le vert pour ce qui va bien, l'orange et le rouge foncé pour ce qui ne va pas, le gris pour le texte.

   Les feuilles, dans l'ordre de la cascade : jetons, base, coque, composants, saisie, pages, porte, adaptations. */
:root {
  /* neutres */
  --fond: #F7F6F5; --surface: #FFFFFF; --surface-2: #FBFAF9; --survol: #F1F0EE; --appuye: #E8E6E3;
  --filet: #E4E2DE; --filet-2: #EEECE9; --filet-fort: #CFCCC7;
  --encre: #111111; --encre-2: #494C4A; --encre-3: #6E716E; --encre-4: #9A9C99;
  /* le thème Cerfrance */
  --jaune: #F8B334; --jaune-fort: #E9A524; --jaune-pale: #FDF1D6; --jaune-texte: #8A5E07; --jaune-filet: #F3D58E; --miel: #FEF7E6;
  --vert: #00A096; --vert-fort: #00534C; --vert-nuit: #003A35; --vert-texte: #007A72; --vert-pale: #E4F3F1; --vert-filet: #B4DED9; --vert-doux: #F3FAF9;
  --orange: #E7511E; --orange-pale: #FDEDE6; --orange-texte: #B23D12; --rouge: #9B2E1A; --rouge-pale: #FBE7DD; --rouge-filet: #F2C2AE;
  /* les rôles */
  --produit: var(--vert-fort); --produit-pale: var(--vert-pale); --produit-filet: var(--vert-filet);
  --ok: var(--vert-texte); --ok-point: var(--vert); --ok-pale: var(--vert-pale); --ok-filet: var(--vert-filet);
  --at: var(--orange-texte); --at-point: var(--orange); --at-pale: var(--orange-pale); --at-filet: #F5C4AE;
  --ko: var(--rouge); --ko-pale: var(--rouge-pale); --ko-filet: var(--rouge-filet);
  /* la saisie : les états d'une case */
  --case-ajustable: var(--vert-doux); --case-ajustable-filet: var(--vert-filet); --case-ajustee: var(--miel); --case-ajustee-filet: var(--jaune-filet);
  --case-calc: #F4F3F1; --case-focus: var(--jaune-fort); --case-erreur: var(--rouge); --case-erreur-fond: var(--rouge-pale);
  /* la coque */
  --haut: 56px; --rail: 264px; --largeur: 1320px;
  --r-s: 6px; --r: 8px; --r-g: 14px;
  --ombre-pop: 0 0 0 1px rgba(17, 17, 17, .06), 0 4px 12px rgba(17, 17, 17, .08), 0 18px 40px rgba(17, 17, 17, .10);
  --ombre-panneau: -12px 0 40px rgba(17, 17, 17, .16);
  --anneau: 0 0 0 3px rgba(248, 179, 52, .45);
  --sans: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', 'Consolas', 'SFMono-Regular', monospace;
  --doux: cubic-bezier(.2, .7, .2, 1);
}