/* jenko6 «Schéma» (from v16/skhema.css): the page is a single-line diagram on RAL 7035 grey. One conductor runs down the left gutter, every section is
   a feeder with its own breaker, and energised means Jenko yellow with a graphite core. Photos arrive as graphite line
   traces and turn to colour when current reaches them. */
:root {
  --ground: #d6d8d5; --ground-2: #e3e5e2; --ground-3: #c6c9c5; --ink: #1b1f22; --ink-2: #3f454a; --off: #585e63;
  --line: rgba(27, 31, 34, .35); --line-2: rgba(27, 31, 34, .16); --line-3: rgba(27, 31, 34, .55);
  --live: #ffcf2b; --glow: rgba(255, 207, 43, .45); --err: #9e2418;
  --S: 40px; --gut: 120px; --rm: 48px; --rx: 17px; --hd: 64px; --sy: clamp(84px, 13vh, 150px);
  --step-hero: clamp(34px, 6.6vw, 100px); --step-h2: clamp(28px, 4.4vw, 64px); --step-acc: clamp(34px, 3.4vw, 58px);
  --step-sub: clamp(19px, 1.45vw, 23px); --step-body: clamp(16px, 1.1vw, 18px); --step-sm: 14px;
  --band: linear-gradient(90deg, var(--live) 0 calc(50% - .6px), var(--ink) calc(50% - .6px) calc(50% + .6px), var(--live) calc(50% + .6px));
  --band-h: linear-gradient(180deg, var(--live) 0 calc(50% - .6px), var(--ink) calc(50% - .6px) calc(50% + .6px), var(--live) calc(50% + .6px));
  color-scheme: light;
}
html { background: var(--ground); scrollbar-color: #80868a var(--ground); }
body { background: var(--ground); color: var(--ink); font-size: var(--step-body); caret-color: var(--ink); }
::selection { background: var(--ink); color: var(--live); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
main { position: relative; }
.skip { position: absolute; z-index: 100; left: 12px; top: -80px; padding: 12px 16px; background: var(--ink); color: var(--live); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.cap { font: 600 var(--step-sm)/1.3 "RF", system-ui, sans-serif; font-stretch: 72%; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.wide { font-stretch: 151%; font-weight: 900; text-transform: uppercase; letter-spacing: -.012em; line-height: 1.08; } /* FR: room for accented capitals (Â, Î, À, É) */
.lede { font-size: var(--step-sub); line-height: 1.42; color: var(--ink-2); max-width: 46ch; margin-top: clamp(14px, 2.2vh, 24px); }

/* heading words light one by one when their feeder is energised (grey stays ≥ 4.5:1) */
[data-words] .w { color: var(--off); transition: color .45s var(--ease); transition-delay: calc(var(--i, 0) * 75ms + .12s); }
[data-words].lit .w { color: var(--ink); }

/* one button, one height */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px; border: 0; border-radius: 2px; background: var(--live); color: var(--ink); font: 700 var(--step-body)/1 "RF", system-ui, sans-serif; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(27, 31, 34, .3); transition: background .25s, color .25s; }
.btn:hover { background: var(--ink); color: var(--live); }
.btn:active { transform: translateY(1px); }

/* ---------- the spine: one SVG over the whole document ---------- */
.spine { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100vh; overflow: hidden; pointer-events: none; }
.spine__svg { position: absolute; left: 0; top: 0; overflow: visible; }
.wd { fill: none; stroke: var(--line); stroke-width: 1.5; }
.wl { fill: none; stroke: var(--live); stroke-width: 4.5; }
.wc { fill: none; stroke: var(--ink); stroke-width: 1.1; opacity: .9; }
.wd, .wl, .wc { stroke-linejoin: miter; }
.jn { fill: var(--ground); stroke: var(--ink); stroke-width: 1.2; transition: fill .25s; }
.jn.on { fill: var(--live); }
.jn--s { fill: var(--ink); stroke: none; }
.pz-h { fill: none; stroke: var(--live); stroke-opacity: .4; stroke-width: 11; stroke-linecap: round; }
.pz-b { fill: none; stroke: #ffe066; stroke-width: 5; stroke-linecap: round; }
.pz-c { fill: none; stroke: #fffdf2; stroke-width: 2; stroke-linecap: round; }
.pz-off { visibility: hidden; }
.ct__bl { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.ct__band { stroke: var(--live); stroke-width: 5.5; stroke-linecap: round; opacity: 0; transition: opacity .2s; }
.ct.is-closed .ct__band { opacity: 1; }
.ct__t { fill: var(--ground); stroke: var(--ink); stroke-width: 1.5; }
.flash { position: fixed; z-index: 70; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: multiply;
  background: radial-gradient(120% 90% at 0% 50%, rgba(255, 207, 43, .95), rgba(255, 207, 43, .38) 45%, rgba(255, 207, 43, .2) 100%); }

/* ---------- the breaker: a drawn MCB front, 0 / I ---------- */
.brk { position: relative; z-index: 3; display: block; width: 44px; height: 68px; padding: 2px; border: 0; background: none; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.brk:focus-visible { outline-offset: 1px; }
.bk { width: 40px; height: 64px; overflow: visible; }
.b-body { fill: var(--ground-2); stroke: var(--ink); stroke-width: 1.5; transition: fill .2s; }
.b-scr { fill: var(--ground); stroke: var(--ink); stroke-width: 1.2; }
.b-sl, .b-mk { fill: none; stroke: var(--ink); stroke-width: 1.3; }
.b-slot { fill: var(--ground-3); stroke: var(--ink); stroke-width: 1.1; transition: fill .18s; }
.b-flag { fill: var(--ground-3); stroke: var(--ink); stroke-width: .9; transition: fill .18s; }
.b-lev { transition: transform .22s cubic-bezier(.2, .9, .25, 1); }
.b-lev rect { fill: var(--ink); }
.b-lev path { fill: none; stroke: var(--ground-3); stroke-width: 1.1; }
[aria-pressed="true"] > .bk .b-lev, [aria-pressed="true"] .pt__bk .b-lev { transform: translateY(-13px); }
[aria-pressed="true"] > .bk .b-slot, [aria-pressed="true"] > .bk .b-flag, [aria-pressed="true"] .pt__bk .b-slot, [aria-pressed="true"] .pt__bk .b-flag { fill: var(--live); }
.brk:hover .b-body { fill: #eff0ed; }
.surge .b-flag, .surge .b-slot { fill: var(--live); }
.brk.is-snap .bk { animation: snap .22s cubic-bezier(.2, .9, .25, 1); }
@keyframes snap { 30% { transform: translateY(1.5px); } }
.brk.is-nudge .bk { animation: nudge .5s; }
@keyframes nudge { 20%, 60% { transform: translateX(-2px); } 40%, 80% { transform: translateX(2px); } }

/* ---------- header: the incoming supply + a mini-map of the spine ---------- */
.hd { position: fixed; z-index: 50; inset: 0 0 auto; height: var(--hd); display: flex; align-items: center; gap: clamp(16px, 2.2vw, 36px); padding: 0 var(--rm) 0 calc(var(--S) + 28px); background: var(--ground); transition: box-shadow .3s; }
.hd.is-solid { box-shadow: 0 1px 0 var(--line-2); }
.hd__bus { position: absolute; left: calc(var(--S) - 16px); top: calc(50% - 3px); width: 32px; height: 6px; background: var(--ink); }
.hd__bus::before, .hd__bus::after { content: ""; position: absolute; left: 50%; top: 6px; height: calc(var(--hd) / 2 - 3px); }
.hd__bus::before { width: 1.5px; margin-left: -.75px; background: var(--line); }
.hd__bus::after { width: 4.5px; margin-left: -2.25px; background: var(--band); transform-origin: 50% 0; transform: scaleY(0); transition: transform .35s var(--ease); }
.hd.is-live .hd__bus::after { transform: scaleY(1); }
.hd.is-surge .hd__bus { background: var(--live); outline: 2px solid var(--ink); }
.hd__logo { display: block; width: 118px; color: var(--ink); }
.hd__logo svg { width: 100%; height: auto; }
.hd__nav { position: relative; display: flex; gap: clamp(18px, 2.2vw, 34px); margin-left: auto; padding: 8px 0 12px; }
.hd__nav a { position: relative; font: 600 var(--step-sm)/1.2 "RF", system-ui, sans-serif; color: var(--ink-2); text-decoration: none; padding: 6px 0; }
.hd__nav a:hover, .hd__nav a[aria-current] { color: var(--ink); }
.hd__nav a::after { content: ""; position: absolute; z-index: 1; left: 50%; bottom: -9px; width: 7px; height: 7px; margin-left: -3.5px; background: var(--ground); box-shadow: 0 0 0 1.2px var(--ink); transition: background .25s; }
.hd__nav a.is-fed::after { background: var(--live); }
.hd__nav a[aria-current]::after { background: var(--ink); outline: 2px solid var(--live); outline-offset: 1px; }
.hd__map { position: absolute; left: 0; right: 0; bottom: 3.5px; height: 4.5px; }
.hd__map::before { content: ""; position: absolute; left: 0; right: 0; top: 1.5px; height: 1.5px; background: var(--line); }
.hd__map-live { position: absolute; inset: 0; background: var(--band-h); transform-origin: 0 50%; transform: scaleX(var(--mp, 0)); }
.hd__map::after { content: ""; position: absolute; top: -2px; left: calc(var(--sp, 0) * 100%); width: 30px; height: 8.5px; margin-left: -15px; border-radius: 5px; background: #fff6c8; outline: 2px solid var(--live); opacity: 0; }
.hd.is-surging .hd__map::after { opacity: 1; }
.hd__menu { display: none; align-items: center; gap: 8px; height: 44px; padding: 0 12px; margin-left: auto; border: 1px solid var(--line-3); border-radius: 2px; background: none; font: 600 var(--step-sm)/1 "RF", system-ui, sans-serif; cursor: pointer; }
.hd__menu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.hd__cta .l-short, .fam__go .l-short { display: none; }
.menu { position: fixed; z-index: 49; left: 0; right: 0; top: var(--hd); padding: 8px var(--rm) 24px var(--gut); background: var(--ground); box-shadow: 0 1px 0 var(--line-2), 0 24px 40px -30px rgba(0, 0, 0, .45); }
.menu nav { position: relative; display: grid; gap: 2px; padding-left: 22px; border-left: 1.5px solid var(--line); }
.menu a { position: relative; display: flex; align-items: center; min-height: 48px; font: 700 var(--step-sub)/1.1 "RF", system-ui, sans-serif; color: var(--ink-2); text-decoration: none; }
.menu a::before { content: ""; position: absolute; left: -27px; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: var(--ground); box-shadow: 0 0 0 1.2px var(--ink); }
.menu a[aria-current] { color: var(--ink); }
.menu a[aria-current]::before, .menu a.is-fed::before { background: var(--live); }

/* ---------- panels with one corner cut on the wedge's taper ---------- */
.frame { --c: 22px; --r: calc(var(--c) * 4); position: relative; display: block; background: var(--line-3);
  clip-path: polygon(0 0, calc(100% - var(--r)) 0, 100% var(--c), 100% 100%, 0 100%); }
.frame__in { position: absolute; inset: 1px; display: block; overflow: hidden; background: var(--ground-3);
  clip-path: polygon(0 0, calc(100% - var(--r) + .25px) 0, 100% calc(var(--c) - .06px), 100% 100%, 0 100%); }
.frame.is-on { background: var(--ink); }

/* ---------- trace → colour: the colour layer is masked by --w, a yellow edge rides the wipe ---------- */
.pic { --w: 114%; position: relative; display: block; overflow: hidden; background: var(--ground-3); }
.pic img, .pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pic__c { -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--w) - 14%), transparent var(--w)); mask-image: linear-gradient(90deg, #000 calc(var(--w) - 14%), transparent var(--w)); }
.pic--over { position: absolute; inset: 0; background: none; }
.pic--over .pic__c { -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--w) - 14%), #000 var(--w)); mask-image: linear-gradient(90deg, transparent calc(var(--w) - 14%), #000 var(--w)); }
.pic__edge { position: absolute; z-index: 2; top: 0; bottom: 0; left: calc(var(--w) - 8%); width: 30px; margin-left: -15px; background: linear-gradient(90deg, rgba(255, 207, 43, 0), rgba(255, 207, 43, .5) 38%, var(--ink) 44%, var(--live) 46% 54%, var(--ink) 56%, rgba(255, 207, 43, .5) 62%, rgba(255, 207, 43, 0)); opacity: 0; transition: opacity .2s; pointer-events: none; }
.pw .pic, .pw [data-film] { --w: -2%; }

/* ---------- sections ---------- */
.sec { position: relative; padding: var(--sy) var(--rm) var(--sy) var(--gut); }
.head { position: relative; }
.head .brk { position: absolute; left: calc(var(--S) + 18px - var(--gut)); top: -4px; }
.h2 { font-size: var(--step-h2); text-wrap: balance; }

/* hero: the drone film in an instrument panel, then the source card */
.hero { position: relative; height: 180svh; }
.hero__stage { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; }
.hero__panel { --c: 26px; position: absolute; left: calc(var(--S) + 32px); right: var(--rm); top: calc(var(--hd) + 14px); bottom: 26px; transform-origin: 100% 0; background: rgba(27, 31, 34, calc(.55 * var(--fl, 1))); }
.hero__panel .frame__in > img, .hero__live, .hero__live img, .hero__live video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__shade { --f: 36%; position: absolute; inset: 0; z-index: 3; background: linear-gradient(0deg, var(--ground) 0, var(--ground) var(--f), rgba(214, 216, 213, .9) calc(var(--f) + 12%), rgba(214, 216, 213, .5) calc(var(--f) + 24%), rgba(214, 216, 213, 0) calc(var(--f) + 38%)); }
.hero__feed { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.hero__src { position: absolute; right: var(--rm); top: var(--src-y, 50%); opacity: 0; }
.hero__copy { position: absolute; z-index: 4; left: 0; right: var(--rm); bottom: calc(26px + clamp(22px, 4.4vh, 52px)); padding: 0 clamp(24px, 3vw, 48px) 0 var(--gut); }
.hero__copy .brk { position: absolute; left: calc(var(--S) - 22px); top: -2px; }
.hero__h { font-size: var(--step-hero); max-width: 100%; text-wrap: balance; }
.hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; margin-top: clamp(16px, 2.8vh, 30px); }
.hero__lede { max-width: 46ch; font-size: var(--step-sub); line-height: 1.42; color: var(--ink-2); }
.hero__act { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.tel { display: grid; gap: 3px; }
.tel > a { font: 800 var(--step-sub)/1.1 "RF", system-ui, sans-serif; font-stretch: 112%; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.tel__h { font-size: var(--step-sm); color: var(--ink-2); }
.tel__st { display: flex; align-items: center; gap: 8px; font-size: var(--step-sm); color: var(--ink-2); }
.tel__st i { width: 9px; height: 9px; border-radius: 50%; background: var(--ground-3); box-shadow: 0 0 0 1.2px var(--ink); }
.tel__st[data-open="yes"] i { background: var(--live); }

/* families: six feeders off one bus, lettered A–F */
.fam__grid { list-style: none; padding: 0; margin-top: clamp(44px, 7vh, 72px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 44px clamp(14px, 1.6vw, 26px); }
.fam__it { position: relative; padding-top: 46px; }
.fam__a { display: grid; grid-template-columns: minmax(0, 1fr); color: inherit; text-decoration: none; }
.fam__a:focus-visible { outline-offset: 6px; }
.tag { position: absolute; z-index: 3; left: 50%; top: 0; width: 26px; height: 26px; transform: translate(-50%, -50%); display: grid; place-items: center; background: var(--ground); box-shadow: 0 0 0 1.3px var(--ink); font: 700 var(--step-sm)/1 "RF", system-ui, sans-serif; transition: background .3s, color .3s, box-shadow .3s; }
.fam__it.is-on .tag { background: var(--live); }
.fam__a:hover .tag, .fam__a:focus-visible .tag { background: var(--ink); color: var(--live); }
.fam__a .pic { aspect-ratio: 4 / 5; }
.fam__a .pic img { transition: transform .8s var(--ease); }
.fam__a:hover .pic img, .fam__a:focus-visible .pic img { transform: scale(1.035); }
.fam__ann { position: relative; display: grid; gap: 6px; margin-left: 14px; padding: 16px 0 0 16px; border-left: 1px solid var(--line-3); }
.fam__n, .fam__s > span { position: relative; }
.fam__n::before, .fam__s > span::before { content: ""; position: absolute; left: -16px; top: .66em; width: 11px; height: 1px; background: var(--line-3); }
.fam__n { font: 800 var(--step-sub)/1.12 "RF", system-ui, sans-serif; font-stretch: 100%; letter-spacing: -.005em; }
.fam__s { display: grid; gap: 2px; font: 560 var(--step-sm)/1.35 "RF", system-ui, sans-serif; font-stretch: 86%; color: var(--ink-2); }
.fam__go { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0 30px; font: 700 var(--step-sm)/1.3 "RF", system-ui, sans-serif; color: var(--ink); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .4s var(--ease); }
.fam__go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.fam__a:hover .fam__go, .fam__a:focus-visible .fam__go { opacity: 1; transform: none; }

/* cabinet: the isolator opens the doors, then the schematic over the open cabinet (one pinned stage) */
.door { position: relative; margin: clamp(32px, 5vh, 56px) calc(var(--rm) * -1) 0 calc(var(--gut) * -1); }
.door__stage { position: relative; padding: 0 var(--rm) 0 var(--gut); }
.door.is-pin .door__stage { position: sticky; top: calc(var(--hd) + 10px); }
.door__feed { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sch { position: relative; display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(250px, 1fr); grid-template-areas: "iso ." "photo side" "det side"; gap: clamp(14px, 2.2vh, 26px) clamp(32px, 4.4vw, 80px); align-items: start; }
.sch__iso { grid-area: iso; position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.iso { flex: none; width: clamp(120px, 12vw, 180px); height: auto; overflow: visible; }
.iso__band { fill: none; stroke: var(--live); stroke-width: 4.5; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .35s var(--ease); }
.iso__line { fill: none; stroke: var(--ink); stroke-width: 1.1; opacity: .8; }
.iso__t { fill: var(--ground); stroke: var(--ink); stroke-width: 1.6; }
.iso__stop, .iso__grip { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.iso__bl { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
.iso__bband { stroke-width: 6.5; }
.cab.is-live .iso__in, .iso.is-on .iso__out, .iso.is-on .iso__bband { stroke-dashoffset: 0; }
.iso__cap { display: flex; align-items: baseline; gap: 12px; }
.iso__cap b { font: 900 var(--step-sub)/1 "RF", system-ui, sans-serif; font-stretch: 151%; color: var(--ink); min-width: 1.2ch; }
.iso__hint { font-size: var(--step-sm); line-height: 1.35; color: var(--ink-2); }
.sch__photo { grid-area: photo; position: relative; aspect-ratio: 1600 / 901; }
.sch__photo > .pic { position: absolute; inset: 0; }
.leaves { position: absolute; inset: 0; z-index: 1; perspective: 2400px; pointer-events: none; }
.leaf { --open: 1; position: absolute; left: calc(var(--x) * 1%); width: calc(var(--w) * 1%); top: 3.363%; height: 85.2%;
  background: url(../../v15/media/cab-closed-1200.webp) no-repeat var(--ground-3);
  background-size: calc(10000% / var(--w)) calc(10000% / 85.2);
  background-position: calc(var(--x) / (100 - var(--w)) * 100%) calc(3.363 / 14.8 * 100%);
  transform-origin: 100% 50%; transform: rotateY(calc(var(--open) * 104deg)); backface-visibility: hidden; }
.leaf::after { content: ""; position: absolute; inset: 0; background: #0c0e10; opacity: calc(var(--open) * .55); }
.pw .leaf { --open: 0; }
.sch__svg, .sch__nodes { transition: opacity .4s; }
.pw .sch:not(.is-open) .sch__svg, .pw .sch:not(.is-open) .sch__nodes, .pw .sch:not(.is-open) .sch__lead { opacity: 0; }
.sch__svg { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sch__svg .wh { fill: none; stroke: rgba(236, 238, 235, .78); stroke-width: 5; }
.sch__svg .wd { stroke: var(--ink); stroke-opacity: .7; }
.sch__nodes { position: absolute; inset: 0; z-index: 3; }
.node { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 26px; height: 26px; margin: -13px 0 0 -13px; display: grid; place-items: center; border: 0; padding: 0; border-radius: 50%; background: var(--ground-2); color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); font: 700 var(--step-sm)/1 "RF", system-ui, sans-serif; cursor: pointer; transition: background .25s, color .25s, box-shadow .3s, transform .3s var(--ease); }
.node.is-pass { background: var(--live); }
.node.is-on { background: var(--ink); color: var(--live); outline: 3px solid var(--live); outline-offset: 1px; transform: scale(1.12); }
.sch__side { grid-area: side; position: relative; z-index: 3; }
.sch__list { display: grid; border-bottom: 1px solid var(--line-2); }
.pt { position: relative; display: grid; grid-template-columns: 26px 22px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 52px; padding: 4px 12px 4px 8px; border: 0; border-top: 1px solid var(--line-2); background: none; color: var(--off); font: 650 var(--step-body)/1.2 "RF", system-ui, sans-serif; text-align: left; cursor: pointer; transition: color .25s, background .25s; }
.pt:hover { color: var(--ink); }
.pt[aria-pressed="true"] { color: var(--ink); background: var(--ground-2); }
.pt__bk { width: 26px; height: 42px; overflow: visible; }
.pt__n { font: 700 var(--step-sm)/1 "RF", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.sch__det { grid-area: det; display: grid; grid-template-columns: clamp(96px, 9vw, 140px) minmax(0, 1fr); gap: 22px; align-items: start; }
.sch__zoom { --c: 12px; aspect-ratio: 4 / 5; }
.sch__zoom img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .25s; }
.sch__txt { display: grid; gap: 8px; max-width: 52ch; transition: opacity .25s; }
.sch__t { font: 800 var(--step-sub)/1.15 "RF", system-ui, sans-serif; font-stretch: 108%; }
.sch__txt p { color: var(--ink-2); }
.sch.is-swap .sch__txt, .sch.is-swap .sch__zoom img { opacity: 0; }
.sch__lead { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; transition: opacity .4s; }
.sch__lead path { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 4 3; }
.sch__lead path.lh { stroke: rgba(236, 238, 235, .85); stroke-width: 3.5; stroke-dasharray: none; }
.sch__lead circle { fill: var(--ink); }
@media (min-width: 1000px) { .leaf { background-image: url(../../v15/media/cab-closed-2400.webp); } }
@media (min-width: 1000px) and (max-height: 860px) { .sch__photo { width: min(100%, calc((100svh - var(--hd) - 270px) * 1.7758)); } }

/* workshop: readings on a ruled line */
.head--row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 36ch); gap: 16px 56px; align-items: end; }
.shop__cofrac { color: var(--ink-2); padding-bottom: 6px; }
.shop__cofrac b { color: var(--ink); }
.meter { --m: 1; position: relative; margin-top: clamp(40px, 6.5vh, 68px); }
.pw .meter { --m: 0; }
.meter__rail { position: relative; height: 4.5px; }
.meter__rail::before { content: ""; position: absolute; left: 0; right: 0; top: 1.5px; height: 1.5px; background: var(--line); }
.meter__live { position: absolute; inset: 0; background: var(--band-h); transform-origin: 0 50%; transform: scaleX(var(--m)); }
.meter__list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 clamp(14px, 1.6vw, 26px); }
.rd { position: relative; padding-top: 24px; color: var(--ink); }
.pw .rd { color: var(--off); transition: color .35s; }
.pw .rd.on { color: var(--ink); }
.rd::before { content: ""; position: absolute; left: 0; top: -8px; width: 1.5px; height: 20px; background: var(--ink); }
.pw .rd::before { background: var(--line-3); }
.pw .rd.on::before { background: var(--ink); }
.rd__v { display: block; font: 800 var(--step-acc)/1 "RF", system-ui, sans-serif; font-stretch: 116%; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rd__v small { font-size: var(--step-sub); letter-spacing: 0; margin-left: .15em; }
.rd__v small.rd__pre { margin: 0 .25em 0 0; }
.rd__l { display: block; margin-top: 10px; font-size: var(--step-sm); line-height: 1.35; color: var(--ink-2); max-width: 22ch; }
.shop__media { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px clamp(14px, 1.6vw, 26px); margin-top: clamp(48px, 8vh, 80px); }
.shop__media figure { position: relative; padding-top: 30px; margin: 0; }
.shop__media figcaption { margin-top: 12px; }
.shop__fac figcaption { text-transform: none; letter-spacing: .01em; font-stretch: 86%; }
.shop__film { grid-column: 1 / span 8; }
.shop__film .frame { --c: 24px; aspect-ratio: 16 / 9; }
.shop__film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shop__fac { grid-column: 9 / -1; }
.shop__fac .pic { aspect-ratio: 8 / 9.3; }
.shop__ph { grid-column: span 3; }
.shop__ph .pic { aspect-ratio: 16 / 10; }

/* clients: the loads at the end of the network */
.refs__net { margin-top: clamp(44px, 7vh, 72px); }
.loads { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(14px, 1.6vw, 26px); }
.load { position: relative; padding-top: 30px; }
.load__pl { --c: 20px; height: clamp(150px, 22vh, 230px); }
.load__pl .frame__in { display: grid; place-items: center; background: var(--ground-2); }
.load--main img { width: min(48%, 300px); height: auto; opacity: 1; transition: opacity .7s; }
.load--main .cap { display: block; margin-top: 12px; }
.pw .load img { opacity: .38; }
.pw .load.is-on img { opacity: 1; }
.quote { margin: clamp(36px, 6vh, 60px) 0 0; display: grid; gap: 10px; max-width: 62ch; }
.quote__mk { justify-self: start; padding: 6px 10px; background: var(--ink); color: var(--live); font: 700 var(--step-sm)/1 "RF", system-ui, sans-serif; letter-spacing: .04em; }
.quote blockquote { margin: 0; font-size: var(--step-sub); line-height: 1.4; color: var(--ink); }
.quote figcaption { font-size: var(--step-sm); color: var(--ink-2); }
.loads--sm { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px clamp(12px, 1.2vw, 20px); margin-top: clamp(44px, 7vh, 72px); }
.load--sm { padding-top: 20px; }
.cell { position: relative; display: grid; place-items: center; height: 92px; box-shadow: inset 0 0 0 1px var(--line-2); }
.cell img { width: auto; height: calc(var(--h) * var(--ls, 1) * 1px); max-width: 80%; object-fit: contain; transition: opacity .6s; }

/* request: the circuit ends open at the form */
.dv__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 44px clamp(40px, 6vw, 110px); margin-top: clamp(32px, 5vh, 56px); align-items: start; }
.dv__form { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 16px; }
.dv__rail { grid-column: 1; }
.rq { grid-column: 2; max-width: 540px; gap: 0; }
.dv__lede { font-size: var(--step-sub); line-height: 1.4; color: var(--ink-2); margin-bottom: 20px; }
.dv__pick { margin: -8px 0 18px; color: var(--ink); }
.dv__pick:empty { display: none; }
.rq__fields { gap: 16px; }
.rq label { font: 600 var(--step-sm)/1.2 "RF", system-ui, sans-serif; letter-spacing: .01em; color: var(--ink-2); gap: 8px; }
.rq input { height: 56px; border: 1px solid rgba(27, 31, 34, .5); border-radius: 2px; background: var(--ground-2); font-size: var(--step-body); color: var(--ink); transition: border-color .2s, background .2s; }
.rq input:hover { border-color: var(--ink); }
.rq input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: none; background: #eef0ed; }
.rq [aria-invalid="true"] { border-color: var(--err); }
.rq .err { font-size: var(--step-sm); line-height: 1.3; color: var(--err); font-weight: 600; }
.rq__btn { width: 100%; margin-top: 34px; }
.rq__done { padding-top: 58px; }
.rq__ok { display: flex; align-items: center; gap: 12px; }
.rq__ok b { font: 900 var(--step-sub)/1.1 "RF", system-ui, sans-serif; font-stretch: 130%; text-transform: uppercase; }
.lamp { width: 28px; height: 28px; flex: none; fill: var(--ground-2); stroke: var(--ink); stroke-width: 1.5; transition: fill .3s; }
.rq.is-sent .lamp { fill: var(--live); }
.rq__done p { color: var(--ink-2); }
.rq__done .rq__ok { color: var(--ink); }
.rq__crm { font: 500 var(--step-sm)/1.5 "RF", system-ui, sans-serif; font-stretch: 86%; color: var(--ink-2); opacity: 1; padding: 12px 14px; background: var(--ground-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.pw .rq.is-sent .rq__done { animation: done-in .6s var(--ease) .5s both; }
@keyframes done-in { from { opacity: 0; } }
.dv__call { display: grid; gap: 12px; align-content: start; padding-top: 4px; }
.dv__tel { font: 800 var(--step-acc)/1 "RF", system-ui, sans-serif; font-stretch: 112%; letter-spacing: -.02em; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dv__addr { color: var(--ink-2); max-width: 40ch; }
.sparks { position: absolute; z-index: 4; width: 220px; height: 220px; pointer-events: none; }

/* footer: the drawing's title block */
.ft { position: relative; z-index: 2; padding: 0 var(--rm) clamp(28px, 5vh, 48px) var(--gut); }
.ft__tb { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(0, 1.5fr) minmax(0, 1.3fr) minmax(0, .8fr) auto; box-shadow: inset 0 0 0 1.5px var(--ink); }
.ft__c { display: grid; align-content: start; gap: 6px; padding: 14px 18px; box-shadow: -1px 0 0 var(--ink); }
.ft__c:first-child { box-shadow: none; }
.ft__c p { font-size: var(--step-sm); line-height: 1.4; color: var(--ink); }
.ft__c a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ft__logo { align-content: center; }
.ft__logo svg { width: 120px; height: auto; color: var(--ink); }
.ft__up { align-content: center; }
.ft__top { height: 48px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 2px; background: none; font: 700 var(--step-sm)/1 "RF", system-ui, sans-serif; cursor: pointer; }
.ft__top span { display: inline-flex; align-items: center; gap: 8px; }
.ft__top svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ft__top:hover { background: var(--ink); color: var(--live); }

/* ---------- breakpoints ---------- */
@media (max-width: 1199.98px) {
  :root { --S: 32px; --gut: 104px; --rm: 36px; }
  .fam__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; }
  .loads--sm { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ft__tb { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ft__c { box-shadow: 0 -1px 0 var(--ink); }
  .ft__c:nth-child(even) { box-shadow: 0 -1px 0 var(--ink), -1px 0 0 var(--ink); }
  .ft__c:first-child { box-shadow: none; }
  .ft__org { grid-column: 2; }
}
@media (max-width: 999.98px) {
  .hd__nav { display: none; }
  .hd__menu { display: inline-flex; }
  .hd__cta { margin-left: 0; }
  .sch { grid-template-columns: minmax(0, 1fr); grid-template-areas: "iso" "photo" "det" "side"; }
  .sch__lead { display: none; }
  .sch__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .head--row { grid-template-columns: minmax(0, 1fr); }
  .meter { display: grid; grid-template-columns: 4.5px minmax(0, 1fr); gap: 0 26px; }
  .meter__rail { height: auto; }
  .meter__rail::before { left: 1.5px; right: auto; top: 0; bottom: 0; width: 1.5px; height: auto; }
  .meter__live { background: var(--band); transform-origin: 50% 0; transform: scaleY(var(--m)); }
  .meter__list { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .rd { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: 4px 20px; align-items: baseline; padding-top: 0; }
  .rd__l { margin-top: 0; }
  .rd::before { left: -32px; top: .55em; width: 20px; height: 1.5px; }
  .shop__film { grid-column: 1 / -1; }
  .shop__fac { grid-column: 1 / -1; }
  .shop__fac .pic { aspect-ratio: 16 / 9; }
  .shop__ph { grid-column: span 6; }
  .dv__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899.98px) {
  :root { --S: 24px; --gut: 96px; --rm: 28px; }
}
@media (max-width: 599.98px) {
  :root { --S: 7px; --gut: 28px; --rm: 16px; --rx: 17px; --hd: 58px; --sy: clamp(64px, 10vh, 96px); --step-sm: 13px; --step-acc: min(28px, 8.4vw); }
  .wide { font-stretch: 125%; line-height: 1.08; }
  .hd { gap: 8px; padding-left: 24px; }
  .hd__bus { left: 0; width: 14px; }
  .hd__logo { width: 84px; margin-right: auto; }
  .hd__menu { margin-left: 0; padding: 0 10px; }
  .hd__menu span { display: none; }
  .hd__menu { width: 44px; justify-content: center; }
  .hd__cta { padding: 0 16px; }
  .hd__cta .l-long { display: none; }
  .hd__cta .l-short { display: inline; }
  .menu { padding-left: var(--gut); }
  .head { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
  .head .brk, .hero__copy .brk { position: relative; left: auto; top: 0; width: 40px; height: 62px; padding: 2px; }
  .brk .bk { width: 36px; height: 58px; }
  .head--row .shop__cofrac { grid-column: 1 / -1; }
  .lede { margin-left: 0; }
  .hero { height: auto; }
  .hero__stage { position: relative; height: auto; min-height: 0; overflow: visible; padding: calc(var(--hd) + 10px) var(--rm) 30px var(--gut); }
  .hero__panel { position: relative; left: auto; right: auto; top: auto; bottom: auto; height: 44svh; min-height: 260px; --c: 18px; }
  .hero__shade, .hero__src, .hero__feed { display: none; }
  .hero__copy { position: relative; left: auto; right: auto; bottom: auto; padding: 0; margin-top: 22px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px 12px; }
  .hero__h { grid-column: 1 / -1; }
  .hero__copy .brk { grid-column: 1; grid-row: 2; }
  .hero__row { grid-column: 2; grid-row: 2; margin-top: 0; display: grid; gap: 18px; }
  .hero__act { display: grid; gap: 14px; }
  .hero__act .btn { width: 100%; }
  .fam__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 14px; }
  .fam__ann { margin-left: 6px; padding: 12px 0 0 10px; }
  .fam__n { font-size: var(--step-body); font-stretch: 84%; }
  .fam__s { font-stretch: 80%; }
  .fam__n::before, .fam__s > span::before { left: -10px; width: 6px; }
  .fam__go { display: none; }
  .iso { width: 112px; }
  .sch__list { grid-template-columns: minmax(0, 1fr); }
  .sch__det { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; }
  .node { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
  .meter { gap: 0 20px; }
  .rd { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .rd::before { left: -26px; width: 16px; }
  .shop__ph { grid-column: span 6; }
  .shop__media { row-gap: 32px; }
  .loads { grid-template-columns: minmax(0, 1fr); }
  .load__pl { height: 132px; }
  .loads--sm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .cell { height: 76px; --ls: .82; }
  .dv__form { grid-template-columns: 30px minmax(0, 1fr); gap: 0 12px; }
  .dv__tel { font-size: var(--step-acc); }
  .ft__tb { grid-template-columns: minmax(0, 1fr); }
  .ft__c, .ft__c:nth-child(even) { box-shadow: 0 -1px 0 var(--ink); }
  .ft__c:first-child { box-shadow: none; }
  .ft__org { grid-column: auto; }
}
@media (max-width: 359.98px) {
  .hd__logo { width: 72px; }
  .hd__cta { padding: 0 12px; }
}
@media (min-width: 600px) and (max-height: 700px) {
  .hero__lede { max-width: 52ch; }
  .fam__it { padding-top: 40px; }
}

/* reduced motion: final states, no pinning, colour photos, current drawn as a static energised line */
@media (prefers-reduced-motion: reduce) {
  .hero { height: auto; }
  .hero__stage { position: relative; height: 100svh; }
  .door { height: auto !important; }
  .door__stage { position: relative !important; }
  .pic__edge, .pz-h, .pz-b, .pz-c { display: none; }
  .pic { --w: 114%; }
  .pic .pic__t { visibility: hidden; }
  .pic--over { display: none; }
  .fam__a .pic img { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 599.98px) {
  .hero__stage { height: auto; }
}

/* ---------- jenko6 (FR): French text, touch and phones ---------- */
sub { font-size: max(12px, .72em); line-height: 0; vertical-align: -.22em; }
/* each sentence of a heading on its own line(s); units keep their case inside uppercase captions (« 550 m² ») */
.h2 .s { display: block; }
.u { text-transform: none; letter-spacing: 0; }
/* bigger hit areas without moving the layout */
.hd__logo { display: flex; align-items: center; height: 44px; }
.tel > a, .dv__tel, .ft__ph a { display: inline-block; padding: 13px 0; margin: -13px 0; }
.hd__nav a::before { content: ""; position: absolute; left: -6px; right: -6px; top: -8px; bottom: -8px; }
.dv__tel { justify-self: start; }
/* a narrow family column takes the short action label (« Devis ») so it never wraps */
.fam__it { container-type: inline-size; }
@container (max-width: 179.98px) {
  .fam__go .l-long { display: none; }
  .fam__go .l-short { display: inline; }
}
/* touch screens have no hover: the family action stays visible */
@media (hover: none) {
  .fam__go { opacity: 1; transform: none; }
  .btn:hover { background: var(--live); color: var(--ink); }
  .ft__top:hover { background: none; color: inherit; }
}
/* the isolator: the drawing on the left, caption and hint stacked on its right, so the feeder that drops from the
   isolator's right terminal to the photo never crosses the (longer, wrapping) French hint */
.sch__iso { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "iso cap" "iso hint"; gap: 2px 22px; align-items: center; }
.iso { grid-area: iso; }
.iso__cap { grid-area: cap; align-self: end; }
.iso__hint { grid-area: hint; align-self: start; }
@media (max-width: 599.98px) { .sch__iso { column-gap: 18px; } }
/* point markers on the photo: a 44 px target around the 22–26 px disc */
.node::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; }
@media (max-width: 599.98px) {
  /* headings: tighter leading (still clear of  / É / À), size set by main.js (fitHeads) */
  .wide { line-height: 1.08; }
  /* breakers: 44 px wide targets */
  .head { grid-template-columns: 44px minmax(0, 1fr); }
  .hero__copy { grid-template-columns: 44px minmax(0, 1fr); }
  .head .brk, .hero__copy .brk { width: 44px; height: 64px; padding: 2px 4px; }
  /* families: short action under each card */
  .fam__go { display: inline-flex; margin: 10px 0 0 16px; opacity: 1; transform: none; }
  .fam__go .l-long { display: none; }
  .fam__go .l-short { display: inline; }
  .sch__det { grid-template-columns: 96px minmax(0, 1fr); }
}
@media (max-width: 359.98px) {
  .sch__det { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
}