@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;700&display=swap');

:root {
  --paper: #f3f5f8;
  --surface: #ffffff;
  --ink: #16202e;
  --muted: #5b6778;
  --line: #d5dce6;
  --accent: #0e6e63;
  --accent-soft: #e3f1ef;
  --danger: #b42318;
  --radius: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
a { color: var(--accent); }

button, .btn {
  font: inherit;
  font-weight: 500;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: .5em 1em;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .btn:hover { border-color: var(--muted); }
.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.primary:hover { background: #0a5a51; border-color: #0a5a51; }
.danger { color: var(--danger); }
button:disabled { opacity: .5; cursor: not-allowed; }
:focus-visible { outline: 3px solid #7cc4ba; outline-offset: 2px; }

input, textarea {
  font: inherit;
  width: 100%;
  padding: .6em .75em;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}
textarea { resize: vertical; min-height: 110px; }

.muted { color: var(--muted); }
.small { font-size: .85rem; }
.hidden { display: none !important; }

/* Page centrée (connect / result / login) */
.center {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
}
.sheet {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  max-width: 480px;
  width: 100%;
}
.perms { list-style: none; padding: 0; margin: 0 0 1.5em; }
.perms li { padding: .55em 0; border-bottom: 1px solid var(--line); }
.perms li:last-child { border-bottom: 0; }
.perms strong { display: block; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}