/* =========================================================================
   WEBSTRATEGE.FR - PAGE À PROPOS (page-a-propos.php)
   Composants propres à la page : colonne de lecture, grilles 4 phases /
   5 modules, carte du fondateur, liens fléchés. Tout le reste vient de
   tokens.css, chrome.css et site.css (sections, pillars, plates, boutons).
   ========================================================================= */
.ap-prose{max-width:760px;margin:0 auto;font-size:17px;line-height:1.7;color:var(--muted)}
.ap-prose p{max-width:none;margin:0 0 1.1em}
.ap-prose p:last-child{margin-bottom:0}
.ap-prose strong{color:var(--txt)}
.ap-prose+.ap-sub,.ap-modules+.ap-prose,.ap-phases+.sec-foot{margin-top:44px}
.ap-sub{max-width:760px;margin:0 auto 22px;text-align:center;font-size:clamp(21px,1.8vw,25px)}
.ap-prose .ap-sub{text-align:left;margin:0 0 12px}
.ap-prose+.ap-sub+.ap-phases,.ap-prose+.ap-sub+.ap-modules{margin-top:0}

/* Quatre phases (section sombre) et cinq modules / compétences */
.ap-phases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.ap-modules{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.ap-modules .pillar{padding:24px 20px}
.ap-modules .pillar h3{font-size:19px}
.ap-modules .pillar p{font-size:15px}
.ap-modules+.sec-foot,.ap-prose+.sec-foot{margin-top:40px}

/* Liens fléchés (métier, fondateur) */
.ap-links{display:flex;flex-wrap:wrap;gap:14px 30px;margin-top:22px}
.ap-links .arrow-link{font-size:16px}
.ap-links .arrow-link svg{width:18px;height:18px;flex:none}
.cinema .ap-links .arrow-link{color:var(--gold)}
.cinema .ap-links .arrow-link:hover{color:var(--gold2)}

/* Carte du fondateur (composant clair, cadre net + ombre dure or posés par main.js via .bev-sh) */
.ap-bio{--bev:18px;position:relative;max-width:980px;margin:0 auto;display:grid;grid-template-columns:200px minmax(0,1fr);gap:36px;align-items:start;padding:38px 40px}
.ap-bio-ph{width:200px}
.ap-bio-ph img{width:200px;height:200px;object-fit:cover;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.ap-bio-txt p{max-width:none;font-size:17px;line-height:1.7;color:var(--muted);margin:0 0 1.1em}
.ap-bio-txt .klist{margin-top:22px;border-top:1px solid var(--line);padding-top:8px}
.ap-bio-txt .klist li{font-size:15px}
.ap-bio-txt .klist li:first-child{padding-top:12px}
.ap-bio-txt .ap-links{margin-top:20px}

@media(max-width:1080px){
  .ap-phases,.ap-modules{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ap-modules>.pillar:last-child:nth-child(odd){grid-column:1/-1}
}
@media(max-width:768px){
  .ap-bio{grid-template-columns:1fr;gap:26px;padding:30px 26px}
  .ap-bio-ph{width:160px}
  .ap-bio-ph img{width:160px;height:160px}
}
@media(max-width:640px){
  .ap-phases,.ap-modules{grid-template-columns:1fr}
  .ap-bio{padding:26px 20px}
  .ap-prose,.ap-bio-txt p{font-size:16px}
}
/* H1 « Qui est derrière Webstratege.fr ? » : le mot Webstratege.fr ne se coupe pas, on le fait tenir dans 326 px sur les petits écrans */
@media(max-width:420px){.ap-hero h1{font-size:6.8vw}}