/* ==========================================================================
   Réinitialisation et primitives typographiques.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: var(--t-base);
  line-height: 1.47;
  color: var(--texte);
  background: var(--fond-bureau);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Une application, pas un document : la page elle-même ne défile jamais,
     seules les zones de contenu le font. */
  overflow: hidden;
  overscroll-behavior: none;
}

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3 {
  font-family: var(--police-affichage);
  font-weight: var(--graisse-demi);
  letter-spacing: -0.012em;
}
h1 { font-size: var(--t-grand); letter-spacing: -0.019em; }
h2 { font-size: var(--t-titre); }
h3 { font-size: var(--t-corps); }

a { color: var(--accent-fort); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* Les chiffres alignés verticalement en colonne : indispensable dès qu'on
   empile des montants ou des dates dans un tableau. */
.tabulaire, table, .indicateur-valeur, .montant {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---- Focus --------------------------------------------------------------
   Anneau visible uniquement au clavier : au clic, il parasite la lecture.
   Jamais supprimé — c'est le seul repère d'un utilisateur au clavier. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: var(--r-petit);
}

/* ---- Barres de défilement ----------------------------------------------
   Fines, sans piste, apparaissant au survol : le comportement macOS. */
* { scrollbar-width: thin; scrollbar-color: var(--separateur-fort) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: var(--r-pilule);
  border: 2px solid transparent;
  background-clip: content-box;
}
*:hover::-webkit-scrollbar-thumb { background: var(--separateur-fort); background-clip: content-box; }
*::-webkit-scrollbar-corner { background: transparent; }

/* ---- Sélection ---------------------------------------------------------- */
::selection { background: var(--accent-doux); color: var(--texte); }

/* ---- Icônes -------------------------------------------------------------
   Taille par défaut indispensable : un SVG sans dimension s'étire à la taille
   de son conteneur. Les contextes qui ont besoin d'une autre taille (bouton,
   navigation, état vide) la redéfinissent. */
.icone {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ---- Utilitaires -------------------------------------------------------- */
.pile { display: flex; flex-direction: column; }
.rang { display: flex; align-items: center; }
.espace { flex: 1; }
.muet { color: var(--texte-2); }
.tres-muet { color: var(--texte-3); }
.mini { font-size: var(--t-mini); }
.petit { font-size: var(--t-petit); }
.demi { font-weight: var(--graisse-demi); }
.mono { font-family: var(--police-mono); font-size: 0.95em; }
.tronque { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invisible {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Étiquette de section : petites capitales espacées, façon barre latérale. */
.entete-groupe {
  font-size: var(--t-mini);
  font-weight: var(--graisse-forte);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texte-3);
}

/* ---- Respect des préférences d'accessibilité ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}