/* Hub des fonctionnalités (/fonctionnalites) — templates/landing/features/index.html.twig
   et _hub_viz.html.twig. Timeline du rail : .k1 Catalogue … .k4 Commandes, .k5 tout allumé.
   Le module optionnel « Maquettes » est une pastille sous le rail, pas une étape. */

.hb-hero{text-align:center;padding-bottom:20px}
.hb-hero .fx-title{max-width:15ch}
.hb-hero .fx-sub{max-width:60ch}

/* ======================= Le rail du parcours ======================= */
.hb-stagewrap{margin-top:56px}
.hb-rail{position:relative;width:1180px;height:440px;text-align:left}
.hb-rail .tl-body{position:absolute;inset:0}
.hb-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hb-main{fill:none;stroke:rgba(255,255,255,.12);stroke-width:2}
.hb-flow{stroke:#fff;stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 1.4s var(--ez)}
.hb-rail.k1 .hb-flow{stroke-dashoffset:1000}
.hb-rail.k2 .hb-flow{stroke-dashoffset:670}
.hb-rail.k3 .hb-flow{stroke-dashoffset:330}
.hb-rail.k4 .hb-flow{stroke-dashoffset:0}
.hb-br{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1.5;stroke-dasharray:4 5;animation:hbflow 1.6s linear infinite}
.hb-ava path{fill:none;stroke:rgba(249,115,22,.0);stroke-width:1.2;stroke-dasharray:3 6;transition:stroke .8s}
.hb-rail.k5 .hb-ava path{stroke:rgba(249,115,22,.55);animation:hbflow 1.2s linear infinite}
.hb-ports path{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.2;stroke-dasharray:3 5;animation:hbflow 2s linear infinite reverse}
@keyframes hbflow{to{stroke-dashoffset:-18}}

.hb-ava-pill{position:absolute;left:590px;top:52px;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;
  border:1px solid rgba(249,115,22,.35);background:var(--bg-2);font-size:12px;color:var(--tx-2);white-space:nowrap;transition:box-shadow .8s,border-color .8s}
.hb-ava-pill b{color:var(--tx);font-family:'Schibsted Grotesk';letter-spacing:.06em;font-size:12px}
.hb-rail.k5 .hb-ava-pill{border-color:rgba(249,115,22,.7);box-shadow:0 0 0 6px rgba(249,115,22,.07),0 0 40px -6px rgba(249,115,22,.6)}

.hb-shop{position:absolute;left:126px;top:78px;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;border:1px solid var(--bd-2);background:var(--bg-2);transition:border-color .2s,transform .3s var(--ez)}
.hb-shop:hover{border-color:var(--tx-2);transform:translateY(-2px)}
.hb-shop .ico{width:18px;height:18px}
.hb-shop b{display:block;font-size:13px;color:var(--tx)}
.hb-shop small{font-size:11px;color:var(--tx-3)}

.hb-st{position:absolute;top:204px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;width:170px;text-align:center}
.hb-o{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--bd-2);background:var(--bg-2);color:var(--tx-2);
  transition:background .5s,color .5s,border-color .5s,transform .5s var(--ez-b),box-shadow .6s}
.hb-o .ico{width:24px;height:24px}
.hb-l{font-size:14px;font-weight:600;color:var(--tx-2);transition:color .4s}
.hb-l small{display:block;font-family:'Spline Sans Mono';font-size:10px;font-weight:400;color:var(--tx-3);margin-bottom:2px}
.hb-st:hover .hb-o{border-color:var(--tx-2);transform:translateY(-3px)}
.hb-fact{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%,8px);white-space:nowrap;font-family:'Spline Sans Mono';font-size:11px;color:var(--tx);
  padding:6px 10px;border-radius:8px;border:1px solid var(--bd-2);background:var(--bg-3);opacity:0;transition:opacity .4s,transform .5s var(--ez-b)}
.hb-rail.k1 .hb-st1 .hb-o,.hb-rail.k2 .hb-st2 .hb-o,.hb-rail.k3 .hb-st3 .hb-o,.hb-rail.k4 .hb-st4 .hb-o{background:var(--tx);color:var(--bg);border-color:var(--tx);box-shadow:0 0 0 6px rgba(255,255,255,.06)}
.hb-rail.k1 .hb-st1 .hb-l,.hb-rail.k2 .hb-st2 .hb-l,.hb-rail.k3 .hb-st3 .hb-l,.hb-rail.k4 .hb-st4 .hb-l{color:var(--tx)}
.hb-rail[data-s="1"] .hb-st1 .hb-fact,.hb-rail[data-s="2"] .hb-st2 .hb-fact,.hb-rail[data-s="3"] .hb-st3 .hb-fact,.hb-rail[data-s="4"] .hb-st4 .hb-fact{opacity:1;transform:translate(-50%,0);transition-delay:.5s}
.hb-rail[data-s="5"] .hb-o{box-shadow:0 0 0 6px rgba(255,255,255,.06),0 0 40px -8px rgba(123,77,255,calc(.9*var(--tex)))}

