/* ============================================================
   FIXEO Chapter 4 — RAFI Intelligence (Trust)
   fc4-v1b — Namespace: fc4-* exclusively
   Answers: "Pourquoi ces artisans ?"
   Zero JS. Zero canvas. Pure CSS.
============================================================ */

/* ── Suppress JS-injected interruptions before Ch4 ─────────
   #fxf-mini-trust  = trust pills injected by homepage-conversion-optimizer.js
   #fixeo-homepage-explore = city EXPLORER strip injected by fixeo_homepage_premium_patch.js
   Suppressed here so the artisan section flows directly into Chapter 4.
──────────────────────────────────────────────────────────── */
#fxf-mini-trust {
  display: none !important;
}

#fixeo-homepage-explore {
  display: none !important;
}

/* ── Section container ─────────────────────────────────────── */
.fc4-chapter {
  background: var(--color-bg, #090b1a);
  padding: 96px 0 88px;
  position: relative;
}

.fc4-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0; /* Gaps controlled per-block for precise rhythm */
}

/* ── Header ────────────────────────────────────────────────── */
.fc4-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.fc4-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(72, 100, 255, 0.90);
  background: rgba(72, 100, 255, 0.08);
  border: 1px solid rgba(72, 100, 255, 0.18);
  border-radius: 100px;
  padding: 5px 14px;
  margin-bottom: 24px; /* Task 4: space after badge */
}

.fc4-title {
  font-size: clamp(1.55rem, 3.6vw, 2.15rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 20px; /* Task 4: space after title */
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.fc4-intro {
  font-size: clamp(0.92rem, 2vw, 1.04rem);
  line-height: 1.70;
  color: rgba(255, 255, 255, 0.50);
  margin: 0;
  max-width: 480px;
}

/* ── Spacer between header and steps ──────────────────────── */
.fc4-gap {
  height: 52px; /* Task 4: space between explanation and process */
  width: 100%;
  flex-shrink: 0;
}

/* ── Process steps ─────────────────────────────────────────── */
.fc4-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 400px;
  position: relative;
}

/* Vertical connector line */
.fc4-steps::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(72, 100, 255, 0.22) 12%,
    rgba(72, 100, 255, 0.22) 88%,
    transparent
  );
  pointer-events: none;
}

/* Task 5: each step is an independent block — ready for future animation */
.fc4-step {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  position: relative;
  /* data-fc4-step attribute reserved for future JS targeting */
}

