/* ── Design system Devis Vocal — source unique des tokens et composants ── */
:root{
  --bg:#0b1220; --panel:#141c30; --panel-2:#0f1626; --bord:#232d47; --bord-hover:#2f3d63;
  --ink:#eef2ff; --muted:#8892b0; --accent:#4f8cff; --accent-2:#7db3ff;
  --ok:#3ecf8e; --ok-2:#2da874; --err:#ff4d6d; --warn:#f0c674;
  --pap:#f7f8fb; --pap-ink:#1a1d24; --pap-gris:#6b7280; --pap-trait:#e4e7ec;
  --r-s:8px; --r-m:12px; --r-l:16px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,'Segoe UI',sans-serif;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:24px 16px}
h1{font-size:1.25rem;margin:0 0 4px}
h2{font-size:1rem;margin:0 0 12px}
a{color:var(--accent)}
.sub{color:var(--muted);font-size:.875rem;margin-bottom:22px;text-align:center}

/* Formulaires */
label{display:block;font-size:.8125rem;color:var(--muted);margin:0 0 6px}
input,select{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--bord);background:var(--panel-2);color:var(--ink);font-size:1rem;font:inherit}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}
button{font:inherit;border:none;border-radius:10px;cursor:pointer}
.champ{width:100%;max-width:400px;margin-bottom:18px;position:relative}
.champ-row{display:flex;gap:8px;align-items:center}

/* Boutons */
.btn-primary{width:100%;max-width:400px;padding:13px;background:var(--accent);color:#fff;font-weight:600;font-size:1rem;border-radius:10px}
.btn-primary:hover{background:var(--accent-2)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-ghost{padding:9px 16px;background:var(--panel);border:1px solid var(--bord);color:var(--ink);border-radius:10px;font-size:.85rem}
.btn-ghost:hover{border-color:var(--accent)}
.btn-mini{padding:8px 14px;background:var(--panel);border:1px solid var(--bord);color:var(--ink);font-size:.82rem;border-radius:10px;text-decoration:none;display:inline-block}
.btn-mini:hover{border-color:var(--accent)}

/* Barre de navigation commune (pages connectées) */
.topnav{width:100%;max-width:680px;display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;font-size:.85rem}
.topnav .retour{color:var(--muted);text-decoration:none}
.topnav .retour:hover{color:var(--ink)}
.topnav .actions{display:flex;gap:14px;align-items:center}
.topnav .actions a{color:var(--accent);text-decoration:none}
.topnav .actions button{background:none;color:var(--accent);padding:4px}
.topnav.large{max-width:1200px}

/* Cartes & listes */
.carte{width:100%;background:var(--panel);border:1px solid var(--bord);border-radius:var(--r-l);padding:22px}
.item{display:flex;justify-content:space-between;align-items:center;background:var(--panel-2);border:1px solid var(--bord);border-radius:var(--r-m);padding:12px 14px;color:var(--ink)}
.item:hover{border-color:var(--accent)}
.code{font-family:ui-monospace,SFMono-Regular,monospace;font-size:.72rem;color:var(--accent);background:#1c2743;padding:3px 8px;border-radius:6px}
.vide{color:var(--muted);text-align:center;padding:26px 0;font-size:.9rem}

/* Badges de statut */
.badge{font-size:.68rem;padding:3px 9px;border-radius:100px;font-weight:600}
.b-brouillon{background:#2a2f3a;color:#9aa4b2}
.b-envoye{background:#1e3a5f;color:#7db3ff}
.b-signe{background:#14432b;color:#5fd39a}
.b-refuse{background:#4a1e26;color:#ff8fa3}

/* Autocomplétion */
.suggestions{position:absolute;top:100%;left:0;right:0;background:var(--panel);border:1px solid var(--bord);border-radius:10px;margin-top:4px;max-height:220px;overflow-y:auto;z-index:5;display:none}
.suggestions.visible{display:block}
.suggestion{padding:10px 14px;font-size:.875rem;cursor:pointer}
.suggestion:hover{background:#1c2743}
.apercu-ac{display:none;font-size:.74rem;font-style:italic;color:var(--muted);margin-top:6px;line-height:1.5}

/* Messages */
.erreur{color:var(--err);font-size:.8125rem;min-height:1.2em;max-width:400px;text-align:center;margin-bottom:8px}
.ok-msg{color:var(--ok);font-size:.82rem;min-height:1.2em}
.alerte{display:block;background:#3a2a12;border:1px solid #6a4a1a;color:var(--warn);border-radius:var(--r-m);padding:12px 16px;font-size:.85rem;text-decoration:none}
.lien-bas{margin-top:18px;font-size:.875rem;color:var(--muted)}

/* Progression (wizards) */
.progress{display:flex;gap:6px;margin-bottom:22px}
.progress i{width:26px;height:4px;border-radius:2px;background:var(--bord)}
.progress i.fait{background:var(--ok)}
.progress i.actif{background:var(--accent)}

/* Bulles de conversation */
.msg,.t{padding:10px 14px;border-radius:12px;max-width:88%;font-size:.9375rem;line-height:1.4}
.msg.artisan,.t.moi{align-self:flex-end;background:var(--accent)}
.msg.assistant,.t.ia{align-self:flex-start;background:var(--panel)}

/* Micro rond */
.mic-inline{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--panel);color:var(--ink);font-size:1.1rem;border:1px solid var(--bord)}
.mic-inline.recording{background:var(--err);color:#fff}

/* Héros CTA (grosses tuiles d'action) */
.hero-cta{display:flex;align-items:center;gap:14px;color:#fff;text-decoration:none;border-radius:var(--r-l);padding:18px 20px;font-weight:600}
.hero-cta small{font-weight:400;font-size:.8rem;opacity:.9;display:block}
.hero-vert{background:linear-gradient(135deg,var(--ok),var(--ok-2))}
.hero-bleu{background:linear-gradient(135deg,var(--accent),var(--accent-2))}

/* Compat : ancien header fixe (index) */
.topbar{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:14px 20px;font-size:.8125rem;color:var(--muted)}
.topbar button{background:none;color:var(--accent);padding:4px}