:root {
  color-scheme: light dark;
  --fg: #16181d; --bg: #fbfbfd; --muted: #6b7280;
  --accent: #2563eb; --line: #e5e7eb; --ok: #15803d; --ko: #b91c1c;
}
@media (prefers-color-scheme: dark) {
  :root { --fg: #e8e9ed; --bg: #16181d; --line: #2a2e37; --muted: #9aa1ad; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--fg);
  background: var(--bg);
}

main { max-width: 52rem; margin: 0 auto; padding: 3rem 1.25rem; }

h1 { font-size: 1.75rem; margin: 0 0 1.5rem; }
h2 { font-size: 1.25rem; margin: 2.5rem 0 1rem; }

a { color: var(--accent); }
.hint { color: var(--muted); font-size: .9rem; }
.empty { color: var(--muted); }

/* --- liste des services --- */

ul.services {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
ul.services li { padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
ul.services li:last-child { border-bottom: 0; }
ul.services a { font-weight: 600; text-decoration: none; }
ul.services a:hover { text-decoration: underline; }
ul.services span { color: var(--muted); font-size: .9rem; margin-left: .5rem; }

/* --- formulaire --- */

form { display: grid; gap: .9rem; max-width: 30rem; }
label { display: grid; gap: .3rem; font-size: .9rem; color: var(--muted); }

input, textarea {
  font: inherit; padding: .55rem .7rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--fg);
}
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

button {
  font: inherit; font-weight: 600; padding: .6rem 1rem;
  border: 0; border-radius: 8px;
  background: var(--accent); color: #fff; cursor: pointer;
}
button.ghost {
  background: transparent; color: var(--muted); border: 1px solid var(--line);
}

/* Champ leurre : retiré visuellement, pas display:none (certains robots
   ignorent display:none mais remplissent un champ hors écran). */
.hp { position: absolute; left: -9999px; }

.ok { color: var(--ok); }
.err { color: var(--ko); }

/* --- back-office --- */

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .5rem .4rem; border-bottom: 1px solid var(--line); }
tr.approved td:nth-child(5) { color: var(--ok); }
tr.rejected td:nth-child(5) { color: var(--ko); }
tr.rejected { opacity: .6; }

nav { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; font-size: .9rem; }

.card { border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.25rem; }
.card dl {
  display: grid; grid-template-columns: auto 1fr;
  gap: .25rem 1rem; margin: 0 0 1rem; font-size: .9rem;
}
.card dt { color: var(--muted); }
.card dd { margin: 0; word-break: break-word; }

.msg {
  white-space: pre-wrap;
  border: 1px dashed var(--line); border-radius: 8px;
  padding: .75rem; margin: 0 0 1rem;
}

.card form { display: flex; flex-wrap: wrap; gap: .5rem; max-width: none; }