* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  font-family: var(--police);
  font-size: var(--t-corps);
  color: var(--texte-1);
  background: var(--fond);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: var(--t-titre1);
  font-weight: 600;
}
h2 {
  font-size: var(--t-titre2);
  font-weight: 600;
}
h3 {
  font-size: var(--t-titre3);
  font-weight: 600;
}

a {
  color: var(--action-appui);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.chargement {
  padding: var(--e48);
  text-align: center;
  color: var(--texte-2);
}

.vide {
  padding: var(--e32);
  text-align: center;
  color: var(--texte-2);
  font-size: var(--t-petit);
}

.page-erreur {
  padding: var(--e64);
  text-align: center;
}
.page-erreur h1 {
  margin-bottom: var(--e12);
}
.page-erreur p {
  color: var(--texte-2);
  margin-bottom: var(--e24);
}

.zone-message {
  margin-bottom: var(--e16);
}

.message {
  padding: var(--e12) var(--e16);
  border-radius: var(--r8);
  font-size: var(--t-petit);
}
.message-info {
  background: var(--info-100);
  color: var(--info-500);
}
.message-succes {
  background: var(--succes-100);
  color: var(--succes-500);
}
.message-alerte {
  background: var(--alerte-100);
  color: var(--alerte-500);
}
.message-erreur {
  background: var(--erreur-100);
  color: var(--erreur-500);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}