/* ============================================================
   MY VTC GO — ABOUT.CSS
   Styles spécifiques à la page À propos.
   Le reste de la page (sections, read-more, footer) utilise
   les classes globales déjà définies dans global.css.
   ============================================================ */

.about-hero {
  padding: calc(var(--header-h) + 56px) 0 60px;
  background: var(--surface);
  border-bottom: 1px solid var(--stroke);
}
.about-hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 800px) {
  .about-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .about-hero-photo { order: -1; max-width: 240px; margin: 0 auto 8px; }
}
.about-hero h1 { margin: 18px 0; }
.about-hero .lead {
  color: var(--text-mid);
  max-width: 560px;
}
.about-hero-photo {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
  box-shadow: 0 20px 50px -10px rgba(0,0,0,0.25);
}
.about-hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.about-hero-photo-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.78));
  color: #fff;
  padding: 36px 18px 16px;
  font-size: 0.84rem;
  font-weight: 600;
  text-align: center;
}