/* ==========================================================================
   R.O.S.E.S. — tunnel.css
   Tunnel de sélection style Back Market : une question à la fois, progression.
   ========================================================================== */

/* ── Shell tunnel ─────────────────────────────────────────────────────────── */
.tunnel-shell {
  min-height: calc(100vh - 58px);
  display: flex; flex-direction: column;
  background: var(--c-bg);
}

/* ── Barre de progression ─────────────────────────────────────────────────── */
.tunnel-progress {
  background: #fff;
  border-bottom: 1px solid var(--c-border);
  padding: 0;
  position: sticky; top: 58px; z-index: 10;
}
.tunnel-progress-inner {
  max-width: 640px; margin: 0 auto; padding: 16px 20px;
  display: flex; align-items: center; gap: 14px;
}
.tunnel-back {
  background: none; border: none; cursor: pointer;
  color: var(--c-text-muted); font-size: .82rem;
  display: flex; align-items: center; gap: 4px;
  padding: 0; transition: color var(--tr); flex-shrink: 0;
}
.tunnel-back:hover { color: var(--c-text); }
.tunnel-back svg { width: 14px; height: 14px; }
.tunnel-bar-wrap { flex: 1; height: 3px; background: var(--c-border-soft); }
.tunnel-bar-fill { height: 100%; background: var(--c-brand); transition: width .35s ease; }
.tunnel-step-label { font-size: .75rem; color: var(--c-text-muted); white-space: nowrap; flex-shrink: 0; }

/* ── Page tunnel ──────────────────────────────────────────────────────────── */
.tunnel-page {
  display: none; flex: 1;
  flex-direction: column; align-items: center;
  padding: clamp(32px,5vw,64px) 20px;
}
.tunnel-page.active { display: flex; }

.tunnel-question {
  max-width: 640px; width: 100%;
}
.tunnel-question h2 {
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  font-weight: 700; margin-bottom: 6px; letter-spacing: -.02em;
}
.tunnel-question .sub {
  font-size: .85rem; color: var(--c-text-soft);
  margin-bottom: 24px; line-height: 1.55;
}

/* ── Grille de choix ──────────────────────────────────────────────────────── */
.tunnel-choices {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.tunnel-choices.col-1 { grid-template-columns: 1fr; }
.tunnel-choices.col-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 500px) {
  .tunnel-choices, .tunnel-choices.col-3 { grid-template-columns: 1fr; }
}

.tc {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--c-border);
  background: #fff; cursor: pointer;
  transition: border-color var(--tr), background var(--tr);
  text-align: left; font-family: inherit;
}
.tc:hover { border-color: var(--c-brand-light); background: var(--c-brand-tint); }
.tc.selected { border-color: var(--c-brand); background: var(--c-brand-tint); }
.tc-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-bg-soft); border: 1px solid var(--c-border-soft);
}
.tc-icon svg { width: 18px; height: 18px; color: var(--c-text-soft); }
.tc-body { display: flex; flex-direction: column; gap: 1px; }
.tc-label { font-size: .9rem; font-weight: 600; color: var(--c-text); }
.tc-desc  { font-size: .76rem; color: var(--c-text-muted); line-height: 1.4; }
.tc-price { font-size: .82rem; font-weight: 700; color: var(--c-brand); margin-top: 2px; }

/* Grande carte état (rachat) */
.tc.etat-card {
  flex-direction: column; align-items: flex-start;
  padding: 18px 16px; gap: 8px;
}
.tc.etat-card .tc-label { font-size: .95rem; }
.tc.etat-card .tc-price { font-size: 1rem; font-weight: 700; }

/* Carte marque (juste le nom, propre) */
.tc.marque-card {
  justify-content: center; text-align: center;
  flex-direction: column; padding: 14px;
  gap: 4px;
}
.tc.marque-card .tc-label { font-size: .88rem; }

/* ── Champ recherche dans tunnel ──────────────────────────────────────────── */
.tunnel-search-wrap { position: relative; margin-bottom: 16px; }
.tunnel-search-wrap input {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--c-border);
  background: #fff; font-size: .92rem;
  border-radius: var(--r);
  transition: border-color var(--tr);
}
.tunnel-search-wrap input:focus { outline: none; border-color: var(--c-brand-light); }
.tunnel-search-drop {
  display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
  background: #fff; border: 1.5px solid var(--c-brand-light);
  border-top: none; max-height: 240px; overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.tunnel-search-item {
  padding: 10px 14px; font-size: .87rem; cursor: pointer;
  border-bottom: 1px solid var(--c-border-soft); color: var(--c-text-soft);
  transition: background var(--tr); display: flex; align-items: center; justify-content: space-between;
}
.tunnel-search-item:hover { background: var(--c-brand-tint); color: var(--c-text); }
.tunnel-search-item:last-child { border-bottom: none; }

/* ── Récapitulatif bas de page ────────────────────────────────────────────── */
.tunnel-recap {
  max-width: 640px; width: 100%;
  background: var(--c-bg-soft); border: 1px solid var(--c-border);
  padding: 12px 16px; margin-top: 20px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: .83rem; gap: 12px; flex-wrap: wrap;
}
.tunnel-recap-items { display: flex; gap: 12px; flex-wrap: wrap; }
.tunnel-recap-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .78rem; color: var(--c-text-soft);
}
.tunnel-recap-chip strong { color: var(--c-text); }

/* ── CTA continuer ────────────────────────────────────────────────────────── */
.tunnel-cta {
  max-width: 640px; width: 100%; margin-top: 20px;
  display: flex; gap: 10px; align-items: center;
}

/* ── Formulaire contact (dernière étape) ──────────────────────────────────── */
.tunnel-form {
  max-width: 640px; width: 100%;
}
.tunnel-form .tf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .tunnel-form .tf-row { grid-template-columns: 1fr; } }
.tunnel-form .tf-group { display: flex; flex-direction: column; gap: 5px; }
.tunnel-form label { font-size: .78rem; font-weight: 600; color: var(--c-text); }
.tunnel-form input, .tunnel-form select, .tunnel-form textarea {
  padding: 10px 12px; border: 1.5px solid var(--c-border);
  background: #fff; font-size: .88rem; color: var(--c-text);
  border-radius: var(--r); width: 100%;
  transition: border-color var(--tr);
}
.tunnel-form input:focus, .tunnel-form select:focus, .tunnel-form textarea:focus {
  outline: none; border-color: var(--c-brand-light);
}

/* ── Résumé final ─────────────────────────────────────────────────────────── */
.tunnel-summary {
  border: 1px solid var(--c-border); background: #fff;
  margin-bottom: 20px;
}
.tunnel-summary-head {
  padding: 10px 14px; background: var(--c-bg-soft);
  border-bottom: 1px solid var(--c-border);
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--c-text-muted);
}
.tunnel-summary-line {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--c-border-soft);
  font-size: .86rem;
}
.tunnel-summary-line:last-child { border-bottom: none; }
.tunnel-summary-line span:first-child { color: var(--c-text-soft); }
.tunnel-summary-line span:last-child  { font-weight: 600; color: var(--c-text); }
.tunnel-summary-total {
  padding: 12px 14px; border-top: 1px solid var(--c-border);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--c-bg-soft);
}
.tunnel-summary-total span:first-child { font-weight: 600; }
.tunnel-summary-total .price { font-size: 1.25rem; font-weight: 800; color: var(--c-brand); }