/* ============================================================================
   /formulaire/ et /formulaire-studio/ — feuille de style du funnel Greenkub.

   PORT QUASI VERBATIM de style.css du dépôt greenkub-formulaire-principal
   (2 119 lignes). Feuille VENDORÉE servie depuis public/, comme celle du funnel
   maison et celle de la LP maison : elle garde ses propres tokens (--green,
   --pink, --sidebar-bg…), ses ombres et ses rayons littéraux, ce que le garde-fou
   DA de check.mjs §5 interdirait dans src/, et son propre reset universel.

   ISOLATION — il n'y a rien à isoler, et c'est voulu : cette feuille n'est
   chargée QUE par les deux pages du funnel, et le gabarit FormulaireLayout ne
   charge PAS src/styles/tokens.css. Aucun reset du site (body, h1, p, a, button,
   .gk-*) n'entre donc dans ces pages, et le reset universel ci-dessous ne sort
   pas des deux pages du funnel. C'est ce qui permet le verbatim.

   DEUX SEULS ÉCARTS À LA SOURCE :
     1. la police du body : 'Mulish' ajoutée en tête de la pile, devant 'Avenir'
        que la source déclarait sans jamais la charger (elle tombait donc sur la
        police système). Mulish est auto-hébergée par le site (fonts.css) ;
     2. la règle `#frame { display:flex!important }` en fin de fichier : elle
        vivait dans une balise <style> au milieu du markup de l'écran 16, ce qui
        est le seul endroit du markup qui contenait des accolades — or Astro les
        interprète comme une expression. Même règle, même effet, autre foyer.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green: #41b883;
  --green-light: #a8dcc5;
  --pink: #ff77a9;
  --yellow: #fedd63;
  --yellow-bg: #fef7de;
  --sidebar-bg: #f1f1f1;
  --text-dark: #0a0a0a;
  --text-medium: #2f2f2f;
  --text-muted: #5d5d5d;
  --text-light: #7e7e7e;
  --border: #e0e0e0;
  --border-light: #f1f1f1;
  --card-shadow: 0 3px 10px rgba(53,53,53,0.15);
}

/* Formulaire studio (JS : isStudio → classe sur <html>) */
html.is-studio-form .project-cards .project-card[data-value="maison"] {
  display: none !important;
}

/* ─── ANIMATIONS ─── */
@keyframes selectPulse {
  0%, 100% { box-shadow: var(--card-shadow); }
  50% { box-shadow: 0 6px 16px rgba(65, 184, 131, 0.2); }
}

@keyframes fadeInStep {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOutStep {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes stepTitleIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

body {
  font-family: 'Mulish', 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  background: white;
  height: 100vh;
  display: flex;
  overflow: hidden;
}

/* Conteneur racine : ligne sidebar + main (desktop), hauteur fluide sur mobile dans la media query ≤1050px */
.app-shell {
  display: flex;
  width: 100%;
  flex: 1;
  min-height: 0;
  height: 100vh;
  overflow: hidden;
}

/* ─── SIDEBAR ─── */
.sidebar {
  width: 430px;
  min-width: 430px;
  background: var(--sidebar-bg);
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  align-items: center;
}

.sidebar-logo {
  padding: 28px 35px 20px;
  flex-shrink: 0;
  z-index: 2;
}

.logo img { height: 55px; width: auto; display: block; }

.sidebar-content {
  flex: 1;
  display: flex;
  position: relative;
  overflow: hidden;
  justify-content: center;
  align-items: center;
}

.sidebar-state { display: none; flex-direction: column; flex: 1; }
.sidebar-state.active {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sidebar-states {
  height: 490px;
  display: flex;
  align-content: flex-start;
  align-items: flex-start;
}

/* Sidebar product image area */
.sidebar-img {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 0 0 20px;
  position: relative;
  flex-direction: column;
}

.sidebar-img img {
  max-width: 100%;
  object-fit: contain;
}

/* CSS Construction stages */
.product-stage {
  width: 260px;
  height: 200px;
  position: relative;
}
.stage-frame {
  background: linear-gradient(135deg, #c8b89a 0%, #b8a080 40%, #d4c0a0 100%);
  border-radius: 12px;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.stage-frame::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 3px solid rgba(255,255,255,0.3);
  border-radius: 8px;
}
.stage-frame::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30%;
  background: rgba(0,0,0,0.1);
}

.sidebar-tip {
  padding: 16px 30px 24px;
  font-size: 17px;
  color: var(--text-light);
  text-align: center;
  line-height: 1.5;
  flex-shrink: 0;
}
.sidebar-tip strong {
  display: block;
  color: var(--text-medium);
  font-weight: 800;
  font-size: 17px;
  margin-bottom: 3px;
}

/* Entrée latérale + léger scale (le step reste en translateY — effet distinct) */
@keyframes sidebar-tip-enter {
  from {
    opacity: 0;
    transform: translateX(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.sidebar-state.active .sidebar-tip {
  animation: sidebar-tip-enter 0.52s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.16s;
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-state.active .sidebar-tip {
    animation: none;
  }
}

/* Intro sidebar */
.intro-tagline {
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  color: var(--text-dark);
  line-height: 1.4;
  padding: 0 40px 60px;
}
.intro-video {
  display: block;
  width: 300px;
  height: auto;
  margin: 0 0 20px;
  border-radius: 16px;
  object-fit: cover;
  background: none;
}

/* Stats card */
.stats-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
  width: 340px;
}
.stats-row {
  display: flex;
  align-items: stretch;
  position: relative;
}
.stat-item { flex: 1; padding: 18px 16px; }
.stat-item + .stat-item { border-left: 1px solid var(--border); }
.stat-value { font-size: 24px; font-weight: 900; color: var(--text-medium); line-height: 1.2; }
.stat-label { color: var(--text-light); font-size: 15px; }
.stats-trust { border-top: 1px solid var(--border); padding: 16px 16px; }
.trust-title { font-weight: 800; font-size: 16px; color: var(--text-medium); margin-bottom: 3px; }
.trust-meta { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-light); flex-wrap: wrap; }
.stars { display: flex; gap: 1px; }
.star { width: 13px; height: 13px; background: #00b67a; display: inline-flex; align-items: center; justify-content: center; }
.star::after { content: '★'; color: white; font-size: 9px; }

/* ─── Sidebar « Merci » + réseaux (maquette) ─── */
.sidebar-merci .sidebar-merci-visual {
  flex: 0 0 auto;
  align-items: center;
}

.sidebar-merci .merci-sidebar-hero {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.sidebar-merci.sidebar-merci--hide-social .social-section {
  display: none;
}

.sidebar-merci .social-section {
  width: 100%;
  flex-shrink: 0;
  margin-top: auto;
  text-align: center;
}

.sidebar-merci .social-title {
  font-weight: 900;
  font-size: 18px;
  color: var(--text-dark);
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  text-align: center;
}

.sidebar-merci .social-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.sidebar-merci .social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: fit-content;
  margin: 0;
  padding: 13px 22px;
  background: #fff;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  color: var(--pink);
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  text-decoration: none;
  box-sizing: border-box;
}
.sidebar-merci .social-btn img{
  display: block;
  width: 24px;
}

.sidebar-merci .social-btn-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}

.sidebar-merci .social-btn:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.05);
}

.sidebar-merci .social-btn:active {
  transform: translateY(0);
}

/* ─── MAIN ─── */
.main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Progress bar */
.progress-area {
  padding: 42px 0 0 0;
  flex-shrink: 0;
  display: none;
  max-width: 515px;
  width: 100%;
  margin: 0 auto;
}
.progress-area.visible { display: block; }
.progress-labels {
  display: flex; justify-content: space-between;
  font-size: 10px; font-weight: 800;
  color: #5e5e5e; text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 8px;
}
.progress-track {
  height: 5px; background: #f1f1f1; border-radius: 8px; position: relative;
}
.progress-fill {
  position: absolute; left: 0; top: 0; height: 100%;
  background: var(--yellow);
  transition: width 0.4s ease; 
  z-index: 30;
  border-radius: 8px;
}

/* Step container */
.step-container {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 30px 80px 40px;
}

.step-contain {
  height: 100%;
  display: flex;
}

.step { display: none; flex-direction: column; align-items: center; gap: 40px; width: 100%; max-width: 910px; }
.step.active { display: flex; }

.booking-intro {
  width: 100%;
  margin: 0 auto 1.25rem;
  padding: 0 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.65rem;
}

.booking-intro .rdv-title {
  align-self: center;
  text-align: center;
  line-height: 1.15;
}

.booking-intro .rdv-subtitle {
  align-self: center;
  text-align: center;
  line-height: 1.5;
}

.booking-intro .rdv-subtitle strong {
  font-weight: 800;
  color: var(--text-dark);
}

.booking-intro-benefits {
  justify-content: center;
  margin-top: 10px;
}

#step-16.step--booking {
  max-width: none;
}

#step-16.step--booking #frame {
  display: block !important;
}

