/* Réinitialisation minimale et éléments interactifs remis à plat */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: #eceff3;
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }

/* Les maquettes utilisent des <div onClick> : on emploie de vrais boutons,
   remis à plat pour un rendu strictement identique. */
button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-family: inherit;
  color: inherit;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}

input, textarea { font-family: inherit; }

/* Anneau lisible aussi bien sur le dégradé que sur les surfaces claires */
:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .9);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(26, 79, 216, .55);
}

::placeholder { color: var(--muted-2); opacity: 1; }

.spacer { flex: 1; }
.sep {
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, .4);
  margin: 0 4px;
}

.label-mono {
  font: 600 12px var(--mono);
  color: var(--muted-2);
  letter-spacing: 1.4px;
}
.label-mono--blue { color: var(--blue); }