.ap-hero{padding:160px 40px 100px;background:var(--bg-2);max-width:none}
.ap-hero-inner{max-width:1200px;margin:0 auto}
.ap-hero .meta{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--brique);margin-bottom:30px}
.ap-hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(56px,8vw,120px);line-height:.98;letter-spacing:-.025em;margin-bottom:40px;text-wrap:balance}
.ap-hero h1 .italic{font-style:italic;color:var(--brique)}
.ap-hero .lede{font-family:var(--serif);font-size:24px;line-height:1.5;color:var(--ink-soft);max-width:760px;font-weight:300}
.ap-content{padding:100px 40px;max-width:1200px;margin:0 auto}
.ap-section{display:grid;grid-template-columns:200px 1fr;gap:60px;padding:60px 0;border-top:1px solid var(--rule)}
.ap-section h2{font-family:var(--serif);font-size:42px;font-weight:400;letter-spacing:-.02em;line-height:1.05}
.ap-section h2 em{font-style:italic;color:var(--brique)}
.ap-eyebrow{font-family:var(--mono);font-size:14px;text-transform:uppercase;letter-spacing:.12em;color:var(--brique);padding-top:14px}
.ap-prose p{font-size:17px;line-height:1.75;color:var(--ink-soft);margin-bottom:18px;max-width:680px}
.ap-prose p strong{color:var(--ink);font-weight:500}
.ap-timeline{display:flex;gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);overflow-x:auto}
.ap-tl-year{flex:1;min-width:280px;padding:36px 30px;border-right:1px solid var(--rule)}
.ap-tl-year:last-child{border-right:0}
.ap-tl-year .y{font-family:var(--serif);font-size:64px;font-weight:300;color:var(--brique);letter-spacing:-.02em}
.ap-tl-year h4{font-family:var(--serif);font-size:22px;font-weight:400;margin:14px 0 10px}
.ap-tl-year p{font-size:14px;color:var(--ink-soft);line-height:1.55}
.ap-tl-year strong{display:block;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);margin-top:14px;padding-top:10px;border-top:1px solid var(--rule)}
.ap-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
@media(max-width:900px){.ap-pillars{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ap-pillars{grid-template-columns:1fr}}
.ap-pillar{background:var(--bg-2);border-radius:10px;border:1px solid var(--rule);overflow:hidden;display:flex;flex-direction:column}
.ap-pillar img{width:100%;height:210px;object-fit:cover;object-position:center top;display:block}
.ap-pillar-body{padding:26px 26px 28px}
.ap-pillar h4{font-family:var(--serif);font-size:22px;font-weight:400;margin-bottom:10px}
.ap-pillar p{font-size:13px;line-height:1.55;color:var(--ink-soft)}
.ap-org{padding:80px 40px;background:var(--terre);color:var(--sable);max-width:none}
.ap-org-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px}
.ap-org h2{font-family:var(--serif);font-size:48px;font-weight:300;color:var(--sable);letter-spacing:-.02em;margin-bottom:20px}
.ap-org h2 em{color:var(--ocre);font-style:italic}
.ap-org p{font-size:16px;line-height:1.65;color:rgba(244,234,217,.8);margin-bottom:14px}
.partners{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.partner{padding:14px 22px;border:1px solid rgba(214,186,149,.25);border-radius:6px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:rgba(244,234,217,.8)}
.page-hero-inner{align-items:center}
.page-hero-media{width:340px;max-width:40vw;aspect-ratio:4/5;object-fit:cover;border-radius:14px;border:1px solid rgba(248,171,24,.3);box-shadow:0 30px 70px -25px rgba(0,0,0,.75)}
.ap-media{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;margin-top:34px}
.ap-media .ap-prose p:last-child{margin-bottom:0}
.ap-media-figs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ap-media-figs img{width:100%;height:300px;object-fit:cover;border-radius:12px;border:1px solid var(--rule)}
.ap-media>img{width:100%;height:100%;max-height:440px;object-fit:cover;border-radius:12px;border:1px solid var(--rule)}
@media(max-width:900px){.ap-media{grid-template-columns:1fr;gap:28px}.page-hero-media{width:100%;max-width:none;aspect-ratio:16/10}}

/* ──────────────────────────────────────────────────────────
   Responsivité (textes & mises en page) — À propos
   ────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .ap-content{padding:72px 24px}
  /* Sections « Pourquoi Porto-Novo » / « Une portée internationale » :
     la grille 200px+1fr écrasait le contenu → on empile (eyebrow au-dessus). */
  .ap-section{grid-template-columns:1fr;gap:20px;padding:48px 0}
  .ap-eyebrow{padding-top:0}
  .ap-section h2{font-size:clamp(30px,6vw,42px)}
}
@media(max-width:700px){
  /* Éditions : la timeline horizontale (scroll + cartes 280px) passe en pile verticale. */
  .ap-timeline{flex-direction:column;overflow-x:visible}
  .ap-tl-year{min-width:0;flex:none;border-right:0;border-bottom:1px solid var(--rule);padding:24px 2px}
  .ap-tl-year:last-child{border-bottom:0}
  .ap-tl-year .y{font-size:clamp(44px,12vw,60px)}
  .ap-tl-year h4{font-size:20px}
}
@media(max-width:560px){
  .ap-content{padding:56px 20px}
  .ap-section{gap:16px;padding:40px 0}
  .ap-section h2{font-size:clamp(26px,7.5vw,36px)}
  .ap-prose p{font-size:16px;line-height:1.7}
  .ap-eyebrow{font-size:12.5px}
  /* Les deux vignettes côte à côte : hauteur fluide pour ne pas écraser l'image. */
  .ap-media-figs img{height:clamp(160px,42vw,260px)}
  .ap-media>img{max-height:320px}
  .ap-pillar img{height:180px}
  .ap-pillar h4{font-size:20px}
}