#step-16.step--booking #contactFrame {
  display: block;
  max-width: 100%;
  overflow: hidden;
  min-height: 600px !important;
}

.step-header { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.section-label { font-size: 17px; font-weight: 800; color: var(--pink); text-transform: uppercase; }
.step-title { font-size: 32px; font-weight: 800; color: var(--text-dark); text-align: center; line-height: 1.2; }
.step-subtitle { font-size: 16px; color: var(--text-light); text-align: center; margin-top: 4px; }

/* Pill badge */
.pill-badge {
  background: #ffe0ee; color: var(--pink);
  padding: 7px 18px; border-radius: 20px;
  font-size: 14px; font-weight: 700;
  display: inline-block;
  text-align: center;
}

/* Tooltip hidden by default on steps 11, 12, 13 */
#step-11 .tooltip,
#step-12 .tooltip,
#step-13 .tooltip {
  display: none;
}

#step-11 .tooltip.visible,
#step-12 .tooltip.visible,
#step-13 .tooltip.visible {
  display: block;
  animation: pulsePop 0.5s ease-out;
}

/* ─── INTRO CARDS ─── */
.project-cards { display: flex; gap: 16px; width: 100%; }
.project-card {
  flex: 1; background: white; border: 1px solid var(--border-light);
  border-radius: 24px; overflow: hidden; cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
  padding: 8px 8px 20px; display: flex;
  flex-direction: column; align-items: center; gap: 16px;
}
.project-card:hover { border-color: var(--green); }
.project-card.selected { border: 2px solid var(--green); box-shadow: var(--card-shadow); animation: selectPulse 0.6s ease-out; }
.project-card.dimmed { opacity: 0.5; }
.project-card-img { width: 100%; height: 260px; border-radius: 16px; object-fit: cover; display: block; }
.project-card-label { font-size: 18px; font-weight: 800; color: #131313; text-align: center; line-height: 1.3; }

/* ─── ICON OPTIONS ─── */
.icon-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; }
.icon-option {
  display: flex; align-items: center; gap: 16px;
  padding: 16px; background: white;
  border: 1px solid var(--border-light); border-radius: 16px;
  cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.icon-option:hover { border-color: var(--green); }
.icon-option.selected { border: 2px solid var(--green); box-shadow: var(--card-shadow); animation: selectPulse 0.6s ease-out; }
.icon-option.dimmed { opacity: 0.5; }
.icon-box {
  width: 44px; height: 44px; min-width: 44px; border-radius: 12px;
  background: var(--green-light); display: flex; align-items: center; justify-content: center;
}
.icon-box svg { width: 24px; height: 24px; stroke: #1a6644; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-box img { width: 24px; height: 24px; display: block; object-fit: contain; flex-shrink: 0; }
.icon-option-label { font-size: 18px; font-weight: 700; color: var(--text-dark); }

/* ─── IMAGE GRID (surfaces) ─── */
.image-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; width: 100%; }
.image-option.image-option-33 { grid-template-columns: repeat(3, 1fr); }
.image-option {
  background: white; border: 1px solid var(--border-light);
  border-radius: 20px; padding: 8px 8px 12px;
  cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.image-option:hover { border-color: var(--green); }
.image-option.selected { border: 2px solid var(--green); box-shadow: var(--card-shadow); animation: selectPulse 0.6s ease-out; }
.image-option.dimmed { opacity: 0.5; }
.image-option img { width: 100%; height: 180px; object-fit: cover; border-radius: 12px; display: block; }
#step-2 .image-option img { height: 130px; }
.image-option-label { font-size: 18px; font-weight: 800; color: var(--text-dark); text-align: center; }
.image-option-empty { height: auto; display: flex; align-items: center; justify-content: center; }

.image-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%;  }

.image-options--maison-choice .image-options__visual {
  width: 100%;
  height: 240px;
  object-fit: none;
  background-color: #F1F1F1;
  border-radius: 12px;
  display: block;
}

/* ─── TEXT OPTIONS ─── */
.text-options { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 660px; }
.text-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.text-option {
  padding: 16px 20px; background: white; border: 1px solid var(--border-light);
  border-radius: 16px; cursor: pointer; font-size: 18px; font-weight: 600;
  color: var(--text-dark); transition: border-color 0.2s, box-shadow 0.2s;
  display: flex; align-items: center; gap: 12px;
}
.text-option:hover { border-color: var(--green); }
.text-option.selected { border: 2px solid var(--green); box-shadow: var(--card-shadow); animation: selectPulse 0.6s ease-out; }
.text-option.dimmed { opacity: 0.45; }

/* ─── TOOLTIP ─── */
.tooltip {
  background: #C7F1E0; border: 1px solid #0AC084;
  border-radius: 16px; padding: 16px; font-size: 14px;
  text-align: center; width: 100%; max-width: 660px; line-height: 1.5;
  margin: 0 auto;
}
.tooltip strong { font-weight: 800; }

/* Équipements : bloc sous la grille (titre + cartes + message + actions) */
#step-3 > .image-grid + div {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 16px;
  width: 100%;
}

