/**
 * why-fixeo.css
 * "Pourquoi choisir Fixeo" — ultra-premium dark glass trust section
 * Replaces feed/réalisations section.
 */

/* ── Section ─────────────────────────────────────────────────────────── */
#why-fixeo-section {
  padding-top: 48px;
  padding-bottom: 56px;
  position: relative;
  overflow: hidden;
}

/* Subtle radial glow background */
#why-fixeo-section::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse at center, rgba(225,48,108,0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

#why-fixeo-section .container {
  position: relative;
  z-index: 1;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.why-fixeo-header {
  text-align: center;
  margin-bottom: 40px !important;
}
.why-fixeo-header h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  background: linear-gradient(135deg, #fff 30%, rgba(255,255,255,0.65) 100%);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: 10px !important;
}
.why-fixeo-header p {
  font-size: 0.92rem !important;
  color: rgba(255,255,255,0.52) !important;
  max-width: 480px !important;
  margin: 0 auto !important;
}

/* ── Grid ────────────────────────────────────────────────────────────── */
.why-fixeo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  align-items: stretch;
}

/* ── Card ────────────────────────────────────────────────────────────── */
.wf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 24px 20px 22px;
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1),
              border-color 0.22s ease,
              background 0.22s ease,
              box-shadow 0.22s ease;
  cursor: default;
  overflow: hidden;
}

/* Hover state */
.wf-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.065);
  box-shadow: 0 20px 48px rgba(0,0,0,0.28), 0 1px 0 rgba(255,255,255,0.06) inset;
}

/* Subtle glow per card on hover */
.why-card-1:hover { border-color: rgba(32,201,151,0.28); box-shadow: 0 20px 48px rgba(32,201,151,0.10); }
.why-card-2:hover { border-color: rgba(100,160,255,0.28); box-shadow: 0 20px 48px rgba(100,160,255,0.10); }
.why-card-3:hover { border-color: rgba(225,48,108,0.28); box-shadow: 0 20px 48px rgba(225,48,108,0.10); }
.why-card-4:hover { border-color: rgba(255,193,7,0.28);  box-shadow: 0 20px 48px rgba(255,193,7,0.10); }
.why-card-5:hover { border-color: rgba(131,58,180,0.28); box-shadow: 0 20px 48px rgba(131,58,180,0.10); }

/* Card top shimmer line */
.wf-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.12) 50%, transparent 100%);
  border-radius: 20px 20px 0 0;
}

/* ── Icon wrapper ────────────────────────────────────────────────────── */
.wf-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.09);
  transition: background 0.20s, border-color 0.20s;
}
.wf-card:hover .wf-icon-wrap {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.16);
}
.wf-icon-wrap svg {
  width: 20px;
  height: 20px;
}