.hb-tok{position:absolute;left:0;top:236px;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;opacity:0;
  box-shadow:0 0 0 5px rgba(255,255,255,.12),0 0 30px 4px rgba(123,77,255,calc(.9*var(--tex)));transform:translateX(90px);transition:transform 1.3s cubic-bezier(.6,0,.25,1),opacity .4s}
.hb-rail.k1 .hb-tok{opacity:1;transform:translateX(90px)}
.hb-rail.k2 .hb-tok{transform:translateX(420px)}
.hb-rail.k3 .hb-tok{transform:translateX(760px)}
.hb-rail.k4 .hb-tok{transform:translateX(1090px)}
.hb-rail.k5 .hb-tok{opacity:0}

.hb-portrow span{position:absolute;top:356px;transform:translateX(-50%);font-family:'Spline Sans Mono';font-size:11px;color:var(--tx-2);padding:5px 10px;border-radius:7px;border:1px solid var(--bd);background:var(--bg)}
.hb-api{position:absolute;left:590px;top:404px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--tx-2);padding:7px 13px;border-radius:999px;border:1px dashed var(--bd-2);transition:color .2s,border-color .2s}
.hb-api:hover{color:var(--tx);border-color:var(--tx-2)}
.hb-api .ico{width:14px;height:14px}
@media(max-width:700px){.hb-stagewrap{display:none}}

/* ======================= Les tuiles ======================= */
.hb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.hb-tile{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 220px;grid-template-rows:auto auto auto 1fr auto;column-gap:22px;
  min-height:300px;padding:28px;border:1px solid var(--bd);border-radius:20px;background:var(--bg-2);transition:border-color .25s,transform .5s var(--ez)}
.hb-tile:hover{border-color:var(--bd-2);transform:translateY(-3px)}
.hb-tile>*:not(.tex):not(.veil){position:relative;z-index:2}
.hb-tile .veil{height:100%;background:linear-gradient(90deg,var(--bg-2) 0%,var(--bg-2) 46%,rgba(16,18,22,.75) 70%,rgba(16,18,22,.2) 100%)}
.hb-tile[data-glow]::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.06),transparent 60%)}
.hb-tile[data-glow]:hover::after{opacity:1}
.hb-c{grid-column:1;font-family:'Spline Sans Mono';font-size:11px;letter-spacing:.06em;color:var(--tx-3)}
.hb-n{grid-column:1;font-family:var(--disp);font-weight:600;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.016em;line-height:1.02;margin-top:12px}
.hb-a{grid-column:1;font-size:15px;color:var(--tx);margin-top:10px;font-weight:600}
.hb-d{grid-column:1;font-size:13.5px;color:var(--tx-2);line-height:1.55;margin-top:8px}
.hb-go{grid-column:1;display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:13.5px;font-weight:600;color:var(--tx)}
.hb-go .ico{width:15px;height:15px;transition:transform .35s var(--ez)}
.hb-tile:hover .hb-go .ico{transform:translateX(4px)}
.hb-onb{grid-column:1;justify-self:start;margin-top:10px}
.hb-viz{grid-column:2;grid-row:1 / -1;align-self:center;height:170px;border-radius:14px;border:1px solid var(--bd-2);background:var(--bg);position:relative;overflow:hidden}
@media(max-width:1020px){.hb-grid{grid-template-columns:1fr}}
@media(max-width:560px){.hb-tile{grid-template-columns:1fr;padding:22px}.hb-viz{grid-column:1;grid-row:auto;margin-top:18px;height:150px}}