.fc4-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(32, 201, 151, 0.09);
  border: 1.5px solid rgba(32, 201, 151, 0.30);
  color: rgba(32, 201, 151, 0.88);
  font-size: 0.70rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.fc4-step-label {
  font-size: clamp(0.88rem, 1.8vw, 0.97rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.4;
}

/* ── Spacer between steps and closing ──────────────────────── */
.fc4-gap-closing {
  height: 48px; /* Task 4: space before final message */
  width: 100%;
  flex-shrink: 0;
}

/* ── Closing statement ─────────────────────────────────────── */
.fc4-closing {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.fc4-closing-title {
  font-size: clamp(1.08rem, 2.4vw, 1.24rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.90);
  margin: 0;
  letter-spacing: -0.01em;
}

.fc4-closing-sub {
  font-size: clamp(0.86rem, 1.8vw, 0.96rem);
  color: rgba(255, 255, 255, 0.40);
  margin: 0;
  line-height: 1.60;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 679px) {
  .fc4-chapter {
    padding: 72px 0 64px;
  }

  .fc4-container {
    padding: 0 20px;
  }

  .fc4-gap {
    height: 40px;
  }

  .fc4-gap-closing {
    height: 36px;
  }

  .fc4-intro br {
    display: none;
  }

  .fc4-badge {
    margin-bottom: 20px;
  }
}

@media (max-width: 374px) {
  .fc4-chapter {
    padding: 56px 0 52px;
  }

  .fc4-container {
    padding: 0 16px;
  }

  .fc4-gap {
    height: 32px;
  }
}

/* ── Narrative bridge: Chapter 4 → FIXEO Entreprises ──────────
   fc4-bridge — pure typography, generous whitespace.
   aria-hidden: decorative/transitional, not essential content.
──────────────────────────────────────────────────────────────── */
.fc4-bridge {
  max-width: 520px;
  margin: 0 auto;
  padding: 72px 24px 64px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fc4-bridge-line {
  font-size: clamp(0.96rem, 2.2vw, 1.08rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  line-height: 1.55;
  letter-spacing: 0.005em;
}

.fc4-bridge-sub {
  font-size: clamp(0.84rem, 1.8vw, 0.93rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.28);
  margin: 0;
  line-height: 1.60;
}

@media (max-width: 679px) {
  .fc4-bridge {
    padding: 56px 20px 48px;
  }
}

@media (max-width: 374px) {
  .fc4-bridge {
    padding: 44px 16px 36px;
  }
}

/* ── Phase 2.2: Enterprise → Réseau FIXEO unification ────────
   Namespace: fxp2-* (homepage Phase 2.2)
   Approach: modifier classes + bridge — zero component rewrite
──────────────────────────────────────────────────────────────── */

/* Enterprise section: tighter bottom, fade toward vision */
.fxet-section--flow {
  padding-bottom: 56px !important; /* was 80px — closes the gap toward vision */
}

.fxet-section--flow::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, rgba(9, 11, 26, 0.60));
  pointer-events: none;
}

/* Soft divider between enterprise and vision — almost invisible */
.fxp2-divider--soft {
  opacity: 0.25 !important;
  margin: 0 !important;
}

/* Narrative bridge: Enterprise → Réseau FIXEO */
.fxp2-bridge {
  max-width: 520px;
  margin: 0 auto;
  padding: 48px 24px 40px;
  text-align: center;
}

.fxp2-bridge-line {
  font-size: clamp(0.93rem, 2vw, 1.04rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.42);
  margin: 0;
  line-height: 1.65;
  font-style: italic;
  letter-spacing: 0.01em;
}

/* Vision section as proof: tighter top, stronger connection to enterprise */
.fxv2-vision--proof {
  padding-top: 40px !important; /* was 64px — pulls section closer */
}

/* Reframe the vision eyebrow as evidence, not a new topic */
.fxv2-vision--proof .fxv2-eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.32); /* more muted — supporting role, not headline */
}

/* Vision headline: slightly softer weight to feel like supporting evidence */
.fxv2-vision--proof .fxv2-headline {
  font-size: clamp(1.30rem, 3.2vw, 1.85rem); /* slightly smaller than default */
  color: rgba(255, 255, 255, 0.82);
}

/* Manifesto: same muted treatment */
.fxv2-vision--proof .fxv2-manifesto {
  color: rgba(255, 255, 255, 0.44);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 679px) {
  .fxp2-bridge {
    padding: 36px 20px 28px;
  }

  .fxv2-vision--proof {
    padding-top: 28px !important;
  }

  .fxet-section--flow {
    padding-bottom: 44px !important;
  }
}

@media (max-width: 374px) {
  .fxp2-bridge {
    padding: 28px 16px 22px;
  }
}

/* ── Phase 2.3: Blog as Epilogue ──────────────────────────────
   Namespace: fxp23-* (homepage Phase 2.3)
   Blog becomes a quiet resource, not a new chapter.
──────────────────────────────────────────────────────────────── */

/* Editorial bridge: Network → Blog */
.fxp23-bridge {
  max-width: 480px;
  margin: 0 auto;
  padding: 44px 24px 0;
  text-align: center;
}

.fxp23-bridge-line {
  font-size: clamp(0.88rem, 1.8vw, 0.97rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.32);
  margin: 0;
  line-height: 1.60;
  letter-spacing: 0.01em;
}

/* Blog section — epilogue modifier */
.fxblog-section--epilogue {
  padding: 3rem 0 3.5rem !important; /* was 5rem — quieter presence */
}

/* Heading: reduced prominence */
.fxblog-section--epilogue .fxblog-title {
  font-size: 1.45rem !important; /* was 2rem */
  font-weight: 700 !important;   /* was 800 */
  color: rgba(232, 234, 240, 0.78) !important; /* slightly muted */
}