/* ─── SLIDER ─── */
.slider-wrap {
  width: 100%;
  max-width: 600px;
  position: relative;
  padding-top: 60px;
  /* Marge pour la bulle (translateX(-50%)) aux extrêmes du curseur */
  padding-left: 28px;
  padding-right: 28px;
  box-sizing: border-box;
}

.slider-bubble {
  position: absolute;
  top: 0;
  left: 0;
  /* left = centre du thumb ; translateX(-50%) centre la bulle + la queue (::after) sous ce point */
  transform: translateX(-50%) translateY(-6px);
  background: var(--green);
  color: white;
  font-weight: 900;
  font-size: 22px;
  padding: 10px 18px;
  border-radius: 8px;
  text-align: center;
  font-family: inherit;
  white-space: nowrap;
  pointer-events: none;
  transition: transform 0.1s ease-out, box-shadow 0.2s ease, background 0.3s ease;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(65, 184, 131, 0.25);
  letter-spacing: -0.5px;
  width: max-content;
  min-width: 7ch;
  box-sizing: border-box;
}

.slider-bubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid var(--green);
}

.slider-bubble.active {
  transform: translateX(-50%) translateY(-10px) scale(1.06);
  box-shadow: 0 6px 20px rgba(65, 184, 131, 0.35);
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--green) 0%, var(--green) 50%, #e0e0e0 50%, #e0e0e0 100%);
  outline: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

input[type="range"]:hover {
  filter: brightness(1.1);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px;
  border-radius: 50%; background: var(--green); cursor: pointer;
  box-shadow: 0 2px 8px rgba(65,184,131,0.3); border: 3px solid white;
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--green); cursor: pointer; border: 3px solid white;
  box-shadow: 0 2px 8px rgba(65,184,131,0.3);
}

#budget-slider::-webkit-slider-thumb {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
#budget-slider:hover::-webkit-slider-thumb {
  transform: scale(1.22);
  box-shadow: 0 4px 14px rgba(65, 184, 131, 0.45);
}
#budget-slider::-moz-range-thumb {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
#budget-slider:hover::-moz-range-thumb {
  transform: scale(1.22);
  box-shadow: 0 4px 14px rgba(65, 184, 131, 0.45);
}

/* ─── TEXT INPUTS ─── */
.input-group { width: 100%; max-width: 660px; display: flex; flex-direction: column; gap: 18px; }
.input-field {
  border: none; border-bottom: 1.5px solid var(--border);
  padding: 12px 0; font-size: 18px; font-family: inherit;
  color: var(--text-dark); background: transparent; outline: none;
  width: 100%; transition: border-color 0.2s;
}
.input-field:focus { border-bottom-color: var(--green); }
.input-field::placeholder { color: var(--text-light); }
.phone-row { display: flex; align-items: baseline; gap: 10px; border-bottom: 1.5px solid var(--border); padding: 12px 0; }
.phone-row:focus-within { border-bottom-color: var(--green); }
.phone-prefix { font-size: 18px; color: var(--text-light); flex-shrink: 0; }
.phone-prefix-select {
  font-size: 18px;
  color: var(--text-dark);
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  outline: none;
}
.phone-prefix-select:hover {
  color: var(--green);
}
.phone-row .input-field { border: none; padding: 0; }

.confidential { font-size: 13px; color: var(--text-light); text-align: center; margin-top: 16px; }

