/* ============================================================
   ABOUT — composition éditoriale premium, même DA que la home :
   mot fantôme Agency sable, portrait en chevauchement, colonnes
   collantes, bande navy, rangées à filets, timeline à rail.
   Aucun texte, aucune couleur, aucune police nouvelle.
   ============================================================ */

/* pastilles meta sous le lede du hero de chapitre */
body.about .ab-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(22px,3vw,36px)}
body.about .ab-meta span{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--line-strong);border-radius:999px;padding:7px 14px;
}

/* ================= INTRODUCTION ================= */
body.about .ab-intro-body{display:flex;flex-direction:column;gap:22px}
body.about .ab-intro-body .body-copy{max-width:62ch}
body.about .ab-pull{
  margin-top:clamp(14px,2vw,26px);
  border-left:3px solid var(--ornament);
  padding-left:clamp(18px,2.4vw,32px);
  font-family:var(--font-title);font-weight:400;font-synthesis:none;
  font-size:clamp(21px,2.1vw,30px);line-height:1.32;letter-spacing:-.01em;
  color:var(--ink);max-width:30ch;
}
body.about .ab-pull strong{
  /* le rouille sur creme manquait de contraste sur 4 lignes : encre + souligne sable */
  font-weight:400;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--ornament);
  text-decoration-thickness:.1em;text-underline-offset:.16em;
}

/* ================= TERRITOIRES (bande navy) ================= */
body.about .ab-terr .section-head{margin-bottom:clamp(10px,2vw,26px)}
body.about .ab-terr .map-band .draw{stroke:var(--ornament)}
body.about .ab-terr .map-band circle{stroke:var(--ornament)}
body.about .ab-terr .map-node{fill:var(--cream-on-dark)}
body.about .ab-terr .map-far{fill:rgba(var(--cream-rgb),.55)}
body.about .ab-terr .acc{border-top-color:rgba(var(--cream-rgb),.16);margin-top:clamp(26px,3.4vw,52px)}
body.about .ab-terr .acc-item{border-bottom-color:rgba(var(--cream-rgb),.16)}
body.about .ab-terr .acc-head .idx{
  font-family:var(--font-title);font-size:clamp(18px,2vw,30px);letter-spacing:0;
  color:var(--ornament);
}
body.about .ab-terr .acc-head h3{
  font-family:var(--font-title);font-weight:400;font-synthesis:none;
  font-size:clamp(26px,3.4vw,50px);color:var(--cream-on-dark);
}
body.about .ab-terr .acc-sub{color:rgba(var(--cream-rgb),.55)}
body.about .ab-terr .acc-icon{border-color:rgba(var(--cream-rgb),.4)}
body.about .ab-terr .acc-icon::before,
body.about .ab-terr .acc-icon::after{background:var(--cream-on-dark)}
body.about .ab-terr .acc-item.open .acc-icon::before,
body.about .ab-terr .acc-item.open .acc-icon::after,
body.about .ab-terr .acc-head:hover .acc-icon::before,
body.about .ab-terr .acc-head:hover .acc-icon::after{background:var(--navy)}
body.about .ab-terr .acc-content .lead-line{color:rgba(var(--cream-rgb),.82)}
body.about .ab-terr .acc-content strong{color:var(--cream-on-dark)}
body.about .ab-terr .mini h4{color:var(--ornament)}
body.about .ab-terr .mini h4::before{border-color:rgba(var(--cream-rgb),.5)}
body.about .ab-terr .mini ul{color:rgba(var(--cream-rgb),.65)}

/* ================= PILIERS ================= */
body.about .ab-pil-grid{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,5vw,90px);align-items:start;
}
body.about .ab-pil-side{position:sticky;top:clamp(90px,14vh,140px)}
body.about .ab-pil-side .d-1{margin-top:16px;max-width:14ch}
body.about .pil-row{
  display:grid;grid-template-columns:clamp(64px,7vw,104px) minmax(0,1fr);
  gap:clamp(16px,2.4vw,32px);align-items:start;
  padding-block:clamp(22px,3vw,38px);
  border-top:1px solid var(--line-strong);
}
body.about .pil-row:last-child{border-bottom:1px solid var(--line-strong)}
body.about .pil-row .pil-ic{
  width:clamp(46px,4vw,58px);aspect-ratio:1;border-radius:50%;
  background:var(--ornament);border:1.5px solid var(--ink);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
}
body.about .pil-row .pil-ic svg{width:46%;height:46%;display:block}
body.about .pil-row h3{
  font-family:var(--font-title);font-weight:400;font-synthesis:none;
  font-size:clamp(21px,2.2vw,32px);letter-spacing:-.01em;text-transform:none;
}
body.about .pil-row p{margin-top:8px;color:var(--muted);max-width:52ch}
@media(hover:hover) and (pointer:fine){
  body.about .pil-row>div{transition:transform .45s var(--ease)}
  body.about .pil-row:hover>div{transform:translateX(10px)}
}

