:root{
  --blue:#0e88bd; --blue-dark:#0d3c5a; --ink:#14212c; --muted:#6b7a88;
  --line:#e2e9f0; --bg:#f4f7fb; --card:#fff;
  --hot:#cf8a12; --warm:#e0a94a; --mild:#c9b98a;
  --shadow:0 1px 3px rgba(20,33,44,.08),0 6px 20px rgba(20,33,44,.06);
}
*{box-sizing:border-box}
[hidden]{display:none !important}   /* sinon .gate{display:flex} écrase l'attribut hidden -> le gate reste par-dessus l'app */
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
button{font-family:inherit}
.muted{color:var(--muted)}

/* ---------- gate ---------- */
.gate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#0d3c5a,#0e88bd);padding:24px;z-index:50}
.gate-card{width:100%;max-width:380px;background:#fff;border-radius:18px;padding:28px 24px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);text-align:center}
.gate-card .brand{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.brand-logo{display:block;height:52px;width:auto;max-width:78%;margin:2px auto 12px}
.gate-card h1{font-size:22px;margin:6px 0 4px}
.gate-card p{margin:0 0 18px;font-size:14px}
.gate-card input{width:100%;font-size:17px;padding:14px 16px;border:1px solid var(--line);
  border-radius:12px;margin-bottom:12px;background:#fbfdff}
.gate-card input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,136,189,.18)}
.gate-err{margin-top:12px;color:#c0392b;font-size:14px;font-weight:600}

/* ---------- boutons ---------- */
.btn-primary{width:100%;font-size:17px;font-weight:700;padding:14px 16px;border:none;border-radius:12px;
  background:var(--blue);color:#fff;cursor:pointer}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{font-size:14px;font-weight:600;padding:8px 12px;border:1px solid var(--line);border-radius:10px;
  background:#fff;color:var(--blue-dark);cursor:pointer}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(env(safe-area-inset-top) + 12px) 18px 12px;background:var(--blue-dark);color:#fff}
.top-title{font-size:17px;font-weight:700}
.top-right{display:flex;align-items:center;gap:10px}
.synced{font-size:12px;color:#cfe4f2}

/* ---------- layout ---------- */
.wrap{max-width:820px;margin:0 auto;padding:16px 16px 60px}
.step{margin-bottom:22px}
.step-h{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}

/* ---------- chips (bannières / commettants) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips.small{gap:8px;margin-bottom:14px}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600;
  padding:12px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);
  cursor:pointer;box-shadow:var(--shadow)}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.chip .chip-n{font-size:12px;font-weight:700;color:var(--muted);background:#eef4fa;border-radius:999px;padding:1px 8px}
.chip.on .chip-n{color:#eaf6ff;background:rgba(255,255,255,.18)}
.chip.xs{font-size:13.5px;padding:8px 13px;box-shadow:none}
.chip.xs.on{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}

/* ---------- recherche magasin ---------- */
.search input{width:100%;font-size:18px;padding:15px 18px;border:1px solid var(--line);border-radius:14px;
  background:#fff;box-shadow:var(--shadow)}
.search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,136,189,.16)}
.store-list{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:10px}
.store{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;box-shadow:var(--shadow);cursor:pointer}
.store:active{background:#f0f6fb}
.store-num{font-weight:800;color:var(--blue-dark);min-width:58px}
.store-name{flex:1;font-size:15px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.store-banner{flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--blue-dark);background:#eef4fa;
  border:1px solid var(--line);border-radius:999px;padding:2px 9px;white-space:nowrap}
.store-go{color:var(--muted);font-size:22px;font-weight:700}
.store.muted{grid-column:1/-1;justify-content:center;color:var(--muted);cursor:default}
/* sélecteur de nom (gate) */
.pick-list{list-style:none;margin:10px 0 0;padding:0;max-height:46vh;overflow:auto;border:1px solid var(--line);border-radius:12px;text-align:left}
.pick{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;border-bottom:1px solid var(--line);cursor:pointer;font-size:15px;font-weight:600;color:var(--ink)}
.pick:last-child{border-bottom:none}.pick:active{background:#f0f6fb}
.pick.muted{justify-content:center;color:var(--muted);cursor:default;font-weight:400}
.pick-go{color:var(--muted);font-size:20px;font-weight:700}
.gate-card input{text-align:left}
.btn-link{display:block;width:100%;margin-top:12px;background:none;border:none;color:var(--blue-dark);font-size:14px;font-weight:600;cursor:pointer}

/* ---------- opportunités ---------- */
.opp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.opp-store{font-size:19px;font-weight:800}
.opp-count{font-size:14px;color:var(--muted);margin-top:2px}
.cards{display:grid;grid-template-columns:1fr;gap:10px}
.card{background:var(--card);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow);border-left:6px solid var(--mild)}
.card.warm{border-left-color:var(--warm)}
.card.hot{border-left-color:var(--hot)}
.card-prod{font-size:16px;font-weight:700;line-height:1.25}
.card-meta{font-size:13px;color:var(--muted);margin-top:3px}
.card-gap{display:inline-block;margin-top:7px;font-size:12px;font-weight:700;color:#8a5a00;background:#fdf3e0;
  border:1px solid #f0d9a8;border-radius:6px;padding:2px 9px}
.card-peer{font-size:14px;color:var(--ink);margin-top:8px;line-height:1.4}
.card-peer b{font-weight:800;color:var(--blue-dark)}
.card-codes{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px}
.code{font-size:12px;color:var(--blue-dark);background:#eef4fa;border:1px solid var(--line);border-radius:6px;
  padding:2px 8px;font-variant-numeric:tabular-nums;user-select:all;-webkit-user-select:all}
.code b{font-weight:800}
.card-pct{flex:0 0 auto;text-align:right}
.card-pct b{display:block;font-size:22px;font-weight:800;color:var(--hot);line-height:1}
.card.warm .card-pct b{color:var(--warm)}
.card.mild .card-pct b{color:#a08a55}
.card-pct span{font-size:11.5px;color:var(--muted)}
.empty{padding:40px 16px;text-align:center;color:var(--muted);font-size:16px}
.comm-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:16px;box-shadow:var(--shadow);cursor:pointer;font:inherit;color:var(--ink)}
.comm-row:active{background:#f0f6fb}
.comm-name{flex:1;font-size:16px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comm-meta{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.comm-top{font-size:12px;color:var(--muted)}
.comm-n{font-size:14px;font-weight:800;color:#fff;background:var(--blue);border-radius:999px;min-width:26px;text-align:center;padding:2px 8px}
.comm-go{color:var(--muted);font-size:22px;font-weight:700}
.backbar{grid-column:1/-1;width:100%;text-align:left;background:transparent;border:none;color:var(--blue-dark);
  font-size:15px;font-weight:700;padding:2px 2px 6px;cursor:pointer}

/* ---------- loading ---------- */
.loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(244,247,251,.6);z-index:40}
.spin{width:40px;height:40px;border:4px solid #cfe0ee;border-top-color:var(--blue);border-radius:50%;
  animation:spin 0.7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media (min-width:760px){                         /* iPad paysage : on utilise la largeur */
  .wrap{max-width:1180px;padding:18px 20px 60px}
  .store-list{grid-template-columns:1fr 1fr;gap:12px}
  .cards{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
}
@media (min-width:1100px){
  .store-list{grid-template-columns:1fr 1fr 1fr}
}