/* Pages d'attente et d'autorisation des appareils : mêmes couleurs et polices que le tableau de bord. */
:root {
  color-scheme: dark light;
  --fond: #0b121d;
  --fond-haut: #172a44;
  --carte: #121d2d;
  --trait: rgb(255 255 255 / .09);
  --texte: #eaf0f6;
  --texte-2: #a3b2c4;
  --accent: #3fc6e0;
  --accent-texte: #06202a;
  --alerte: #ff8a80;
  --police: "Bricolage Grotesque", ui-rounded, "Segoe UI Variable Display", system-ui, sans-serif;
  --police-texte: "Instrument Sans", system-ui, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --fond: #eaf0f7;
    --fond-haut: #d6e4f4;
    --carte: #fbfdff;
    --trait: rgb(16 32 51 / .1);
    --texte: #102033;
    --texte-2: #44586f;
    --accent: #0a7f9a;
    --accent-texte: #ffffff;
    --alerte: #c2352a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem 1rem;
  background: radial-gradient(90rem 48rem at 8% -12%, var(--fond-haut), transparent 62%), var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  line-height: 1.5;
}

.carte {
  width: min(26rem, 100%);
  padding: 2rem 1.75rem;
  border: 1px solid var(--trait);
  border-radius: 1.25rem;
  background: var(--carte);
}

h1 {
  margin: 0 0 1rem;
  font: 600 1.9rem/1.1 var(--police);
  letter-spacing: -.01em;
}

p { margin: 0 0 1.25rem; color: var(--texte-2); }

dl { margin: 0 0 1.5rem; display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; }
dt { color: var(--texte-2); }
dd { margin: 0; overflow-wrap: anywhere; }

.actions { display: flex; gap: .75rem; }

button {
  flex: 1;
  min-height: 3rem;
  padding: .6rem 1rem;
  border: 1px solid var(--trait);
  border-radius: .8rem;
  background: transparent;
  color: var(--texte);
  font: 600 1rem var(--police-texte);
  cursor: pointer;
}

button.principal { border-color: transparent; background: var(--accent); color: var(--accent-texte); }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

.etat { margin: 1rem 0 0; min-height: 1.5em; color: var(--texte-2); }
.etat.erreur { color: var(--alerte); }