/* C—01 · Répondre aux demandes de devis — maquettes de templates/landing/cas/demandes-de-devis.html.twig.
   Trigramme : ddv- (hero) et tj- (couches du trajet). Univers de démo neutre (devis #2051, Maison Ostra).
   Hero : .ddv[data-tl] → .k0…k12 (cumulatif) et [data-s="n"] (exact) ;
   trajet : [data-active="n"] (couche affichée) et .a0…a6 (étape jouée). */

/* ======================= Hero : l'aller-retour du devis ======================= */
.ddv{position:relative;width:1120px;height:596px;--clx:670px;--cly:52px}
.ddv-body{position:absolute;inset:0}

/* La ligne du temps, au-dessus des deux écrans */
.ddv-when{position:absolute;left:50%;top:0;transform:translateX(-50%);z-index:6;display:grid;height:30px;padding:0 4px}
.ddv-when>span{grid-area:1/1;justify-self:center;display:inline-flex;align-items:center;gap:9px;height:30px;padding:0 14px 0 11px;border-radius:999px;border:1px solid var(--bd-2);background:var(--bg-2);
  font-family:'Spline Sans Mono';font-size:11.5px;color:var(--tx);white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .5s var(--ez)}
.ddv-when>span i{width:8px;height:8px;border-radius:50%;background:var(--wc,var(--fx-c));flex:none}
.ddv-when>span em{font-style:normal;color:var(--tx-2)}
.ddv-when .w0{--wc:var(--c-devis)}.ddv-when .w1{--wc:var(--c-devis)}.ddv-when .w2,.ddv-when .w3{--wc:var(--c-espace-client)}
.ddv-when .w4,.ddv-when .w5,.ddv-when .w6,.ddv-when .w7{--wc:var(--c-commandes)}
.ddv[data-s="0"] .w0,.ddv[data-s="1"] .w0,.ddv[data-s="2"] .w1,
.ddv[data-s="3"] .w2,.ddv[data-s="4"] .w2,.ddv[data-s="5"] .w2,.ddv[data-s="6"] .w2,.ddv[data-s="7"] .w3,
.ddv[data-s="8"] .w4,.ddv[data-s="9"] .w4,.ddv[data-s="10"] .w5,.ddv[data-s="11"] .w6,.ddv[data-s="12"] .w7{opacity:1;transform:none;transition-delay:.2s}
.ddv[data-s="3"] .w2{transition-delay:1.3s}
.ddv[data-s="2"] .w1{transition-delay:.9s}
/* état final (mouvement réduit / sans JS) */
.ddv:not(.tl) .w7{opacity:1;transform:none}

/* --- Chez vous : Stolip --- */
.ddv-bo{position:absolute;left:0;top:52px;width:610px;height:540px}
.ddv-bo-b{display:flex;flex-direction:column;gap:14px;padding:16px 20px}
.ddv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ddv-acts{position:relative;display:flex;align-items:center;gap:8px}
.ddv-chg .ico{width:11px;height:11px}
.ddv-st{position:relative;display:inline-grid;grid-template-columns:auto auto;transition:background .4s,color .4s,border-color .4s}
.ddv-st .s{grid-column:2;grid-row:1;opacity:0;transition:opacity .3s}
.ddv-st .s0{opacity:1}
.ddv.k2 .ddv-st .s0{opacity:0;transition-delay:.9s}.ddv.k2 .ddv-st .s1{opacity:1;transition-delay:.9s}
.ddv.k8 .ddv-st .s1{opacity:0;transition-delay:.9s}.ddv.k8 .ddv-st .s2{opacity:1;transition-delay:.9s}
.ddv.k8 .ddv-st{background:var(--tx);color:var(--bg);border-color:var(--tx);transition-delay:.9s}
.ddv-menu{position:absolute;right:0;top:36px;z-index:12;width:236px;padding:5px;border-radius:10px;border:1px solid var(--bd-2);background:var(--bg-3);display:flex;flex-direction:column;
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:100% 0;transition:opacity .25s,transform .3s var(--ez)}
.ddv-menu span{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;font-size:12px;color:var(--tx-2)}
.ddv-menu .hl{color:var(--tx)}
.ddv-menu .ico{width:13px;height:13px}
.ddv[data-s="1"] .ddv-menu{opacity:1;transform:none;transition-delay:.75s}
.ddv[data-s="2"] .ddv-menu .hl{background:rgba(255,255,255,.08)}
.ddv[data-s="2"] .ddv-menu{opacity:0;transition-delay:.9s,.9s}

