/* C—02 · Équiper un grand compte et ses sites — maquettes de templates/landing/cas/grands-comptes.html.twig.
   Trigrammes : gco- (hero), gsh- (boutique du groupe, îlot clair marque blanche Norvane), gcs- (le décor,
   dans « La situation »), gtj- (couches du trajet). Univers de démo neutre (demande DA-0061, Groupe Norvane).
   Hero : .gco[data-tl] → .k0…k8 (cumulatif) et [data-s="n"] (exact) ;
   trajet : [data-active="n"] (couche affichée) et .a0…a6 (étape jouée).
   Couleur de marque du client (Groupe Norvane, #1E3A8A) : seulement dans la boutique — c'est le sujet
   (même exception que la page Boutiques) ; le back-office reste noir / blanc / gris. */

.gc-sprite{position:absolute;width:0;height:0;overflow:hidden}
.uc-grands-comptes{--nv:#1E3A8A;--nv-t:#EEF2FB}

/* ======================= Boutique du groupe (îlot clair) ======================= */
.gc-th{width:34px;height:34px;flex:none;border-radius:8px;background:#F4F4F1;border:1px solid rgba(20,20,24,.07);display:grid;place-items:center;overflow:hidden}
.gc-ill{width:28px;height:28px;display:block}
.gsh-hd{display:flex;align-items:center;gap:10px;height:48px;padding:0 16px;border-bottom:1px solid var(--bd);background:#fff}
.gsh-logo{display:inline-flex;align-items:center;gap:8px;font-family:'Schibsted Grotesk';font-size:13.5px;font-weight:600;color:#141418;white-space:nowrap}
.gsh-logo svg{width:24px;height:24px;flex:none}
.gsh-srch{flex:1;min-width:0;display:flex;align-items:center;gap:7px;height:28px;padding:0 10px;margin-left:8px;border-radius:8px;border:1px solid var(--bd-2);background:#fff;font-size:10.5px;color:var(--tx-3);white-space:nowrap;overflow:hidden}
.gsh-srch span{overflow:hidden;text-overflow:ellipsis}
.gsh-srch .ico{width:12px;height:12px;flex:none}
.gsh-ib{position:relative;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--tx-2);flex:none}
.gsh-ib .ico{width:15px;height:15px}
.gsh-n{position:absolute;right:-2px;top:-2px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:var(--nv);color:#fff;font-family:'Spline Sans Mono';font-size:8.5px;font-weight:500;line-height:15px;text-align:center;transition:opacity .35s,transform .45s var(--ez-b)}
.gsh-av{position:relative;width:26px;height:26px;flex:none;border-radius:50%;background:#EFEFEC;border:1px solid var(--bd-2);display:grid;place-items:center;font-family:'Spline Sans Mono';font-size:9.5px;color:var(--tx-2)}
.gsh-av>span{grid-area:1/1}
.gsh-tabs{position:relative;height:34px;border-bottom:1px solid var(--bd);background:#fff}
.gsh-tabs .tr{position:absolute;inset:0;display:flex;align-items:stretch;gap:2px;padding:0 12px;font-size:11px;color:var(--tx-2);transition:opacity .25s}
.gsh-tabs .tr>span{display:flex;align-items:center;gap:5px;padding:0 7px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color .35s,border-color .35s}
.gsh-tabs .tr>i{flex:1}
.gsh-tabs .on{color:#141418;font-weight:600;border-bottom-color:var(--nv)!important}
.gsh-tabs b{min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:var(--nv);color:#fff;font-family:'Spline Sans Mono';font-size:8.5px;font-weight:500;line-height:15px;text-align:center}
.gsh-h1{font-family:'Schibsted Grotesk';font-size:19px;font-weight:600;letter-spacing:-.015em;color:#141418}
.gsh-lede{margin-top:2px;font-size:11.5px;color:var(--tx-2)}
.gsh-card{border:1px solid var(--bd);border-radius:12px;background:#fff}
.gsh-h3{font-size:12.5px;font-weight:600;color:#141418}
.gsh-l{display:block;font-size:10.5px;color:var(--tx-2)}
.gsh-l em{font-style:normal;color:var(--tx-3)}
.gsh-in{display:flex;align-items:center;justify-content:space-between;gap:6px;height:28px;padding:0 9px;border-radius:7px;border:1px solid var(--bd-2);background:#fff;font-size:11px;color:#141418;white-space:nowrap;overflow:hidden}
.gsh-in .ico{width:11px;height:11px;color:var(--tx-3);flex:none}
.gsh-ta{display:block;padding:7px 9px;border-radius:7px;border:1px solid var(--bd-2);font-size:11px;line-height:1.4;color:#141418}
.gsh-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 14px;border-radius:8px;background:var(--nv);color:#fff;font-size:11.5px;font-weight:600;white-space:nowrap;transition:transform .3s var(--ez-b),box-shadow .3s}
.gsh-btn .ico{width:13px;height:13px;stroke-width:2.2}
.gsh-btn.ghost{background:#fff;color:#141418;border:1px solid var(--bd-2)}
.gsh-bad{display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:8px;border:1px solid var(--bd-2);font-size:11.5px;font-weight:600;color:#141418}
.gsh-banner{display:flex;align-items:flex-start;gap:9px;padding:9px 12px;border-radius:10px;background:var(--nv-t);border:1px solid rgba(30,58,138,.18);font-size:11px;line-height:1.45;color:#1B2B5E}
.gsh-banner .ico{width:15px;height:15px;flex:none;color:var(--nv);stroke-width:2.2;margin-top:1px}
.gsh-seg{display:inline-flex;gap:2px;padding:2px;border-radius:8px;background:#F2F2EF;font-size:10.5px;color:var(--tx-2)}
.gsh-seg span{padding:4px 10px;border-radius:6px}
.gsh-seg .on{background:#fff;color:#141418;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.gsh-chip{display:inline-grid;align-items:center;height:20px;padding:0 8px;border-radius:999px;border:1px solid var(--bd-2);font-size:10px;font-weight:600;color:var(--tx-2);white-space:nowrap;transition:background .4s,color .4s,border-color .4s}
.gsh-chip>span{grid-area:1/1;transition:opacity .3s}
.gsh-quote{font-size:11px;line-height:1.45;color:var(--tx-2);padding:7px 10px;border-radius:8px;background:#F6F7F8}
/* frise Envoyée → Validée → Devis → Production → Expédiée */
.gsh-track{position:relative;display:grid;grid-template-columns:repeat(5,1fr);margin-top:12px}
.gsh-track::before{content:"";position:absolute;left:10%;right:10%;top:6px;height:2px;background:#E6E7EA}
.gsh-track::after{content:"";position:absolute;left:10%;top:6px;height:2px;width:80%;background:var(--nv);transform-origin:0 50%;transform:scaleX(var(--tp,0));transition:transform .8s var(--ez)}
.gsh-track .tk{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:9.5px;color:var(--tx-3);transition:color .35s}
.gsh-track .tk i{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #D5D7DC;transition:background .35s,border-color .35s,box-shadow .35s}
.gsh-track .tk.dn{color:#141418}
.gsh-track .tk.dn i{background:var(--nv);border-color:var(--nv)}
.gsh-track .tk.cu i{background:#fff;border-color:var(--nv);box-shadow:0 0 0 3px rgba(30,58,138,.15)}
/* tableau simple (validations, utilisateurs) */
.gsh-t{border:1px solid var(--bd);border-radius:9px;overflow:hidden}
.gsh-t .tr{display:grid;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--bd);font-size:11px;color:var(--tx-2);font-variant-numeric:tabular-nums}
.gsh-t .tr:last-child{border-bottom:none}
.gsh-t .tr.h{padding:6px 10px;font-family:'Spline Sans Mono';font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3);background:#FAFAF8}
.gsh-t .r{text-align:right}
.gsh-t .b{color:#141418;font-weight:600}
.gsh-t .a b{display:block;color:#141418;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsh-t .a small{display:block;font-size:9.5px;color:var(--tx-3)}
.gsh-toast{position:absolute;z-index:14;display:flex;align-items:center;gap:9px;height:38px;padding:0 13px;border-radius:10px;background:#141418;color:#fff;font-size:11.5px;font-weight:500;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.6);opacity:0;transform:translateY(12px);transition:opacity .4s,transform .55s var(--ez-b)}
.gsh-toast .ico{width:15px;height:15px;stroke-width:2.4;flex:none}
.uc-grands-comptes .mono{font-family:'Spline Sans Mono';font-size:10.5px}

/* ======================= Hero : la demande traverse ======================= */
.gco{position:relative;width:1120px;height:600px;--box:628px;--boy:52px;--bs:1}
.gco-body{position:absolute;inset:0}

/* La ligne du temps, au-dessus des écrans */
.gco-when{position:absolute;left:50%;top:0;transform:translateX(-50%);z-index:6;display:grid;height:30px}
.gco-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)}
.gco-when>span i{width:8px;height:8px;border-radius:50%;background:var(--wc,var(--fx-c));flex:none}
.gco-when>span em{font-style:normal;color:var(--tx-2)}
.gco-when .w0,.gco-when .w1,.gco-when .w2,.gco-when .w4{--wc:var(--c-boutiques)}
.gco-when .w3{--wc:var(--c-devis)}
.gco[data-s="0"] .w0,.gco[data-s="1"] .w0,.gco[data-s="2"] .w1,.gco[data-s="3"] .w1,.gco[data-s="4"] .w2,.gco[data-s="5"] .w2,
.gco[data-s="6"] .w3,.gco[data-s="7"] .w3,.gco[data-s="8"] .w4{opacity:1;transform:none;transition-delay:.2s}
.gco[data-s="2"] .w1{transition-delay:.7s}
.gco[data-s="6"] .w3{transition-delay:.6s}
.gco:not(.tl) .w4{opacity:1;transform:none}

/* --- Chez le client : la boutique --- */
.gco-shop{position:absolute;left:0;top:52px;width:532px;height:548px}
.gco-chrome{height:38px;background:#F2F2EF;gap:12px}
.gco-chrome .win-url{max-width:none;margin:0;flex:1;height:24px;background:#fff;gap:0}
.gco-chrome .win-url svg{margin-right:7px}
.gco-u{display:inline-grid}
.gco-u>span{grid-area:1/1;opacity:0;transition:opacity .3s}
.gco-u .u0{opacity:1}
.gco[data-s="2"] .gco-u .u0,.gco[data-s="3"] .gco-u .u0,.gco[data-s="4"] .gco-u .u0,.gco[data-s="5"] .gco-u .u0,.gco[data-s="6"] .gco-u .u0,.gco[data-s="7"] .gco-u .u0,.gco[data-s="8"] .gco-u .u0{opacity:0}
.gco[data-s="2"] .gco-u .u1,.gco[data-s="3"] .gco-u .u1,.gco[data-s="8"] .gco-u .u1{opacity:1}
.gco[data-s="4"] .gco-u .u2,.gco[data-s="5"] .gco-u .u2,.gco[data-s="6"] .gco-u .u2,.gco[data-s="7"] .gco-u .u2{opacity:1}
.gco-av .a1{opacity:0}
.gco-av>span{transition:opacity .3s}
.gco[data-s="4"] .gco-av .a0,.gco[data-s="5"] .gco-av .a0,.gco[data-s="6"] .gco-av .a0,.gco[data-s="7"] .gco-av .a0{opacity:0}
.gco[data-s="4"] .gco-av .a1,.gco[data-s="5"] .gco-av .a1,.gco[data-s="6"] .gco-av .a1,.gco[data-s="7"] .gco-av .a1{opacity:1}
.gco.k2 .gco-bag{opacity:0;transform:scale(.4);transition-delay:.3s}
.gco-dot{position:absolute;right:4px;top:4px;width:7px;height:7px;border-radius:50%;background:var(--nv);box-shadow:0 0 0 2px #fff;opacity:0;transform:scale(.3);transition:opacity .3s,transform .45s var(--ez-b)}
.gco[data-s="8"] .gco-dot{opacity:1;transform:none;transition-delay:1.4s}
.gco-tabs .tr1{opacity:0}
.gco[data-s="4"] .gco-tabs .tr0,.gco[data-s="5"] .gco-tabs .tr0,.gco[data-s="6"] .gco-tabs .tr0,.gco[data-s="7"] .gco-tabs .tr0{opacity:0}
.gco[data-s="4"] .gco-tabs .tr1,.gco[data-s="5"] .gco-tabs .tr1,.gco[data-s="6"] .gco-tabs .tr1,.gco[data-s="7"] .gco-tabs .tr1{opacity:1;transition-delay:.3s}
.gco[data-s="8"] .gco-tabs .tr0{transition-delay:.3s}
.gco[data-s="2"] .gco-td,.gco[data-s="3"] .gco-td,.gco[data-s="8"] .gco-td{color:#141418;font-weight:600;border-bottom-color:var(--nv)}
:where(.gco:not(.tl)) .gco-td{color:#141418;font-weight:600;border-bottom-color:var(--nv)}

/* Les trois vues de la boutique, en fondu */
.gco-views{position:absolute;left:0;right:0;top:120px;bottom:0;background:#FBFBFA}
.gco-v{position:absolute;inset:0;padding:13px 16px 14px;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .45s var(--ez),transform .6s var(--ez)}
.gco:not([data-s]) .gco-cart,.gco[data-s="0"] .gco-cart,.gco[data-s="1"] .gco-cart{opacity:1;transform:none}
.gco[data-s="2"] .gco-dem,.gco[data-s="3"] .gco-dem,.gco[data-s="8"] .gco-dem{opacity:1;transform:none;transition-delay:.35s}
.gco[data-s="4"] .gco-val,.gco[data-s="5"] .gco-val,.gco[data-s="6"] .gco-val,.gco[data-s="7"] .gco-val{opacity:1;transform:none;transition-delay:.35s}
.gco[data-s="5"] .gco-val,.gco[data-s="6"] .gco-val,.gco[data-s="7"] .gco-val{transition-delay:0s}
.gco[data-s="3"] .gco-dem{transition-delay:0s}

/* 1 · Panier */
.gco-cl{display:grid;grid-template-columns:minmax(0,1fr) 212px;gap:12px;margin-top:11px;align-items:start}
.gco-lines{padding:2px 12px 12px}
.gco-ln{display:grid;grid-template-columns:34px minmax(0,1fr) auto;column-gap:10px;row-gap:7px;align-items:center;padding:10px 0;border-bottom:1px solid var(--bd)}
.gco-ln .nm b{display:block;font-size:11.5px;font-weight:600;color:#141418;line-height:1.25}
.gco-ln .nm small{display:block;margin-top:1px;font-size:10px;color:var(--tx-3)}
.gco-ln .am{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-variant-numeric:tabular-nums}
.gco-ln .am small{font-family:'Spline Sans Mono';font-size:9px;color:var(--tx-3)}
.gco-ln .am b{font-size:12px;font-weight:600;color:#141418}
.gco-ln .sz{grid-column:2 / span 2;display:flex;flex-wrap:wrap;gap:3px}
.gco-ln .sz span{font-family:'Spline Sans Mono';font-size:8.5px;color:var(--tx-2);padding:2px 5px;border-radius:5px;background:#F2F2EF}
.gco-word{display:flex;flex-direction:column;gap:5px;margin-top:10px}
.gco-side{padding:11px 12px;display:flex;flex-direction:column;gap:6px}
.gco-addr{display:flex;flex-direction:column;gap:4px}
.gco-addr label{display:grid;grid-template-columns:13px minmax(0,1fr);gap:7px;align-items:start;padding:5px 7px;border-radius:7px;border:1px solid transparent}
.gco-addr label.on{border-color:rgba(30,58,138,.35);background:var(--nv-t)}
.gco-addr i{width:12px;height:12px;margin-top:1px;border-radius:50%;border:1.5px solid #B9BCC2;background:#fff}
.gco-addr .on i{border:3.5px solid var(--nv)}
.gco-addr b{display:block;font-size:11px;font-weight:600;color:#141418}
.gco-addr small{display:block;font-size:9px;line-height:1.35;color:var(--tx-3)}
.gco-fd{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;margin-top:1px}
.gco-fd .gsh-in{height:26px}
.gco-kv{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;color:var(--tx-2)}
.gco-kv span:last-child{color:#141418}
.gco-kv.big{align-items:baseline;padding-top:6px;border-top:1px solid var(--bd)}
.gco-kv.big span:first-child{font-weight:600;color:#141418}
.gco-kv.big span:last-child{font-family:'Schibsted Grotesk';font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.gco-send{margin-top:2px}
.gco[data-s="1"] .gco-send{transform:scale(.96);box-shadow:0 0 0 4px rgba(30,58,138,.18);transition-delay:.75s}
.gco-note{font-size:9px;color:var(--tx-3);text-align:center}

/* 2 · Mes demandes */
.gco-dem .gsh-banner{margin-top:10px}
.gco-dem .gsh-seg{margin-top:10px}
.gco-ban{transition:opacity .35s}
.gco[data-s="8"] .gco-ban{display:none}
.gco-oc{margin-top:10px;padding:12px 14px}
.gco-oc .oc-top,.gco-vc .oc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.oc-id b{display:block;font-family:'Spline Sans Mono';font-size:13px;font-weight:500;color:#141418}
.oc-id small{display:block;margin-top:2px;font-size:10px;color:var(--tx-3)}
.oc-r{display:flex;align-items:center;gap:10px;flex:none}
.oc-r>b,.vc-m{font-size:13px;font-weight:600;color:#141418;font-variant-numeric:tabular-nums;white-space:nowrap}
.oc-r>b small,.vc-m small{font-size:9.5px;font-weight:500;color:var(--tx-3)}
.oc-th{display:flex;gap:6px;margin-top:12px}
.oc-th .gc-th{width:30px;height:30px}
.oc-th .gc-ill{width:24px;height:24px}
.gco-dv{opacity:0;white-space:nowrap;transition:opacity .4s}
.gco-st .c1{opacity:0}
.gco[data-s="2"] .gco-st,.gco[data-s="3"] .gco-st{border-style:dashed}
.gco[data-s="8"] .gco-dv{opacity:1;transition-delay:.9s}
.gco[data-s="8"] .gco-st{background:var(--nv-t);border-color:rgba(30,58,138,.3);color:var(--nv);transition-delay:.9s}
.gco[data-s="8"] .gco-st .c0{opacity:0;transition-delay:.9s}
.gco[data-s="8"] .gco-st .c1{opacity:1;transition-delay:.9s}
.gco-trk .t0{color:#141418}
.gco-trk .t0 i{background:#fff;border-color:var(--nv);box-shadow:0 0 0 3px rgba(30,58,138,.15)}
.gco[data-s="8"] .gco-trk{--tp:.5}
.gco[data-s="8"] .gco-trk::after{transition-delay:1s}
.gco[data-s="8"] .gco-trk .t0 i,.gco[data-s="8"] .gco-trk .t1 i{background:var(--nv);box-shadow:none;transition-delay:1s}
.gco[data-s="8"] .gco-trk .t1,.gco[data-s="8"] .gco-trk .t2{color:#141418;transition-delay:1.2s}
.gco[data-s="8"] .gco-trk .t1 i{border-color:var(--nv);transition-delay:1.1s}
.gco[data-s="8"] .gco-trk .t2 i{border-color:var(--nv);box-shadow:0 0 0 3px rgba(30,58,138,.15);transition-delay:1.5s}

/* 3 · Validations */
.gco-val{padding-top:11px}
.gco-vc{margin-top:8px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.gco-vc .gsh-quote{padding:5px 10px}
.gco-vc .gsh-t .tr:not(.h){padding:5px 10px}
.gco-vc .gsh-btn,.gco-vc .gsh-bad{height:30px}
.gco-vc .gsh-t .tr{grid-template-columns:28px 104px minmax(0,1fr) 24px 50px 62px}
.gco-vc .gsh-t .tr.h>span:first-child{grid-column:1 / span 2}
.gco-vc .gsh-t .gc-th{width:28px;height:28px}
.gco-vc .gsh-t .gc-ill{width:22px;height:22px}
.gco-vc .gsh-t .a b{font-size:10.5px;white-space:normal;line-height:1.25}
.gco-vc .gsh-t .d{color:#141418;font-size:10.5px}
.gco-vc .gsh-t .d small{display:block;margin-top:2px;font-family:'Spline Sans Mono';font-size:8.5px;line-height:1.4;color:var(--tx-3)}
.gco-liv{font-size:10px;color:var(--tx-3)}
.gco-dec{position:relative;display:flex;gap:8px}
.gco[data-s="5"] .gco-ok{transform:scale(.96);box-shadow:0 0 0 4px rgba(30,58,138,.18);transition-delay:.75s}
.gco-t2{left:0;right:0;top:-3px}
.gco[data-s="5"] .gco-t2,.gco[data-s="6"] .gco-t2,.gco[data-s="7"] .gco-t2{opacity:1;transform:none}
.gco[data-s="5"] .gco-t2{transition-delay:1.05s}
/* Après la décision : 2 → 1 en attente (l'onglet et le chapeau), DA-0057 reste dans « Aussi en attente » */
.gco-vn,.gco-vl{display:inline-grid}
.gco-vl{display:grid}
.gco-vn>span,.gco-vl>span{grid-area:1/1;transition:opacity .3s}
.gco-vn .n1,.gco-vl .l1{opacity:0}
.gco[data-s="5"] .gco-vn .n0,.gco[data-s="6"] .gco-vn .n0,.gco[data-s="7"] .gco-vn .n0,
.gco[data-s="5"] .gco-vl .l0,.gco[data-s="6"] .gco-vl .l0,.gco[data-s="7"] .gco-vl .l0{opacity:0;transition-delay:1.35s}
.gco[data-s="5"] .gco-vn .n1,.gco[data-s="6"] .gco-vn .n1,.gco[data-s="7"] .gco-vn .n1,
.gco[data-s="5"] .gco-vl .l1,.gco[data-s="6"] .gco-vl .l1,.gco[data-s="7"] .gco-vl .l1{opacity:1;transition-delay:1.35s}
.gco[data-s="6"] .gco-vn>span,.gco[data-s="7"] .gco-vn>span,.gco[data-s="6"] .gco-vl>span,.gco[data-s="7"] .gco-vl>span{transition-delay:0s}
.gco-aw{margin-top:7px;background:#fff}
.gco-aw .tr{grid-template-columns:minmax(0,1fr) 92px 74px 46px;padding:4px 10px}
.gco-aw .tr.h{padding:4px 10px}
.gco-aw .tr:not(.h){font-size:10.5px}
.gco-aw b{font-family:'Spline Sans Mono';font-size:10.5px;font-weight:500;color:#141418}
.gco-aw u{text-decoration:none;color:var(--nv);font-weight:600}

/* L'e-mail du valideur (s3) : la boutique s'efface derrière lui */
.gco-shop::after{content:"";position:absolute;inset:38px 0 0;z-index:12;background:rgba(20,20,24,.32);opacity:0;pointer-events:none;transition:opacity .45s}
.gco[data-s="3"] .gco-shop::after{opacity:1;transition-delay:.15s}
.gco-mail{position:absolute;z-index:13;left:64px;top:170px;width:420px;border-radius:14px;background:#fff;border:1px solid var(--bd-2);overflow:hidden;
  opacity:0;transform:translateY(16px) scale(.98);transition:opacity .45s var(--ez),transform .6s var(--ez)}
.gco[data-s="3"] .gco-mail{opacity:1;transform:none;transition-delay:.3s}
.ml-s{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--bd);background:#FAFAF8}
.ml-s>.ico{width:28px;height:28px;padding:6px;border-radius:8px;border:1px solid var(--bd-2);color:#141418;flex:none}
.ml-s b{display:block;font-size:12px;font-weight:600;color:#141418}
.ml-s small{display:block;font-size:10px;color:var(--tx-3)}
.gco-mail .ml-hd{display:flex;align-items:center;gap:8px;padding:12px 16px 0;font-size:12.5px;color:#141418}
.gco-mail .ml-hd svg{width:22px;height:22px}
.gco-mail .ml-b{padding:8px 16px 16px;font-size:11.5px;line-height:1.5;color:var(--tx-2)}
.gco-mail .ml-b p+p{margin-top:4px}
.gco-mail .ml-b b{color:#141418}
.gco-mail .gco-see{margin-top:10px}
.gco[data-s="3"] .gco-see{transform:scale(.96);box-shadow:0 0 0 4px rgba(30,58,138,.18);transition-delay:1.35s}

/* --- La voie entre les deux : trois lignes, comme la chaîne. La capsule (l'objet seul) passe dans la
   voie et nulle part ailleurs : .gco-cv la rogne aux bords de la voie, avec un fondu, comme si elle
   sortait de sous un écran pour entrer sous l'autre. --- */
.gco-lane{position:absolute;left:532px;top:52px;width:96px;height:548px;z-index:5;pointer-events:none}
.gco-lane>i{position:absolute;left:0;right:0;height:1.5px;background:var(--bd-2);overflow:hidden}
.gco-lane>i:nth-child(1){top:262px}.gco-lane>i:nth-child(2){top:269px}.gco-lane>i:nth-child(3){top:276px}
.gco-lane>i::after{content:"";position:absolute;inset:0;background:var(--lc,var(--c-boutiques));transform:translateX(-101%)}
.gco.k2 .gco-lane>i::after{--lc:var(--c-boutiques);animation:gco-sweep 1.3s var(--ez) .25s forwards}
.gco.k6 .gco-lane>i::after{--lc:var(--c-devis);animation:gco-sweep2 1.3s var(--ez) .25s forwards}
@keyframes gco-sweep{0%{transform:translateX(-101%)}100%{transform:none}}
@keyframes gco-sweep2{0%{transform:translateX(-101%)}100%{transform:none}}
.gco-cv{position:absolute;left:0;right:0;top:249px;height:42px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 10px),transparent);mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 10px),transparent)}
.gco-lane .cap{position:absolute;left:50%;top:50%;display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:11px;
  font-family:'Spline Sans Mono';font-size:10px;font-weight:500;color:#0A0B0D;white-space:nowrap;opacity:0;transform:translate(-50%,-50%);
  box-shadow:0 6px 14px -6px rgba(0,0,0,.75)}
.gco-lane .c-a{background:var(--c-boutiques)}
.gco-lane .c-b{background:var(--c-devis)}
.gco.k2 .c-a{animation:gco-go 2s var(--ez) .25s forwards}
.gco.k6 .c-b{animation:gco-go 2s var(--ez) .25s forwards}
@keyframes gco-go{0%{opacity:1;transform:translate(calc(-50% - 96px),-50%)}30%,70%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:1;transform:translate(calc(-50% + 96px),-50%)}}

/* --- Chez vous : Stolip --- */
.gco-bo{position:absolute;left:var(--box);top:var(--boy);width:492px;height:548px}
.gco-bc{display:inline-grid}
.gco-bc>span{grid-area:1/1;white-space:nowrap;transition:opacity .3s}
.gco-bc .b1{opacity:0}
.gco[data-s="7"] .gco-bc .b0,.gco[data-s="8"] .gco-bc .b0{opacity:0;transition-delay:.9s}
.gco[data-s="7"] .gco-bc .b1,.gco[data-s="8"] .gco-bc .b1{opacity:1;transition-delay:.9s}
.gco-bv{position:absolute;left:0;right:0;top:46px;bottom:0;padding:16px 18px;transition:opacity .45s var(--ez),transform .6s var(--ez)}
.gco-fiche{opacity:0;transform:translateX(18px);pointer-events:none}
.gco[data-s="7"] .gco-list,.gco[data-s="8"] .gco-list{opacity:0;transform:translateX(-14px);transition-delay:.85s}
.gco[data-s="7"] .gco-fiche,.gco[data-s="8"] .gco-fiche{opacity:1;transform:none;transition-delay:.95s}
.gco-bh{display:flex;justify-content:space-between;align-items:center}
.gco-btabs{display:flex;gap:18px;margin-top:12px;border-bottom:1px solid var(--bd);font-size:11.5px;color:var(--tx-3)}
.gco-btabs span{padding:0 0 8px;border-bottom:2px solid transparent;margin-bottom:-1px}
.gco-btabs .on{color:var(--tx);border-bottom-color:var(--tx)}
.gco-bf{display:flex;gap:8px;margin-top:12px}
.gco-bf .mk-in{height:30px;font-size:11px;gap:10px}
.gco-bf .mk-btn{height:30px}
.gco-tb{margin-top:12px}
.gco-g{grid-template-columns:98px minmax(0,1fr) 74px 72px 66px;gap:8px;padding:8px 12px;font-size:11px}
.gco-g.h{padding:8px 12px}
.gco-g .t b{font-family:'Spline Sans Mono';font-size:11px;font-weight:500;color:var(--tx)}
.gco-g .t small{margin-top:1px}
.gco-g .b{color:var(--tx);font-weight:600}
.gco-g .mk-chip{font-size:9.5px;padding:2px 7px}
.gco-new{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ez)}
.gco-nw{min-height:0;overflow:hidden}
.gco-new .mk-tr{border-bottom:1px solid var(--bd);transition:background .5s}
.gco.k2 .gco-new{grid-template-rows:1fr;transition-delay:1.25s}
.gco[data-s="2"] .gco-r1,.gco[data-s="6"] .gco-r1{background:rgba(255,255,255,.06);transition-delay:1.3s}
.gco[data-s="6"] .gco-r1{transition-delay:1.5s}
.gco-sc{display:inline-grid;justify-items:center}
.gco-sc>span{grid-area:1/1;transition:opacity .3s}
.gco-sc .c1{opacity:0}
.gco-sc{border-style:dashed}
.gco.k6 .gco-sc{background:var(--tx);border-color:var(--tx);border-style:solid;color:var(--bg);transition-delay:1.6s}
.gco.k6 .gco-sc .c0{opacity:0;transition-delay:1.6s}
.gco.k6 .gco-sc .c1{opacity:1;transition-delay:1.6s}
.gco-dc{display:inline-grid;font-family:'Spline Sans Mono';font-size:10.5px}
.gco-dc>span{grid-area:1/1;transition:opacity .35s,color .35s}
.gco-dc .c1{opacity:0;color:var(--tx)}
.gco.k6 .gco-dc .c0{opacity:0;transition-delay:1.7s}
.gco.k6 .gco-dc .c1{opacity:1;transition-delay:1.75s}
/* la fiche du devis */
.gco-fh{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.gco-ft{display:flex;align-items:center;gap:9px;font-family:'Schibsted Grotesk';font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--tx)}
.gco-fm{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:11px;color:var(--tx-3)}
.gco-fm .ico{width:12px;height:12px}
.gco-fm b{color:var(--tx-2);font-weight:500}
.gco-fh .mk-btn .ico{width:11px;height:11px}
.gco-pj{display:flex;align-items:center;gap:10px;margin-top:12px;padding:8px 11px;border-radius:9px;border:1px dashed color-mix(in srgb,var(--c-boutiques) 45%,var(--bd-2));font-size:11px;color:var(--tx)}
.gco-fl{margin-top:12px;border:1px solid var(--bd);border-radius:11px;overflow:hidden}
.gco-flh,.gco-fln{display:grid;grid-template-columns:34px minmax(0,1fr) 26px 62px 72px;gap:8px;align-items:center;padding:0 12px}
.gco-flh{height:28px;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)}
.gco-flh>span:first-child{grid-column:1 / span 2}
.gco-fln{height:56px;font-size:11.5px;color:var(--tx-2);font-variant-numeric:tabular-nums}
.gco-fln+.gco-fln{border-top:1px solid var(--bd)}
.gco-fln .nm b{display:block;font-size:11.5px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gco-fln .nm small{display:block;margin-top:2px;font-family:'Spline Sans Mono';font-size:9px;color:var(--tx-3)}
.gco-fl .r{text-align:right}
.gco-fl .b{color:var(--tx);font-weight:600}
.gco-fz{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.gco-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)}
.gco-fs{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:8px;margin-top:12px}
.gco-fs>div{border:1px solid var(--bd);border-radius:10px;padding:8px 11px;display:flex;flex-direction:column;gap:4px;background:rgba(255,255,255,.02)}
.gco-fs b{font-size:14px;font-weight:600;color:var(--tx);font-variant-numeric:tabular-nums}
.gco-fa{display:flex;align-items:center;gap:10px;margin-top:12px;padding:9px 11px;border-radius:9px;border:1px solid var(--bd);font-size:11px;color:var(--tx-2)}
.gco-fa .ico{width:15px;height:15px;color:var(--c-espace-client);flex:none}
.gco-fa b{color:var(--tx);font-weight:600;margin-right:8px}
.gco-t3{left:18px;bottom:16px;max-width:486px;white-space:nowrap}
.gco-t3>.ico{width:16px;height:16px;flex:none;color:var(--c-devis)}
.gco[data-s="6"] .gco-t3{opacity:1;transform:none;transition-delay:1.9s}

/* --- Curseur : une position par étape (coordonnées dans .gco, 1120 px de large). Cibles du
   back-office exprimées depuis son coin (--box / --boy) : sur mobile, il se pose sur la boutique. --- */
.gco .mk-cur{--cx:486px;--cy:314px}
.gco.k1 .mk-cur{--cx:420px;--cy:540px}
.gco.k2 .mk-cur{--cx:470px;--cy:470px}
.gco.k3 .mk-cur{--cx:150px;--cy:409px}
.gco.k4 .mk-cur{--cx:236px;--cy:452px}
.gco.k5 .mk-cur{--cx:108px;--cy:500px}
.gco.k6 .mk-cur{--cx:calc(var(--box) + 338px * var(--bs));--cy:calc(var(--boy) + 249px * var(--bs))}
.gco.k7 .mk-cur{--cx:calc(var(--box) + var(--chx,404px) * var(--bs));--cy:calc(var(--boy) + var(--chy,82px) * var(--bs))}
.gco[data-s="7"] .mk-cur{transition-delay:1.5s}
/* s8 : Thomas suit sa demande, plus de geste à montrer (et l'état final du mouvement réduit reste net) */
.gco[data-s="8"] .mk-cur{opacity:0}
.gco[data-s="1"] .mk-cur::after,.gco[data-s="3"] .mk-cur::after,.gco[data-s="5"] .mk-cur::after,.gco[data-s="7"] .mk-cur::after{animation:clk .55s var(--ez) .8s forwards}
.gco[data-s="3"] .mk-cur::after{animation-delay:1.3s}

/* --- Mobile : le back-office se pose sur la boutique le temps de son étape --- */
@media(max-width:700px){
  .gco{--box:64px;--boy:112px;--bs:.88;height:640px}
  .gco-lane{display:none}
  .gco-bo{z-index:9;scale:var(--bs);transform-origin:0 0;box-shadow:0 40px 80px -30px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.4);opacity:0;transform:translateX(60px);transition:opacity .6s,transform .7s var(--ez)}
  .gco.k6 .gco-bo{opacity:1;transform:none;transition-delay:.3s}
  .gco.k8 .gco-bo{opacity:0;transform:translateX(60px);transition-delay:.2s}
  .gco-when{left:292px}
}

/* ======================= La situation : le décor ======================= */
.gcs{margin-top:64px}
.gcs-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-bottom:20px}
.gcs-h .k{font-family:'Spline Sans Mono';font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fx-c);display:inline-flex;align-items:center;gap:10px}
.gcs-h .k::before{content:"";width:16px;height:5px;border-radius:3px;background:var(--fx-c)}
.gcs-h p{font-size:15px;color:var(--tx-2)}
.gcs-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gcs-c{position:relative;display:flex;flex-direction:column;gap:16px;padding:20px 22px 22px;border:1px solid var(--bd);border-radius:20px;background:var(--bg-2);overflow:hidden}
.gcs-c::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:var(--sc);opacity:.85}
.gcs-n{font-family:'Spline Sans Mono';font-size:10.5px;letter-spacing:.06em;color:var(--sc)}
.gcs-c>p{font-size:14px;line-height:1.55;color:var(--tx-2)}
.gcs-c>p b{color:var(--tx);font-weight:600}
.gcs-tree,.gcs-shop,.gcs-roles{height:150px;border-radius:14px}
.gcs-tree{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;border:1px solid var(--bd);background:var(--bg)}
.gcs-root{display:inline-flex;align-items:center;gap:9px;padding:7px 12px 7px 10px;border-radius:10px;border:1px solid var(--bd-2);background:var(--bg-3)}
.gcs-root .ico{width:15px;height:15px;color:var(--sc)}
.gcs-root b,.gcs-kids b{display:block;font-size:12.5px;font-weight:600;color:var(--tx);white-space:nowrap}
.gcs-root small,.gcs-kids small{display:block;font-family:'Spline Sans Mono';font-size:9px;color:var(--tx-3)}
.gcs-w{width:72%;height:24px;fill:none;stroke:color-mix(in srgb,var(--sc) 55%,var(--bd-2));stroke-width:1.5;overflow:visible}
.gcs-kids{display:flex;justify-content:space-between;gap:8px;width:100%}
.gcs-kids>span{flex:1;padding:7px 10px;border-radius:10px;border:1px solid var(--bd-2);background:var(--bg-3);text-align:center}
.gcs-shop{display:flex;flex-direction:column;justify-content:center;gap:7px;padding:12px 14px;background:#fff;border:1px solid rgba(255,255,255,.1)}
.gcs-url{font-family:'Spline Sans Mono';font-size:10px;color:var(--tx-3)}
.gcs-rule{display:flex;justify-content:space-between;align-items:center;padding-top:7px;border-top:1px solid var(--bd);font-size:11px;color:#141418}
.gcs-rule b{font-family:'Spline Sans Mono';font-size:11px;font-weight:500;padding:1px 7px;border-radius:5px;border:1px solid var(--bd-2)}
.gcs-tg{width:28px;height:16px;border-radius:8px;background:var(--nv);position:relative}
.gcs-tg::after{content:"";position:absolute;right:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff}
.gcs-roles{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:9px;border:1px solid var(--bd);background:var(--bg)}
.gcs-roles>span{display:grid;grid-template-columns:8px minmax(0,1fr);column-gap:10px;row-gap:1px;align-items:baseline;padding:5px 9px;border-radius:9px;background:var(--bg-3);line-height:1.3}
.gcs-roles>span::before{content:"";grid-row:1 / span 2;align-self:center;width:8px;height:8px;border-radius:50%;background:var(--sc)}
.gcs-roles b{font-size:12px;font-weight:600;color:var(--tx)}
.gcs-roles small{font-size:10.5px;color:var(--tx-3)}
@media(max-width:900px){.gcs-row{grid-template-columns:1fr}.gcs{margin-top:44px}}

/* ======================= Le trajet ======================= */
.gtj .uc-cal-d .gtj-ds{border-radius:5px;transition:color .4s}
.gtj.a1 .uc-cal-d .gtj-ds{color:var(--c-boutiques);outline:1px dashed color-mix(in srgb,var(--c-boutiques) 65%,transparent);outline-offset:1px}

/* fragments clairs de la boutique */
.gtj .lt.mk-float{box-shadow:0 40px 80px -30px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.3)}
.gtj-adm,.gtj-oc,.gtj-tb{width:520px}
.gtj .gsh-hd{height:44px;padding:0 14px}
.gtj .gsh-srch{max-width:200px}
.gtj-ab{padding:10px 16px 14px;display:flex;flex-direction:column;gap:10px;color:#141418}
.gtj-sub{display:flex;gap:2px;font-size:10.5px;color:var(--tx-2);border-bottom:1px solid var(--bd)}
.gtj-sub span{padding:0 7px 7px;border-bottom:2px solid transparent;margin-bottom:-1px}
.gtj-sub .on{color:#141418;font-weight:600;border-bottom-color:var(--nv)}

/* L0 — inviter */
.gtj-uh{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.gtj-uh>b,.tb-h>b{font-family:'Schibsted Grotesk';font-size:15px;font-weight:600}
.gtj-uh>span{font-size:10.5px;color:var(--tx-3)}
.gtj-inv{display:flex;flex-direction:column;gap:7px;padding:10px 11px;border-radius:10px;border:1px solid var(--bd);background:#FAFAF8}
.gtj-it{font-size:11.5px;font-weight:600}
.gtj-ig{display:grid;grid-template-columns:1.55fr 1fr 1fr;gap:7px}
.gtj-ig .fl{display:flex;flex-direction:column;gap:3px;min-width:0}
.gtj-ig em{font-style:normal;font-size:9.5px;color:var(--tx-3)}
.gtj-ia{display:flex;align-items:center;gap:12px}
.gtj-ia small{font-size:9.5px;line-height:1.4;color:var(--tx-3)}
.gtj-go{flex:none;height:30px}
.a0 .gtj-go{transform:scale(.96);box-shadow:0 0 0 4px rgba(30,58,138,.18);transition-delay:1.6s}
.gtj-ut .tr{grid-template-columns:minmax(0,1fr) 120px 112px}
.gtj-ck{font-style:normal;display:inline-flex;align-items:center;height:19px;padding:0 8px;border-radius:999px;border:1px dashed var(--bd-2);font-size:9.5px;font-weight:600;color:var(--tx-2);white-space:nowrap}
.gtj-ck.on{border-style:solid;background:var(--nv-t);border-color:rgba(30,58,138,.25);color:var(--nv)}
.gtj-nw{opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--ez),background .5s}
.a0 .gtj-nw{opacity:1;transform:none;background:#F4F6FB;transition-delay:2s}

/* L1 — la fiche produit, puis le panier */
.gtj .lay1{display:block}
.gtj-pp{position:absolute;left:4px;top:8px;width:306px;padding:13px 14px;border-radius:13px;background:#fff;display:flex;flex-direction:column;gap:8px;color:#141418}
.pp-h{display:flex;align-items:center;gap:10px}
.pp-h b{display:block;font-size:12.5px;font-weight:600}
.pp-h small{display:block;font-size:10px;color:var(--tx-3)}
.pp-lh{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.pp-lh small{font-size:10px;color:var(--tx-3)}
.gtj-pp .gsh-h3{font-size:11.5px}
.pp-tier{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.pp-tier span{display:flex;flex-direction:column;gap:2px;padding:6px 7px;border-radius:7px;border:1px solid var(--bd);font-family:'Spline Sans Mono';font-size:8.5px;color:var(--tx-3);transition:background .35s,color .35s,border-color .35s}
.pp-tier b{font-family:'Hanken Grotesk';font-size:11px;font-weight:600;color:#141418;transition:color .35s}
/* le palier n'est surligné qu'une fois le minimum atteint (26 pièces → 25+) */
.a1 .pp-tier .t1{border-color:var(--nv);background:var(--nv);color:rgba(255,255,255,.8);transition-delay:1.4s}
.a1 .pp-tier .t1 b{color:#fff;transition-delay:1.4s}
.pp-sz{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.pp-sz label{display:flex;flex-direction:column;align-items:center;gap:3px;font-family:'Spline Sans Mono';font-size:8.5px;color:var(--tx-3)}
.pp-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 .25s,border-color .25s}
.a1 .pp-sz b{color:#141418;border-color:var(--tx-3)}
.a1 .pp-sz label:nth-child(1) b{transition-delay:.5s}.a1 .pp-sz label:nth-child(2) b{transition-delay:.7s}.a1 .pp-sz label:nth-child(3) b{transition-delay:.9s}
.a1 .pp-sz label:nth-child(4) b{transition-delay:1.1s}.a1 .pp-sz label:nth-child(5) b{transition-delay:1.3s}.a1 .pp-sz label:nth-child(6) b{transition-delay:1.5s}
.a1 .pp-sz label:nth-child(7) b{transition-delay:1.7s}
/* Le pied suit la saisie, case par case : « N pièces × prix du palier » et le total HT ; sous le minimum
   (24), l'alerte « Encore N pièces… ». Chaque état est posé, opaque, sur le précédent. */
.pp-f{display:grid;padding-top:8px;border-top:1px solid var(--bd)}
.pp-f>span{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;align-items:baseline;column-gap:8px;row-gap:3px;background:#fff;opacity:0;transition:opacity .12s}
.pp-f .q{font-size:10.5px;color:var(--tx-2)}
.pp-f b{font-family:'Schibsted Grotesk';font-size:13px;font-weight:600;color:#141418;font-variant-numeric:tabular-nums;white-space:nowrap}
.pp-f em{grid-column:1 / -1;font-style:normal;font-size:10px;font-weight:600;color:#9A6A00}
.pp-f>span:first-child{opacity:1}
.a1 .pp-f>span{opacity:1}
.a1 .pp-f>span:nth-child(2){transition-delay:.6s}.a1 .pp-f>span:nth-child(3){transition-delay:.8s}.a1 .pp-f>span:nth-child(4){transition-delay:1s}
.a1 .pp-f>span:nth-child(5){transition-delay:1.2s}.a1 .pp-f>span:nth-child(6){transition-delay:1.4s}.a1 .pp-f>span:nth-child(7){transition-delay:1.6s}
.a1 .pp-f>span:nth-child(8){transition-delay:1.8s}
.gtj-cart{position:absolute;right:4px;bottom:8px;width:236px;padding:13px 14px;border-radius:13px;background:#fff;display:flex;flex-direction:column;gap:7px;color:#141418;
  opacity:0;transform:translateY(14px);transition:opacity .5s,transform .7s var(--ez)}
.a1 .gtj-cart{opacity:1;transform:none;transition-delay:2.2s}
.ca-h{display:flex;justify-content:space-between;align-items:baseline}
.ca-h b{font-family:'Schibsted Grotesk';font-size:15px;font-weight:600}
.ca-h span{font-size:10px;color:var(--tx-3)}
.ca-ad{display:grid;grid-template-columns:12px minmax(0,1fr);gap:8px;padding:7px 8px;border-radius:8px;border:1px solid rgba(30,58,138,.35);background:var(--nv-t)}
.ca-ad i{width:12px;height:12px;margin-top:1px;border-radius:50%;border:3.5px solid var(--nv);background:#fff}
.ca-ad b{display:block;font-size:11px}
.ca-ad small{display:block;font-size:9.5px;line-height:1.35;color:var(--tx-3)}
.ca-kv{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;color:var(--tx-2)}
.ca-kv b{color:#141418;font-weight:600}
.ca-kv.big{align-items:baseline;padding-top:6px;border-top:1px solid var(--bd)}
.ca-kv.big span{font-weight:600;color:#141418}
.ca-kv.big b{font-family:'Schibsted Grotesk';font-size:16px;font-variant-numeric:tabular-nums}
.a1 .ca-go{transform:scale(.96);box-shadow:0 0 0 4px rgba(30,58,138,.18);transition-delay:3.4s}
.ca-m{font-size:9px;color:var(--tx-3);text-align:center}

/* L2 — l'e-mail du valideur, puis la validation */
.gtj .lay2{display:block}
.gtj-ml{position:absolute;left:4px;top:6px;width:318px;border-radius:13px;background:#fff;overflow:hidden;color:#141418}
.gtj-ml .ml-b{padding:10px 14px 13px;font-size:11px;line-height:1.5;color:var(--tx-2)}
.gtj-ml .ml-b b{color:#141418}
.gtj-ml .gsh-btn{display:flex;width:max-content;margin-top:9px;height:28px}
.gtj-vc{position:absolute;right:4px;bottom:6px;width:352px;padding:12px 13px;border-radius:13px;background:#fff;display:flex;flex-direction:column;gap:8px;color:#141418;
  opacity:0;transform:translateY(14px);transition:opacity .5s,transform .7s var(--ez)}
.a2 .gtj-vc{opacity:1;transform:none;transition-delay:.9s}
.vc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.vc-top b:not(.vc-m){display:block;font-family:'Spline Sans Mono';font-size:12.5px;font-weight:500}
.vc-top>span small{display:block;margin-top:2px;font-size:9.5px;color:var(--tx-3)}
.vc-l{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--bd);font-size:10.5px;color:#141418;font-variant-numeric:tabular-nums}
.vc-l span:last-child{color:var(--tx-2)}
.vc-liv{font-size:9.5px;line-height:1.4;color:var(--tx-3)}
.vc-a,.vc-done{height:34px}
.vc-a{display:flex;gap:8px;transition:opacity .3s}
.a2 .vc-ok{transform:scale(.96);box-shadow:0 0 0 4px rgba(30,58,138,.18);transition-delay:2.2s}
.a2 .vc-a{opacity:0;transition-delay:2.7s}
.vc-done{position:absolute;left:13px;right:13px;bottom:12px;display:flex;align-items:center;gap:9px;padding:0 12px;border-radius:9px;background:#141418;color:#fff;font-size:11px;
  opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--ez-b)}
.vc-done .ico{width:14px;height:14px;stroke-width:2.4;flex:none}
.a2 .vc-done{opacity:1;transform:none;transition-delay:2.8s}

/* L3 — Stolip, tout seul */
.gtj-auto{width:480px;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.gtj-ah{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.gtj-ah b{display:block;font-size:14px}
.gtj-ah small{font-size:11px;color:var(--tx-2)}
.gtj-ah .okc{width:32px;height:32px;border-radius:50%;background:var(--c-devis);color:#0A0B0D;display:grid;place-items:center;flex:none;transform:scale(0);transition:transform .6s var(--ez-b) .2s}
.gtj-ah .okc .ico{width:16px;height:16px;stroke-width:2.2}
[data-active="3"] .gtj-ah .okc,.a4 .gtj-ah .okc{transform:none}
.gtj-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)}
.gtj-ev>i{width:10px;height:10px;margin-top:3px;border-radius:50%;background:var(--ec);flex:none}
.gtj-ev b{display:block;font-weight:600;color:var(--tx)}
.gtj-ev small{font-size:10.5px;color:var(--tx-3)}
[data-active="3"] .gtj-ev,.a4 .gtj-ev{opacity:1;transform:none}

/* L4 — Julie valide, la commande se crée */
.gtj-dv{position:relative;width:480px;padding:14px 16px}
.dv-h{position:relative;display:flex;justify-content:space-between;align-items:center;gap:10px}
.dv-t{display:flex;align-items:center;gap:9px;font-family:'Schibsted Grotesk';font-size:16px;font-weight:600;color:var(--tx)}
.gtj-st{display:inline-grid;transition:background .4s,color .4s,border-color .4s}
.gtj-st>span{grid-area:1/1;transition:opacity .3s}
.gtj-st .s1{opacity:0}
.a4 .gtj-st{background:var(--tx);border-color:var(--tx);color:var(--bg);transition-delay:1.7s}
.a4 .gtj-st .s0{opacity:0;transition-delay:1.7s}.a4 .gtj-st .s1{opacity:1;transition-delay:1.7s}
.gtj-chg .ico{width:11px;height:11px}
.gtj-menu{position:absolute;right:0;top:36px;z-index:12;width:228px;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)}
.gtj-menu span{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:7px;font-size:11.5px;color:var(--tx-2)}
.gtj-menu .ico{width:12px;height:12px}
.gtj-menu .hl{color:var(--tx)}
[data-active="4"] .gtj-menu{animation:gtj-menu 1.5s var(--ez) .5s both}
[data-active="4"] .gtj-menu .hl{animation:gtj-hl 1.5s linear .5s both}
@keyframes gtj-menu{0%{opacity:0;transform:translateY(-6px) scale(.98)}15%,82%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes gtj-hl{0%,45%{background:transparent}55%,100%{background:rgba(255,255,255,.08)}}
.dv-m{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:var(--tx-3)}
.dv-m .ico{width:12px;height:12px}
.dv-m b{color:var(--tx-2);font-weight:500}
.gtj-ok{position:relative;width:480px;opacity:0;transform:translateY(10px)}
.a4 .gtj-ok{opacity:1;transform:none;transition-delay:2s}
.gtj-cmd{width:480px;padding:14px 16px;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .6s var(--ez)}
.a4 .gtj-cmd{opacity:1;transform:none;transition-delay:2.5s}
.cm-ad{display:flex;align-items:flex-start;gap:10px;margin-top:4px;padding:9px 11px;border-radius:9px;border:1px solid var(--bd)}
.cm-ad .ico{width:15px;height:15px;color:var(--c-espace-client);flex:none;margin-top:1px}
.cm-ad b{display:block;font-size:12px;font-weight:600;color:var(--tx)}
.cm-ad small{font-size:10.5px;color:var(--tx-3)}
.cm-fr{position:relative;display:grid;grid-template-columns:1fr 1fr;margin-top:12px}
.cm-fr::before{content:"";position:absolute;left:25%;right:25%;top:7px;height:2px;background:var(--bd-2)}
.cm-fr::after{content:"";position:absolute;left:25%;top:7px;height:2px;width:50%;background:var(--c-commandes);transform-origin:0 50%;transform:scaleX(0);transition:transform .8s var(--ez)}
.a4 .cm-fr::after{transform:none;transition-delay:3.4s}
.cm-fr .f{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.cm-fr .f i{width:16px;height:16px;border-radius:50%;background:var(--bg-3);border:2px solid var(--bd-2);transition:background .4s,border-color .4s}
.cm-fr .f b{font-size:11.5px;font-weight:600;color:var(--tx-3);transition:color .4s}
.cm-fr .f small{font-family:'Spline Sans Mono';font-size:9.5px;color:var(--tx-3)}
.a4 .cm-fr .f i{background:var(--c-commandes);border-color:var(--c-commandes)}
.a4 .cm-fr .f b{color:var(--tx)}
.a4 .cm-fr .f0 i,.a4 .cm-fr .f0 b{transition-delay:2.9s}
.a4 .cm-fr .f1 i,.a4 .cm-fr .f1 b{transition-delay:4s}

/* L5 — livrée, côté demandeur */
.gtj-oc .oc-in{padding:12px 16px 14px;display:flex;flex-direction:column;gap:10px;background:#FBFBFA}
.gtj-oc article{padding:12px 14px}
.gtj-oc .oc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.oc-sv{margin-top:10px;font-size:10.5px;color:var(--tx-3)}
.oc-sv u{text-decoration:none;font-family:'Spline Sans Mono';color:var(--nv)}
.gtj-sh{justify-items:center}
.gtj-sh .c1,.gtj-sh .c2{opacity:0}
.a5 .gtj-sh .c0{opacity:0;transition-delay:.9s}
.a5 .gtj-sh .c1{opacity:1;transition-delay:.9s}
.a5 .gtj-sh .c1{animation:gtj-out .01s linear 2.6s forwards}
.a5 .gtj-sh .c2{opacity:1;transition-delay:2.6s}
.a5 .gtj-sh{background:var(--nv-t);border-color:rgba(30,58,138,.3);color:var(--nv);transition-delay:.9s}
@keyframes gtj-out{to{opacity:0}}
.gtj-trk{--tp:.75}
.gtj-trk .tk{color:#141418}
.gtj-trk .tk i{background:var(--nv);border-color:var(--nv)}
.gtj-trk .k3 i{background:#fff;box-shadow:0 0 0 3px rgba(30,58,138,.15)}
.gtj-trk .k4{color:var(--tx-3)}
.gtj-trk .k4 i{background:#fff;border-color:#D5D7DC}
.a5 .gtj-trk{--tp:1}
.a5 .gtj-trk::after{transition-delay:.7s}
.a5 .gtj-trk .k3 i{background:var(--nv);box-shadow:none;transition-delay:.7s}
.a5 .gtj-trk .k4{color:#141418;transition-delay:1.2s}
.a5 .gtj-trk .k4 i{background:var(--nv);border-color:var(--nv);transition-delay:1.2s}
.oc-sv{opacity:0;transition:opacity .4s}
.a5 .oc-sv{opacity:1;transition-delay:1.4s}
.gtj-lv{display:flex;align-items:center;gap:12px;width:360px;padding:11px 14px;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .6s var(--ez)}
.gtj-lv .ico{width:18px;height:18px;color:var(--c-commandes);flex:none}
.gtj-lv b{display:block;font-size:12.5px;color:var(--tx)}
.gtj-lv small{font-size:10.5px;color:var(--tx-3)}
.a5 .gtj-lv{opacity:1;transform:none;transition-delay:2.8s}

/* L6 — tableau de bord de la gérante */
.tb-h{display:flex;justify-content:space-between;align-items:center}
.tb-h .gsh-in{height:26px;font-size:10.5px}
.tb-kp{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.tb-kp>div{display:flex;flex-direction:column;gap:3px;padding:8px 9px;border-radius:9px;border:1px solid var(--bd)}
.tb-kp span{font-size:9.5px;color:var(--tx-3)}
.tb-kp b{font-family:'Schibsted Grotesk';font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.tb-kp small{font-size:9px;color:var(--tx-3)}
.tb-fi{display:flex;flex-direction:column;gap:6px}
.tb-fi .bar{display:grid;grid-template-columns:86px minmax(0,1fr) 62px;gap:10px;align-items:center;font-size:10.5px}
.tb-fi .bar b{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.tb-fi .bt{height:7px;border-radius:4px;background:#EFEFEC;overflow:hidden}
.tb-fi .bt i{display:block;height:100%;border-radius:inherit;background:var(--nv);transform-origin:0 50%;transform:scaleX(0);transition:transform 1s var(--ez)}
.a6 .tb-fi .bt i{transform:scaleX(var(--w));transition-delay:.6s}
.a6 .tb-fi .bar+.bar .bt i{transition-delay:.8s}
.tb-x{border-top:1px solid var(--bd);padding-top:9px;display:flex;flex-direction:column;gap:7px}
.tb-xh{display:flex;justify-content:space-between;align-items:center}
.tb-xh b{font-size:12px;font-weight:600}
.tb-csv{height:26px;padding:0 10px;font-size:10.5px}
.tb-csv .ico{width:12px;height:12px}
.a6 .tb-csv{transform:scale(.95);box-shadow:0 0 0 4px rgba(30,58,138,.14);transition-delay:1.9s}
.tb-r{display:grid;grid-template-columns:62px minmax(0,1fr) auto 80px 70px;gap:8px;align-items:center;padding:6px 8px;border-radius:8px;background:#FAFAF8;font-size:10.5px;color:var(--tx-2)}
.tb-r>b{font-family:'Spline Sans Mono';font-size:10.5px;font-weight:500;color:#141418}
.tb-r .r{text-align:right;color:#141418;font-weight:600;font-variant-numeric:tabular-nums}

/* Panneau du trajet : les couches sont dessinées sur 560 × 452 ; le canevas ne se rétrécit pas
   (item flex : il passerait à la largeur utile du panneau et les fragments côte à côte se chevaucheraient). */
.gtj .fx-canvas>.cx{flex:none}

/* Tablette (600–900 px) : le canevas garde sa largeur de dessin (zoom 1) mais le panneau est bas
   (2 × min(28vh, 240 px)) : on réduit les couches pour qu'elles tiennent entre l'en-tête et le calendrier. */
@media(min-width:600px) and (max-width:900px){.gtj .cx>.lay{scale:.8}}