/* =========================================================================
   Base — remise à zéro, typographie, éléments natifs.
   =========================================================================
   Une remise à zéro moderne et courte : on ne neutralise que ce qui gêne
   réellement, et on garde les comportements natifs utiles (le focus visible,
   le défilement fluide, la sélection de texte).
   ========================================================================= */

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

/* L'attribut `hidden` doit gagner, toujours.
   La règle du navigateur — `[hidden] { display: none }` — a la même
   spécificité que n'importe quel sélecteur de classe : un `.liste` en
   `display: flex` la neutralise sans bruit, et l'élément reste visible alors
   que le code le croit caché. */
[hidden] { display: none !important; }

/* Les marges par défaut des titres et paragraphes créent des espacements
   imprévisibles quand on compose avec une échelle. On les remet à zéro et on
   espace explicitement. */
html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}
ul, ol { list-style: none; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Le fond va jusque sous la barre d'état du téléphone. */
  background: var(--plan);
}

body {
  min-height: 100dvh;
  margin: 0;
  font-family: var(--police);
  font-size: var(--t-base);
  font-weight: var(--graisse-normale);
  line-height: 1.55;
  color: var(--encre);
  background: var(--plan);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Aucun rebond horizontal, même quand un tableau large déborde. */
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-weight: var(--graisse-forte);
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--t-titre); }
h2 { font-size: var(--t-grand); }
h3 { font-size: var(--t-moyen); letter-spacing: -0.01em; }
h4 { font-size: var(--t-base); font-weight: var(--graisse-moyenne); }

p { text-wrap: pretty; }

a {
  color: var(--accent);
  text-decoration-color: color-mix(in oklab, var(--accent) 40%, transparent);
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: currentColor; }

strong, b { font-weight: var(--graisse-moyenne); }

small { font-size: var(--t-petit); color: var(--encre-douce); }

code, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .9em;
}

svg { display: block; }
img, svg, video, canvas { max-width: 100%; height: auto; }

/* ── Formulaires ───────────────────────────────────────────────────────── */

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { cursor: pointer; background: none; border: none; }
button:disabled { cursor: not-allowed; opacity: .5; }

/* Les champs de nombre gardent leurs flèches sur ordinateur mais pas sur
   mobile, où elles sont minuscules et impossibles à viser. */
input[type="number"] { -moz-appearance: textfield; }
@media (pointer: coarse) {
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
}

/* ── Focus ───────────────────────────────────────────────────────────────
   Visible, franc, et seulement au clavier. Un anneau qui n'apparaît pas au
   clic à la souris mais toujours à la tabulation. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-petit);
}
:focus:not(:focus-visible) { outline: none; }

/* ── Sélection ─────────────────────────────────────────────────────────── */
::selection {
  background: var(--accent-halo);
  color: var(--encre);
}

/* ── Barres de défilement ────────────────────────────────────────────────
   Discrètes, pour ne pas ajouter de bruit visuel à une page déjà dense. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--trait-marque) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--trait-marque);
  border: 3px solid transparent;
  border-radius: var(--r-plein);
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--encre-tenue); background-clip: content-box; }

/* ── Chiffres ────────────────────────────────────────────────────────────
   Les colonnes de montants s'alignent verticalement ; les grands nombres
   isolés gardent les chiffres proportionnels, plus élégants. */
.tabulaire { font-variant-numeric: tabular-nums; }

/* ── Accessibilité ───────────────────────────────────────────────────── */

/* Visible uniquement pour les lecteurs d'écran. */
.lecteur-seul {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Le lien d'évitement, qui apparaît à la première tabulation. */
.evitement {
  position: fixed;
  top: var(--e2);
  left: var(--e2);
  z-index: 200;
  padding: var(--e2) var(--e3);
  background: var(--accent);
  color: var(--accent-encre);
  border-radius: var(--r-moyen);
  font-weight: var(--graisse-moyenne);
  transform: translateY(-200%);
  transition: transform var(--v-moyen) var(--sortie);
}
.evitement:focus { transform: translateY(0); }

/* ── Mouvement réduit ────────────────────────────────────────────────────
   Une préférence système, pas une option décorative : certaines personnes
   ont la nausée devant une animation. On coupe tout, sans exception. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Contraste renforcé et couleurs imposées ─────────────────────────────
   Sous « forced-colors », le système repeint tout : on laisse faire et on
   rétablit seulement les bordures, sans quoi les cartes disparaîtraient. */
@media (forced-colors: active) {
  .carte, .champ, .bouton { border: 1px solid CanvasText; }
  .jauge-remplissage { forced-color-adjust: none; }
}

/* ── Impression ──────────────────────────────────────────────────────────
   Un budget, ça s'imprime pour en parler à deux à la table de la cuisine. */
@media print {
  .rail, .barre-mobile, .actions-flottantes, .bouton { display: none !important; }
  body { background: #fff; color: #000; }
  .carte { break-inside: avoid; box-shadow: none; border: 1px solid #ddd; }
}