:root{
  --navy:#061F2C; --navy-2:#0B2A3B; --navy-3:#123A50; --navy-4:#1D4A63;
  --yellow:#FDC202; --yellow-2:#FFD84D;
  --steel-0:#F3F6F7; --steel-1:#E4E9EC; --steel-2:#C9D3D9; --steel-3:#8D9DA8; --steel-4:#5B6D79;
  --line:#C4E2F0; --ink:#061F2C; --ink-2:#3C5260; --white:#fff;
  --font:"Saira","Bahnschrift","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --tech:"B612","Bahnschrift","Segoe UI",Roboto,Arial,sans-serif;
  --gutter:clamp(1.1rem,4vw,2.5rem);
  --header-h:72px;
  --chamfer:12px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
body{margin:0;font-family:var(--font);font-size:1.0625rem;line-height:1.6;color:var(--ink);background:var(--steel-1);
  font-stretch:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.2em}
p{margin:0}
h1,h2,h3{margin:0;font-weight:800;line-height:1.02;font-stretch:118%;letter-spacing:-.005em}
h2{font-size:clamp(1.9rem,1.15rem + 2.5vw,3.05rem);text-wrap:balance}
h3{font-size:1.22rem;font-weight:700;font-stretch:108%;line-height:1.2}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.on-yellow :focus-visible{outline-color:var(--navy)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{width:min(100% - 2*var(--gutter),1320px);margin-inline:auto}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--yellow);color:var(--navy);padding:.6rem 1rem;font-weight:700}
.skip:focus{top:1rem}
.section{padding-block:clamp(4rem,8vw,7.5rem)}
.lede{font-size:clamp(1.08rem,1rem + .35vw,1.25rem);line-height:1.55;max-width:60ch;color:var(--ink-2)}
.tech{font-family:var(--tech);font-stretch:100%}

/* ---------- boutons ---------- */
.btn{--bg:var(--yellow);--fg:var(--navy);display:inline-flex;align-items:center;gap:.6rem;min-height:3.1rem;padding:.75rem 1.4rem .75rem 1.25rem;
  background:var(--bg);color:var(--fg);font:700 1rem/1.1 var(--font);font-stretch:108%;text-decoration:none;border:0;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - var(--chamfer)) 0,100% var(--chamfer),100% 100%,0 100%);transition:background .2s,color .2s,transform .2s}
