/* =========================================================
   STATEXELIA — pages internes (axes + secteurs)
   ========================================================= */

/* ---------- Page hero (dark, axis-themed) ---------- */
.page-hero{ position:relative; background:var(--navy); color:var(--on-dark); padding-top:148px; overflow:hidden; isolation:isolate; }
.page-hero .ph-bg{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(54% 60% at 82% 12%, color-mix(in srgb, var(--ax) 40%, transparent), transparent 62%),
    linear-gradient(180deg,#08111F 0%, #0A1628 70%);
}
.page-hero .ph-bg::after{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(ellipse 90% 80% at 50% 24%,#000 35%,transparent 82%);
}
.ph-inner{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(36px,5vw,64px); align-items:center; padding-block:clamp(36px,5vw,72px) clamp(48px,6vw,84px); }
@media (max-width:920px){ .ph-inner{ grid-template-columns:1fr; gap:36px; } }
.breadcrumb{ display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--on-dark-3); margin-bottom:26px; }
.breadcrumb a{ color:var(--on-dark-3); } .breadcrumb a:hover{ color:#fff; }
.breadcrumb .sep{ opacity:.5; }
.ph-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#fff; margin-bottom:20px; }
.ph-eyebrow .dot{ width:9px; height:9px; border-radius:2px; background:var(--ax); }
.page-hero h1.q{ font-family:var(--serif); font-weight:400; color:#fff; font-size:clamp(32px,4.6vw,60px); line-height:1.05; letter-spacing:-0.018em; margin:0 0 22px; max-width:16ch; }
.page-hero .scope{ font-size:15px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ax); margin:0 0 18px; }
.page-hero .lead{ color:var(--on-dark-2); max-width:560px; }

/* lifecycle mini map */
.lifemap{ background:rgba(255,255,255,.03); border:1px solid var(--on-dark-line); border-radius:var(--r-lg); padding:10px; }
.lifemap a{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--r-sm); color:var(--on-dark-2); transition:background var(--t); }
.lifemap a:hover{ background:rgba(255,255,255,.04); }
.lifemap a .ln{ font-family:var(--mono); font-size:12px; color:var(--on-dark-3); width:22px; flex:none; }
.lifemap a .lt{ font-size:13.5px; line-height:1.3; }
.lifemap a .lbar{ width:3px; align-self:stretch; border-radius:2px; background:transparent; flex:none; }
.lifemap a.cur{ background:rgba(255,255,255,.06); color:#fff; }
.lifemap a.cur .lt{ font-weight:600; }
.lifemap a.cur .lbar{ background:var(--lc, var(--green)); }
.lifemap a .ldot{ width:9px; height:9px; border-radius:2px; flex:none; }

/* ---------- Capabilities ---------- */
.cap-card{ display:flex; flex-direction:column; height:100%; }
.cap-card .ic{ width:46px; height:46px; }
.cap-card h3{ font-size:19px; }
.cap-card p{ flex:1; }
.cap-card.span2{ grid-column:span 2; }
@media (max-width:640px){ .cap-card.span2{ grid-column:auto; } }
.cap-legend{ margin:18px 2px 0; font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:var(--ink-3); }

/* ---------- Proof cards (verif / valid) ---------- */
.proof-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch; }
@media (max-width:880px){ .proof-grid{ grid-template-columns:1fr; } }
.proof-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); border-top:3px solid var(--ax); padding:clamp(28px,3vw,40px); transition:box-shadow var(--t), transform var(--t); }
.proof-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.proof-card .pc-top{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.proof-card .pc-num{ font-family:var(--mono); font-size:13px; font-weight:600; color:var(--ax); }
.proof-card .pc-label{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ax-ink); }
.proof-card h3{ font-family:var(--serif); font-weight:400; font-size:clamp(21px,1.9vw,26px); line-height:1.16; color:var(--ink); margin:0 0 18px; max-width:24ch; }
.proof-card .pc-body{ flex:1; }
.proof-card .pc-body p{ font-size:15.5px; line-height:1.66; color:var(--ink-2); margin:0; }
.proof-card .pc-body p + p{ margin-top:13px; }
.proof-card .tags{ margin-top:26px; }

/* ---------- Sector translation ---------- */
.jargon-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (max-width:720px){ .jargon-grid{ grid-template-columns:1fr; } }
.jargon-row{
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:baseline;
  padding:20px 22px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  border-left:3px solid var(--ax);
}
.jargon-row .sec{ font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.04em; color:var(--ink-3); white-space:nowrap; }
.jargon-row .term{ font-family:var(--sans); font-weight:600; font-size:16px; color:var(--ink); line-height:1.35; }
.jargon-row .term em{ font-style:normal; color:var(--ax-ink); }

/* ---------- Audit note ---------- */
.audit-note{ display:grid; grid-template-columns:54px 1fr; gap:22px; align-items:center; background:var(--ax-soft); border:1px solid var(--ax-line); border-radius:var(--r-lg); padding:30px 34px; }
.audit-note .ic{ width:54px; height:54px; border-radius:var(--r-sm); background:#fff; color:var(--ax-ink); display:grid; place-items:center; }
.audit-note .ic svg{ width:26px; height:26px; }
.audit-note p{ margin:0; font-size:17px; color:var(--ink-2); }
.audit-note strong{ color:var(--ink); font-weight:600; }
@media (max-width:560px){ .audit-note{ grid-template-columns:1fr; gap:16px; } }

/* ---------- Feature article ---------- */
.feature-head{ max-width:760px; margin:0 0 clamp(34px,4vw,52px); }
.feature-head .kicker{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ax-ink); margin-bottom:20px; }
.feature-head .kicker::before{ content:""; width:22px; height:2px; background:currentColor; }
.feature-head h2{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,3.2vw,44px); line-height:1.08; letter-spacing:-0.015em; color:var(--ink); margin:0 0 20px; max-width:20ch; }
.feature-head .lead{ font-size:clamp(17px,1.4vw,20px); line-height:1.6; color:var(--ink-2); }

