/* Base commune au site public et à l'espace staff. */
:root {
  --bg: #0a0812;
  --bg-2: #100c1a;
  --surface: #151020;
  --surface-2: #1c1529;
  --surface-3: #251c36;
  --line: rgba(176, 140, 255, 0.14);
  --line-strong: rgba(176, 140, 255, 0.32);
  --text: #eeeaf7;
  --muted: #a39cb9;
  --faint: #8a83a3;
  --violet: #8f4bff;
  --violet-2: #b07cff;
  --violet-3: #d6bfff;
  --green: #3ddc97;
  --red: #ff5d73;
  --amber: #ffc857;
  --blue: #5aa9ff;
  --chrome: linear-gradient(180deg, #ffffff 0%, #e4def5 42%, #8e82b6 52%, #d9d1f2 78%, #ffffff 100%);
  --radius: 14px;
  --radius-sm: 9px;
  --display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
a { color: var(--violet-3); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--violet); color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Boutons ---------- */
.btn {
  --b: var(--surface-3);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 46px; padding: 0 1.3em;
  border: 1px solid var(--line-strong); border-radius: 11px;
  background: var(--b); color: var(--text);
  font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
}
.btn:hover { transform: translateY(-1px); border-color: var(--violet-2); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn.is-disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn-primary {
  background: linear-gradient(180deg, #a466ff, #7a35f0);
  border-color: #b98bff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: #fff;
}
.btn-primary:hover { background: linear-gradient(180deg, #ae78ff, #8442f5); }
.btn-ghost { background: transparent; border-color: var(--line); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { background: rgba(255, 93, 115, 0.12); border-color: rgba(255, 93, 115, 0.45); color: #ffc2cb; }
.btn-success { background: rgba(61, 220, 151, 0.12); border-color: rgba(61, 220, 151, 0.45); color: #b9f5da; }
.btn-sm { min-height: 36px; padding: 0 0.9em; font-size: 0.85rem; border-radius: 9px; }
.btn-lg { min-height: 56px; padding: 0 1.7em; font-size: 1.02rem; border-radius: 13px; }

/* ---------- Formulaires ---------- */
.field { display: grid; gap: 6px; }
.field > label, .field-label { font-weight: 700; font-size: 0.92rem; }
.field .req { color: var(--violet-2); }
.field-help { font-size: 0.82rem; color: var(--muted); }
.field-error { font-size: 0.82rem; color: #ff97a6; font-weight: 600; }
.input, .select, .textarea {
  width: 100%; min-height: 46px; padding: 11px 14px;
  background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 10px;
  color: var(--text); transition: border-color 0.15s, box-shadow 0.15s;
}
.textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--violet-2) 50%), linear-gradient(135deg, var(--violet-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--violet-2); box-shadow: 0 0 0 3px rgba(143, 75, 255, 0.22); }
.input[aria-invalid='true'], .select[aria-invalid='true'], .textarea[aria-invalid='true'] { border-color: var(--red); }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.counter { font-size: 0.78rem; color: var(--faint); justify-self: end; font-variant-numeric: tabular-nums; }
.counter.ok { color: var(--green); }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 0.92rem; color: var(--muted); }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--violet); flex: none; }

/* ---------- Divers ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(21, 16, 32, 0.8); border: 1px solid var(--line-strong);
  font-size: 0.85rem; font-weight: 700; color: var(--muted);
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); flex: none; }
.dot.on { background: var(--green); animation: pulse 2.4s ease-in-out infinite; }
.dot.off { background: var(--red); }
@keyframes pulse { 50% { opacity: 0.35; } }

.toast-zone { position: fixed; z-index: 100; right: 16px; bottom: 16px; display: grid; gap: 10px; max-width: min(420px, calc(100vw - 32px)); }
.toast {
  padding: 13px 16px; border-radius: 12px; background: var(--surface-3); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow); font-weight: 600; font-size: 0.92rem; animation: toast-in 0.25s ease;
}
.toast.error { border-color: rgba(255, 93, 115, 0.6); }
.toast.success { border-color: rgba(61, 220, 151, 0.6); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}