*{box-sizing:border-box;margin:0;padding:0}
:root{
  --accent:#2CB29B;
  --ink:#1d2733;
  --muted:#6b7785;
  --line:#e7ebf0;
  --bg:#f4f6f9;
  --radius:16px;
}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:20px 16px 40px;
}
.card{
  width:100%;
  max-width:480px;
  background:#fff;
  border-radius:var(--radius);
  box-shadow:0 6px 30px rgba(20,40,60,.08);
  overflow:hidden;
}
.head{
  text-align:center;
  padding:28px 24px 12px;
}
.logo{max-height:56px;width:auto}
.logo-txt{
  font-size:22px;font-weight:800;letter-spacing:-.3px;color:var(--ink);
}
.subtitle{color:var(--muted);font-size:14px;margin-top:6px}
#steps{padding:8px 24px 24px}

/* Étapes */
.step{display:none;animation:fade .25s ease}
.step.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.q{font-size:17px;font-weight:700;margin:18px 0 4px}
.q-sub{font-size:13px;color:var(--muted);margin-bottom:14px}

/* Étoiles */
.stars{display:flex;gap:8px;justify-content:center;margin:10px 0 6px}
.star{font-size:40px;cursor:pointer;color:#d7dde4;transition:transform .1s,color .1s;line-height:1}
.star:hover{transform:scale(1.12)}
.star.on{color:#ffb400}
.stars-label{text-align:center;font-size:13px;color:var(--muted);min-height:18px}

/* Choix (services / puces) */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0}
.chip{
  border:1.5px solid var(--line);border-radius:999px;padding:9px 15px;
  font-size:14px;cursor:pointer;background:#fff;transition:.15s;user-select:none;
}
.chip:hover{border-color:var(--accent)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}

textarea{
  width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px;
  font:inherit;resize:vertical;min-height:70px;margin-top:4px;
}
textarea:focus,input:focus{outline:none;border-color:var(--accent)}
input.text{
  width:100%;border:1.5px solid var(--line);border-radius:12px;padding:11px 12px;
  font:inherit;margin-top:4px;
}

/* Boutons */
.btn{
  display:block;width:100%;border:none;border-radius:12px;padding:14px;
  font-size:16px;font-weight:700;cursor:pointer;transition:.15s;margin-top:16px;
}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(.95)}
.btn.primary:disabled{opacity:.5;cursor:default}
.btn.ghost{background:transparent;color:var(--muted);font-weight:600;padding:10px;margin-top:8px}
.btn.ghost:hover{color:var(--ink)}
.row{display:flex;gap:10px}
.row .btn{margin-top:16px}

/* Résultat */
.review-box{
  border:1.5px solid var(--line);border-radius:12px;padding:14px;
  font-size:15.5px;line-height:1.6;min-height:120px;margin-top:6px;background:#fbfcfd;
}
.review-box:focus{outline:none;border-color:var(--accent);background:#fff}
.hint{font-size:12.5px;color:var(--muted);margin-top:10px;text-align:center}

/* Loader */
.loader{text-align:center;padding:30px 0}
.spin{
  width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 12px;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Écran final */
.done{text-align:center;padding:10px 0}
.done .big{font-size:44px}
.done h2{font-size:20px;margin:8px 0}
.done p{color:var(--muted);font-size:14.5px}
.copied{
  display:inline-block;background:#e9f8f4;color:#0d7d68;border-radius:8px;
  padding:4px 10px;font-size:13px;font-weight:600;margin-top:10px;opacity:0;transition:.2s;
}
.copied.show{opacity:1}

.foot{
  text-align:center;padding:14px;border-top:1px solid var(--line);
  color:var(--muted);font-size:12px;
}
.foot a{color:inherit;text-decoration:none}
.foot a:hover strong{text-decoration:underline}
.foot strong{color:var(--accent)}

/* Finition */
.card{border:1px solid var(--line)}