/* ════════════════════════════════════════════════════════════════
   CERFACIL — Page Solutions (structure inspirée d'AIVisibilityTracker,
   palette adaptée à la marque CerFacil : indigo #5D6FFF / #4A40FF)
   ════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital@1&display=swap');

.solutions-page { font-family: 'DM Sans', system-ui, sans-serif; color: #1a1c2e; background: #fbfbfe; }

/* En-têtes de section */
.about-section-header {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 40px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed #d9dcf0;
}
.as-tag { font-size: 11px; font-weight: 600; color: #9aa0c4; letter-spacing: 0.06em; }
.as-tag-right { font-size: 11px; color: #b9bde0; letter-spacing: 0.03em; }

/* ===== HERO ===== */
.about-hero {
  font-family: 'DM Sans', system-ui, sans-serif;
  padding: 64px 40px 48px;
  background-image: radial-gradient(circle, #e3e7ff 1px, transparent 1px);
  background-size: 28px 28px;
}
.about-hero-inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
}
.about-hero-left { flex: 1; }
.about-hero-title {
  font-size: clamp(28px, 4.4vw, 46px);
  font-weight: 700;
  color: #14162e;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin-bottom: 16px;
}
.about-hero-sub {
  background: linear-gradient(135deg, #ff6b9e 0%, #5D6FFF 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-family: 'Playfair Display', serif; font-style: italic; font-weight: 400;
}
.about-hero-desc {
  font-size: 14.5px; color: #6b7099; line-height: 1.7; max-width: 520px; margin-bottom: 28px;
}
.about-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-hero-primary {
  font-size: 14px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #5D6FFF, #4A40FF);
  border: none; padding: 12px 24px; border-radius: 50px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-hero-primary svg { width: 16px; height: 16px; transition: transform 0.2s; }
.btn-hero-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(74,64,255,0.28); }
.btn-hero-primary:hover svg { transform: translateX(3px); }
.btn-hero-secondary {
  font-size: 14px; font-weight: 500; color: #4A40FF; background: #fff;
  border: 1.5px solid #d9dcf0; padding: 12px 24px; border-radius: 50px; text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.btn-hero-secondary:hover { border-color: #5D6FFF; }
.about-hero-visual { width: 200px; flex-shrink: 0; }
.about-hero-visual svg { width: 100%; height: auto; }

/* ===== GRILLE DES SOLUTIONS ===== */
.solutions-grid-section { font-family: 'DM Sans', system-ui, sans-serif; padding: 56px 5% 64px; max-width: 1200px; margin: 0 auto; }
.solutions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 32px; }
.sol-card {
  background: #fff; border: 1px solid #ececf5; border-radius: 18px; padding: 28px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .25s, box-shadow .25s, border-color .25s; position: relative; overflow: hidden;
}
.sol-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(74,64,255,.14); border-color: var(--sol-color, #ccc); }
.sol-card--current { border-color: var(--sol-color); background: linear-gradient(180deg, rgba(93,111,255,.06), #fff 60%); }
.sol-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.sol-card__icon { width: 52px; height: 52px; border-radius: 14px; background: var(--sol-color, #111); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.sol-card__badge { padding: 4px 10px; background: var(--sol-color); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sol-card h3 { font-size: 22px; font-weight: 700; margin: 0; color: #14162e; letter-spacing: -0.01em; }
.sol-card em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--sol-color, #666); letter-spacing: .02em; }
.sol-card p { color: #5e6385; font-size: 14px; line-height: 1.6; margin: 6px 0 4px; }
.sol-card__feats { list-style: none; padding: 0; margin: 4px 0 14px; display: flex; flex-direction: column; gap: 6px; }
.sol-card__feats li { display: flex; gap: 8px; align-items: center; font-size: 13px; color: #4b5066; }
.sol-card__feats li i { color: #16a34a; font-size: 11px; }
.sol-card__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--sol-color, #111); padding: 10px 0; text-decoration: none; }
.sol-card__cta:hover { gap: 10px; }

/* ===== MISSION ===== */
.about-mission {
  font-family: 'DM Sans', system-ui, sans-serif;
  background-image: radial-gradient(circle, #d9dcf0 1px, transparent 1px);
  background-size: 28px 28px; border-top: 1px solid #ececf5;
}
.about-mission-body { max-width: 980px; margin: 0 auto; padding: 48px 40px 60px; display: flex; gap: 60px; align-items: flex-start; }
.mission-left, .mission-right { flex: 1; }
.mission-title { font-size: 18px; font-weight: 700; color: #14162e; margin-bottom: 16px; }
.mission-quote { font-family: 'Playfair Display', serif; font-style: italic; font-size: 14.5px; color: #4b5066; line-height: 1.7; border-left: 3px solid #5D6FFF; padding-left: 16px; margin: 0 0 18px 0; }
.mission-text { font-size: 13.5px; color: #6b7099; line-height: 1.7; margin-bottom: 14px; }
.mission-text:last-child { margin-bottom: 0; }

/* ===== CTA FINAL ===== */
.ready-section { background: linear-gradient(135deg, #5D6FFF 0%, #4A40FF 100%); padding: 84px 20px; text-align: center; font-family: 'DM Sans', sans-serif; }
.ready-title { font-size: clamp(28px, 4vw, 44px); font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-bottom: 14px; }
.ready-sub { font-size: 15px; color: rgba(255,255,255,0.82); line-height: 1.6; margin: 0 auto 32px; max-width: 460px; }
.ready-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-ready-primary { font-size: 14px; font-weight: 600; color: #4A40FF; background: #fff; border: none; padding: 13px 30px; border-radius: 50px; text-decoration: none; transition: transform 0.2s; }
.btn-ready-primary:hover { transform: translateY(-2px); }
.btn-ready-secondary { font-size: 14px; font-weight: 500; color: #fff; background: rgba(255,255,255,0.12); border: 1.5px solid rgba(255,255,255,0.5); padding: 13px 30px; border-radius: 50px; text-decoration: none; transition: background 0.2s; }
.btn-ready-secondary:hover { background: rgba(255,255,255,0.22); }

@media (max-width: 768px) {
  .about-hero-inner { flex-direction: column; }
  .about-hero-visual { width: 150px; align-self: center; }
  .about-mission-body { flex-direction: column; gap: 32px; }
}