/* ─── NAVIGATION BUTTONS ─── */
.nav-buttons { display: flex; gap: 16px; align-items: center; justify-content: center; margin-top: 20px; }
.btn-back {
  display: flex; align-items: center; gap: 8px;
  padding: 18px 24px; background: #fcfcfc; border: none;
  border-radius: 16px; font-size: 19px; font-weight: 800;
  color: var(--text-muted); cursor: pointer; font-family: inherit;
  transition: background 0.2s;
}
.btn-back:hover { background: #ececec; }
.btn-continue {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 32px; background: var(--pink); border: none;
  border-radius: 16px; font-size: 19px; font-weight: 800;
  color: white; cursor: pointer; font-family: inherit;
  min-width: 200px; justify-content: center;
  transition: opacity 0.2s, background 0.2s;
}
.btn-continue:hover { opacity: 0.9; }
.btn-continue.disabled { background: #b0b0b0; cursor: not-allowed; }
.btn-continue.disabled:hover { opacity: 1; }

/* Attente de la reponse n8n (~1 s) : meme vocabulaire visuel que le loader de l'iframe booking. */
.btn-continue.is-submitting { background: #b0b0b0; cursor: progress; }
.btn-continue.is-submitting:hover { opacity: 1; }
.btn-submit-spinner {
  width: 18px; height: 18px;
  border: 3px solid #f3f3f3; border-top: 3px solid #41b883;
  border-radius: 50%;
  animation: gk-spin 1s linear infinite;
  flex-shrink: 0;
}
@keyframes gk-spin { to { transform: rotate(360deg); } }

/* ─── MERCI (step 17 et base) ─── */
.merci-check {
  width: 56px; height: 56px; background: var(--green); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: white; position: relative;
}
.merci-sparkles { font-size: 20px; position: absolute; }
.merci-sparkles.tl { top: -18px; left: -20px; }
.merci-sparkles.tr { top: -18px; right: -20px; }
.merci-title { font-size: 32px; font-weight: 900; color: var(--text-dark); }
.merci-subtitle { font-size: 16px; color: var(--text-light); text-align: center; line-height: 1.5; }
.merci-photo { width: 100%; max-width: 480px; height: 280px; object-fit: cover; border-radius: 20px; }
.merci-link { color: var(--pink); font-weight: 700; text-decoration: underline; font-size: 16px; cursor: pointer; }

/* ─── MERCI step 15 (maquette) ─── */
.step.merci-step {
  gap: 32px;
  padding-bottom: 8px;
}

.merci-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 540px;
  text-align: center;
}

.merci-icon-cluster {
  position: relative;
  width: 140px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.merci-step .merci-check {
  position: relative;
  z-index: 2;
  width: 54px;
  height: 54px;
  border-radius: 60px;
  background: linear-gradient(165deg, #d4f2e4 0%, #a8dfc4 55%, #94d6b8 100%);
  box-shadow: 0 8px 20px rgba(65, 184, 131, 0.28);
  font-size: 26px;
  font-weight: 800;
}

.merci-decor-star {
  position: absolute;
  color: #e6b422;
  font-size: 15px;
  line-height: 1;
  pointer-events: none;
}

.merci-decor-a {
  left: 8px;
  top: 14px;
  transform: rotate(-14deg);
}

.merci-decor-b {
  right: 6px;
  top: 8px;
  transform: rotate(16deg);
}

.merci-decor-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff8ab8;
  pointer-events: none;
}

.merci-decor-c { left: 2px; bottom: 16px; }
.merci-decor-d { right: 22px; bottom: 22px; }
.merci-decor-e { right: -2px; top: 40px; }
.merci-decor-dot--mint {
  left: 58px;
  top: 20px;
  background: #5fd4a4;
}

.merci-step .merci-title {
  font-size: clamp(28px, 3.6vw, 36px);
  font-weight: 900;
  line-height: 1.1;
}

.merci-step .merci-subtitle {
  font-size: 17px;
  line-height: 1.5;
  max-width: 460px;
  margin: 0;
}

.merci-deck-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 4px 0 0;
}

/* Swiper « cards » (step 15 merci) */
.merci-step .merci-cards-swiper {
  width: 100%;
  max-width: 440px;
  height: 300px;
  padding-bottom: 44px;
  overflow: visible;
}

.merci-step .merci-cards-swiper .swiper-slide {
  border-radius: 26px;
  overflow: hidden;
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.08),
    0 2px 14px rgba(15, 23, 42, 0.05)
}

.merci-step .merci-cards-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.merci-step .merci-cards-swiper .swiper-pagination {
  bottom: 6px;
}

.merci-step .merci-cards-swiper .swiper-pagination-bullet {
  background: var(--text-light);
  opacity: 0.45;
}

.merci-step .merci-cards-swiper .swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--pink);
}

.merci-step .merci-link {
  font-size: 17px;
  font-weight: 800;
  text-underline-offset: 16px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--pink);
  padding: 6px 10px;
  margin-top: -4px;
}

.merci-step .merci-link:hover {
  opacity: 0.88;
}

.merci-step .merci-link:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Réseaux sous « Voir nos réalisations » : masqué sur desktop (réseaux dans la sidebar) */
.merci-social--mobile-only {
  display: none;
}

@media (max-width: 1050px) {
  .merci-step .merci-social--mobile-only {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 440px;
    margin: 20px auto 0;
    gap: 14px;
  }

  .merci-step .merci-social-title {
    font-weight: 900;
    font-size: 18px;
    color: var(--text-dark);
    letter-spacing: -0.02em;
    margin: 0;
    text-align: center;
  }

  .merci-step .merci-social-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .merci-step .merci-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    color: var(--pink);
    text-decoration: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }

  .merci-step .merci-social-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.05);
  }

  .merci-step .merci-social-btn:active {
    transform: translateY(0);
  }

  .merci-step .merci-social-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: block;
    object-fit: contain;
  }
}

/* ─── CALENDAR ─── */
.rdv-title { font-size: 34px; font-weight: 900; color: var(--text-dark); align-self: flex-start; }
.rdv-subtitle { font-size: 19px; color: var(--text-light); align-self: flex-start; }
.rdv-benefits { display: flex; gap: 20px; flex-wrap: wrap; align-self: flex-start; width: 100%; }
.rdv-benefit { display: flex; align-items: center; gap: 6px; font-size: 16px; color: var(--text-medium); font-weight: 600; }
.check-icon { color: var(--green); font-weight: 900; }

.calendar-layout { display: flex; gap: 32px; width: 100%; align-items: flex-start; }
.calendar-left { flex: 1; }
.calendar-right {
  width: 300px; background: white; border: 1px solid var(--border);
  border-radius: 16px; padding: 20px; flex-shrink: 0;
}

.cal-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.cal-nav span { font-size: 15px; font-weight: 800; color: var(--text-medium); }
.cal-nav button { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--text-muted); }

