/* ============================================================
   FUSION — ABOUT.CSS (À propos)
============================================================ */

.page-about .page-hero { height: clamp(250px, 20.6vw, 420px); }
.about-intro { padding: 90px 0 90px; }
.about-intro-text { max-width: 1010px; margin: 0 auto; text-align: center; }
.about-intro-text .sec-sub { margin-top: 0; }
.about-intro-text .sec-text { color: var(--f-white); line-height: 1.9; }

.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 70px; max-width: 1020px; margin: 70px auto 0; }
.about-stat { background: var(--f-card); border-radius: 10px; padding: 40px 12px 30px; text-align: center; }
.about-stat .f-num { font-size: clamp(38px, 2.6vw, 52px); }
.about-stat .f-num-label { font-size: 15px; margin-top: 22px; }

.about-big-title {
  font-family: var(--f-font-title); font-weight: 700; text-transform: uppercase;
  color: var(--f-blue); font-size: clamp(20px, 1.65vw, 31px); line-height: 1.25; margin-top: 18px;
}
.about-big-title.is-white, .about-big-title .is-white { color: var(--f-white); }
.about-lead { max-width: 1060px; margin: 22px auto 0; font-size: clamp(16px, 1.1vw, 20px); line-height: 1.6; color: var(--f-white); }

/* ── Timeline ─────────────────────────────────────────────── */
.about-evolution { padding: 20px 0 100px; }
.about-timeline { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 60px; max-width: 1060px; margin: 60px auto 0; }
.tl-card { display: flex; align-items: center; gap: 24px; background: var(--f-card); border-radius: 14px; padding: 30px 30px; transition: box-shadow .3s ease, transform .3s ease; }
.tl-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(0,155,243,.45); }
.tl-icon { width: 70px; height: 70px; flex: none; }
.tl-card h3 { font-family: var(--f-font-body); text-transform: uppercase; font-size: 15px; margin-bottom: 10px; }
.tl-year { font-family: var(--f-font-title); color: var(--f-blue); font-size: 18px; }
.tl-card p { font-size: 13.5px; line-height: 1.5; color: var(--f-white); margin: 0; }

/* ── ADN ──────────────────────────────────────────────────── */
.about-dna { padding: 20px 0 100px; }
.about-values { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 28px; max-width: 800px; margin: 44px auto 0; }
.value-card {
  border: 1px solid #1f3d6e; border-radius: 6px;
  background: #05070c;
  padding: 34px 24px 30px; text-align: center;
  min-height: 132px;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.value-card:hover { border-color: var(--f-blue); box-shadow: 0 0 30px rgba(0,155,243,.18); }
.value-card h3 { font-family: var(--f-font-body); font-weight: 600; text-transform: uppercase; font-size: 15px; margin-bottom: 12px; }
.value-card p { font-size: 13px; line-height: 1.5; margin: 0; }
.value-card p strong { font-weight: 700; color: var(--f-white); }

/* ── Clients ──────────────────────────────────────────────── */
.about-clients { padding: 40px 0 140px; }
.about-clients-text { font-size: 15px; color: var(--f-silver); margin: 8px 0 70px; }
.about-clients .clients-light-grid { max-width: 1520px; margin: 0 auto; }
.about-clients .about-lead { margin-bottom: 64px; }