/* Tag: same but softer */
.fxblog-section--epilogue .fxblog-tag {
  color: rgba(224, 64, 251, 0.65) !important; /* was full 0.8+ */
}

/* "Voir tous" link: proportionally quieter */
.fxblog-section--epilogue .fxblog-see-all {
  font-size: 0.84rem !important;
  color: rgba(224, 64, 251, 0.60) !important;
}

/* Head row: tighter margin */
.fxblog-section--epilogue .fxblog-head {
  margin-bottom: 1.4rem !important; /* was 2rem */
}

/* Card grid: tighter gap */
.fxblog-section--epilogue .fxblog-grid {
  gap: 0.9rem !important; /* was 1.25rem */
}

/* Cards: slightly smaller body padding */
.fxblog-section--epilogue .fxblog-card-body {
  padding: 1rem !important; /* was 1.25rem */
  gap: 0.45rem !important;
}

/* Card titles: one notch smaller */
.fxblog-section--epilogue .fxblog-card-title {
  font-size: 0.91rem !important; /* was 0.97rem */
}

/* Spacious divider before Final CTA */
.section-divider--spacious {
  margin-top: 48px !important;
  margin-bottom: 0 !important;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 679px) {
  .fxp23-bridge {
    padding: 32px 20px 0;
  }

  .fxblog-section--epilogue {
    padding: 2.5rem 0 3rem !important;
  }

  .fxblog-section--epilogue .fxblog-title {
    font-size: 1.25rem !important;
  }

  .section-divider--spacious {
    margin-top: 32px !important;
  }
}

@media (max-width: 374px) {
  .fxp23-bridge {
    padding: 24px 16px 0;
  }
}

/* ── Phase 2.4: Final CTA as RAFI Conclusion ──────────────────
   Namespace: fcta-* (final-cta conclusion modifiers)
   The page opens with RAFI. It closes with RAFI.
──────────────────────────────────────────────────────────────── */

/* Generous breathing — last screen of the homepage */
.final-cta-section--conclusion {
  padding-top: 112px !important;
  padding-bottom: 104px !important;
}

/* RAFI eyebrow — small typographic cue, not decorative */
.fcta-rafi-eyebrow {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(72, 100, 255, 0.70);
  margin: 0 0 16px;
  line-height: 1;
}

/* Title: confident and calm — not a feature headline */
.final-cta-section--conclusion .final-cta-title {
  font-size: clamp(1.65rem, 3.6vw, 2.55rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.18 !important;
  max-width: 480px !important;
  margin: 0 auto 14px !important;
}

/* Subtitle: the journey summary in one line */
.final-cta-section--conclusion .final-cta-sub {
  font-size: 0.92rem !important;
  color: rgba(255, 255, 255, 0.48) !important;
  margin-bottom: 36px !important;
  line-height: 1.55 !important;
}

/* Primary CTA: give it room to breathe */
.final-cta-section--conclusion .cta-main {
  margin-bottom: 0 !important;
}

/* Secondary urgent CTA — suppressed for clean conclusion */
.final-cta-section--conclusion .btn-express.final-cta-urgent {
  display: none !important;
}

/* Proof line — suppressed (already quiet, but redundant after subtitle) */
.final-cta-section--conclusion .final-cta-proof {
  display: none !important;
}

/* RAFI bust copy: updated to match conclusion tone */
.final-cta-section--conclusion .rafi-fcta-copy {
  font-size: 0.84rem !important;
  color: rgba(255, 255, 255, 0.42) !important;
  line-height: 1.55 !important;
  margin-top: 14px !important;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 899px) {
  .final-cta-section--conclusion {
    padding-top: 88px !important;
    padding-bottom: 80px !important;
  }
}

@media (max-width: 679px) {
  .final-cta-section--conclusion {
    padding-top: 72px !important;
    padding-bottom: 68px !important;
  }

  .final-cta-section--conclusion .final-cta-title {
    font-size: clamp(1.45rem, 6vw, 1.85rem) !important;
  }

  .fcta-rafi-eyebrow {
    font-size: 0.60rem;
  }
}