/* modus. — /a-propos (About) page styles. Added 2026-10-17.
   Reuses base.css for everything shared. Faceless by design: no portraits,
   so the page leans on type, two numbers and the company's registered facts.
   Bands alternate navy (body) / paper. */

/* ---------- head (navy, same shape as /forfaits) */
.ab-head{position:relative;padding:calc(96px + var(--nav-h,72px)) 0 64px;background:var(--navy);color:var(--paper)}
.ab-head .crumb{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green-on-navy);margin-bottom:22px}
.ab-head .crumb a{color:inherit;text-decoration:none}
.ab-head .crumb a:hover{text-decoration:underline}
.ab-head .crumb .sep{margin:0 8px;opacity:.5}
.ab-head h1{font-size:clamp(2.2rem,5.6vw,4rem);line-height:1.04;letter-spacing:-.025em;margin:0;max-width:18ch}
.ab-head .lead{max-width:52ch;color:var(--light)}

/* ---------- why (paper, long-form) */
.ab-cols{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px 64px;align-items:start}
.ab-cols .sec-eyebrow{margin-top:6px}
.ab-prose{max-width:62ch}
.ab-prose p{font-size:clamp(18px,1.6vw,21px);line-height:1.6;color:var(--navy);margin:0 0 22px}
.ab-prose p:last-child{margin-bottom:0}
.ab-prose .ab-punch{font-weight:700;letter-spacing:-.01em;padding-left:18px;border-left:2px solid var(--green)}

/* ---------- who (navy) */
.ab-who h2,.ab-refuse h2{font-size:clamp(28px,4vw,48px);line-height:1.08;letter-spacing:-.02em;max-width:22ch}
.ab-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:56px}
.ab-stat{border-top:1px solid rgba(255,255,255,.14);padding-top:24px}
.ab-stat .big{margin:0;font-weight:700;letter-spacing:-.04em;line-height:1;font-size:clamp(64px,9vw,120px);color:var(--paper)}
.ab-stat .big .u{color:var(--green-on-navy)}
.ab-stat .cap{margin:12px 0 0;font-family:var(--mono);font-size:13px;letter-spacing:.03em;color:rgba(248,249,247,.72)}
.ab-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 56px;margin-top:64px}
.ab-two h3{font-size:clamp(20px,2vw,24px);letter-spacing:-.015em;line-height:1.2;margin:0 0 12px}
.ab-two p{font-size:16.5px;line-height:1.6;color:rgba(248,249,247,.78);margin:0}

/* ---------- refusals (paper cards) */
.ab-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:22px;margin-top:48px}
.ab-card{background:var(--white);border:1px solid var(--light);border-radius:16px;padding:30px 26px}
.ab-card .num{margin:0;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;color:var(--green-ink)}
.ab-card h3{font-size:20px;letter-spacing:-.01em;line-height:1.24;color:var(--navy);margin:14px 0 10px}
.ab-card p{font-size:15.5px;line-height:1.55;color:var(--muted);margin:0}

/* ---------- for / not for (paper, hairline from the refusals) */
.ab-fit{border-top:1px solid var(--light)}
.ab-fit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 64px}
.ab-fit h2{font-size:clamp(22px,2.6vw,30px);line-height:1.18;letter-spacing:-.015em;color:var(--navy);max-width:20ch;margin:0}
.ab-list{list-style:none;margin:28px 0 0;padding:0}
.ab-list li{position:relative;padding:14px 0 14px 32px;border-top:1px solid var(--light);font-size:16px;line-height:1.5;color:var(--navy)}
.ab-list li:last-child{border-bottom:1px solid var(--light)}
.ab-list li::before{position:absolute;left:4px;top:13px;font-family:var(--mono);font-weight:700}
.ab-yes li::before{content:"✓";color:var(--green-ink)}
.ab-no li::before{content:"✕";color:var(--slate-ink)}

/* ---------- company facts (navy) */
.ab-facts{margin:28px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:0 48px}
.ab-facts div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;padding:16px 0;border-top:1px solid rgba(255,255,255,.12)}
.ab-facts dt{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);padding-top:2px}
.ab-facts dd{margin:0;font-size:16px;color:var(--paper)}
.ab-facts a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--green-on-navy)}

/* ---------- closing band (same as /forfaits + /confidentialite) */
.next-band{border-top:1px solid var(--light)}
.next-grid{display:grid;grid-template-columns:1fr 340px;gap:60px;align-items:end}
.next-grid h2{max-width:20ch;font-size:clamp(24px,3vw,34px);line-height:1.18;letter-spacing:-.015em;color:var(--navy)}
.next-grid .lead{max-width:54ch}
.next-actions{display:flex;flex-direction:column;gap:12px}
.next-actions .btn{justify-content:center}
.paper .btn-ghost{color:var(--navy);border-color:rgba(22,40,60,.28)}
.paper .btn-ghost:hover{border-color:var(--navy)}

/* ---------- mobile */
@media (max-width:860px){
  .ab-cols{grid-template-columns:1fr;gap:20px}
  .ab-stats,.ab-two,.ab-fit-grid{grid-template-columns:1fr}
  .ab-two{margin-top:44px;gap:32px}
  .ab-facts div{grid-template-columns:1fr;gap:4px}
  .next-grid{grid-template-columns:1fr;gap:32px;align-items:start}
}

/* ---------- what we do (paper, sits above "why") */
.ab-lede{font-size:clamp(26px,3.4vw,40px)!important;line-height:1.12!important;font-weight:700;letter-spacing:-.02em}
.ab-rule{border-top:1px solid var(--light)}