/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */

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

/* Prevent any overflowing component (tables, wide cards) from creating a
   page-level horizontal scrollbar on mobile. overflow-x:clip (unlike hidden)
   does NOT create a new scroll container, so position:fixed elements
   (topbar, sidebar, modals) are completely unaffected. */
html {
  overflow-x: clip;
  /* ── LE GESTE À DEUX DOIGTS NE QUITTE PLUS LA PAGE ─────────────────────────
     Sur les écrans qui défilent BEAUCOUP à l'horizontale (le planning d'une
     affaire, /planning/job/N, mais aussi les tableaux larges), un balayage
     horizontal qui atteint le bout de son cadre ENCHAÎNE sur la fenêtre. La
     fenêtre, elle, ne défile pas en X (`overflow-x: clip` juste au-dessus) :
     Chrome traduit alors le geste en navigation ARRIÈRE/AVANT et on quitte
     l'écran en croyant faire glisser une colonne (Olivier, 15-09-2026).
     `overscroll-behavior-x` posé sur l'élément RACINE se propage au viewport —
     c'est le seul endroit qui coupe le geste où qu'il commence, y compris sur
     une zone qui ne défile pas (l'en-tête de page, la rangée de filtres).
     `none` plutôt que `contain` : il supprime AUSSI le rebond élastique
     horizontal, même choix que `.table-container` (tables.css, 04-08-2026).
     ⚠ SEUL L'AXE X. L'axe Y garde son comportement par défaut (tirer pour
     rafraîchir en mobile, rebond vertical). Et rien ici ne touche au bouton
     Retour ni au raccourci clavier : c'est le GESTE de défilement qui cesse
     d'être une navigation. */
  overscroll-behavior-x: none;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button, input, select, textarea {
  font: inherit;
}

svg {
  display: block;
}

/* ── `[hidden]` — l'ATTRIBUT est un ordre, pas un style (CSS-06, 2026-09-06) ─
   La feuille du navigateur pose bien `[hidden]{display:none}`, mais à l'origine
   UA : TOUTE règle auteur qui pose `display` la bat. Un `.nav-tab{display:flex}`
   suffit donc à laisser visible un bloc que le JS vient de cacher par
   `el.hidden = true` — le bug déjà payé sur `/jobs/N` (airfact) et sur les
   pages publiques SAV de plan.
   Le socle le savait et corrigeait au cas par cas : 83 rustines
   `…[hidden]{display:none}` (app-core 14, build 53, xorizo 10, plan 4,
   airfact 1, trade 1) face à 211 bascules `el.hidden = …` en JS. La 84ᵉ se
   serait écrite au prochain aller-retour.
   C'est le SEUL `!important` légitime du socle : `hidden` n'exprime pas une
   préférence de présentation, il dit que l'élément n'est pas là. Un composant
   qui doit rester visible en portant l'attribut n'existe pas — et s'il
   existait, ce serait l'attribut qui serait faux. */
[hidden] {
  display: none !important;
}
/* ── Anneau de focus clavier GLOBAL (2026-08-27) ──────────────────────────
   :focus-visible ne s'allume qu'au clavier — jamais au clic. Avant cette
   règle, buttons.css et navigation.css n'avaient AUCUN focus : boutons,
   onglets et puces étaient invisibles au clavier. Les composants qui
   dessinent leur propre anneau (box-shadow des inputs, cases, toggles)
   suppriment déjà l'outline localement — cette règle est le filet, pas
   une surcouche. */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}