.ddv-lines{border:1px solid var(--bd);border-radius:11px;overflow:hidden}
.ddv-lh,.ddv-ln{display:grid;grid-template-columns:34px minmax(0,1fr) 44px 58px 66px 92px;gap:10px;align-items:center;padding:0 12px}
.ddv-lh{height:30px;border-bottom:1px solid var(--bd);font-family:'Spline Sans Mono';font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--tx-3)}
.ddv-lh>span:first-child{grid-column:1 / span 2}
.ddv-ln{height:58px;font-size:12.5px;color:var(--tx-2);font-variant-numeric:tabular-nums}
.ddv-ln+.ddv-ln{border-top:1px solid var(--bd)}
.ddv-ln .r,.ddv-lh .r{text-align:right}
.ddv-ln .b{color:var(--tx);font-weight:600}
.ddv-ln .nm b{display:block;font-size:12.5px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ddv-ln .nm small{display:block;font-family:'Spline Sans Mono';font-size:9px;color:var(--tx-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ddv-ln .th{width:34px;height:34px;border-radius:8px;background:var(--bg);border:1px solid var(--bd);display:grid;place-items:center}
.ddv-pr{width:22px;height:22px;fill:none;stroke:var(--tx-2);stroke-width:1.6;stroke-linejoin:round}
.ddv-pr .ln{stroke-width:1.1;opacity:.7}
.ddv-fz{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.ddv-fz i{font-style:normal;font-family:'Spline Sans Mono';font-size:8px;padding:0 4px;border-radius:3px;background:var(--tx);color:var(--bg)}

.ddv-sum{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:8px}
.ddv-sum>div{border:1px solid var(--bd);border-radius:10px;padding:9px 12px;display:flex;flex-direction:column;gap:4px;background:rgba(255,255,255,.02)}
.ddv-sum b{font-size:15px;font-weight:600;color:var(--tx);font-variant-numeric:tabular-nums}
.ddv-sum .mg b{display:flex;align-items:baseline;gap:8px}
.ddv-sum .mg em{font-style:normal;font-family:'Spline Sans Mono';font-size:10.5px;font-weight:400;color:var(--tx-2)}

.ddv-low{position:relative;height:182px}
.ddv-rel,.ddv-ord{position:absolute;inset:0;transition:opacity .5s,transform .6s var(--ez)}
.ddv-lowh{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.ddv-rel .mk-tbl{opacity:.5;transition:opacity .5s}
.ddv.k2 .ddv-rel .mk-tbl{opacity:1;transition-delay:1.1s}
.ddv-rel-c{display:inline-grid}
.ddv-rel-c span{grid-area:1/1;transition:opacity .3s}
.ddv-rel-c .c1{opacity:0}
.ddv.k2 .ddv-rel-c .c0{opacity:0;transition-delay:1.1s}.ddv.k2 .ddv-rel-c .c1{opacity:1;transition-delay:1.1s}
.ddv-rr{grid-template-columns:.8fr .8fr 1.9fr;padding:9px 12px;font-size:11.5px;transition:background .4s}
.ddv-rr .et{display:grid}
.ddv-rr .et span{grid-area:1/1;opacity:0;transition:opacity .35s;white-space:nowrap}
.ddv-rr .e0{opacity:1}
.ddv.k2 .ddv-rr .e0{opacity:0;transition-delay:1.2s}.ddv.k2 .ddv-rr .e1{opacity:1;transition-delay:1.25s}
.ddv.k8 .ddv-rr .e1{opacity:0;transition-delay:1.5s}.ddv.k8 .ddv-rr .e2{opacity:1;color:var(--tx);transition-delay:1.6s}
.ddv.k8 .r2 .e1{transition-delay:1.8s}.ddv.k8 .r2 .e2{transition-delay:1.9s}
.ddv.k8 .ddv-rr{background:rgba(255,255,255,.035);transition-delay:1.5s}
.ddv-ord{opacity:0;transform:translateY(14px);pointer-events:none}
.ddv.k9 .ddv-rel{opacity:0;transform:translateY(-10px)}
.ddv.k9 .ddv-ord{opacity:1;transform:none;transition-delay:.25s}
.ddv-on{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--tx)}
.ddv-on b{font-weight:600}
.ddv-hs{opacity:0;transform:scale(.8);transition:opacity .35s,transform .5s var(--ez-b)}
.ddv-hs .ico{width:11px;height:11px}
.ddv.k9 .ddv-hs{opacity:1;transform:none;transition-delay:1.3s}
/* la frise de la commande */
.ddv-fr{position:relative;display:grid;grid-template-columns:repeat(5,1fr);margin-top:18px}
.ddv-fr::before{content:"";position:absolute;left:10%;right:10%;top:7px;height:2px;background:var(--bd-2)}
.ddv-fr::after{content:"";position:absolute;left:10%;top:7px;height:2px;width:80%;background:var(--c-commandes);transform-origin:0 50%;transform:scaleX(var(--fp,0));transition:transform .9s var(--ez)}
.ddv.k9 .ddv-fr{--fp:.25}.ddv.k10 .ddv-fr{--fp:.5}.ddv.k11 .ddv-fr{--fp:.75}.ddv.k12 .ddv-fr{--fp:1}
.ddv-fr .f{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.ddv-fr .f i{width:16px;height:16px;border-radius:50%;background:var(--bg-2);border:2px solid var(--bd-2);transition:background .4s,border-color .4s,transform .5s var(--ez-b)}
.ddv-fr .f b{font-size:11px;font-weight:600;color:var(--tx-3);transition:color .4s}
.ddv-fr .f small{font-family:'Spline Sans Mono';font-size:9px;color:var(--tx-3)}
.ddv.k9 .f0 i,.ddv.k9 .f1 i,.ddv.k10 .f2 i,.ddv.k11 .f3 i,.ddv.k12 .f4 i{background:var(--c-commandes);border-color:var(--c-commandes)}
.ddv.k9 .f0 b,.ddv.k9 .f1 b,.ddv.k10 .f2 b,.ddv.k11 .f3 b,.ddv.k12 .f4 b{color:var(--tx)}
.ddv.k9 .f0 i,.ddv.k9 .f0 b{transition-delay:.5s}
.ddv.k9 .f1 i,.ddv.k9 .f1 b{transition-delay:1.1s}
.ddv[data-s="10"] .f2 i,.ddv[data-s="11"] .f3 i,.ddv[data-s="12"] .f4 i{transform:scale(1.25);transition-delay:.4s}

.ddv-t{left:20px;bottom:14px;max-width:570px;white-space:nowrap}
.ddv.k2 .t-send{opacity:1;transform:none;transition-delay:1s}
.ddv.k4 .t-send{opacity:0;transform:translateY(10px);transition-delay:0s}
.ddv.k8 .t-ok{opacity:1;transform:none;transition-delay:1.1s}
.ddv.k10 .t-ok{opacity:0;transform:translateY(10px);transition-delay:0s}
.ddv.k12 .t-dl{opacity:1;transform:none;transition-delay:1.2s}

/* --- La voie entre les deux : trois lignes, comme la chaîne --- */
.ddv-lane{position:absolute;left:610px;top:52px;width:60px;height:540px;z-index:5;pointer-events:none}
.ddv-lane>i{position:absolute;left:0;right:0;height:1.5px;background:var(--bd-2);overflow:hidden}
.ddv-lane>i:nth-child(1){top:262px}.ddv-lane>i:nth-child(2){top:269px}.ddv-lane>i:nth-child(3){top:276px}
.ddv-lane>i::after{content:"";position:absolute;inset:0;background:var(--lc,var(--c-devis));transform:translateX(-101%)}
.ddv.k3 .ddv-lane>i::after{--lc:var(--c-devis);animation:ddv-sweep 1.3s var(--ez) .1s forwards}
.ddv.k8 .ddv-lane>i::after{--lc:var(--c-espace-client);animation:ddv-sweepb 1.3s var(--ez) .1s forwards}
@keyframes ddv-sweep{0%{transform:translateX(-101%)}100%{transform:none}}
@keyframes ddv-sweepb{0%{transform:translateX(101%)}100%{transform:none}}
.ddv-lane .cap{position:absolute;left:50%;top:269px;display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 11px 0 9px;border-radius:12px;
  font-family:'Spline Sans Mono';font-size:10.5px;font-weight:500;color:#0A0B0D;white-space:nowrap;opacity:0;transform:translate(-50%,-50%);
  box-shadow:0 0 0 4px var(--bg),0 18px 30px -12px rgba(0,0,0,.9)}
.ddv-lane .cap .ico{width:12px;height:12px;stroke-width:2}
.ddv-lane .c-out{background:var(--c-devis)}
.ddv-lane .c-in{background:var(--c-espace-client)}
.ddv.k3 .c-out{animation:ddv-out 1.7s var(--ez) .05s forwards}
.ddv.k8 .c-in{animation:ddv-in 1.7s var(--ez) .05s forwards}
@keyframes ddv-out{0%{opacity:0;transform:translate(calc(-50% - 130px),-50%) scale(.9)}14%{opacity:1;transform:translate(calc(-50% - 105px),-50%)}80%{opacity:1;transform:translate(calc(-50% + 105px),-50%)}100%{opacity:0;transform:translate(calc(-50% + 130px),-50%) scale(.9)}}
@keyframes ddv-in{0%{opacity:0;transform:translate(calc(-50% + 130px),-50%) scale(.9)}14%{opacity:1;transform:translate(calc(-50% + 105px),-50%)}80%{opacity:1;transform:translate(calc(-50% - 105px),-50%)}100%{opacity:0;transform:translate(calc(-50% - 130px),-50%) scale(.9)}}

/* --- Chez votre client : son espace (îlot clair) --- */
.ddv-cl{position:absolute;left:670px;top:52px;width:450px;height:540px;transition:opacity .6s,transform .7s var(--ez)}
/* Avant que le devis n'arrive chez le client : l'îlot reste OPAQUE (le halo du héros ne doit
   pas passer à travers), assombri par un voile ; le voile se lève quand le devis arrive. */
.ddv-cl{transform:scale(.985)}
.ddv-cl::after{content:"";position:absolute;inset:0;z-index:20;border-radius:inherit;background:rgba(10,11,13,.68);pointer-events:none;transition:opacity .6s}
.ddv.k3 .ddv-cl{transform:none;transition-delay:1.1s}
.ddv.k3 .ddv-cl::after{opacity:0;transition-delay:1.1s}
.ddv-chrome{height:40px;background:#F2F2EF;gap:12px}
.ddv-chrome .win-url{max-width:none;margin:0;flex:1;height:24px;background:#fff}
.ddv-cl-b{padding:0 18px 16px;display:flex;flex-direction:column;gap:10px;color:var(--tx)}
.ddv-ch{display:flex;align-items:center;gap:14px;height:44px;margin:0 -18px;padding:0 18px;border-bottom:1px solid var(--bd)}
.ddv-ch .lg{width:22px;height:22px;border-radius:6px;background:#141418;display:grid;place-items:center}
.ddv-ch .lg i{width:9px;height:9px;border-radius:50%;background:#fff}
.ddv-ch .nv{display:flex;gap:4px;font-size:12px;color:var(--tx-2)}
.ddv-ch .nv span{padding:5px 9px;border-radius:7px}
.ddv-ch .nv .on{background:#EFEFEC;color:var(--tx);font-weight:600}
.ddv-ch .mk-av{margin-left:auto}
.ddv-ct{display:flex;align-items:center;gap:10px;margin-top:4px}
.ddv-ct>b{font-family:var(--disp);font-size:22px;font-weight:600;letter-spacing:-.02em}
.ddv-bdg{display:inline-grid;font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;border:1px solid var(--bd-2);color:var(--tx-2);transition:background .4s,color .4s,border-color .4s}
.ddv-bdg span{grid-area:1/1;transition:opacity .3s}
.ddv-bdg .d{opacity:0}
.ddv.k7 .ddv-bdg{background:#141418;color:#fff;border-color:#141418;transition-delay:.9s}
.ddv.k7 .ddv-bdg .p{opacity:0;transition-delay:.9s}.ddv.k7 .ddv-bdg .d{opacity:1;transition-delay:.9s}
.ddv-cm{font-size:11.5px;color:var(--tx-3);margin-top:-4px}
.ddv-ctot{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 10px;padding:11px 14px;border-radius:12px;border:1px solid var(--bd);background:#F7F7F5}
.ddv-ctot span{font-size:11.5px;color:var(--tx-2)}
.ddv-ctot b{font-family:var(--disp);font-size:24px;letter-spacing:-.013em;font-variant-numeric:tabular-nums;grid-row:1 / span 2;grid-column:2;align-self:center}
.ddv-ctot small{font-size:10.5px;color:var(--tx-3)}
.ddv-ctot strong{color:var(--tx);font-weight:600}
.ddv-cp{border:1px dashed #C9A24A;border-radius:12px;padding:11px 13px;display:flex;flex-direction:column;gap:8px;background:#FFFBF0;transition:border-color .5s,background .5s}
.ddv.k6 .ddv-cp{border-color:var(--bd-2);border-style:solid;background:#fff;transition-delay:.9s}
.ddv-cp-t{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#7A5A10;transition:color .5s}
.ddv-cp-t .ico{width:14px;height:14px}
.ddv-cp-t .i1{display:none}
.ddv.k6 .ddv-cp-t .i0{display:none}.ddv.k6 .ddv-cp-t .i1{display:block}
.ddv.k6 .ddv-cp-t{color:var(--tx-3);transition-delay:.9s}
.ddv-cp-n{font-size:12.5px;font-weight:600}
.ddv-cp-n span{font-weight:400;color:var(--tx-3)}
.ddv-cp-r{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:8px}
.ddv-cp-r .lb{font-size:11px;color:var(--tx-2)}
.ddv-sel{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--bd-2);background:#fff;font-size:11.5px;transition:border-color .4s,box-shadow .4s}
.ddv-sel .v{grid-area:1/1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s}
.ddv-sel{display:grid;grid-template-columns:minmax(0,1fr) auto}
.ddv-sel .ico{grid-column:2;width:12px;height:12px;color:var(--tx-3)}
.ddv-sel .v0{color:var(--tx-3)}
.ddv-sel .v1{opacity:0;color:var(--tx);font-weight:600}
.ddv-adr .v0{color:#B4462E}
.ddv[data-s="4"] .ddv-col,.ddv[data-s="6"] .ddv-adr{border-color:var(--tx);box-shadow:0 0 0 3px rgba(20,20,24,.08);transition-delay:.7s}
.ddv.k4 .ddv-col .v0{opacity:0;transition-delay:.9s}.ddv.k4 .ddv-col .v1{opacity:1;transition-delay:.9s}
.ddv.k6 .ddv-adr .v0{opacity:0;transition-delay:.9s}.ddv.k6 .ddv-adr .v1{opacity:1;transition-delay:.9s}
.ddv-sz{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.ddv-sz label{display:flex;flex-direction:column;align-items:center;gap:3px;font-family:'Spline Sans Mono';font-size:9px;color:var(--tx-3)}
.ddv-sz b{width:100%;height:26px;border-radius:7px;border:1px solid var(--bd-2);display:grid;place-items:center;font-family:'Hanken Grotesk';font-size:12px;font-weight:600;color:transparent;transition:color .3s,border-color .3s}
.ddv.k5 .ddv-sz b{color:var(--tx);border-color:var(--tx-3)}
.ddv.k5 .ddv-sz label:nth-child(1) b{transition-delay:.5s}.ddv.k5 .ddv-sz label:nth-child(2) b{transition-delay:.65s}.ddv.k5 .ddv-sz label:nth-child(3) b{transition-delay:.8s}
.ddv.k5 .ddv-sz label:nth-child(4) b{transition-delay:.95s}.ddv.k5 .ddv-sz label:nth-child(5) b{transition-delay:1.1s}.ddv.k5 .ddv-sz label:nth-child(6) b{transition-delay:1.25s}
.ddv.k5 .ddv-sz label:nth-child(7) b{transition-delay:1.4s}
/* (le compteur .ddv-cnt passe à chaque case 0,1 s après elle) */
/* « Encore N pièces à répartir. » suit la saisie, case par case : un état par pointure posée
   (120 → 112 → 96 → 72 → 44 → 22 → 8), chacun affiché au délai de sa case et posé, opaque, sur
   le précédent ; puis « Toutes les pièces sont réparties. » Jamais un chiffre faux entre deux. */
.ddv-cnt{display:grid;font-size:11px;color:#7A5A10}
.ddv-cnt>span{grid-area:1/1;display:inline-flex;align-items:center;gap:5px;transition:opacity .3s}
.ddv-cnt .c0{display:grid}
.ddv-cnt .c0>span{grid-area:1/1;background:#FFFBF0;opacity:0;transition:opacity .12s}
.ddv-cnt .c0>span:first-child{opacity:1}
.ddv-cnt .c1{opacity:0;color:var(--tx);font-weight:600}
.ddv-cnt .ico{width:12px;height:12px}
.ddv.k5 .ddv-cnt .c0>span{opacity:1}
.ddv.k5 .ddv-cnt .c0>span:nth-child(2){transition-delay:.6s}.ddv.k5 .ddv-cnt .c0>span:nth-child(3){transition-delay:.75s}
.ddv.k5 .ddv-cnt .c0>span:nth-child(4){transition-delay:.9s}.ddv.k5 .ddv-cnt .c0>span:nth-child(5){transition-delay:1.05s}
.ddv.k5 .ddv-cnt .c0>span:nth-child(6){transition-delay:1.2s}.ddv.k5 .ddv-cnt .c0>span:nth-child(7){transition-delay:1.35s}
.ddv.k5 .ddv-cnt .c0{opacity:0;transition-delay:1.75s}.ddv.k5 .ddv-cnt .c1{opacity:1;transition-delay:1.8s}
.ddv-cb{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:2px}
.ddv-cb span{display:grid;place-items:center;height:36px;border-radius:9px;font-size:12px;font-weight:600;white-space:nowrap}
.ddv-acc{background:#D6D7DA;color:#fff;transition:background .4s,transform .3s var(--ez-b)}
.ddv.k6 .ddv-acc{background:#141418;transition-delay:1.1s}
.ddv[data-s="7"] .ddv-acc{transform:scale(.96);transition-delay:.75s}
.ddv-mod{border:1px solid var(--bd-2);color:var(--tx)}
.ddv-cb{transition:opacity .3s}
.ddv.k7 .ddv-cb{opacity:0;transition-delay:1s}
.ddv-done{position:absolute;left:18px;right:18px;bottom:22px;height:38px;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:#141418;color:#fff;font-size:12px;
  opacity:0;transform:translateY(12px);transition:opacity .45s,transform .55s var(--ez-b)}
.ddv-done .ico{width:16px;height:16px;flex:none;stroke-width:2.2}
.ddv-done b{font-weight:600}
.ddv.k7 .ddv-done{opacity:1;transform:none;transition-delay:1s}

/* --- Curseur : une position par étape (coordonnées dans .ddv, 1120 px de large).
   Cibles côté client exprimées depuis le coin de l'îlot (--clx / --cly) : sur mobile,
   l'îlot vient se poser par-dessus Stolip. --- */
.ddv .mk-cur{--cx:430px;--cy:560px}
.ddv.k1 .mk-cur{--cx:540px;--cy:132px}
.ddv.k2 .mk-cur{--cx:520px;--cy:218px}
.ddv.k3 .mk-cur{--cx:calc(var(--clx) + 330px);--cy:calc(var(--cly) + 470px)}
.ddv.k4 .mk-cur{--cx:calc(var(--clx) + 260px);--cy:calc(var(--cly) + 318px)}
.ddv.k5 .mk-cur{--cx:calc(var(--clx) + 300px);--cy:calc(var(--cly) + 362px)}
.ddv.k6 .mk-cur{--cx:calc(var(--clx) + 290px);--cy:calc(var(--cly) + 436px)}
.ddv.k7 .mk-cur{--cx:calc(var(--clx) + 120px);--cy:calc(var(--cly) + 478px)}
.ddv.k8 .mk-cur{--cx:430px;--cy:470px}
.ddv[data-s="1"] .mk-cur::after,.ddv[data-s="2"] .mk-cur::after,.ddv[data-s="4"] .mk-cur::after,.ddv[data-s="6"] .mk-cur::after,.ddv[data-s="7"] .mk-cur::after{animation:clk .55s var(--ez) .8s forwards}

/* --- Mobile : l'îlot client se pose par-dessus Stolip le temps de son étape --- */
@media(max-width:700px){
  .ddv{--clx:136px;--cly:120px;height:680px}
  .ddv-bo{width:590px}
  .ddv-lane{display:none}
  .ddv-cl{left:var(--clx);top:var(--cly);z-index:8;box-shadow:0 40px 80px -30px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.4);
    opacity:0;filter:none;transform:translateX(60px)}
  .ddv.k3 .ddv-cl{opacity:1;transform:none;transition-delay:.5s}
  .ddv.k8 .ddv-cl{opacity:0;transform:translateX(60px);transition-delay:.3s}
  .ddv-when{left:295px}
}

/* ======================= Le trajet ======================= */
/* Relances prévues sur le calendrier : posées à l'envoi (a3), barrées à l'accord (a5). */
.ddv-rk{position:absolute;z-index:1;top:3px;left:calc(18px + (100% - 36px) / var(--n) * (var(--x) + .5));transform:translateX(-50%);
  font-family:'Spline Sans Mono';font-size:8px;color:var(--c-devis);border:1px dashed color-mix(in srgb,var(--c-devis) 60%,transparent);border-radius:4px;padding:0 3px;line-height:12px;
  opacity:0;transition:opacity .4s,color .4s}
.a3 .ddv-rk{opacity:1}
.a5 .ddv-rk{color:var(--tx-3);border-color:var(--bd-2);text-decoration:line-through}
.uc-cal .uc-cal-d{bottom:7px}
@media(max-width:900px){.ddv-rk{display:none}}

/* L0 — nouveau devis : le compte, puis les produits */
.tj-new{position:absolute;left:10px;top:30px;width:350px;padding:15px 16px}
.tj-info{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.tj-info>div{display:flex;flex-direction:column;gap:3px;padding:7px 9px;border-radius:8px;border:1px solid var(--bd);background:var(--bg)}
.tj-info b{font-size:12.5px;font-weight:600}
.tj-new .mk-in .ico{color:var(--tx)}
.tj-hit{display:flex;align-items:center;gap:9px;margin-top:8px;padding:7px 8px;border-radius:9px;background:rgba(255,255,255,.05);font-size:12px;
  opacity:0;transform:translateY(6px);transition:opacity .35s,transform .5s var(--ez)}
.tj-hit b{display:block;font-weight:600}
.tj-hit small{font-size:10.5px;color:var(--tx-3)}
.tj-hit .mk-chip{margin-left:auto}
.a0 .tj-hit{opacity:1;transform:none;transition-delay:1.4s}
.tj-add{position:absolute;right:6px;bottom:24px;width:340px;padding:14px 15px;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .7s var(--ez)}
.a0 .tj-add{opacity:1;transform:none;transition-delay:1.9s}
.tj-add .mk-in{margin-top:4px}
.tj-res{display:flex;flex-direction:column;gap:3px;margin-top:8px}
.tj-res .rs{display:grid;grid-template-columns:30px 1fr auto;gap:9px;align-items:center;padding:6px 7px;border-radius:9px;font-size:11.5px;
  opacity:0;transform:translateY(5px);transition:opacity .35s,transform .45s var(--ez),background .3s}
.tj-res .th{width:30px;height:30px;border-radius:7px;background:var(--bg);border:1px solid var(--bd);display:grid;place-items:center}
.tj-res .th .ddv-pr{width:20px;height:20px}
.tj-res .t small{display:block;font-family:'Spline Sans Mono';font-size:9px;color:var(--tx-3)}
.tj-res .p{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;padding:4px 8px;border-radius:6px;border:1px solid var(--bd-2);color:var(--tx-2);transition:all .3s}
.tj-res .p .ico{width:10px;height:10px}
.a0 .tj-res .rs{opacity:1;transform:none;transition-delay:3s}
.a0 .tj-res .r2{transition-delay:3.1s}
.a0 .tj-res .r1{background:rgba(255,255,255,.06);transition-delay:3s,3s,3.8s}
.a0 .tj-res .r1 .p{background:var(--tx);color:var(--bg);border-color:var(--tx);transition-delay:3.9s}

/* L1 — le palier change, le coef suit */
.tj-pal{width:500px;padding:15px 17px}
.tj-pt{margin-top:8px}
.tj-pt .mk-tr{grid-template-columns:.8fr 1fr 1fr .7fr 1fr;padding:10px 12px;font-size:12.5px;font-variant-numeric:tabular-nums;transition:background .45s,color .45s,opacity .45s}
.tj-pt .mk-tr.h{font-size:8px;padding:8px 12px}
.tj-pt .b{font-weight:600;color:var(--tx)}
.tj-pt .p500{opacity:.3}
[data-active="1"] .tj-pt .p250{opacity:.45;transition-delay:1.2s}
[data-active="1"] .tj-pt .p500{opacity:1;background:var(--tx);color:var(--bg);transition-delay:1.3s}
[data-active="1"] .tj-pt .p500 .t,[data-active="1"] .tj-pt .p500 .b{color:var(--bg)}
.tj-note{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:11.5px;color:var(--tx-2);opacity:0;transition:opacity .5s}
.tj-note .ico{width:14px;height:14px;flex:none}
[data-active="1"] .tj-note{opacity:1;transition-delay:.7s}
.tj-eq{display:flex;align-items:baseline;gap:12px;font-size:22px;color:var(--tx-2);opacity:0;transform:translateY(8px);transition:opacity .5s,transform .6s var(--ez)}
[data-active="1"] .tj-eq{opacity:1;transform:none;transition-delay:1.6s}
.tj-eq .op{color:var(--tx-3)}
.tj-eq b{font-family:var(--disp);font-size:40px;letter-spacing:-.013em;color:var(--tx)}
.tj-eq small{font-family:'Spline Sans Mono';font-size:10.5px;color:var(--tx-3)}

/* L2 — le coef figé, le résumé juste */
.tj-own{width:480px;padding:15px 17px}
.tj-og{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:10px}
.tj-og>div{display:flex;flex-direction:column;gap:5px;position:relative}
.tj-og b{font-size:15px;color:var(--tx)}
.tj-oc .mk-in{height:32px;width:74px;font-weight:600;border-color:var(--tx-2)}
.tj-oc .c1{display:none}
.a2 .tj-oc .c0{display:none}
.a2 .tj-oc .c1{display:inline}
.tj-oc .fz{position:absolute;right:-6px;top:-8px;font-family:'Spline Sans Mono';font-size:8.5px;padding:1px 5px;border-radius:4px;background:var(--tx);color:var(--bg);opacity:0;transform:scale(.6);transition:opacity .3s,transform .45s var(--ez-b)}
.a2 .tj-oc .fz{opacity:1;transform:none;transition-delay:1s}
.tj-sum{width:480px;padding:13px 17px}
.tj-sum .sl{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--tx-2);padding:6px 0;border-bottom:1px solid var(--bd)}
.tj-sum .sl b{color:var(--tx);font-weight:600;font-variant-numeric:tabular-nums}
.tj-sum .sl.tot{border-bottom:none}
.tj-sum .sl.tot span{color:var(--tx);font-weight:600}
.tj-sum .sl.tot b{font-family:var(--disp);font-size:22px;letter-spacing:-.02em}
.tj-mg{display:flex;align-items:baseline;gap:12px;margin-top:6px;padding:9px 12px;border-radius:9px;border:1px solid var(--bd);background:rgba(255,255,255,.02)}
.tj-mg b{font-size:16px;margin-left:auto;font-variant-numeric:tabular-nums}
.tj-mg>span:last-child{font-family:'Spline Sans Mono';font-size:11px;color:var(--tx-2)}

/* L3 — l'envoi, le lien, les relances */
.tj-mail{width:480px;padding:16px 18px}
.tj-mh{display:flex;align-items:center;gap:12px}
.tj-mh>.ico{width:30px;height:30px;padding:7px;border-radius:9px;border:1px solid var(--bd-2);color:var(--tx);flex:none}
.tj-mh b{display:block;font-size:13.5px}
.tj-mh small{font-size:11px;color:var(--tx-3)}
.tj-mh .mk-chip{margin-left:auto;flex:none}
.tj-link{display:flex;align-items:center;gap:10px;margin-top:12px;padding:9px 11px;border-radius:9px;border:1px dashed color-mix(in srgb,var(--c-espace-client) 55%,transparent);font-size:12px;color:var(--tx);
  opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--ez)}
.tj-link .ico{width:15px;height:15px;color:var(--c-espace-client);flex:none}
.tj-link small{display:block;font-family:'Spline Sans Mono';font-size:9.5px;color:var(--tx-3)}
.a3 .tj-link{opacity:1;transform:none;transition-delay:.8s}
.tj-rg{grid-template-columns:.8fr .8fr 1.2fr}
.tj-rg.q1,.tj-rg.q2{opacity:0;transform:translateX(-8px);transition:opacity .4s,transform .5s var(--ez)}
.a3 .tj-rg.q1{opacity:1;transform:none;transition-delay:1.4s}
.a3 .tj-rg.q2{opacity:1;transform:none;transition-delay:1.6s}
.tj-mf{margin-top:10px;font-family:'Spline Sans Mono';font-size:9.5px;color:var(--tx-3)}

/* L4 — l'espace client */
.tj-cl{width:440px;box-shadow:0 40px 80px -30px rgba(0,0,0,.95)}
.tj-chrome{height:36px;background:#F2F2EF}
.tj-chrome .win-url{max-width:none;margin:0;flex:1;height:22px;background:#fff}
.tj-clb{padding:13px 16px 15px;display:flex;flex-direction:column;gap:8px;color:var(--tx)}
.tj-cpt{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#7A5A10}
.tj-cpt .ico{width:14px;height:14px;opacity:0;transition:opacity .4s}
.a4 .tj-cpt{color:var(--tx-3);transition:color .4s 2.4s}
.a4 .tj-cpt .ico{opacity:1;transition-delay:2.4s}
.tj-cr{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:8px}
.tj-cr .lb{font-size:11px;color:var(--tx-2)}
.tj-sel{display:flex;align-items:center;justify-content:space-between;gap:8px;height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--bd-2);font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden}
.tj-sel .ico{width:12px;height:12px;color:var(--tx-3);flex:none}
.tj-szl{font-size:11px;color:var(--tx-2)}
.tj-sz{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.tj-sz label{display:flex;flex-direction:column;align-items:center;gap:3px;font-family:'Spline Sans Mono';font-size:9px;color:var(--tx-3)}
.tj-sz b{width:100%;height:28px;border-radius:7px;border:1px solid var(--bd-2);display:grid;place-items:center;font-family:'Hanken Grotesk';font-size:12.5px;font-weight:600;color:var(--tx)}
/* Même règle que le héros : les cases se remplissent une à une, le compteur suit case par case. */
.tj-sz b{color:transparent;transition:color .25s,border-color .25s}
.a4 .tj-sz b{color:var(--tx);border-color:var(--tx-3)}
.a4 .tj-sz label:nth-child(1) b{transition-delay:.5s}.a4 .tj-sz label:nth-child(2) b{transition-delay:.7s}.a4 .tj-sz label:nth-child(3) b{transition-delay:.9s}
.a4 .tj-sz label:nth-child(4) b{transition-delay:1.1s}.a4 .tj-sz label:nth-child(5) b{transition-delay:1.3s}.a4 .tj-sz label:nth-child(6) b{transition-delay:1.5s}
.a4 .tj-sz label:nth-child(7) b{transition-delay:1.7s}
.tj-cnt{display:grid;font-size:11px;color:#7A5A10}
.tj-cnt>span{grid-area:1/1;display:inline-flex;align-items:center;gap:5px;transition:opacity .3s}
.tj-cnt .c0{display:grid}
.tj-cnt .c0>span{grid-area:1/1;background:#fff;opacity:0;transition:opacity .12s}
.tj-cnt .c0>span:first-child{opacity:1}
.tj-cnt .c1{opacity:0;color:var(--tx);font-weight:600}
.tj-cnt .ico{width:12px;height:12px}
.a4 .tj-cnt .c0>span{opacity:1}
.a4 .tj-cnt .c0>span:nth-child(2){transition-delay:.6s}.a4 .tj-cnt .c0>span:nth-child(3){transition-delay:.8s}
.a4 .tj-cnt .c0>span:nth-child(4){transition-delay:1s}.a4 .tj-cnt .c0>span:nth-child(5){transition-delay:1.2s}
.a4 .tj-cnt .c0>span:nth-child(6){transition-delay:1.4s}.a4 .tj-cnt .c0>span:nth-child(7){transition-delay:1.6s}
.a4 .tj-cnt .c0{opacity:0;transition-delay:1.95s}.a4 .tj-cnt .c1{opacity:1;transition-delay:2s}
.tj-acc{display:grid;place-items:center;height:36px;margin-top:4px;border-radius:9px;background:#D6D7DA;color:#fff;font-size:12.5px;font-weight:600;transition:background .4s}
.a4 .tj-acc{background:#141418;transition-delay:2.4s}
.tj-ok{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;background:#141418;color:#fff;font-size:11.5px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--ez-b)}
.tj-ok .ico{width:15px;height:15px;flex:none;stroke-width:2.2}
.tj-ok b{font-weight:600}
.a4 .tj-ok{opacity:1;transform:none;transition-delay:3.1s}

/* L5 — ce que l'accord déclenche, tout seul */
.tj-auto{width:470px;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.tj-ah{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.tj-ah b{display:block;font-size:14px}
.tj-ah small{font-size:11px;color:var(--tx-2)}
.tj-ah .okc{width:32px;height:32px;border-radius:50%;background:var(--tx);color:var(--bg);display:grid;place-items:center;flex:none;transform:scale(0);transition:transform .6s var(--ez-b) .2s}
.tj-ah .okc .ico{width:17px;height:17px;stroke-width:2.4}
[data-active="5"] .tj-ah .okc{transform:none}
.tj-ev{display:flex;align-items:flex-start;gap:11px;padding:9px 11px;border-radius:10px;border:1px dashed color-mix(in srgb,var(--ec) 45%,var(--bd));font-size:12px;
  opacity:0;transform:translateX(-10px);transition:opacity .4s,transform .55s var(--ez);transition-delay:calc(var(--i) * 380ms + 700ms)}
.tj-ev>i{width:10px;height:10px;margin-top:3px;border-radius:50%;background:var(--ec);flex:none}
.tj-ev b{display:block;font-weight:600;color:var(--tx)}
.tj-ev small{font-size:10.5px;color:var(--tx-3)}
[data-active="5"] .tj-ev,.a6 .tj-ev{opacity:1;transform:none}

/* L6 — la commande avance */
.tj-ord{width:480px;padding:15px 17px}
.tj-fr{position:relative;display:flex;flex-direction:column;gap:2px;margin-top:10px}
.tj-fr::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:var(--bd-2)}
.tj-fr::after{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:var(--c-commandes);transform-origin:50% 0;transform:scaleY(0);transition:transform 2.4s var(--ez) .5s}
[data-active="6"] .tj-fr::after{transform:none}
.tj-fr .g{position:relative;display:grid;grid-template-columns:16px 120px 1fr;align-items:center;gap:12px;padding:6px 0;font-size:12.5px}
.tj-fr .g i{position:relative;z-index:1;width:16px;height:16px;border-radius:50%;background:var(--bg-3);border:2px solid var(--bd-2);transition:background .35s,border-color .35s}
.tj-fr .g b{font-weight:600;color:var(--tx-3);transition:color .35s}
.tj-fr .g small{font-family:'Spline Sans Mono';font-size:10px;color:var(--tx-3)}
[data-active="6"] .tj-fr .g i{background:var(--c-commandes);border-color:var(--c-commandes)}
[data-active="6"] .tj-fr .g b{color:var(--tx)}
[data-active="6"] .tj-fr .g0 i,[data-active="6"] .tj-fr .g0 b{transition-delay:.5s}
[data-active="6"] .tj-fr .g1 i,[data-active="6"] .tj-fr .g1 b{transition-delay:1.05s}
[data-active="6"] .tj-fr .g2 i,[data-active="6"] .tj-fr .g2 b{transition-delay:1.6s}
[data-active="6"] .tj-fr .g3 i,[data-active="6"] .tj-fr .g3 b{transition-delay:2.15s}
[data-active="6"] .tj-fr .g4 i,[data-active="6"] .tj-fr .g4 b{transition-delay:2.7s}
.tj-sc{width:480px;padding:13px 17px;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .6s var(--ez)}
[data-active="6"] .tj-sc{opacity:1;transform:none;transition-delay:2.3s}
.tj-sc .mk-lbl{display:inline-flex;align-items:center;gap:6px}
.tj-sc .mk-lbl .ico{width:12px;height:12px}
.tj-pk{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.tj-pk span{font-family:'Spline Sans Mono';font-size:10px;padding:4px 8px;border-radius:6px;border:1px solid var(--bd-2);color:var(--tx)}
.tj-pk em{margin-left:auto;font-style:normal;font-family:'Spline Sans Mono';font-size:10px;color:var(--tx-2)}
.tj-ml{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.tj-ml span{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--tx-2)}
.tj-ml .ico{width:13px;height:13px;flex:none}
.tj-ml small{margin-left:auto;font-family:'Spline Sans Mono';font-size:9.5px;color:var(--tx-3)}

/* Panneau du trajet : les couches tiennent sur 560 × 452 ; L0 est posée à la main. */
.ddv-tj .lay0{display:block}
@media(min-width:901px) and (max-height:800px){.ddv-rk{top:-3px}}