/* ================= DIMENSIONS (bande panneau) ================= */
body.about .ab-dim{background:var(--panel)}
body.about .ab-dim .section-head{margin-bottom:clamp(30px,4vw,60px)}
body.about .ab-dim .section-head .d-2{max-width:26ch}
body.about .ab-dim-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,3vw,48px);
}
body.about .dim{border-top:2px solid var(--ink);padding-top:clamp(14px,1.8vw,22px)}
body.about .dim .ltr{
  display:block;
  font-family:var(--font-title);font-weight:400;font-synthesis:none;
  font-size:clamp(30px,3vw,44px);line-height:1;color:var(--ornament);
}
body.about .dim h3{
  margin-top:12px;
  font-family:var(--font-body);font-weight:600;font-size:clamp(16px,1.3vw,19px);
  letter-spacing:-.015em;text-transform:none;
}
body.about .dim p{margin-top:8px;color:var(--muted);font-size:15px;line-height:1.6}

/* ================= PARCOURS ================= */
body.about .tl-list{
  position:relative;max-width:980px;
  padding-left:clamp(56px,8vw,110px);
}
body.about .tl-list::before{
  content:"";position:absolute;top:10px;bottom:10px;
  left:clamp(20px,3vw,40px);width:2px;
  background:linear-gradient(to bottom,var(--ornament),var(--line-strong));
}
body.about .tl-it{
  position:relative;
  padding-block:clamp(24px,3.2vw,42px);
  border-bottom:1px solid var(--line);
}
body.about .tl-it:last-child{border-bottom:none}
body.about .tl-it::before{
  content:"";position:absolute;
  left:calc(-1 * clamp(56px,8vw,110px) + clamp(20px,3vw,40px) - 5px);
  top:clamp(34px,4vw,54px);
  width:12px;height:12px;border-radius:50%;
  background:var(--ornament);border:2px solid var(--canvas);
  box-shadow:0 0 0 1.5px var(--ornament);
}
body.about .tl-it .gnum{
  position:absolute;right:0;top:clamp(12px,1.6vw,20px);
  font-family:var(--font-title);font-weight:400;font-synthesis:none;
  font-size:clamp(56px,7vw,110px);line-height:1;
  color:var(--ornament);opacity:.32;pointer-events:none;
}
body.about .tl-body{max-width:56ch}
body.about .t-tag{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);
}
body.about .tl-body h3{
  margin-top:14px;
  font-family:var(--font-title);font-weight:400;font-synthesis:none;
  font-size:clamp(22px,2.4vw,36px);letter-spacing:-.01em;text-transform:none;
}
body.about .tl-body p{margin-top:10px;color:var(--muted)}

/* ================= MA CONVICTION ================= */
body.about .ab-man-head{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:clamp(24px,4vw,70px);align-items:end;
  margin-bottom:clamp(26px,3.4vw,50px);
}
body.about .ab-man-head .d-2{margin-top:16px;max-width:22ch}
body.about .ab-man-head .lede{justify-self:end;text-align:right}
body.about .man-line{
  display:flex;align-items:baseline;gap:clamp(14px,2vw,28px);
  padding-block:clamp(16px,2.4vw,28px);
  border-top:1px solid var(--line-strong);
  font-family:var(--font-title);font-weight:400;font-synthesis:none;
  font-size:clamp(24px,3.4vw,52px);line-height:1.05;letter-spacing:-.01em;
  color:var(--ink);
}
body.about .man-line:last-child{border-bottom:1px solid var(--line-strong)}
body.about .man-line .mk{font-size:.5em;color:var(--ornament);flex-shrink:0}

/* ================= CITATION ================= */
body.about .ab-quote blockquote{
  font-family:var(--font-title);font-weight:400;font-synthesis:none;
  font-size:clamp(28px,3.8vw,58px);line-height:1.12;letter-spacing:-.01em;
  max-width:22ch;margin-inline:auto;
}
body.about .ab-quote .lede{margin:26px auto 0;text-align:center}
body.about .ab-quote-cta{margin-top:34px}

/* ================= RESPONSIVE ================= */
@media(max-width:1000px){
  body.about .ab-pil-grid{grid-template-columns:1fr;gap:clamp(22px,4vw,40px)}
  body.about .ab-pil-side{position:static}
  body.about .ab-dim-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.about .ab-man-head{grid-template-columns:1fr}
  body.about .ab-man-head .lede{justify-self:start;text-align:left}
}
@media(max-width:640px){
  body.about .ab-dim-grid{grid-template-columns:1fr}
  body.about .tl-it .gnum{position:static;display:block;margin-bottom:6px;font-size:44px}
  body.about .tl-list{padding-left:clamp(40px,10vw,56px)}
}

/* ---- Territoires : les deux blocs deviennent des cartes qui remplissent
   la rangee (l'auto-fit les tassait a gauche, laissant le tiers droit vide). */
body.about .ab-terr .acc-content{
  /* 2 colonnes explicites : l'intro pleine largeur occupait la 3e piste
     de l'auto-fit et empechait les cartes de s'etendre */
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2vw,28px);
}
@media(max-width:760px){
  body.about .ab-terr .acc-content{grid-template-columns:1fr}
}
body.about .ab-terr .acc-content .lead-line{max-width:72ch;margin-bottom:clamp(2px,.8vw,8px)}
body.about .ab-terr .mini{
  background:var(--dark-panel);
  border:1px solid rgba(var(--cream-rgb),.14);
  border-radius:14px;
  padding:clamp(20px,2.2vw,30px);
}
body.about .ab-terr .mini h4{margin-bottom:14px}
body.about .ab-terr .mini ul{color:rgba(var(--cream-rgb),.72)}
body.about .ab-terr .mini li::before{background:var(--ornament)}