.btn:hover{--bg:var(--yellow-2)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{clip-path:none}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn-line{--bg:transparent;--fg:currentColor;box-shadow:inset 0 0 0 1.5px currentColor;clip-path:none}
.btn-line:hover{--bg:rgba(255,255,255,.08)}
.on-light .btn-line:hover{--bg:rgba(6,31,44,.06)}
.btn-navy{--bg:var(--navy);--fg:#fff}
.btn-navy:hover{--bg:var(--navy-3)}

/* ---------- en-tête ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:60;color:#fff;transition:background .3s,box-shadow .3s,transform .3s}
.site-header.is-solid{background:rgba(6,31,44,.94);box-shadow:0 1px 0 rgba(196,226,240,.12)}
@supports (backdrop-filter:blur(8px)){.site-header.is-solid{background:rgba(6,31,44,.86);backdrop-filter:blur(10px) saturate(1.2)}}
.header-inner{display:flex;align-items:center;gap:1.5rem;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.brand .b-icon{height:42px;width:auto}
.brand .b-word{height:17px;width:auto}
.nav{display:flex;gap:clamp(1rem,2vw,1.9rem);margin-left:auto}
.nav a{position:relative;text-decoration:none;font-weight:500;font-size:.98rem;padding:.35rem 0;color:rgba(255,255,255,.82)}
.nav a:hover,.nav a[aria-current="true"]{color:#fff}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-.1rem;height:2px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1)}
.header-call{min-height:2.6rem;padding:.5rem 1rem .5rem .9rem;font-size:.95rem}
.menu-toggle{display:none;margin-left:auto;background:none;border:0;color:#fff;font:600 1rem var(--font);gap:.55rem;align-items:center;cursor:pointer;padding:.5rem}
.menu-toggle .bars{width:22px;height:14px;position:relative}
.menu-toggle .bars::before,.menu-toggle .bars::after,.menu-toggle .bars span{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform .25s,opacity .25s}
.menu-toggle .bars::before{top:0}.menu-toggle .bars span{top:6px}.menu-toggle .bars::after{top:12px}
.menu-toggle[aria-expanded="true"] .bars::before{transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bars span{opacity:0}
.menu-toggle[aria-expanded="true"] .bars::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1020px){
  .menu-toggle{display:inline-flex}
  .header-call{display:none}
  .nav{position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;gap:0;background:var(--navy);padding:.5rem var(--gutter) 1.5rem;
    border-top:1px solid rgba(196,226,240,.14);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s}
  .nav.is-open{opacity:1;transform:none;visibility:visible}
  .nav a{font-size:1.25rem;padding:.85rem 0;border-bottom:1px solid rgba(196,226,240,.1)}
  .nav a::after{display:none}
  .nav .nav-call{display:flex}
}
.nav .nav-call{display:none;margin-top:1rem;justify-content:center;border:0}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy);color:#fff;padding:calc(var(--header-h) + clamp(1.2rem,3.5vh,2.6rem)) 0 clamp(2rem,4.5vh,3.2rem);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 55% at 70% 45%,rgba(29,74,99,.55),transparent 70%)}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.62fr);gap:clamp(1.5rem,3.2vw,3.25rem);align-items:center}
.hero-copy{max-width:36rem}
.hero h1{font-size:clamp(2.35rem,1.05rem + 3.15vw,4.15rem);font-stretch:122%;line-height:.97;letter-spacing:-.012em;text-wrap:balance;hyphens:manual}
.hero-lead{margin-top:1.1rem;font-size:clamp(1.2rem,.95rem + .75vw,1.65rem);font-weight:400;font-stretch:112%;line-height:1.25;color:#fff}
.hero-text{margin-top:1.15rem;color:rgba(255,255,255,.78);max-width:34rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.hero-aside{margin-top:1.6rem;padding-top:1rem;border-top:1px solid rgba(196,226,240,.16);font-size:.95rem;color:rgba(255,255,255,.7);max-width:34rem}
.hero-aside a{color:#fff;text-decoration-color:var(--yellow);text-decoration-thickness:2px}

/* planche */
.sheet{position:relative;margin:0;border:1px solid rgba(196,226,240,.26);padding:clamp(.9rem,1.6vw,1.4rem);
  background:linear-gradient(180deg,rgba(11,42,59,.55),rgba(6,31,44,.2))}
.sheet-zones span{position:absolute;font:400 10px/1 var(--tech);color:rgba(196,226,240,.5);pointer-events:none}
.sheet-zones .zt{top:3px;transform:translateX(-50%)}
.sheet-zones .zl{left:4px;transform:translateY(-50%)}
.sheet-zones .zt.z1{left:12.5%}.sheet-zones .zt.z2{left:37.5%}.sheet-zones .zt.z3{left:62.5%}.sheet-zones .zt.z4{left:87.5%}
.sheet-zones .zl.z1{top:16.6%}.sheet-zones .zl.z2{top:50%}.sheet-zones .zl.z3{top:83.3%}
.sheet::after{content:"";position:absolute;inset:6px;border:1px solid rgba(196,226,240,.1);pointer-events:none}
.sheet-body{display:grid;grid-template-columns:minmax(0,1fr) 15.25rem;gap:clamp(.75rem,1.5vw,1.25rem);align-items:stretch}

.stage{position:relative;width:min(100%,calc(min(72vh,700px) * 1380 / 1880));aspect-ratio:1380/1880;margin-inline:auto;
  background-image:linear-gradient(rgba(196,226,240,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(196,226,240,.06) 1px,transparent 1px),
  linear-gradient(rgba(196,226,240,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(196,226,240,.03) 1px,transparent 1px);
  background-size:calc(100% / 6) calc(100% / 8.17),calc(100% / 6) calc(100% / 8.17),calc(100% / 30) calc(100% / 40.85),calc(100% / 30) calc(100% / 40.85);
  touch-action:pan-y;user-select:none;-webkit-user-select:none}
.stage svg.ov{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.stage svg.ov-back{z-index:0}
.stage svg.ov-front{z-index:20}
.machine{position:absolute;left:5.797%;top:10.638%;width:78.696%;height:77.021%;z-index:1}
.machine .plan{position:absolute;inset:0;width:100%;height:100%;opacity:0;clip-path:inset(0 0 100% 0);pointer-events:none}
.part{position:absolute;will-change:transform;transform-origin:50% 50%}
.part img{width:100%;height:100%;clip-path:inset(0 0 calc((1 - var(--rv,1)) * 100%) 0);-webkit-user-drag:none;pointer-events:none;transition:filter .25s,opacity .25s}
.part svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:var(--ol,0);pointer-events:none}
.part svg path{fill:none;stroke:var(--yellow);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-dasharray:1 1;stroke-dashoffset:var(--od,1);stroke-linejoin:round}
.part::after{content:"";position:absolute;left:-4%;right:-4%;top:calc(var(--rv,1) * 100%);height:2px;margin-top:-1px;background:var(--yellow);
  box-shadow:0 0 10px 2px rgba(253,194,2,.75);opacity:var(--cut,0);pointer-events:none}
.machine.has-hl .part img{opacity:.38}
.machine.has-hl .part.is-hl img{opacity:1;filter:drop-shadow(0 0 7px rgba(253,194,2,.95)) drop-shadow(0 0 2px rgba(253,194,2,1))}

.ov text{font-family:var(--tech)}
.ov .dim{stroke:var(--line);stroke-width:1.2;vector-effect:non-scaling-stroke;fill:none}
.ov .dim-t{fill:var(--line);font-size:30px}
.ov .leader{stroke:var(--line);stroke-width:1.1;vector-effect:non-scaling-stroke}
.ov .dot{fill:var(--line)}
.ov .balloon circle{fill:var(--navy);stroke:var(--line);stroke-width:1.4;vector-effect:non-scaling-stroke}
.ov .balloon text{fill:#fff;font-size:28px;font-weight:700;text-anchor:middle;dominant-baseline:central}
.ov .balloon.is-hl circle{fill:var(--yellow);stroke:var(--yellow)}
.ov .balloon.is-hl text{fill:var(--navy)}
.ov .ring{fill:none;stroke:var(--yellow);stroke-width:2;vector-effect:non-scaling-stroke}

.sheet-side{display:flex;flex-direction:column;gap:.9rem;min-width:0}
.nomen{width:100%;border-collapse:collapse;font:400 .8125rem/1.25 var(--tech);color:rgba(255,255,255,.86)}
.nomen caption{text-align:left;font:700 .8125rem/1.2 var(--tech);color:#fff;padding:0 0 .5rem}
.nomen th{font-weight:400;color:var(--steel-3);text-align:left;padding:.35rem .5rem;border-bottom:1px solid rgba(196,226,240,.3)}
.nomen td{border-bottom:1px solid rgba(196,226,240,.12);padding:0}
.nomen td.rep{width:2.4rem;padding:.42rem .5rem;color:var(--line);text-align:center;border-right:1px solid rgba(196,226,240,.12)}
.nomen button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;padding:.42rem .55rem;cursor:pointer}
.nomen button:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
.nomen .st{width:.62rem;height:.62rem;border:1.5px solid var(--steel-3);border-radius:50%;flex:none;transition:background .3s,border-color .3s}
.nomen tr[data-st="made"] .st{border-color:var(--line);background:linear-gradient(90deg,var(--line) 50%,transparent 50%)}
.nomen tr[data-st="move"] .st{border-color:var(--yellow);background:var(--yellow);box-shadow:0 0 0 3px rgba(253,194,2,.25)}
.nomen tr[data-st="done"] .st{border-color:var(--yellow);background:var(--yellow)}
.nomen tr[data-st="move"] td,.nomen tr.is-hl td{background:rgba(253,194,2,.1)}
.nomen tr.is-hl .rep{color:var(--yellow)}
.cartouche{margin:auto 0 0;display:grid;grid-template-columns:auto 1fr;border:1px solid rgba(196,226,240,.3);font:400 .75rem/1.3 var(--tech)}
.cartouche > div{display:contents}
.cartouche dt,.cartouche dd{margin:0;padding:.38rem .5rem;border-bottom:1px solid rgba(196,226,240,.14)}
.cartouche dt{color:var(--steel-3);border-right:1px solid rgba(196,226,240,.14)}
.cartouche dd{color:#fff}
.cartouche .c-brand{grid-column:1/-1;display:flex;align-items:center;gap:.55rem;padding:.5rem;border-bottom:1px solid rgba(196,226,240,.3)}
.cartouche .c-brand img{height:26px;width:auto}
.cartouche .c-brand b{font:700 .8rem/1 var(--tech);letter-spacing:.02em}
.cartouche > div:last-child dt,.cartouche > div:last-child dd{border-bottom:0}
#phaseName{color:var(--yellow)}

.sheet-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;margin-top:clamp(.75rem,1.4vw,1.1rem);padding-top:.9rem;border-top:1px solid rgba(196,226,240,.16)}
.phases{list-style:none;margin:0;padding:0;display:flex;gap:0;flex:1 1 26rem;position:relative;min-width:0}
.phases::before,.phases::after{content:"";position:absolute;left:.7rem;right:.7rem;top:.7rem;height:2px;background:rgba(196,226,240,.18)}
.phases::after{background:var(--yellow);right:auto;width:calc((100% - 1.4rem) * var(--prog,0))}
.phases li{flex:1;position:relative;z-index:1}
.phases button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;font:500 .82rem/1.1 var(--font);color:rgba(255,255,255,.62);padding-right:.3rem}
.phases button .n{display:grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--navy);border:1.5px solid rgba(196,226,240,.45);
  font:700 .7rem/1 var(--tech);color:var(--line);transition:all .25s}
.phases li:last-child button{align-items:flex-end;padding-right:0}
.phases li.is-done button .n{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
.phases li.is-on button{color:#fff}
.phases li.is-on button .n{background:var(--yellow);border-color:var(--yellow);color:var(--navy);box-shadow:0 0 0 4px rgba(253,194,2,.22)}
.phases button:focus-visible .n{outline:2px solid var(--yellow);outline-offset:3px}
.explode{display:flex;align-items:center;gap:.6rem;font:400 .8rem/1 var(--font);color:rgba(255,255,255,.7);flex:1 1 15rem}
.explode input{flex:1;min-width:6rem;-webkit-appearance:none;appearance:none;height:28px;background:transparent;cursor:pointer;margin:0}
.explode input::-webkit-slider-runnable-track{height:2px;background:rgba(196,226,240,.35)}
.explode input::-moz-range-track{height:2px;background:rgba(196,226,240,.35)}
.explode input::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-8px;background:var(--yellow);border:0;
  clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,0 100%)}
.explode input::-moz-range-thumb{width:18px;height:18px;background:var(--yellow);border:0;border-radius:0}
.explode input:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
.ctl{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;font:600 .85rem/1 var(--font);color:#fff;padding:.55rem .8rem;
  box-shadow:inset 0 0 0 1.5px rgba(196,226,240,.4);transition:box-shadow .2s,background .2s}
.ctl:hover{box-shadow:inset 0 0 0 1.5px var(--yellow)}
.ctl:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.ctl svg{width:1rem;height:1rem}

/* ---------- métier ---------- */
.on-light{color:var(--ink)}
.metier-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:end}
.process{list-style:none;margin:clamp(2.5rem,5vw,4rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--navy)}
.process li{padding:1.4rem 1.4rem 0 0;position:relative}
.process li + li{padding-left:1.4rem;border-left:1px solid var(--steel-2)}
.process .k{font:700 .8rem/1 var(--tech);color:var(--steel-4);display:block;margin-bottom:.9rem}
.process h3{margin-bottom:.55rem}
.process p{color:var(--ink-2);font-size:1rem}
.audience{margin-top:clamp(2.5rem,5vw,3.5rem);display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.5rem;padding:1.2rem 1.4rem;background:var(--white);
  border-left:4px solid var(--yellow)}
.audience strong{font-weight:700;font-stretch:108%}
.audience span{color:var(--ink-2)}

/* ---------- étude ---------- */
.etude{background:var(--white)}
.etude-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,5rem);align-items:start;margin-top:clamp(2rem,4vw,3rem)}
.spec{margin:0;border-top:2px solid var(--navy)}
.spec > div{display:grid;grid-template-columns:10.5rem minmax(0,1fr);gap:1rem;padding:1rem 0;border-bottom:1px solid var(--steel-2)}
.spec dt{font-weight:700;font-stretch:108%}
.spec dd{margin:0;color:var(--ink-2)}
.calc{position:sticky;top:calc(var(--header-h) + 1.5rem);background:var(--navy);color:#fff;padding:clamp(1.4rem,2.5vw,2rem);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.calc h3{font-size:1.35rem;margin-bottom:.35rem}
.calc > p{color:rgba(255,255,255,.72);font-size:.95rem}
.field{margin-top:1.25rem}
.field label,.field .lbl{display:flex;justify-content:space-between;gap:1rem;font-size:.95rem;margin-bottom:.45rem}
.field output,.field .val{font:700 .95rem/1.2 var(--tech);color:var(--yellow);white-space:nowrap}
.calc input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:28px;background:transparent;margin:0;cursor:pointer}
.calc input[type=range]::-webkit-slider-runnable-track{height:3px;background:linear-gradient(90deg,var(--yellow) var(--p,50%),rgba(196,226,240,.25) var(--p,50%))}
.calc input[type=range]::-moz-range-track{height:3px;background:rgba(196,226,240,.25)}
.calc input[type=range]::-moz-range-progress{height:3px;background:var(--yellow)}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-8.5px;background:var(--yellow);border:0;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%)}
.calc input[type=range]::-moz-range-thumb{width:20px;height:20px;background:var(--yellow);border:0;border-radius:0}
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1.5px solid rgba(196,226,240,.35)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{display:block;margin:0;text-align:center;padding:.55rem .2rem;font:700 .85rem/1 var(--tech);cursor:pointer;color:rgba(255,255,255,.8)}
.seg label + input + label,.seg input + label ~ label{border-left:1px solid rgba(196,226,240,.2)}
.seg input:checked + label{background:var(--yellow);color:var(--navy)}
.seg input:focus-visible + label{outline:2px solid var(--yellow);outline-offset:2px}
.calc-out{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:1.25rem;align-items:end;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid rgba(196,226,240,.2)}
.tank{width:100%;height:auto}
.tank .liq{transition:y .5s cubic-bezier(.3,.7,.2,1),height .5s cubic-bezier(.3,.7,.2,1)}
.res dt{font-size:.85rem;color:rgba(255,255,255,.7)}
.res dd{margin:0 0 .7rem;font:700 1.15rem/1.2 var(--tech)}
.res dd.big{font:800 clamp(2.2rem,1.5rem + 2vw,3rem)/1 var(--font);font-stretch:118%;color:var(--yellow);margin-bottom:0}
.calc-note{margin-top:1.1rem;font-size:.82rem;line-height:1.45;color:rgba(255,255,255,.62)}
.calc .btn{margin-top:1.2rem;width:100%;justify-content:center}

