/* ECXIFR — ÉDITION HARMONISÉE v4 · design system of record
   Palette matched to "kahlity logo final" (AVIF vendored): violet #6e2383,
   deep violet #501361, greys #8f8f8f/#e2e2e2, black — Kahlity France ×
   Energycapitalx Infrastructure France (ECXIFR) harmonization.
   Basis: carenyoongeom KSMC IBM Plex datasheet system (1px flat, numbered
   indices). Origin: kahlity.com. Zero-JS · zero external requests (CU-06/21). */

:root{
  --paper:#F7F4FA; --panel:#FFFFFF; --ink:#1F1F20; --black:#000000;
  --violet:#6E2383; --violet-deep:#501361; --violet-tint:#F4EBF6;
  --grey:#8F8F8F; --grey-lt:#E2E2E2; --line:#D6D1D9;
  --ok:#2D6A4F;
  --sans:'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --serif:'IBM Plex Serif',Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:15px/1.7 var(--sans)}
main{max-width:1080px;margin:0 auto;padding:0 26px}
img{display:block;max-width:100%}

.k{font:11px/1 var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--grey)}
.idx{font:12px/1 var(--mono);letter-spacing:.18em;color:var(--violet)}
h1{font:600 46px/1.08 var(--sans);letter-spacing:-.01em;margin:14px 0 10px;color:var(--black)}
h2{font:600 24px/1.2 var(--sans);margin:8px 0 14px;color:var(--black)}
h3{font:600 14px/1.3 var(--sans);margin:16px 0 8px;color:var(--black)}
.serif{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.55;color:var(--violet-deep)}
p{max-width:76ch;margin:0 0 14px}
p.lead{font-size:17px;line-height:1.65;max-width:66ch}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--violet);text-underline-offset:3px}
a:hover{color:var(--violet)}
code{font:13px var(--mono);border:1px solid var(--grey-lt);background:var(--panel);padding:0 5px}

header{border-bottom:1px solid var(--black);background:var(--panel)}
.bar{max-width:1080px;margin:0 auto;padding:14px 26px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.wordmark img{height:52px;width:auto}
nav{font:11px var(--mono);letter-spacing:.13em;text-transform:uppercase;display:flex;gap:18px;flex-wrap:wrap}
nav a{text-decoration:none;color:var(--ink)}
nav a:hover{color:var(--violet)}

.hero{padding:60px 0 42px;border-bottom:1px solid var(--black);background:linear-gradient(180deg,var(--violet-tint),var(--paper))}
.hero .k{margin-bottom:14px}
.status{display:flex;flex-wrap:wrap;margin-top:28px;border:1px solid var(--ink);background:var(--panel)}
.status span{font:10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:9px 14px;border-right:1px solid var(--grey-lt);white-space:nowrap}
.status span:last-child{border-right:0}
.status .dot{color:var(--ok)}
.status .cu{color:var(--violet)}

section{padding:50px 0;border-bottom:1px solid var(--grey-lt)}
.shead{display:flex;align-items:baseline;gap:16px;margin-bottom:22px}
.shead .rule{flex:1;border-top:1px solid var(--black)}

.energy{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
.energy article{border:1px solid var(--ink);background:var(--panel);padding:22px 20px 18px}
.energy article::before{content:"";display:block;width:42px;height:3px;background:var(--violet);margin-bottom:16px}
.energy h3{margin-top:0}
.energy .tag{font:10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.energy p{font-size:13.5px}

.loop{display:grid;grid-template-columns:1fr 34px 1fr 34px 1fr;align-items:stretch;margin:10px 0 8px}
.node{border:1px solid var(--ink);background:var(--panel);padding:18px 16px}
.node .k{color:var(--violet)}
.node h3{margin:8px 0 6px}
.node p{font-size:12.5px;margin:0;color:var(--grey)}
.flow{display:flex;align-items:center;justify-content:center;font:16px var(--mono);color:var(--violet)}
.loopfoot{font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-top:12px}

.datasheet{border-collapse:collapse;width:100%;margin:6px 0 16px;font-size:12.5px;background:var(--panel)}
.datasheet th,.datasheet td{border:1px solid var(--grey-lt);padding:6px 10px;text-align:left;vertical-align:top}
.datasheet th{font:10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grey);font-weight:500;background:var(--violet-tint)}
.datasheet td{font-family:var(--mono)}

.surfaces{display:grid;grid-template-columns:190px 1fr;gap:7px 18px;margin:8px 0}
.surfaces .k{padding-top:3px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.chips a,.chips span{border:1px solid var(--ink);background:var(--panel);padding:8px 14px;font:11px var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.chips a:hover{border-color:var(--violet);color:var(--violet)}

/* services (kahlity integration) */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.services article{border:1px solid var(--ink);background:var(--panel);padding:18px 16px}
.services .num{font:22px var(--mono);color:var(--violet)}
.services h3{margin:6px 0 6px;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.services p{font-size:12.5px;margin:0 0 10px;color:var(--ink)}
.services a{font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
@media(max-width:960px){.services{grid-template-columns:repeat(2,1fr)}}

/* EU executive band */
.eu{border:1px solid var(--ink);border-left:6px solid var(--violet);background:var(--panel);padding:24px 22px;margin-top:8px}
.eu .k{color:var(--violet)}

.cta{border:1px solid var(--ink);border-left:6px solid var(--violet);background:var(--panel);padding:26px 24px;margin-top:8px}
.cta .k{color:var(--violet)}
.cta h2{margin:8px 0 10px}
.cta .btn{display:inline-block;border:1px solid var(--ink);background:var(--violet-deep);color:#fff;padding:11px 22px;font:12px var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;margin-top:6px}
.cta .btn:hover{background:var(--violet);border-color:var(--violet);color:#fff}
.cta p.doctrine{font:11.5px var(--mono);color:var(--grey);margin:12px 0 0;max-width:none}

footer{border-top:1px solid var(--black);padding:30px 0 60px;font:11px/1.8 var(--mono);color:var(--grey);background:var(--black);color:#bdb6c4}
footer .basis{color:#fff}
footer img{height:44px;width:auto;margin-bottom:14px}
footer a{color:#e2e2e2}

@media(max-width:760px){
  h1{font-size:34px}
  .energy,.loop,.services{grid-template-columns:1fr}
  .flow{transform:rotate(90deg);height:34px}
  .surfaces{grid-template-columns:1fr}
  .bar{flex-direction:column;align-items:flex-start}
}
