@font-face { font-family: Outfit; font-weight: 400; font-display: swap; src: url(/fonts/outfit-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Outfit; font-weight: 500; font-display: swap; src: url(/fonts/outfit-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: Outfit; font-weight: 600; font-display: swap; src: url(/fonts/outfit-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Outfit; font-weight: 700; font-display: swap; src: url(/fonts/outfit-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: Outfit; font-weight: 800; font-display: swap; src: url(/fonts/outfit-latin-800-normal.woff2) format('woff2'); }
:root {
  --accent: #2F6FED; --encre: #0F172A; --encre2: #475569; --encre3: #94A3B8;
  --fond: #F1F5F9; --carte: #FFFFFF; --bord: #E2E8F0; --ok: #12A150; --alerte: #DC2626; --attention: #E8590C;
  --rayon: 18px; --ombre: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.06);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: Outfit, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--encre); background: var(--fond); -webkit-font-smoothing: antialiased; }
button { font: inherit; cursor: pointer; border: 0; }
input, select, textarea { font: inherit; }
.cache { display: none !important; }
.muet { color: var(--encre2); }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .8em 1.3em; border-radius: 14px; font-weight: 600; background: var(--accent); color: #fff; transition: transform .08s, filter .15s; }
.btn:active { transform: scale(.97); }
.btn:disabled { filter: grayscale(1) opacity(.5); cursor: default; }
.btn.secondaire { background: #fff; color: var(--encre); box-shadow: inset 0 0 0 2px var(--bord); }
.btn.ok { background: var(--ok); }
.btn.danger { background: var(--alerte); }
.btn.orange { background: var(--attention); }

/* Clavier de code (personnel, admin) */
.verrou { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.verrou form { background: var(--carte); border-radius: 24px; box-shadow: var(--ombre); padding: 32px; width: min(420px, 100%); text-align: center; }
.verrou h1 { margin: 0 0 4px; font-size: 26px; }
.verrou input { width: 100%; font-size: 28px; letter-spacing: .3em; text-align: center; padding: 14px; border-radius: 14px; border: 2px solid var(--bord); margin: 18px 0 8px; }
.verrou .erreur { color: var(--alerte); min-height: 1.4em; margin: 0 0 8px; }
.pave { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 16px; }
.pave button { padding: 18px 0; font-size: 26px; font-weight: 600; border-radius: 14px; background: var(--fond); }
.pave button:active { background: var(--bord); }

/* Page d'accueil de la démo */
.accueil main { max-width: 1100px; margin: 0 auto; padding: 48px 24px; }
.accueil .sur-titre { text-transform: uppercase; letter-spacing: .16em; font-weight: 600; color: var(--accent); margin: 0; font-size: 14px; }
.accueil h1 { font-size: clamp(32px, 5vw, 52px); margin: 8px 0; letter-spacing: -.02em; }
.accueil .intro { color: var(--encre2); font-size: 19px; max-width: 720px; }
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 18px; margin-top: 28px; }
@media (max-width: 520px) { .cartes { grid-template-columns: 1fr; } }
.carte-lien { display: flex; gap: 20px; align-items: center; background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 20px; color: inherit; text-decoration: none; transition: transform .15s; }
.carte-lien:hover { transform: translateY(-2px); }
.carte-lien .qr { width: 112px; flex: none; }
.carte-lien .qr svg { width: 100%; height: auto; display: block; }
.carte-lien h2 { margin: 0 0 4px; font-size: 21px; }
.carte-lien p { margin: 0 0 8px; color: var(--encre2); }
.carte-lien code { font-size: 13px; color: var(--accent); word-break: break-all; }