/* coo.bj : styles communs (accueil, pages d'erreur, administration). */
:root {
  --bg: #f7f5f0;
  --surface: #ffffff;
  --fg: #1c1b19;
  --muted: #6b6860;
  --line: #e4e0d6;
  --accent: #b8761a;
  --accent-ink: #ffffff;
  --accent-soft: #f6e7cf;
  --ok: #2f7a4a;
  --ok-soft: #dcefe2;
  --warn: #9a5b00;
  --warn-soft: #f8e6c6;
  --danger: #b3261e;
  --danger-soft: #f8dcd9;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(28, 27, 25, .06), 0 4px 16px rgba(28, 27, 25, .05);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131311;
    --surface: #1c1c19;
    --fg: #f2efe8;
    --muted: #a19d92;
    --line: #2f2e2a;
    --accent: #e8a33d;
    --accent-ink: #1c1b19;
    --accent-soft: #3a2c16;
    --ok: #7fcf9b;
    --ok-soft: #1f3528;
    --warn: #f0b860;
    --warn-soft: #3a2c16;
    --danger: #f2a49d;
    --danger-soft: #3d1f1c;
    --shadow: none;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }

.brand {
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--fg);
  text-decoration: none;
}
.brand span { color: var(--accent); }

/* Accueil et pages d'erreur */
body.center {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}
.hero { text-align: center; max-width: 34rem; }
.hero .brand { font-size: clamp(3rem, 12vw, 5.5rem); line-height: 1; display: inline-block; }
.rule { width: 48px; height: 3px; background: var(--accent); border-radius: 2px; margin: 28px auto; }
.hero p { font-size: 1.125rem; color: var(--muted); }
.hero p strong { color: var(--fg); font-weight: 600; }
.panel {
  width: 100%;
  max-width: 34rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 32px 28px;
}
.panel .brand { font-size: 1.5rem; display: inline-block; margin-bottom: 24px; }
.panel h1 { font-size: 1.5rem; }
.panel p:last-child { margin-bottom: 0; }
.dest {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-wrap: anywhere;
}

/* Boutons et champs */
.button, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-weight: 600;
  font-size: .95rem;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 9px 16px;
  cursor: pointer;
  text-decoration: none;
  background: var(--accent);
  color: var(--accent-ink);
  white-space: nowrap;
}
.button:hover, button:hover { filter: brightness(1.06); }
button:disabled { opacity: .55; cursor: default; filter: none; }
button.secondary, .button.secondary { background: transparent; color: var(--fg); border-color: var(--line); }
button.secondary:hover, .button.secondary:hover { background: var(--bg); filter: none; }
button.ghost { background: transparent; color: var(--muted); padding: 6px 10px; font-weight: 500; }
button.ghost:hover { color: var(--fg); background: var(--bg); filter: none; }
button.danger { background: var(--danger); color: #fff; }
button.small, .button.small { padding: 5px 10px; font-size: .85rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: 6px; }
label .muted { font-weight: 400; }
input[type="text"], input[type="url"], input[type="password"], input[type="search"], input[type="datetime-local"] {
  width: 100%;
  font: inherit;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  min-width: 0;
}
input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.prefix {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.prefix span {
  display: flex;
  align-items: center;
  padding: 0 2px 0 12px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95rem;
}
.prefix input { border: 0; border-radius: 0; padding-left: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.prefix:focus-within { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.prefix input:focus { outline: none; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.error { color: var(--danger); font-size: .9rem; margin: 8px 0 0; }