/* ---------- fabrication ---------- */
.fab{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.fab .lede{color:rgba(255,255,255,.75)}
.fab-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,5vw,5rem);margin-top:clamp(2.5rem,5vw,3.5rem);align-items:start}
.steps{list-style:none;margin:0;padding:0;position:relative}
.steps::before,.steps .bar{content:"";position:absolute;left:1.15rem;top:1.2rem;bottom:1.2rem;width:2px;background:rgba(196,226,240,.16)}
.steps .bar{background:var(--yellow);bottom:auto;height:calc((100% - 2.4rem) * var(--sp,0))}
.step{display:grid;grid-template-columns:2.3rem minmax(0,1fr);gap:1.2rem;padding:0 0 2.1rem;position:relative}
.step:last-child{padding-bottom:0}
.step .n{width:2.3rem;height:2.3rem;display:grid;place-items:center;background:var(--navy);border:1.5px solid rgba(196,226,240,.4);font:700 .9rem/1 var(--tech);
  color:var(--line);position:relative;z-index:1;transition:background .3s,color .3s,border-color .3s}
.step.is-reached .n{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
.step h3{margin:.25rem 0 .4rem}
.step p{color:rgba(255,255,255,.74);max-width:52ch}
.fiche{position:sticky;top:calc(var(--header-h) + 1.5rem);border:1px solid rgba(196,226,240,.3);padding:clamp(1.25rem,2.2vw,1.8rem);background:rgba(11,42,59,.6)}
.fiche h3{margin-bottom:.4rem}
.fiche > p{color:rgba(255,255,255,.72);font-size:.95rem}
.fiche dl{margin:1.1rem 0 0;font-size:.93rem}
.fiche dl > div{padding:.7rem 0;border-top:1px solid rgba(196,226,240,.14)}
.fiche dt{font:700 .8rem/1.2 var(--tech);color:var(--yellow);margin-bottom:.2rem}
.fiche dd{margin:0;color:rgba(255,255,255,.8)}

/* ---------- équipements ---------- */
.equip-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,5rem);align-items:center;margin-top:clamp(2rem,4vw,3rem)}
.details{position:relative;aspect-ratio:1/1.02;max-width:520px;width:100%}
.detail{position:absolute;margin:0;text-align:center}
.detail .lens{position:relative;border-radius:50%;background:var(--white);border:1.5px solid var(--navy);overflow:hidden;aspect-ratio:1;
  background-image:linear-gradient(rgba(6,31,44,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(6,31,44,.06) 1px,transparent 1px);background-size:16px 16px;
  box-shadow:0 0 0 6px var(--steel-1),0 0 0 7px rgba(6,31,44,.2)}
.detail .lens img{position:absolute;inset:9%;width:82%;height:82%;object-fit:contain}
.detail .tag{position:absolute;top:2%;left:2%;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--yellow);color:var(--navy);display:grid;place-items:center;
  font:700 .95rem/1 var(--tech);z-index:2;box-shadow:0 0 0 3px var(--steel-1)}
