/* ============================================================
   INFOSOLUTION — Styles du tunnel de diagnostic
   ============================================================ */

.tunnel-body { background: var(--gray-100); min-height: 100vh; }

/* ── Barre de progression globale ────────────────────────── */
.tunnel-progress-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 4px;
  background: var(--gray-200); z-index: 1000;
}
.tunnel-progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--green-700), var(--green-500));
  border-radius: 0 2px 2px 0;
  transition: width 0.5s cubic-bezier(.4,0,.2,1);
}

/* ── Layout principal ────────────────────────────────────── */
.tunnel-wrapper {
  max-width: 680px; margin: 0 auto;
  padding: 24px 16px 60px; padding-top: 28px;
}
.tunnel-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 28px;
}
.tunnel-etape-label {
  font-size: .8125rem; color: var(--gray-400); font-weight: 500;
}

/* ── Carte centrale ──────────────────────────────────────── */
.tunnel-card {
  background: var(--white); border-radius: var(--radius-xl);
  padding: 40px; box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-200);
}

/* ── Dots d'étapes ───────────────────────────────────────── */
.tunnel-dots {
  display: flex; gap: 8px; justify-content: center;
  flex-wrap: wrap; margin-bottom: 32px;
}
.tunnel-dot {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700;
  background: var(--gray-200); color: var(--gray-400);
  transition: all .25s ease; flex-shrink: 0;
}
.tunnel-dot.active {
  background: var(--green-800); color: var(--white);
  transform: scale(1.15); box-shadow: 0 0 0 4px var(--green-200);
}
.tunnel-dot.done {
  background: var(--green-600); color: var(--white);
}

/* ── Textes de l'étape ───────────────────────────────────── */
.tunnel-etape-titre {
  font-size: 1.5rem; font-weight: 700; color: var(--gray-900);
  text-align: center; margin-bottom: 8px; line-height: 1.25;
}
.tunnel-etape-sous-titre {
  font-size: .9375rem; color: var(--gray-500); text-align: center;
  margin-bottom: 24px; line-height: 1.6; max-width: 480px; margin-left: auto; margin-right: auto;
}
.tunnel-question {
  font-size: 1.0625rem; font-weight: 600; color: var(--gray-800);
  margin-bottom: 20px; text-align: center;
}
.tunnel-multi-hint {
  text-align: center; font-size: .8125rem; color: var(--green-700);
  background: var(--green-100); padding: 6px 14px; border-radius: 50px;
  display: inline-block; margin: 0 auto 16px; display: block;
}

/* ── Options (choix) ─────────────────────────────────────── */
.tunnel-options {
  display: grid; gap: 10px; margin-bottom: 28px;
}
.tunnel-option {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg); cursor: pointer;
  transition: all .18s ease; position: relative;
  user-select: none;
}
.tunnel-option:hover {
  border-color: var(--green-600); background: var(--green-100);
}
.tunnel-option.selected {
  border-color: var(--green-700); background: var(--green-100);
  box-shadow: 0 0 0 3px var(--green-200);
}
.tunnel-option input[type="radio"],
.tunnel-option input[type="checkbox"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.opt-emoji { font-size: 1.375rem; flex-shrink: 0; }
.opt-label { font-size: .9375rem; font-weight: 500; color: var(--gray-800); flex: 1; }
.opt-check {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--gray-300); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; color: transparent;
  transition: all .18s ease;
}
.tunnel-option.selected .opt-check {
  background: var(--green-700); border-color: var(--green-700); color: var(--white);
}

/* Grille 2 colonnes pour les options nombreuses */
.tunnel-options:has(.tunnel-option:nth-child(5)) {
  grid-template-columns: 1fr 1fr;
}

/* ── Actions / Boutons ───────────────────────────────────── */
.tunnel-actions {
  display: flex; gap: 12px; justify-content: flex-end;
  margin-top: 8px;
}
.tunnel-actions .btn { min-width: 140px; justify-content: center; }

/* ── Formulaire contact ──────────────────────────────────── */
.tunnel-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px;
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.form-full { grid-column: 1 / -1; }
.form-group label {
  font-size: .875rem; font-weight: 600; color: var(--gray-700);
}
.form-group .req { color: var(--accent); }
.form-group input {
  padding: 11px 14px; border: 2px solid var(--gray-200);
  border-radius: var(--radius); font-size: .9375rem; font-family: var(--font);
  transition: border-color .18s ease; color: var(--gray-900);
  background: var(--white);
}
.form-group input:focus {
  outline: none; border-color: var(--green-600);
  box-shadow: 0 0 0 3px var(--green-200);
}
.form-group input::placeholder { color: var(--gray-400); }

/* Consentement ── */
.tunnel-consentement {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; background: var(--gray-100); border-radius: var(--radius);
  cursor: pointer; margin-bottom: 12px; font-size: .9rem;
  color: var(--gray-700); line-height: 1.5;
}
.tunnel-consentement input { margin-top: 3px; flex-shrink: 0; accent-color: var(--green-700); }
.tunnel-rgpd {
  text-align: center; font-size: .8125rem; color: var(--gray-400); margin-top: 12px;
}

/* ── Résumé des choix précédents ─────────────────────────── */
.tunnel-resume {
  border-top: 1px solid var(--gray-200); margin-top: 28px; padding-top: 20px;
}
.tunnel-resume-titre {
  font-size: .8125rem; font-weight: 700; color: var(--gray-400);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px;
}
.tunnel-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tunnel-tag {
  background: var(--green-200); color: var(--green-800);
  font-size: .8rem; font-weight: 600; padding: 4px 12px; border-radius: 50px;
}

/* ── Erreur ──────────────────────────────────────────────── */
.tunnel-erreur {
  background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA;
  padding: 12px 16px; border-radius: var(--radius); margin-bottom: 20px;
  font-size: .9375rem; font-weight: 500;
}

/* ── Message motivation bas ──────────────────────────────── */
.tunnel-motivation {
  text-align: center; margin-top: 20px; font-size: .9rem; color: var(--gray-400);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 560px) {
  .tunnel-card { padding: 24px 20px; }
  .tunnel-etape-titre { font-size: 1.25rem; }
  .tunnel-options:has(.tunnel-option:nth-child(5)) { grid-template-columns: 1fr; }
  .tunnel-form-grid { grid-template-columns: 1fr; }
  .form-group.form-full { grid-column: auto; }
  .tunnel-actions { flex-direction: column-reverse; }
  .tunnel-actions .btn { width: 100%; }
}