/* ══════════════════════════════════════════════════════════════════════
   FIXEO — "Comment ça marche" Premium Refonte
   Pure visual override — zero structural HTML changes
   ══════════════════════════════════════════════════════════════════════ */

/* ── Section wrapper: tighter padding ── */
.how-it-works-section {
  padding: 56px 0 64px !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Ambient gradient bleed */
.how-it-works-section::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 60% 40% at 20% 50%, rgba(225,48,108,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 50%, rgba(131,58,180,0.04) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.how-it-works-section > .container {
  position: relative !important;
  z-index: 1 !important;
}

/* ── Section header: compact ── */
.how-it-works-section .how-header {
  text-align: center !important;
  margin-bottom: 36px !important;
}
.how-it-works-section #how-title {
  font-size: clamp(1.55rem, 3vw, 2.2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 6px !important;
}
.how-it-works-section .how-subtitle {
  font-size: 0.88rem !important;
  color: rgba(255,255,255,0.52) !important;
  margin-top: 4px !important;
}

/* ──────────────────────────────────────────────
   STEPS GRID — Desktop: 4-col row
   Mobile:      horizontal snap scroll
────────────────────────────────────────────── */
.how-it-works-section .steps-container {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  align-items: stretch !important;
  position: relative !important;
  /* Remove the pseudo-line from homepage-v13 */
}

/* Remove old connector line */
.how-it-works-section .steps-container::before {
  display: none !important;
}

/* ── Connector arrows between cards ── */
.how-it-works-section .steps-container::after {
  display: none !important;
}

/* ── Step card ── */
.how-it-works-section .step-card {
  flex: 1 !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  border-radius: 20px !important;
  padding: 24px 20px 22px !important;
  background: rgba(255,255,255,0.028) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  cursor: default !important;
  transition: transform 0.26s cubic-bezier(0.22,1,0.36,1),
              background 0.22s ease,
              border-color 0.22s ease,
              box-shadow 0.26s ease !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12),
              inset 0 1px 0 rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  /* animation start state */
  opacity: 0;
  transform: translateY(22px);
}

/* Animated in state */
.how-it-works-section .step-card.hiw-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Hover lift */
.how-it-works-section .step-card:hover {
  transform: translateY(-5px) !important;
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.22),
              inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

/* ── Highlight cards (1 & 3) ── */
.how-it-works-section .step-highlight {
  background: rgba(225,48,108,0.06) !important;
  border: 1px solid rgba(225,48,108,0.18) !important;
  box-shadow: 0 2px 16px rgba(225,48,108,0.06),
              inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.how-it-works-section .step-highlight:hover {
  background: rgba(225,48,108,0.09) !important;
  border-color: rgba(225,48,108,0.28) !important;
  box-shadow: 0 14px 36px rgba(225,48,108,0.1),
              inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* ── Step number badge ── */
.how-it-works-section .step-number {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  color: rgba(255,255,255,0.9) !important;
  background: rgba(225,48,108,0.15) !important;
  border: 1px solid rgba(225,48,108,0.28) !important;
  box-shadow: none !important;
  margin: 0 0 14px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── Step icon ── */
.how-it-works-section .step-icon {
  font-size: 0 !important;       /* hide emoji text */
  line-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-bottom: 14px !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}
/* SVG inside icon slot */
.how-it-works-section .step-icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  stroke: rgba(255,255,255,0.75) !important;
  fill: none !important;
}
.how-it-works-section .step-highlight .step-icon {
  background: rgba(225,48,108,0.10) !important;
  border-color: rgba(225,48,108,0.22) !important;
}
.how-it-works-section .step-highlight .step-icon svg {
  stroke: rgba(225,48,108,0.9) !important;
}

/* ── Card title ── */
.how-it-works-section .step-card h3 {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  margin: 0 0 6px !important;
  color: rgba(255,255,255,0.95) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}

/* ── Card description ── */
.how-it-works-section .step-card p {
  font-size: 0.8rem !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,0.48) !important;
  margin: 0 !important;
  flex: 1 !important;
}

/* ── Connector arrow (injected between cards by JS) ── */
.hiw-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 22px !important;
  align-self: center !important;
  opacity: 0.25 !important;
}
.hiw-arrow svg {
  width: 14px !important;
  height: 14px !important;
  stroke: rgba(255,255,255,0.6) !important;
  fill: none !important;
  flex-shrink: 0 !important;
}

/* ══════════════════════════════════════════════
   MOBILE — Horizontal snap scroll
═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .how-it-works-section {
    padding: 44px 0 52px !important;
  }

  .how-it-works-section .steps-container {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    gap: 10px !important;
    padding: 4px 24px 16px !important;
    margin: 0 -24px !important;      /* bleed past container padding */
    scrollbar-width: none !important;
    grid-template-columns: unset !important; /* override grid from homepage-v13 */
    align-items: stretch !important;
  }
  .how-it-works-section .steps-container::-webkit-scrollbar {
    display: none !important;
  }

  .how-it-works-section .step-card {
    flex: 0 0 calc(80vw) !important;
    max-width: 280px !important;
    min-width: 220px !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    opacity: 1 !important;           /* skip stagger on mobile, always visible */
    transform: none !important;
  }
  .how-it-works-section .step-card:hover {
    transform: none !important;      /* no hover lift on touch */
  }

  /* Hide connector arrows on mobile */
  .hiw-arrow {
    display: none !important;
  }

  /* Scroll indicator dots */
  .hiw-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-top: 14px !important;
  }
  .hiw-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.2) !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
  }
  .hiw-dot.active {
    background: #E1306C !important;
    transform: scale(1.3) !important;
  }
}
@media (min-width: 769px) {
  .hiw-dots { display: none !important; }
}