.detail figcaption{font:400 .8rem/1.3 var(--tech);color:var(--ink-2);margin-top:.75rem}
.detail.d-a{width:58%;left:0;top:0}
.detail.d-b{width:43%;right:0;top:9%}
.detail.d-c{width:46%;right:9%;bottom:0}
.functions{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2rem;border-top:2px solid var(--navy)}
.functions li{padding:.95rem 0;border-bottom:1px solid var(--steel-2)}
.functions b{display:block;font-weight:700;font-stretch:106%}
.functions span{color:var(--ink-2);font-size:.95rem}
.hazard{margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.4rem;align-items:start;background:var(--white);padding:1.4rem 1.6rem;
  border:8px solid transparent;border-image:repeating-linear-gradient(-45deg,var(--yellow) 0 12px,var(--navy) 12px 24px) 8}
.hazard svg{width:3rem;height:3rem}
.hazard h3{margin-bottom:.35rem}
.hazard p{color:var(--ink-2);max-width:72ch}
.eco{margin-top:1.4rem;color:var(--ink-2);font-size:.97rem;max-width:72ch}

/* ---------- installation ---------- */
.install{background:var(--white)}
.track{list-style:none;margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;counter-reset:s}
.track li{position:relative;padding:3.1rem 1.1rem 0 0}
.track li::before{content:"";position:absolute;left:0;right:0;top:1.05rem;height:2px;background:var(--navy)}
.track li:last-child::before{right:auto;width:2.2rem}
.track .n{position:absolute;top:0;left:0;width:2.2rem;height:2.2rem;display:grid;place-items:center;background:var(--yellow);font:700 .85rem/1 var(--tech);color:var(--navy)}
.track h3{font-size:1.08rem;margin-bottom:.35rem}
.track p{font-size:.95rem;color:var(--ink-2)}
.distinct{margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(1.5rem,4vw,4rem);padding-top:1.8rem;border-top:1px solid var(--steel-2)}
.distinct h3{font-size:1.35rem}
.distinct p{color:var(--ink-2);max-width:62ch}

