/* ============================================================
   FORM STEP — CARTE PREMIUM (dropdowns non coupés)
============================================================ */

.form-step{
  width: min(var(--max-step), 94vw);
  padding: 58px 54px;

  display: none;
  flex-direction: column;
  gap: 0;

  border-radius: var(--radius-xl);
  color: var(--ink);

  background:
    radial-gradient(1100px 460px at 50% -12%, rgba(255,255,255,0.14), transparent 60%),
    radial-gradient(900px 380px at 50% 118%, rgba(230,214,158,0.12), transparent 70%),
    linear-gradient(180deg, rgba(74,48,33,0.92) 0%, rgba(36,17,7,0.96) 100%);

  border: 1px solid var(--line);

  box-shadow:
    var(--shadow-strong),
    inset 0 0 12px rgba(0,0,0,0.18);

  position: relative;

  /* ✅ IMPORTANT : laisse les dropdowns déborder */
  overflow: visible;

  /* ❌ on retire le scroll interne, sinon ça coupe les overlays */
  max-height: none;

  scrollbar-width: none;
  z-index: 1;
}

.form-step::-webkit-scrollbar{
  width: 0;
  height: 0;
}

.form-step.active{
  display: flex;
  animation: lnStepIn .28s ease forwards;
}

/* ⚠️ IMPORTANT : finir sur transform:none, sinon ça crée un contexte gênant */
@keyframes lnStepIn{
  from{ opacity: 0; transform: translateY(18px); }
  to{ opacity: 1; transform: none; }
}

.form-step::before,
.form-step::after{
  content: none !important;
  display: none !important;
}

/* ============================================================
   TITRES
============================================================ */

.form-step h2,
.form-step h3,
.step-title{
  font-family: "Playfair Display", serif;
  font-weight: 400;
  margin: 0 0 10px;

  color: var(--ink);
  text-shadow:
    0 0 16px rgba(230,214,158,0.18),
    0 3px 20px rgba(0,0,0,0.50);
}

.step-title{
  font-size: clamp(1.25rem, 2.15vw, 1.90rem);
}

.subtitle{
  margin: 0 0 26px;   /* au lieu de 18px */
  color: rgba(255,255,255,0.76);
  font-size: 1.04rem;
  line-height: 1.65;
  font-family: "Inter";
}


.highlight{
  color: rgba(230,214,158,0.96);
  text-shadow: 0 0 18px rgba(230,214,158,0.14);
}

/* ============================================================
   LABELS
============================================================ */

/* Labels simples UNIQUEMENT (pas les composants) */
.form-step > label{
  display: inline-block;
  margin-top: 18px;
  margin-bottom: 10px;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}


.form-step .step-title + label,
.form-step h2 + label,
.form-step h3 + label,
.form-step .subtitle + label{
  margin-top: 10px;
}

/* ============================================================
   INPUTS — VERSION PREMIUM BRUN NACRÉ
============================================================ */

.form-step input:not([type="checkbox"]):not([type="radio"]),
.form-step textarea,
.form-step select{
  width: 100%;
  padding: 16px 20px;
  border-radius: var(--radius-md);

  background:
    radial-gradient(900px 380px at 50% -20%, rgba(255,255,255,0.16), transparent 70%),
    linear-gradient(180deg,
      rgba(117,84,60,0.28) 0%,
      rgba(88,57,38,0.36) 100%
    );

  border: 1px solid rgba(255,255,255,0.22);
  color: var(--ink);

  font-size: 1.06rem;
  letter-spacing: 0.01em;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 22px rgba(0,0,0,0.22);

  outline: none;

  transition:
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease,
    transform .22s ease;

  margin-bottom: 6px;
}

.form-step textarea{
  min-height: 130px;
  resize: vertical;
  line-height: 1.7;
}

.form-step input:not([type="checkbox"]):not([type="radio"])::placeholder,
.form-step textarea::placeholder{
  color: rgba(255,255,255,0.55);
}

/* ============================================================
   FOCUS
============================================================ */

