/* =========================================================
   POLYANCE — Page "expertises.html"
   Styles propres a cette page uniquement (chargee seulement ici).
   Direction editoriale : typographie, echelle, lignes et espace
   plutot que cartes/pills/badges. Reutilise .levier-tab/.levier-panel
   (definis dans home.css, deja cables par main.js) pour le switcher
   d'exemples, avec un habillage visuel entierement neutralise.
   ========================================================= */

:root{
  --ee-max-mid: 1100px;
}

/* ---------- HERO : plein ecran, composition en 2 zones ---------- */
.expertise-hero{
  background:var(--blue-tint);
  min-height:100vh; min-height:100dvh;
  display:flex; align-items:center;
  padding-top:clamp(96px, 10vh, 118px); padding-bottom:clamp(24px, 4vh, 48px);
  position:relative; overflow:hidden;
}
.expertise-hero .container{ width:100%; }
.expertise-hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:64px; align-items:center;
  position:relative; z-index:2;
}
.expertise-hero-copy{ max-width:560px; }
.expertise-hero-copy h1{ font-size:clamp(32px, 4.2vw, 48px); margin-bottom:20px; }
.expertise-hero-copy .eyebrow{ margin-bottom:20px; }

.expertise-hero .hero-symbol-corner{
  position:absolute; top:-10%; right:-8%; width:44%; max-width:460px;
  opacity:.05; z-index:1;
}
@media (max-width:900px){
  .expertise-hero{ min-height:auto; padding-top:clamp(120px, 16vw, 150px); padding-bottom:56px; }
  .expertise-hero-grid{ grid-template-columns:1fr; gap:48px; }
  .expertise-hero-copy{ max-width:none; }
  .expertise-hero .hero-symbol-corner{ width:55%; top:-6%; right:-14%; opacity:.06; }
}

/* ---- les 5 leviers comme composition graphique du hero (pas des cartes) ---- */
.hero-levers{ position:relative; padding-left:26px; }
.hero-levers::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:1px;
  background:rgba(5,61,140,.16);
}
.hero-levers li{
  position:relative; display:flex; align-items:baseline; gap:16px;
  padding:15px 0; border-bottom:1px solid rgba(5,61,140,.1);
}
.hero-levers li:last-child{ border-bottom:none; }
.hero-levers li::before{
  content:""; position:absolute; left:-26px; top:50%; width:18px; height:1px;
  background:rgba(5,61,140,.16);
}
.hero-levers .n{
  font-family:var(--font-body); font-weight:700; font-size:12px; color:var(--ink-faint);
}
.hero-levers .w{
  font-family:var(--font-display); font-weight:400; font-size:clamp(19px, 2vw, 25px);
  color:var(--blue); opacity:.55;
}
.hero-levers li:nth-child(1) .w{ opacity:.85; }
.hero-levers li.is-accent{ }
.hero-levers li.is-accent .w{ opacity:1; color:var(--blue); }
.hero-levers li.is-accent .n{ color:var(--orange-deep); }
.hero-levers li.is-accent::before{ background:var(--orange); width:22px; }
.hero-levers li:nth-child(4) .w{ opacity:.5; }
.hero-levers li:nth-child(5) .w{ opacity:.4; }

@media (max-width:900px){
  .hero-levers{ max-width:420px; margin-inline:auto; }
}

/* =========================================================
   CINQ LEVIERS : liste editoriale a 3 zones (pas de cartes)
   ========================================================= */
.lever-list{ max-width:var(--ee-max-mid); margin:0 auto; }
.lever-row{
  display:grid; grid-template-columns:96px 1.5fr 1fr; gap:40px;
  padding:44px 0; border-top:1px solid var(--line);
  align-items:start;
  transition:transform .28s var(--ease), border-top-color .28s var(--ease);
}
.lever-list .lever-row:last-child{ border-bottom:1px solid var(--line); }
.lever-row:hover{ transform:translateX(6px); border-top-color:var(--orange); }
.lever-list .lever-row:last-child:hover{ border-bottom-color:var(--line); }

.lever-num{
  font-family:var(--font-body); font-weight:700; font-size:44px; line-height:1;
  color:var(--line);
  transition:color .3s var(--ease);
}
.lever-row:hover .lever-num{ color:var(--orange); }