/* --- vignettes --- */
.v{position:absolute;inset:0}
.v>.tl-body{position:absolute;inset:0;padding:16px}
.v-cat .g{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.v-cat .g i{aspect-ratio:1;border-radius:6px;background:linear-gradient(160deg,#3a3d44,#1d2026);opacity:0;transform:scale(.6);transition:opacity .35s,transform .5s var(--ez-b);transition-delay:calc(var(--i) * 70ms)}
.v-cat.k1 .g i{opacity:1;transform:none}
.v-cat .n{position:absolute;left:16px;bottom:14px;display:flex;align-items:baseline;gap:8px}
.v-cat .n b{font-family:var(--disp);font-size:30px;letter-spacing:-.013em;font-variant-numeric:tabular-nums}
.v-cat .n small{font-size:11px;color:var(--tx-3)}
.v-dv svg{width:100%;height:76px;overflow:visible}
.v-dv .ln{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset 1.2s var(--ez)}
.v-dv.k1 .ln{stroke-dashoffset:0}
.v-dv .dt{fill:#fff;transform:translate(60px,24px);transition:transform 1.3s cubic-bezier(.6,0,.2,1) .4s}
.v-dv.k1 .dt{transform:translate(100px,40px)}
.v-dv .n{position:absolute;left:16px;bottom:14px}
.v-dv .n b{display:block;font-family:var(--disp);font-size:28px;letter-spacing:-.013em}
.v-dv .n small{font-family:'Spline Sans Mono';font-size:10px;color:var(--tx-3)}
.v-ps .pxl,.v-ps .vec{position:absolute;left:50%;top:44%;width:110px;height:88px;transform:translate(-50%,-50%);shape-rendering:crispEdges}
.v-ps .pxl rect{fill:#fff}
.v-ps .vec{opacity:0;transition:opacity .6s}
.v-ps .vec circle{fill:none;stroke:#fff;stroke-width:1.3;stroke-dasharray:21;stroke-dashoffset:21;transition:stroke-dashoffset 1s var(--ez)}
.v-ps.k1 .pxl{opacity:0;transition:opacity .5s .5s}
.v-ps.k1 .vec{opacity:1}
.v-ps.k1 .vec circle{stroke-dashoffset:0}
.v-ps .beam{position:absolute;top:0;bottom:0;width:40px;left:-50px;background:linear-gradient(90deg,transparent,rgba(123,77,255,.5),transparent);opacity:calc(var(--tex))}
.v-ps.k1 .beam{animation:hbbeam 1s var(--ez) forwards}
@keyframes hbbeam{to{left:110%}}
.v-ps .tag{position:absolute;left:50%;bottom:12px;transform:translate(-50%,6px);font-family:'Spline Sans Mono';font-size:10px;padding:3px 8px;border-radius:5px;background:#fff;color:#0A0B0D;opacity:0;transition:opacity .4s,transform .5s var(--ez-b);white-space:nowrap}
.v-ps.k2 .tag{opacity:1;transform:translate(-50%,0)}
.v-ec{background:#fff}
.v-ec .tl-body{display:flex;flex-direction:column;gap:7px}
.v-ec .r{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tx-2)}
.v-ec .r i{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--bd-2);display:grid;place-items:center;transition:background .3s,border-color .3s}
.v-ec .r i::after{content:"";width:6px;height:3px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.v-ec.k1 .r1 i,.v-ec.k2 .r2 i,.v-ec.k3 .r3 i{background:var(--tx);border-color:var(--tx)}
.v-ec.k1 .r1 i::after,.v-ec.k2 .r2 i::after,.v-ec.k3 .r3 i::after{opacity:1}
.v-ec.k1 .r1,.v-ec.k2 .r2,.v-ec.k3 .r3{color:var(--tx)}
.v-ec .b{margin-top:auto;align-self:flex-start;font-size:12px;font-weight:600;padding:8px 14px;border-radius:8px;background:var(--tx);color:#fff;opacity:.25;transition:opacity .4s,transform .4s var(--ez-b)}
.v-ec.k3 .b{opacity:1}
.v-ec.k4 .b{transform:scale(.96)}
.v-cm .tr{position:absolute;left:22px;right:22px;top:60px;display:flex;justify-content:space-between}
.v-cm .tr::before{content:"";position:absolute;left:0;right:0;top:5px;height:2px;background:rgba(255,255,255,.12)}
.v-cm .tr i{position:relative;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid rgba(255,255,255,.25);transition:background .4s,border-color .4s;transition-delay:.3s}
.v-cm.k0 .tr i:nth-child(1),.v-cm.k1 .tr i:nth-child(2),.v-cm.k2 .tr i:nth-child(3),.v-cm.k3 .tr i:nth-child(4),.v-cm.k4 .tr i:nth-child(5){background:#fff;border-color:#fff}
.v-cm .pill{position:absolute;top:26px;left:calc(var(--x,0) * 1%);transform:translateX(-50%);transition:left .8s var(--ez);font-style:normal;font-family:'Spline Sans Mono';font-size:10px;padding:3px 8px;border-radius:5px;background:#fff;color:#0A0B0D;white-space:nowrap}
.v-cm .pill span{display:none}
.v-cm .pill{--x:0}.v-cm.k1 .pill{--x:25}.v-cm.k2 .pill{--x:50}.v-cm.k3 .pill{--x:75}.v-cm.k4 .pill{--x:100}
.v-cm[data-s="0"] .l0,.v-cm[data-s="1"] .l1,.v-cm[data-s="2"] .l2,.v-cm[data-s="3"] .l3,.v-cm[data-s="4"] .l4{display:inline}
.v-bq{background:#fff}
.v-bq .tl-body{padding:0;display:flex;flex-direction:column}
.v-bq .hd{display:flex;align-items:center;gap:8px;padding:12px 14px;background:var(--brand,#1F3A8A);color:#fff;transition:background .6s}
.v-bq .hd i{width:16px;height:16px;border-radius:4px;background:rgba(255,255,255,.85)}
.v-bq .hd b{font-size:12px}
.v-bq .hd b span{display:none}
.v-bq[data-s="0"] .hd .b0,.v-bq[data-s="1"] .hd .b1,.v-bq[data-s="2"] .hd .b2{display:inline}
.v-bq .bd{padding:12px 14px;display:flex;flex-direction:column;gap:9px}
.v-bq .bd>b{font-size:14px;color:var(--tx)}
.v-bq .pr{display:flex;gap:6px}
.v-bq .pr i{width:34px;height:28px;border-radius:6px;background:var(--bg-4)}
.v-bq .cta{align-self:flex-start;font-size:11px;font-weight:600;padding:6px 11px;border-radius:7px;background:var(--brand,#1F3A8A);color:#fff;transition:background .6s,color .6s}
.v-bq{--brand:#1F3A8A}
.v-bq.k1{--brand:#1E5B4B}
.v-bq.k2{--brand:#D9774A}
.v-bq.k2 .hd,.v-bq.k2 .cta{color:#141418}
.v-av{background:#FAFAF8;--tx:#16130F;--tx-2:#5E574E}
.v-av .tl-body{display:flex;flex-direction:column;gap:9px}
.v-av .avamark{width:22px;height:22px}
.v-av .q{font-size:12px;color:var(--tx);line-height:1.4;max-width:30ch}
.v-av .act{display:flex;gap:6px}
.v-av .act span{font-size:11px;font-weight:600;padding:5px 10px;border-radius:7px;border:1px solid rgba(22,19,15,.15);color:var(--tx-2);transition:transform .3s var(--ez-b),opacity .4s}
.v-av .act .ok{background:#F97316;border-color:#F97316;color:#fff}
.v-av.k1 .act .ok{transform:scale(.94)}
.v-av.k2 .act{opacity:0}
.v-av .done{position:absolute;left:16px;bottom:16px;font-size:12px;font-weight:600;color:var(--tx);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--ez-b)}
.v-av.k2 .done{opacity:1;transform:none}
.v-br .core{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:12px;display:grid;place-items:center;background:#fff;color:#0A0B0D;box-shadow:0 0 30px -4px rgba(123,77,255,calc(.8*var(--tex)))}
.v-br .core .mark{height:14px}
.v-br .nd{position:absolute;font-family:'Spline Sans Mono';font-size:9.5px;color:var(--tx-2);padding:3px 7px;border-radius:5px;border:1px solid var(--bd-2);background:var(--bg-2);white-space:nowrap}
.v-br .nd1{left:10px;top:16px}.v-br .nd2{right:10px;top:16px}.v-br .nd3{left:10px;bottom:16px}.v-br .nd4{right:10px;bottom:16px}
.v-br .pk{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff;opacity:0}
.v-br .pk1{animation:pk1 2.4s ease-in-out infinite}.v-br .pk2{animation:pk2 2.4s .6s ease-in-out infinite}
.v-br .pk3{animation:pk3 2.4s 1.2s ease-in-out infinite}.v-br .pk4{animation:pk4 2.4s 1.8s ease-in-out infinite}
@keyframes pk1{0%{transform:translate(-62px,-52px);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translate(0,0);opacity:0}}
@keyframes pk2{0%{transform:translate(0,0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translate(62px,-52px);opacity:0}}
@keyframes pk3{0%{transform:translate(-62px,52px);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translate(0,0);opacity:0}}
@keyframes pk4{0%{transform:translate(0,0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translate(62px,52px);opacity:0}}

/* Le module optionnel : une pastille pointillée, reliée au devis. */
.hb-opt{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1.2;stroke-dasharray:3 5}
.hb-opt-chip{position:absolute;left:620px;top:330px;display:flex;align-items:center;gap:9px;padding:8px 13px;border-radius:11px;border:1px dashed var(--bd-2);background:var(--bg);transition:border-color .2s,transform .3s var(--ez)}
.hb-opt-chip:hover{border-color:var(--tx-2);transform:translateY(-2px)}
.hb-opt-chip .ico{width:16px;height:16px;color:var(--tx-2)}
.hb-opt-chip b{display:block;font-size:12px;color:var(--tx)}
.hb-opt-chip small{font-size:10.5px;color:var(--tx-3)}