:root{
  --bg:#ffffff; --ink:#101828; --muted:#667085;
  --brand:#2563eb; --brand-2:#1d4ed8;
  --card:#ffffff; --line:#e5e7eb;
  --success:#16a34a; --warn:#f59e0b; --danger:#ef4444;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:15.5px/1.55 ui-sans-serif,system-ui,Segoe UI,Roboto
}

.container{max-width:1060px;margin:24px auto;padding:0 18px}
@media (max-width:420px){ .container{padding:0 0px} }

/* ---------- Topbar & Stepper ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.brand{font-weight:900;letter-spacing:.3px}

.stepper{display:flex;align-items:center;gap:8px;color:var(--muted);font-weight:700;flex-wrap:wrap}
.stepper .step{display:flex;gap:8px;align-items:center}
.stepper .step span{
  display:inline-grid;place-items:center;width:24px;height:24px;
  border-radius:999px;border:2px solid var(--brand);color:var(--brand);
  font-size:13px;font-weight:800
}
.stepper .step.active{color:var(--ink)}
.stepper .sep{width:56px;height:2px;background:linear-gradient(90deg,#e5e7eb,#f1f5f9);border-radius:2px}
.stepper .step.upcoming { color: var(--muted); }
.stepper .step.active   { color: var(--ink); }
.stepper .step.done     { color: #10b981; }
.stepper .step.done span{ border-color:#10b981; color:#10b981; font-weight:900; }
.stepper .step { font-weight: 500; opacity:.6; }
.stepper .step.active { font-weight: 800; opacity:1; }
.stepper .step.done { opacity:.9; }

/* ---------- Cards / Headings ---------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:10px;margin-top:14px;box-shadow:0 8px 20px rgba(16,24,40,.06)
}
h1{margin:0 0 12px;font-size:22px}
h3{margin:8px 0}

/* ---------- Layout helpers ---------- */
.grid2{display:grid;grid-template-columns:2fr 1fr;gap:16px}
@media (max-width:900px){ .grid2{grid-template-columns:1fr} }

/* ---------- Form fields ---------- */
.field{display:flex;gap:10px;margin-bottom:12px}
.field input{
  flex:1;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:#fff;color:var(--ink);outline:0
}
/* État par défaut : tout sur une seule ligne */
.field.icon-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}
.field.icon-left input{
  flex:1 1 auto;
  min-width:0;
}
.field.icon-left #btnCheck{
  white-space:nowrap; /* évite la coupure du texte du bouton */
}

/* Petit écran : le bouton passe à la ligne et prend 100% */
@media (max-width: 640px){
  .field.icon-left{
    flex-wrap:wrap;
  }
  .field.icon-left .icon{
    order:0;
    margin-bottom:6px;
  }
  .field.icon-left input{
    order:1;
    flex:1 1 100%;
  }
  .field.icon-left #btnCheck{
    order:2;
    flex:0 0 100%;
    width:100%;
    margin-top:8px; /* petit espace avec l’input */
  }
}


.primary{
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  color:#fff;border:0;padding:12px 16px;border-radius:12px;font-weight:800;cursor:pointer
}
.primary:disabled{opacity:.5;cursor:not-allowed}
.ghost{
  background:#fff;border:1px solid var(--line);color:var(--ink);
  padding:10px 12px;border-radius:12px;cursor:pointer
}
.hint{color:var(--muted);font-size:13px;margin-top:6px}

/* boîte d’astuce (step 1) */
.tip{
  background:#f9fafb;border:1px dashed var(--line);border-radius:12px;
  padding:12px;font-size:14px
}

