/* ============================================================
   about.html — styles spécifiques
   Réutilise landing.css pour tout le reste (nav, .methode/.steps,
   .offres/.orow, .contact, footer, filtres SVG, révélations).
   ============================================================ */

.about-hero{
  position:relative;
  max-width:1210px;margin:0 auto;
  padding:clamp(38px,5.6vw,88px) var(--gutter) 0;
  text-align:center;
}
.about-kick{
  display:inline-block;
  font-size:clamp(13px,1.4vw,18px);
  letter-spacing:.02em;
  color:var(--mut);
}
.about-hero .display{
  font-size:clamp(44px,9vw,120px);
  margin-top:clamp(14px,2vw,26px);
}
.about-lede{
  max-width:52ch;
  margin:clamp(26px,3.4vw,46px) auto 0;
}
.about-lede p{
  font-size:clamp(14px,1.15vw,17px);
  line-height:1.5;
}
.about-fig{
  width:min(100%,860px);
  margin:clamp(40px,5.6vw,86px) auto 0;
  overflow:hidden;
}
.about-fig img{width:100%;filter:grayscale(1)}

/* Expertise : réutilise .otable/.orow, mais sans colonne « prix » */
.expertise .orow{grid-template-columns:minmax(200px,380px) 1fr}

@media (max-width:760px){
  .about-hero{padding-top:9vw}
  .about-hero .about-kick{font-size:max(10px,2.15vw)}
  .about-hero .display{font-size:12.5vw;line-height:.98}
  .about-lede{margin-top:6vw}
  .about-lede p{font-size:11px;line-height:1.7}
  .about-fig{margin-top:10vw}
  .expertise .orow{grid-template-columns:1fr;gap:1.4vw}
}