.cal-table { width: 100%; border-collapse: collapse; text-align: center; }
.cal-table th { font-size: 11px; color: var(--text-light); padding: 6px 2px; font-weight: 600; text-transform: uppercase; }
.cal-table td { padding: 3px 2px; }
.cal-day {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; margin: auto; font-size: 14px; cursor: default; color: var(--text-muted);
}
.cal-day.available { background: var(--yellow); font-weight: 800; cursor: pointer; color: var(--text-dark); }
.cal-day.available:hover { background: #fec830; }
.cal-day.selected { background: var(--yellow); font-weight: 900; color: var(--text-dark); }

.cal-right-title { font-size: 14px; font-weight: 800; color: var(--text-medium); margin-bottom: 14px; }
.time-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.time-slot {
  padding: 10px 8px; border: 1px solid var(--border); border-radius: 10px;
  font-size: 13px; text-align: center; cursor: pointer;
  transition: all 0.15s; color: var(--text-medium); font-weight: 500;
}
.time-slot:hover { border-color: var(--yellow); background: #fffaeb; }
.time-slot.selected { background: var(--yellow); border-color: var(--yellow); font-weight: 700; }

.cal-timezone { font-size: 12px; color: var(--text-light); margin-top: 16px; }

/* ─── CONFIRMATION (step 17) ─── */
.confirm-full {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 32px; padding: 60px;
}

.confirm-step {
  position: relative;
  gap: 16px;
  max-width: 920px;
  margin: 0 auto;
}

.confirm-hero {
  margin-bottom: 4px;
}

.confirm-step .merci-icon-cluster {
  margin-bottom: 10px;
}

.confirm-step .merci-check.confirm-step-check {
  border-radius: 50%;
  width: 56px;
  height: 56px;
  background: linear-gradient(165deg, #d4f2e4 0%, #9be0c4 50%, #7fd4b0 100%);
  box-shadow: 0 8px 24px rgba(65, 184, 131, 0.35);
  font-weight: 800;
}

.confirm-step .merci-title {
  font-size: clamp(28px, 3.6vw, 36px);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-align: center;
}

.confirm-rdv-datetime {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 14px;
  border-radius: 8px;
  background-color: #A1E7CB;
  font-weight: 700;
  color: var(--text, #131313);
}

.confirm-step .merci-subtitle {
  font-size: 17px;
  line-height: 1.55;
  max-width: 480px;
  margin: 0 auto;
}

.confirm-stage {
  position: relative;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 8px 8px;
  min-height: 220px;
}

.confirm-deco-layer {
  position: relative;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  width: 100%;
  display: block;
  height: 20px;
}

.confirm-deco-calendar {
  position: absolute;
  left: 10px;
  top: 40%;
  transform: translateY(0) rotate(-14deg);
  line-height: 0;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.12));
}

.confirm-deco-calendar-img {
  display: block;
  width: 50%;
  height: auto;
  transform: translateY(-75px);
}

.confirm-deco-burst {
  position: absolute;
  right: -15%;
  top: -50px;
  transform: translate(0, 0);
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirm-deco-burst-img {
  display: block;
  width: 70%;
  height: auto;
  filter: drop-shadow(0 10px 22px rgba(255, 90, 140, 0.22));
}

.confirm-cards {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  align-items: stretch;
}

.confirm-card {
  flex: 1 1 240px;
  max-width: 308px;
  min-width: 216px;
  padding: 38px 10px 42px;
  background: #fff;
  border: none;
  border-radius: 22px;
  box-shadow:
    0 26px 55px rgba(15, 23, 42, 0.11),
    0 10px 22px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.confirm-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 36px 64px rgba(15, 23, 42, 0.14),
    0 14px 28px rgba(15, 23, 42, 0.08);
}

.confirm-card:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 4px;
}

.confirm-card-icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.confirm-logo {
  display: block;
}

.confirm-card-icon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}

.confirm-card-sub {
  font-size: 20px;
  color: var(--text-light);
  font-weight: 500;
}

.confirm-card-name {
  font-size: 22px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--text-dark);
  text-align: center;
}


/* ─── MOBILE INTRO BAR (masqué par défaut — desktop ≥ 1051px) ─── */
.mobile-intro-bar {
  display: none;
  box-sizing: border-box;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--border-light);
}

.intro-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 0;
}

.intro-logo img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Bloc .sidebar-img cloné depuis la sidebar */
.intro-image .sidebar-img {
  margin: 0;
  padding: 0;
}

.intro-image .intro-video {
  width: 100%;
  max-width: 100%;
  max-height: 108px;
  height: auto;
  margin: 0;
  border-radius: 10px;
  object-fit: cover;
  background: #000;
}

.intro-image .intro-tagline {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  padding: 0 4px;
  margin: 0;
  color: var(--text-medium);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center;
}

.intro-image .sidebar-img > img,
.intro-image .merci-sidebar-hero {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 120px;
  height: auto;
  object-fit: contain;
}

.intro-image .merci-sidebar-hero {
  object-fit: cover;
  max-height: 104px;
}

.intro-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  width: auto;
  height: auto;
}

.intro-image .product-stage {
  max-width: 100%;
  max-height: 120px;
  width: auto;
  height: auto;
}

.intro-image .stage-frame {
  max-height: 120px;
}

/* ─── Desktop : sidebar visible, pas de barre mobile ─── */
@media (min-width: 1051px) {
  .sidebar {
    display: flex;
  }

  .mobile-intro-bar {
    display: none;
  }

  /* Entrée / sortie d’étape animées (desktop uniquement — sync avec goToStep ~300 ms) */
  .step.active { animation: fadeInStep 0.4s ease-out; }
  .step.fade-out { animation: fadeOutStep 0.3s ease-out forwards; }
}

/* ─── Écrans < 1300px : sidebar plus étroite (desktop), padding contenu ─── */
@media (max-width: 1299px) {
  .step-container {
    padding: 30px 50px 40px;
  }
}

@media (max-width: 1299px) and (min-width: 1051px) {
  .sidebar {
    width: 370px;
    min-width: 370px;
  }
}

