/* ===================================================================
   /css/devis/devis.css — chat aéré, bulles BD, espacements UNIFORMES
   + chips: apparition différée & stagger
   + progression: gérée a posteriori par JS (pas de modif CSS ici)
   =================================================================== */

:root{
  --primary: var(--color-primary, #3ab396);

  --primary-08: rgba(58,179,150,.08);
  --primary-12: rgba(58,179,150,.12);

  --chat-green: #ecf8f4;
  --chat-green-border: #d2efe5;

  --chat-blue: #eef4ff;
  --chat-blue-border: #d7e6ff;

  --danger-bg: #fff4f3;
  --danger-bd: #f0b8b3;
  --danger-tx: #8a221a;

  --muted: #6b7280;
  --soft-border: #ebedf0;
  --lift-shadow: 0 12px 28px rgba(16,24,40,.10), 0 3px 10px rgba(16,24,40,.07);

  --stack: 24px; /* rythme vertical unique */
}

/* ---------- HERO slab ---------- */
.devis-hero-slab{
  position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw;
  background: linear-gradient(180deg, var(--primary-08) 0%, rgba(255,255,255,0) 70%);
}
.devis-hero{ max-width:1100px; margin:0 auto; padding:40px 16px 24px; text-align:center; }
.devis-h1{ font-size:clamp(2.2rem,3.6vw,3.2rem); line-height:1.15; font-weight:800; margin:2px auto 18px; }

/* KPIs */
.kpis{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px; padding:0; margin:0; }
.kpi{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.95rem; color:#48525c;
  background: rgba(58,179,150,.10);
  border:1px solid rgba(58,179,150,.20);
  border-radius:999px; padding:8px 12px;
}
.kpi .ico{ width:12px; height:12px; display:block; }

/* ---------- Progression ---------- */
.devis-header{ padding:10px 0 0; }
.progress-card{ max-width:1100px; margin:0 auto; padding:0 16px 10px; position:relative; }

.progress-row{ display:flex; align-items:center; gap:12px; }
.progress-row .progress__bar{ flex:3 1 0; }
.progress-row .progress__step{ flex:1 1 0; text-align:right; }

.progress__bar{ height:12px; border-radius:999px; overflow:hidden; background:#e9eff2; }
.progress__fill{ display:block; height:100%; width:0%; background: var(--primary); transition: width .4s ease; }

.progress__step{
  background:#fff; border:1px solid var(--soft-border);
  box-shadow: 0 2px 6px rgba(16,24,40,.05);
  color:#0f1a28; font-weight:600; font-size:.9rem;
  padding:4px 10px; border-radius:999px; white-space:nowrap;
}
.progress__meta{ position:absolute; right:16px; top:-28px; }
@media (max-width:640px){
  .progress-row{ flex-direction:column; align-items:stretch; gap:8px; }
  .progress__step{ text-align:center; }
  .progress__meta{ position:static; margin-top:8px; }
}

/* ---------- Cadre de chat ---------- */
.chat{ padding: 8px 0 0; }
.chat-card{ max-width:1100px; margin:0 auto 40px; padding:0 16px; }
.chat-scroller{
  background:#fff; border:1px solid var(--soft-border);
  border-radius:18px; box-shadow: var(--lift-shadow);
  padding: 26px;
  height: clamp(400px, 60vh, 640px);
  overflow: auto; scroll-behavior: smooth;
}

/* Flux + rythmique */
#chatStream, #activeStep{ display:flex; flex-direction:column; gap:var(--stack); }
#activeStep{ margin-top: var(--stack); }

.qa-wrap{ display:flex; flex-direction:column; align-items:flex-start; }
.qa-wrap > * + *{ margin-top: var(--stack); }
.qa-wrap > .quick-choices,
.qa-wrap > .choices-grid{ margin-top: var(--stack) !important; }

/* ---------- Bulles ---------- */
.bubble{
  display:inline-block; position:relative; max-width:720px;
  border-radius:18px; padding:14px 16px; line-height:1.55;
  border:1px solid transparent; background:#fff; box-shadow: var(--lift-shadow);
}
@media (max-width:640px){ .bubble{ max-width:100%; } }
.bubble.question-bubble{ max-width:560px; }

.bubble--assistant{ align-self:flex-start; background: var(--chat-green); border-color: var(--chat-green-border); }
.bubble--assistant::after{
  content:""; position:absolute; left:-8px; top:14px; width:0; height:0;
  border-top:8px solid transparent; border-bottom:8px solid transparent; border-right:8px solid var(--chat-green);
}
.bubble--user{ align-self:flex-end; background: var(--chat-blue); border-color: var(--chat-blue-border); }
.bubble--user::after{
  content:""; position:absolute; right:-8px; top:14px; width:0; height:0;
  border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:8px solid var(--chat-blue);
}
.bubble--user.is-danger{ background: var(--danger-bg); border-color: var(--danger-bd); color: var(--danger-tx); }
.bubble--user.is-danger::after{ border-left-color: var(--danger-bg); }

@keyframes popIn{ 0%{transform:scale(.96); opacity:0} 100%{transform:scale(1); opacity:1} }
.bubble--pop{ animation: popIn .18s ease-out; }

/* Saisie… */
.typing{ display:inline-flex; align-items:center; margin-left:8px; gap:3px; }
.typing i{ width:6px; height:6px; border-radius:50%; background:#b8c1cc; animation: dot 1.1s infinite ease-in-out; }
.typing i:nth-child(2){ animation-delay:.15s; } .typing i:nth-child(3){ animation-delay:.3s; }
@keyframes dot{ 0%,80%,100%{opacity:.2} 40%{opacity:1} }
.question{ font-weight:600; }

/* ---------- Choix (chips) : apparition différée & stagger ---------- */
.quick-choices{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:0; }
.chip{
  appearance:none; border:1px solid #e5e7eb; background:#fff;
  border-radius:999px; padding:.65rem 1rem; font:inherit; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
  opacity:0; transform: translateY(4px) scale(.98);
}
.chip.reveal{ animation: chipIn .28s ease-out calc(var(--i) * 80ms) both; }
@keyframes chipIn{ from{opacity:0; transform:translateY(4px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)} }
.chip:hover{ transform: translateY(-1px); box-shadow:0 3px 10px rgba(0,0,0,.05); border-color:#d9dee4; }
.chip:active{ transform: translateY(0); box-shadow:none; }
.chip svg{ width:16px; height:16px; margin-right:.45rem; vertical-align:-3px; }
.chip--danger{ border-color:var(--danger-bd); background:var(--danger-bg); color:#b42318; }
.chip--danger:hover{ border-color:#ea9b93; }

/* ---------- CTA appel ---------- */
.btn-call{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--primary); color:#fff; text-decoration:none; font-weight:600;
  border-radius:999px; padding:.55rem 1rem; box-shadow:0 6px 16px rgba(58,179,150,.25);
  align-self:center; width:max-content;
}
.btn-call svg{ width:18px; height:18px; }
@keyframes softPop{ 0%{transform:scale(.92); opacity:0} 60%{transform:scale(1.03)} 100%{transform:scale(1); opacity:1} }
.btn-call.pop{ animation: softPop .32s ease-out; }
@keyframes pulseSoftLoop{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.02)} }
.btn-call.pulse{ animation: pulseSoftLoop 4s ease-in-out infinite; }
@keyframes callAppear{ 0%{opacity:0; transform:translateY(4px)} 100%{opacity:1; transform:translateY(0)} }
.btn-call.appear{ animation: callAppear .55s ease-out; }
.btn-call:hover{ transform: translateY(-1px) scale(1.02); box-shadow:0 10px 24px rgba(58,179,150,.28); }

/* ---------- Services (cartes) ---------- */
.choices-grid{ --cols:3; display:flex; flex-wrap:wrap; justify-content:center; gap:16px 16px; margin-top:0; }
.choice-card{
  flex: 1 1 calc((100% - (var(--cols) - 1) * 16px) / var(--cols));
  max-width:340px; min-width:220px;
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid rgba(58,179,150,.22);
  border-radius:14px; padding:12px 14px; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
  opacity:0; transform:scale(.9);
}
.choice-card:hover{ transform: translateY(-1px); box-shadow:0 8px 20px rgba(16,24,40,.06); border-color:rgba(58,179,150,.34); }
.choices-grid .choice-card:nth-child(even){ border-color: rgba(58,179,150,.14); }
.choice-icon img{ width:34px; height:auto; display:block; }
.choice-title{ font-weight:600; }
@keyframes cardPop{ 0%{transform:scale(.9); opacity:0} 60%{transform:scale(1.06)} 100%{transform:scale(1); opacity:1} }
.choice-card.reveal{ animation: cardPop .56s ease-out calc(var(--i) * 120ms) both; }

@media (max-width:920px){ .choices-grid{ --cols:2; } }
@media (max-width:560px){ .choices-grid{ --cols:1; } }

/* ---------- Réassurance ---------- */
.devis-reassurance{ max-width:1100px; margin: 6px auto 46px; padding: 0 16px; }
.reassurance-list{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 18px; padding:0; margin:0; color:var(--muted); }
.reassurance-list li{ position:relative; padding-left:22px; white-space:nowrap; }
.reassurance-list li::before{
  content:""; position:absolute; left:0; top:5px; width:14px; height:14px; border-radius:50%; background: var(--primary);
  -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M20 7l-9 9-5-5' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M20 7l-9 9-5-5' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Call FAB (mobile) ---------- */
.call-fab{
  position:fixed; left:14px; bottom:18px; width:48px; height:48px; border-radius:999px;
  display:grid; place-items:center; background:var(--primary); color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.18); z-index:30;
}
@media (min-width: 1024px){ .call-fab{ display:none; } }

/* ---------- Inputs & Textarea ---------- */
.input-group{
  display:flex; align-items:flex-end; gap:8px; width:100%; max-width:560px;
  animation: popIn .2s ease-out;
}
.user-input{
  flex:1; background:#fff; border:1px solid #d1d5db; border-radius:12px;
  padding:12px 14px; font-family:inherit; font-size:1rem; line-height:1.5;
  color:#111827; transition: border-color .15s, box-shadow .15s;
  resize:none; /* pour textarea */
}
.user-input:focus{
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-12);
}
.user-input::placeholder{ color:#9ca3af; }

/* Bouton envoyer (flèche) */
.btn-send{
  flex:0 0 48px; height:48px; border-radius:12px; border:none;
  background:var(--primary); color:#fff; cursor:pointer;
  display:grid; place-items:center; transition: transform .1s, background .15s;
}
.btn-send:hover{ background:#2ea085; transform:scale(1.05); }
.btn-send:active{ transform:scale(0.95); }
.btn-send svg{ width:24px; height:24px; }

/* Bouton Passer */
.btn-skip{
  background:transparent; border:1px solid #e5e7eb; color:#6b7280;
  border-radius:999px; padding:8px 16px; font-size:0.9rem; cursor:pointer;
  transition:all .2s; margin-left:8px; height:48px;
}
.btn-skip:hover{ background:#f3f4f6; color:#374151; border-color:#d1d5db; }

/* Shake animation pour erreur */
.shake{ animation: shake .4s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake{ 10%,90%{transform:translate3d(-1px,0,0)} 20%,80%{transform:translate3d(2px,0,0)} 30%,50%,70%{transform:translate3d(-4px,0,0)} 40%,60%{transform:translate3d(4px,0,0)} }

/* ---------- File Upload ---------- */
.upload-box{
  background:#fff; border:2px dashed #d1d5db; border-radius:16px;
  padding:20px; text-align:center; width:100%; max-width:400px;
  transition: border-color .2s;
}
.upload-box:hover{ border-color:var(--primary); }

.upload-label{
  display:inline-block; background:var(--chat-green); color:var(--primary);
  font-weight:600; padding:10px 20px; border-radius:999px; cursor:pointer;
  transition: background .2s;
}
.upload-label:hover{ background:#d2efe5; }

.upload-preview{ margin-top:12px; font-size:0.9rem; color:#4b5563; }

.actions-row{
  display:flex; justify-content:flex-end; gap:10px; margin-top:16px; width:100%;
}

/* Bouton Valider (Multi-select & File) */
.btn-validate{
  background:var(--primary); color:#fff; border:none;
  padding:10px 24px; border-radius:999px; font-weight:600; cursor:pointer;
  transition: transform .1s, background .15s, opacity .2s;
}
.btn-validate:hover:not(:disabled){ background:#2ea085; transform:translateY(-1px); }
.btn-validate:disabled{ opacity:0.5; cursor:not-allowed; background:#9ca3af; }

/* Selected state for chips */
.chip.selected{
  background:var(--primary); color:#fff; border-color:var(--primary);
  box-shadow:0 4px 12px var(--primary-12);
}