/* =====================================================================
   Usine — "Demande de devis" Fluent Form premium styling
   Scoped to .ff-devis-cards (the radio container class set by the builder),
   so no other Fluent Form is affected.
   ===================================================================== */

.ff-devis-cards .ff-el-input--label label {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  color: #2f4534;
  margin-bottom: 6px;
}

.ff-devis-cards .ff-el-input--content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

/* Each option = a card */
.ff-devis-cards .ff-el-form-check {
  position: relative;
  margin: 0;
  padding: 0;
}

.ff-devis-cards .ff-el-form-check-label {
  display: block;
  padding: 20px 18px;
  border: 1px solid #e3d9c6;
  border-radius: 14px;
  background: #fbf7ef;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
  line-height: 1.45;
  color: #3a3a36;
  min-height: 100%;
}

.ff-devis-cards .ff-el-form-check-label:hover {
  border-color: #5c4429;
  box-shadow: 0 8px 22px rgba(92, 68, 41, 0.12);
  transform: translateY(-2px);
}

/* Hide the native radio dot, keep it accessible */
.ff-devis-cards input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* Bold the option title (text before the em dash) via styling the whole label;
   the title is naturally first. We emphasize the first line. */
.ff-devis-cards .ff-el-form-check-label {
  font-size: 15px;
}

/* Selected state (modern browsers: :has) */
.ff-devis-cards .ff-el-form-check:has(input:checked) .ff-el-form-check-label {
  border-color: #2f4534;
  background: #f0ede2;
  box-shadow: 0 0 0 2px rgba(47, 69, 52, 0.18), 0 10px 26px rgba(47, 69, 52, 0.12);
}

/* Keyboard focus ring */
.ff-devis-cards input[type="radio"]:focus-visible + span,
.ff-devis-cards .ff-el-form-check-label:focus-within {
  outline: 2px solid #2f4534;
  outline-offset: 3px;
}

/* Progress bar + step header tone to match the brand */
.fluentform .ff-step-header .ff-el-progress-bar {
  background: #2f4534;
}
.fluentform .ff-step-titles li.active {
  color: #2f4534;
}

@media (max-width: 600px) {
  .ff-devis-cards .ff-el-input--content {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   Wizard (multi-step) premium chrome — matches the Marchais Rénov mockup
   ===================================================================== */

/* Framed cream card around the whole form */
.fluentform .ff-step-container {
  background: #fdf9f1;
  border: 1px solid #e7ddca;
  border-radius: 22px;
  padding: clamp(20px, 4vw, 48px);
  box-shadow: 0 24px 60px rgba(92, 68, 41, 0.10);
}

/* Progress bar */
.fluentform .ff-el-progress {
  background: #e7ddca;
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}
.fluentform .ff-el-progress-bar {
  background: #2f4534;
  border-radius: 999px;
}
.fluentform .ff-el-progress-status-text { display: none; }

/* Step titles row */
.fluentform .ff-step-titles {
  display: flex;
  gap: 18px;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  flex-wrap: wrap;
}
.fluentform .ff-step-titles li {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b6a890;
  font-weight: 600;
}
.fluentform .ff-step-titles li.active { color: #2f4534; }

/* All question headings → serif green */
.fluentform .ff-el-input--label label {
  font-family: Georgia, "Times New Roman", serif;
  color: #2f4534;
}

/* Step navigation buttons (Continuer / Retour) + submit → brown pill */
.fluentform .step_nav button,
.fluentform .ff-btn-submit,
.fluentform button.ff_btn_style {
  background: #5c4429 !important;
  color: #fdf6ee !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 12px 26px !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 20px rgba(92, 68, 41, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fluentform .step_nav button:hover,
.fluentform .ff-btn-submit:hover {
  transform: translateY(-1px);
}
/* "Retour" as a quieter outline button */
.fluentform .step_nav .ff-btn-prev {
  background: transparent !important;
  color: #5c4429 !important;
  box-shadow: none !important;
  border: 1px solid #cdbfa6 !important;
}
.fluentform .step_nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
}