/* ---------- Search list ---------- */
.list{display:grid;gap:10px;margin-top:12px}
.list-bordered .row{border:1px solid var(--line)}
.row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:#fff;cursor:pointer}
.row:hover{background:#f8fafc}
.row .name{font-weight:800}
.row .addr{font-size:13px;color:var(--muted)}
.row img.thumb{width:44px;height:44px;border-radius:10px;object-fit:cover;border:1px solid var(--line)}

/* ---------- Badges / Misc ---------- */
.badge{
  display:inline-block;padding:2px 8px;border-radius:999px;
  background:#eff6ff;color:#1d4ed8;font-weight:700;font-size:12px
}
.help-box{border:1px solid var(--line);border-radius:12px;padding:12px;background:#f9fafb;margin-top:6px}
.good li{list-style:"✓ ";color:var(--success)}
.bad  li{list-style:"✗ ";color:#b42318}

/* ---------- Suggestions & Reco ---------- */
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px;flex-wrap:wrap}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.suggestions-list{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:8px;background:#fff}
.sugg-item{padding:10px;cursor:pointer;border-bottom:1px solid var(--line)}
.sugg-item:hover{background:#f8fafc}

.reco-list{display:grid;gap:8px}
.reco-pill{
  display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);
  border-radius:12px;padding:10px;background:#fff
}
.reco-pill button{
  border:0;background:#eff6ff;color:#1d4ed8;border-radius:10px;padding:8px 10px;font-weight:800;cursor:pointer
}
.reco-pill button:hover{background:#dbeafe}

/* ---------- KPI grid (legacy) ---------- */
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:10px 0 14px}
@media (max-width:640px){ .kpi{grid-template-columns:1fr 1fr} }
.kpi .box{border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center;background:#fff}
.kpi .lbl{font-size:12px;color:var(--muted)}
.kpi .v{font-size:18px;font-weight:900}

/* ---------- Map ---------- */
.map{
  height:520px;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:8px 0;background:#fff
}
@media (max-width:640px){ .map{height:420px} }

/* ---------- Results ---------- */
.result{border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff}
.result-row{padding:10px 0;border-bottom:1px solid var(--line)}
.result-row:last-child{border-bottom:0}

/* ---------- Bars / Stars ---------- */
.bar{height:10px;background:#f3f4f6;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#22c55e,#fbbf24,#ef4444)}
.star{color:#f59e0b;margin-right:1px}
.star.dim{opacity:.25}

/* ---------- Competitors ---------- */
.profile-card{
  display:grid;grid-template-columns:80px 1fr;gap:12px;align-items:center;
  border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff
}
.profile-card img.thumb-lg{width:80px;height:80px;border-radius:12px;object-fit:cover;border:1px solid var(--line)}
.profile-meta{display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:13px}

.hgroup{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;margin-bottom:6px}
.hgroup h4{margin:0;font-size:16px}
.small{font-size:13px;color:var(--muted)}

.hbar-list{display:grid;gap:8px}
.hbar{display:flex;align-items:center;gap:8px}
.hbar .label{flex:0 0 190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar .track{flex:1;height:10px;background:#f3f4f6;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.hbar .fill{height:100%;background:linear-gradient(90deg,#22c55e,#f59e0b);width:0}
.hbar .val{width:52px;text-align:right;font-weight:700}
.hbar.me .label{font-weight:800;color:#111827}
.hbar.me .fill{background:linear-gradient(90deg,#2563eb,#60a5fa)}

.comp-list{display:grid;gap:8px}
.comp-card{
  display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;
  border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:#fff
}
.comp-card img{width:56px;height:56px;border-radius:10px;object-fit:cover;border:1px solid var(--line)}
.comp-card .meta{font-size:12px;color:var(--muted)}
.comp-card .right{font-size:12px;text-align:right}
.comp-card .right .dist{color:var(--muted)}
@media (max-width:520px){ .hbar .label{flex-basis:120px} }
.comp-card.me{ border:2px solid var(--danger); background:#fff7f7; border-radius:12px; }

/* ---------- Skeleton / Toast ---------- */
.skeleton{display:grid;gap:10px}
.sk-row{height:16px;background:linear-gradient(90deg,#f3f4f6,#e5e7eb,#f3f4f6);background-size:200% 100%;animation:sh 1.3s linear infinite;border-radius:8px}
@keyframes sh{0%{background-position:0 0}100%{background-position:-200% 0}}
.skeleton[hidden]{ display:none !important; }

.toast{
  position:fixed;right:14px;bottom:14px;background:#111827;color:#e5edff;
  border:1px solid #0b1220;padding:10px 14px;border-radius:10px;
  box-shadow:0 10px 20px rgba(0,0,0,.25)
}

/* ===================================================================== */
/*                          SUMMARY CARD (clean)                          */
/* ===================================================================== */

.summary-card{
  display:grid;
  grid-template-columns: 96px 1fr auto;
  grid-auto-rows: min-content;
  column-gap:14px;
  row-gap:0;
  align-items:start;
  border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff;margin-bottom:10px;
  overflow: visible;
}

/* --- Rank: bandeau compact en haut --- */
.rank-row{
  grid-column: 1 / -1;
  margin-bottom: 0;
  display:inline-flex; align-items:center; gap:6px;
  flex-wrap: nowrap; white-space: nowrap;
  width: max-content;
  padding: 4px 8px;
  border:1px solid var(--line); border-radius:8px;
  background:#fff; color:#111827;
  font-size:13px; font-weight:800;
  box-shadow:0 6px 14px rgba(16,24,40,.06);
  z-index:1;
}
.rank-row .txt b{ font-weight:900; }
.rank-row.gold   { border-color:#eab308; background:#fef9c3; color:#92400e; }
.rank-row.silver { border-color:#9ca3af; background:#f5f5f5; color:#374151; }
.rank-row.bronze { border-color:#b45309; background:#ffedd5; color:#7c2d12; }
.rank-row.green  { border-color:#16a34a; background:#ecfdf5; color:#065f46; }
.rank-row.red    { border-color:#ef4444; background:#fee2e2; color:#7f1d1d; }

/* --- Photo --- */
.photo-wrap{ grid-column:1; }
.summary-card .photo-wrap img{
  display:block;
  width:100% !important;
  height:auto !important;
  aspect-ratio: 1/1;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--line);
}

/* --- Texte --- */
.summary-main{ grid-column:2; min-width:0; }
.summary-main .title{font-weight:900;font-size:18px;margin-bottom:4px}
.summary-main .addr{ overflow-wrap:anywhere; word-break:break-word; }
.profile-meta{display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:13px}

/* --- KPI stack --- */
.summary-badges{ display:grid; gap:8px; }
.summary-badges.kpi-stack{ grid-template-columns: 1fr; }

.badge-kpi{
  display:block; padding:10px 12px; border:1px solid var(--line);
  border-radius:12px; background:#fff; box-shadow:0 6px 14px rgba(16,24,40,.06);
}
.badge-kpi .row1{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap: nowrap;           /* permet le retour à la ligne si le libellé est long */
}
.badge-kpi .k{
  font-size:12px; color:var(--muted);
  display:inline-flex; align-items:center; gap:6px;
}
.badge-kpi .v{ font-weight:900; font-size:14px; line-height:1; white-space: nowrap; }

.bar.colored{
  height:10px; background:#f3f4f6; border:1px solid var(--line);
  border-radius:999px; overflow:hidden; margin-top:6px;
}
.bar.colored span{ display:block; height:100%; width:0; }
.bar.colored span.ok   { background:#16a34a; }
.bar.colored span.warn { background:#f59e0b; }
.bar.colored span.bad  { background:#ef4444; }
.bar.colored span.info { background: var(--brand); } /* pour “Source” */

/* ---------- Tooltips (icône i) ---------- */
.info.tip{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px;               /* largeur/hauteur FIXES */
  flex:0 0 18px;                         /* n’occupe pas plus */
  border:1px solid var(--line); border-radius:999px;
  font-size:11px; font-weight:800; color:#374151; background:#fff;
  cursor:help;
  padding:0;                              /* évite l’effet “gros bouton” hérité de .tip */
  line-height:1;
}
.info.tip.tip-sm{ width:16px; height:16px; font-size:10px; }

.info.tip::after{
  content: attr(data-tip);
  position:absolute;
  left:50%;
  top: calc(100% + 8px);         /* ↓ sous l’icône */
  transform: translateX(-50%);
  display:block;                  /* <- clé pour le fond multi-ligne */
  width: fit-content;             /* largeur naturelle */
  max-width: 200px;               /* retour à la ligne au-delà */
  min-width: 170px;
  /* (optionnel) min-width: 220px;  largeur mini si tu veux quelque chose de plus “large”) */

  background:#111827;
  color:#fff;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid #0b1220;
  line-height:1.4;
  white-space: normal;
  text-align:left;

  opacity:0; pointer-events:none; transition:opacity .15s ease;
  box-shadow:0 8px 16px rgba(0,0,0,.18);
  z-index:999;
}
.info.tip::before{
  content:"";
  position:absolute;
  left:50%;
  top: calc(100% + 2px);          /* juste sous l’icône */
  transform: translateX(-50%);
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:6px solid #111827; /* triangle qui pointe vers le haut */
  opacity:0; transition:opacity .15s ease;
}
.info.tip:hover::after, .info.tip:hover::before{ opacity:1; }

/* ---------- Responsive Summary Card ---------- */
@media (max-width:640px){
  .summary-card{ grid-template-columns: 72px 1fr; }
}

/* ---------- Attribution ---------- */
.attribution{font-size:12px;color:var(--muted);margin-top:12px;text-align:right}

/* === CTA === */
.cta-card { padding-top: 6px; padding-bottom: 6px; }
.cta-btn{
  display:block; width:100%; text-align:center; text-decoration:none;
  font-weight:900; padding:12px 16px; border-radius:12px; color:#fff;
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  box-shadow:0 8px 20px rgba(16,24,40,.08);
  transition: transform .06s ease, box-shadow .12s ease, filter .12s ease;
}
.cta-btn:hover{ background:linear-gradient(180deg,#f59e0b,#d97706); filter:none; }
.cta-btn:active{ transform: translateY(1px); box-shadow:0 6px 16px rgba(16,24,40,.10); }


/* Bandeau d'appel (lien Pipedrive) cliquable */
.result-footer{
  display:block;
  margin-top:12px;
  padding:14px 16px;
  border:2px solid #bfdbfe;              /* bleu clair */
  border-radius:12px;
  background:#eff6ff;                     /* fond bleu très pâle */
  color:#0b2546;                           /* texte foncé */
  font-weight:900;
  text-decoration:none;
  box-shadow:0 0 0 4px rgba(37,99,235,.08), 0 10px 20px rgba(16,24,40,.06);
}
.result-footer:hover{
  box-shadow:0 0 0 4px rgba(245,158,11,.20), 0 12px 22px rgba(16,24,40,.10);
  filter:brightness(1.02);
}

/* ===== KW Help (collapsible card) ===== */
.kw-help.card{ margin-top:10px; }
.kw-help{ border-left:4px solid var(--brand); }

.kw-help .head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  cursor:pointer; padding:12px 14px; user-select:none;
}
.kw-help .left{ display:flex; align-items:center; gap:10px; min-width:0; }
.kw-help .ic{
  display:grid; place-items:center; width:28px; height:28px; border-radius:999px;
  background:linear-gradient(180deg,var(--brand),var(--brand-2)); color:#fff;
  font-weight:900; box-shadow:0 6px 14px rgba(16,24,40,.10);
}
.kw-help .t{ font-weight:900; }
.kw-help .right{ display:flex; align-items:center; gap:8px; }
.kw-help .toggle{ font-size:13px; font-weight:800; color:var(--brand); }
.kw-help .chev{ transition:transform .15s ease; opacity:.7; }
.kw-help.open .chev{ transform:rotate(180deg); }

.kw-help .body{ display:none; padding:12px 14px 14px; }
.kw-help.open .body{ display:block; }

/* ✅ Les numéros restent *à l’intérieur* de la bordure */
.kw-rules{
  margin:0;
  list-style: decimal inside;          /* << clé : “inside” */
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
}
.kw-rules li{ margin:6px 0; line-height:1.5; }
.kw-rules li::marker{ font-weight:800; color:#111827; } /* marqueurs plus nets */

.kw-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:10px; }
@media(max-width:640px){ .kw-grid{ grid-template-columns:1fr; } }

.kw-col{ border:1px solid var(--line); border-radius:12px; background:#fff; padding:12px; }
.kw-col h5{ margin:0 0 6px; font-size:14px; }
.kw-col ul{ margin:0; padding:0; list-style:none; display:grid; gap:6px; }
.kw-col li{ display:flex; align-items:flex-start; }

.kw-col ul.good li::before{ content:"✓"; color:var(--success); font-weight:900; margin-right:8px; }
.kw-col ul.bad  li::before{ content:"⚠"; color:#b42318; font-weight:900; margin-right:8px; }