/* TRACE — base.css : remise à zéro, typographie, éléments de base.
   Aucune couleur ni taille en dur : tout vient de jetons.css. */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: var(--taille-texte);
  line-height: var(--interligne);
  color: var(--texte);
  background: var(--fond);
}

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

h1 { font-size: var(--taille-titre-page); font-weight: var(--graisse-grasse); line-height: var(--interligne-serre); }
h2 { font-size: var(--taille-titre-section); font-weight: var(--graisse-grasse); line-height: var(--interligne-serre); }
h3 { font-size: var(--taille-texte); font-weight: var(--graisse-grasse); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

small, .secondaire { font-size: var(--taille-secondaire); color: var(--texte-doux); }
strong { font-weight: var(--graisse-grasse); }

.chiffre, .tableau td.chiffre, time { font-variant-numeric: tabular-nums; }

table { border-collapse: collapse; border-spacing: 0; width: 100%; }
th { text-align: left; font-weight: var(--graisse-moyenne); }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button { cursor: pointer; background: none; border: 0; padding: 0; }

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

.icone {
  width: var(--taille-icone);
  height: var(--taille-icone);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--trait-icone);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Un élément masqué par l'attribut hidden le reste, quel que soit son affichage : les panneaux qu'ouvre interface.js
   (actions de la fiche d'un ticket, calcul de la priorité, détail d'une ligne) portent un display de composant. */
[hidden] { display: none !important; }

.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Champs de formulaire */
.champ {
  height: var(--hauteur-champ);
  padding: 0 var(--pas-2);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon-petit);
  background: var(--surface);
  color: var(--texte);
  width: 100%;
}
.champ::placeholder { color: var(--texte-faible); }
.champ:focus { border-color: var(--accent); }

.etiquette {
  display: block;
  font-size: var(--taille-secondaire);
  color: var(--texte-doux);
  margin-bottom: var(--pas);
}

/* Boutons */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: var(--pas-2);
  height: var(--hauteur-champ);
  padding: 0 var(--pas-3);
  border-radius: var(--rayon-petit);
  border: 1px solid var(--bordure-forte);
  background: var(--surface);
  color: var(--texte);
  font-weight: var(--graisse-moyenne);
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition);
}
.bouton:hover { background: var(--surface-2); text-decoration: none; }
.bouton-principal { background: var(--accent); border-color: var(--accent); color: var(--texte-inverse); }
.bouton-principal:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }
.bouton-discret { border-color: var(--bordure); background: none; color: var(--accent); }
.bouton-discret:hover { background: var(--accent-clair); }
.bouton-petit { height: calc(var(--hauteur-champ) - var(--pas-2)); padding: 0 var(--pas-2); font-size: var(--taille-secondaire); }
.est-inactif { color: var(--texte-faible); pointer-events: none; }