/* ─── Tablette / mobile : barre haute + contenu plein largeur ─── */
@media (max-width: 1050px) {
  /* Pas d’animation entre les étapes (instantané — voir goToStep) */
  .step.fade-out { animation: none; }

  .sidebar {
    display: none;
  }

  .mobile-intro-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
    padding: 0px 12px 0 16px;
    min-height: 108px;
    /* Plafond tablette / grands mobiles (561–1050px) ; ≤560px surcharge à 108px */
    max-height: 190px;
  }

  /* Accueil (step 0) : colonne logo + carte stats, pas de plafond de hauteur */
  .mobile-intro-bar.mobile-intro-bar--step0 {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 16px 16px 14px;
    gap: 6px;
    min-height: 0;
    max-height: none;
  }

  .mobile-intro-bar--step0 .intro-image .stats-row {
    display: none;
  }

  .mobile-intro-bar--step0 .intro-logo {
    max-width: 100%;
    width: 100%;
    justify-content: flex-start;
    margin-top: 0px;
  }

  .mobile-intro-bar--step0 .intro-image {
    width: 100%;
    flex: none;
    max-width: 100%;
    min-width: 0;
  }

  .mobile-intro-bar--step0 .intro-image .stats-card {
    width: 100%;
    max-width: 100%;
    background-color: transparent;
    border-radius: 0;
  }

  .mobile-intro-bar--step0 .stat-item {
    padding: 8px 12px 8px 12px;
  }

  .mobile-intro-bar--step0 .stat-value {
    font-size: 19px;
    font-weight: 600;
  }

  .mobile-intro-bar--step0 .stat-label {
    font-size: 13px;
  }

  .mobile-intro-bar--step0 .stats-trust {
    padding: 0 4px;
    border-top: none;
  }

  .mobile-intro-bar--step0 .trust-title {
    font-size: 14px;
  }

  .mobile-intro-bar--step0 .trust-meta {
    font-size: 12px;
    gap: 8px;
  }

  .intro-logo {
    max-width: 44%;
    flex-shrink: 0;
    margin-top: 16px; 
  }

  .intro-logo img {
    height: 34px;
  }

  body {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: auto;
    min-height: 100dvh;
    background-color: white;
  }

  .step-contain {
    background: var(--sidebar-bg);
  }

  .app-shell {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .step-container {
    border-radius: 20px 20px 0 0;
    background-color: #fff;
    padding: 24px 36px calc(88px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    align-items: stretch;
    justify-content: flex-start;
    flex: 0 1 auto;
    min-height: 0;
  }

  .step.active {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    animation: none;
  }

  .step.active .step-title {
    animation: stepTitleIn 0.28s ease-out both;
  }

  .merci-deck-wrap {
    padding: 10px 12px 4px;
  }

  .project-cards { flex-direction: column; gap: 12px; }
  .image-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 100%;
  }

  /* Équipements : moins de cartes, libellés longs → 1 col, vignette + texte (surface reste en 2 col) */
  #step-3 .image-grid {
    grid-template-columns: 1fr;
    gap: 6px;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }
  #step-3 .image-option {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 14px;
    gap: 14px;
  }
  #step-3 .image-option img {
    width: 60px;
    height: 60px;
    min-width: 60px;
    flex-shrink: 0;
    object-fit: cover;
  }
  #step-3 .image-option-label {
    text-align: left;
    flex: 1;
    min-width: 0;
    line-height: 1.25;
  }

  /* « Que recherchez-vous ? » — éviter le mode ligne + vignette 70px qui coupe le texte */
  #step-1 .image-options--maison-choice {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
    gap: 12px;
  }
  #step-1 .image-options--maison-choice .image-option {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 12px 14px 16px;
    gap: 12px;
    overflow: visible;
  }
  #step-1 .image-options--maison-choice .image-options__visual {
    width: 100%;
    height: auto;
    min-height: 128px;
    max-height: 200px;
    flex-shrink: 0;
    object-fit: cover;
  }
  #step-1 .image-options--maison-choice .image-option-label {
    text-align: center;
    line-height: 1.35;
  }

  /* Surfaces type extension : libellés « De xx à yy m² » — une colonne, vignette + texte */
  #step-2 .surface-grid--extension {
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }
  #step-2 .surface-grid--extension .image-option:not(.image-option-empty) {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 14px;
    gap: 14px;
  }

  #step-2 .surface-grid--extension .image-option:not(.image-option-empty) img {
    width: 60px;
    height: 60px;
    min-width: 60px;
    flex-shrink: 0;
    object-fit: cover;
  }
  #step-2 .surface-grid--extension .image-option:not(.image-option-empty) .image-option-label {
    text-align: left;
    flex: 1;
    min-width: 0;
    line-height: 1.25;
  }
  #step-2 .surface-grid--extension .image-option.image-option-empty {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 16px;
    gap: 0;
    min-height: 72px;
  }
  #step-2 .surface-grid--extension .image-option.image-option-empty > .image-option-empty {
    display: none;
  }
  #step-2 .surface-grid--extension .image-option.image-option-empty .image-option-label {
    text-align: center;
    margin: 0;
  }

  .image-option {
    min-width: 0;
    overflow: hidden;
  }
  .image-option img {
    min-width: 0;
  }

  /* Typo harmonisée (tablette / mobile ≤1050px) */
  .step-title { font-size: 26px; line-height: 1.2; }
  .section-label { font-size: 14px; }
  .step-subtitle { font-size: 15px; line-height: 1.45; }

  .project-card-label,
  .icon-option-label,
  .image-option-label,
  .text-option {
    font-size: 16px;
    line-height: 1.35;
  }

  .pill-badge { font-size: 13px; }
  .tooltip { font-size: 14px; line-height: 1.45; }

  .input-field,
  .phone-prefix { font-size: 16px; }

  .slider-wrap {
    padding-left: max(32px, env(safe-area-inset-left, 0px));
    padding-right: max(32px, env(safe-area-inset-right, 0px));
  }

  .slider-bubble {
    font-size: 18px;
    padding: 9px 15px;
  }

  .merci-link { font-size: 15px; }

  .merci-title,
  .merci-step .merci-title { font-size: 26px; line-height: 1.15; }
  .merci-subtitle,
  .merci-step .merci-subtitle { font-size: 15px; line-height: 1.5; }

  .confirm-card-sub { font-size: 15px; }
  .confirm-card-name { font-size: 18px; }

  .rdv-title { font-size: 24px; }
  .rdv-subtitle { font-size: 15px; }
  .rdv-benefit { font-size: 14px; }

  /* Bas d’écran : actions fixes, sans dépasser la largeur (safe area inclus) */
  /* --nav-keyboard-offset : remontée au-dessus du clavier (Safari iOS / visualViewport) */
  .nav-buttons {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--nav-keyboard-offset, 0px);
    margin: 0 !important;
    padding: 12px max(16px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-right, 0px));
    gap: 10px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    background: #fff;
    border-top: 1px solid var(--border-light);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.07);
    z-index: 100;
    box-sizing: border-box;
    max-width: 100%;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .nav-buttons .btn-back {
    flex: 0 0 auto;
    min-width: 0;
  }

  .nav-buttons .btn-continue {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
  }

  .nav-buttons .btn-back,
  .nav-buttons .btn-continue {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.1s ease, background-color 0.1s ease, filter 0.1s ease;
  }

  /*
   * Tooltips : bandeau fixe au-dessus des actions (88px ≈ barre nav + marge, aligné step-container)
   * Hauteur max = viewport moins cette bande et une réserve haute (intro / titre / confort)
   */
  .step .tooltip {
    position: fixed;
    left: max(16px, env(safe-area-inset-left, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: calc(88px + env(safe-area-inset-bottom, 0px) + 8px + var(--nav-keyboard-offset, 0px));
    z-index: 45;
    width: auto;
    max-width: none;
    margin: 0;
    max-height: calc(
      100vh - 88px - env(safe-area-inset-bottom, 0px) - 8px - env(safe-area-inset-top, 0px) - max(100px, 20vh)
    );
    max-height: calc(
      100dvh - 88px - env(safe-area-inset-bottom, 0px) - 8px - env(safe-area-inset-top, 0px) - max(100px, 20vh)
    );
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.1);
  }

  /* Équipements : tooltip dans le flux sous les cartes, pas bandeau fixe (priorité sur .step .tooltip) */
  #step-3 .tooltip {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: auto;
    max-height: none;
    overflow: visible;
    box-shadow: none;
    margin: 4px auto 0;
    width: 100%;
    max-width: 660px;
    -webkit-overflow-scrolling: auto;
  }

  /* Même barre fine qu’en mobile : visible dès ≤1050px (pas seulement ≤767px) */
  .main {
    position: relative;
    overflow-x: hidden;
    overflow-y: visible;
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
  }

  .progress-area.visible {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: 3px;
    padding: 0;
    margin: 0;
    z-index: 20;
    box-sizing: border-box;
  }

  .progress-area.visible .progress-labels {
    display: none;
  }

  .progress-area.visible .progress-track {
    height: 3px;
    background: #FFFFFF;
    border-radius: 0;
    width: 100%;
    margin: 0;
  }

  .progress-area.visible .progress-fill {
    height: 100%;
    border-radius: 0;
    transition: width 0.4s ease;
  }
}