/* Per-card icon colours */
.why-card-1 .wf-icon-wrap { background: rgba(32,201,151,0.12); border-color: rgba(32,201,151,0.22); }
.why-card-1 .wf-icon-wrap svg { stroke: #20c997; }

.why-card-2 .wf-icon-wrap { background: rgba(100,160,255,0.12); border-color: rgba(100,160,255,0.22); }
.why-card-2 .wf-icon-wrap svg { stroke: #64a0ff; }

.why-card-3 .wf-icon-wrap { background: rgba(225,48,108,0.12); border-color: rgba(225,48,108,0.22); }
.why-card-3 .wf-icon-wrap svg { stroke: #E1306C; }

.why-card-4 .wf-icon-wrap { background: rgba(255,193,7,0.12); border-color: rgba(255,193,7,0.22); }
.why-card-4 .wf-icon-wrap svg { stroke: #ffc107; }

.why-card-5 .wf-icon-wrap { background: rgba(131,58,180,0.12); border-color: rgba(131,58,180,0.22); }
.why-card-5 .wf-icon-wrap svg { stroke: #a855f7; }

/* ── Text ────────────────────────────────────────────────────────────── */
.wf-card h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.wf-card p {
  margin: 0;
  font-size: 0.80rem;
  color: rgba(255,255,255,0.50);
  line-height: 1.55;
}

/* ── Entrance animation ──────────────────────────────────────────────── */
.wf-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.50s ease, transform 0.50s cubic-bezier(0.22,1,0.36,1),
              border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}
.wf-card.wf-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/* 4-col at ~1100px */
@media (max-width: 1100px) {
  .why-fixeo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 2-col tablet */
@media (max-width: 768px) {
  #why-fixeo-section {
    padding-top: 36px;
    padding-bottom: 40px;
  }
  .why-fixeo-header {
    margin-bottom: 28px !important;
  }
  .why-fixeo-header h2 {
    font-size: 1.45rem !important;
  }
  .why-fixeo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .wf-card {
    padding: 20px 16px 18px;
    gap: 12px;
    border-radius: 18px;
  }
  .wf-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .wf-icon-wrap svg {
    width: 18px;
    height: 18px;
  }
  .wf-card h3 { font-size: 0.88rem; }
  .wf-card p  { font-size: 0.76rem; }
}

/* Single col mobile */
@media (max-width: 480px) {
  .why-fixeo-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .wf-card {
    flex-direction: row;
    align-items: flex-start;
    padding: 16px 14px;
    gap: 14px;
    border-radius: 16px;
  }
  .wf-icon-wrap {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
  }
  .wf-card > div:last-of-type,
  .wf-card-text {
    flex: 1;
  }
  .wf-card h3 { font-size: 0.86rem; margin-bottom: 3px; }
  .wf-card p  { font-size: 0.74rem; }
}

/* ── Contrast boost ─────────────────────────────────────────────────── */
.wf-card h3 {
  color: rgba(255,255,255,0.96) !important;
  font-size: 0.97rem !important;
}
.wf-card p {
  color: rgba(255,255,255,0.60) !important;
  font-size: 0.82rem !important;
}
.wf-card {
  background: rgba(255,255,255,0.055) !important;
  border-color: rgba(255,255,255,0.11) !important;
}
/* Make entrance animation start from further away for more impact */
.wf-card:not(.wf-visible) {
  opacity: 0 !important;
  transform: translateY(28px) scale(0.97) !important;
}
.wf-card.wf-visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22,1,0.36,1),
              border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease !important;
}

/* ══════════════════════════════════════════════════════════════════════
   M-1: Intelligent Marketplace System — Copy & Visual Polish
   Append-only. Zero existing lines modified. Braces balanced.
   ═══════════════════════════════════════════════════════════════════ */

/* ── M1-A: Section tag — hide (h2 already carries section identity) ── */
/* "TECHNOLOGIE FIXEO" over "Le système intelligent…" = same redundancy as L-1 */
#why-fixeo-section .wfx-tag {
  display: none !important;
}

/* ── M1-B: Subtitle — slightly more visible (was 0.52 opacity) ── */
/* New copy is shorter + warmer — deserves more presence */
#why-fixeo-section .why-fixeo-header p {
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 0.88rem !important;
  max-width: 420px !important;
}

/* ── M1-C: why-card-6 hover — was missing entirely (bug fix) ── */
/* Matched to star icon (gold) — same register as rating/reputation signal */
.why-card-6:hover {
  border-color: rgba(255, 193, 7, 0.28) !important;
  box-shadow: 0 20px 48px rgba(255, 193, 7, 0.10) !important;
}
.why-card-6 .wf-icon-wrap {
  background: rgba(255, 193, 7, 0.10);
  border-color: rgba(255, 193, 7, 0.20);
}
.why-card-6 .wf-icon-wrap svg {
  stroke: #ffc107;
}

/* ── M1-D: Description text — slightly more legible ── */
/* was rgba(255,255,255,0.60) — fine; but new descriptions are longer */
/* bump line-height for the longer copy to breathe */
.wf-card p {
  line-height: 1.6 !important;
}

/* ── M1-E: Mobile (≤ 480px) — description size for longer text ── */
/* New descriptions are ~10 words longer on average; 0.74rem was borderline */
@media (max-width: 480px) {
  .wf-card p {
    font-size: 0.76rem !important;
    line-height: 1.55 !important;
  }
  /* Horizontal card layout at ≤480px: ensure text column fills properly */
  .wf-card .fxm-block-content {
    flex: 1;
    min-width: 0;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   V3 — Intelligence Section Hierarchy Pass (append-only, v3)
   Goal: Fix 5-col 6-card layout (card-6 alone on row 2).
         Promote card-1 to anchor "hero" card (wider, elevated).
         Add visual depth — warm dark tones, accented focal card.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Section ambient: richer dark depth ── */
#why-fixeo-section::before {
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(225,48,108,0.09) 0%, transparent 65%) !important;
  width: 100% !important;
  height: 500px !important;
  top: -60px !important;
  left: 0 !important;
  transform: none !important;
}
/* Add second ambient spot — purple depth from bottom-right */
#why-fixeo-section::after {
  content: '' !important;
  position: absolute !important;
  bottom: -60px; right: -80px !important;
  width: 500px; height: 400px !important;
  background: radial-gradient(ellipse at center, rgba(131,58,180,0.07) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ── Grid: 3+3 layout (fixes the 5-col orphan bug) ── */
/* was: repeat(5, 1fr) → card-6 alone on row 2 = full width */
/* fix: repeat(3, 1fr) → 2 clean rows of 3 */
.why-fixeo-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}
/* Re-establish the promote-card-1 as a wide anchor: spans 2 cols */
/* "Le bon artisan, au bon moment" is the core value prop — it leads */
.why-fixeo-grid .why-card-1 {
  grid-column: span 2 !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 20px !important;
  padding: 28px 28px 26px !important;
  background: rgba(32,201,151,0.06) !important;
  border-color: rgba(32,201,151,0.18) !important;
  box-shadow:
    0 0 0 1px rgba(32,201,151,0.07),
    0 4px 24px rgba(32,201,151,0.08),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
/* Top shimmer line on anchor card */
.why-fixeo-grid .why-card-1::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.45) 40%, transparent 100%) !important;
  border-radius: 20px 20px 0 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