/* ── Tablet: still 4-col but tighter ── */
@media (max-width: 1100px) and (min-width: 769px) {
  .how-it-works-section .step-card {
    padding: 20px 16px 18px !important;
  }
}

/* ── Stagger delays (desktop) ── */
@media (min-width: 769px) {
  .how-it-works-section .step-card:nth-child(1),
  .how-it-works-section .step-card:nth-child(2) { transition-delay: 0ms !important; }
  .how-it-works-section .step-card:nth-child(3),
  .how-it-works-section .step-card:nth-child(4) { transition-delay: 0ms !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   L-1: Process Section Premium Polish
   Append-only. Braces must stay balanced. Never modify existing blocks.
   ═══════════════════════════════════════════════════════════════════ */

/* ── L1-A: Section header — hide redundant tag, upgrade subtitle register ── */
/* The h2 is now "Simple. Rapide. Garanti." — the tag would repeat meaning */
.how-it-works-section .hiw-tag {
  display: none !important;
}

/* Subtitle: increase presence — it's the process promise, not a tooltip */
.how-it-works-section .how-subtitle {
  font-size: 0.92rem !important;
  color: rgba(255, 255, 255, 0.60) !important;
  letter-spacing: 0.005em !important;
  margin-top: 6px !important;
}

/* Title: tighter, more confident */
.how-it-works-section #how-title {
  letter-spacing: -0.025em !important;
}

/* ── L1-B: Step-4 highlight — emerald (payment safety) not pink (urgency) ── */
/* Step 4 carries the single biggest trust promise: "Vous payez après".
   Pink = urgency/danger register. Emerald = safety/success = correct. */
.how-it-works-section .step-highlight-payment {
  background: rgba(32, 201, 151, 0.06) !important;
  border: 1px solid rgba(32, 201, 151, 0.22) !important;
  box-shadow: 0 2px 16px rgba(32, 201, 151, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
.how-it-works-section .step-highlight-payment:hover {
  background: rgba(32, 201, 151, 0.10) !important;
  border-color: rgba(32, 201, 151, 0.36) !important;
  box-shadow: 0 14px 36px rgba(32, 201, 151, 0.10),
              inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
/* Step-4 number badge: emerald */
.how-it-works-section .step-highlight-payment .step-number {
  background: rgba(32, 201, 151, 0.18) !important;
  border-color: rgba(32, 201, 151, 0.38) !important;
}
/* Step-4 icon: emerald stroke */
.how-it-works-section .step-highlight-payment .step-icon {
  background: rgba(32, 201, 151, 0.10) !important;
  border-color: rgba(32, 201, 151, 0.24) !important;
}
.how-it-works-section .step-highlight-payment .step-icon svg {
  stroke: rgba(32, 201, 151, 0.92) !important;
}

/* ── L1-C: Description text — bump legibility ── */
/* Was 0.48 opacity on 0.8rem — borderline on small screens.
   0.58 = readable without losing the soft secondary register. */
.how-it-works-section .step-card p {
  color: rgba(255, 255, 255, 0.58) !important;
  font-size: 0.82rem !important;
  line-height: 1.6 !important;
}

/* ── L1-D: Step-4 description — key promise gets extra visual weight ── */
.how-it-works-section .step-highlight-payment p {
  color: rgba(32, 201, 151, 0.72) !important;
}

/* ── L1-E: Desktop h3 — slightly tighter line-height for 4-col layout ── */
@media (min-width: 769px) {
  .how-it-works-section .step-card h3 {
    font-size: 0.97rem !important;
    line-height: 1.25 !important;
  }
}

/* ── L1-F: Mobile — card sizing refinement ── */
/* 80vw cards can feel too wide on 390px. 78vw = 304px — more cards peek. */
@media (max-width: 640px) {
  .how-it-works-section .step-card {
    flex: 0 0 78vw !important;
    max-width: 300px !important;
  }
  /* Larger description on mobile for readability (touch = arm's length) */
  .how-it-works-section .step-card p {
    font-size: 0.84rem !important;
  }
}

/* ── L1-G: Transition section-top — add a faint separator gradient from artisan section ── */
/* The mini-trust strip sits between artisans and how-it-works.
   Add a faint top border to how-it-works itself for visual breathing. */
.how-it-works-section {
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   V3 — Orchestration Hierarchy Pass (append-only, v3)
   Goal: break the flat-4-equal-card monotony.
   Strategy: step 1 = "request" lead card (wider left anchor on desktop),
             step 4 = "payment trust" elevated card (deeper emerald glow).
             Steps 2/3 = lighter glass support cards, smaller visual weight.
   All changes: CSS-only, no DOM mutations.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Section ambient upgrade: richer backdrop ── */
.how-it-works-section::before {
  background:
    radial-gradient(ellipse 55% 60% at 10% 40%, rgba(225,48,108,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 55% 60% at 90% 60%, rgba(32,201,151,0.05) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 50% 100%, rgba(131,58,180,0.04) 0%, transparent 70%) !important;
}

/* ── Support cards (2 & 3): dial back weight ── */
/* They should recede, letting step-1 and step-4 lead */
.how-it-works-section .step-card:not(.step-highlight) {
  background: rgba(255,255,255,0.019) !important;
  border-color: rgba(255,255,255,0.055) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.10) !important;
}
.how-it-works-section .step-card:not(.step-highlight):hover {
  background: rgba(255,255,255,0.038) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.18) !important;
}
/* Support card text: lighter register */
.how-it-works-section .step-card:not(.step-highlight) h3 {
  color: rgba(255,255,255,0.80) !important;
}
.how-it-works-section .step-card:not(.step-highlight) p {
  color: rgba(255,255,255,0.42) !important;
}

/* ── Lead card (step 1 — pink): stronger presence ── */
.how-it-works-section .step-highlight:not(.step-highlight-payment) {
  background: rgba(225,48,108,0.08) !important;
  border-color: rgba(225,48,108,0.24) !important;
  box-shadow:
    0 0 0 1px rgba(225,48,108,0.10),
    0 4px 24px rgba(225,48,108,0.10),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
/* Subtle top shimmer on lead card */
.how-it-works-section .step-highlight:not(.step-highlight-payment)::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(225,48,108,0.55) 50%, transparent 100%) !important;
  border-radius: 20px 20px 0 0 !important;
  pointer-events: none !important;
}
.how-it-works-section .step-highlight:not(.step-highlight-payment):hover {
  background: rgba(225,48,108,0.11) !important;
  border-color: rgba(225,48,108,0.32) !important;
  box-shadow:
    0 0 0 1px rgba(225,48,108,0.14),
    0 16px 40px rgba(225,48,108,0.14),
    inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

/* ── Trust card (step 4 — emerald): deepened safety signal ── */
.how-it-works-section .step-highlight-payment {
  background: rgba(32,201,151,0.07) !important;
  border-color: rgba(32,201,151,0.26) !important;
  box-shadow:
    0 0 0 1px rgba(32,201,151,0.08),
    0 4px 24px rgba(32,201,151,0.10),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.how-it-works-section .step-highlight-payment::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(32,201,151,0.60) 50%, transparent 100%) !important;
  border-radius: 20px 20px 0 0 !important;
  pointer-events: none !important;
}
.how-it-works-section .step-highlight-payment:hover {
  background: rgba(32,201,151,0.10) !important;
  border-color: rgba(32,201,151,0.34) !important;
  box-shadow:
    0 0 0 1px rgba(32,201,151,0.12),
    0 16px 40px rgba(32,201,151,0.12),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* ── Connector arrows: directional gradient (left→right emphasis) ── */
.hiw-arrow {
  opacity: 0 !important; /* hidden by default — re-shown below */
}
@media (min-width: 769px) {
  .hiw-arrow {
    opacity: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 20px !important;
    align-self: center !important;
  }
  .hiw-arrow svg {
    width: 14px !important;
    height: 14px !important;
    stroke: rgba(255,255,255,0.22) !important;
    fill: none !important;
  }
  /* 2nd arrow (between steps 2→3) slightly brighter — middle of journey */
  .hiw-arrow:nth-of-type(4) svg { stroke: rgba(255,255,255,0.28) !important; }
  /* 3rd arrow (3→4) glows emerald — leads to trust step */
  .hiw-arrow:last-of-type svg { stroke: rgba(32,201,151,0.40) !important; }
}

/* ── Header: section tag back, styled as pill ── */
.how-it-works-section .hiw-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  background: rgba(225,48,108,0.10) !important;
  border: 1px solid rgba(225,48,108,0.22) !important;
  color: rgba(255,140,175,0.90) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}
/* Subtitle: sharper, more decisive */
.how-it-works-section .how-subtitle {
  font-size: 0.88rem !important;
  color: rgba(255,255,255,0.48) !important;
  max-width: 360px !important;
  margin: 6px auto 0 !important;
}

/* ── Step number: accent color per card type ── */
.how-it-works-section .step-card:not(.step-highlight) .step-number {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.50) !important;
}

/* ── Mobile: restore equal-height (scroll, not hierarchy) ── */
@media (max-width: 768px) {
  .how-it-works-section .step-highlight:not(.step-highlight-payment)::before,
  .how-it-works-section .step-highlight-payment::before {
    content: '' !important;
  }
  /* Restore equal-weight on mobile — horizontal scroll shows one at a time */
  .how-it-works-section .step-card:not(.step-highlight) {
    background: rgba(255,255,255,0.025) !important;
    border-color: rgba(255,255,255,0.07) !important;
  }
}