/* À propos — cohérent avec le thème (cards, gradients, boutons existants) */

.about-hero{
  margin-top:18px;
  border-radius:18px;
  overflow:hidden;
  box-shadow: var(--shadow);
  position:relative;
  min-height: 320px;
  background-size: cover;
  background-position: center;
  color:#1b3b52;
}

.about-hero-overlay{
  position:absolute;
  inset:0;
  
  pointer-events:none;
}

.about-hero-content{
  position:relative;
  z-index:1;
  padding:34px 50px;
  max-width: 720px;
}

.about-hero h1{
  margin:0 0 12px;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.05;
}
.about-hero h1 span{ color:#1b3b52; font-weight:700; }
.about-hero p{
  margin:0 0 18px;
  color:#1b3b52;
  font-weight: 600;
  max-width: 640px;
}

.about-hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* STATS */
.stats{
  margin-top:18px;
  background:linear-gradient(180deg,#ffffff 0%, #f1f5f9 100%);
  border-radius:14px;
  box-shadow: 0 14px 28px rgba(0,0,0,.08);
  padding:18px 18px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
}
.stat{
  display:flex;gap:14px;align-items:flex-start;
  padding:10px 10px;border-right:1px solid rgba(0,0,0,.06);
}
.stat:last-child{border-right:0}
.stat img{width:54px;height:54px}
.stat b{display:block;font-size:18px}
.stat small{display:block;color:var(--muted);margin-top:4px;font-weight:500}
@media (max-width: 900px){
  .stats{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid rgba(0,0,0,.06)}
  .stat:last-child{border-bottom:0}
}

/* POURQUOI */
.about-block{
  margin-top:18px;

  gap:18px;
  align-items:stretch;
}

.about-block-left{
  background:#fff;
  border-radius:16px;
  box-shadow: var(--shadow);
  padding:22px;
}

.about-block-left h2{
  margin:0 0 10px;
  font-size:30px;
  font-weight:900;
  color:#1b3b52;
}

.about-block-left .lead{
  margin:0 0 14px;
  color: var(--muted);
  font-weight: 600;
}

.checklist{
  margin:0;
  padding:0;
  list-style:none;
}
.checklist li{
  padding-left:28px;
  position:relative;
  margin:10px 0;
  font-weight:700;
  color:#1b3b52;
}

.about-image{
  border-radius:16px;
  box-shadow: var(--shadow);
  background-size: cover;
  background-position: center;
  min-height: 280px;
}

/* Différence (fond image + overlay) */
.about-diff{
  margin-top:18px;
  border-radius:18px;
  overflow:hidden;
  box-shadow: var(--shadow);
  position:relative;
  background-size: cover;
  background-position:center;
  color:#1b3b52;
}

.about-diff-overlay{
  position:absolute;
  inset:0;

  pointer-events:none;
}

.about-diff-content{
  position:relative;
  z-index:1;
  padding:26px 22px;
}

.about-diff h2{
  margin:0 0 12px;
  font-size:30px;
  font-weight:900;
}

.diff-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:12px;
  max-width: 820px;
  
}
.diff-list li{
  background: rgba(255, 255, 255, 0.886);
  border: 1px solid rgba(255,255,255,.16);
  border-radius:14px;
  padding:14px 16px;
  backdrop-filter: blur(2px);
}

.center-cta{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.center-cta h3{
  margin:0;
  font-weight:900;
  font-size:20px;
}

/* Responsive */
@media (max-width: 900px){
  .about-block{ grid-template-columns: 1fr; }
  .about-hero-content{ padding:28px 20px; }
  .about-hero h1{ font-size: 32px; }
  .arrow{ display:none; }
}