/* ============================================================
   EXPERTISE — meme langage editorial que About :
   mot fantome Agency sable, intro a colonne collante,
   bande navy chapitre pour les six expertises (cartes internes),
   bande panneau pour les trois dimensions.
   Aucun texte, aucune couleur, aucune police nouvelle.
   ============================================================ */

/* ================= HERO ================= */
body.expertise .ex-hero{position:relative;overflow:hidden}
body.expertise .ex-ghost{
  font-family:var(--font-title);font-weight:400;font-synthesis:none;
  font-size:min(17.5vw,270px);line-height:.82;letter-spacing:-.02em;
  color:var(--ornament);text-align:center;white-space:nowrap;
  user-select:none;pointer-events:none;
}
body.expertise .ex-hero-copy{
  position:relative;z-index:1;
  margin-top:calc(-1 * min(5.4vw,84px));
}
body.expertise .ex-hero-copy .d-1{margin-top:18px;max-width:18ch}
body.expertise .ex-hero-copy .lede{margin-top:24px}

/* ================= INTRO ================= */
body.expertise .ex-intro-grid{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,5vw,90px);align-items:start;
}
body.expertise .ex-intro-side{position:sticky;top:clamp(90px,14vh,140px)}
body.expertise .ex-intro-side .d-2{margin-top:16px;max-width:20ch}
body.expertise .ex-intro-body{display:flex;flex-direction:column;gap:22px}
body.expertise .ex-intro-body .body-copy,
body.expertise .ex-intro-body .lede{max-width:62ch}

/* ================= SIX EXPERTISES (bande navy) ================= */
body.expertise .ex-acc .section-head{margin-bottom:clamp(10px,2vw,26px)}
body.expertise .ex-acc .acc{border-top-color:rgba(var(--cream-rgb),.16)}
body.expertise .ex-acc .acc-item{border-bottom-color:rgba(var(--cream-rgb),.16)}
body.expertise .ex-acc .acc-head .idx{
  font-family:var(--font-title);font-size:clamp(18px,2vw,30px);letter-spacing:0;
  color:var(--ornament);
}
body.expertise .ex-acc .acc-head h3{
  font-family:var(--font-title);font-weight:400;font-synthesis:none;
  font-size:clamp(22px,2.6vw,40px);color:var(--cream-on-dark);
}
body.expertise .ex-acc .acc-sub{color:rgba(var(--cream-rgb),.55)}
body.expertise .ex-acc .acc-icon{border-color:rgba(var(--cream-rgb),.4)}
body.expertise .ex-acc .acc-icon::before,
body.expertise .ex-acc .acc-icon::after{background:var(--cream-on-dark)}
body.expertise .ex-acc .acc-item.open .acc-icon::before,
body.expertise .ex-acc .acc-item.open .acc-icon::after,
body.expertise .ex-acc .acc-head:hover .acc-icon::before,
body.expertise .ex-acc .acc-head:hover .acc-icon::after{background:var(--navy)}
@media(hover:hover) and (pointer:fine){
  body.expertise .ex-acc .acc-head h3{transition:transform .5s var(--ease)}
  body.expertise .ex-acc .acc-head:hover h3{transform:translateX(12px)}
}
body.expertise .ex-acc .acc-content{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2vw,28px);
}
@media(max-width:760px){
  body.expertise .ex-acc .acc-content{grid-template-columns:1fr}
}
body.expertise .ex-acc .acc-content .lead-line{
  color:rgba(var(--cream-rgb),.82);max-width:72ch;
  margin-bottom:clamp(2px,.8vw,8px);
}
body.expertise .ex-acc .acc-content strong{color:var(--cream-on-dark)}
body.expertise .ex-acc .mini{
  background:var(--dark-panel);
  border:1px solid rgba(var(--cream-rgb),.14);
  border-radius:14px;
  padding:clamp(20px,2.2vw,30px);
}
body.expertise .ex-acc .mini h4{color:var(--ornament);margin-bottom:14px}
body.expertise .ex-acc .mini h4::before{border-color:rgba(var(--cream-rgb),.5)}
body.expertise .ex-acc .mini ul{color:rgba(var(--cream-rgb),.72)}
body.expertise .ex-acc .mini li::before{background:var(--ornament)}
/* « Projets associés » (toujours la derniere carte) referme la rangee. */
body.expertise .ex-acc .mini:last-child{grid-column:1/-1}

/* ================= TROIS DIMENSIONS (bande panneau) ================= */
body.expertise .ex-dim{background:var(--panel)}
body.expertise .ex-dim .section-head{margin-bottom:clamp(30px,4vw,60px)}
body.expertise .ex-dim-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,48px);
}
@media(max-width:900px){body.expertise .ex-dim-grid{grid-template-columns:1fr}}
body.expertise .dim{border-top:2px solid var(--ink);padding-top:clamp(14px,1.8vw,22px)}
body.expertise .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.expertise .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.expertise .dim p{margin-top:8px;color:var(--muted);font-size:15px;line-height:1.6}

/* ================= RESPONSIVE ================= */
@media(max-width:1000px){
  body.expertise .ex-intro-grid{grid-template-columns:1fr;gap:clamp(22px,4vw,40px)}
  body.expertise .ex-intro-side{position:static}
}
@media(max-width:640px){
  body.expertise .ex-ghost{font-size:min(19vw,120px)}
  body.expertise .ex-hero-copy{margin-top:0;padding-top:10px}
}