/* Remove the existing ::after shimmer on why-card-1 (would double-stack) */
.why-fixeo-grid .why-card-1.wf-card::after {
  display: none !important;
}
/* Anchor card: bigger icon */
.why-fixeo-grid .why-card-1 .wf-icon-wrap {
  width: 52px !important;
  height: 52px !important;
  flex-shrink: 0 !important;
  border-radius: 16px !important;
  background: rgba(32,201,151,0.14) !important;
  border-color: rgba(32,201,151,0.28) !important;
}
.why-fixeo-grid .why-card-1 .wf-icon-wrap svg {
  width: 24px !important; height: 24px !important;
}
/* Anchor card: larger h3 */
.why-fixeo-grid .why-card-1 .wf-card h3,
.why-fixeo-grid .why-card-1 h3 {
  font-size: 1.05rem !important;
  font-weight: 750 !important;
  color: rgba(255,255,255,0.97) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  margin-bottom: 6px !important;
}
.why-fixeo-grid .why-card-1 p {
  font-size: 0.86rem !important;
  color: rgba(255,255,255,0.58) !important;
  line-height: 1.65 !important;
  max-width: 420px !important;
}
/* Anchor card hover */
.why-fixeo-grid .why-card-1:hover {
  background: rgba(32,201,151,0.09) !important;
  border-color: rgba(32,201,151,0.28) !important;
  box-shadow:
    0 0 0 1px rgba(32,201,151,0.10),
    0 18px 44px rgba(32,201,151,0.11),
    inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

/* ── Support cards (2-6): reduced backdrop, more breathing ── */
.why-fixeo-grid .wf-card:not(.why-card-1) {
  background: rgba(255,255,255,0.038) !important;
  border-color: rgba(255,255,255,0.085) !important;
  padding: 22px 18px 20px !important;
}
.why-fixeo-grid .wf-card:not(.why-card-1) h3 {
  font-size: 0.90rem !important;
  color: rgba(255,255,255,0.87) !important;
}
.why-fixeo-grid .wf-card:not(.why-card-1) p {
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.48) !important;
}

/* ── Section header: bring back tag, upgrade h2 ── */
#why-fixeo-section .wfx-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  background: rgba(131,58,180,0.12) !important;
  border: 1px solid rgba(131,58,180,0.26) !important;
  color: rgba(190,140,255,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;
}

/* ── Responsive grid fixes ── */
/* Tablet: anchor card back to full-width, all equal */
@media (max-width: 1100px) and (min-width: 769px) {
  .why-fixeo-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .why-fixeo-grid .why-card-1 {
    grid-column: span 2 !important;
  }
}
/* 768px and below: 2-col grid, anchor reverts to 1-col */
@media (max-width: 768px) {
  .why-fixeo-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .why-fixeo-grid .why-card-1 {
    grid-column: span 2 !important; /* full width on tablet portrait */
    flex-direction: row !important;
    padding: 20px 16px !important;
    gap: 14px !important;
  }
  .why-fixeo-grid .why-card-1 .wf-icon-wrap {
    width: 44px !important; height: 44px !important;
  }
  .why-fixeo-grid .why-card-1 h3 { font-size: 0.97rem !important; }
  .why-fixeo-grid .why-card-1 p  { font-size: 0.82rem !important; }
}
/* 480px: single col, all cards equal */
@media (max-width: 480px) {
  .why-fixeo-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .why-fixeo-grid .why-card-1 {
    grid-column: span 1 !important;
    flex-direction: row !important;
    padding: 16px 14px !important;
    gap: 14px !important;
  }
  .why-fixeo-grid .why-card-1 .wf-icon-wrap {
    width: 42px !important; height: 42px !important;
  }
  .why-fixeo-grid .why-card-1 h3 { font-size: 0.93rem !important; }
  .why-fixeo-grid .why-card-1 p  { font-size: 0.80rem !important; max-width: none !important; }
}

/* V3-fix: clip the bottom-right ambient glow that was causing horizontal overflow */
#why-fixeo-section {
  overflow: hidden !important;
}