.lever-main h2{
  display:flex; align-items:center; gap:11px;
  font-size:26px; color:var(--navy); margin-bottom:10px;
  transition:color .3s var(--ease);
}
.lever-row:hover .lever-main h2{ color:var(--blue); }
.lever-dot{
  flex:none; width:7px; height:7px; border-radius:50%; background:var(--orange);
}
.lever-main p{ font-size:15.5px; color:var(--ink-soft); line-height:1.5; max-width:44ch; }

.lever-domains{
  display:flex; flex-direction:column; gap:8px; padding-top:6px;
}
.lever-domains li{
  font-family:var(--font-body); font-weight:500; font-size:14.5px; color:var(--ink-soft);
}

@media (max-width:960px){
  .lever-row{ grid-template-columns:64px 1fr; gap:24px; }
  .lever-domains{ grid-column:2; flex-direction:row; flex-wrap:wrap; gap:6px 16px; padding-top:2px; }
  .lever-num{ font-size:36px; }
}
@media (max-width:640px){
  .lever-row{ grid-template-columns:1fr; gap:10px; padding:32px 0; }
  .lever-domains{ grid-column:1; }
  .lever-row:hover{ transform:none; }
  .lever-num{ font-size:30px; }
}

/* =========================================================
   UN PROBLEME, PLUSIEURS LEVIERS : navigation + flux visuel
   ========================================================= */
.objectif-nav{
  display:flex; justify-content:center; gap:36px;
  margin:0 auto 72px; border-bottom:1px solid var(--line);
}
.objectif-nav .levier-tab{
  background:none; border:none; border-left:none; border-radius:0;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  padding:4px 0 16px; font-family:var(--font-body); font-weight:600; font-size:15.5px; color:var(--ink-faint);
}
.objectif-nav .levier-tab:hover{ background:none; color:var(--navy); }
.objectif-nav .levier-tab.is-active{ background:none; color:var(--blue); font-weight:700; border-bottom-color:var(--orange); }

.objectif-panels{ max-width:var(--ee-max-mid); margin:0 auto; }
.objectif-panels .levier-panel{
  background:none; box-shadow:none; padding:0; border-radius:0; height:auto;
}

.flow{ display:flex; flex-direction:column; align-items:center; }
.flow-label{
  display:block; text-align:center;
  font-family:var(--font-body); font-weight:700; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px;
}
.flow-label-resultat{ color:var(--orange-deep); }
.flow-node{ text-align:center; }
.flow-value{ font-family:var(--font-display); font-weight:400; }
.flow-objectif{ font-size:clamp(24px, 3vw, 32px); color:var(--blue); }
.flow-resultat{ font-size:18px; color:var(--navy); }
.flow-resultat .arrow{ color:var(--orange); margin-right:8px; font-family:var(--font-body); }

.flow-stem{ width:1px; height:38px; background:rgba(5,61,140,.28); }

.flow-branch{
  position:relative; display:flex; flex-wrap:wrap; justify-content:center;
  gap:20px 40px; padding:28px 0; max-width:760px;
}
.flow-branch::before, .flow-branch::after{
  content:""; position:absolute; left:6%; right:6%; height:1px;
  background:rgba(5,61,140,.28);
}
.flow-branch::before{ top:0; }
.flow-branch::after{ bottom:0; }
.flow-branch span{
  position:relative;
  font-family:var(--font-body); font-weight:600; font-size:16px; color:var(--navy);
}
.flow-branch span::before{
  content:""; position:absolute; left:50%; bottom:100%; width:1px; height:27px;
  background:rgba(5,61,140,.28); transform:translateX(-50%);
}
.flow-branch span::after{
  content:""; position:absolute; left:50%; top:100%; width:1px; height:27px;
  background:rgba(5,61,140,.28); transform:translateX(-50%);
}

@media (max-width:640px){
  .objectif-nav{ gap:20px; margin-bottom:56px; }
  .objectif-nav .levier-tab{ font-size:14px; }
  .flow-stem{ height:26px; }
  .flow-branch{ gap:18px 26px; padding:22px 0; }
  .flow-branch span::before, .flow-branch span::after{ height:20px; }
}