/* Valid'Swipe : base visuelle commune (espace de gestion + page de validation).
   Couleurs en jetons, thème clair et sombre suivant l'appareil. */
:root{
  --bg:#f3f4f6; --surface:#ffffff; --surface-2:#f8f9fb; --ink:#14181f; --muted:#5d6675; --faint:#8a93a1; --line:#e1e4ea; --line-2:#cfd4dc;
  --accent:#b3261e; --accent-ink:#ffffff; --accent-soft:#f8e4e2;
  --ok:#1d7a46; --ok-soft:#e2f3e9; --no:#c0352b; --no-soft:#fbe5e3; --mod:#a35f00; --mod-soft:#fcefd8; --wait:#6b7480; --wait-soft:#eceef2;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px -12px rgba(16,24,40,.18);
  --radius:12px;
  --display:"Archivo","Helvetica Neue",system-ui,sans-serif;
  --body:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0d1015; --surface:#161a21; --surface-2:#1b2029; --ink:#e9edf2; --muted:#a0a9b6; --faint:#79818e; --line:#272d37; --line-2:#343b47;
  --accent:#ee6a5f; --accent-ink:#1a0806; --accent-soft:#3a1c1a;
  --ok:#5fd08d; --ok-soft:#13301f; --no:#f07a6f; --no-soft:#3a1b19; --mod:#f2b456; --mod-soft:#35270f; --wait:#a0a9b6; --wait-soft:#222832;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -12px rgba(0,0,0,.6);
  color-scheme:dark;
}}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--body);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
h1,h2,h3{margin:0;font-family:var(--display);letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
a{color:inherit}
img,video{max-width:100%}
[hidden]{display:none!important}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:10px;padding:10px 16px;font:600 14px/1.1 var(--body);cursor:pointer;background:var(--ink);color:var(--surface);text-decoration:none;white-space:nowrap;min-height:40px}
.btn:disabled{opacity:.5;cursor:default}
.btn.accent{background:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.quiet{background:transparent;color:var(--muted);border-color:transparent;padding-inline:10px}
.btn.quiet:hover{color:var(--ink);background:var(--surface-2)}
.btn.danger{background:transparent;color:var(--no);border-color:var(--line-2)}
.btn.small{padding:7px 11px;min-height:32px;font-size:13px;border-radius:8px}
.btn svg{width:18px;height:18px;flex:none}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:9px;border:0;background:transparent;color:var(--muted);cursor:pointer}
.icon-btn:hover{background:var(--surface-2);color:var(--ink)}
.icon-btn svg{width:20px;height:20px}

/* Champs */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.label{font:600 12px/1.2 var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.input,textarea,select{width:100%;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:9px;padding:10px 12px;font:500 15px/1.35 var(--body);min-height:42px}
textarea{resize:vertical;min-height:84px}
.input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* Pastilles d'état */
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font:600 12.5px/1.3 var(--body);white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.no{background:var(--no-soft);color:var(--no)} .pill.mod{background:var(--mod-soft);color:var(--mod)} .pill.wait{background:var(--wait-soft);color:var(--wait)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}

/* Notification brève */
.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:100;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(92vw,440px)}
.toast{background:var(--ink);color:var(--surface);border-radius:10px;padding:11px 16px;font-weight:600;box-shadow:var(--shadow);pointer-events:auto;text-align:center}
.toast.err{background:var(--no);color:#fff}

/* Fenêtre par-dessus */
.overlay{position:fixed;inset:0;background:rgba(10,12,16,.55);z-index:50;display:flex;align-items:center;justify-content:center;padding:16px}
.dialog{background:var(--surface);border-radius:16px;box-shadow:var(--shadow);width:min(100%,460px);max-height:calc(100dvh - 32px);overflow:auto;padding:22px;display:flex;flex-direction:column;gap:14px}
.dialog h2{font-size:20px}
.dialog .row{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
@media (max-width:600px){.overlay{align-items:flex-end;padding:0}.dialog{width:100%;border-radius:18px 18px 0 0;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}}

.spinner{width:22px;height:22px;border-radius:50%;border:3px solid var(--line-2);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}