.feature-media{ position:relative; margin:0 0 clamp(40px,5vw,64px); }
.feature-media image-slot{ display:block; width:100%; aspect-ratio:21/9; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-md); }
.feature-media img{ display:block; width:100%; aspect-ratio:3/2; object-fit:cover; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-md); }
@media (max-width:680px){ .feature-media image-slot{ aspect-ratio:16/10; } .feature-media img{ aspect-ratio:4/3; } }
.feature-media.diagram img{ aspect-ratio:auto; height:auto; object-fit:contain; background:#0A1628; }
@media (max-width:680px){ .feature-media.diagram img{ aspect-ratio:auto; } }
.feature-media figcaption{ display:flex; gap:10px; align-items:baseline; margin-top:12px; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--ink-3); }
.feature-media figcaption .tk{ color:var(--ax-ink); }

.dual{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:0 0 clamp(40px,5vw,60px); }
@media (max-width:760px){ .dual{ grid-template-columns:1fr; } }
.dual-card{ background:var(--ax-soft); border:1px solid var(--ax-line); border-radius:var(--r-lg); padding:30px 32px; border-top:3px solid var(--ax); }
.dual-card .dl{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ax-ink); margin-bottom:10px; }
.dual-card h3{ font-family:var(--serif); font-weight:400; font-size:24px; line-height:1.12; color:var(--ink); margin:0 0 14px; }
.dual-card p{ font-size:15.5px; line-height:1.62; color:var(--ink-2); margin:0; }
.dual-card .pull{ display:block; font-family:var(--serif); font-style:italic; font-size:17px; line-height:1.5; color:var(--ax-ink); margin:0 0 14px; padding-left:14px; border-left:2px solid var(--ax); }

.feature-body{ max-width:760px; }
.feature-body .block{ margin-bottom:clamp(30px,3.4vw,40px); }
.feature-body h3{ font-family:var(--serif); font-weight:400; font-size:clamp(22px,2vw,28px); line-height:1.14; color:var(--ink); margin:0 0 14px; }
.feature-body p{ font-size:16.5px; line-height:1.68; color:var(--ink-2); margin:0; }
.feature-body p + p{ margin-top:14px; }
.feature-cta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:8px; padding-top:clamp(28px,3vw,38px); border-top:1px solid var(--line); }
.feature-cta p{ margin:0; font-size:17px; color:var(--ink-2); max-width:46ch; }

/* ---------- Axis switcher ---------- */
.axis-switch{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:760px){ .axis-switch{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:440px){ .axis-switch{ grid-template-columns:1fr; } }
.as-card{ display:block; padding:22px 20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); border-top:3px solid var(--asc); transition:box-shadow var(--t), transform var(--t); }
.as-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.as-card .an{ font-family:var(--mono); font-size:12px; color:var(--asc); font-weight:600; }
.as-card .aq{ display:block; font-family:var(--serif); font-size:18px; line-height:1.2; color:var(--ink); margin-top:8px; }
.as-card.is-cur{ background:var(--bg-2); }
.as-card.is-cur .aq{ color:var(--ink-3); }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--navy); color:#fff; }
.cta-band .inner{ display:grid; grid-template-columns:1.3fr auto; gap:36px; align-items:center; }
@media (max-width:760px){ .cta-band .inner{ grid-template-columns:1fr; gap:24px; } }
.cta-band h2{ color:#fff; max-width:18ch; }
.cta-band p{ color:var(--on-dark-2); max-width:46ch; margin-top:8px; }

/* ---------- Secteurs page ---------- */
.sector-full{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 34px; transition:box-shadow var(--t), transform var(--t), border-color var(--t); }
.sector-full:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.sector-full.core{ border:1.5px solid var(--green-2); }
.sector-full .badge{ display:inline-block; font-size:12px; font-weight:600; letter-spacing:.03em; padding:4px 12px; border-radius:999px; margin-bottom:18px; }
.sector-full .badge.core{ background:var(--green-soft); color:var(--green-ink); }
.sector-full .badge.comp{ background:var(--bg-2); color:var(--ink-3); }
.sector-full h3{ font-family:var(--serif); font-weight:400; font-size:26px; margin-bottom:10px; }
.sector-full > p{ font-size:16px; color:var(--ink-2); max-width:60ch; }
.ref-list{ display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
.ref{ font-family:var(--mono); font-size:12px; padding:5px 11px; border-radius:var(--r-xs); background:var(--bg-2); color:var(--ink-2); }
.ref.hl{ background:var(--green-soft); color:var(--green-ink); font-weight:500; }
.sector-stack{ display:grid; gap:18px; }
.matrix{ width:100%; border-collapse:collapse; font-size:14.5px; }
.matrix th, .matrix td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); }
.matrix thead th{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }
.matrix tbody th{ font-weight:600; color:var(--ink); }
.matrix td{ color:var(--ink-2); }
.matrix .axc{ display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:8px; vertical-align:middle; }
.matrix-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md); }