/* Intro step : 768px–1050px — carte en ligne (vignette + libellé), pile verticale des cartes */
@media (max-width: 1050px) and (min-width: 768px) {
  .project-card {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 16px 10px 10px;
    gap: 16px;
    width: 100%;
    flex: none;
  }

  .project-card-img {
    width: 140px;
    min-width: 140px;
    height: 120px;
    flex-shrink: 0;
  }

  .project-card-label {
    text-align: left;
    flex: 1;
    min-width: 0;
    line-height: 1.35;
  }

  .project-card-label > br {
    display: none;
  }

  /* « Que recherchez-vous ? » — 2 colonnes, vignette + texte en ligne */
  #step-1 .image-options--maison-choice {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    gap: 12px;
  }

  #step-1 .image-options--maison-choice .image-option {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 14px 10px 10px;
    gap: 14px;
    overflow: hidden;
  }

  #step-1 .image-options--maison-choice .image-options__visual {
    width: 140px;
    min-width: 140px;
    height: 120px;
    max-height: none;
    min-height: 0;
    object-fit: cover;
  }

  #step-1 .image-options--maison-choice .image-option-label {
    text-align: left;
    flex: 1;
    min-width: 0;
    line-height: 1.35;
  }

  /* Surface studio : grille 2×4, chaque carte en ligne */
  #step-2 #surface-grid:not(.surface-grid--extension) .image-option {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 14px;
    gap: 14px;
  }

  #step-2 #surface-grid:not(.surface-grid--extension) .image-option img {
    width: 96px;
    height: 96px;
    min-width: 96px;
    flex-shrink: 0;
    object-fit: cover;
  }

  #step-2 #surface-grid:not(.surface-grid--extension) .image-option-label {
    text-align: left;
    flex: 1;
    min-width: 0;
    line-height: 1.25;
  }

  /* Surface extension : grille 2×2 (maquette) */
  #step-2 .surface-grid--extension {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    gap: 12px;
  }

  /* Équipements : grille 2×2 (768–1050px) ; 1 col en ≤767px (règles générales ≤1050px) */
  #step-3 .image-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    gap: 10px;
  }

  /* Tooltips : plus d’air au-dessus de la nav (768px–1050px) */
  .step .tooltip {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px) + 16px + var(--nav-keyboard-offset, 0px));
    max-height: calc(
      100vh - 88px - env(safe-area-inset-bottom, 0px) - 16px - env(safe-area-inset-top, 0px) - max(100px, 20vh)
    );
    max-height: calc(
      100dvh - 88px - env(safe-area-inset-bottom, 0px) - 16px - env(safe-area-inset-top, 0px) - max(100px, 20vh)
    );
  }
}

@media (max-width: 560px) {
  .mobile-intro-bar {
    max-height: 108px;
  }

  .mobile-intro-bar.mobile-intro-bar--step0 {
    max-height: none;
  }

  .intro-logo {
    max-width: 100%;
    justify-content: flex-start;
  }

  .intro-logo img {
    height: 30px;
  }

  .intro-image {
    flex: none;
    max-height: 240px;
    min-height: 88px;
  }

  .mobile-intro-bar--step0 .intro-image {
    max-height: none;
    min-height: 0;
  }

  .intro-image .intro-video {
    max-height: 148px;
  }

  .intro-image .sidebar-img > img,
  .intro-image .merci-sidebar-hero {
    max-height: 102px;
  }

  .intro-image .merci-sidebar-hero {
    max-height: 148px;
  }
}

/* ─── ANIMATIONS ─── */
@keyframes pulsePop {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  70% {
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.pill-badge {
  animation: pulsePop 0.5s ease-out;
}


/* ─── MOBILE (< 768px) ─── */
@media (max-width: 767px) {
  .logo img { height: 32px; }

  .main { height: auto; position: relative; min-height: 0; }

  .step-container {
    /* Réserver la hauteur de la barre d’actions fixe (ne pas écraser le padding du bloc ≤1050px par 10px) */
    padding: 30px 16px 120px;
    justify-content: flex-start;
    height: calc(100vh - 108px);
    min-height: fit-content;
  }

  .step { gap: 25px; }
  .step.merci-step { gap: 20px; }
  .step-title { font-size: 22px; line-height: 1.2; }
  .section-label { font-size: 13px; }
  .step-subtitle { font-size: 14px; line-height: 1.45; }

  .project-cards { flex-direction: column; }
  .project-card { flex-direction: row; padding: 8px 8px 8px; }
  .project-card-img { height: 80px; width: 110px; flex-shrink: 0; }
  .project-card-label > br {display: none;}
  .project-card-label { text-align: left; }

  .project-card-label,
  .icon-option-label,
  .image-option-label,
  .text-option {
    font-size: 16.5px;
    line-height: 1.35;
  }

  .image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .icon-option { padding: 8px; }
  .image-option { flex-direction: row; padding: 8px; }
  .image-option img { height: 70px; width: 70px; flex-shrink: 0; }
  .image-option-label { min-width: 0; }
  .image-option-empty { height: 88px; }
  .image-option-empty{ justify-content: center; }

  .icon-box {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }
  .icon-box img { width: 18px; height: 18px; }
  /* « Que recherchez-vous ? » — 1 col, carte en ligne + vignette un peu plus large que le défaut */
  #step-1 .image-options--maison-choice {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  #step-1 .image-options--maison-choice .image-option {
    flex-direction: row;
    align-items: center;
    padding: 10px 12px;
    gap: 12px;
    overflow: hidden;
  }

  #step-1 .image-options--maison-choice .image-options__visual {
    width: 108px;
    min-width: 108px;
    height: 108px;
    max-height: none;
    min-height: 0;
    object-fit: cover;
  }

  #step-1 .image-options--maison-choice .image-option-label {
    text-align: left;
    flex: 1;
    min-width: 0;
  }

  /* Surface studio : vignette 80px + libellé aligné à gauche (évite le 70px trop étroit) */
  #step-2 #surface-grid:not(.surface-grid--extension) .image-option:not(.image-option-empty) img {
    width: 60px;
    height: 60px;
    min-width: 60px;
  }

  #step-2 #surface-grid:not(.surface-grid--extension) .image-option-label {
    text-align: left;
  }

  /* Surface extension : rester en 1 colonne sur très petit écran */
  #step-2 .surface-grid--extension {
    grid-template-columns: 1fr;
  }

  .icon-options { grid-template-columns: 1fr; gap: 10px; }

  .text-options-grid { grid-template-columns: 1fr; }
  .text-option { padding: 14px 18px; }

  .slider-wrap {
    max-width: 100%;
    padding-top: 50px;
    padding-left: max(40px, env(safe-area-inset-left, 0px));
    padding-right: max(40px, env(safe-area-inset-right, 0px));
  }
  .slider-bubble {
    font-size: 17px;
    padding: 8px 12px;
  }

  .input-group { max-width: 100%; }
  /* .step .tooltip : position fixe héritée du bloc ≤1050px */
  .step .tooltip {
    font-size: 13px;
    padding: 12px 16px;
  }

  .nav-buttons .btn-continue { font-size: 15px; padding: 14px 16px; }
  .nav-buttons .btn-back { padding: 14px 18px; font-size: 15px; }
  .btn-back-text { display: none; }

  .rdv-title { font-size: 22px; line-height: 1.2; }
  .rdv-subtitle { font-size: 14px; line-height: 1.4; }
  .rdv-benefit { font-size: 15px; }
  .rdv-benefits { flex-direction: column; gap: 6px; align-items: center; }
  .calendar-layout { flex-direction: column; gap: 16px; }
  .calendar-right { width: 100%; }
  .time-slots { grid-template-columns: repeat(2, 1fr); }

  .merci-title { font-size: 24px; }
  .merci-photo { height: 180px; }

  .merci-step .merci-title { font-size: 24px; }
  .merci-step .merci-subtitle { font-size: 15px; }

  .merci-step .merci-cards-swiper { height: 220px; padding-bottom: 38px; }

  .confirm-cards { flex-direction: column; align-items: center; gap: 16px; }
  .confirm-card {
    width: 100%;
    max-width: 320px;
    min-width: 0;
    flex: none;
    padding: 32px 22px 36px;
  }
  .confirm-step { padding: 8px 4px 32px; border-radius: 16px; }
  .confirm-deco-calendar { opacity: 1; left: -8px; top: 120px; }
  .confirm-deco-calendar-img { width: 40%; transform: translateY(-175px); }
  .confirm-deco-burst-img { width: 45%; transform: translateY(255px); }
  .confirm-deco-burst { opacity: 1; right: -175px; top: 45%; }
  .confirm-stage { min-height: 180px; padding-top: 16px; }

  .pill-badge { font-size: 13px; }

  .step.terrain-fin-step { padding: 20px 12px 16px; }
}

