/* Page À propos — Cobuild Africa
   Sections propres à a-propos.html : mot du fondateur et les trois piliers. */

/* Sous-titre du bandeau, écarté du titre comme celui du blog. */
.apropos-hero__lede { margin-top: var(--space-8); }

/* ── Mot du fondateur ───────────────────────────────────── */

/* Le portrait suit la lecture du texte, sous la hauteur de l'en-tête collant. */
.founder__aside {
  position: sticky;
  top: 7rem;
}
/* Une fois les deux colonnes empilées (voir .split-aside), le portrait est
   au-dessus du texte : le garder collant le figerait en haut de l'écran. */
@media (max-width: 900px) {
  .founder__aside { position: static; }
}
.founder__role {
  margin-top: var(--space-5);
}
.founder__lead {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1.35;
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-10);
  color: var(--text-primary);
}

/* ── Piliers ────────────────────────────────────────────── */

/* Trois variantes de fond, posées en clair dans a-propos.html ;
   --pillar-accent colore le numéro. */
.pillar--ivory {
  background: var(--surface-raised);
  --pillar-accent: var(--gold-700);
}
.pillar--page {
  background: var(--surface-page);
  --pillar-accent: var(--gold-700);
}
.pillar--dark {
  background: var(--surface-inverse);
  color: var(--text-on-dark);
  --heading-color: currentColor;
  --pillar-accent: var(--gold-400);
}

/* Un pilier sur deux place l'image à gauche. */
.pillar--flip .pillar__body  { order: 2; }
.pillar--flip .pillar__media { order: 1; }
/* Empilés (sous 770 px, où .split passe à une colonne), les piliers
   inversés reprennent l'ordre écrit : le texte, puis la photo. */
@media (max-width: 770px) {
  .pillar--flip .pillar__body,
  .pillar--flip .pillar__media { order: 0; }

  /* L'arche du pilier 01 reprend le cadre de « L'art de vivre » à l'accueil
     (.living__photo) : 4/5, bornée à 24 rem et centrée. Le séjour, très en
     hauteur, se recadre au centre au lieu de prendre tout l'écran. */
  .pillar__media--arch {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    width: 100%;
    max-width: 24rem;
    justify-self: center;
  }
}

/* Pilier 03 : quatre vues des services, en 2 x 2 dans la colonne. */
.pillar__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.pillar__number {
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--pillar-accent);
  margin-bottom: var(--space-6);
}

/* ── Habillage « brochure » ─────────────────────────────── */

/* Comme la page « Conciergerie 24h/24 » de la brochure : le visuel en arche,
   cerné d'un cheveu doré posé à distance. L'outline ne prend pas de place
   dans la grille et ne fait jamais défiler la page, même à 10 px du bord. */
.pillar__media--arch {
  border-radius: var(--radius-pill) var(--radius-pill) var(--radius-image) var(--radius-image);
  outline: 1px solid var(--pillar-accent);
  outline-offset: 10px;
}
/* Variante inclinée (pilier 02) : comme la salle de bain de la brochure,
   l'arche ne coiffe pas le visuel mais le balaye en biais — un seul arc,
   du haut vers le côté droit, côté texte. Les autres coins gardent le rayon
   des images ; le cheveu doré suit la courbe tout seul. */
.pillar__media--incline {
  border-radius: var(--radius-image);
  border-top-right-radius: 65% 90%;
  outline: 1px solid var(--pillar-accent);
  outline-offset: 10px;
}
/* Pilier 03 : la grille 2 × 2 reste rectangulaire, seul le cheveu doré
   l'encadre ; les quatre vues prennent le rayon des images du site. */
.pillar__grid--frame {
  border-radius: var(--radius-image);
  outline: 1px solid var(--pillar-accent);
  outline-offset: 10px;
}
.pillar__grid .photo { border-radius: var(--radius-image); }

/* ── Appel à l'action ───────────────────────────────────── */

/* Colonne centrée : l'espacement vient du gap, pas des marges. */
.about-cta {
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}
.about-cta > * { margin: 0; }