/* ---------- enseignes ---------- */
.signs{background:var(--navy-2);color:#fff;position:relative;overflow:hidden}
.signs .lede{color:rgba(255,255,255,.76)}
.signs-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:end}
.sign-lab{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:clamp(1.5rem,3.5vw,3rem);margin-top:clamp(2.5rem,5vw,3.5rem);align-items:stretch}
.facade-wrap{position:relative;background:var(--navy);border:1px solid rgba(196,226,240,.18)}
.facade-wrap svg{width:100%;height:auto}
.hot{position:absolute;width:2.1rem;height:2.1rem;margin:-1.05rem 0 0 -1.05rem;border-radius:50%;border:0;background:var(--yellow);color:var(--navy);
  font:700 .85rem/1 var(--tech);cursor:pointer;display:grid;place-items:center;box-shadow:0 0 0 4px rgba(253,194,2,.25);transition:transform .2s,box-shadow .2s}
.hot:hover{transform:scale(1.08)}
.hot[aria-pressed="true"]{background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.3)}
.hot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(253,194,2,.55);animation:pulse 2.4s ease-out infinite}
.hot[aria-pressed="true"]::after{display:none}
@keyframes pulse{0%{transform:scale(.8);opacity:1}80%,100%{transform:scale(1.6);opacity:0}}
.light-switch{position:absolute;right:.9rem;bottom:.9rem;display:inline-flex;align-items:center;gap:.6rem;background:rgba(6,31,44,.85);color:#fff;border:1px solid rgba(196,226,240,.3);
  padding:.45rem .7rem .45rem .5rem;font:600 .82rem/1 var(--font);cursor:pointer}
