/* base.css : socle commun. Ne consomme que les jetons de tokens.css. */
*, *::before, *::after { box-sizing: border-box; }

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

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

h1, h2, h3 { line-height: var(--interligne-serre); margin: 0; }
p { margin: 0; }
img { max-width: 100%; }

/* Un élément masqué l'est toujours, quel que soit son display. */
[hidden] { display: none !important; }

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-1);
  min-height: var(--bouton-hauteur);
  padding: var(--bouton-marge-interieure);
  border: var(--trait) solid var(--bleu-marque);
  border-radius: var(--rayon);
  background: var(--bleu-marque);
  color: var(--texte-sur-marque);
  font: inherit;
  font-weight: var(--graisse-semi);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duree-courte) var(--courbe),
              box-shadow var(--duree-courte) var(--courbe),
              opacity var(--duree-courte);
}
.bouton:hover { box-shadow: var(--ombre-tuile-survol); }
.bouton:active { opacity: var(--opacite-appui); }
.bouton:disabled { opacity: var(--opacite-desactive); cursor: default; box-shadow: none; }
.bouton-secondaire { background: var(--fond-bloc); color: var(--bleu-marque); }

:focus-visible {
  outline: var(--trait-focus) solid var(--focus);
  outline-offset: var(--trait-epais);
}

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

.champ-cache {
  position: absolute;
  width: var(--trait);
  height: var(--trait);
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.aide { color: var(--texte-secondaire); font-size: var(--taille-petite); text-align: left; }

.erreur {
  padding: var(--tuile-marge-interieure);
  border: var(--trait) solid var(--erreur-bordure);
  border-radius: var(--rayon);
  background: var(--erreur-fond);
  color: var(--erreur-texte);
}