.form-step input:not([type="checkbox"]):not([type="radio"]):focus,
.form-step textarea:focus,
.form-step select:focus{
  background:
    radial-gradient(900px 380px at 50% -20%, rgba(255,255,255,0.22), transparent 70%),
    linear-gradient(180deg,
      rgba(130,96,72,0.38) 0%,
      rgba(92,63,45,0.45) 100%
    );

  border-color: rgba(230,214,158,0.55);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 18px 32px rgba(0,0,0,0.32),
    0 0 0 4px rgba(230,214,158,0.12);

  transform: translateY(-1px);
}

/* ============================================================
   SELECT CHEVRON
============================================================ */

.form-step select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(230,214,158,0.85) 50%),
    linear-gradient(135deg, rgba(230,214,158,0.85) 50%, transparent 50%),
    linear-gradient(to right, rgba(255,255,255,0.14), rgba(255,255,255,0.14));

  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%,
    calc(100% - 40px) 50%;

  background-size:
    6px 6px,
    6px 6px,
    1px 24px;

  background-repeat: no-repeat;
}

.form-step.step-error {
  border: 2px solid #c62828;
}

.form-step .step-error-message {
  display: none;
  margin-top: 12px;
  font-size: 0.9rem;
  color: #c62828;
}

.form-step.step-error .step-error-message {
  display: block;
}


/* ============================================================
   EXCEPTION — STEP 0 BEST SELLER
   CTA marketing empilés volontairement
============================================================ */

#step0_best_seller .form-navigation{
  flex-direction: column;
}

#step0_best_seller .form-navigation .btn{
  width: 100%;
}


/* ============================================================
   FORM NAVIGATION — TOUJOURS HORIZONTAL
   Précédent à gauche / Suivant à droite
   Mobile & desktop — Huawei-friendly
============================================================ */

.form-navigation{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  margin-top: 28px;
}

/* Les boutons ne prennent plus toute la largeur */
.form-navigation .btn{
  width: auto;
  flex: 1 1 0;
  min-width: 0;
}

/* Alignements logiques */
.form-navigation .btn.prev{
  justify-content: center;
}

.form-navigation .btn.next{
  justify-content: center;
}

/* Sécurité mobile très étroit */
@media (max-width: 420px){
  .form-navigation{
    gap: 10px;
  }

  .form-navigation .btn{
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ============================================================
   PERF MODE MOBILE (Huawei-friendly)
============================================================ */

@media (hover:none) and (pointer:coarse){
  .form-step{
    background: rgba(58,36,24,0.92);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
    animation: none !important;
  }

  .form-step.active{
    animation: none !important;
  }

  .form-step h2,
  .form-step h3,
  .step-title{
    text-shadow: 0 2px 10px rgba(0,0,0,0.45);
  }

  .highlight{
    text-shadow: none;
  }

  .form-step input:not([type="checkbox"]):not([type="radio"]),
  .form-step textarea,
  .form-step select{
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: none;
    transition: none;
    transform: none;
  }

  .form-step input:not([type="checkbox"]):not([type="radio"]):focus,
  .form-step textarea:focus,
  .form-step select:focus{
    background: rgba(0,0,0,0.26);
    border-color: rgba(230,214,158,0.38);
    box-shadow: 0 0 0 3px rgba(230,214,158,0.10);
    transform: none;
  }

  .form-step select{
    background-image:
      linear-gradient(45deg, transparent 50%, rgba(230,214,158,0.80) 50%),
      linear-gradient(135deg, rgba(230,214,158,0.80) 50%, transparent 50%);
    background-position:
      calc(100% - 20px) 50%,
      calc(100% - 14px) 50%;
    background-size:
      6px 6px,
      6px 6px;
    background-repeat: no-repeat;
  }
}

/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce){
  .form-step.active{
    animation: none !important;
  }

  .form-step input:not([type="checkbox"]):not([type="radio"]),
  .form-step textarea,
  .form-step select{
    transition: none !important;
  }
}