.light-switch .sw{width:2.2rem;height:1.2rem;border-radius:1rem;background:rgba(196,226,240,.25);position:relative;transition:background .25s}
.light-switch .sw::after{content:"";position:absolute;top:.15rem;left:.15rem;width:.9rem;height:.9rem;border-radius:50%;background:#fff;transition:transform .25s}
.light-switch[aria-pressed="true"] .sw{background:var(--yellow)}
.light-switch[aria-pressed="true"] .sw::after{transform:translateX(1rem);background:var(--navy)}
.sign-letters{fill:#2a3d48;transition:fill .15s}
.sign-glow{opacity:0;transition:opacity .2s}
.is-lit .sign-letters{fill:#FFF6D5}
.is-lit .sign-glow{opacity:.85}
.is-lit .sign-face{fill:#16323f}
.flicker .sign-letters,.flicker .sign-glow{animation:flick 1.1s steps(1,end) both}
@keyframes flick{0%{opacity:.15}8%{opacity:1}12%{opacity:.2}20%{opacity:1}26%{opacity:.35}34%,100%{opacity:1}}
.diag{border:1px solid rgba(196,226,240,.24);padding:clamp(1.25rem,2.3vw,1.8rem);display:flex;flex-direction:column;background:rgba(6,31,44,.45)}
.diag .kicker{font:700 .8rem/1.2 var(--tech);color:var(--yellow)}
.diag h3{font-size:1.5rem;margin:.5rem 0 .6rem}
.diag-text{color:rgba(255,255,255,.8);min-height:5.5em}
.diag-list{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.35rem .8rem}
.diag-list button{all:unset;cursor:pointer;display:flex;gap:.5rem;align-items:baseline;font-size:.92rem;color:rgba(255,255,255,.7);padding:.2rem 0}
.diag-list button .tech{color:var(--line);font-size:.78rem}
.diag-list button[aria-pressed="true"]{color:#fff;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px}
.diag-list button:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.diag-foot{margin-top:auto;padding-top:1.2rem;font-size:.88rem;color:rgba(255,255,255,.62);border-top:1px solid rgba(196,226,240,.14)}
.maint{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem);margin-top:clamp(2.5rem,5vw,3.5rem);border-top:2px solid var(--yellow);padding-top:1.6rem}
.maint h3{margin-bottom:.6rem}
.maint p,.maint li{color:rgba(255,255,255,.76);font-size:.97rem}
.maint ul{margin:0;padding:0;list-style:none}
.maint li{padding:.45rem 0;border-bottom:1px solid rgba(196,226,240,.12)}
.maint li:first-child{padding-top:0}
.ref{margin-top:clamp(2.5rem,5vw,3.5rem);display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.2rem}
.ref .tech{font-size:.8rem;color:var(--line)}
.ref strong{font-size:clamp(1.4rem,1rem + 1.4vw,2.1rem);font-weight:800;font-stretch:118%}
.ref span{color:rgba(255,255,255,.66)}

/* ---------- contact ---------- */
.contact{background:var(--yellow);color:var(--navy)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.contact h2{max-width:14ch}
.phone-big{display:inline-block;margin-top:1.4rem;font-size:clamp(2.4rem,1rem + 5.4vw,5.6rem);font-weight:800;font-stretch:122%;line-height:.95;letter-spacing:-.02em;
  text-decoration:none;white-space:nowrap}
.phone-big:hover{text-decoration:underline;text-decoration-thickness:4px}
.contact-meta{margin-top:1.8rem;display:grid;gap:1rem;max-width:30rem}
.contact-meta .row{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.8rem;align-items:start}
.contact-meta svg{width:1.6rem;height:1.6rem;margin-top:.15rem}
.contact-meta a{font-weight:600}
.composer{background:var(--white);padding:clamp(1.3rem,2.5vw,2rem);clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.composer h3{font-size:1.35rem}
.composer > p{color:var(--ink-2);font-size:.95rem;margin-top:.35rem}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1rem;margin-top:1.2rem}
.fgrid .full{grid-column:1/-1}
.f label{display:block;font-size:.88rem;font-weight:600;margin-bottom:.3rem}
.f input,.f select,.f textarea{width:100%;font:400 1rem/1.4 var(--font);color:var(--ink);background:var(--steel-0);border:1.5px solid var(--steel-2);padding:.65rem .75rem;border-radius:0}
.f textarea{min-height:7.5rem;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(253,194,2,.6)}
.composer-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}
.status{margin-top:.7rem;font-size:.9rem;color:var(--ink-2);min-height:1.3em}

/* ---------- pied de page ---------- */
.footer{background:var(--navy);color:rgba(255,255,255,.78);padding:clamp(3rem,6vw,4.5rem) 0 2rem;font-size:.95rem}
.footer-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr);gap:2.5rem}
.footer .f-logo{width:200px;height:auto}
.footer h2{font-size:1rem;font-stretch:108%;color:#fff;margin-bottom:.8rem;font-weight:700}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.footer a{text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline}
.footer dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem}
.footer dt{color:var(--steel-3)}
.footer dd{margin:0}
.legal{margin-top:2.5rem;border-top:1px solid rgba(196,226,240,.14);padding-top:1.4rem}
.legal summary{cursor:pointer;color:#fff;font-weight:600;width:max-content}
.legal .legal-body{margin-top:1rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 2.5rem;font-size:.88rem;max-width:68rem}
.legal h3{font-size:.95rem;color:#fff;margin-bottom:.25rem}
.copy{margin-top:2rem;font-size:.85rem;color:var(--steel-3)}

/* barre d'appel mobile */
.callbar{display:none}
@media (max-width:700px){
  .callbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--navy);
    padding:.55rem .6rem calc(.55rem + env(safe-area-inset-bottom,0px));gap:.5rem;box-shadow:0 -1px 0 rgba(196,226,240,.15);
    transform:translateY(110%);transition:transform .3s}
  .callbar.is-on{transform:none}
  .callbar .btn{justify-content:center;min-height:2.9rem}
  .footer{padding-bottom:5.5rem}
}

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .sheet-body{grid-template-columns:1fr}
  .sheet-side{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1rem;align-items:start}
  .nomen tbody{display:grid;grid-template-columns:1fr 1fr}
  .nomen thead{display:none}
  .nomen tr{display:flex}
  .nomen td.rep{display:flex;align-items:center;justify-content:center}
  .nomen td:last-child{flex:1}
  .stage{width:min(100%,calc(min(64vh,640px) * 1380 / 1880))}
}
@media (max-width:1060px){
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{max-width:44rem}
  .stage{width:min(100%,calc(min(70vh,620px) * 1380 / 1880))}
  .metier-head,.signs-head,.etude-grid,.fab-grid,.equip-grid,.sign-lab,.contact-grid{grid-template-columns:1fr}
  .calc,.fiche{position:static}
  .process{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process li:nth-child(3){padding-left:0;border-left:0}
  .process li:nth-child(n+3){margin-top:1.4rem;border-top:1px solid var(--steel-2)}
  .track{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:2rem}
  .maint{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .details{max-width:460px;margin-inline:auto}
}
@media (max-width:700px){
  :root{--header-h:64px}
  .brand .b-icon{height:36px}.brand .b-word{height:15px}
  .sheet{padding:.7rem}
  .sheet-zones{display:none}
  .sheet-side{grid-template-columns:1fr}
  .cartouche{display:none}
  .nomen tbody{grid-template-columns:1fr 1fr}
  .nomen td.rep{width:1.9rem;padding:.35rem .2rem}
  .nomen button{padding:.35rem .4rem;font-size:.75rem}
  .sheet-controls{gap:.8rem}
  .phases button{font-size:.7rem}
  .phases button .t{max-width:5.2rem}
  .process{grid-template-columns:1fr}
  .process li,.process li + li{padding:1.2rem 0 0;border-left:0}
  .process li + li{margin-top:1.2rem;border-top:1px solid var(--steel-2)}
  .spec > div{grid-template-columns:1fr;gap:.2rem}
  .functions{grid-template-columns:1fr}
  .track{grid-template-columns:1fr 1fr}
  .maint{grid-template-columns:1fr}
  .diag-list{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .legal .legal-body{grid-template-columns:1fr}
  .hazard{grid-template-columns:1fr}
  .phone-big{font-size:clamp(2.1rem,11vw,3rem)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

.js .part{--rv:0}
.part svg path{vector-effect:none;stroke-width:calc(var(--sw,4) * 1px)}
.ov .dim{vector-effect:none;stroke-width:calc(var(--sw,3) * .85px)}
.ov .leader{vector-effect:none;stroke-width:calc(var(--sw,3) * .75px)}
.ov .balloon circle{vector-effect:none;stroke-width:calc(var(--sw,3) * .9px)}
.ov .ring{vector-effect:none;stroke-width:calc(var(--sw,3) * 1.4px)}
.ov .balloon{pointer-events:auto}
.steps::before,.steps::after{content:"";position:absolute;left:1.15rem;top:var(--t0,1.15rem);bottom:auto;height:var(--th,0px);width:2px;margin-left:-1px;background:rgba(196,226,240,.16)}
.steps::after{height:var(--bh,0px);background:var(--yellow)}
.hot::after{animation-iteration-count:4}
.res dt i{display:inline-block;width:.7rem;height:.7rem;margin-right:.45rem;vertical-align:-.05rem}
.sw-base{background:var(--yellow)}
.sw-marge{background:repeating-linear-gradient(45deg,var(--yellow) 0 2px,rgba(253,194,2,.18) 2px 5px)}
.cartouche .c-brand dd{display:flex;align-items:center;gap:.55rem;padding:0;border:0}
@media (min-width:1241px){.stage{width:min(100%,calc(min(66vh,680px) * 1380 / 1880))}}
@media (max-width:700px){.phases .t{display:none}.phases li.is-on .t{display:block;white-space:nowrap}}
.details{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:1.4rem 1.6rem;aspect-ratio:auto;align-items:center}
.detail{position:relative;width:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important}
.detail.d-a{grid-row:1 / 3}
.phases{flex:1 1 100%}
@media (min-width:1241px){.stage{width:min(100%,calc(min(62vh,660px) * 1380 / 1880))}}
@media (max-width:700px){.details{grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}.detail.d-a{grid-row:auto}.detail .tag{width:1.6rem;height:1.6rem;font-size:.75rem}.detail figcaption{font-size:.7rem}}
.hero h1{font-size:clamp(2.3rem,1rem + 2.9vw,3.8rem);font-stretch:116%}
.phone-big{font-size:clamp(2.4rem,1rem + 4.6vw,5rem)}
@media (max-width:700px){.phone-big{font-size:clamp(2.1rem,11vw,3rem)}}

/* ---- Galerie de chantier (section enseignes) ---- */
.shots{margin-top:clamp(2.2rem,4vw,3.2rem)}
.shots-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem 1.2rem;margin-bottom:1rem}
.shots-head .tech{font-size:.8rem;color:var(--line)}
.shots-head strong{font-size:clamp(1.1rem,1rem + .4vw,1.35rem);font-weight:800;font-stretch:118%}
.shots-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
.shot{all:unset;cursor:zoom-in;display:block;position:relative;width:100%;background:rgba(6,31,44,.45);border:1px solid rgba(196,226,240,.24)}
.shot-img{display:block;position:relative;overflow:hidden;
  clip-path:polygon(0 0,calc(100% - var(--chamfer)) 0,100% var(--chamfer),100% 100%,0 100%)}
.shot img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .4s ease}
.shot:hover img,.shot:focus-visible img{transform:scale(1.05)}
.shot:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.shot-cap{display:block;padding:.55rem .7rem .65rem;font-size:.78rem;line-height:1.25;color:rgba(255,255,255,.78)}
.shot-zoom{position:absolute;top:.5rem;left:.5rem;width:28px;height:28px;display:grid;place-items:center;
  background:rgba(6,31,44,.74);border:1px solid rgba(196,226,240,.34);color:#fff}
.shot-zoom svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.shots-note{margin-top:.8rem;font-size:.84rem;color:rgba(255,255,255,.6)}
@media (max-width:700px){.shots-grid{grid-template-columns:1fr 1fr;gap:.55rem}.shot-cap{font-size:.72rem;padding:.45rem .5rem .55rem}}

/* ---- Visionneuse (agrandissement) ---- */
.lb{position:fixed;inset:0;z-index:120;background:rgba(3,13,19,.97);display:grid;grid-template-rows:auto minmax(0,1fr);color:#fff}
.lb[hidden]{display:none}
.lb-bar{display:flex;align-items:center;gap:.6rem;padding:.55rem clamp(.7rem,3vw,1.4rem);border-bottom:1px solid rgba(196,226,240,.18)}
.lb-cap{flex:1;min-width:0;margin:0;font-size:.86rem;color:rgba(255,255,255,.86)}
.lb-tools{display:flex;gap:.4rem}
.lb-tools button{all:unset;width:40px;height:40px;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(196,226,240,.3);color:#fff;font:700 1.15rem/1 var(--tech)}
.lb-tools button:hover{border-color:var(--yellow);color:var(--yellow)}
.lb-tools button:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}
.lb-stage{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;cursor:zoom-in;touch-action:none;background:#031;
  background:radial-gradient(circle at 50% 45%,rgba(18,58,80,.55),rgba(3,13,19,1) 70%)}
.lb-stage img{max-width:100%;max-height:100%;transform-origin:center center;will-change:transform;
  user-select:none;-webkit-user-drag:none}
.lb-zoom{position:absolute;bottom:.9rem;left:50%;transform:translateX(-50%);pointer-events:none;
  font:700 .78rem/1 var(--tech);color:rgba(255,255,255,.8);background:rgba(6,31,44,.72);
  border:1px solid rgba(196,226,240,.26);padding:.45rem .65rem}
@media (max-width:700px){
  .lb-bar{padding:.45rem .6rem;gap:.5rem}
  .lb-tools{gap:.3rem}
  .lb-tools button{width:36px;height:36px;font-size:1.05rem}
  .lb-cap{font-size:.78rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
@media (prefers-reduced-motion:reduce){.shot img{transition:none}}

/* ---- Avant / après (section « La cuve est notre métier principal ») ---- */
.ba{margin:clamp(2.2rem,4vw,3.2rem) auto 0;max-width:820px;border-top:2px solid var(--yellow);padding-top:clamp(1.2rem,2.5vw,1.8rem)}
.ba-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem 1.2rem;margin-bottom:1rem}
.ba-head .tech{font-size:.8rem;color:var(--ink-2)}
.ba-head strong{font-size:clamp(1.1rem,1rem + .4vw,1.35rem);font-weight:800;font-stretch:118%;color:var(--ink)}
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,2vw,1.4rem)}
.ba-item{display:flex;flex-direction:column;gap:.55rem}
.ba .shot{background:var(--white);border:1px solid var(--steel-2)}
.ba .shot img{aspect-ratio:3/4}
.ba-tag{position:absolute;top:.5rem;right:.5rem;padding:.28rem .6rem;font:700 .7rem/1 var(--tech);
  letter-spacing:.08em;text-transform:uppercase;background:var(--steel-4);color:#fff}
.ba-tag.is-after{background:var(--yellow);color:var(--navy)}
.ba-cap{margin:0;font-size:.88rem;line-height:1.4;color:var(--ink-2)}
.ba-cap strong{color:var(--ink);font-stretch:108%}
@media (max-width:560px){
  .ba-grid{gap:.6rem}
  .ba-cap{font-size:.76rem}
  .ba-tag{font-size:.64rem;padding:.24rem .45rem}
}

/* ============ pages de service (cuves, enseignes, contact) ============ */
.page-hero{position:relative;background:var(--navy);color:#fff;padding:calc(var(--header-h) + clamp(2.2rem,6vh,3.8rem)) 0 clamp(2.4rem,6vh,4rem);overflow:hidden}
.page-hero .crumbs{font-size:.82rem;color:#8FB6C8;margin:0 0 1.2rem}
.page-hero .crumbs a{color:#C4E2F0;text-decoration:none}
.page-hero .crumbs a:hover{text-decoration:underline}
.page-hero h1{font-size:clamp(1.95rem,.9rem + 2.7vw,3.3rem);max-width:26ch;margin:0}
.page-hero .lede{color:#C4E2F0;margin-top:1.1rem;max-width:64ch}
.page-hero .actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem}
.page-hero .btn-line{--fg:#fff;box-shadow:inset 0 0 0 1.5px rgba(196,226,240,.55)}
.faq{margin-top:clamp(2.2rem,5vw,3.4rem);display:grid;gap:.6rem;max-width:900px}
.faq details{background:var(--white);border-left:4px solid var(--yellow);padding:1rem 1.2rem}
.faq summary{cursor:pointer;font-weight:700;font-stretch:108%;font-size:1.05rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";display:inline-block;width:1.15rem;font-weight:800}
.faq details[open] summary::before{content:"\2013"}
.faq p{margin:.7rem 0 0;color:var(--ink-2);max-width:78ch}
.page-link{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.8rem;font:700 1rem/1.2 var(--font);font-stretch:108%;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--yellow);padding-bottom:.2rem}
.page-link:hover{color:var(--navy-3)}
.signs .page-link{color:#fff}
.cta-band{margin-top:clamp(2.6rem,5vw,4rem);background:var(--navy);color:#fff;padding:clamp(1.6rem,3vw,2.4rem);display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center;justify-content:space-between}
.cta-band h2{font-size:clamp(1.35rem,1.1rem + .8vw,1.9rem);margin:0}
.cta-band p{margin:.5rem 0 0;color:#C4E2F0;max-width:52ch}
.cta-band .actions{display:flex;flex-wrap:wrap;gap:.7rem}
.cta-band .btn-line{--fg:#fff;box-shadow:inset 0 0 0 1.5px rgba(196,226,240,.55)}
@media (max-width:560px){.page-hero{padding-top:calc(var(--header-h) + 1.6rem)}}