/* ─── Step 18 : après finalisation + webhook (maison uniquement + non propriétaire) ─── */
.step.terrain-fin-step {
  margin: 0 auto;
}

.terrain-fin-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 22px;
  width: 100%;
}

.terrain-fin-banner {
  font-size: 14px;
  line-height: 1.45;
  color: #3d3d3d;
  text-align: center;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(210, 190, 120, 0.55);
  background: linear-gradient(180deg, #fef9ec 0%, #fdf4dc 100%);
}

.terrain-fin-title {
  font-size: clamp(22px, 4.2vw, 30px);
  font-weight: 900;
  line-height: 1.18;
  text-align: center;
  color: var(--text-dark);
  margin: 0;
}

.terrain-fin-lead {
  font-size: clamp(15px, 2.8vw, 18px);
  font-weight: 600;
  text-align: center;
  color: var(--text-light);
  margin: -8px 0 0;
}

.terrain-fin-iframe {
  display: block;
  width: 100%;
  height: 400px;
  border: none;
  overflow: hidden;
  background: #fff;
}

.step.terrain-fin-step .nav-buttons {
  margin-top: 12px;
}

@media (max-width: 491px) {
  #step-16.step--booking #frame {
    min-height: 700px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Écran 16 (prise de RDV) : cette règle vivait dans une <style> en ligne au
   milieu du markup. Déplacée ici, cf. l'écart 2 de l'en-tête.
   ───────────────────────────────────────────────────────────────────────────── */
#frame { display: flex !important; }

/* BUG DE LA SOURCE CORRIGÉ : `animation: spin` était bien demandée sur le loader,
   mais `@keyframes spin` n'était définie NULLE PART — ni dans index.html, ni dans
   style.css. L'anneau de l'écran 16 n'a donc jamais tourné en production. La règle
   manquante est ajoutée ici ; c'est la même que celle du funnel maison. */
@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Loader de l'écran 16 : ces déclarations vivaient dans un `style=""` sur
   #loader. Valeurs identiques à la source. */
#loader {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #41b883;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  align-self: center;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Écran 16 — les deux mentions de réassurance sous le titre.

   Le motif (`.rdv-benefits`, `.rdv-benefit`, `.check-icon`) et son emplacement
   (`.booking-intro-benefits`) existaient déjà plus haut dans cette feuille, mais
   AUCUN markup ne les branchait : ce sont des vestiges du calendrier maison,
   remplacé par l'iframe de prise de RDV. On les rebranche plutôt que d'écrire un
   second motif, et on n'ajuste ici que ce qui distingue cet emplacement.

   Deux ajustements, alignés sur le funnel maison (c'est la référence demandée) :
     · la taille. `.rdv-benefit` est à 16 px, calibré pour un calendrier plein
       écran ; sous un titre de 34 px ces deux mentions doivent rester discrètes ;
     · le sens. La règle mobile de `.rdv-benefits` (ligne ~2054) les empile en
       colonne. Ici on veut UNE ligne tant qu'elle tient, et un repli seulement
       quand elle ne tient plus — d'où `row` + `wrap`, et `gap` qui gère alors
       proprement les deux axes.

   Sélecteur à deux classes (0,2,0) et non `.booking-intro-benefits` seul : la
   règle mobile de `.rdv-benefits` a la même spécificité et vient plus loin dans
   le fichier, elle l'emporterait.
   ───────────────────────────────────────────────────────────────────────────── */
.booking-intro .booking-intro-benefits {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.2rem 0.75rem;
}

.booking-intro .rdv-benefit {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-light);
}

/* 12 px est la taille à laquelle les deux mentions tiennent sur UNE ligne dès
   ~350 px de large ; 14 px en demande ~365, on attend donc une vraie largeur. */
@media (min-width: 1000px) {
  .booking-intro .booking-intro-benefits { gap: 0.25rem 1.25rem; }
  .booking-intro .rdv-benefit { font-size: 0.875rem; }
}
