:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --text:#0D4565;
  --muted:#6b7280;
  --line:#e5e7eb;
  --blue:#45C1C3;
  --shadow: 0 10px 30px rgba(15,23,42,0.08);
  --radius: 18px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.q-wrap{
  width: min(980px, 92vw);
  margin: 0 auto;
  padding: 26px 0 70px;
}

/* Header */
.q-header{
  display:flex;
  justify-content:center;
  padding: 10px 0 24px;
}

.q-logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
  font-weight:800;
}
.q-logo img{ width:34px; height:34px; object-fit:contain; }

/* Stepper */
.q-stepper{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  margin-bottom: 28px;
}

.q-step{
  text-align:center;
  min-width: 70px;
  color: #94a3b8;
  font-weight:700;
}
.q-num{
  display:inline-block;
  font-size: 22px;
  margin-bottom: 6px;
}
.q-label{
  display:block;
  font-size: 14px;
}

.q-line{
  height: 2px;
  width: 140px;
  background: #dbeafe;
  border-radius: 999px;
}

.q-step.is-active{
  color: var(--blue);
}
.q-step.is-active .q-num{
  color: var(--blue);
}

/* Card question */
.q-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 34px;
}

.q-title{
  margin: 0 0 10px;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1;
  color: #111827;
}

.q-desc{
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.6;
}

/* Progress */
.q-progress{
  display:flex;
  align-items:center;
  gap: 14px;
  margin: 10px 0 22px;
}
.q-bar{
  flex:1;
  height: 8px;
  background: #e5efff;
  border-radius: 999px;
  overflow:hidden;
}
.q-fill{
  display:block;
  height:100%;
  width: 0%;
  background: var(--blue);
  border-radius: 999px;
  transition: width .2s ease;
}
.q-pct{
  min-width: 44px;
  font-weight:700;
  color: #64748b;
}

/* Choices */
.q-choices{
  display:grid;
  gap: 14px;
  margin-top: 8px;
}

.choice{
  width:100%;
  padding: 18px 18px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #f9fafb;
  font: inherit;
  font-weight: 700;
  text-align:left;
  cursor:pointer;
  transition: border .12s ease, background .12s ease, transform .06s ease;
}
.choice:hover{ border-color: #c7d2fe; background:#ffffff; }
.choice:active{ transform: translateY(1px); }
.choice.is-selected{
  border-color: var(--blue);
  background: #eef4ff;
}

/* Actions */
.q-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  margin-top: 22px;
}

.q-btn{
  border: none;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 800;
  cursor:pointer;
}

.q-btn-primary{
  background: var(--blue);
  color:#fff;
}
.q-btn-primary:disabled{
  background:#94a3b8;
  cursor:not-allowed;
}

.q-btn-secondary{
  background: transparent;
  border: 1px solid var(--line);
  color: #111827;
}

/* Responsive */
@media (max-width: 720px){
  .q-card{ padding: 22px; }
  .q-line{ width: 60px; }
}
/* ===== Étape 3 : Cal.com ===== */
.q-cal{
  margin-top: 10px;
}

/* zone du calendrier */
.cal-inline{
  width: 100%;
  min-height: 760px; /* ajuste si besoin */
  border-radius: 16px;
  overflow: hidden;
}

/* Sur mobile, un peu plus haut */
@media (max-width: 720px){
  .cal-inline{ min-height: 860px; }
}