:root{--gris:#9aa0a6;--bleu:#0a66c2;--vert:#1a8f3c;--violet:#7b3fbf;--or:#d4900a;--bg:#f4f5f7}
*{box-sizing:border-box}
body{font-family:-apple-system,Segoe UI,Roboto,sans-serif;max-width:1080px;margin:0 auto;
  padding:0 14px 60px;color:#1f2329;background:var(--bg)}
.center{text-align:center}.muted{color:#80868b}
/* AUTH */
body.auth{display:flex;min-height:100vh;align-items:center;justify-content:center;background:#0a66c2}
.authbox{background:#fff;max-width:380px;width:100%;padding:28px 26px;border-radius:12px;
  box-shadow:0 8px 30px rgba(0,0,0,.2)}
.authbox h1{margin:0 0 4px;font-size:20px}
.authbox label{display:block;font-size:12px;color:#5f6368;margin:14px 0 5px;font-weight:600}
.authbox input{width:100%;padding:10px 12px;border:1px solid #d0d3d7;border-radius:7px;font-size:15px}
.authbox input:disabled{background:#f1f2f4;color:#80868b}
.authbox button{width:100%;margin-top:20px;padding:11px;background:var(--bleu);color:#fff;border:0;
  border-radius:7px;font-size:15px;font-weight:600;cursor:pointer}
.authbox .err{background:#fde7e7;border:1px solid #f3b0b0;color:#a31515;padding:9px 12px;
  border-radius:7px;font-size:13px;margin-top:12px}
/* HEADER */
header{position:sticky;top:0;background:var(--bg);padding:12px 0 9px;border-bottom:1px solid #dadce0;z-index:20}
.hrow{display:flex;justify-content:space-between;align-items:center}
.hrow h1{margin:0;font-size:20px}
.hactions{display:flex;align-items:center;gap:10px}
.logout{font-size:13px;color:#5f6368;text-decoration:none}.logout:hover{text-decoration:underline}
.syncdot{width:9px;height:9px;border-radius:50%;background:#d0d3d7;display:inline-block}
.syncdot.ok{background:var(--vert)}
.lotlbl{font-size:12px;color:#80868b;margin:5px 0 9px}
.stats{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:13px}
.pill{background:#fff;border:1px solid #dadce0;border-radius:20px;padding:4px 11px;cursor:pointer;user-select:none;white-space:nowrap}
.pill.active{background:var(--bleu);color:#fff;border-color:var(--bleu)}
.pill.action{border-color:var(--or);color:var(--or);font-weight:600}
.pill.action.active{background:var(--or);color:#fff}
.pill b{margin-left:4px}
.pill .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
.accept{margin-left:auto;font-weight:600}.accept.warn{color:#c5221f}
.tools{margin-top:9px;display:flex;gap:8px;flex-wrap:wrap}
.tool{padding:6px 12px;font-size:13px;border:1px solid var(--bleu);background:#fff;color:var(--bleu);border-radius:5px;cursor:pointer}
.tool.primary{background:var(--bleu);color:#fff}
.banner{background:#e7f6ec;border:1px solid #abe0bd;color:#11652f;padding:10px 14px;border-radius:7px;margin:12px 0;font-size:13.5px;display:none}
.banner.show{display:block}
/* CARDS */
.card{background:#fff;border:1px solid #e3e5e8;border-radius:10px;padding:15px 18px;margin:13px 0;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.chead h3{margin:0;font-size:16px}
.tags{margin-top:4px}
.tag{display:inline-block;font-size:11px;padding:2px 7px;border-radius:4px;background:#eef0f3;color:#444;margin-right:5px;margin-top:3px}
.tag.P{background:#fde7a3;color:#7a5800;font-weight:600}
.action{margin:12px 0 10px}
.todo{font-size:13.5px;color:#444;margin-bottom:8px}
.wait{font-size:13px;color:#80868b;margin:8px 0;font-style:italic}
.okc{font-size:13.5px;color:var(--or);font-weight:600;margin:8px 0}
.msg{background:#f7f8fa;border-left:3px solid var(--bleu);padding:11px 13px;border-radius:0 5px 5px 0;font-size:14px;line-height:1.55;white-space:pre-wrap}
.msg.t1{border-left-color:var(--or)}
.msg.ref{opacity:.6;border-left-color:#c0c4c9}
.copy{font-size:12px;padding:5px 11px;background:#fff;color:var(--bleu);border:1px solid var(--bleu);border-radius:5px;cursor:pointer;margin-top:8px}
.copy.ok{background:var(--bleu);color:#fff}
.lk{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-size:14px;font-weight:600;color:#fff;text-decoration:none;background:var(--bleu);padding:9px 14px;border-radius:6px}
.lk.send{background:var(--or)}
.lk.ghost{background:#eaf2fb;color:var(--bleu);border:1px solid #cfe0f5;font-weight:500}
.pipe{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:13px;padding-top:11px;border-top:1px dashed #e3e5e8}
.step{font-size:12px;padding:5px 10px;border-radius:6px;cursor:pointer;border:1px solid #d0d3d7;background:#fff;color:#5f6368;user-select:none}
.step.on{color:#fff;font-weight:600;border-color:transparent}
.step.on.s_invitation_envoyee{background:var(--bleu)}
.step.on.s_accepte{background:var(--vert)}
.step.on.s_message_envoye{background:var(--violet)}
.step.on.s_conversation{background:var(--or)}
.step.on.s_a_contacter{background:var(--gris)}
.stamp{font-size:11px;color:#80868b;margin-left:6px}

/* ===== MOBILE ===== */
@media (max-width:600px){
  body{padding:0 10px 80px}
  header{padding:calc(10px + env(safe-area-inset-top)) 0 8px}
  .hrow h1{font-size:17px}
  .lotlbl{margin:4px 0 7px}
  /* pills : défilement horizontal pour ne pas manger l'écran */
  .stats{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:5px;gap:6px;scrollbar-width:none}
  .stats::-webkit-scrollbar{display:none}
  .pill{padding:6px 12px;font-size:13px}
  .accept{margin-left:6px;flex:0 0 auto}
  /* boutons outils en pleine largeur, gros pour le tactile */
  .tools{gap:6px}
  .tool{flex:1;text-align:center;padding:10px 8px;font-size:13px}
  .card{padding:14px 14px}
  .chead h3{font-size:15.5px}
  /* boutons d'étape et liens : zones tactiles confortables */
  .step{padding:8px 11px;font-size:12.5px}
  .lk{width:100%;justify-content:center;padding:12px;font-size:14.5px;margin-top:12px}
  .copy{padding:8px 14px;font-size:13px}
  .pipe{gap:7px}
}
/* En app installée (plein écran) : un peu d'air en bas pour la barre gestes */
@media (display-mode:standalone){
  body{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
}